/* ============================================================================
   SKYLAB PLATAFORMA (cuentas / xcuentas) — Capa de interfaz  skylab-ui.css
   ----------------------------------------------------------------------------
   Identidad OFICIAL Skylab: Cyan #00B6DE, Maastricht Blue #0A2239,
   Cool Black #001A5D, Granite Gray #606060.
   Tipografía: Archivo (títulos) + Inter (texto). Ambas auto-hospedadas.
   Tono: tecnológico, profesional, minimalista, empresarial.
   NO INVASIVA · MODO CLARO ÚNICO en toda la plataforma · Offline.
   ============================================================================ */
/* Inter estaba declarada en --sans pero no se cargaba en ninguna parte, asi que
   todo el texto caia en la fuente del sistema. Las dos plantillas pedian Rubik
   y Montserrat a Google Fonts, que esta hoja no usa para nada.

   Ahora Inter y Archivo van auto-hospedadas aqui debajo, y esa peticion a
   Google ya no existe. No vuelvas a meter un CDN de fuentes: nos costaba una
   espera en cada carga y le pasaba la IP del usuario a Google. */
@font-face{font-family:'Inter'; src:url('../fonts/inter/Inter-400.ttf') format('truetype');
  font-weight:400; font-display:swap; font-style:normal;}
@font-face{font-family:'Inter'; src:url('../fonts/inter/Inter-500.ttf') format('truetype');
  font-weight:500; font-display:swap; font-style:normal;}
@font-face{font-family:'Inter'; src:url('../fonts/inter/Inter-600.ttf') format('truetype');
  font-weight:600; font-display:swap; font-style:normal;}
@font-face{font-family:'Inter'; src:url('../fonts/inter/Inter-700.ttf') format('truetype');
  font-weight:700; font-display:swap; font-style:normal;}

/* Archivo para titulos. Grotesca tecnica y neutra: aguanta el peso 300 sin
   perder legibilidad y no compite con el contenido, que es lo que pide la
   direccion SpaceX / Tesla. Auto-hospedada, sin CDN. */
@font-face{font-family:'Archivo'; src:url('../fonts/archivo/Archivo-300.ttf') format('truetype');
  font-weight:300; font-display:swap; font-style:normal;}
@font-face{font-family:'Archivo'; src:url('../fonts/archivo/Archivo-400.ttf') format('truetype');
  font-weight:400; font-display:swap; font-style:normal;}
@font-face{font-family:'Archivo'; src:url('../fonts/archivo/Archivo-500.ttf') format('truetype');
  font-weight:500; font-display:swap; font-style:normal;}
@font-face{font-family:'Archivo'; src:url('../fonts/archivo/Archivo-600.ttf') format('truetype');
  font-weight:600; font-display:swap; font-style:normal;}

/* RED DE SEGURIDAD PARA EL PESO 700 DE ARCHIVO.

   De Archivo tenemos 300, 400, 500 y 600. No hay un 700, ni en el proyecto ni
   en el sistema, y sin internet no se puede traer.

   El problema es que cuando una regla pide un peso que no existe, el navegador
   no se rinde: lo FALSIFICA. Engorda los trazos del 600 a base de calculo, y
   eso en mayusculas con espaciado ancho —que es como usamos Archivo en toda la
   plataforma— se ve emborronado.

   Fueron apareciendo de uno en uno mientras se revisaban las pantallas: los
   titulos de Inicio, el distintivo "PROXIMAMENTE", los asteriscos de campo
   obligatorio, la opcion marcada del selector RTN/Identidad, las etiquetas de
   la pantalla de contrasena... Cada vez que se corregia uno aparecia otro en la
   siguiente pantalla.

   Asi que en lugar de perseguirlos, se declara aqui: si alguien pide Archivo
   700, se le da el archivo del 600. Recibe letras de verdad en vez de una
   negrita inventada, y vale tanto para lo que hay hoy como para lo que se
   escriba manana.

   Si algun dia se consigue un Archivo-700.ttf de verdad, se cambia la ruta de
   esta linea y ya esta. */
@font-face{font-family:'Archivo'; src:url('../fonts/archivo/Archivo-600.ttf') format('truetype');
  font-weight:700; font-display:swap; font-style:normal;}

:root{
  --brand:#00B6DE; --brand-2:#00A0C6; --brand-ring:rgba(0,182,222,.28);
  --navy:#0A2239;            /* Maastricht Blue */
  --coolblack:#001A5D;       /* Cool Black */
  --granite:#606060;         /* Granite Gray */
  --live:#22A06B; --warn:#E0A100; --danger:#E14B5A; --info:#00B6DE;
  --page:#F4F7FA; --page-2:#EAEFF4;
  --surface:#FFFFFF; --glass:rgba(255,255,255,.74);
  --border:#E3E9F0; --border-2:#D2DCE6;
  --text:#0F1B2A; --soft:#4C5A6B;
  /* --mut era #8794A3, que sobre blanco da 3,09:1 y NO llega al 4,5:1 que
     exige WCAG AA para texto normal. Con #647486 son 4,79:1. Afecta a todas
     las etiquetas de campo y textos secundarios de la plataforma. */
  --mut:#5F6E7F;
  /* Cian para TEXTO sobre fondo claro. El cian de marca #00B6DE da 2,4:1
     sobre blanco: sirve de relleno (con texto oscuro encima) pero no como
     color de letra. Este es el mismo tono oscurecido: 4,84:1. */
  --brand-ink:#007C99;
  /* Mismo caso que el cian: el verde de estado #22A06B da 3,03:1 sobre blanco
     y no sirve como color de letra. Este es el mismo tono oscurecido: 5,1:1. */
  --live-ink:#157A50;
  /* Y lo mismo con el rojo: blanco sobre #E14B5A da 3,92:1, tampoco llega. */
  --danger-ink:#A81F2E;
  /* Y el ambar: el aviso naranja usaba el relleno saturado de app.css.
     Este es el tono oscuro que se lee sobre el fondo pálido (5,53:1). */
  --warn-ink:#8A5A00;
  /* ── LA ESCALA DE LETRA ────────────────────────────────────────────────
     Habia 26 tamaños distintos declarados, trece de ellos entre 9,5 y 16 px.
     Nadie distingue 10 de 10,5 px como jerarquia; lo que si se nota es el
     efecto acumulado, que nada acabe de alinearse con nada.

     Son cinco escalones, uno por papel. Cada valor se eligio sobre el grupo
     mas usado de los que sustituye, para que nada se mueva mas de un pixel:

       etiqueta   antes 9,5 / 10 / 10,5      mayusculas con espaciado
       menor      antes 11 / 11,5 / 12 / 12,5  ayuda, migas, errores, botones
       cuerpo     antes 13 / 13,5 / 14 / 14,5  texto normal, campos, avisos
       destacado  antes 15,5 / 16            nombres de cosas
       titulo     antes 22 / 24 / 25 / 26 / 29  el titular de la pantalla

     Quedan fuera cuatro medidas de una sola pieza, que no son escala sino
     dibujo: la inicial del logotipo cuando no hay imagen, las casillas del
     codigo de verificacion y el numero grande del 404. */
  /* ── ALTURA DE LOS CAMPOS ──────────────────────────────────────────────
     Habia cuatro alturas para el mismo control: 46 px en las pantallas de
     empresa y contacto, 48 en las demas, y 44 en el campo de archivo del
     logotipo, que ademas iba sin borde. Se veia a simple vista en Agregar
     empresa: el campo del logotipo quedaba dos pixeles mas bajo que sus
     vecinos.

     Se queda en 48, que es lo que ya usaban cuatro de las siete pantallas. */
  --alto-campo:44px;

  --t-etiqueta:10.5px; --t-menor:12px; --t-cuerpo:14px;
  --t-destacado:16px; --t-titulo:26px; --t-titulo-sm:23px;
  /* Un escalon mas para el titular del inicio: le da el peso de hero
     que buscamos, sin tocar el resto de la escala. */
  --t-display:32px; --t-display-sm:26px;
  /* El titular de portada. Es el unico sitio donde la letra crece de verdad, y
     por eso tiene su propio escalon en vez de reutilizar --t-titulo.

     Va escalonado por perfil y NO al mismo tamaño en los tres: 40 px anclan
     una pantalla de PC, pero en un movil de 375 px "Actualizar informacion de
     contacto" a 40 px ocuparia tres lineas y empujaria todo lo util fuera de
     la vista. Los valores por perfil estan abajo, con las demas reglas de cada
     pantalla. */
  --t-portada:32px;

  /* --radius-xs decia 10 px y NUNCA ganaba: medido en el navegador, todos los
     campos y botones se pintan a 8, porque reglas mas concretas los ponen ahi.
     O sea que el token mentia sobre como se ve la plataforma. Se pone en 8, que
     es la verdad, y las quince reglas que lo escribian a mano pasan a usarlo. */
  --radius:16px; --radius-sm:12px; --radius-xs:8px;
  /* La forma de pastilla se escribia a mano como 999px en los dos sitios que la
     usan, mientras los otros tres radios si tenian su token. Un valor suelto se
     acaba copiando mal: el tema, sin ir mas lejos, usa 1000px para lo mismo en
     el avatar. Con nombre no hay dos versiones de una misma forma. */
  --radius-pill:999px;
  /* El circulo se escribia como 50% en diez sitios. Con nombre se lee mejor y
     no se confunde con un porcentaje cualquiera. */
  --radius-circulo:50%;
  /* El boton del ojo de las contrasenas tenia 6 px en una pantalla y 7 en otra.
     Es el mismo boton. */
  --radius-boton-chico:7px;
  --shadow:0 1px 2px rgba(10,34,57,.05), 0 14px 34px -16px rgba(10,34,57,.22);
  --shadow-lg:0 2px 8px rgba(10,34,57,.06), 0 30px 70px -24px rgba(10,34,57,.34);

  /* MOVIMIENTO: una sola duracion y una sola curva para toda la plataforma.
     La curva es ease-out (arranca y se asienta), que da ese aire reposado tipo
     Tesla/SpaceX. Antes no habia easing declarado: todo usaba el "ease" por
     defecto del navegador. */
  --dur:.15s; --ease:cubic-bezier(.2,.7,.3,1);
  /* Elevacion al pasar el cursor por una tarjeta pulsable: entre plano y
     --shadow, para que se note que responde sin levantarse de golpe. */
  --shadow-hover:0 2px 6px rgba(10,34,57,.06), 0 16px 30px -18px rgba(10,34,57,.20);
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Archivo",var(--sans);
  /* Le dice al navegador de que color pintar lo que dibuja EL: barras de
     desplazamiento, desplegables de <select>, calendarios de <input date>.
     Sin esto la barra sale blanca en modo oscuro y los calendarios tambien. */
  color-scheme:light;
}
/* La plataforma va solo en modo claro. Es decision de marca de Joel, del 4 de
   agosto: el modo oscuro se cae tambien de las pantallas con sesion. Del bloque
   de acceso ya se habia ido el 31 de julio. La idea es sostener una sola
   identidad, y una identidad firme no ofrece alternador.

   Aqui habia unas 18 lineas con la paleta oscura y una regla
   [data-theme="light"]. Borre las dos. Sin boton y sin arranque de tema en
   navbar.php ya nada puede poner data-theme en el <html>, asi que era codigo
   muerto: un bloque de color que no se puede activar no es una opcion guardada
   por si acaso, es una hoja que miente sobre lo que hace el sistema.

   Si algun dia hay que recuperarlo, son tres cosas y no una: la paleta oscura
   aqui, el arranque y el boton en navbar.php, y repasar el contraste de los dos
   modos por separado (el del claro no vale para el oscuro). Todo esta en el
   historial de git. */

*{box-sizing:border-box}

/* PESO DE LETRA: el tema pide dos pesos que no tenemos, y el navegador se los
   inventa.

   Medido en el navegador, en la pantalla de login:

       app.css   body        font-weight: 300
       app.css   b, strong   font-weight: bolder   (calculado: 900)

   Nosotros servimos Inter en 400, 500, 600 y 700, y Archivo en 300, 400, 500 y
   600. O sea que no existe ni un Inter 300 ni un Inter 900.

   Cuando falta el peso, el navegador no se rinde: lo FALSIFICA. Estira los
   trazos para adelgazar o los engorda para la negrita, y eso se nota. El texto
   base de toda la plataforma se veia desvaido, y las negritas de los enlaces
   ("Crea tu cuenta gratis") salian con una negrita sintetica encima del 700.

   El tema venia con una fuente que si tenia un 300. La nuestra empieza en 400.
   Aqui se le dice el peso que de verdad servimos. */
body{background:var(--page) !important; color:var(--text) !important; font-family:var(--sans) !important;
  font-weight:400; -webkit-font-smoothing:antialiased;}
/* "bolder" es relativo al padre y por eso acababa en 900. Un valor fijo, y del
   que tenemos archivo. */
b,strong{font-weight:600;}
h1,h2,h3,h4,h5,h6{color:var(--text); font-family:var(--sans); font-weight:600; letter-spacing:-.2px;}
/* Los enlaces usan --brand-ink, no --brand: el cian de marca sobre fondo
   claro da 2,4:1 y no llega al minimo de 4,5:1 para texto. */
a{color:var(--brand-ink);} a:hover{color:var(--brand);}
.text-muted{color:var(--mut) !important;}
/* Texto solo para lectores de pantalla: invisible, pero anunciable. */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;}

:focus-visible{outline:none; box-shadow:0 0 0 3px var(--brand-ring); border-radius:var(--radius-xs);}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important;}}

/* Elementos base (resto de pantallas de la plataforma) */
.card{background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:var(--radius) !important; box-shadow:var(--shadow) !important;}
.btn{border-radius:var(--radius-xs); font-weight:600; letter-spacing:.2px;}
.btn-primary{background:var(--brand) !important; border-color:var(--brand) !important; color:#04283A !important; box-shadow:0 10px 20px -10px var(--brand-ring);}
.btn-primary:hover,.btn-primary:focus{background:var(--brand-2) !important; border-color:var(--brand-2) !important;}
.btn:focus,.btn.focus{box-shadow:0 0 0 3px var(--brand-ring) !important;}
.form-control{background:var(--surface) !important; border:1px solid var(--border) !important; color:var(--text) !important; border-radius:var(--radius-xs) !important;}
.form-control:focus{border-color:var(--brand) !important; box-shadow:0 0 0 3px var(--brand-ring) !important;}
/* --- Avisos. UNA definicion, sin ambito ---

   Los avisos solidos de Bootstrap rompen el tono sobrio de las tarjetas y
   ademas NO pasan contraste: el blanco sobre el rojo da 3,92:1 y sobre el verde
   2,4:1, cuando el minimo para texto es 4,5.

   Esto estaba corregido, pero SOLO bajo .sk-auth, o sea solo en el bloque de
   acceso. En cualquier otra pantalla seguia saliendo el aviso solido que no
   pasa. Lo vi al reutilizar la hoja en "agregar empresa": el aviso de error
   salia a 3,92:1, exactamente el numero que este comentario ya avisaba.

   Ahora la version accesible es la unica que hay. El color queda de acento en
   el fondo y en el borde, y el texto va en el tono oscuro. */
.alert{border-radius:var(--radius-sm); border:0;}
.alert-danger{padding:13px 15px; margin-bottom:22px; text-align:left;
  font-size:var(--t-cuerpo); line-height:1.6;
  background:color-mix(in srgb,var(--danger) 9%,var(--surface)) !important;
  color:var(--danger-ink) !important;
  border:1px solid color-mix(in srgb,var(--danger) 30%,var(--surface)) !important;}
.alert-danger b{color:inherit;}

/* El boton de cerrar un aviso medía 16x24 px. Es el control mas pequeño de toda
   la plataforma y encima esta pegado al borde derecho, o sea justo donde peor
   se apunta con el dedo.

   El minimo comodo es 44x44. Se consigue con padding, no agrandando la "x": la
   aspa se sigue viendo igual, lo que crece es la zona que responde al toque.

   El margen negativo compensa ese padding para que el aviso no se estire por
   dentro. */
.alert .close{
  width:44px; height:44px;
  margin:-10px -6px -10px 0;
  display:inline-flex; align-items:center; justify-content:center;
  opacity:.65;}
.alert .close:hover,
.alert .close:focus-visible{opacity:1;}
.alert-success{padding:13px 15px; margin-bottom:22px; text-align:left;
  font-size:var(--t-cuerpo); line-height:1.6;
  background:color-mix(in srgb,var(--live) 9%,var(--surface)) !important;
  color:var(--live-ink) !important;
  border:1px solid color-mix(in srgb,var(--live) 30%,var(--surface)) !important;}

/* El aviso de "completa tu perfil" salia con el naranja saturado de app.css
   (rgb 255,167,109): el unico grito de color en una paleta por lo demas sobria.
   Se le da el MISMO trato contenido que a danger y success -relleno al 9%,
   texto oscuro, borde al 30%- pero en ambar, que es lo que corresponde a un
   aviso. Ahora los tres avisos son la misma familia, solo cambia el color. */
.alert-warning{padding:13px 15px; margin-bottom:22px; text-align:left;
  font-size:var(--t-cuerpo); line-height:1.6;
  background:color-mix(in srgb,var(--warn) 9%,var(--surface)) !important;
  color:var(--warn-ink) !important;
  border:1px solid color-mix(in srgb,var(--warn) 30%,var(--surface)) !important;}
.alert-warning b,.alert-warning .alert-link{color:inherit;}

/* ============================================================================
   ACCESO A LA PLATAFORMA  (login, registro, verificacion, recuperacion)
   ----------------------------------------------------------------------------
   Diseno aprobado: UNA sola tarjeta centrada, sin panel lateral. El logo va
   dentro de la tarjeta, grande, separado del formulario por una linea.
   Modo claro unico, como el resto de la plataforma.
   ============================================================================ */
/* Peso 400 en todo el bloque. El 300 lo heredaba de app.css, y a 11-14 px
   Inter Light se ve lavado, no tecnico: Tesla y SpaceX reservan el peso ligero
   para los titulares grandes y usan 400-500 en el texto pequeño. El h1 declara
   su propio 300 mas abajo, asi que no le afecta. Los campos lo heredan porque
   .sk-input input lleva font:inherit. */
/* OBJETIVO: que la pantalla quepa sin desplazar en un portatil de 720 px de
   alto util. Medido antes: las SEIS pantallas del acceso obligaban a bajar,
   incluso el login. El aire se recorta del encabezado —logo, regla, titulo—,
   no de los campos ni de los objetivos tactiles. Todo sigue en escala de 8. */
.sk-auth{position:relative; min-height:100vh; min-height:100dvh; display:grid;
  place-items:center; padding:24px 20px; background:var(--page); font-weight:400;}

/* La version anterior tenia panel de marca a la izquierda. Se retiro del
   marcado; esta regla queda por si alguna vista aun lo incluye. */
.sk-auth-brand,.sk-auth-feats{display:none !important;}

/* Sin sombra. La sombra difusa es lenguaje de producto de consumo; lo
   industrial es superficie plana y borde fino. El borde de 1 px basta para
   separar la tarjeta del fondo, que ya es un gris distinto.
   Relleno 40/40/32: escala de 8, igual que el resto del ritmo. */
/* app.css le pone a .form-signin un max-width de 420 px y padding de 15: es la
   clase de "formulario de acceso" del tema. Con la tarjeta estrecha no se
   notaba, pero al ensanchar registro a 720 px el formulario se quedaba en 420 y
   las dos columnas salian aplastadas. Medido en el navegador siguiendo la
   cadena de contenedores. */
.sk-auth .form-signin{max-width:none !important; padding:0 !important; margin:0 !important;}

.sk-auth-card{position:relative; width:100%; max-width:416px; text-align:left;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 40px 26px; box-shadow:none;}

/* --- logo dentro de la tarjeta --- */
.sk-auth-card .sk-logo-sm{display:block; height:30px; width:auto; margin:0 auto 14px;}  /* wordmark solo-letras: 30px se lee profesional sin dominar la tarjeta */
.sk-auth-card .sk-rule{height:1px; background:var(--border); margin:0 -40px 16px;}
/* Y cuando la empresa no ha subido logotipo, la inicial ocupa ese mismo hueco.
   .sk-avatar-inicial no trae medidas -las toma de donde se pone, 30 px en la
   barra superior-, asi que en una tarjeta de acceso se estiraba a lo ancho y
   salia una elipse. 44 px cuadrados: la misma altura que el logotipo mas el
   aire que necesita una letra dentro de un circulo. */
.sk-auth-card .sk-avatar-inicial{width:44px; height:44px; margin:0 auto 14px; font-size:20px;}

/* Archivo, no Inter. El sistema aprobado reserva Archivo para eyebrow,
   titulos, etiquetas, botones y linea legal; Inter solo para el contenido de
   los campos y el texto de cuerpo. Estos tres bloques se habian quedado en
   Inter y rompian la firma tipografica: el boton .btn de las pantallas con
   sesion ya usaba Archivo y el .sk-btn del acceso no. */
.sk-auth-card .sk-eyebrow{display:block; text-align:center; font-family:var(--display);
  font-size:var(--t-etiqueta); font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:var(--mut); margin:0 0 8px;}
/* Peso 300: el titulo grande y FINO es la firma de SpaceX y Tesla.
   Con 600 la pantalla se parece a cualquier panel de administracion. */
.sk-auth-card h1{font-family:var(--display); font-size:var(--t-titulo); font-weight:300;
  letter-spacing:-.4px; text-align:center; margin:0 0 8px; color:var(--text);}
/* Ritmo vertical en escala estricta de 8: 8, 16, 24, 32. Antes los huecos
   eran 30, 12, 8, 28, 26 y 22 px, que no siguen ninguna unidad; se nota aunque
   no se sepa por que. */
.sk-auth-card .sk-sub{text-align:center; color:var(--mut); margin:0 0 24px; font-size:var(--t-cuerpo);}

/* --- entrar con Google ---
   Va arriba del formulario porque es el camino corto, y tiene que verse como
   una alternativa REAL, no como un adorno: mismo alto que los campos, mismo
   radio y el ancho completo de la tarjeta.

   Blanco con borde y no del color de marca: la marca es de NUESTRO boton -el de
   iniciar sesion- y dos botones de color en la misma tarjeta no son jerarquia,
   son indecision. Ademas Google pide que su icono vaya sobre fondo claro. */
.sk-google{display:flex; align-items:center; justify-content:center; gap:10px;
  height:var(--alto-campo); border-radius:var(--radius-xs);
  border:1px solid var(--border-2); background:var(--surface); color:var(--text);
  font:inherit; font-size:var(--t-cuerpo); font-weight:600; text-decoration:none;
  transition:background .15s, border-color .15s, box-shadow .15s;}
.sk-google:hover{background:var(--page-2); border-color:var(--mut); color:var(--text); text-decoration:none;}
.sk-google:focus-visible{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring);}
.sk-google svg{flex:none;}

/* La palabra "o" partiendo la tarjeta en dos caminos. Una linea sola no basta:
   sin la palabra parece un separador decorativo y no una eleccion. */
.sk-o{display:flex; align-items:center; gap:12px; margin:16px 0;
  color:var(--mut); font-size:var(--t-etiqueta); text-transform:uppercase; letter-spacing:.14em;}
.sk-o::before, .sk-o::after{content:""; flex:1; height:1px; background:var(--border);}

/* --- campos --- */
.sk-field{margin-bottom:12px;}
.sk-field label{display:block; font-size:var(--t-etiqueta); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--soft); margin:0 0 8px;}
.sk-input{position:relative; display:flex; align-items:center;}
.sk-input>svg{position:absolute; left:15px; width:18px; height:18px; stroke:var(--mut);
  fill:none; stroke-width:1.6; pointer-events:none;}  /* era 1.8: se unifica el trazo de iconos a 1.6 en toda la plataforma */
.sk-input input{width:100%; height:var(--alto-campo); padding:0 14px 0 46px; border-radius:var(--radius-xs);
  border:1px solid var(--border-2); background:var(--page-2); color:var(--text);
  font:inherit; font-size:var(--t-cuerpo); transition:background .15s, border-color .15s, box-shadow .15s;}
.sk-input input::placeholder{color:var(--mut);}
.sk-input input:focus{outline:none; background:var(--surface); border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-ring);}
.sk-input:has(.sk-eye) input{padding-right:48px;}
.sk-input .sk-eye{position:absolute; right:6px; left:auto; width:36px; height:36px; border:0;
  background:transparent; color:var(--mut); cursor:pointer; display:grid; place-items:center;
  border-radius:var(--radius-boton-chico); transition:color .15s;}
.sk-input .sk-eye:hover{color:var(--brand);}
.sk-input .sk-eye svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6;}

.sk-auth-row{display:flex; align-items:center; justify-content:flex-end; margin:16px 0 24px;}
.sk-auth-row a{font-size:var(--t-menor); font-weight:600; color:var(--soft);}
.sk-auth-row a:hover{color:var(--brand);}

.sk-btn{width:100%; height:50px; border:0; border-radius:var(--radius-xs); background:var(--brand);
  color:#03222E; font-family:var(--display); font-size:var(--t-menor); font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; cursor:pointer; transition:background .15s, transform .08s;}
.sk-btn:hover{background:var(--brand-2);}
.sk-btn:active{transform:scale(.99);}
.sk-btn[disabled]{opacity:.7; cursor:default;}

.sk-auth-alt{text-align:center; margin-top:24px; color:var(--soft); font-size:var(--t-cuerpo);}
.sk-auth-alt a{font-weight:600;}
.sk-auth-legal{text-align:center; margin-top:16px; color:var(--mut); font-size:var(--t-menor);
  line-height:1.55;}

/* Pie FUERA de la tarjeta: sostiene la composicion y da el cierre sobrio.
   Va en versalitas con mucho espaciado, como las fichas tecnicas de SpaceX. */
.sk-auth-foot{margin:16px 0 0; text-align:center; font-family:var(--display); font-size:var(--t-etiqueta);
  font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--mut);}

@media (max-width:440px){
  .sk-auth-card{padding:32px 24px 24px;}
  .sk-auth-card .sk-rule{margin-left:-24px; margin-right:-24px;}
  .sk-auth-card .sk-logo-sm{height:30px;}
  .sk-auth-card h1{font-size:var(--t-titulo-sm);}
}
@media (pointer:coarse){
  .sk-input input,.sk-btn{min-height:52px;}
  .sk-input .sk-eye{min-width:44px; min-height:44px;}
}


/* ============================================================================
   PANTALLAS CON SESION INICIADA
   ----------------------------------------------------------------------------
   Base comun a perfil, contrasena, contacto, empresa, sucursal y home.
   Reutiliza los tokens de arriba: no se declaran colores nuevos.
   ============================================================================ */
body{background:var(--page) !important; color:var(--text); font-family:var(--sans);
  -webkit-font-smoothing:antialiased;}
.main-content .container-fluid{max-width:none;}

/* ── El hueco muerto de la izquierda ─────────────────────────────────────────
   El tema Convex reserva sitio a la izquierda para el menu lateral: 250 px
   cuando esta desplegado y 60 px para el rail del colapsado (app.css:46245 y
   47051). Esta aplicacion NO tiene menu lateral: la unica navegacion es la
   barra de arriba, y no existe ningun .app-sidebar en _template/navbar.php
   (verificado en el navegador: document.querySelector('.app-sidebar') es null).
   El resultado era que TODAS las pantallas con sesion quedaban 30 px corridas
   a la derecha del centro real de la ventana. Medido en perfil a 1440 px:
   el bloque iba de 333 a 1153, con centro en 743 contra el centro de pagina
   en 713. Es la clase de descuadre que no se nombra pero se nota.
   Se anulan los dos estados con la misma especificidad, no con !important. */
.wrapper.nav-collapsed .main-panel .main-content,
.wrapper.nav-collapsed footer{padding-left:0;}
@media (min-width:992px){
  .main-panel .main-content,
  footer.footer{padding-left:0;}
}

/* ── Los 85 px que sobraban SIEMPRE ──────────────────────────────────────────
   Motivo real de que hubiera que bajar el cursor en las pantallas con sesion,
   y no tenia nada que ver con el contenido. El tema le pone a .main-panel
   "margin-top:85px" (el hueco de la barra fija) Y ADEMAS "min-height:100%".
   Sumados dan la altura de la ventana MAS 85 px, asi que la pagina se pasaba
   de largo por 85 px pasara lo que pasara. Medido en perfil: el contenido
   terminaba en 630 y el documento media 985 contra una ventana de 900.

   La solucion no es recortar contenido: es descontar la barra de la altura
   minima. Con la caja flexible el pie se va al fondo solo, sin tener que
   escribir en ninguna parte cuanto mide, que era el otro numero magico.
   El "height:auto" es imprescindible: el tema le pone height:100% a .main-panel
   ademas del margen, y una altura FIJA del 100% ignora el min-height que se
   acaba de calcular. Medido: sin esta linea el panel seguia midiendo 900 px
   exactos y la pagina seguia en 985. */
.main-panel{display:flex; flex-direction:column;
  height:auto; min-height:calc(100dvh - 85px);}
/* Aqui me equivoque yo, y se veia feo: en Inicio la ultima tarjeta ("Perfil")
   se montaba encima del pie de pagina, 70 px por dentro, y el texto de los
   derechos reservados se leia por debajo de la tarjeta.

   El motivo: le habia puesto "1 1 auto" y "min-height:0". El primer 1 es lo
   que queremos —que CREZCA para empujar el pie al fondo cuando hay poco
   contenido—. El segundo 1 es lo que sobra: le da permiso para ENCOGER, y el
   min-height:0 le quita el suelo, asi que cuando hay mucho contenido la caja
   se queda mas corta que lo que lleva dentro y lo de mas se sale por abajo.
   Medido en Inicio: la caja media 757 px y su contenido 851.

   El min-height:0 lo escribi por costumbre —es el remedio de siempre cuando
   dentro va una lista con su propio scroll—, pero aqui dentro no hay ninguna
   lista con scroll, asi que solo hacia dano.

   Con "1 0 auto" crece cuando sobra sitio y no encoge cuando falta. Las dos
   cosas que queriamos. */
.main-panel .main-content{flex:1 0 auto;}

/* --- Tarjeta --- */
.card{background:var(--surface) !important; border:1px solid var(--border) !important;
  border-radius:var(--radius) !important; box-shadow:var(--shadow) !important;}
.card .card-header{background:transparent !important; border-bottom:0;}
.card .card-title{font-family:var(--display); font-weight:600; letter-spacing:-.2px;
  color:var(--text);}

/* --- Botones --- */
.btn{border-radius:var(--radius-xs); font-weight:600; letter-spacing:.2px;}
.btn-primary{background:var(--brand) !important; border-color:var(--brand) !important;
  color:#03222E !important; box-shadow:0 8px 16px -8px var(--brand-ring);}
.btn-primary:hover,.btn-primary:focus{background:var(--brand-2) !important;
  border-color:var(--brand-2) !important; color:#03222E !important;}
.btn-light{background:transparent !important; border:1px solid var(--border-2) !important;
  color:var(--soft) !important;}
.btn-light:hover{border-color:var(--brand) !important; color:var(--brand) !important;}
.btn:focus,.btn.focus{box-shadow:0 0 0 3px var(--brand-ring) !important;}

/* --- Campos --- */
.form-control{background:var(--surface) !important; border:1px solid var(--border-2) !important;
  color:var(--text) !important; border-radius:var(--radius-xs) !important;}
.form-control:focus{border-color:var(--brand) !important;
  box-shadow:0 0 0 3px var(--brand-ring) !important;}
.form-control::placeholder{color:var(--mut) !important;}
.form-control.is-invalid{border-color:var(--danger) !important;}
/* Etiquetas de campo en Archivo: es la firma del sistema (versalitas con
   espaciado amplio). Ver el bloque de tipografia arriba. */
form label,.label-control{font-family:var(--display); color:var(--soft); font-weight:600;}

/* footer.php recorre los campos [required] y le agrega a su <label> un
   <span style="color:red"> *</span>. Es comportamiento global de la
   plataforma, asi que en vez de pelearse con el se integra al sistema:
   el asterisco pasa a cian. Lleva !important porque el estilo va en linea. */
/* El 700 baja a 600 por lo mismo que los otros cuatro sitios: estos asteriscos
   heredan Archivo de su etiqueta y de Archivo no tenemos un 700. */
form label span[style]{color:var(--brand-ink) !important; font-weight:600;}

/* Botones en Archivo mayusculas, igual que el CTA del login. */
.btn{font-family:var(--display); text-transform:uppercase; font-size:var(--t-menor);
  font-weight:600; letter-spacing:.14em;}

/* El tema le da margin-bottom:16px a TODO .btn, para apilarlos. Dentro de una
   barra de acciones eso no apila nada: solo desequilibra la barra, que queda
   con 16 px de aire arriba y 32 abajo. Medido: la barra pedia 95 px cuando el
   boton mide 46 y el relleno es de 16. Se anula donde los botones van en fila;
   fuera de estos contenedores el margen del tema se respeta. */
.sk-pass .sk-actions .btn,
.sk-form .sk-actions .btn,
.sk-empty .btn{margin-bottom:0;}

:focus-visible{outline:none; box-shadow:0 0 0 3px var(--brand-ring); border-radius:var(--radius-xs);}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important;}}

/* --- Saltar al contenido ---
   Fuera de la pantalla hasta que recibe el foco. No se esconde con
   display:none ni visibility:hidden a proposito: eso lo sacaria del recorrido
   del tabulador y dejaria de existir justo para quien lo necesita. */
.sk-saltar{position:absolute; left:16px; top:-100px; z-index:1100;
  display:inline-flex; align-items:center; height:44px; padding:0 20px;
  background:var(--brand-ink); color:#fff; border-radius:var(--radius-xs);
  font-family:var(--display); font-size:var(--t-menor); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  transition:top .15s;}
.sk-saltar:focus{top:16px; color:#fff; text-decoration:none;}
/* El destino recibe el foco al saltar, pero no es un control: no debe pintar
   el anillo de foco como si lo fuera. */
#sk-contenido:focus{outline:none;}

/* Rescatada del <style> incrustado que vivia en la cabecera de navbar.php.
   Era la unica de sus cuatro reglas que seguia haciendo algo (la usa la
   pantalla de contraseña). Aqui es donde vive el sistema; alli pisaba a todas
   las hojas por venir y no se podia cachear. */
form .form-group{margin-bottom:.5rem;}

/* --- Barra superior y marca --- */
.navbar.bg-light{background:var(--surface) !important; border-bottom:1px solid var(--border);
  box-shadow:none;}
/* Bloque de marca: logo + nombre de la aplicacion.
   El nombre va SUBORDINADO al logo, no a su lado como igual: en versalitas
   pequenas, con espaciado amplio y en color apagado. Antes iba a 14 px y en
   color de texto, y competia con la palabra SKYLAB del propio logo.
   El eje se alinea a la altura de x del logotipo, no al centro geometrico
   de la imagen: el PNG lleva aire arriba y abajo y descuadraba a ojo. */
.sk-brand{display:inline-flex !important; align-items:center; gap:14px; padding:0;}
.sk-brand-logo{display:block; height:20px; width:auto; position:relative; top:-1px;}
.sk-brand-sep{width:1px; height:16px; background:var(--border-2);}
.sk-brand-app{font-family:var(--display); font-size:var(--t-etiqueta); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mut);}
/* Aqui estaba el conmutador de logo (.sk-en-claro / .sk-en-oscuro), que
   enseñaba la version blanca del logotipo en modo oscuro. Sin modo oscuro solo
   queda el logo a color, asi que la regla sobra y el <img> del logo blanco se
   quita de las vistas: escondido seguia descargandose en cada carga. */

.navbar .nav-link{color:var(--soft) !important;}
.navbar .nav-link:hover{color:var(--brand-ink) !important;}
.navbar .avatar img{border-radius:var(--radius-circulo);}

/* --- Pie de pagina ---
   Mismo tratamiento que la linea legal del login: versalitas pequenas con
   espaciado amplio. Antes era texto corrido con "SKYLAB" en negrita y en
   color de marca, que gritaba mas que el contenido de la pantalla. */
.footer.footer-light{background:transparent !important; border-top:1px solid var(--border);
  padding:14px 0;}
.footer p{margin:0; font-family:var(--display); font-size:var(--t-etiqueta); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--mut) !important;}
.footer a{color:var(--mut) !important; font-weight:600 !important;
  border-bottom:1px solid transparent; transition:color .15s, border-color .15s;}
.footer a:hover{color:var(--brand-ink) !important; border-color:var(--brand-ink);}
.dropdown-menu{background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-lg);}
.dropdown-item{color:var(--soft);}
.dropdown-item:hover{background:color-mix(in srgb, var(--brand) 10%, transparent);
  color:var(--text);}
.dropdown-divider{border-color:var(--border);}

/* Objetivos tactiles: con el dedo, todo pulsable mide 44 px como minimo. */
@media (pointer:coarse){
  body{-webkit-tap-highlight-color:transparent; touch-action:manipulation;}
  .btn{min-height:48px;}
  .form-control,input,select,textarea{min-height:var(--alto-campo);}
  /* 16 px en tactil no es capricho: por debajo de eso, iOS AMPLIA la pagina al
     enfocar un campo y luego el usuario tiene que volver a alejarla a mano. Lo
     hace con cualquier valor menor, asi que 15,9 tampoco vale. */
  .form-control,input,select,textarea,.sk-input input{font-size:16px;}
  .breadcrumb a{display:inline-flex; align-items:center; min-height:44px; padding:0 10px;}

  /* Lo de arriba se escribio para el bloque de acceso. Con sesion iniciada hay
     otros pulsables que se quedaron fuera y median menos de 44 px de alto:
     medido en perfil, "Cambiar" daba 57x18 y "Editar" 45x26, y son las dos
     acciones principales de la pantalla. Tambien "Ayuda" (81x32), la marca de
     la barra (162x24), el ojo de la contrasena (36x36) y el enlace del pie.
     Se les da el alto tactil sin cambiar como se ven con raton. */
  .navbar .nav-link,.sk-brand,.footer a{display:inline-flex; align-items:center;
    min-height:44px;}
  .sk-dl dd a,.sk-perfil .sk-block-hd a,.sk-empty .btn{
    display:inline-flex; align-items:center; min-height:44px;}
  /* El boton de menu del movil daba 56x40: cuatro pixeles cortos. No es un
     pulsable cualquiera, es el UNICO camino a "Mi cuenta" y "Cerrar sesion"
     desde un telefono, porque con la barra plegada el resto no se ve. */
  .navbar-toggler{min-height:44px; min-width:44px;}
  .sk-pass .sk-eye{width:44px; height:44px;}
  /* "Inicio" mide 30 px de ancho: con el alto no basta. El relleno lateral se
     cancela con el margen negativo, asi que la miga se ve EXACTAMENTE igual y
     solo crece la zona que responde al dedo. */
  .sk-crumb a{display:inline-flex; align-items:center; min-height:44px;
    padding:0 8px; margin:0 -8px;}
}


/* ============================================================================
   CAMBIAR CONTRASENA  (perfil/actualizar_password.php)     prefijo .sk-pass
   ----------------------------------------------------------------------------
   Se conservan intactos: el form y su action, los id/name de los tres campos,
   los <small class="error" id="msg_*"> y el <p class="error" id="msg">, y el
   id del boton. El JS original sigue siendo quien valida y quien envia.
   ============================================================================ */
.sk-pass{max-width:660px; margin:0 auto; padding:8px 0 40px;}
.sk-pass .sk-crumb{display:flex; align-items:center; gap:8px; margin:0 0 16px;
  font-size:var(--t-menor); color:var(--mut);}
.sk-pass .sk-crumb a{color:var(--mut);}
.sk-pass .sk-crumb a:hover{color:var(--brand-ink);}
.sk-pass .sk-crumb .sep{color:var(--border-2);}
.sk-pass h1{font-family:var(--display); font-size:var(--t-titulo); font-weight:300;
  letter-spacing:-.5px; margin:0 0 8px; color:var(--text);}
.sk-pass .sk-lede{font-size:var(--t-cuerpo); line-height:1.65; color:var(--soft);
  margin:0 0 24px; max-width:52ch;}

/* aviso de resultado: aqui imprime flash('passwordUpdate') */
.sk-pass .alert{border-radius:var(--radius-sm); border:1px solid var(--border-2) !important;
  border-left:3px solid var(--live) !important; background:var(--surface) !important;
  color:var(--text) !important; box-shadow:var(--shadow); padding:14px 16px;}

/* Sin sombra. La tarjeta del bloque de acceso ya iba plana (box-shadow:none) y
   estas tres se habian quedado con la elevacion del tema. Una caja blanca
   flotando sobre un fondo gris con sombra difusa es EL gesto de plantilla de
   Bootstrap; el borde de un pixel dice lo mismo y no grita. */
.sk-pass .sk-block{background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:none; overflow:hidden;}
.sk-pass .sk-block-hd{padding:16px 24px; border-bottom:1px solid var(--border);}
.sk-pass .sk-block-hd h2{margin:0; font-size:var(--t-etiqueta); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mut);}
.sk-pass .sk-block-bd{padding:24px;}
.sk-pass .sk-sep{height:1px; background:var(--border); margin:24px -24px;}

/* 16 y no 24 entre campos: es la misma separacion que .sk-field usa en el
   bloque de acceso, asi que ademas de acortar la pantalla iguala las dos
   familias de formularios. */
.sk-pass .form-group{margin:0 0 16px;}
.sk-pass .form-group:last-child{margin-bottom:0;}
.sk-pass label{display:block; font-size:var(--t-etiqueta); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--soft); margin:0 0 8px;}
.sk-pass .sk-ctrl{position:relative; display:flex; align-items:center;}
.sk-pass .sk-ctrl .form-control{height:var(--alto-campo); padding:0 48px 0 15px; font-size:var(--t-cuerpo);}
.sk-pass .sk-eye{position:absolute; right:8px; width:36px; height:36px; border:0;
  background:transparent; color:var(--mut); cursor:pointer; border-radius:var(--radius-boton-chico);
  display:inline-flex; align-items:center; justify-content:center; transition:color .15s;}
.sk-pass .sk-eye:hover{color:var(--brand);}
.sk-pass .sk-eye svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6;}

/* EL BOTON DEL OJO, A 44 PX CON EL DEDO. Y OJO CON EL ORDEN.

   Esto ya estaba escrito mas arriba, dentro del bloque @media (pointer:coarse)
   de los objetivos tactiles. Pero estaba ANTES que la regla de aqui, que vuelve
   a poner 36 px con la misma especificidad — y a igual especificidad gana la
   ultima. Resultado: la regla tactil no se aplicaba nunca y el boton media
   36x36 tambien con el dedo. Medido en el navegador emulando tactil, no leido.

   Repetida aqui, DESPUES de la base, si gana. El hermano de esta pantalla
   -.sk-input .sk-eye del login- no tenia el problema porque alli el orden es
   el correcto, y por eso ese si medi­a 44.

   Si algun dia se reordena este archivo, esta regla tiene que seguir por
   debajo de la que fija los 36. */
@media (pointer:coarse){
  .sk-pass .sk-eye{width:44px; height:44px;}
}

/* Los mensajes de error de campo se definen UNA sola vez para toda la
   plataforma, mas abajo: buscar "MENSAJES DE ERROR DE CAMPO". Aqui solo queda
   lo propio de esta pantalla: el aviso general va centrado. */
.sk-pass p.error{margin:16px 0 0; font-size:var(--t-menor); text-align:center;}
.sk-pass p.error:empty{margin:0;}

/* requisitos: SOLO los dos que el sistema valida de verdad */
.sk-pass .sk-reqs{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:8px;}
/* margin y line-height explicitos: app.css impone line-height:32px a los li
   de lista, y sin esto cada requisito ocupa el doble de alto del necesario. */
.sk-pass .sk-reqs li{display:flex; gap:8px; align-items:center; margin:0; line-height:1.45;
  font-size:var(--t-menor); color:var(--mut); transition:color .15s;}
.sk-pass .sk-reqs .bx{flex:none; width:15px; height:15px; border-radius:var(--radius-circulo);
  border:1px solid var(--border-2); display:inline-grid; place-items:center;
  transition:border-color .15s, background .15s;}
.sk-pass .sk-reqs .bx svg{width:9px; height:9px; stroke:var(--surface); fill:none;
  stroke-width:3; opacity:0;}
.sk-pass .sk-reqs li.ok{color:var(--soft);}
.sk-pass .sk-reqs li.ok .bx{background:var(--live); border-color:var(--live);}
.sk-pass .sk-reqs li.ok .bx svg{opacity:1;}

.sk-pass .sk-actions{display:flex; gap:8px; justify-content:flex-end; align-items:center;
  padding:16px 24px; border-top:1px solid var(--border);}
/* (las medidas de este boton estan ahora en la regla compartida) */
.sk-pass .sk-foot{margin:16px 0 0; font-size:var(--t-menor); line-height:1.6; color:var(--mut);
  text-align:center;}

/* El girador del boton vivia AQUI, dentro de .sk-pass, y otra copia identica
   dentro de .sk-auth-card. Ahora hay UNA SOLA definicion, mas abajo, sin
   ambito: ver "girador del boton al enviar". */

@media (max-width:640px){
  .sk-pass h1{font-size:var(--t-titulo-sm);}
  .sk-pass .sk-block-bd,.sk-pass .sk-block-hd,.sk-pass .sk-actions{padding-left:16px; padding-right:16px;}
  .sk-pass .sk-sep{margin-left:-16px; margin-right:-16px;}
  .sk-pass .sk-actions{flex-direction:column-reverse; align-items:stretch;}
}


/* ============================================================================
   PERFIL  (perfil/index.php)                                prefijo .sk-perfil
   ----------------------------------------------------------------------------
   Se conservan intactos: #upload_image, #uploaded_image, #modal, #sample_image,
   .preview, #crop y #message, que son los que usa el recortador de avatar.
   Los datos pasan de "form horizontal de solo lectura" a lista de definicion:
   no son campos editables, y presentarlos como formulario confundia.
   ============================================================================ */
.sk-perfil{max-width:820px; margin:0 auto; padding:8px 0 24px;}
.sk-perfil .sk-crumb{display:flex; align-items:center; gap:8px; margin:0 0 16px;
  font-size:var(--t-menor); color:var(--mut);}
.sk-perfil .sk-crumb a{color:var(--mut);}
.sk-perfil .sk-crumb a:hover{color:var(--brand-ink);}
.sk-perfil .sk-crumb .sep{color:var(--border-2);}

/* --- identidad: avatar + nombre --- */
/* Avatar de 72 y no de 88, y 24 de separacion en vez de 32: la cabecera pesaba
   120 px de los 1031 que pedia la pantalla, y a 72 el retrato sigue siendo el
   elemento mas grande de la composicion. */
.sk-perfil .sk-ident{display:flex; align-items:center; gap:24px; margin:0 0 24px;}
.sk-perfil .image_area{position:relative; flex:none; width:72px; height:72px;}
.sk-perfil .image_area form{margin:0;}
.sk-perfil .image_area label{display:block; margin:0; cursor:pointer; position:relative;}
/* Al llegar tabulando al campo de la foto hay que ver donde se esta. El campo
   en si es invisible -va con .sr-only-, asi que el aro se pinta alrededor de la
   etiqueta, que es lo que se ve. :focus-within hace justo eso: marca al padre
   cuando algo de dentro tiene el foco.

   Mismo aro que el resto de la plataforma; no se inventa otro. */
.sk-perfil .image_area label:focus-within{border-radius:var(--radius-circulo);
  box-shadow:0 0 0 3px var(--brand-ring); outline:2px solid var(--brand); outline-offset:2px;}
.sk-perfil .img-perfil{width:72px !important; height:72px; max-width:none;
  border-radius:var(--radius-circulo) !important; object-fit:cover; display:block;
  border:1px solid var(--border-2); background:var(--page-2);}
/* el lapiz de cambiar foto sustituye al texto superpuesto */
.sk-perfil .image_area .overlay{position:absolute; right:-2px; bottom:-2px; width:30px; height:30px;
  border-radius:var(--radius-circulo); background:var(--surface); border:1px solid var(--border-2);
  display:grid; place-items:center; transition:border-color .15s;}
.sk-perfil .image_area .overlay .text{font-size:0; line-height:0;}
/* El lapiz de "cambiar foto" ya en cian: es un control, no un adorno. */
.sk-perfil .image_area .overlay .text::after{content:""; display:block; width:14px; height:14px;
  background:var(--brand-ink); transition:background .15s;
  -webkit-mask:var(--sk-mask-lapiz) center/contain no-repeat;
          mask:var(--sk-mask-lapiz) center/contain no-repeat;}
.sk-perfil .image_area label:hover .overlay{border-color:var(--brand);}
.sk-perfil .image_area label:hover .overlay .text::after{background:var(--brand);}
.sk-perfil .image_area:focus-within .overlay{border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-ring);}

/* El texto crece y empuja la accion al extremo derecho de la cabecera. */
.sk-perfil .sk-ident-txt{flex:1 1 auto; min-width:0;}
.sk-perfil .sk-ident h1{font-family:var(--display); font-size:var(--t-titulo); font-weight:300;
  letter-spacing:-.5px; margin:0 0 8px; color:var(--text);}
.sk-perfil .sk-ident .sk-sub{margin:0; font-size:var(--t-cuerpo); color:var(--mut);}

/* "Cambiar contraseña" en la cabecera. Va como accion secundaria: contorno, no
   relleno, para que el unico boton macizo de la plataforma siga siendo la
   accion principal de cada pantalla. 44 px de alto ya con raton, porque aqui
   no hay version pequena que respetar. */
/* REGLA 9. Aqui vivia .sk-ident-accion, un boton A MEDIDA que divergia del
   secundario del resto de la plataforma en CINCO medidas: alto 44 contra 46,
   relleno 20 contra 24, letra 10,5 contra 11, espaciado .13 contra .14 y sin
   ancho minimo. Se borra: ahora la vista usa .btn .btn-light, el mismo boton
   que "Cancelar" en contacto, empresa y contraseña, y esta clase solo queda
   para colocarlo (no para pintarlo). */
.sk-perfil .sk-ident-accion{flex:none; white-space:nowrap;}
/* La pastilla RECUPERA el cian, y es una rectificacion con motivo: la neutralice
   argumentando que repetia la fila "Tipo de cuenta" de la ficha. Esa fila YA NO
   EXISTE — se quito con el bloque "Cuenta" —, asi que la pastilla es ahora el
   UNICO sitio donde se dice si la cuenta es comercial o personal. El argumento
   para quitarle el color se cayo, y con el la decision.
   Texto --brand-ink sobre blanco: 4,84:1, medido. */
.sk-perfil .sk-tag{display:inline-block; margin-left:8px; vertical-align:3px; padding:3px 9px;
  border:1px solid var(--brand-ink); border-radius:var(--radius-pill); font-family:var(--display);
  font-size:var(--t-etiqueta); font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--brand-ink);
  /* Fondo blanco, no el gris de la pagina. Medido: sobre --page daba 4,50:1,
     que es EXACTAMENTE el minimo AA, sin un punto de margen; cualquier retoque
     futuro del gris de fondo lo tumbaba. Sobre blanco son 4,84:1. */
  background:var(--surface);}

/* --- bloques de datos --- */
.sk-perfil .sk-block{background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:none; overflow:hidden; margin:0 0 24px;}
.sk-perfil .sk-block-hd{display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:16px 24px; border-bottom:1px solid var(--border);}
.sk-perfil .sk-block-hd h2{margin:0; font-size:var(--t-etiqueta); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mut);}
/* "Editar" era un ENLACE SUBRAYADO donde el sistema tiene botones. Ahora es el
   mismo .btn .btn-light, en su tamaño compacto (.sk-btn-sm). El color y el
   subrayado que llevaba a mano se van con el: los pone el componente. */

/* ── Ficha tecnica en rejilla, no lista de ajustes ───────────────────────────
   Antes: una fila por dato, etiqueta de 220 px a la izquierda y valor a la
   derecha. Con una cuenta comercial son diez datos de contacto, o sea diez
   filas de 57 px, y la pantalla pedia 1314 px contra 900 de ventana: habia que
   bajar siempre. El problema no era el tamaño de las cosas, era cuantas filas
   habia: la columna de etiquetas ocupaba 220 px y el valor dejaba medio metro
   de blanco a la derecha en datos como un telefono.
   Ahora cada dato es una celda con la etiqueta ENCIMA del valor, y caben dos
   por linea. Es como se leen las fichas tecnicas de SpaceX, y de paso el dato
   queda pegado a su etiqueta en vez de a 220 px de distancia. */
/* SIN PREFIJO DE PANTALLA, y a la tercera va la vencida.

   Esta lista nacio dentro del perfil, asi que se escribio ".sk-perfil .sk-dl".
   Luego la uso "quien hereda tu cuenta" y hubo que añadir ".sk-pass". Luego la
   pantalla de traspasos, que es ".sk-form", y habria que añadir una tercera.

   Cada vez el sintoma es el mismo y despista igual: la lista sale APILADA en
   vez de en columnas, y uno se pone a buscar el fallo en la vista nueva cuando
   lo que pasa es que el componente no llega hasta alli.

   Un componente es el mismo en toda la plataforma. Si de verdad lo es, no
   necesita saber en que pantalla esta. */
.sk-dl{margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));}
/* Tres columnas para la ficha de contacto, que es la larga: con una cuenta
   comercial son diez datos, y a dos columnas seguian siendo seis filas. */
.sk-dl.sk-dl-3{grid-template-columns:repeat(3,minmax(0,1fr));}
/* NO se pasa por dos columnas. Aqui el numero de datos es IMPAR: una cuenta
   comercial trae nueve antes de la direccion, y una personal seis. Con tres
   columnas los dos casos cierran fila (3x3 y 2x3); con DOS, el comercial deja
   "Municipio" solo y media fila vacia al lado. Medido a 800 px de ventana,
   que era justo el caso.
   Asi que de tres se salta directo a una: mas alto, pero sin huerfanos. */
@media (max-width:720px){
.sk-dl.sk-dl-3{grid-template-columns:1fr;}
}
.sk-dl .r.ancho{grid-column:1 / -1;}

/* Las lineas de la rejilla: cada celda lleva su borde ARRIBA y a la IZQUIERDA,
   y un margen negativo de 1 px que los solapa con los de la celda vecina. Los
   del borde exterior caen fuera y los recorta el overflow:hidden del bloque.
   Se hace asi, y no con :nth-child, porque el numero de datos cambia: una
   cuenta personal tiene seis y una comercial diez, mas la direccion a lo ancho.
   Con :nth-child habria que acertar la cuenta para cada caso y una fila
   incompleta dejaria lineas sueltas. Asi vale para cualquier cantidad. */
.sk-dl .r{padding:16px 24px; min-width:0;
  border-top:1px solid var(--border); border-left:1px solid var(--border);
  margin:-1px 0 0 -1px;}
.sk-dl dt{margin:0 0 4px; font-size:var(--t-etiqueta); font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--mut);}
/* overflow-wrap:anywhere por los correos. Medido en la pantalla de perfil:
   "GERENTE.TACOS.SKYLAB@GMAIL.COM" ocupa 268 px en una celda de 225, o sea que
   se salia 43 px y se metia encima de la columna de al lado. En pantalla se
   leia "GERENTE.TACOS.SKYLAB@GMAIL.COM MARIA LOPEZ", como si fuera un dato.

   La rejilla ya estaba bien (minmax(0,1fr) y min-width:0 en la fila); lo que
   pasa es que un correo no lleva espacios ni guiones, asi que el navegador no
   encuentra por donde partirlo y lo deja salir. Con "anywhere" puede partir
   donde haga falta. Afecta a cualquier dato largo sin espacios que caiga aqui:
   un RTN, una direccion web, un nombre de base de datos. */
.sk-dl dd{margin:0; font-size:var(--t-cuerpo); color:var(--text);
  overflow-wrap:anywhere;}
.sk-dl dd .muted{color:var(--mut);}
.sk-dl dd a{color:var(--brand-ink); font-weight:600;
  border-bottom:1px solid transparent;}
.sk-dl dd a:hover{border-color:var(--brand);}
.sk-perfil .sk-dots{letter-spacing:.18em; color:var(--mut);}

/* estado vacio: invitacion a actuar, no un aviso en rojo */
/* --- Estado vacio. UNA definicion, sin ambito ---

   Estaba escrito como `.sk-perfil .sk-empty`, o sea que solo funcionaba dentro
   de perfil. Al reutilizarlo en "seleccionar sucursal" no le llegaba ni el
   relleno ni el centrado, y como tampoco habia regla para el icono, el SVG se
   estiraba hasta ocupar 600 px de alto y salia como una mancha negra. La misma
   trampa de siempre: la regla existe, pero lleva ambito.

   Ahora alcanza a cualquier pantalla que lo use. El icono se declara aqui
   porque un estado vacio sin icono es un parrafo suelto, y con uno gigante es
   peor todavia. */
.sk-empty{padding:32px 24px; text-align:center;}
.sk-empty p{margin:0 0 16px; font-size:var(--t-cuerpo); line-height:1.6; color:var(--mut);}
.sk-empty svg{display:block; width:40px; height:40px; margin:0 auto 16px;
  fill:none; stroke:var(--mut); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;}

/* modal del recortador */
.sk-perfil-modal .modal-content{border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg);}
.sk-perfil-modal .preview{overflow:hidden; width:160px; height:160px; margin:0 auto;
  border:1px solid var(--border-2) !important; border-radius:var(--radius-circulo);}

:root{
  /* lapiz de "cambiar foto", como mascara para poder recolorearlo por CSS */
  --sk-mask-lapiz:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4l10.5-10.5a2.1 2.1 0 0 0-3-3L5 17v3z'/%3E%3C/svg%3E");
}

@media (max-width:640px){
  /* La cabecera se apila. Cuando se añadio "Cambiar contraseña" a la derecha
     no se toco esta consulta de medios, y a 375 px el boton (192 px, flex:none)
     se quedaba a la derecha COMPRIMIENDO el texto a 127 px: el nombre se partia
     en dos lineas y el subtitulo caia en palabras sueltas, con el boton encima.
     Visto en la captura y corregido aqui. */
  .sk-perfil .sk-ident{gap:16px; flex-wrap:wrap;}
  .sk-perfil .sk-ident-txt{flex:1 1 100%; order:2;}
  .sk-perfil .sk-ident-accion{flex:1 1 100%; order:3; justify-content:center;}
  .sk-perfil .image_area,.sk-perfil .img-perfil{width:70px !important; height:70px;}
  .sk-perfil .sk-ident h1{font-size:var(--t-titulo-sm);}
  /* En movil, una sola columna: tres celdas de 100 px partirian los correos. */
  .sk-dl,.sk-dl.sk-dl-3{grid-template-columns:1fr;}
  .sk-perfil .sk-block-hd,.sk-dl .r,.sk-empty{padding-left:16px; padding-right:16px;}
}


/* ============================================================================
   REGISTRO  (signup/create.php)                    complementa el bloque .sk-auth
   ----------------------------------------------------------------------------
   Reutiliza la tarjeta de acceso. Solo agrega lo propio del registro:
   el selector de tipo de cuenta y la pista de requisitos de contrasena.
   ============================================================================ */

/* Tipo de cuenta: dos tarjetas que se eligen, no dos radios sueltos.
   La decision condiciona TODO lo que el usuario podra hacer despues
   (crear empresas vs unirse por invitacion), asi que se explica cada una. */
.sk-choice{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 8px;}
@media (max-width:420px){.sk-choice{grid-template-columns:1fr;}}
/* Estas etiquetas envuelven una opcion entera, no rotulan un campo: hay que
   anular la regla .sk-field label, que las ponia en versalitas con espaciado
   y dejaba las descripciones ilegibles. */
.sk-choice label{text-transform:none; letter-spacing:normal; font-size:var(--t-cuerpo);
  font-weight:400; font-family:var(--sans);
  position:relative; display:block; margin:0;
  padding:13px 14px 13px 36px; border:1px solid var(--border-2); border-radius:var(--radius-xs);
  background:var(--page-2); cursor:pointer;
  transition:border-color .15s, background .15s;}
.sk-choice label:hover{background:var(--surface);}
.sk-choice input{position:absolute; opacity:0; width:0; height:0;}
.sk-choice .dot{position:absolute; left:13px; top:15px; width:15px; height:15px;
  border-radius:var(--radius-circulo); border:1px solid var(--border-2); background:var(--surface);
  transition:border-color .15s;}
.sk-choice input:checked ~ .dot{border:5px solid var(--brand);}
.sk-choice label:has(input:checked){border-color:var(--brand); background:var(--surface);}
.sk-choice label:has(input:focus-visible){box-shadow:0 0 0 3px var(--brand-ring);}
.sk-choice .t{display:block; font-family:var(--display); font-size:var(--t-menor); font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--soft); margin:0 0 4px;}
.sk-choice input:checked ~ .txt .t{color:var(--text);}
.sk-choice .d{display:block; font-size:var(--t-menor); line-height:1.45; color:var(--mut);}

/* Barra de seguridad de la contrasena.
   Sustituye a la lista de tres requisitos: ocupa una linea en vez de tres y
   dice lo mismo. El nivel NO se comunica solo con color (eso excluiria a
   quien no distingue rojo de verde): siempre va acompanado de la palabra.
   Los cuatro criterios son los que el atributo pattern ya exige. */
.sk-strength{margin:8px 0 0;}
.sk-strength .barra{display:flex; gap:4px;}
.sk-strength .barra i{flex:1; height:4px; border-radius:2px; background:var(--border-2);
  transition:background .2s;}
/* Aqui yo mismo la habia embarrado. Puse nowrap + ellipsis para que el texto
   de ayuda no envolviera a dos lineas y no alargara la pantalla, y deje dicho
   que "el mensaje completo lo anuncia el aria-live".

   Medido en el navegador: el texto ocupa 331 px dentro de una caja de 224, o
   sea que se cortaba en "Minimo 8 caracteres, con mayuscula,...". Le estabamos
   pidiendo al usuario una contrasena y escondiendole la mitad de la regla, por
   ahorrar 16 px de alto. El aria-live solo salva a quien usa lector de
   pantalla; el que mira la pantalla se queda sin saber que le falta, falla el
   registro y no entiende por que.

   Que envuelva. La pantalla crece un renglon y ya. */
.sk-strength .txt{display:flex; justify-content:space-between; gap:8px; margin:8px 0 0;
  font-size:var(--t-menor); line-height:1.4;}
.sk-strength .nivel{font-family:var(--display); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; font-size:var(--t-etiqueta); color:var(--mut);
  white-space:nowrap; flex:none;}
.sk-strength .falta{color:var(--mut); text-align:right;}

.sk-strength[data-nivel="1"] .barra i:nth-child(-n+1){background:var(--danger);}
.sk-strength[data-nivel="2"] .barra i:nth-child(-n+2){background:var(--warn);}
.sk-strength[data-nivel="3"] .barra i:nth-child(-n+3){background:var(--warn);}
.sk-strength[data-nivel="4"] .barra i{background:var(--live);}
.sk-strength[data-nivel="1"] .nivel{color:var(--danger);}
.sk-strength[data-nivel="2"] .nivel,
.sk-strength[data-nivel="3"] .nivel{color:#8A6100;}
.sk-strength[data-nivel="4"] .nivel{color:var(--live);}

/* mensajes de error: los rellena el JS existente por id */
/* ── MENSAJES DE ERROR DE CAMPO ────────────────────────────────────────────
   UNA definicion para toda la plataforma. Antes habia CUATRO, con tres
   tamaños distintos (11,5 / 12 / 12,5 px) para el mismo componente:
     .sk-pass small.error · .sk-pass p.error
     .sk-auth-card span[id^="msg_"] · .sk-form .text-danger

   Y las cuatro pintaban el texto con var(--danger) #E14B5A, que es el rojo
   GRAFICO (bordes, barras, rellenos). Medido: 3,92:1 sobre blanco y 3,65:1
   sobre el fondo de pagina. AA exige 4,5:1 para texto normal, asi que los 35
   mensajes de error de la plataforma NO LLEGABAN — y precisamente el mensaje
   de error es el texto que hay que poder leer.

   La plataforma ya tenia el token correcto sin usar aqui: --danger-ink
   #A81F2E, el rojo de TEXTO, que es el que usa el aviso general del bloque de
   acceso. Medido: 7,24:1 sobre blanco y 6,73:1 sobre la pagina. Pasa AA de
   sobra, y en blanco llega tambien a AAA.

   El borde rojo del campo (.form-control.is-invalid) SI se queda en --danger:
   ahi es un grafico y le basta con 3:1, que cumple.

   El color va con !important porque casi todos estos huecos llevan ademas
   class="text-danger", y Bootstrap la define CON !important: sin el, el rojo
   del tema seguia ganando y los mensajes se quedaban en 3,29:1 aunque la regla
   de aqui dijera otra cosa. Verificado midiendo, no suponiendo. */
.sk-auth-card span[id^="msg_"],
.sk-pass small.error,
.sk-pass p.error,
.sk-form .text-danger,
.sk-form small.error{display:block; margin:8px 0 0; font-size:var(--t-menor);
  line-height:1.5; color:var(--danger-ink) !important;}
.sk-auth-card span[id^="msg_"]:empty,
.sk-pass small.error:empty,
.sk-form .text-danger:empty,
.sk-form small.error:empty{margin:0;}
.sk-auth-card #message:empty{display:none;}

/* --- Girador del boton al enviar. UNA SOLA definicion, sin ambito ---

   Estaba escrito DOS VECES, identico, dentro de .sk-pass y de .sk-auth-card.
   Como los dos selectores llevaban ambito, la clase .spinner NO TENIA NINGUN
   ESTILO en el resto de la plataforma. Consecuencia medida en el codigo:

     · company/edit  → <i class="spinner"> sin CSS: no pintaba NADA
     · home/personal → <i class="spinner"> sin CSS: no pintaba NADA (dos veces)
     · company/create→ <i class="fa fa-refresh spinner">: un icono QUIETO,
                       porque no lleva fa-spin

   O sea que en tres pantallas vivas pulsabas el boton principal y no aparecia
   ningun indicador de que estuviera pasando algo, mientras que en las otras
   siete giraba. El mismo componente, tres marcados y dos copias de CSS.

   Ahora la regla es una y alcanza a toda la plataforma, y el marcado se ha
   unificado a <span class="spinner"></span> en las cinco vistas. */
.spinner{display:inline-block; width:14px; height:14px; margin-right:9px;
  border:2px solid currentColor; border-top-color:transparent; border-radius:var(--radius-circulo);
  animation:sk-spin .7s linear infinite; vertical-align:-2px;}
@keyframes sk-spin{to{transform:rotate(360deg);}}

/* la tarjeta de registro es mas alta: se permite desplazamiento */
/* La tarjeta de registro es alta. Se centra si cabe y se alinea arriba si no,
   para que el logo no quede fuera de pantalla nada mas entrar. */
/* Variante compacta de registro: la pantalla tiene cinco campos y no cabe de
   una vez, asi que respira menos que el resto del bloque de acceso. Pero
   COMPACTA NO ES DESORDENADA: los valores tambien salen de la escala de 8.
   Antes eran 22, 13, 34 y 28, que no siguen ninguna unidad. Ahora 24, 16, 32
   y 24. Medido: la tarjeta pasa de 1051 a 1066 px, 15 px mas (un 1,4 %), que
   es lo que cuesta el orden. La pantalla ya necesitaba desplazamiento antes. */
.sk-auth.sk-auth-alta{align-items:center; padding-top:24px; padding-bottom:24px;}
@media (max-height:900px){.sk-auth.sk-auth-alta{align-items:start;}}
.sk-auth.sk-auth-alta .sk-logo-sm{height:30px; margin-bottom:16px;}
.sk-auth.sk-auth-alta .sk-rule{margin-bottom:24px;}
/* Esta regla ponia 25 px donde la base tenia 24: un pixel de diferencia que
   nadie ve y que solo servia para tener un tamaño mas. Con la escala unificada
   ya no dice nada distinto, asi que se queda solo el comentario. */
.sk-auth.sk-auth-alta .sk-sub{margin-bottom:24px;}
.sk-auth.sk-auth-alta .sk-field{margin-bottom:16px;}
.sk-auth.sk-auth-alta .sk-auth-card{max-width:470px; padding:24px 40px 20px;}

/* DOS COLUMNAS EN REGISTRO. Es la pantalla con mas contenido —tipo de cuenta,
   correo, usuario, contraseña con su barra y confirmacion— y en vertical medi
   1058 px de tarjeta: obligaba a bajar incluso a pantalla completa. Con los
   cuatro campos en dos columnas el alto lo marca la columna mas alta, no la
   suma. El bloque de tipo de cuenta se queda a lo ancho porque ya son dos
   tarjetas en fila. Solo a partir de 760 px: por debajo vuelve a una columna,
   que en movil dos columnas serian ilegibles. */
@media (min-width:760px){
  .sk-auth.sk-auth-alta .sk-auth-card{max-width:720px; padding:24px 48px 20px;}
  .sk-auth.sk-auth-alta .sk-auth-card .sk-rule{margin-left:-48px; margin-right:-48px;}
  /* minmax(0,1fr), no 1fr: "1fr" es minmax(auto,1fr) y respeta el ancho
     MINIMO del contenido. La barra de seguridad lleva white-space:nowrap, asi
     que su minimo era enorme y se comia la primera columna, dejando la otra
     aplastada. Medido en el navegador. */
  .sk-auth.sk-auth-alta .sk-cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 24px;}
  .sk-auth.sk-auth-alta .sk-cols .sk-field{min-width:0;}
}
.sk-auth.sk-auth-alta .sk-auth-card .sk-rule{margin-left:-40px; margin-right:-40px;}


/* ============================================================================
   VERIFICAR CORREO  (signup/email-confirm.php)     complementa el bloque .sk-auth
   ============================================================================ */

/* Marca de estado: sobre el titulo, para que se entienda de un vistazo
   si la pantalla pide algo o si ya termino bien. */
.sk-mark{display:grid; place-items:center; width:56px; height:56px; margin:0 auto 16px;
  border-radius:var(--radius-circulo); border:1px solid var(--border-2); background:var(--page-2);
  color:var(--brand-ink);}
.sk-mark svg{width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:1.6;}
.sk-mark.ok{color:var(--live); border-color:color-mix(in srgb,var(--live) 34%,transparent);
  background:color-mix(in srgb,var(--live) 10%,transparent);}

/* Casillas del codigo. Una por digito, en fila, con cifras tabulares. */
.sk-code{display:flex; gap:8px; justify-content:center; margin:0;}
/* min-width 44: cada casilla es un objetivo tactil por si misma. Con gap 9 las
   seis no cabian en la tarjeta y median 42 px de ancho, por debajo del minimo. */
.sk-code input{width:100%; min-width:44px; max-width:56px; height:60px; padding:0; text-align:center;
  font-family:var(--display); font-size:var(--t-titulo-sm); font-weight:500; font-variant-numeric:tabular-nums;
  color:var(--text); border:1px solid var(--border-2); border-radius:var(--radius-xs);
  background:var(--page-2); transition:background .15s, border-color .15s, box-shadow .15s;}
.sk-code input:focus{outline:none; background:var(--surface); border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-ring);}
.sk-code input:not(:placeholder-shown){background:var(--surface); border-color:var(--border-2);}
@media (max-width:400px){.sk-code{gap:6px;} /* en movil el 6 se queda: con 8 las casillas bajarian de 44 px */ .sk-code input{height:52px; font-size:20px;}}
@media (pointer:coarse){.sk-code input{height:64px;}}

/* Correo al que se envio: es el dato que el usuario necesita confirmar. */
.sk-destino{margin:0 0 24px; text-align:center; font-size:var(--t-cuerpo); line-height:1.65;
  color:var(--soft);}
.sk-destino strong{display:block; margin:4px 0; font-family:var(--display); font-weight:600;
  color:var(--text); word-break:break-all;}
.sk-destino .nota{display:block; margin-top:10px; font-size:var(--t-menor); color:var(--mut);}

/* Accion secundaria bajo el boton principal. */
.sk-btn-2{display:block; width:100%; height:46px; line-height:44px; margin-top:8px;
  text-align:center; border:1px solid var(--border-2); border-radius:var(--radius-xs); background:transparent;
  color:var(--soft); font-family:var(--display); font-size:var(--t-menor); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
  transition:color .15s, border-color .15s;}
.sk-btn-2:hover{color:var(--brand-ink); border-color:var(--brand-ink);}

/* ============================================================================
   RECUPERAR CONTRASEÑA  (recovery/*)              complementa el bloque .sk-auth
   ============================================================================ */

/* Indicador de paso. Recuperar la contraseña son TRES pantallas seguidas
   (buscar cuenta → código → nueva contraseña) y antes no habia forma de saber
   cuantas faltaban ni en cual se estaba. */
.sk-steps{display:flex; align-items:center; justify-content:center; gap:8px;
  margin:0 0 24px; padding:0; list-style:none;}
.sk-steps li{display:flex; align-items:center; gap:8px;
  font-family:var(--display); font-size:var(--t-etiqueta); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--mut);}
.sk-steps .n{display:grid; place-items:center; width:24px; height:24px;
  border-radius:var(--radius-circulo); border:1px solid var(--border-2); background:var(--page-2);
  font-size:var(--t-menor); letter-spacing:0; line-height:1;}
/* SOLO el paso actual va relleno. Los pasos hechos llevaban un circulo verde
   MACIZO, mas llamativo que el cian del paso actual, asi que el ojo aterrizaba
   en el paso anterior y la pantalla parecia ir por el paso equivocado. Ahora lo
   hecho es una palomita discreta sobre fondo claro y lo pendiente, un contorno:
   en la fila hay una sola cosa fuerte, y es donde estas. */
.sk-steps li[aria-current="step"]{color:var(--text);}
.sk-steps li[aria-current="step"] .n{border-color:var(--brand); background:var(--brand);
  color:var(--on-brand,#03222E); box-shadow:0 0 0 3px var(--brand-ring);}
.sk-steps li.hecho{color:var(--mut); font-weight:500;}
.sk-steps li.hecho .n{border-color:color-mix(in srgb,var(--live) 40%,var(--surface));
  background:color-mix(in srgb,var(--live) 12%,var(--surface)); color:var(--live-ink);}
/* El conector va como pseudo-elemento y no como un <span> suelto: dentro de
   un <ol> solo son validos los <li>, y un <span> hermano es HTML invalido. */
.sk-steps li + li::before{content:""; width:24px; height:1px; background:var(--border-2);}
/* En pantalla estrecha solo se conserva el numero: el rotulo del paso activo
   lo dice el titulo de la pantalla, asi que no se pierde informacion. */
@media (max-width:440px){
  .sk-steps li .txt{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
  .sk-steps li[aria-current="step"] .txt{position:static; width:auto; height:auto; clip:auto;}
}

/* Texto de apoyo del campo. Persistente, no un placeholder: el placeholder
   desaparece justo cuando el usuario escribe, que es cuando podria dudar. */
.sk-help{display:block; margin-top:7px; font-size:var(--t-menor); line-height:1.5; color:var(--mut);}

/* El hueco para la accion que cierra una pantalla — hoy, "Agregar otra empresa"
   al final de la lista de empresas.

   Existe porque esa accion vivia dentro de un .sk-help, que es texto de ayuda:
   quedaba gris y de 15 px, o sea que ni se acertaba con el dedo ni parecia
   pulsable. Una accion no es una nota al pie. */
.sk-acciones{margin:24px 0 0;}
.sk-acciones .btn{min-height:44px; display:inline-flex; align-items:center;}

/* ============================================================================
   FORMULARIOS LARGOS CON SESION   (contacto, empresa, sucursal)
   ============================================================================ */

.sk-form{max-width:880px; margin:0 auto; padding:2px 0 16px;}

.sk-form .sk-crumb{display:flex; align-items:center; gap:8px; margin:0 0 16px;
  font-size:var(--t-menor); color:var(--mut);}
.sk-form .sk-crumb a{color:var(--mut);}
.sk-form .sk-crumb a:hover{color:var(--brand-ink);}
.sk-form .sk-crumb .sep{color:var(--border-2);}

.sk-form h1{margin:0 0 4px; font-family:var(--display); font-size:var(--t-titulo-sm); font-weight:300;
  letter-spacing:-.4px; color:var(--text);}
/* Las pantallas de formulario -Tus empresas, Agregar, Editar, Contacto- eran
   las unicas sin ajuste de titular para pantalla estrecha. Las demas ya lo
   tenian. */
@media (max-width:640px){ .sk-form h1{font-size:var(--t-titulo-sm);} }
.sk-form .sk-sub{margin:0 0 24px; font-size:var(--t-cuerpo); line-height:1.6; color:var(--soft);}

/* Cada seccion del formulario es un bloque, igual que en perfil. Antes iban
   separadas solo por un <h4> suelto, sin nada que agrupara los campos. */
.sk-form .sk-field{margin-bottom:8px;}
.sk-form .sk-block{background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:none; margin:0 0 24px; overflow:hidden;}

/* ── Varias secciones seguidas = UNA tarjeta, no cuatro ──────────────────────
   Contacto tiene cuatro grupos (identificacion, datos generales, contacto,
   ubicacion) y cada uno era una tarjeta suelta: cuatro bordes, cuatro esquinas
   redondeadas y 24 px de aire entre ellas para doce campos. Leido de lejos
   parecian cuatro formularios distintos, cuando es uno solo con apartados.
   Ahora se pegan en una sola pieza continua y los apartados los marca la linea
   de cada cabecera, que es mas barato en pixeles y mas tranquilo de leer. */
.sk-form .sk-block + .sk-block{margin-top:-24px;}
.sk-form form .sk-block:not(:last-of-type){border-bottom:0; border-bottom-left-radius:0;
  border-bottom-right-radius:0;}
.sk-form form .sk-block:not(:first-of-type){border-top-left-radius:0; border-top-right-radius:0;}
/* Cabecera sin fondo gris: perfil y contrasena ya la tenian transparente y
   esta era la unica con la barra rellena, que es como se ve un .card-header de
   Bootstrap sin tocar. La linea de abajo basta para separar. */
.sk-form .sk-block-hd{display:flex; align-items:center; gap:12px;
  padding:12px 24px 4px;}
.sk-form .sk-block-hd svg{width:17px; height:17px; flex:none; stroke:var(--brand-ink);
  fill:none; stroke-width:1.6;}
.sk-form .sk-block-hd h2{margin:0; font-family:var(--display); font-size:var(--t-etiqueta);
  font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--soft);}
.sk-form .sk-block-bd{padding:12px 24px 0;}

/* TRES columnas en escritorio. Iban dos, y con dos un formulario de quince
   campos son ocho filas: empresa pedia 982 px de contenido contra 746
   disponibles. Casi todos estos campos son cortos (un RTN, un telefono, una
   fecha) y a media anchura dejaban 200 px de blanco a la derecha de cada uno;
   el ancho sobrante se estaba gastando en nada. La tarjeta mide 880, asi que
   tres columnas dan 277 px por campo, de sobra para lo que se escribe en
   ellos. Los campos largos siguen marcados con .ancho y ocupan la fila entera.
   Por debajo de 1000 px se vuelve a dos, y en movil a una. */
.sk-form .sk-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 24px;}
.sk-form .sk-grid .ancho{grid-column:1 / -1;}
/* Dos de las tres columnas. Para campos anchos que aun asi caben al lado de
   otro, como la descripcion junto al tamaño de la empresa: a lo ancho dejaban
   al vecino solo con dos pistas en blanco. */
.sk-form .sk-grid .medio{grid-column:span 2;}
@media (max-width:720px){.sk-form .sk-grid .medio{grid-column:1 / -1;}}
/* PERFIL 2 · TABLET. El umbral estaba en 1000 px, asi que una tablet de pie
   (768) caia en dos columnas y el formulario se iba 104 px por debajo del
   borde. Con tres columnas cada campo mide 229 px: de sobra para un telefono,
   un RTN o un desplegable, que es lo que hay en casi todos, y la altura tactil
   de 44 px no se toca. Por debajo de 760 vuelve a dos, y a una en el movil. */
@media (max-width:760px){.sk-form .sk-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:720px){.sk-form .sk-grid{grid-template-columns:1fr;}}

/* Campos: mismo componente que las pantallas de acceso, pero sin icono, que en
   un formulario de 15 campos se vuelve ruido. */
.sk-form .sk-field label,.sk-form label.label-control{display:block; margin:0 0 5px;
  font-family:var(--display); font-size:var(--t-etiqueta); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--soft);}
.sk-form .form-control{width:100%; min-height:var(--alto-campo); padding:0 14px;
  border:1px solid var(--border-2) !important; border-radius:var(--radius-xs) !important;
  background:var(--page-2) !important; color:var(--text) !important;
  font-family:var(--sans); font-size:var(--t-cuerpo);}
/* 96 y no 110: tres lineas de texto mas el relleno, que es lo que caben en 150
   caracteres. Los 110 dejaban una cuarta linea vacia siempre. */
/* El alto del textarea se adapta: en monitor sobra vertical y se le dan 96 px
   (unas dos lineas y media); en tablet y movil el alto es el recurso escaso, asi
   que baja a 68 —sigue viendose que es de varias lineas y sigue creciendo al
   escribir— y devuelve 28 px a la pantalla. */
.sk-form textarea.form-control{padding:12px 14px; min-height:68px; line-height:1.6;
  resize:vertical;}
.sk-form .form-control:focus{background:var(--surface) !important;
  border-color:var(--brand) !important; box-shadow:0 0 0 3px var(--brand-ring) !important;}
.sk-form .form-control.is-invalid{border-color:var(--danger) !important;}
.sk-form select.form-control{appearance:none; cursor:pointer; padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),
                   linear-gradient(135deg,var(--mut) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;}
/* La cuarta copia del mensaje de error vivia aqui, y ademas con !important,
   asi que le ganaba a cualquier intento de unificar el color. Ahora la
   definicion es unica: ver "MENSAJES DE ERROR DE CAMPO". */
.sk-form .text-danger{color:var(--danger-ink) !important;}

/* Grupo de opciones cortas (DNI/RTN/Otro, sexo). El componente .sk-choice de
   registro es una tarjeta grande con descripcion: aqui sobra. */
/* Los tres botones (DNI / RTN / OTRO) se REPARTEN el ancho del campo.

   Antes cada uno media lo que midiera su texto y la fila podia envolver: en una
   tablet de pie, con la columna a 203 px, los tres sumaban 200 mas los huecos y
   "OTRO" se caia a una segunda linea. Eso subia el campo a 96 px de alto y
   descolocaba al vecino de al lado.

   Con flex:1 los tres miden lo mismo y ocupan justo el campo, se vea en el ancho
   que se vea. Ademas se leen como un grupo -tres piezas iguales- en vez de tres
   botones sueltos de tamaños distintos. El alto tactil de 44 px no se toca. */
.sk-form .sk-seg{display:flex; gap:8px;}
.sk-form .sk-seg .custom-control{position:relative; margin:0; padding:0; flex:1 1 0; min-width:0;}
.sk-form .sk-seg input{position:absolute; opacity:0; width:100%; height:100%; margin:0;
  cursor:pointer; z-index:1;}
.sk-form .sk-seg label{display:block; margin:0; padding:0 6px; text-align:center; height:44px; line-height:42px;
  border:1px solid var(--border-2); border-radius:var(--radius-xs); background:var(--page-2);
  font-family:var(--display); font-size:var(--t-menor); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--soft); cursor:pointer;
  /* Ni el relleno NI EL COLOR DE LETRA se animan. contacto.js cambia la opcion
     elegida nada mas cargar (DNI viene marcado en el HTML y para cuenta
     comercial pasa a RTN), asi que la transicion se ve siempre, no solo al
     pulsar. Con el relleno animado parecia que habia DOS elegidas.

     Lo del color de letra se me habia quedado a medias, y lo cazo el auditor:
     marcaba "RTN" en 2,93:1. Medido en el navegador ya cargado da 6,88:1, o
     sea que lo que capturo fue un FOTOGRAMA A MITAD del cruce: la letra
     viajando de --soft (76,90,107) al azul casi negro sobre el cian, y por el
     camino pasa por valores que no llegan al minimo. Duraba 150 ms y no era
     grave, pero era texto ilegible de verdad durante ese rato, y ademas hacia
     que la medicion no fuera reproducible. Sin transicion, el estado elegido
     nace ya con sus 6,88:1. */
  transition:border-color .15s;}
/* La opcion elegida se RELLENA, no solo se le cambia el borde: un borde de un
   pixel de otro color no se distingue de un vistazo, y ya paso con el indicador
   de pasos. Misma regla del sistema: una sola cosa fuerte por grupo. */
/* La opcion elegida se RELLENA con el cian de marca. Se probo con un tinte al
   14 % y NO servia: sobre el gris azulado de los botones sin elegir, medido,
   quedaban en 234,239,244 contra 219,245,250 — dos tonos casi iguales, y de un
   vistazo parecia que habia dos elegidas. Misma leccion que el indicador de
   pasos: una sola cosa fuerte por grupo, y que se note. */
.sk-form .sk-seg input:checked + label{border-color:var(--brand);
  background:var(--brand); color:var(--on-brand,#03222E);
  /* 600 y no 700: la etiqueta hereda Archivo de .sk-seg y de Archivo no tenemos
     un 700. Con el 700 el navegador engordaba el 600 a mano y la opcion
     seleccionada se veia emborronada justo cuando mas se mira. */
  font-weight:600;}
/* El texto de la opcion elegida va en el color de texto normal, no en cian:
   --brand-ink sobre el relleno cian al 14 % da 4,25:1 y no llega al 4,5:1.
   El relleno y el borde ya dicen que esta elegida; el color de letra no hace
   falta para eso y si hace falta para poder leerla. */
.sk-form .sk-seg input:focus-visible + label{box-shadow:0 0 0 3px var(--brand-ring);}

/* Pie de acciones */
.sk-form .sk-actions{display:flex; justify-content:flex-end; gap:8px;
  padding:12px 24px; border-top:1px solid var(--border);}
/* inline-flex + centrado: "Cancelar" es un <a> y "Guardar" un <button>. El
   navegador centra solo el texto del <button>; en el <a> el texto arranca
   despues del relleno de arriba, asi que quedaba 8 px mas alto. Medido. Lo
   mismo ya estaba resuelto en .sk-pass .sk-actions y se me paso aqui. */
/* ── REGLA 9: UNA sola definicion de las medidas del boton ──────────────────
   Estas medidas estaban solo dentro de .sk-form .sk-actions, asi que cualquier
   boton fuera de esa barra acababa siendo una version aproximada. Ahora la
   regla las cubre a todas y no hay dos botones distintos en la plataforma. */
.sk-form .sk-actions .btn,
.sk-pass .sk-actions .btn,
.sk-perfil .sk-ident-accion,
/* Los del recortador de avatar. Aparecieron al comparar los botones de las tres
   pantallas: eran los unicos con radio 10 y letra 11,5 en vez de 8 y 11. Estan
   dentro de un modal de Bootstrap y por eso se habian quedado fuera. */
.sk-perfil-modal .modal-footer .btn{display:inline-flex; align-items:center; justify-content:center;
  min-width:150px; height:46px; padding:0 24px; border-radius:var(--radius-xs); line-height:1;
  font-family:var(--display); font-size:var(--t-menor); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none;}

/* Tamaño compacto del MISMO boton, para cabeceras de tarjeta. Cambia solo el
   alto, el relleno y el ancho minimo; color, borde, radio, familia y espaciado
   los hereda de .btn/.btn-light, que son los del sistema. */
.sk-btn-sm{display:inline-flex; align-items:center; justify-content:center;
  min-width:0; height:36px; padding:0 16px; border-radius:var(--radius-xs); line-height:1;
  font-size:var(--t-etiqueta); text-decoration:none;}
.sk-form .sk-actions .btn-light{background:transparent !important;
  border:1px solid var(--border-2) !important; color:var(--soft) !important;}
.sk-form .sk-actions .btn-light:hover{color:var(--brand-ink) !important;
  border-color:var(--brand-ink) !important;}
.sk-form .sk-nota{margin:0 0 24px; font-size:var(--t-menor); color:var(--mut); text-align:right;}

/* DEFENSIVO, no cosmetico: contacto.js enseña y esconde bloques enteros con la
   clase .collapse de Bootstrap. Varias reglas de arriba fijan display en los
   mismos elementos y, con dos clases, le ganarian por especificidad y dejarian
   visibles campos que deben estar ocultos. Esto garantiza que ocultar gane. */
.sk-form .collapse:not(.show){display:none !important;}

@media (max-width:560px){
  .sk-form .sk-block-hd,.sk-form .sk-actions{padding-left:16px; padding-right:16px;}
  .sk-form .sk-block-bd{padding:24px 16px 8px;}
  .sk-form .sk-actions{flex-direction:column-reverse;}
  .sk-form .sk-actions .btn{width:100%;}
}

/* El asterisco de campo obligatorio lleva style="color:red" en linea, y tambien
   lo pone asi el script global del pie. Rojo puro sobre fondo claro da 3,72:1 y
   no llega al 4,5:1 de WCAG AA. Se repinta con el rojo legible sin tocar el
   HTML ni el script, que es de donde salen. */
.sk-form label span[style],.sk-form .sk-nota span[style]{color:var(--danger-ink) !important;}

/* Bootstrap dibuja el circulo del radio con los pseudo-elementos ::before y
   ::after de .custom-control-label, y ademas reserva sitio con padding-left.
   Dentro de .sk-seg el boton ES el control, asi que ese circulo sobra: si no se
   apaga, se ve flotando encima y al lado de las opciones. */
.sk-form .sk-seg .custom-control{padding-left:0; margin-right:0;}
.sk-form .sk-seg .custom-control-label::before,
.sk-form .sk-seg .custom-control-label::after{display:none !important;}

/* contacto.js reescribe la etiqueta del nombre con un <span class="text-danger">
   dentro. La regla de mensajes de error de arriba lo pondria en bloque y el
   asterisco caeria a su propia linea. */
.sk-form label .text-danger{display:inline; margin:0; font-size:inherit;
  color:var(--danger-ink) !important;}

/* Campo de archivo. El navegador dibuja un boton "Examinar" propio de cada
   sistema, imposible de estilar; se envuelve para que al menos la caja siga la
   linea del resto de campos. */
.sk-form .sk-file{display:flex; align-items:center; gap:12px; min-height:46px;
  padding:8px 12px; border:1px dashed var(--border-2); border-radius:var(--radius-xs);
  background:var(--page-2);}
/* 44 px de alto: el propio campo es el objetivo tactil, no solo su boton. */
/* El campo de archivo iba a 44 px cuando sus vecinos van a 48, asi que en
   Agregar empresa quedaba dos pixeles mas bajo que los demas. Va con la misma
   medida que el resto. */
.sk-form .sk-file input[type=file]{flex:1; min-width:0;
  height:var(--alto-campo); line-height:var(--alto-campo);
  font-size:var(--t-cuerpo); color:var(--soft);;
  /* Le faltaba el radio: quedaba con las esquinas en pico entre campos
     redondeados. */
  border-radius:var(--radius-xs)}
.sk-form .sk-file input[type=file]::file-selector-button{margin-right:12px; height:36px;
  padding:0 14px; border:1px solid var(--border-2); border-radius:var(--radius-boton-chico); cursor:pointer;
  background:var(--surface); color:var(--soft); font-family:var(--display);
  font-size:var(--t-etiqueta); font-weight:600; letter-spacing:.1em; text-transform:uppercase;}
.sk-form .sk-file input[type=file]::file-selector-button:hover{border-color:var(--brand);
  color:var(--brand-ink);}

/* ============================================================================
   TRANSICION ENTRE PANTALLAS DEL BLOQUE DE ACCESO
   ----------------------------------------------------------------------------
   Pedido por Joel: que al cambiar de pantalla haya un efecto. Solo en el bloque
   de acceso (login, registro, verificacion, recuperacion).

   OJO, esto NO es una aplicacion de una sola pagina: cada pantalla es una carga
   completa de PHP. Asi que la transicion se hace en dos capas:

   1) ENTRADA, que funciona en todos los navegadores: la tarjeta aparece con un
      desvanecido y un desplazamiento minimo hacia arriba. Es lo que se ve
      siempre, incluso si el navegador no soporta lo de abajo.

   2) TRANSICION ENTRE DOCUMENTOS con la View Transitions API, que en los
      navegadores que la soportan encadena la salida de una pantalla con la
      entrada de la siguiente en vez de mostrar un parpadeo blanco. Se activa
      con @view-transition, declarado en _template/header_logout.php para que
      solo alcance a estas seis pantallas y no a las que tienen sesion.
      Las dos paginas, la que sale y la que entra, tienen que declararlo.

   Duracion corta y curva de salida, sin rebote: el movimiento acompaña, no
   llama la atencion. La salida es mas rapida que la entrada, que es
   lo que hace que la navegacion se sienta agil y no lenta. */

@keyframes sk-entra{
  from{opacity:0; transform:translateY(8px);}
  to  {opacity:1; transform:none;}
}
@keyframes sk-sale{
  from{opacity:1; transform:none;}
  to  {opacity:0; transform:translateY(-6px);}
}

.sk-auth .sk-auth-card{animation:sk-entra .26s cubic-bezier(.2,.7,.3,1) both;}
/* El pie entra 60 ms despues: un escalonado corto ordena la lectura sin que
   parezca que la pagina se monta a trozos. */
.sk-auth .sk-auth-foot{animation:sk-entra .26s cubic-bezier(.2,.7,.3,1) .06s both;}

/* Con la View Transitions API el navegador ya encadena las dos paginas, asi
   que la animacion de entrada propia sobra y se apaga para no sumarse. */
@media (prefers-reduced-motion:no-preference){
  html:active-view-transition .sk-auth .sk-auth-card,
  html:active-view-transition .sk-auth .sk-auth-foot{animation:none;}
}
::view-transition-old(root){animation:sk-sale .16s cubic-bezier(.4,0,1,1) both;}
::view-transition-new(root){animation:sk-entra .26s cubic-bezier(.2,.7,.3,1) both;}

/* Quien pide menos movimiento no ve ninguno. La regla global de mas arriba ya
   apaga animaciones, pero las de view-transition viven en otro arbol y hay que
   apagarlas aparte. */
@media (prefers-reduced-motion:reduce){
  .sk-auth .sk-auth-card,.sk-auth .sk-auth-foot{animation:none !important;}
  ::view-transition-old(root),::view-transition-new(root){animation:none !important;}
}


/* ============================================================================
   INICIO · CUENTA COMERCIAL  (home/comercial.php)          prefijo .sk-home
   ----------------------------------------------------------------------------
   Es la primera pantalla despues de entrar, para el dueño. La del colaborador
   es home/personal.php y va aparte: son dos pantallas distintas.

   Criterio: las aplicaciones son la razon de estar aqui, asi que son lo mas
   grande de la pantalla. Todo lo demas se subordina.
   ============================================================================ */
.sk-home{max-width:820px; margin:0 auto; padding:8px 0 24px;}

.sk-home-hd{margin:0 0 22px;}
.sk-home h1{margin:0 0 6px; font-family:var(--display); font-size:var(--t-display); font-weight:300;
  letter-spacing:-1px; color:var(--text);}
.sk-home .sk-sub{margin:0; font-size:var(--t-cuerpo); line-height:1.6; color:var(--soft);}

/* Rotulo de seccion: la firma del sistema, versalitas con mucho espaciado.
   Antes esto era un <a class="card-title"> y no habia NINGUN encabezado en
   toda la pagina; ahora es un <h2> de verdad, con la linea debajo. */
.sk-home h2{margin:0 0 12px; padding:0 0 6px; border-bottom:1px solid var(--border);
  font-family:var(--display); font-size:var(--t-etiqueta); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mut);}
.sk-apps-sec{margin:0 0 22px;}
.sk-apps-sec:last-child{margin-bottom:0;}

/* --- Aplicaciones --- */
/* ── La rejilla se adapta al numero de aplicaciones ──────────────────────────
   Con dos columnas fijas, el catalogo real (Restaurante, ERP y Taller) dejaba
   "Taller" solo en la segunda fila con 402 px de hueco al lado. Y con una sola
   aplicacion se quedaba a media anchura. Las dos veces el hueco se lee como
   que falta algo, no como aire.

   auto-fit resuelve los tres casos sin reglas especiales, porque colapsa las
   pistas que sobran: una aplicacion ocupa la fila entera, dos van a mitades y
   tres a tercios. A 820 px de tarjeta caben exactamente tres columnas de 240
   (3x240 + 2x16 de hueco = 752), asi que las tres aplicaciones quedan en una
   fila y ALINEADAS con la rejilla de administracion, que tambien es de tres.
   En movil, con 315 px de ancho, 240 solo deja una columna: no hace falta
   consulta de medios aparte. */
/* minmax bajado de 240 a 180: a 820px de ancho entran las CUATRO tarjetas en
   una sola fila (antes 3 columnas dejaban la cuarta sola en un segundo renglon,
   y eso obligaba a bajar). En movil, 180 sigue colapsando a una columna. */
/* COLUMNAS FIJAS, NO auto-fit. Es el arreglo de que la misma tarjeta midiera
   distinto segun cuantas hubiera.

   Con auto-fit las pistas vacias se colapsan y las que quedan se reparten TODO
   el ancho: medido en la cuenta personal, la rejilla daba
   "584px 584px 0 0 0 0", o sea dos tarjetas del doble de ancho que las cuatro
   de la comercial. El mismo componente con dos tamaños, que es justo lo que hay
   que evitar.

   Probe primero a ponerle un techo -minmax(180px,272px)- y salio peor: cuando
   el maximo es una medida fija, el navegador calcula CUANTAS pistas caben
   usando el maximo, no el minimo, asi que en pantallas intermedias las cuatro
   tarjetas se partian en 2+2. Lo vi en la maqueta antes de traerlo aqui.

   Con un numero fijo de columnas por perfil de pantalla, la tarjeta mide
   siempre lo mismo dentro de ese perfil, haya dos o haya cuatro. Tres columnas
   es la base porque .sk-home mide 820 px hasta el corte de 1440. */
.sk-apps{list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;}

.sk-app{position:relative; display:flex; align-items:flex-start; gap:12px; min-width:0;
  padding:16px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);}
.sk-app:hover{border-color:var(--brand); box-shadow:var(--shadow-hover); transform:translateY(-2px);}

/* ── La tarjeta entera es pulsable ───────────────────────────────────────────
   Medido: el enlace ocupaba 89x44 dentro de una tarjeta de 402x113, o sea el
   9 % de su superficie, y elementFromPoint en el centro devolvia un <span>, no
   un enlace. Pero la tarjeta SI se iluminaba entera al pasar por encima. Es
   decir, prometia ser pulsable y respondia solo en el titulo. Al lado, en la
   misma pantalla, las tarjetas de administracion si son el enlace completo:
   dos componentes identicos a la vista y distintos al tacto.

   Se estira el enlace con un pseudo-elemento en vez de envolver la tarjeta en
   un <a>: envolverla obligaria a meter el <a> del titulo DENTRO de otro <a>,
   que es exactamente el defecto que traia esta pantalla y que se acaba de
   quitar. Asi sigue habiendo UN solo enlace, con su texto, y la zona pulsable
   es toda la tarjeta. */
.sk-app a.sk-app-nom::after{content:""; position:absolute; inset:0; border-radius:var(--radius);}
/* El anillo de foco se dibuja sobre la tarjeta, no sobre las dos palabras del
   titulo: si el area pulsable es la tarjeta, lo que se enfoca es la tarjeta. */
.sk-app a.sk-app-nom:focus-visible{box-shadow:none;}
.sk-app:focus-within{box-shadow:0 0 0 3px var(--brand-ring); border-color:var(--brand);}
/* El modulo que aun no existe no se ilumina al pasar por encima: prometer
   interaccion donde no la hay es peor que no ofrecerla. */
.sk-app.inactiva:hover{border-color:var(--border); box-shadow:none; transform:none;}

/* Icono en --brand-ink, como los de contacto, empresa y perfil. Estaba en
   --soft y solo se coloreaba al pasar el cursor: quien no mueve el raton no
   veia color. El de un modulo INACTIVO se queda apagado a proposito (regla de
   abajo): ahi la falta de color SI significa algo. */
.sk-app-ico{flex:none; width:22px; height:22px; margin-top:2px; stroke:var(--brand-ink);
  fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.sk-app.inactiva .sk-app-ico{stroke:var(--mut); opacity:.5;}

.sk-app-txt{min-width:0;}
/* 44 px de alto tambien con raton: es el objetivo principal de la pantalla y
   no tiene sentido dejarlo en la altura de una linea de texto. */
/* SIN subrayado al pasar el cursor. Este titulo llevaba
   "border-bottom:1px solid transparent" que al pasar por encima se pintaba de
   cian: aparecia una linea bajo la palabra. Sobra por dos razones.
   Primera, es una señal REPETIDA: desde que la tarjeta entera es el enlace, ya
   se ilumina su borde, y no hacen falta dos avisos para un solo enlace.
   Segunda, es INCOHERENTE: los titulos de la rejilla de administracion, que
   son el mismo componente, nunca han tenido subrayado, asi que dos cosas
   iguales se comportaban distinto en la misma pantalla. Lo vio Joel.
   Se queda el cambio de color, que es el mismo aviso en las dos rejillas. */
a.sk-app-nom{display:inline-flex; align-items:center; min-height:44px; margin:-11px 0;
  font-family:var(--display); font-size:var(--t-destacado); font-weight:600; letter-spacing:-.1px;
  color:var(--text);}
.sk-app:hover a.sk-app-nom{color:var(--brand-ink);}
/* inline-block y no block: la pastilla "Proximamente" va JUSTO detras del
   nombre, y con display:block caia a la linea de abajo, dejando la tarjeta del
   modulo inactivo mas alta que la del activo. */
span.sk-app-nom{display:inline-block; font-family:var(--display); font-size:var(--t-destacado);
  font-weight:600; letter-spacing:-.1px; color:var(--mut);}
/* A 4 columnas la tarjeta es mas estrecha y la descripcion envuelve mas; se
   acota a 2 lineas para que las cuatro tarjetas queden a la misma altura y la
   fila no crezca de mas. El texto completo sigue en el modulo. */
.sk-app-desc{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; margin-top:6px; font-size:var(--t-menor); line-height:1.5; color:var(--mut);}

/* "Proximamente" en versalitas y en neutro. Es un estado, no una alarma: no
   se gana un color saturado. */
/* Los cuatro sitios que usan Archivo (--display) pedian el peso 700 y de
   Archivo solo servimos 300, 400, 500 y 600: no hay archivo de 700 ni en el
   proyecto ni en el sistema. El navegador lo falsificaba engordando el 600, y
   una negrita sintetica en mayusculas con mucho espaciado se ve sucia.
   Se bajan a 600, que es el que si tenemos. A 9,5 y 10,5 px la diferencia de
   peso no se aprecia; la de nitidez si. */
/* La etiqueta iba en linea, pegada al nombre. Medido en la pantalla: en ERP y
   en POS quedaba al lado, pero en WORKSHOP caia 32 px mas abajo. La palabra es
   mas larga, no cabian las dos en el renglon y la etiqueta se descolgaba. Tres
   tarjetas iguales colocaban lo mismo en dos sitios distintos.

   Arriba, en el comentario del nombre, esta escrito por que se puso en linea:
   con display:block la tarjeta del modulo inactivo quedaba mas alta que la del
   activo. Ese motivo ya no se sostiene. Las tarjetas viven en una rejilla que
   las estira a la misma altura —medidas hoy: las tres a 165 px—, asi que la
   etiqueta puede bajar a su propia linea sin descuadrar nada.

   Va debajo del nombre, siempre, en las tres. width:fit-content para que la
   pildora mida lo que dice y no cruce la tarjeta entera. */
.sk-app-estado{display:block; width:fit-content; margin-top:8px; padding:2px 8px;
  border:1px solid var(--border-2); border-radius:var(--radius-pill); font-family:var(--display);
  font-size:var(--t-etiqueta); font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--mut);}

/* Aqui vivia .sk-home-enlace, la tarjeta suelta de "Perfil". La sustituye
   .sk-admin, que es una rejilla y ademas lleva las otras rutas del dueño. */

/* --- Sin aplicaciones --- */
.sk-home-vacio{padding:32px 24px; text-align:center; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius);}
.sk-home-vacio p{margin:0 0 16px; font-size:var(--t-cuerpo); line-height:1.6; color:var(--mut);}
.sk-home-vacio .btn{margin-bottom:0;}

/* El aviso de "complete su registro" lo imprime flash('home') con las clases
   de Bootstrap; se le da el mismo trato sobrio que al resto de avisos. */
.sk-home .alert{margin:0 0 24px; border-radius:var(--radius-sm);
  border:1px solid var(--border-2); border-left:3px solid var(--brand);
  background:var(--surface); color:var(--text); box-shadow:none; padding:14px 16px;
  font-size:var(--t-cuerpo); line-height:1.6;}

@media (max-width:640px){
  .sk-home h1{font-size:var(--t-display-sm);}
  .sk-app,.sk-admin a{padding:16px;}
}

/* ── Segunda pasada: darle cuerpo a la portada del dueño ─────────────────────
   Joel la vio "un poco sencilla". Lo que faltaba no era adorno: era la mitad
   de su trabajo. Una cuenta comercial existe para administrar empresas, y
   desde la portada no se llegaba a ninguna. Lo que se añade es contenido con
   funcion, no relleno: de quien es la cuenta, a donde lleva cada aplicacion, y
   las rutas de administracion que si existen. */

/* Linea tecnica sobre el titulo: de que cuenta es esta portada. Versalitas con
   mucho espaciado, la firma del sistema. */
.sk-home-eyebrow{margin:0 0 8px; font-family:var(--display); font-size:var(--t-etiqueta);
  font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--mut);}
.sk-home-eyebrow .sep{margin:0 8px; color:var(--border-2);}

/* El dominio al que lleva la aplicacion. En monoespaciada, como una ficha
   tecnica: se ve a donde va antes de pulsar. */
.sk-app-host{display:block; margin-top:8px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--t-menor); letter-spacing:0; color:var(--mut);}

/* Administracion: las rutas de cada papel. Misma tarjeta que las aplicaciones
   y, desde ahora, la misma rejilla auto-fit, por el mismo motivo: el numero de
   elementos cambia segun quien mire. La portada del dueño trae tres (agregar
   empresa, contacto y perfil) y la del colaborador dos (perfil y contacto).
   Con tres columnas fijas, la del colaborador dejaba 278 px de pista vacia a
   la derecha; medido. Con auto-fit las dos filas van completas, y cuando son
   tres siguen midiendo 263 px, alineadas con las aplicaciones de arriba. */
/* Igual que aplicaciones: las cuatro rutas en una fila. */
/* Mismo criterio que .sk-apps, aqui arriba: columnas fijas para que la
   tarjeta no cambie de tamaño segun cuantas haya. Esta rejilla es la que peor
   lo sufria, porque la cuenta personal solo tiene dos entradas. */
.sk-admin{list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;}
.sk-admin a{display:block; height:100%; padding:16px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);}
.sk-admin a:hover{border-color:var(--brand); box-shadow:var(--shadow-hover); transform:translateY(-2px);}
/* Mismo anillo de foco que en las tarjetas de aplicacion, para que las dos
   rejillas se enfoquen igual: aqui el enlace YA es la tarjeta. */
.sk-admin a:focus-visible{box-shadow:0 0 0 3px var(--brand-ring); border-color:var(--brand);}
/* Mismo criterio que el resto de iconos de seccion del sistema. */
.sk-admin svg{display:block; width:20px; height:20px; margin:0 0 12px; stroke:var(--brand-ink);
  fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.sk-admin a:hover svg{stroke:var(--brand-ink);}
.sk-admin .n{display:block; font-family:var(--display); font-size:var(--t-cuerpo); font-weight:600;
  letter-spacing:-.1px; color:var(--text);}
.sk-admin a:hover .n{color:var(--brand-ink);}
.sk-admin .d{display:block; margin-top:8px; font-size:var(--t-menor); line-height:1.55; color:var(--mut);}


/* ============================================================================
   INICIO · CUENTA PERSONAL  (home/personal.php)       invitaciones y equipos
   ----------------------------------------------------------------------------
   Comparte .sk-home, .sk-apps-sec y .sk-admin con la portada del dueño: son la
   misma pantalla para dos papeles distintos, y deben reconocerse
   como hermanas.

   OJO: estas tarjetas las pinta JavaScript, no PHP. Si cambian las clases que
   emite home/personal.php, hay que cambiarlas aqui tambien.
   ============================================================================ */

/* Seccion que solo existe cuando hay algo que atender: el JS le quita esta
   clase en cuanto llega una invitacion. */
.sk-oculta{display:none;}

.sk-inv-lista{list-style:none; margin:0; padding:0; display:grid; gap:16px;}

/* Una fila por empresa: logotipo, texto y acciones. En vez de dos columnas,
   porque el nombre de una empresa puede ser largo y las acciones tienen que
   quedar siempre a la misma altura para poder recorrerlas con la vista. */
.sk-inv{display:flex; align-items:center; gap:16px; min-width:0;
  padding:16px 20px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius);}

.sk-inv-logo{flex:none; width:48px; height:48px; object-fit:contain;
  background:var(--page-2); border:1px solid var(--border); border-radius:var(--radius-xs);}
.sk-inv-logo.redondo{border-radius:var(--radius-circulo); object-fit:cover;}
/* Sin logotipo, la inicial. Antes salia "data:;base64," y con eso el navegador
   dibuja el icono de imagen rota. */
.sk-sinlogo{display:grid; place-items:center; font-family:var(--display);
  font-size:19px; font-weight:600; color:var(--mut);}

/* LA INICIAL COMO FOTO DE PERFIL.

   Sustituye a default-avatar.jpg, una foto de archivo de una persona generica
   que se usaba en la barra superior y en el perfil. Quedaba como un cromo
   pegado en una interfaz que no usa fotos en ningun otro sitio, y encima era
   incoherente: la lista de empresas ya resolvia el mismo caso -no hay imagen-
   con la inicial sobre un fondo plano.

   Va con el color de marca y no en gris como .sk-sinlogo: aqui identifica a una
   persona, no rellena un hueco, y en la barra superior tiene que distinguirse
   del resto de iconos. */
/* El var(--on-brand,#03222E) con color de reserva es como lo escribe el resto
   de la hoja: ese token no llega a definirse en ninguna parte y todos los sitios
   que lo usan llevan su reserva detras. */
.sk-avatar-inicial{background:var(--brand); color:var(--on-brand,#03222E);
  border-radius:var(--radius-circulo); border:0;}

/* En la barra superior el hueco es de 22 px, asi que la letra tiene que bajar
   de los 19 de .sk-sinlogo o no cabe. */
/* 30 y no 22: es el mismo tamaño que la foto de al lado. Con 22 la inicial
   quedaba mas pequeña que la foto y descentrada dentro de su caja, asi que el
   avatar cambiaba de tamaño segun si la persona habia subido foto o no.

   Lleva #id porque asi estaba escrito, y una regla con id no la tumba ninguna
   clase: si algun dia hay que cambiar este tamaño, es AQUI. */
#navbar-avatar.sk-avatar-inicial{width:30px; height:30px; font-size:12px;
  line-height:1;}

/* Y en el perfil ocupa el circulo entero de 72.

   Dos cosas hay que declarar aqui aunque parezca que sobran:

   - display:grid. Lo pone .sk-sinlogo, pero perfil/index.php trae un <style>
     dentro de la propia vista con ".img-perfil{display:block}". Misma
     especificidad y va despues, asi que ganaba: la letra se quedaba arriba a la
     izquierda en vez de centrada. Este selector es mas especifico y zanja la
     discusion sin recurrir a !important.

   - El alto en pixeles, no en 100%. La etiqueta que envuelve al avatar no tiene
     alto propio, asi que un 100% no tenia contra que medirse y el circulo salia
     de 26 px. Medido en la pantalla.

   - Y el fondo con su borde. .sk-perfil .img-perfil los pone en gris (--page-2
     y --border-2) porque esta pensada para una FOTO, donde el gris es solo el
     hueco mientras carga. Aqui no hay foto: el color ES el avatar. */
.sk-perfil .img-perfil.sk-avatar-inicial{display:grid; place-items:center;
  width:72px; height:72px; font-size:30px;
  background:var(--brand); color:var(--on-brand,#03222E); border:0;}

.sk-inv-txt{flex:1 1 auto; min-width:0;}
.sk-inv-nom{display:block; font-family:var(--display); font-size:var(--t-destacado);
  font-weight:600; letter-spacing:-.1px; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sk-inv-meta{display:block; margin-top:4px; font-size:var(--t-menor); line-height:1.5;
  color:var(--mut);}

/* Las acciones no se encogen: si el nombre es largo, se recorta el nombre, no
   el boton. */
.sk-inv-acc{flex:none; display:flex; gap:8px;}
.sk-inv-acc .btn{height:40px; padding:0 20px; display:inline-flex; align-items:center;
  justify-content:center; border-radius:var(--radius-xs); line-height:1;}

/* La pregunta de "Rechazar", dentro de la propia fila.

   Antes esto era un window.confirm: una ventana del sistema, con los botones en
   el idioma del navegador y sin nada del idioma visual de la casa, que ademas
   congela la pagina entera. La pregunta va donde esta la invitacion, que es
   donde la persona esta mirando.

   El texto no va ni en cursiva ni en rojo: no es un error, es una pregunta. */
.sk-inv-pregunta{align-self:center; font-size:var(--t-cuerpo); line-height:1.4;
  color:var(--mut); margin-right:4px;}

/* Estados de la lista */
.sk-cargando,.sk-vacio-fila{padding:24px 20px; text-align:center; font-size:var(--t-cuerpo);
  line-height:1.6; color:var(--mut); background:var(--surface);
  border:1px dashed var(--border-2); border-radius:var(--radius);}

/* #message: el error de "Entrar". Vacio no ocupa nada, para no dejar un hueco
   permanente encima de la lista. */
.sk-error{margin:0; font-size:var(--t-cuerpo); line-height:1.6; color:var(--danger-ink);}
.sk-error:empty{display:none;}
.sk-error:not(:empty){margin:0 0 16px;}

@media (max-width:560px){
  /* Con el dedo, el boton entero debajo: a 320 px "Aceptar" y "Cancelar" uno
     al lado del otro dejan el nombre de la empresa en dos caracteres. */
  .sk-inv{flex-wrap:wrap;}
  .sk-inv-txt{flex:1 1 100%; order:2;}
  .sk-inv-acc{flex:1 1 100%; order:3; flex-wrap:wrap;}
  .sk-inv-acc .btn{flex:1 1 0; min-height:44px;}
  /* La pregunta ocupa su propia linea encima de los dos botones: a 320 px, en
     la misma fila, "Sí, rechazar" se quedaria en dos letras. */
  .sk-inv-pregunta{flex:1 1 100%; margin:0 0 8px;}
  /* El nombre ENVUELVE en vez de cortarse. Medido a 375 px: "Distribuidora del
     Valle S. de R.L. de C.V." se quedaba en "Distribuidora del Va…" y no hay
     ningun sitio donde leer el resto. En escritorio si se recorta, porque ahi
     el nombre comparte fila con los botones y estirarlo empujaria la accion
     fuera de sitio. */
  .sk-inv-nom{white-space:normal; overflow:visible;}
}


/* --- Logotipo actual + campo de cambio (company/_empresa.php) --------------
   El logotipo que la empresa YA tiene se ve al lado del campo para cambiarlo,
   no debajo ni despues de que corra el JavaScript. */
.sk-form .sk-logo-fila{display:flex; align-items:flex-start; gap:16px;}
.sk-form .sk-logo-campo{flex:1 1 auto; min-width:0;}
.sk-logo-actual{flex:none; width:64px; height:64px; display:grid; place-items:center;
  overflow:hidden; background:var(--page-2); border:1px solid var(--border);
  border-radius:var(--radius-sm);}
.sk-logo-actual img{max-width:100%; max-height:100%; object-fit:contain;}
/* Sin logotipo, la inicial: dice que no hay, sin parecer una imagen rota. */
.sk-logo-sin{font-family:var(--display); font-size:30px; font-weight:300; color:var(--mut);}
@media (max-width:560px){
  .sk-form .sk-logo-fila{gap:16px;}
  .sk-logo-actual{width:64px; height:64px;}
  .sk-logo-sin{font-size:var(--t-titulo);}
}

/* La nota de campos obligatorios vive DENTRO de .sk-actions, a la izquierda,
   con los botones a la derecha. Antes era una linea suelta debajo del
   formulario que gastaba 48 px con su margen para decir seis palabras. */
.sk-form .sk-actions .sk-nota{flex:1 1 auto; margin:0; text-align:left;}
@media (max-width:560px){
  .sk-form .sk-actions .sk-nota{flex:1 1 100%; text-align:center; margin:0 0 8px;}
}


/* ============================================================================
   PANTALLAS DE ERROR  (error/404.php)                         prefijo .sk-err
   ----------------------------------------------------------------------------
   Se sirven con loadView(), sin plantilla, asi que no heredan barra ni pie.
   Una sola columna centrada, sin tarjeta: no hay nada que "contener", y una
   caja flotando en medio de la nada es justo lo que hace que una pantalla de
   error parezca un accidente en vez de una respuesta prevista.
   ============================================================================ */
.sk-err-body{margin:0; background:var(--page); color:var(--text);
  font-family:var(--sans); -webkit-font-smoothing:antialiased;}

.sk-err{min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:40px 24px; max-width:520px; margin:0 auto;}

.sk-err-logo{height:32px; width:auto; margin:0 0 40px;}

/* El numero, grande y en peso ligero: es la firma de la pantalla, no un grito.
   Antes eran 11rem en negrita con un gris oscuro del tema. */
/* El color se mezcla a partir de --mut, no se inventa un gris nuevo. Con
   --border-2 daba 1,29:1 sobre el fondo: es decorativo y va aria-hidden, asi
   que no incumple nada, pero a esa palidez no parece una decision, parece que
   no cargo la hoja. Medido: al 45 % daba 1,84:1, todavia poco; al 68 % da
   2,66:1, que se lee de sobra a 88 px sin discutirle el sitio al <h1>, que da
   16,13:1 y es quien dice lo que pasa. Grande y callado, que es el criterio. */
.sk-err-num{margin:0; font-family:var(--display); font-size:88px; font-weight:300;
  letter-spacing:-3px; line-height:1;
  color:color-mix(in srgb, var(--mut) 68%, var(--page));}

.sk-err h1{margin:16px 0 8px; font-family:var(--display); font-size:var(--t-titulo);
  font-weight:300; letter-spacing:-.4px; color:var(--text);}

.sk-err-txt{margin:0 0 32px; font-size:var(--t-cuerpo); line-height:1.65; color:var(--soft);
  max-width:44ch;}

/* Accion unica, y NO en rojo: volver al inicio no destruye nada. El rojo se
   reserva para lo que borra o cancela algo. */
.sk-err-btn{display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 32px; border-radius:var(--radius-xs);
  background:var(--brand); color:#03222E;
  font-family:var(--display); font-size:var(--t-menor); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  transition:background .15s;}
.sk-err-btn:hover{background:var(--brand-2); color:#03222E;}

/* Misma linea legal que el bloque de acceso: versalitas pequeñas y apagadas. */
.sk-err-pie{margin:40px 0 0; font-family:var(--display); font-size:var(--t-etiqueta);
  font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--mut);}

@media (max-width:480px){
  .sk-err-num{font-size:64px; letter-spacing:-2px;}
  .sk-err h1{font-size:var(--t-titulo-sm);}
}


/* --- Formularios de DOS columnas  (contacto/form.php) ----------------------
   La rejilla de .sk-form es de tres columnas, que le va bien a empresa: seis
   campos, todos siempre visibles, y se colocan a mano para llenar las filas.

   Contacto NO puede hacer eso, y la razon es de fondo: contacto.js enseña y
   esconde campos segun el TIPO DE CUENTA. Una cuenta comercial ve "Nombre
   comercial" y "Razon social"; una personal ve "Nombres", "Apellidos" y
   "Fecha de nacimiento", y ademas tres campos mas de persona de contacto que
   la personal no tiene. El numero de campos visibles CAMBIA en marcha, asi que
   cualquier orden pensado a mano para llenar tres columnas se rompe con el otro
   tipo de cuenta.

   Con dos columnas eso deja de importar: cualquier par de campos llena su fila,
   se vea el conjunto que se vea. Medido antes del cambio: CINCO de las siete
   filas dejaban 284 px de pista vacia, un tercio del ancho, en casi todas. */
.sk-form.sk-form-2col .sk-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
/* Un campo "medio" en una rejilla de dos columnas es una columna entera: si no,
   ocuparia las dos y dejaria un hueco igual que antes. */
.sk-form.sk-form-2col .sk-grid .medio{grid-column:auto;}
/* A esta variante le faltaba el punto de ruptura del movil. La rejilla normal
   pasa a una sola columna por debajo de 720 px, pero esta regla lleva dos clases
   y por especificidad seguia ganando, asi que a 375 px mantenia las dos.
   Se vio en "seleccionar sucursal": el desplegable se quedaba en 140 px y el
   texto salia cortado, "Selecciona u...". */
@media (max-width:720px){.sk-form.sk-form-2col .sk-grid{grid-template-columns:1fr;}}


/* El ojo, cuando la contraseña está a la vista: una barra cruzando el icono.
   El estado no puede vivir SOLO en aria-pressed, que es invisible; tiene que
   verse. Se dibuja con un pseudo-elemento en vez de cambiar el SVG, para que
   el marcado siga siendo uno solo. */
.sk-pass .sk-eye{position:absolute;}
.sk-pass .sk-eye.viendo::after{content:""; position:absolute; left:9px; right:9px; top:50%;
  height:1.6px; background:currentColor; border-radius:2px;
  transform:rotate(-45deg); transform-origin:center;}
.sk-pass .sk-eye.viendo{color:var(--brand-ink);}


/* ── Cambiar contraseña: rejilla y medidas uniformes ────────────────────────
   La pantalla se veia "muy grande" y la medicion dijo por que: su campo media
   610 px de ancho contra 261 en contacto y empresa. Un control 2,3 veces mas
   ancho que el del resto del sistema, para escribir ocho caracteres.
   Ahora usa la MISMA rejilla de dos columnas que los otros formularios. */
.sk-pass .form-body.sk-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 24px;}
.sk-pass .form-body.sk-grid > .ancho{grid-column:1 / -1;}
/* "Contraseña actual" ocupa las dos columnas para tener su propia fila, pero
   su CONTROL se queda del ancho de una: los tres campos piden lo mismo, ocho
   caracteres, y no hay razon para que uno mida el doble. Lo que queda a su
   derecha es aire dentro de la tarjeta, no un hueco de rejilla. */
.sk-pass .form-body.sk-grid > .ancho .sk-ctrl,
.sk-pass .form-body.sk-grid > .ancho small.error{max-width:calc(50% - 12px);}
@media (max-width:640px){
  .sk-pass .form-body.sk-grid > .ancho .sk-ctrl,
  .sk-pass .form-body.sk-grid > .ancho small.error{max-width:none;}
}
@media (max-width:640px){
  .sk-pass .form-body.sk-grid{grid-template-columns:1fr;}
}
/* El relleno inferior tambien se iguala: era 40 cuando el resto usa 24. */
.sk-pass{padding-bottom:24px;}

/* La barra de robustez dentro del bloque con sesion. El componente y sus
   colores ya existen (bloque .sk-strength, escrito para el acceso); aqui solo
   se ajusta su separacion al ritmo de este formulario. */
.sk-pass .sk-strength{margin:12px 0 0;}

/* Icono de seccion, con el MISMO trato en todas las pantallas: trazo en
   --brand-ink, 17 px, sin relleno.

   Entra .sk-pass en la lista, y no por gusto: al estrenar la pantalla de Roles
   el icono de su cabecera salio como un RECTANGULO NEGRO del ancho del bloque.
   La causa es que sin estas medidas un <svg> ocupa lo que le den y se pinta
   relleno; las otras pantallas no lo notaban porque .sk-pass -cambiar y crear
   contrasena- nunca habia tenido un bloque con icono.

   Es exactamente el fallo que la regla 9 previene: el componente existia, su
   definicion estaba repartida en dos selectores, y la tercera pantalla que lo
   uso se quedo fuera. Por eso ahora es UNA regla con los tres. */
.sk-perfil .sk-block-hd svg,
.sk-pass .sk-block-hd svg{width:17px; height:17px; flex:none; stroke:var(--brand-ink);
  fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.sk-perfil .sk-block-hd h2,
.sk-pass .sk-block-hd h2{flex:1 1 auto;}

/* Y la cabecera del bloque en .sk-pass tiene que ser una fila, como en las
   demas: estaba escrita solo con relleno y borde, asi que el icono y el titulo
   se apilaban. */
.sk-pass .sk-block-hd{display:flex; align-items:center; gap:10px;}


/* ═══════════════════════════════════════════════════════════════════════════
   LOS TRES PERFILES DE PANTALLA

   Skylab se usa, por este orden de importancia:

     1. MONITOR normal (1920x1080). Es el puesto de trabajo del dueño: aqui es
        donde se dan de alta empresas y se revisan datos. Manda este.
     2. TABLET (768 de pie, 1024 tumbada).
     3. MOVIL (375). El menos frecuente en la plataforma de cuentas, pero tiene
        que funcionar sin pelearse.

   Lo que sigue es lo que le faltaba al PERFIL 1, que es el mas usado y era el
   peor servido. Medido en un monitor de 1920: el contenido ocupaba una columna
   de 880 px y quedaban 1040 px vacios a los lados —mas de la MITAD de la
   pantalla— mientras la pagina todavia obligaba a bajar. Se estaba tirando
   ancho para gastar alto, que es justo al reves de lo que conviene.

   A partir de 1440 px el contenedor se ensancha. No es capricho: al haber mas
   ancho, cada campo cabe en su fila sin envolver y la pagina baja de alto sola.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1440px){

  /* 1180 y no "todo el ancho": por encima de eso la vista tiene que viajar
     demasiado de un extremo a otro de la fila, y la rejilla de tres columnas
     empieza a separar campos que van juntos. */
  .sk-form{max-width:1180px;}
  .sk-home{max-width:1180px;}
  /* En monitor el titular llega a su tamaño pleno. */
  :root{--t-portada:40px;}
  /* Con 1180 px de tarjeta caben cuatro comodas. Por debajo de este corte son
     tres, que es lo que entra bien en 820. */
  .sk-apps,.sk-admin{grid-template-columns:repeat(4,minmax(0,1fr));}
  .sk-perfil{max-width:1180px;}

  /* PERO el texto NO se estira. La regla de longitud de linea (65-75
     caracteres) vale para parrafos, no para rejillas de campos: un formulario
     ancho se lee bien, un parrafo ancho no. Asi que los subtitulos se capan en
     68ch y el resto aprovecha el ancho. */
  .sk-form .sk-sub,
  .sk-home .sk-sub,
  .sk-perfil .sk-sub{max-width:68ch;}

  /* CUATRO columnas en los formularios. Con 1180 px cada campo se queda en 275,
     que es de sobra para un telefono, un RTN o una fecha —que es lo que se
     escribe en casi todos—. El efecto que se busca no es meter mas campos por
     fila porque si: es que la pagina BAJE DE ALTO, porque cada fila que se
     ahorra son 81 px menos de scroll. */
  .sk-form .sk-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  /* "medio" sigue siendo dos de las cuatro. */
  .sk-form .sk-grid .medio{grid-column:span 2;}
  .sk-form textarea.form-control{min-height:96px;}
}


/* PERFIL 2 · TABLET DE PIE — dos columnas en las rejillas del inicio.

   Con el minmax de 180 px entraban tres tarjetas por fila, asi que las cuatro
   aplicaciones quedaban 3 + 1: una sola tarjeta perdida en la segunda fila.
   Probe cuatro columnas para ganar alto y el resultado fue peor de lo que
   ahorraba: a 137 px por tarjeta se cortaba "Sistema de planificacion d..." y
   la direccion del modulo se salia de su caja.

   Dos columnas dan 360 px por tarjeta —se lee todo, nada se corta— y ademas
   dejan la rejilla cuadrada, 2 x 2, que es lo que uno espera de cuatro cosas
   iguales. Sigue en dos filas, como antes, pero cada fila es mas baja porque el
   texto ya no envuelve. */
@media (min-width:761px) and (max-width:1000px){
  .sk-apps,.sk-admin{grid-template-columns:repeat(2,minmax(0,1fr));}
}


/* ── PANTALLAS BAJAS (tablet tumbada, ventanas pequeñas) ────────────────────
   Se mira el ALTO, no el ancho, porque el problema de una tablet tumbada no es
   que sea estrecha —tiene 1024— sino que solo tiene 768 de alto. Ahi el recurso
   escaso es el vertical, asi que se recorta el cromo: margenes de cabecera,
   relleno de los bloques y del pie. Nada de esto toca el tamaño de los campos
   ni su altura tactil de 44 px; se quita marco, no contenido. */
@media (max-height:820px) and (min-width:761px){

  /* Cuatro columnas: con 880 px de tarjeta cada campo se queda en 200, que
     sigue siendo comodo para un telefono o un desplegable, y ahorra una fila
     entera en el bloque de identificacion. */
  .sk-form .sk-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .sk-form .sk-grid .medio{grid-column:span 2;}

  .sk-form{padding-top:0; padding-bottom:8px;}
  .sk-form h1{margin-bottom:2px;}
  .sk-form .sk-block-hd{padding-top:8px; padding-bottom:2px;}
  .sk-form .sk-block-bd{padding-top:8px;}
  .sk-form .sk-field{margin-bottom:6px;}
  .sk-form .sk-actions{padding-top:10px; padding-bottom:10px;}

  /* Los ultimos 35 px salen de aire, no de contenido.

     Una cuenta comercial ya entra justa en una tablet apaisada, pero una
     personal se pasaba: su bloque de identificacion lleva una fila mas (Sexo y
     Fecha de nacimiento), y el pie quedaba cortado por 35 px. Lo unico que se
     salia era la linea de copyright -el boton de Guardar y todos los campos ya
     se veian-, pero por 35 px de margen no vale la pena dejarlo a medias.

     Se recorta separacion entre bloques, no dentro de ellos: los campos siguen
     agrupados igual de claros y ningun control pierde su altura tactil. */
  .sk-form .sk-sub{margin-bottom:14px;}
  .sk-form .sk-block{margin-bottom:16px;}
  .sk-form .sk-nota{margin-bottom:12px;}
  .sk-form textarea.form-control{min-height:64px;}

  /* A cuatro columnas la etiqueta mas larga -"Numero de identificacion"- se
     partia en dos lineas y dejaba su campo 24 px mas abajo que los vecinos, con
     la fila descuadrada. Se le baja el espaciado de letra de .14 a .10em: sigue
     leyendose como versalita y ya entra en una linea. */
  .sk-form .sk-field label,.sk-form label.label-control{letter-spacing:.10em;}

  .sk-home{padding-top:0; padding-bottom:8px;}
  .sk-home-hd{margin-bottom:14px;}
  .sk-apps-sec{margin-bottom:14px;}

  .footer.footer-light{padding:8px 0;}
}


/* ── PERFIL 3 · MOVIL ───────────────────────────────────────────────────────
   Criterio: en un movil NO se persigue que la pantalla entre sin bajar. Un
   telefono es un aparato de desplazar; forzar un panel de cuatro modulos y
   cuatro rutas en 812 px obligaria a encoger tarjetas y letra hasta hacerlas
   incomodas, y el usuario de movil ya espera deslizar. Aqui lo que se persigue
   es que nada se rompa: que no haya desbordes, que el texto se lea y que todo
   lo que se toca tenga su medida.

   Comprobado en 375: no hay desplazamiento horizontal y ningun control baja de
   44 px de alto. Lo que si estaba roto era esto: */
@media (max-width:760px){

  /* En el movil el titular baja a 28: sigue mandando sobre el resto del texto
     sin comerse la pantalla. */
  :root{--t-portada:28px;}

  /* PERFIL 3 · CELULAR — una sola columna.

     Antes lo resolvia el auto-fit por su cuenta; ahora que las columnas van
     fijas hay que decirlo, o en el movil quedarian tres tarjetas de 100 px. */
  .sk-apps,.sk-admin{grid-template-columns:1fr;}

  /* El rotulo de la cuenta ("CUENTA COMERCIAL · correo@...") medía 405 px
     dentro de una caja de 315 y el correo se salia por el borde derecho,
     cortado a media palabra. Con letra de caja alta y .16em de espaciado, un
     correo largo no cabe en un movil de ninguna manera.

     Se parte en dos lineas -el tipo de cuenta arriba, el correo debajo- y si
     aun asi el correo no cabe, se corta con puntos suspensivos en vez de
     desbordarse. El separador sobra cuando ya no van seguidos. */
  .sk-home-eyebrow{display:flex; flex-direction:column; gap:2px;
    letter-spacing:.12em;}
  .sk-home-eyebrow .sep{display:none;}

  /* El correo se CORTA con puntos suspensivos, no se parte.

     Mi primer intento fue word-break:break-all y el resultado fue peor que el
     problema: el correo se rompia por cualquier letra y quedaba
     "...MARISQUERIA.SKY / LAB@GMAIL.COM", ilegible. Un correo no tiene sitios
     donde partir con sentido.

     Cortado se entiende de un vistazo de que cuenta se trata, que es para lo
     que esta aqui, y el correo completo se ve en Perfil. */
  .sk-home-eyebrow .correo{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
}

/* ── DOCUMENTOS LEGALES ─────────────────────────────────────────────────────
   Los Términos y el Aviso de Privacidad. Son texto largo y poco mas, asi que
   lo unico que importa aqui es que se lean comodos.

   La medida es 68ch y no un ancho en pixeles: lo que cansa al leer no son los
   pixeles sino los caracteres por linea. Por encima de unos 75 el ojo pierde
   el renglon al volver a la izquierda.

   Se estilan las etiquetas sueltas (h2, p, ul...) a proposito, sin pedir
   clases. Quien actualice el documento legal escribe HTML normal y no tiene
   que saberse nuestro CSS. */
/* El font-size aqui NO es decoracion, sostiene la medida de linea.

   Las tres cajas de abajo se miden en "ch", que es el ancho del cero de la
   letra DEL CONTENEDOR. Sin esta linea el contenedor heredaba 16 px mientras
   el texto se pinta a 14, asi que la caja daba de si: medido, 92 caracteres
   por linea en vez de los 68 que pedia el calc. Igualando la letra del
   contenedor a la del texto, el ch mide lo que dice.

   Y son 60ch, no 68: el "ch" es el ancho del CERO, que en Inter es mas ancho
   que la letra minuscula media, asi que 68ch daban 80 caracteres reales.
   Medido sobre texto de verdad, 60ch dejan unos 70 por linea, que es donde
   se lee comodo. */
.sk-legal-body{margin:0; background:var(--page); color:var(--text);
  font-family:var(--cuerpo); font-size:var(--t-cuerpo);
  -webkit-font-smoothing:antialiased;}

.sk-legal-hd{padding:24px 24px 0; max-width:calc(60ch + 48px); margin:0 auto;}
.sk-legal-marca{display:inline-block; line-height:0;}
.sk-legal-marca img{height:22px; width:auto;}

.sk-legal{max-width:calc(60ch + 48px); margin:0 auto; padding:32px 24px 48px;}

.sk-legal h1{margin:24px 0 32px; font-family:var(--display);
  font-size:var(--t-titulo); font-weight:600; letter-spacing:-.01em; color:var(--text);}

.sk-legal-cuerpo{font-size:var(--t-cuerpo); line-height:1.7; color:var(--soft);}
.sk-legal-cuerpo h2{margin:32px 0 12px; font-family:var(--display);
  font-size:var(--t-destacado); font-weight:600; color:var(--text);}
.sk-legal-cuerpo h3{margin:24px 0 8px; font-size:var(--t-cuerpo);
  font-weight:600; color:var(--text);}
.sk-legal-cuerpo p{margin:0 0 16px;}
.sk-legal-cuerpo ul,.sk-legal-cuerpo ol{margin:0 0 16px; padding-left:24px;}
.sk-legal-cuerpo li{margin:0 0 8px;}
.sk-legal-cuerpo strong{color:var(--text); font-weight:600;}
.sk-legal-cuerpo a{color:var(--brand-ink);}

/* El estado de "todavia no publicado". Va en ambar y no en rojo: no es un
   error del sistema, es un aviso de que falta algo. */
.sk-legal-pendiente{border:1px solid var(--border-2); border-left:3px solid var(--warn);
  border-radius:6px; padding:16px 20px; background:var(--surface); color:var(--soft);}
.sk-legal-pendiente p{margin:0 0 8px;}
.sk-legal-pendiente p:last-child{margin:0;}
.sk-legal-pendiente strong{color:var(--warn-ink);}

/* 44 px de alto para el enlace de volver, que en estas dos pantallas es la
   unica salida que hay. */
.sk-legal-volver{margin:40px 0 0;}
.sk-legal-volver a{display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--t-menor); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--brand-ink); text-decoration:none;}
.sk-legal-volver a:hover{text-decoration:underline;}

.sk-legal-pie{max-width:calc(60ch + 48px); margin:0 auto; padding:0 24px 32px;}
.sk-legal-pie p{margin:0; padding-top:24px; border-top:1px solid var(--border);
  font-size:var(--t-menor); color:var(--mut);}

@media (max-width:600px){
  .sk-legal-hd{padding:16px 16px 0;}
  .sk-legal{padding:24px 16px 32px;}
  .sk-legal-pie{padding:0 16px 24px;}
  .sk-legal h1{margin:16px 0 24px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   LA PORTADA, CON PESO
   ══════════════════════════════════════════════════════════════════════════

   El diagnostico era que la pantalla estaba limpia pero timida: todo pesaba lo
   mismo -filete de un pixel, tarjeta blanca, letra pequeña, mucho gris- y no
   habia un solo punto donde el ojo se anclara. El minimalismo que buscamos no
   es "pequeño y gris"; es escala grande, contraste alto y un foco claro.

   Va al final del archivo A PROPOSITO. Son ajustes sobre clases que ya estan
   definidas mas arriba, y a igual especificidad gana la ultima: si esto
   estuviera antes, no se aplicaria. Es el mismo fallo que tenia el boton del
   ojo de la pantalla de contraseña.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── EL TITULAR ANCLA LA PAGINA ────────────────────────────────────────────
   Pasaba de 26 px y competia con el texto de ayuda de al lado. A 40 px con
   peso 300 y letra apretada la portada por fin tiene donde empezar a leerse, y
   el vacio de la mitad de abajo deja de cantar sin inventar contenido. */
.sk-home-hd{margin-bottom:32px;}
.sk-home-hd h1{font-size:var(--t-portada); font-weight:300; letter-spacing:-.02em;
  line-height:1.1; margin:0 0 6px;}
.sk-home-eyebrow{font-size:11px; letter-spacing:.16em; margin-bottom:14px; color:var(--mut);}
/* El correo, en su caja natural. En versalitas y espaciado ancho parecia que
   gritaba, y ademas un correo no se escribe en mayusculas. */
.sk-home-eyebrow .correo{text-transform:none; letter-spacing:.02em;}
.sk-home .sk-sub{max-width:52ch;}

/* ── LAS CABECERAS DE SECCION SE LEEN COMO ESTRUCTURA ─────────────────────
   Eran una etiqueta suelta encima de las tarjetas y no separaban nada. Con la
   linea que sale hacia la derecha se leen como lo que son: el rotulo de un
   bloque. */
.sk-apps-sec{margin:0 0 36px;}
.sk-apps-sec:last-child{margin-bottom:0;}
.sk-apps-sec > h2{display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mut); margin:0 0 14px;}
.sk-apps-sec > h2::after{content:""; flex:1; height:1px; background:var(--border);}

/* ── EL MODULO QUE SE PUEDE ABRIR, QUE SE VEA ─────────────────────────────
   Habia cuatro tarjetas casi identicas y solo una llevaba a algun sitio: se
   distinguia por un texto un pelin mas oscuro. Lo unico que el usuario viene a
   pulsar no tenia ningun privilegio visual.

   Ahora el activo lleva filete de marca arriba, el nombre en tinta de marca y
   una flecha al pasar por encima; los que no estan listos pasan a borde
   discontinuo, fondo transparente y se quedan de fondo. Se ve a un metro. */
.sk-app{position:relative;}
.sk-app::before{content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:transparent; border-radius:var(--radius-sm) var(--radius-sm) 0 0;}
.sk-app:not(.inactiva)::before{background:var(--brand);}
.sk-app:not(.inactiva) .sk-app-ico{stroke:var(--brand-ink);}
.sk-app:not(.inactiva) .sk-app-nom{color:var(--brand-ink);}
.sk-app.inactiva{background:transparent; border-style:dashed;}
.sk-app.inactiva .sk-app-nom{color:var(--mut);}

/* display:block y no inline. Sin esto la etiqueta "Proximamente" se colocaba
   pegada al nombre cuando el nombre era corto -"ERP Proximamente" en la misma
   linea- y debajo cuando era largo, como en "Workshop": la misma tarjeta con
   dos maquetaciones segun cuantas letras tuviera el titulo. */
.sk-app-nom{display:block;}

/* La direccion del modulo, recortada con puntos y no cortada a machete.
   Medido en tablet: con la tarjeta a 193 px, "restaurant.skylablocal.hn" no
   cabe y se cortaba a media letra contra el borde. No pasa nada por no verla
   entera -el enlace lleva ahi igual-, pero tiene que verse que esta recortada
   y no que la interfaz esta rota. */
.sk-app-host{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.sk-app .sk-flecha{position:absolute; right:16px; top:18px; width:16px; height:16px;
  stroke:var(--brand-ink); fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:0; transform:translateX(-4px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);}
.sk-app:not(.inactiva):hover .sk-flecha,
.sk-app:not(.inactiva):focus-within .sk-flecha{opacity:1; transform:translateX(0);}

@media (prefers-reduced-motion:reduce){
  .sk-app .sk-flecha{transition:none;}
}

/* ── EL AVATAR DE LA BARRA Y SU MENU ───────────────────────────────────────
   Con foto salia de 30x30 y con inicial de 22x22 dentro de una caja de 30x22:
   el mismo sitio con dos tamaños y encima uno no cuadrado, que es lo que hacia
   que la inicial se viera descentrada. Ahora los dos son el mismo circulo. */
.navbar .avatar{display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px;}
.navbar .avatar img{width:30px; height:30px; object-fit:cover;
  border-radius:var(--radius-circulo);}
/* El tamaño de la inicial se fija arriba, en la regla con #navbar-avatar.
   Aqui solo la forma, que es comun a la foto y a la inicial. */
.navbar .avatar .sk-avatar-inicial{border-radius:var(--radius-circulo);}

/* Las dos opciones del menu, a la misma altura y con sitio para el dedo. */
.navbar .dropdown-menu .dropdown-item{display:flex; align-items:center;
  min-height:44px; padding-top:0; padding-bottom:0;}

/* Con el dedo, el boton que abre el menu de la cuenta necesita ancho, no solo
   alto: medido en movil daba 30x46, o sea 30 px de ancho para un objetivo que
   pide 44. El avatar sigue siendo de 30; lo que crece es la zona pulsable. */
@media (pointer:coarse){
  .navbar #dropdownBasic3{min-width:44px; justify-content:center;}
}

/* ── EL MENU DE LA CUENTA SE SALIA DE LA PANTALLA ──────────────────────────
   Medido: en un movil de 375 px el menu abria en x=-110, o sea 110 px fuera
   por la izquierda; en tablet vertical de 768, en x=-120. Se veia cortado
   contra el borde y las dos opciones quedaban a medias.

   La culpa es de .dropdown-menu-right, que alinea el borde DERECHO del menu
   con el borde derecho del boton. En escritorio funciona porque el avatar esta
   pegado a la derecha del todo. Pero .navbar-expand-lg colapsa por debajo de
   992 px, y dentro de la hamburguesa el avatar pasa a estar a la IZQUIERDA
   (x=24): colgar un menu de 178 px hacia la izquierda desde ahi lo saca de la
   pantalla.

   Por debajo de ese corte se alinea al reves, por la izquierda del boton, que
   es donde hay sitio. Y se le pone un ancho minimo para que no quede
   descolgado y raquitico dentro del menu desplegado.

   Afecta a TODAS las pantallas con sesion, porque la barra es la misma en
   todas; pero se arregla aqui una vez. Los otros cinco desplegables que hay en
   el proyecto estan en vistas que no carga nadie. */
@media (max-width:991.98px){
  .navbar .dropdown-menu-right{right:auto; left:0; min-width:200px;}
}

/* ── EL BOTON SECUNDARIO ───────────────────────────────────────────────────
   Hacia falta uno de verdad. Habia pantallas con DOS botones cian solidos
   -Perfil tenia "Cambiar contraseña" y "Editar"- y dos primarios no son
   jerarquia, son indecision: el ojo no sabe cual es la accion principal.

   Se define con nuestros tokens y no se deja el del tema, que trae su propio
   azul y no cuadra con la marca. */
.btn-outline-primary{background:transparent !important;
  border:1px solid var(--border-2) !important; color:var(--brand-ink) !important;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);}
.btn-outline-primary:hover,.btn-outline-primary:focus{
  background:var(--surface) !important; border-color:var(--brand) !important;
  color:var(--brand-ink) !important;}

/* ── LOS GRUPOS DEL FORMULARIO SE LEEN COMO GRUPOS ─────────────────────────
   "Identificacion" y "Como localizarte" eran dos etiquetas diminutas pegadas a
   los campos: no separaban nada, y el formulario se leia como una losa de doce
   campos seguidos. La informacion estaba agrupada en el HTML pero no en la
   pantalla.

   Se les da aire arriba, una linea que cierra el rotulo -el mismo recurso que
   usan las secciones de la portada, para que sea el mismo idioma- y el icono
   algo mayor. No se toca ni un campo ni una altura: solo el marco. */
.sk-form .sk-block-hd{padding:22px 24px 10px; gap:10px;}
.sk-form .sk-block:first-child .sk-block-hd{padding-top:16px;}
.sk-form .sk-block-hd::after{content:""; flex:1; height:1px; background:var(--border);}
.sk-form .sk-block-hd svg{width:18px; height:18px;}
.sk-form .sk-block-hd h2{font-size:11px; letter-spacing:.16em; color:var(--mut); white-space:nowrap;}
.sk-form .sk-block-bd{padding-top:16px;}

/* En pantallas bajas se recupera parte de ese aire, que ahi cada pixel cuenta. */
@media (max-height:820px) and (min-width:761px){
  .sk-form .sk-block-hd{padding:14px 24px 8px;}
  .sk-form .sk-block:first-child .sk-block-hd{padding-top:10px;}
  .sk-form .sk-block-bd{padding-top:10px;}
}


/* ============================================================================
   ROLES · las casillas de "qué abre este rol"          prefijo .sk-rol / .sk-check
   ────────────────────────────────────────────────────────────────────────────
   COMPONENTE NUEVO, y conviene decir por qué, que la regla es no inventar
   variantes de lo que ya existe.

   Lo más parecido era .sk-choice, la tarjeta de "cuenta comercial o personal"
   del registro: 13 px de relleno arriba y abajo, borde, fondo propio. Perfecta
   para elegir entre DOS cosas. Aquí hay que enseñar las pantallas de un módulo
   —el ERP publica más de cuarenta— y con esa tarjeta la página mediría metros
   y no se podría comparar un grupo con otro de un vistazo.

   Así que la casilla es plana y compacta, y lo que estructura la pantalla son
   los grupos que el propio módulo declara. Los colores, bordes, radios y la
   marca salen de los mismos tokens: es nuevo, no es ajeno.                    */

.sk-rol-grupo{border:0; margin:0 0 24px; padding:0;}
.sk-rol-grupo:last-child{margin-bottom:0;}

/* El nombre del grupo se lee como los rótulos del resto del sistema: versalitas
   y espaciado, igual que las cabeceras de bloque. */
.sk-rol-grupo legend{float:none; width:auto; margin:0 0 12px; padding:0;
  font-family:var(--display); font-size:var(--t-etiqueta); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--soft);
  border-bottom:1px solid var(--border); padding-bottom:8px;}

/* Rejilla que se adapta sola: en un monitor caben tres o cuatro por fila; en un
   móvil, una. Sin puntos de corte escritos a mano, que siempre se quedan
   cortos con el módulo siguiente. */
.sk-rol-pantallas{display:grid; gap:4px 16px;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));}

.sk-check{position:relative; display:flex; align-items:center; gap:10px; margin:0;
  padding:8px 10px; border-radius:var(--radius-xs); cursor:pointer;
  font-family:var(--sans); font-size:var(--t-cuerpo); font-weight:400;
  text-transform:none; letter-spacing:normal; color:var(--text);
  transition:background .15s;}
.sk-check:hover{background:var(--page-2);}

/* La casilla se dibuja aquí en vez de dejar la del navegador: la del sistema
   no acepta el color de marca y en Firefox mide distinto que en Chrome. */
.sk-check input[type="checkbox"]{appearance:none; -webkit-appearance:none;
  position:relative; flex:none; width:18px; height:18px; margin:0;
  border:1px solid var(--border-2); border-radius:var(--radius-xs);
  background:var(--surface); cursor:pointer;
  transition:border-color .15s, background .15s;}
.sk-check input[type="checkbox"]:checked{border-color:var(--brand); background:var(--brand);}

/* El palito de "marcado" va dibujado con dos bordes girados: no depende de
   ninguna tipografía de iconos ni de un fichero externo, que aquí no se
   cargan. */
/* El palito va colocado respecto a la CASILLA, no respecto a la fila: si el
   nombre de la pantalla ocupa dos lineas, la fila crece y el palito se
   quedaria flotando en medio. */
.sk-check input[type="checkbox"]:checked::after{content:""; position:absolute;
  left:5px; top:1px; width:5px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}
.sk-check input[type="checkbox"]:focus-visible{box-shadow:0 0 0 3px var(--brand-ring);}

/* En el bloque de arriba ("Activo") la casilla va sola con su explicación
   debajo, y ahí sí se comporta como un campo del formulario. */
.form-group.sk-check{display:block; padding:0;}
.form-group.sk-check:hover{background:none;}
.form-group.sk-check label{display:flex; align-items:center; gap:10px; margin:0 0 4px;
  text-transform:none; letter-spacing:normal; font-size:var(--t-cuerpo); font-weight:400;
  font-family:var(--sans); cursor:pointer;}
.form-group.sk-check label input[type="checkbox"]{appearance:none; -webkit-appearance:none;
  flex:none; width:18px; height:18px; margin:0; position:relative;
  border:1px solid var(--border-2); border-radius:var(--radius-xs); background:var(--surface);}
.form-group.sk-check label input[type="checkbox"]:checked{border-color:var(--brand); background:var(--brand);}
.form-group.sk-check label input[type="checkbox"]:checked::after{content:""; position:absolute;
  left:5px; top:1px; width:5px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}

/* La pantalla de roles es más ancha que la de contraseña: son muchas casillas y
   con 660 px se leen en columnas de dos. Se ensancha solo esta. */
.sk-rol{max-width:900px;}


/* La barra de la pantalla de traspasos lleva dos formularios: el de rechazar
   -con su motivo- y el de aceptar. Se separan a los extremos a proposito: son
   las dos acciones mas irreversibles del sistema y no deben quedar pegadas,
   porque quien las pulsa esta leyendo documentos, no mirando botones. */
.sk-form .sk-actions{justify-content:space-between; gap:16px;}
.sk-rechazo{display:flex; gap:8px; align-items:center; flex:1 1 auto; max-width:60%;}
.sk-rechazo .form-control{height:var(--alto-campo); font-size:var(--t-cuerpo);}
@media (max-width:640px){
  .sk-form .sk-actions{flex-direction:column; align-items:stretch;}
  .sk-rechazo{max-width:none;}
}


/* LA FRANJA DE ADMINISTRACIÓN DE SKYLAB.
   ────────────────────────────────────────────────────────────────────────────
   Mismas medidas que la del entorno —que se pinta en línea desde EntornoSkylab—
   para que las dos se lean como lo que son: dos avisos del mismo tipo, uno
   encima del otro. Lo único distinto es el color, y ahí está la información:
   la del entorno es naranja porque avisa de dónde estás; esta es oscura porque
   dice de quién son estas pantallas.

   Y es oscura, no roja: no está pasando nada malo. Solo estás en la parte de
   dentro. */
/* LA BARRA BAJA LO QUE MIDE LA FRANJA DEL ENTORNO.

   La barra del logotipo esta FIJADA al tope por el tema comprado, asi que sin
   esto se queda debajo de la franja y con ella el menu de "Cerrar sesion", que
   deja de poder pulsarse. Un aviso que impide salir de la sesion es peor que no
   tener aviso.

   Los 29 px son lo que mide la franja del entorno. En produccion esa franja no
   existe, y entonces la barra se queda arriba del todo.

   AQUI HUBO UNA SEGUNDA FRANJA que decia "administracion de Skylab", y se
   quito: la barra en navy con el logotipo en blanco ya lo dice, y encima se
   queda a la vista al bajar, cosa que la franja no hacia. Eran el mismo aviso
   dos veces. */
.sk-en-admin .navbar{top:29px;}
.sk-en-admin.sk-franja-una .navbar{top:0;}


/* ════════════════════════════════════════════════════════════════════════════
   LA ADMINISTRACIÓN DE SKYLAB · el mismo sistema, en tono corporativo
   ════════════════════════════════════════════════════════════════════════════
   NO es una paleta nueva. Es la de siempre repartida de otra manera, y el
   motivo es que estas pantallas no son de nuestros clientes: son la sala de
   máquinas. Tienen que verse serias, densas y distintas al primer vistazo,
   sin dejar de ser Skylab.

   TRES DECISIONES, y las tres se pueden defender:

   1. MANDA EL NAVY, NO EL CIAN. El azul de marca es de cara al cliente; aquí
      la estructura la lleva --navy, que ya existía en los tokens y llevaba
      años sin usarse para nada. El cian se reserva para UNA cosa: la acción
      principal. Un solo acento, como pide cualquier consola seria.

   2. MÁS DENSA. Una pantalla de datos no se lee como una de cliente: aquí se
      viene a comparar números, no a que a uno lo acompañen. Se recorta el aire
      sin llegar a apretar.

   3. LOS NÚMEROS EN CIFRAS DE ANCHO FIJO. Es el detalle que más se nota y que
      casi nadie pone: sin él, una columna de cantidades baila y no se pueden
      comparar de un golpe de vista.

   Lo que NO se hace: ni degradados, ni sombras nuevas, ni una tipografía
   distinta. Es la misma casa vista desde dentro. */

/* La barra superior en navy: es lo que hace que se note al entrar, y es gratis
   -no hay componente nuevo, solo otro color en el mismo-. */
.sk-en-admin .navbar.bg-light{background:var(--navy) !important;
  border-bottom:1px solid rgba(255,255,255,.10);}
.sk-en-admin .navbar .nav-link{color:rgba(255,255,255,.72) !important;}
.sk-en-admin .navbar .nav-link:hover{color:#fff !important;}
.sk-en-admin .sk-brand-app{color:rgba(255,255,255,.72);}
.sk-en-admin .sk-brand-sep{background:rgba(255,255,255,.22);}

/* El logotipo es oscuro y sobre navy no se veria. Se aclara con un filtro en
   vez de cargar OTRO fichero de imagen: son los mismos bytes y no hay una
   segunda version que mantener el dia que cambie la marca. */
.sk-en-admin .sk-brand-logo{filter:brightness(0) invert(1); opacity:.92;}

/* Las cabeceras de bloque, en navy y no en el gris de siempre: son los rotulos
   que estructuran la pantalla y aqui hay muchos bloques por pagina. */
.sk-en-admin .sk-block-hd h2{color:var(--navy);}
.sk-en-admin .sk-block-hd svg{stroke:var(--navy);}

/* MÁS DENSA. Los mismos bloques, con menos aire. */
.sk-en-admin .sk-block{margin-bottom:16px;}
.sk-en-admin .sk-block-hd{padding:12px 20px;}
.sk-en-admin .sk-block-bd{padding:16px 20px;}
.sk-en-admin .sk-dl .r{padding:12px 20px;}
.sk-en-admin .sk-actions{padding:12px 20px;}
.sk-en-admin h1{margin-bottom:4px;}

/* CIFRAS DE ANCHO FIJO en todo lo que sea un dato. Una columna de cantidades
   con cifras de ancho variable baila, y comparar dos numeros deja de ser un
   vistazo para ser un ejercicio. */
.sk-en-admin .sk-dl dd,
.sk-en-admin .sk-inv-meta{font-variant-numeric:tabular-nums;}

/* El dato, mas grande que su rotulo. En una consola el numero es el
   protagonista y la etiqueta solo dice de que es. */
.sk-en-admin .sk-dl dd{font-size:var(--t-destacado); font-weight:600; color:var(--navy);}

/* Y el acento se reserva para la accion principal. Todo lo demas es navy y
   grises: si el cian estuviera en cinco sitios, dejaria de señalar nada. */
.sk-en-admin .sk-crumb a{color:var(--mut);}
.sk-en-admin .sk-crumb a:hover{color:var(--navy);}