/* ===========================================================================
   Plataforma OH WOW! · capa propia

   Va ENCIMA del sistema de diseño de la casa (`kit/tokens.css` y
   `kit/components.css`), que NO se toca, y solo añade lo que el sistema no
   tiene: la barra superior de la plataforma, el mapa de módulos, la pantalla
   de entrada y el selector de empresa.

   Sin colores nuevos: todo sale de los tokens del sistema, resuelto en claro
   y en oscuro. Mismo patrón que `hub.css` en labs.
   =========================================================================== */

/* Margen lateral de TODA la plataforma. Cabecera, cuerpo y pie salen de aquí,
   así que nunca se descuadran entre sí. Los textos van a ancho completo. */
:root {
  --plat-pad: clamp(16px, (100vw - 1000px) / 4.6, 200px);
}

/* Contención horizontal a nivel de página: un titular o una tabla mal medida
   no debe poder ensanchar el documento entero y arrastrar fuera la cabecera.
   `clip` y no `hidden`, para no matar el pegado de la barra superior. */
html { overflow-x: clip; }

body { min-height: 100vh; display: flex; flex-direction: column; }

/* El salto al contenido, para quien navega con teclado. */
.salto {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--surface); color: var(--text);
  padding: 8px 14px; border-radius: var(--r-in); box-shadow: var(--sh-2);
  font-size: var(--fs-sm); font-weight: 600;
}
.salto:focus { left: 16px; top: 16px; }

/* ---------- barra superior ---------- */

.plat-top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 14px; flex-wrap: nowrap;
  padding: 14px var(--plat-pad);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--hair-soft);
}
.plat-marca { display: flex; align-items: center; color: var(--text); flex: none; }
.plat-logo { width: 104px; height: auto; display: block; }
.plat-sep { width: 1px; height: 22px; background: var(--rule); flex: none; }

.plat-menu { display: flex; gap: 18px; flex: 1; min-width: 0; }
.plat-menu a {
  color: var(--text-dim); text-decoration: none; font-size: var(--fs-sm);
  padding: 4px 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.plat-menu a:hover { color: var(--text); }
.plat-menu a[aria-current] { color: var(--text); border-bottom-color: var(--accent); }

.plat-quien { display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm); }
.plat-empresa { display: inline-flex; align-items: center; gap: 7px; color: var(--text-dim); }
.plat-empresa::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--c, var(--accent)); flex: none;
}
.plat-persona { color: var(--text); font-weight: 600; }

/* La barra superior NUNCA pasa a dos filas: al ser pegajosa, una segunda fila
   tapa el contenido. En pantalla estrecha se recorta lo prescindible y el menu
   se abre desde el boton. */
.plat-abrir-menu { display: none; }

/* En pantalla ancha el envoltorio no existe a efectos de maquetacion: sus dos
   hijos se colocan como si colgaran directamente de la barra. */
.plat-desplegable { display: contents; }

@media (max-width: 980px) {
  .plat-inicio, .plat-sep { display: none; }
}

@media (max-width: 820px) {
  /* La barra se queda en logotipo y boton. TODO lo demas baja al desplegable:
     las secciones, el cliente, quien eres, el tema y salir. Regla de la casa:
     la barra NUNCA pasa a dos filas, y en movil se navega por menu. */
  .plat-top { justify-content: space-between; }
  .plat-abrir-menu { display: inline-flex; order: 9; }

  .plat-desplegable {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: var(--hair-soft);
    padding: 8px 0 14px;
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .plat-desplegable.abierto { display: flex; }

  .plat-menu { flex-direction: column; gap: 0; }
  .plat-menu a { padding: 12px var(--plat-pad); border-bottom: none; font-size: 1rem; }
  .plat-menu a[aria-current] { background: var(--surface-alt); font-weight: 600; }

  .plat-quien {
    flex-direction: column; align-items: stretch; gap: 10px;
    padding: 14px var(--plat-pad) 0; margin-top: 8px;
    border-top: var(--hair-soft);
  }
  .plat-cliente select { max-width: none; width: 100%; }
  .plat-persona { order: -1; }
  .plat-quien .btn-ghost { justify-content: center; }
}

/* ---------- cuerpo y pie ---------- */

.plat-cuerpo { flex: 1; padding: 32px var(--plat-pad) 64px; }
.plat-cuerpo > h1 { font-size: var(--fs-h1); margin-bottom: 8px; }
.plat-cuerpo > h2 { font-size: var(--fs-h2); margin: 40px 0 8px; }
.plat-entradilla { color: var(--text-dim); max-width: none; margin-bottom: 8px; }

/* Dos parrafos seguidos NO se separan solos.
   El sistema de la casa arranca con `*{margin:0}`, asi que cualquier pantalla
   con dos parrafos los pega uno debajo del otro sin aire, como si fueran dos
   lineas del mismo. Se veia en Ausencias y volvio a verse en Salud: dos ideas
   distintas leidas como una.
   El aire va al parrafo que SIGUE a otro, no a todos, para no descolocar los
   que ya llevan su propio margen ni los que van solos dentro de una tarjeta. */
.plat-cuerpo p + p { margin-top: 12px; }

.plat-pie {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 22px var(--plat-pad);
  border-top: var(--hair-soft);
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-soft);
}
.pie-marca { color: var(--text); display: flex; align-items: center; flex: none; }
.pie-logo { width: 88px; height: auto; display: block; }
.plat-inicio { color: var(--text-dim); text-decoration: none; font-size: var(--fs-sm); flex: none; }
.plat-inicio:hover { color: var(--text); }

/* Los enlaces sueltos dentro de un párrafo de la plataforma necesitan aire
   entre ellos, o "Cambiar a X Cambiar a Y" se lee como una sola frase. */
.plat-entradilla a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; }
.plat-entradilla a + a { margin-left: 16px; }
.plat-entradilla a:hover { color: var(--text); }

/* ---------- mapa de módulos ---------- */

/* Usa .card y .card-grid del sistema. Aquí solo lo que el sistema no tiene:
   el estado de cada módulo y el apagado de los que no están construidos. */
.mod-estado { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.mod h3 { font-family: var(--display); font-size: var(--fs-h3, 1.02rem); margin: 0 0 4px; }
.mod p  { margin: 0; font-size: var(--fs-sm); color: var(--text-dim); }
a.mod { display: block; text-decoration: none; color: inherit; }
.mod--pendiente { opacity: 0.5; }
/* Sin resaltado ni efecto al pasar el raton por las tarjetas: regla de la casa.
   Lo que distingue una tarjeta abierta de una pendiente es su estado y su
   opacidad, no un borde que aparece. */

/* ---------- un trozo de codigo para copiar ---------- */

/* El kit solo pinta los bloques de codigo DENTRO de `.micro`, que es otra cosa.
   Fuera de ahi salian con la letra de fabrica del navegador y sin caja, o sea
   como un parrafo raro. Y un bloque que hay que copiar y pegar en una web tiene
   que verse como lo que es, o nadie lo copia entero.

   Se define aqui, en la hoja de la plataforma, no en el kit: el kit lo usan
   otros proyectos y esto es una necesidad de esta aplicacion. */
.codigo {
  background: var(--surface-alt, #f0eae0);
  border: var(--hair-soft, 1px solid rgba(0,0,0,.12));
  border-radius: var(--r-md, 8px);
  padding: var(--sp-12, 12px) var(--sp-14, 14px);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--fs-sm, .82rem);
  line-height: 1.5;
  overflow-x: auto;
  margin: 0 0 10px;
}
.codigo code { font-family: inherit; font-size: inherit; background: none; padding: 0; }

/* ---------- la cifra de una tarjeta, y su rotulo ---------- */

/* SE ESCRIBIERON Y NUNCA SE PINTARON. `.cifra` estaba en 15 pantallas y
   `.eyebrow` en 17, y ninguna de las dos existia en ninguna hoja: la cifra del
   trimestre, el total de una factura y el saldo de un cliente salian con el
   mismo tamano, el mismo peso y la misma tipografia que un parrafo cualquiera.

   No daba ningun error y el codigo se lee perfecto, asi que llevaba semanas
   asi. Se descubrio midiendo la pagina pintada: los tres valores medidos eran
   identicos a los de un parrafo (15,2 px, peso 400, la misma familia).

   La leccion de siempre en esta casa, y van varias: una clase que no existe no
   se nota leyendo, se nota midiendo. Por eso hay un guardia que lo comprueba
   sobre la pagina pintada, no sobre las clases del codigo. */
.card .eyebrow,
.eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--w-fuerte);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-soft, var(--text-dim));
  margin-bottom: 6px;
}

.cifra {
  font-family: var(--display);
  font-size: var(--fs-stat);   /* el token que el kit ya tenia para esto */
  font-weight: var(--w-fuerte);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}

/* ---------- el titulo de una tarjeta ---------- */

/* El kit EXCLUYE a proposito los h3 que van dentro de una tarjeta
   (`main h3:not(.card h3)`), porque sus variantes con foto los pintan cada una a
   su manera. Una tarjeta lisa se quedaba con el h3 de fabrica del navegador:
   mas grande de lo que toca y con otra tipografia. No da error, solo se ve mal,
   asi que se pinta aqui, que es la hoja de la plataforma. */
.card h3 {
  font-family: var(--display);
  font-size: var(--fs-h3, 1.02rem);
  font-weight: var(--w-fuerte);
  line-height: var(--lh-titulo);
  margin: 0 0 6px;
}
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }

/* ---------- selector de empresa ---------- */

a.empresa-card { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; font-weight: 600; }
.empresa-card .punto { width: 14px; height: 14px; border-radius: 50%; background: var(--c, var(--accent)); flex: none; }

/* ---------- pantallas publicas (reservar, anular) ---------- */
/* Quien las abre no ha entrado: no hay menu, ni lateral, ni empresa. Solo el
   contenido, a ancho completo y con aire a los lados. */
body.plat-publica {
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: var(--fs-body);
  margin: 0; padding: 0;
}
.ancho-completo {
  width: 100%;
  padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 3.5rem);
  box-sizing: border-box;
}
body.plat-publica a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; }
body.plat-publica a:hover, body.plat-publica a:focus-visible { color: var(--text); }

/* ---------- los huecos de la agenda ---------- */
/* Las horas van en FILA y no en columna. Con horarios normales salen cincuenta
   huecos en tres semanas, y en columna eso es una pagina de scroll donde no se
   distingue un dia de otro. En fila, cada dia ocupa dos lineas y se compara de
   un vistazo, que es lo que hace de verdad quien busca hueco. */
fieldset.huecos { border: 0; padding: 0; margin: 0 0 24px; }
fieldset.huecos legend {
  font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-soft); padding: 0; margin-bottom: 10px;
}
.hueco-dia {
  font-weight: 600; margin: 18px 0 8px;
  padding-bottom: 6px; border-bottom: var(--hair-soft);
}
.hueco-horas { display: flex; flex-wrap: wrap; gap: 8px; }

/* Cada hora es una pastilla que se pulsa entera, no un circulito diminuto con
   una etiqueta al lado. El circulo nativo se esconde y la pastilla hace de
   boton: el area para pulsar pasa de doce pixeles a la etiqueta completa, que
   en un movil es la diferencia entre acertar y no. */
label.hueco { position: relative; display: inline-flex; }
label.hueco input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
label.hueco span {
  display: inline-block; padding: 8px 14px; border-radius: var(--r-in);
  border: 1px solid var(--rule); background: var(--surface);
  font-size: var(--fs-sm); font-variant-numeric: tabular-nums; cursor: pointer;
}
label.hueco input:checked + span {
  background: var(--text); color: var(--on-ink); border-color: var(--text);
}
/* El foco se ve, y hace falta: con el circulo nativo escondido, quien va con el
   teclado no tendria ninguna pista de donde esta. */
label.hueco input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 2px; }
label.hueco span:hover { border-color: var(--text-dim); }

/* ---------- detalles de listas ---------- */
.filtros { color: var(--text-dim); font-size: var(--fs-sm); margin: 0 0 14px; }
tr.apagada { opacity: .55; }

/* Un formulario que vive DENTRO de una celda o de una fila: sin margen y sin
   apilar. Se usaba en la ficha de cliente desde antes y no estaba definido en
   ninguna hoja, asi que aquellos botones heredaban el apilado del formulario
   normal y rompian la fila. */
.formulario-en-linea { display: inline; margin: 0; }
.formulario-en-linea .botones { display: inline; margin: 0; }

/* ---------- pantalla de entrada ---------- */

body.plat-entrada {
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--bg);
}
.entrada {
  width: 100%; max-width: 25rem;
  background: var(--surface); border: var(--hair-soft);
  border-radius: var(--r-lg); box-shadow: var(--sh-2);
  padding: 38px 34px;
  display: flex; flex-direction: column; gap: 4px;
}
.entrada .marca { color: var(--text); line-height: 0; }
.entrada-logo { width: 150px; height: auto; display: block; }
.entrada .lema { color: var(--text-soft); font-size: var(--fs-sm); margin: 8px 0 26px; }
.entrada button { margin-top: 26px; justify-content: center; }

/* Los enlaces de la pantalla de entrada NO los alcanza ninguna otra regla.
   Aqui no hay armazon de la plataforma, asi que un enlace se quedaba con el
   color del texto normal, sin subrayado y sin cambiar al pasar el raton: era
   indistinguible de una frase suelta. Medido el 2026-08-23 al poner el primero
   («He perdido la contrasena»), que hasta entonces no habia ninguno.

   Lleva subrayado ademas del color porque aqui el color solo no basta: quien
   no distingue bien los colores necesita otra pista, y en esta pantalla no hay
   nada alrededor con lo que comparar. El gris da 6,26 sobre la tarjeta.       */
.entrada a {
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.entrada a:hover,
.entrada a:focus-visible { color: var(--text); }

/* ---------- formularios (defecto 14 del consejo) ----------

   Estos estilos vivian dentro de .entrada, asi que el unico formulario bonito
   de la plataforma era el de la puerta: el segundo modulo que pidiera un alta
   los habria copiado y pegado, y a partir de ahi cada pantalla iria por su
   cuenta. Ahora son de la casa y .entrada solo es un formulario mas.          */

.formulario { display: flex; flex-direction: column; gap: 4px; }

.formulario label,
.entrada label {
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-soft); margin-top: 14px;
}

/* Una CASILLA DE MARCAR no es un campo de texto.
   La regla de abajo estira todo lo que sea `input` al ancho entero, y eso
   convertía cada casilla en una caja de 1.100 píxeles con la marca perdida en
   una punta. Y su texto salía como el rótulo de un campo: en mayúsculas y en
   tipografía de máquina de escribir, cuando es una frase que se lee.
   Va ANTES que la regla general, y por eso repite el peso del selector: para
   ganarle sin recurrir a `!important`. */
.formulario input[type="checkbox"],
.formulario input[type="radio"],
.entrada input[type="checkbox"],
.entrada input[type="radio"] {
  width: auto; margin: 0; padding: 0; flex: none;
  accent-color: var(--accent-deep, var(--accent));
}

/* Y la etiqueta que ENVUELVE una casilla es una frase junto a ella, no el
   rótulo de un campo que va encima. */
.formulario label:has(input[type="checkbox"]),
.formulario label:has(input[type="radio"]),
.entrada label:has(input[type="checkbox"]),
.entrada label:has(input[type="radio"]) {
  display: flex; align-items: center; gap: 9px;
  font-family: inherit; font-size: var(--fs-sm);
  text-transform: none; letter-spacing: 0;
  color: var(--text); margin-top: 10px; cursor: pointer;
}

.formulario input, .formulario select, .formulario textarea,
.entrada input, .entrada select, .entrada textarea {
  font: inherit; padding: 11px 13px; margin-top: 5px; width: 100%;
  background: var(--bg); color: var(--text);
  border: var(--hair-soft); border-radius: var(--r-in);
}

.formulario input:focus, .formulario select:focus, .formulario textarea:focus,
.entrada input:focus, .entrada select:focus, .entrada textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

.formulario textarea { min-height: 7rem; resize: vertical; }

/* Un campo mal rellenado se marca en el propio campo, no solo arriba: quien
   tiene veinte casillas delante no deberia buscar cual falla.               */
.formulario .campo-mal input,
.formulario .campo-mal select,
.formulario .campo-mal textarea { border-color: var(--danger); }
.formulario .campo-error {
  color: var(--danger); font-size: var(--fs-xs); margin-top: 5px;
}
.formulario .campo-ayuda { color: var(--text-soft); font-size: var(--fs-xs); margin-top: 5px; }

/* Dos campos en una fila, y uno solo debajo de cierto ancho. */
.formulario .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 40rem) { .formulario .fila { grid-template-columns: 1fr; } }

.formulario .botones {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px;
}

/* ---------- avisos entre pantallas (defecto 13 del consejo) ----------

   Al guardar algo se redirige para que recargar no lo guarde dos veces, y en
   ese salto se perdia el «guardado». La pantalla quedaba muda y quien la usa
   no sabe si funciono.                                                       */

/* Los colores son los del sistema, con sus nombres reales. Para el verde se
   usa --ok-ink y no --ok: ese existe precisamente porque el verde de «hecho»
   esta calibrado para llevar letra encima, no para SER letra (4,03 sobre el
   papel claro, y el minimo son 4,5).                                         */
.aviso {
  border-radius: var(--r-in); padding: 11px 14px;
  font-size: var(--fs-sm); margin: 0 0 12px;
  border-left: 1px solid currentColor;   /* filo, nunca banda gruesa */
}
.aviso-ok {
  background: color-mix(in srgb, var(--ok-ink) 12%, transparent);
  color: var(--ok-ink);
}
.aviso-error, .aviso-mal {
  background: color-mix(in srgb, var(--danger-ink) 12%, transparent);
  color: var(--danger-ink);
}
/* Los tres avisos usan la TINTA del estado, no el estado.
   El parche local del ambar se retiro el 2026-08-23, y con el la definicion a
   mano del tema oscuro: ahora los tres colores los define el sistema de diseño
   y estan medidos sobre la caja teñida de cada uno, que es donde de verdad va
   la letra. El de error era el ultimo que seguia usando el color del estado, y
   en tema oscuro se quedaba en 4,16 con el minimo en 4,5.                    */

.aviso-avisa {
  background: color-mix(in srgb, var(--warn-ink) 12%, transparent);
  color: var(--warn-ink);
}
.aviso-info {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
}
.avisos:empty { display: none; }

/* Una lista dentro de un aviso necesita su sangria.
   El sistema arranca con `*{padding:0}`, asi que el punto de cada linea cae
   fuera de la caja del aviso y queda pegado al filo. */
.aviso ul { margin: 6px 0 0; padding-left: 18px; }
.aviso li + li { margin-top: 3px; }

/* El marco donde se mete un panel de cliente. Va aqui y no dentro del HTML
   porque el estilo escrito dentro de la etiqueta obliga a permitirlo en la
   politica de seguridad de contenido, y esa politica se quiere sin permisos
   sueltos. */
.plat-panel-marco {
  width: 100%; height: 75vh;
  border: var(--hair-soft); border-radius: var(--r-lg);
  background: var(--surface);
}

/* ---------- tabla ---------- */

/* .data-table la trae el sistema. Aquí solo el envoltorio que la deja
   desplazarse sola cuando es ancha, sin arrastrar la página entera. */
.tabla-envoltorio {
  overflow-x: auto;
  border: var(--hair-soft); border-radius: var(--r-lg);
  background: var(--surface); margin: 18px 0;
}
.tabla-envoltorio .data-table { min-width: 46rem; }
.tabla-envoltorio .data-table th,
.tabla-envoltorio .data-table td { padding: 11px 16px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ===========================================================================
   Piezas de los tres disenos de la pantalla de inicio.
   Todo adaptable: se comprueba midiendo a 390, 768 y 1500 pixeles de ancho.
   =========================================================================== */

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- selector de cliente en la barra ---------- */

/* Desplegable de cliente, propio. El nativo no vale: su lista la pinta el
   sistema operativo y no respeta ni los colores ni el tema de la pagina. */
.cliente { position: relative; min-width: 0; }

.cliente-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: var(--fs-sm); color: var(--text);
  background: var(--surface); border: var(--hair-soft); border-radius: var(--r-pill);
  padding: 6px 10px 6px 12px; cursor: pointer; max-width: 15rem;
}
.cliente-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cliente-punto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c, var(--accent)); flex: none;
}
.cliente-chev { width: 15px; height: 15px; flex: none; color: var(--text-soft); }
.cliente.abierto .cliente-chev { transform: rotate(180deg); }
.cliente-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cliente-lista {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 15rem; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: var(--hair-soft); border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
.cliente.abierto .cliente-lista { display: block; }
.cliente-lista a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: var(--r-in);
  color: var(--text); text-decoration: none; font-size: var(--fs-sm);
  white-space: nowrap;
}
.cliente-lista a.activo { background: var(--surface-alt); font-weight: 600; }
.cliente-lista a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cliente-tick { margin-left: auto; color: var(--accent-ink); }

/* El kit no le da salto de linea al numero de una estadistica, porque sus
   tableros la montan con bloques. Aqui va con etiquetas en linea, asi que se
   lo damos nosotros: sin esto se lee "2PERSONAS CON ACCESO". */
.stat .n, .stat .l { display: block; }
.stat { text-decoration: none; color: inherit; }

/* ---------- menu lateral ---------- */

/* El fondo y el filete de la columna se pintan en el CONTENEDOR, no en el menú.
   El menú es pegajoso (sigue al bajar mientras se lee), así que solo mide lo
   que la ventana: 1.000 píxeles en una ficha de 2.239. Con el fondo pintado en
   él, se cortaba a media altura y debajo quedaba una franja del color del
   papel, como si la pantalla estuviera medio pintada.
   Pintarlo aquí lo estira hasta abajo sin quitarle al menú lo de ser pegajoso,
   que es lo que hace que siga a la vista al leer una ficha larga. */
.plat-con-lateral {
  display: grid; grid-template-columns: 232px 1fr; align-items: start;
  background: linear-gradient(to right,
    var(--surface) 0 231px,
    var(--rule)  231px 232px,
    transparent  232px);
}
.plat-lateral {
  padding: 24px 0 40px;
  overflow-y: auto;
  /* El fondo y el filete los pone el contenedor, de ahí arriba. */
  background: transparent;
  border-right: none;
}
.plat-lateral .sub {
  font-family: var(--mono); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .09em; color: var(--text-soft);
  margin: 20px 0 6px; padding: 0 20px;
}
.plat-lateral .sub:first-child { margin-top: 0; }
.plat-lateral .nav-item {
  display: block; padding: 8px 20px; font-size: var(--fs-sm);
  color: var(--text); text-decoration: none;
  border-left: 2px solid transparent;
}
.plat-lateral .nav-item.activo { border-left-color: var(--accent); font-weight: 600; }
.plat-lateral .nav-item--pendiente { color: var(--text-soft); opacity: .55; cursor: default; }
.plat-con-lateral .plat-cuerpo { padding-left: 32px; padding-right: var(--plat-pad); min-width: 0; }

@media (max-width: 900px) {
  /* En pantalla estrecha el menu lateral pasa a una tira horizontal que se
     desliza, en vez de robar la mitad del ancho al contenido. */
  /* La tira horizontal no tiene columna que pintar, y el degradado dejaría una
     raya vertical suelta en mitad de la pantalla. */
  .plat-con-lateral { grid-template-columns: 1fr; background: none; }
  .plat-lateral {
    position: static; height: auto; width: 100%;
    display: flex; gap: 4px; overflow-x: auto; padding: 10px var(--plat-pad);
    border-right: none; border-bottom: var(--hair-soft);
    scrollbar-width: none;
  }
  .plat-lateral::-webkit-scrollbar { display: none; }
  .plat-lateral .sub { display: none; }
  .plat-lateral .nav-item {
    flex: 0 0 auto; white-space: nowrap; padding: 7px 12px;
    border-left: none; border-radius: var(--r-pill); border: var(--hair-soft);
  }
  .plat-lateral .nav-item.activo { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
  .plat-con-lateral .plat-cuerpo { padding-left: var(--plat-pad); }
}

/* ---------- adaptable, de verdad ---------- */

@media (max-width: 700px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: 1fr; }
  .plat-cliente select { max-width: 9rem; }
  .plat-pie { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr; }
}


/* ---------- estado de la obra, en la portada del diseno lateral ---------- */

.obra { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 18px; }
.obra-area { min-width: 0; }
.obra-cab {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 8px; border-bottom: var(--hair-soft);
}
.obra-nombre { font-family: var(--display); font-weight: 600; font-size: var(--fs-body); }
.obra-cuenta { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-soft); }
.obra-lista { list-style: none; margin: 10px 0 0; padding: 0; }
.obra-lista li { display: flex; flex-direction: column; gap: 2px; padding: 7px 0; }
.obra-lista li > a { color: var(--text); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; }
.obra-lista li > a::before { content: "✓"; color: var(--accent-ink); margin-right: 7px; }
.obra-lista li > span:first-child { font-size: var(--fs-sm); color: var(--text-soft); }
.obra-lista li > span:first-child::before { content: "·"; margin-right: 9px; margin-left: 2px; }
.obra-desc { font-size: var(--fs-xs); color: var(--text-soft); padding-left: 20px; }
.obra-falta .obra-desc { opacity: .7; }

@media (max-width: 820px) {
  /* El desplegable de cliente, dentro del menu, ocupa el ancho completo. */
  .cliente { width: 100%; }
  .cliente-btn { width: 100%; max-width: none; justify-content: flex-start; }
  .cliente-nombre { flex: 1; text-align: left; }
  .cliente-chev { margin-left: auto; }
  .cliente-lista { position: static; min-width: 0; box-shadow: none; margin-top: 6px; }
}


/* ── El ojo para ver la contraseña ──────────────────────────────────────────
   El botón va DENTRO de la caja del campo, no al lado, para que la fila no
   cambie de ancho al aparecer.

   Se coloca en fila y no centrado por porcentajes. La primera versión lo puso
   con posición absoluta y `top: 50 %`, y quedaba veinticuatro píxeles por
   debajo del centro, colgando del borde de abajo: el porcentaje se resuelve
   contra el envoltorio, y ahí cualquier diferencia de altura entre envoltorio
   y campo se convierte en un desvío. En fila no hay porcentaje que resolver.

   El envoltorio y el botón los crea `plataforma.js`. Si alguien tiene el
   JavaScript apagado, no ve un botón muerto: simplemente no lo ve. */
.campo-con-ojo {
  display: flex;
  align-items: center;
  /* Los márgenes que tenía el campo pasan aquí, para que la pantalla no se
     descoloque al aparecer el envoltorio. */
  margin-top: 5px;
  margin-bottom: 0;
}

.campo-con-ojo > input {
  flex: 1 1 auto;
  min-width: 0;          /* sin esto, un texto largo empuja al botón fuera */
  width: auto;
  padding-right: 2.9rem; /* el hueco donde se apoya el dibujo */
  margin: 0;             /* la separación la lleva ahora el envoltorio */
}

.campo-con-ojo > .ojo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  /* El margen se pone a cero A PROPÓSITO y no por costumbre: la hoja de la
     casa le da a todo botón un margen superior de veintiséis píxeles, pensado
     para un botón que va debajo de un formulario. Heredado aquí, empujaba el
     dibujo fuera del campo, y el síntoma parecía un problema de centrado. */
  /* La huella del botón en la fila tiene que ser CERO, o el campo se hace más
     ancho que su envoltorio y se sale por la derecha. Sale de sumar: ocupa
     2,1rem de ancho, se mete 2,6rem hacia la izquierda y devuelve 0,5rem por
     la derecha. 2,1 - 2,6 + 0,5 = 0. Ese medio rem de la derecha es, además,
     lo que lo separa del borde del campo. */
  margin: 0 .5rem 0 -2.6rem;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted, #6b6b6b);
  cursor: pointer;
  line-height: 0;
}

.campo-con-ojo > .ojo:hover {
  color: var(--ink, #1a1a1a);
  background: var(--surface-2, rgba(0, 0, 0, .05));
}

/* El foco se ve, y se ve SIEMPRE: quien navega con el teclado necesita saber
   dónde está. Un contorno que solo aparece con el ratón no le sirve a nadie. */
.campo-con-ojo > .ojo:focus-visible {
  outline: 2px solid var(--brand, #1a1a1a);
  outline-offset: 2px;
  color: var(--ink, #1a1a1a);
}

/* ---------- etiquetas de estado con color ----------

   El kit de la casa trae tres variantes de etiqueta (`fill`, `pend`, `soft`) y
   ninguna dice si algo va bien o mal. En el portal hacen falta: la columna de
   estado de una factura es lo unico que el cliente lee de verdad, y «pagada» y
   «vencida» no pueden distinguirse solo por el texto.

   Van aqui y no en el kit porque el kit lo comparten labs y todos los paneles:
   ampliarlo desde un producto es como se rompen los sistemas de diseno.

   Los colores son los de los avisos, con la misma correccion de contraste: el
   verde usa --ok-ink y no --ok, y el ambar usa --warn-ink, porque los dos del
   sistema estan calibrados para llevar letra ENCIMA, no para SER letra.        */
.tag--ok     { background: color-mix(in srgb, var(--ok-ink) 14%, transparent);
               color: var(--ok-ink);   border-color: transparent; }
.tag--avisa  { background: color-mix(in srgb, var(--warn-ink) 14%, transparent);
               color: var(--warn-ink); border-color: transparent; }
.tag--mal    { background: color-mix(in srgb, var(--danger) 14%, transparent);
               color: var(--danger);   border-color: transparent; }
.tag--neutro { background: color-mix(in srgb, var(--text) 8%, transparent);
               color: var(--text-soft); border-color: transparent; }

/* ---------- grupos de campos dentro de un formulario ----------

   `fieldset` y `legend` son la forma correcta de agrupar campos que van juntos:
   un lector de pantalla anuncia el titulo del grupo antes de cada campo, asi que
   quien no ve la pantalla entiende que «Persona» es de «Quien la trae».

   Lo que NO se puede dejar es el aspecto de fabrica del navegador: un recuadro
   de 2px con el titulo mordiendo el filo. No lo habia usado nadie en la casa, y
   la primera pantalla que lo uso salio con ese marco puesto, que ademas choca de
   frente con la regla de no meter borders gruesos.

   Aqui se queda la semantica y se quita el marco: el grupo se separa con aire y
   un filo de 1px arriba, y el titulo se escribe como los demas rotulos.        */
.formulario fieldset {
  border: none; padding: 0;
  margin: 18px 0 0; padding-top: 14px;
  border-top: var(--hair-soft, 1px solid color-mix(in srgb, var(--text) 12%, transparent));
}
.formulario legend {
  padding: 0;
  font-size: var(--fs-sm); font-weight: var(--w-fuerte);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-soft);
}

/* ---------- la caja de buscar de la barra de arriba ----------
   Va en la barra que sale en TODAS las pantallas, no en su propia pantalla:
   lo que resuelve es «ya no se donde buscar», y para eso tiene que estar
   donde ya estas.

   Se encoge antes que el resto de la barra (`flex: 0 1 auto` con un ancho
   base) para que en una ventana estrecha ceda ella y no el nombre de la
   empresa, que es lo que dice en cual estas trabajando. */
.plat-buscar {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
}

.plat-buscar input[type="search"] {
  width: 100%;
  max-width: 22rem;
  min-width: 8rem;
  margin: 0;
  padding: .38rem .7rem;
  font-size: .92rem;
  border: 1px solid var(--linea, rgba(0, 0, 0, .14));
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--ink, #1a1a1a);
}

.plat-buscar input[type="search"]::placeholder {
  color: var(--muted, #6b6b6b);
}

/* El foco se ve SIEMPRE: quien navega con el teclado necesita saber donde
   esta, y esta caja es de las primeras cosas que se tabulan. */
.plat-buscar input[type="search"]:focus-visible {
  outline: 2px solid var(--brand, #1a1a1a);
  outline-offset: 2px;
}

/* El enlace al manual, en el pie de todas las pantallas de la casa. */
.pie-manual {
  margin-left: auto;
  color: var(--muted, #6b6b6b);
  font-size: .88rem;
  text-decoration: none;
  border-bottom: 1px solid var(--rule, #E5DDD0);
}
.pie-manual:hover { color: var(--ink, #1a1a1a); border-bottom-color: currentColor; }
.pie-manual:focus-visible { outline: 2px solid var(--brand, #1a1a1a); outline-offset: 3px; }