/* Hoja de estilos unica de la plataforma de turnos. Sin frameworks.
 *
 * VIENE DE LA MARCA. Los colores, la tipografia y las formas son las de
 * `marca/landings/estilo-landing.css` -la pagina de venta de fichajes- para
 * que la plataforma y lo que se ensena para venderla se vean de la misma
 * casa. Lo que cambia respecto a la landing esta dicho donde toca, y no es
 * capricho: una landing es una pagina de lectura y esto es una herramienta
 * de trabajo con tablas de catorce columnas.
 */

/* --- La tipografia -------------------------------------------------------
 *
 * Inter para los titulares y los rotulos de la interfaz, servida DESDE AQUI
 * y no desde Google: pedirsela a Google en cada pantalla es mandarle la IP
 * de cada trabajador que ficha, y esto lleva datos de horarios de personas.
 * Es el mismo fichero y la misma decision que en reservas. Licencia SIL OFL
 * 1.1, al lado del fichero y en LICENCIAS-TERCEROS.md.
 *
 * El texto corrido va en Roboto SI EL SISTEMA LA TIENE (Android la trae de
 * serie, y Android es donde vive el portal del trabajador) y en la del
 * sistema si no. Un segundo fichero de fuente son 300 KB mas en cada
 * pantalla para no ganar casi nada: la landing la pide a Google porque
 * WordPress ya la carga, aqui no.
 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;          /* una sola variable cubre todo el rango */
  font-display: swap;            /* que el texto se lea mientras descarga */
  src: url("fuentes/inter-variable.woff2") format("woff2");
}

/* --- La paleta -----------------------------------------------------------
 *
 * LOS NEUTROS Y LOS SEMANTICOS SON LOS DE LA CASA, y estan escritos igual en
 * reservas, en la lista de espera y en las tres landings. Lo unico que cambia
 * de una plataforma a otra es `--primario`. Asi las tres se reconocen como el
 * mismo fabricante sin que nadie confunda una con otra: el 90% es identico y
 * el acento las separa.
 *
 *   reservas -> naranja  #B25600
 *   turnos   -> turquesa #146A78   <- esta
 *   espera   -> ciruela  #7C3577
 *
 * EL ACENTO TIENE QUE VALER PARA DOS COSAS A LA VEZ, y por eso no es un tono
 * cualquiera: rellena botones -con letra blanca encima- y ademas se usa COMO
 * letra en los enlaces. Aclararlo mejora una y estropea la otra, asi que la
 * franja util es estrecha. Este da 6.25:1 con el blanco encima y 5.64:1 como
 * texto sobre el fondo. `pruebas/prueba_estilo.py` lo mide y falla si alguien
 * afina un tono y rompe la otra direccion.
 *
 * AQUI HAY DOS PALETAS: la clara con prefijo `--c-` y la oscura con `--o-`.
 * Cada color se escribe UNA vez y debajo tres bloques deciden cual de las dos
 * alimenta a los nombres que usa el resto de la hoja. Antes la oscura era una
 * copia dentro de `body.terminal`; con el interruptor manual habrian hecho
 * falta tres copias y se habrian ido separando con el tiempo.
 *
 * ANTES EL ACENTO ERA UN VERDE (#1f6f54) y se cambio por dos motivos: no era
 * ningun color de Disertic, y en una pantalla de cuadrantes el verde ya
 * significa otra cosa -«cubierto», «ratio correcto»-, asi que el color de la
 * marca y el color del estado se pisaban.
 */
:root {
  /* Los neutros. Tono 203, el del azul claro de la marca: el gris no es plano,
     tira discretamente a azul, igual que el fondo de disertic.com. */
  --c-fondo: #EFF4F7;
  --c-tarjeta: #FFFFFF;
  --c-tinta: #0F1C23;
  --c-suave: #4A5D66;
  --c-linea: #DCE7EC;
  /* Bordes y desactivados. Decorativo: no lleva texto encima. */
  --c-piedra: #A3B7C1;
  /* Gris con cuerpo, para lo que SI lleva letra encima. Lleva letra CLARA en
     los dos temas (`--sobre-pizarra`), asi que no se da la vuelta. */
  --c-piedra-honda: #566B77;
  /* El relleno de un boton secundario a lo ancho: sin el se lee como una caja
     de texto vacia y no como algo que se pulsa. Es el `--gris-boton` de la
     landing. */
  --c-gris-boton: #DEE8ED;

  /* El acento de esta plataforma. */
  --c-primario: #146A78;
  --c-primario-tinta: #FFFFFF;
  /* El acento a muy poca luz: fondos de chip y de icono. No llega para texto. */
  --c-primario-suave: #E7F1F3;
  /* El hover OSCURECE. Aclarando se pierde el blanco de encima. */
  --c-primario-vivo: #0F5460;

  /* El azul pizarra de Disertic. Estructura, no accion: sostiene la pantalla
     mientras el turquesa dice donde se pulsa. */
  --c-pizarra: #365261;
  --c-pizarra-honda: #2A4250;
  /* Lo que va ENCIMA del pizarra: la franja de suplantacion y el boton de
     salida del terminal. Claro roto y no blanco puro, que sobre un azul
     oscuro vibra. 11.4:1. */
  --c-sobre-pizarra: #EAF1F5;
  /* Un enlace dentro de esa franja. Mas claro que el texto para que se vea que
     se pulsa, sin salirse de la familia. */
  --c-enlace-pizarra: #A8D0EC;

  /* El dia festivo en el cuadrante: el ambar a muy poca luz. */
  --c-festivo: #FDF1E3;
  /* Las dos rayas del dia de cierre. No llevan texto propio encima: la celda
     sigue escribiendo en `--tinta`. */
  --c-cierre-raya: #E4EDF1;
  --c-cierre-hueco: #F6FAFB;
  --c-cierre-raya-hoy: #D9E8ED;

  /* Los semanticos. Aqui el color ES el significado. */
  --c-verde: #146C43;
  --c-ambar: #A85200;
  --c-peligro: #A4231C;
  /* La letra que va encima de los tres. */
  --c-sobre-semantico: #FFFFFF;

  /* Tintes: fondos suaves de aviso y de error. No llevan letra de su color
     encima, llevan `--tinta`. */
  --c-aviso-fondo: #FFF3E2;
  --c-aviso-borde: #E8C08A;
  --c-peligro-fondo: #FCEBE9;
  --c-peligro-borde: #E7B7B2;

  /* El dia de hoy en el cuadrante: el acento a muy poca luz. */
  --c-hoy: #E7F1F4;

  /* --- La paleta oscura ------------------------------------------------
     Los valores son los MISMOS que el modo oscuro de reservas -mismo fondo,
     misma superficie, misma letra- para que las dos plataformas se vean de
     la misma casa tambien a oscuras. Lo propio es el acento, que sube de
     turquesa oscuro a turquesa claro: sobre fondo azul-negro el oscuro no se
     ve. `prueba_estilo.py` mide las mismas parejas en las dos paletas. */
  --o-fondo: #101A20;
  --o-tarjeta: #18262E;
  --o-tinta: #E7EEF2;
  --o-suave: #9FB3BD;
  --o-linea: #2A3D47;
  --o-piedra: #3A4E58;
  --o-piedra-honda: #566B77;
  --o-gris-boton: #22333D;

  /* El turquesa claro, y letra casi negra encima: 7.76:1. */
  --o-primario: #3FBBD0;
  --o-primario-tinta: #0F1A20;
  --o-primario-suave: #14313A;
  --o-primario-vivo: #61CBDD;

  /* EL PIZARRA SE DA LA VUELTA Y EL HONDO NO, y no es un descuido: el hondo
     es SIEMPRE el fondo de una franja con letra clara encima -ahi un azul
     oscuro sigue siendo lo correcto en los dos temas-, mientras que el
     pizarra hace de LETRA (los comensales que llegan de reservas) y de
     relleno de chip. Como el acento, tiene que valer para las dos cosas, y
     un #365261 sobre el fondo oscuro se queda en 1.6:1. Este es el
     `--pizarra-clara` de la landing. */
  --o-pizarra: #BED5DF;
  --o-pizarra-honda: #26414E;
  --o-sobre-pizarra: #EAF1F5;
  --o-enlace-pizarra: #A8D0EC;

  /* Festivo y cierre: los mismos tintes, calidos y frios, a la inversa. */
  --o-festivo: #2C2418;
  --o-cierre-raya: #223038;
  --o-cierre-hueco: #1B2830;
  --o-cierre-raya-hoy: #24343D;

  --o-verde: #4EA87A;
  --o-ambar: #F2A24E;
  --o-peligro: #E0705F;
  /* Casi negro y no la tinta clara del tema: va encima de un relleno CLARO. */
  --o-sobre-semantico: #0F1A20;

  --o-aviso-fondo: #2E2410;
  --o-aviso-borde: #5C4A22;
  --o-peligro-fondo: #2E1614;
  --o-peligro-borde: #5C2E29;

  --o-hoy: #14313A;

  /* --- Lo que NO depende del tema ---------------------------------------- */
  /* El fondo de un QR es blanco SIEMPRE, tambien en oscuro: un QR en negativo
     no lo lee la mitad de los lectores. */
  --blanco-qr: #FFFFFF;
  /* El hueco donde se teclea el PIN del terminal: mas hondo que la tarjeta,
     para que se vea que es donde se escribe. El terminal va oscuro siempre,
     asi que estos tres no tienen version clara. */
  --hueco-terminal: #0B1318;
  --tecla: #22333D;
  --tecla-gris: #1A2830;

  /* Formas de la marca: boton, tarjeta y pastilla. */
  --radio-boton: 8px;
  --radio-tarjeta: 12px;
  --radio-chico: 6px;
  --radio-pastilla: 999px;
  /* La sombra de lo que se levanta del papel. */
  --sombra: 0 18px 40px -24px rgba(15, 28, 35, .45);
  /* El velo de la pantalla que tapa el portal. Oscuro en los dos temas: es
     una cortina, no una superficie. */
  --velo: rgba(8, 16, 20, .62);
}

/* --- Quien manda -------------------------------------------------------
 *
 *   data-tema="claro"    lo eligio la persona     -> claro, pase lo que pase
 *   data-tema="oscuro"   lo eligio la persona     -> oscuro, pase lo que pase
 *   sin atributo         nadie ha elegido nada    -> lo que diga el sistema
 *
 * El atributo lo pone `tema.js` en <html> antes de que se pinte nada. Sin
 * JavaScript no hay atributo y manda el sistema, que es lo razonable.
 */
:root,
:root[data-tema="claro"] {
  --fondo: var(--c-fondo);
  --tarjeta: var(--c-tarjeta);
  --tinta: var(--c-tinta);
  --suave: var(--c-suave);
  --linea: var(--c-linea);
  --piedra: var(--c-piedra);
  --piedra-honda: var(--c-piedra-honda);
  --gris-boton: var(--c-gris-boton);
  --primario: var(--c-primario);
  --primario-tinta: var(--c-primario-tinta);
  --primario-suave: var(--c-primario-suave);
  --primario-vivo: var(--c-primario-vivo);
  --pizarra: var(--c-pizarra);
  --pizarra-honda: var(--c-pizarra-honda);
  --sobre-pizarra: var(--c-sobre-pizarra);
  --enlace-pizarra: var(--c-enlace-pizarra);
  --festivo: var(--c-festivo);
  --cierre-raya: var(--c-cierre-raya);
  --cierre-hueco: var(--c-cierre-hueco);
  --cierre-raya-hoy: var(--c-cierre-raya-hoy);
  --verde: var(--c-verde);
  --ambar: var(--c-ambar);
  --peligro: var(--c-peligro);
  --sobre-semantico: var(--c-sobre-semantico);
  --aviso-fondo: var(--c-aviso-fondo);
  --aviso-borde: var(--c-aviso-borde);
  --peligro-fondo: var(--c-peligro-fondo);
  --peligro-borde: var(--c-peligro-borde);
  --hoy: var(--c-hoy);
  color-scheme: light;
}

/* Oscuro porque lo pidio la persona. */
:root[data-tema="oscuro"] {
  --fondo: var(--o-fondo);
  --tarjeta: var(--o-tarjeta);
  --tinta: var(--o-tinta);
  --suave: var(--o-suave);
  --linea: var(--o-linea);
  --piedra: var(--o-piedra);
  --piedra-honda: var(--o-piedra-honda);
  --gris-boton: var(--o-gris-boton);
  --primario: var(--o-primario);
  --primario-tinta: var(--o-primario-tinta);
  --primario-suave: var(--o-primario-suave);
  --primario-vivo: var(--o-primario-vivo);
  --pizarra: var(--o-pizarra);
  --pizarra-honda: var(--o-pizarra-honda);
  --sobre-pizarra: var(--o-sobre-pizarra);
  --enlace-pizarra: var(--o-enlace-pizarra);
  --festivo: var(--o-festivo);
  --cierre-raya: var(--o-cierre-raya);
  --cierre-hueco: var(--o-cierre-hueco);
  --cierre-raya-hoy: var(--o-cierre-raya-hoy);
  --verde: var(--o-verde);
  --ambar: var(--o-ambar);
  --peligro: var(--o-peligro);
  --sobre-semantico: var(--o-sobre-semantico);
  --aviso-fondo: var(--o-aviso-fondo);
  --aviso-borde: var(--o-aviso-borde);
  --peligro-fondo: var(--o-peligro-fondo);
  --peligro-borde: var(--o-peligro-borde);
  --hoy: var(--o-hoy);
  color-scheme: dark;
}

/* Oscuro porque lo dice el sistema y nadie ha elegido lo contrario. El
   :not() es lo que hace que la eleccion manual gane a la del sistema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: var(--o-fondo);
    --tarjeta: var(--o-tarjeta);
    --tinta: var(--o-tinta);
    --suave: var(--o-suave);
    --linea: var(--o-linea);
    --piedra: var(--o-piedra);
    --piedra-honda: var(--o-piedra-honda);
    --gris-boton: var(--o-gris-boton);
    --primario: var(--o-primario);
    --primario-tinta: var(--o-primario-tinta);
    --primario-suave: var(--o-primario-suave);
    --primario-vivo: var(--o-primario-vivo);
    --pizarra: var(--o-pizarra);
    --pizarra-honda: var(--o-pizarra-honda);
    --sobre-pizarra: var(--o-sobre-pizarra);
    --enlace-pizarra: var(--o-enlace-pizarra);
    --festivo: var(--o-festivo);
    --cierre-raya: var(--o-cierre-raya);
    --cierre-hueco: var(--o-cierre-hueco);
    --cierre-raya-hoy: var(--o-cierre-raya-hoy);
    --verde: var(--o-verde);
    --ambar: var(--o-ambar);
    --peligro: var(--o-peligro);
    --sobre-semantico: var(--o-sobre-semantico);
    --aviso-fondo: var(--o-aviso-fondo);
    --aviso-borde: var(--o-aviso-borde);
    --peligro-fondo: var(--o-peligro-fondo);
    --peligro-borde: var(--o-peligro-borde);
    --hoy: var(--o-hoy);
    color-scheme: dark;
  }
}

/* --- El terminal de fichaje, que va oscuro SIEMPRE -----------------------
 *
 * No es un tema que elija nadie: la pantalla del terminal vive colgada en la
 * pared de una cocina o del office, muchas veces a media luz, y de noche una
 * pantalla blanca deslumbra. Va oscura aunque el resto vaya claro, asi que
 * pide la paleta oscura a mano.
 */
body.terminal {
  --fondo: var(--o-fondo);
  --tarjeta: var(--o-tarjeta);
  --tinta: var(--o-tinta);
  --suave: var(--o-suave);
  --linea: var(--o-linea);
  --piedra: var(--o-piedra);
  --piedra-honda: var(--o-piedra-honda);
  --gris-boton: var(--o-gris-boton);
  --primario: var(--o-primario);
  --primario-tinta: var(--o-primario-tinta);
  --primario-suave: var(--o-primario-suave);
  --primario-vivo: var(--o-primario-vivo);
  --pizarra: var(--o-pizarra);
  --pizarra-honda: var(--o-pizarra-honda);
  --sobre-pizarra: var(--o-sobre-pizarra);
  --enlace-pizarra: var(--o-enlace-pizarra);
  --festivo: var(--o-festivo);
  --cierre-raya: var(--o-cierre-raya);
  --cierre-hueco: var(--o-cierre-hueco);
  --cierre-raya-hoy: var(--o-cierre-raya-hoy);
  --verde: var(--o-verde);
  --ambar: var(--o-ambar);
  --peligro: var(--o-peligro);
  --sobre-semantico: var(--o-sobre-semantico);
  --aviso-fondo: var(--o-aviso-fondo);
  --aviso-borde: var(--o-aviso-borde);
  --peligro-fondo: var(--o-peligro-fondo);
  --peligro-borde: var(--o-peligro-borde);
  --hoy: var(--o-hoy);
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Roboto si el sistema la tiene -Android- y la del sistema si no. Los
   titulares y los rotulos van en Inter, que si se sirve desde aqui. */
body {
  margin: 0;
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--fondo);
  color: var(--tinta);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* La letra de la marca: Inter, 600, y el interletraje apretado de la landing.
   NO se le sube el tamano al del cartel de venta: aqui debajo hay tablas de
   nueve columnas que ya rozan el ancho del contenedor. */
h1, h2, h3, .marca, .rotulo {
  font-family: Inter, Roboto, system-ui, "Segoe UI", sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}
h1 { font-size: 1.45rem; margin: 0 0 .6rem; }
h2 { font-size: 1.12rem; margin: 0 0 .6rem; }
h3 { font-size: 1rem; }
a { color: var(--primario); }
code { background: var(--fondo); padding: .1em .35em; border-radius: 4px; font-size: .85em; }

/* El antetitulo de la marca: la etiqueta chiquitita en mayusculas sobre un
   titular. En la landing es `.ante`. */
.rotulo {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primario);
  margin: 0 0 .35rem;
}

/* --- Cabecera del panel -------------------------------------------------- */

/* LA FRANJA DE PIZARRA, que es la pieza de marca mas reconocible: en la
   pagina de venta de fichajes la pantalla del producto se dibuja con esta
   misma barra azul oscura arriba (`.pantalla-barra`). Antes era blanca y no
   se parecia a nada de lo que se ensena para vender.
   Va en `--pizarra-honda` y no en `--pizarra`: el hondo es el token que NO
   se da la vuelta con el tema, porque su oficio es justo este, ser el fondo
   de una franja con letra clara encima. */
.cabecera {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  background: var(--pizarra-honda);
  color: var(--sobre-pizarra);
  padding: .55rem 1rem;
}
/* El nombre de la empresa hace de logotipo: Inter 600, como la palabra
   «fichajes» del logo de la marca. */
.marca { font-size: 1.05rem; }
.cabecera nav { display: flex; gap: .2rem; flex: 1; align-items: center; }
.cabecera nav a {
  padding: .35rem .7rem;
  border-radius: var(--radio-boton);
  text-decoration: none;
  color: var(--sobre-pizarra);
  font-weight: 500;
}
.cabecera nav a.activa { background: var(--primario); color: var(--primario-tinta); }
.cabecera nav a:hover:not(.activa) { background: rgba(255, 255, 255, .12); }
.quien { color: var(--enlace-pizarra); font-size: .85rem; }
.quien a { color: var(--enlace-pizarra); }
/* El boton del tema, dentro de la franja: hereda su letra clara y su borde
   se dibuja con el mismo velo que el hover de los enlaces. */
.cabecera .tema {
  background: transparent;
  color: var(--sobre-pizarra);
  border-color: rgba(255, 255, 255, .28);
}
.cabecera .tema:hover {
  background: rgba(255, 255, 255, .12);
  color: var(--sobre-pizarra);
  border-color: var(--sobre-pizarra);
}
.cabecera .tema:focus-visible { outline-color: var(--sobre-pizarra); }
/* El boton de «Actualizar de Agora», que vive en la navegacion. */
.cabecera .nav-sincronizar button { color: var(--sobre-pizarra); }

/* --- Interruptor de tema ------------------------------------------------
 * Lo inserta `tema.js`; en el HTML no hay nada. Si no hay JavaScript no
 * aparece, que es lo correcto: un boton que no hace nada es peor que
 * ninguno. En el terminal no se monta: va oscuro siempre. */
.tema {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0;
  border: 1px solid var(--linea); border-radius: var(--radio-pastilla);
  background: var(--tarjeta); color: var(--suave);
  font-size: .95rem; line-height: 1; cursor: pointer;
}
.tema:hover { color: var(--primario); border-color: var(--primario); background: var(--tarjeta); }
.tema:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
/* Cuando la pagina no tiene cabecera -entrar, el portal del trabajador- el
   boton se queda flotando en la esquina. Ahi tambien hace falta: alguien
   puede querer cambiar el tema antes de escribir su contrasena. */
.tema-suelto {
  position: fixed; top: .7rem; right: .7rem; z-index: 20;
  box-shadow: var(--sombra);
}
@media print { .tema { display: none; } }

/* Cabecera de /central y /plataforma, que viven fuera del panel. */
.cabecera-suelta { margin: -1rem -1rem 1rem; }

/* La franja que recuerda que estas en el panel de un cliente. VA EN AMBAR
   desde que la cabecera es de pizarra: dos franjas azules oscuras seguidas
   se leian como una sola y el aviso desaparecia dentro de la cabecera. Y en
   ambar dice lo que es —estas donde no es tu casa—, que es exactamente para
   lo que existe el ambar en esta hoja. */
.suplantacion {
  background: var(--ambar);
  color: var(--sobre-semantico);
  padding: .45rem 1rem;
  font-size: .9rem;
  font-weight: 500;
}
.suplantacion a { color: var(--sobre-semantico); margin-left: .5rem; }

.contenido { padding: 1rem; max-width: 1200px; margin: 0 auto; }

/* --- Piezas comunes ------------------------------------------------------ */

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  padding: 1rem 1.2rem;
  margin: 0 0 1rem;
}
.tarjeta.estrecha { max-width: 430px; margin: 3rem auto; }

.suave { color: var(--suave); font-size: .88em; }
.flash {
  background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde);
  border-radius: var(--radio-boton);
  padding: .6rem .9rem;
  margin-bottom: 1rem;
}
/* El aviso de que algo esta ROTO (el TPV que no manda datos), no el de que
   algo se ha guardado: se ve mas y trae su boton de apartarlo por hoy. */
.flash.alarma {
  background: var(--peligro-fondo);
  border-color: var(--peligro-borde);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.flash.alarma form { margin: 0; }
/* El permiso de avisos: casilla y texto en linea, con la casilla arriba
   para que el texto no se descuadre al ocupar varias lineas. */
.permiso {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: .5rem 0;
  font-size: .9em;
}
.permiso input { margin-top: .2rem; flex: none; }
.permiso-falta {
  background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde);
  border-radius: var(--radio-boton);
  padding: .5rem;
}

/* La pantalla de «te falta fichar la salida»: tapa el portal a proposito.
   Quien llega aqui ha desoido tres avisos; si fuese un cartelito mas,
   volveria a pasar de largo. */
.pantalla-salida {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--velo);
}
.pantalla-salida-caja {
  background: var(--tarjeta);
  border-radius: var(--radio-tarjeta);
  padding: 1.2rem;
  max-width: 26rem;
  width: 100%;
  box-shadow: var(--sombra);
  text-align: center;
}
.pantalla-salida-caja h2 { margin: 0 0 .5rem; }
.pantalla-salida-caja .accion { width: 100%; margin: .6rem 0 .2rem; }
.pantalla-salida-caja form { margin: 0; }

/* El aviso de fichaje pintado DENTRO del portal cuando llega el push con la
   pagina abierta: en primer plano el movil se traga el cartel del sistema.
   Va pegado arriba, por encima de todo y con el color de peligro, porque lo
   que anuncia es «te vas a dejar sin fichar». */
.aviso-en-pantalla {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1rem;
  background: var(--peligro-fondo);
  border-bottom: 2px solid var(--peligro-borde);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.aviso-en-pantalla p { margin: .15rem 0 0; font-size: .92em; }
.aviso-en-pantalla .cerrar-aviso {
  flex: none;
  padding: .45rem 1rem;
  border-radius: var(--radio-boton);
  border: 1px solid var(--peligro-borde);
  background: var(--tarjeta);
  color: var(--tinta);
  font-weight: 600;
  cursor: pointer;
}
.aviso-en-pantalla .cerrar-aviso:hover { background: var(--gris-boton); }
.error {
  background: var(--peligro-fondo);
  border: 1px solid var(--peligro-borde);
  border-radius: var(--radio-boton);
  padding: .6rem .9rem;
  margin-bottom: 1rem;
  color: var(--peligro);
}

label { display: block; margin: 0 0 .7rem; font-size: .9rem; }
input, select {
  display: block;
  margin-top: .25rem;
  padding: .45rem .55rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  font: inherit;
  width: 100%;
  background: var(--tarjeta);
  color: var(--tinta);
}
input[type="checkbox"] { width: auto; display: inline-block; }

/* Los botones de la marca: Inter 600, esquina de 8 px, y el hover OSCURECE
   el acento en vez de aclararlo con un filtro. `brightness()` sobre un
   acento claro -el del tema oscuro- lo emblanquece y se pierde la letra que
   lleva encima; `--primario-vivo` esta medido en las dos paletas. */
button {
  font-family: Inter, Roboto, system-ui, "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  padding: .5rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radio-boton);
  background: var(--primario);
  color: var(--primario-tinta);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
button:hover { background: var(--primario-vivo); }
button.pequeno { padding: .25rem .6rem; font-size: .85rem; }
button.secundario { background: var(--tarjeta); color: var(--tinta); border-color: var(--linea); }
button.secundario:hover { background: var(--gris-boton); border-color: var(--piedra); }
.portal-celda { white-space: nowrap; }
.boton.pequeno { padding: .2rem .5rem; font-size: .82rem; }

.rejilla-horario input[type="time"] { width: 105px; }
.rejilla-horario input[type="number"] { width: 70px; }
.rejilla-horario td, .rejilla-horario th { padding: .3rem .4rem; }
.rejilla-horario select { width: auto; min-width: 7rem; margin: 0; }
/* Las horas de un dia que se hace con un turno tipo: se ven, pero no se
   tocan. Las pone el turno, y al guardar mandan las suyas. */
.rejilla-horario input.del-turno {
  background: var(--fondo);
  color: var(--suave);
}
/* Campos de una linea que miden lo que miden por lo que llevan dentro. */
.campo-pausa { width: 4.5rem; }
.campo-cuantos { width: 4rem; }
/* El botoncito de quitar que va DENTRO de un chip. */
.en-el-chip { display: inline; }
button.borrar { background: var(--peligro); }
button.borrar:hover { background: var(--peligro); filter: brightness(.92); }
.peligro { margin-top: 1rem; }

.boton {
  display: inline-block;
  padding: .3rem .7rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--tarjeta);
  color: var(--tinta);
  text-decoration: none;
}

.barra {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.barra h1 { margin: 0; }
.paginacion { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.selector select { width: auto; margin: 0; }

/* Fila de campos. El hueco ENTRE FILAS es mayor que el de columnas: cuando
   la fila envuelve, la etiqueta de la linea de abajo tiene que separarse de
   los campos de arriba o las dos se leen como una sola cosa revuelta. */
.en-linea { display: flex; gap: 1.1rem .8rem; flex-wrap: wrap; align-items: flex-end; }
/* Dos acciones seguidas en la misma tarjeta (emparejar / ratios /
   prevision): un hilo y aire entre ellas. Sin esto, las etiquetas de una
   se pegan a los campos de la anterior y el bloque parece descuadrado. */
.tarjeta > form.en-linea + form.en-linea,
.tarjeta > form.frase + form.frase,
.bloque-cierres > form.en-linea + form.en-linea,
.bloque-cierres > form.frase + form.frase,
.bloque-cierres > form.en-linea + form.frase,
.bloque-cierres > form.frase + form.en-linea {
  margin-top: 1.1rem;
  padding-top: .95rem;
  border-top: 1px dashed var(--linea);
}
/* Cada etiqueta es una columna [texto / campo], y la fila se alinea por
   ABAJO: asi los campos quedan a la misma altura aunque un texto ocupe dos
   lineas. Se excluyen las etiquetas de casilla (.en-linea-label), que son
   una fila [casilla texto] y tienen su propia regla. */
.en-linea label:not(.en-linea-label) {
  margin: 0; flex: 0 1 auto;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.en-linea label.ancha { flex: 1 1 200px; }
.en-linea input, .en-linea select { width: auto; min-width: 90px; }
.en-linea input[type="text"] { min-width: 140px; }
/* Una URL no se lee en 140 px: se le deja sitio y que crezca con la fila. */
.en-linea label:has(input[type="url"]) { flex: 1 1 260px; max-width: 420px; }
.en-linea input[type="url"] { width: 100%; }
/* Las casillas NO llevan el ancho minimo de los campos: con el, el
   cuadradito se separaba 90 px de su etiqueta y los siete dias de cierre
   no entraban en una linea. */
.en-linea input[type="checkbox"], .en-linea input[type="radio"] {
  min-width: 0;
}
/* Un formulario que se lee como una FRASE con huecos: «Avisar [10] min
   antes de la entrada, y a los [10] min de una entrada sin fichar...».
   Aqui la etiqueta ES la frase y rodea al campo por los dos lados, asi que
   ponerla en columna (una parte encima y otra al lado) partia el texto en
   dos alturas y descuadraba la vista entera. En linea se lee de corrido. */
.frase { line-height: 2.5; }
.frase label { display: inline; margin: 0; }
.frase input, .frase select {
  display: inline-block;
  width: auto;
  margin: 0 .15rem;
  padding: .3rem .45rem;
  vertical-align: baseline;
}
.frase input[type="number"] { width: 4.2rem; }
.frase input[type="checkbox"] { vertical-align: middle; margin: 0 .3rem 0 0; }
.frase button { vertical-align: baseline; margin-left: .4rem; }
/* Campo + su unidad, cuando el bloque SI es una rejilla de campos: la
   unidad va al lado del campo, no debajo. */
.con-unidad { display: flex; align-items: center; gap: .35rem; }
.con-unidad input { margin-top: 0; }
/* Una etiqueta de casilla mide lo que su texto (unos 21 px) y un campo mide
   37 (texto + padding + borde): en una fila alineada por abajo, la casilla
   quedaba 4 px alta. Se le da la misma caja que a un campo —el borde
   transparente cuenta— y entonces TODO cae en la misma linea. */
.en-linea > .en-linea-label,
.en-linea .en-linea-label {
  padding: .45rem 0;
  border: 1px solid transparent;
}

/* --- Tablas -------------------------------------------------------------- */

.desborda { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; background: var(--tarjeta); }
th, td { border: 1px solid var(--linea); padding: .45rem .55rem; text-align: left; }
th { background: var(--fondo); font-weight: 600; font-size: .85rem; }

.listado input, .listado select { margin: 0; padding: .3rem .4rem; font-size: .88rem; }
.listado input[type="number"] { max-width: 90px; }
tr.inactivo td { opacity: .55; }

/* --- El cuadrante -------------------------------------------------------- */

.cuadrante { table-layout: fixed; min-width: 900px; }
.cuadrante th, .cuadrante td { vertical-align: top; }
.cuadrante .col-nombre { width: 150px; }
.cuadrante .col-total { width: 62px; text-align: right; font-weight: 600; }
.cuadrante .hoy { background: var(--hoy); }
/* Dia festivo (nacional, autonomico o local): tinte calido en la columna y
   etiqueta con el nombre. Va ANTES que .cerrado a proposito: si un festivo
   cae en dia de cierre, manda el rayado del cierre. */
.cuadrante .festivo { background: var(--festivo); }
.cuadrante .hoy.festivo { background: var(--hoy); }
.etiqueta-festivo {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ambar); font-weight: 600; cursor: help; white-space: nowrap;
}
/* Dia de cierre del local: rayado suave para que se vea sin gritar; el dia
   sigue siendo editable a mano (produccion, limpieza), con advertencia. */
.cuadrante .cerrado {
  background: repeating-linear-gradient(135deg, var(--cierre-raya) 0 6px, var(--cierre-hueco) 6px 12px);
}
.cuadrante .hoy.cerrado {
  background: repeating-linear-gradient(135deg, var(--cierre-raya-hoy) 0 6px, var(--hoy) 6px 12px);
}
.etiqueta-cierre {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--suave); font-weight: 600;
}
/* El rato con el local abierto y nadie de turno. En ambar y no en rojo: es
   un aviso -puede ser intencionado- y el rojo aqui es «sobra gente». */
.etiqueta-hueco {
  display: inline-block;
  font-size: .68rem; line-height: 1.25; color: var(--ambar);
  font-weight: 600; cursor: help;
  /* SE PARTE en lineas, al contrario que las otras etiquetas: el cuadrante
     tiene las columnas fijas y un «sin nadie 12:00–16:00, 20:00–00:00» en
     una sola linea se salia de la suya y se montaba en la de al lado. */
  white-space: normal;
}
/* El horario de apertura, plegado cuando ya esta dicho: se lee en una
   linea («L-V 06:00-01:00») y se despliega para cambiarlo. */
.apertura { margin: .2rem 0 .8rem; }
.apertura summary { cursor: pointer; padding: .2rem 0; }
.rejilla-apertura { max-width: 34rem; }
/* Los comensales previstos que llegan de la plataforma de reservas. */
.etiqueta-demanda {
  font-size: .68rem; color: var(--pizarra); font-weight: 600; cursor: help;
  white-space: nowrap;
}
.aviso-demanda { margin: 0 0 .75rem; }
/* Faltas y sobras contra los ratios por puesto. */
.ratio-falta { color: var(--peligro); }
.ratio-sobra { color: var(--ambar); }
.ratio-bien { color: var(--verde); }

/* La tabla de empleados: NUEVE columnas, y son nueve a proposito. Con una
   por dato eran trece, la tabla se salia de la pantalla y para llegar a los
   botones —lo que de verdad se usa— habia que hacer scroll lateral, o sea
   que no se veian. Los datos que se leen juntos van apilados en la misma
   celda: local + los otros locales, email + telefono, PIN + tarjeta,
   coste + calcular, activo + fuera, y todos los botones en una. */
.tabla-empleados { font-size: .92em; }
.tabla-empleados th, .tabla-empleados td { padding: .3rem .3rem; }
.tabla-empleados input[type="number"] { width: 4.2rem; }
.tabla-empleados input[type="text"],
.tabla-empleados input[type="email"] { min-width: 0; }
.tabla-empleados input[name="nombre"] { width: 8rem; }
.tabla-empleados input[name="puesto"] { width: 5.5rem; }
.tabla-empleados input[name="email"] { width: 8rem; }
.tabla-empleados input[name="telefono"] { width: 8rem; }
.tabla-empleados input[name="pin"] { width: 3.8rem; }
.tabla-empleados input[name="tarjeta"] { width: 3.8rem; }
.tabla-empleados select { max-width: 7.5rem; }
.tabla-empleados td { white-space: nowrap; }
/* Los botones en una rejilla de dos: en fila eran ellos solos media tabla,
   y uno debajo de otro estiraban la fila a lo alto. Guardar cruza las dos
   columnas porque es el que cierra la edicion de la fila. */
.tabla-empleados .acciones-celda {
  white-space: normal;
  min-width: 8.6rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .2rem;
  align-content: center;
}
.tabla-empleados .acciones-celda > button[type="submit"][form^="emp"] {
  grid-column: 1 / -1;
}
.tabla-empleados .acciones-celda .pequeno,
.tabla-empleados .acciones-celda .boton {
  margin: 0;
  width: 100%;
  text-align: center;
  /* Un horario con nombre largo no puede ensanchar la columna entera. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Activo y Fuera, con su etiqueta al lado para no depender del encabezado. */
.tabla-empleados .estado-celda label {
  display: flex; align-items: center; gap: .3rem;
  font-size: .82rem; white-space: nowrap; margin: .1rem 0;
}
/* Fila editada y sin guardar: cada fila se guarda con SU boton. */
.tabla-empleados tr.sin-guardar td {
  background: color-mix(in srgb, var(--ambar) 14%, transparent);
}
/* Email y telefono apilados en una sola columna. */
.tabla-empleados .contacto-celda input { display: block; margin: .12rem 0; }

/* Fichado con el codigo alternativo (telefono), no con su PIN. */
.chip-alt {
  background: var(--aviso-fondo); color: var(--ambar);
  border: 1px solid var(--aviso-borde);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .03em;
  cursor: help;
}
.chip-alt-borde { border: 1px dashed var(--aviso-borde); }
/* La salida que el empleado cerro desde su movil tras desoir los avisos:
   es valida, pero la hora es la de cuando pulso y eso hay que verlo. */
.chip-por-aviso {
  background: var(--aviso-fondo); color: var(--ambar);
  border: 1px solid var(--ambar);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .03em;
  cursor: help;
}
.bloque-cierres { margin-top: .9rem; }
.bloque-cierres h3 { margin: 0 0 .3rem; font-size: 1rem; }
.bloque-cierres + .bloque-cierres { border-top: 1px solid var(--linea); padding-top: .9rem; }

.chip {
  display: block;
  background: var(--primario);
  color: var(--primario-tinta);
  border-radius: var(--radio-chico);
  padding: .15rem .4rem;
  margin: 0 0 .25rem;
  font-size: .82rem;
  text-decoration: none;
  white-space: nowrap;
}
.chip:hover { background: var(--primario-vivo); }

.anadir {
  background: transparent;
  color: var(--suave);
  border: 1px dashed var(--linea);
  border-radius: var(--radio-chico);
  padding: 0 .5rem;
  font-size: .85rem;
  line-height: 1.5;
}
.anadir:hover {
  background: var(--primario-suave);
  color: var(--primario); border-color: var(--primario);
}

.alerta { color: var(--ambar); margin-left: .25rem; cursor: help; }
.cuadrante tfoot .productividad td { background: var(--fondo); font-size: .85rem; }
.cuadrante tfoot .productividad .col-nombre { font-weight: 600; }
.cuadrante tfoot .productividad .hoy { background: var(--hoy); }
.avisos ul { margin: .2rem 0 .8rem; }

/* Los chips del registro de fichajes */
.listado .chip { display: inline-block; margin: .1rem .2rem .1rem 0; }
.chip-salida { background: var(--piedra-honda); color: var(--sobre-pizarra); }
.chip-pausa_inicio, .chip-pausa_fin {
  background: var(--ambar); color: var(--sobre-semantico);
}

/* El aviso que VENDE: no es un error ni un problema del cliente, es algo
   que podria tener. Con el acento de la casa, no en rojo de alarma. */
.flash.vende {
  background: var(--tarjeta);
  border-left: 4px solid var(--primario);
  border-radius: 0 var(--radio-boton) var(--radio-boton) 0;
  margin-top: .9rem;
}

/* Fichaje hecho SIN CONEXION y subido despues: la hora es la de la tablet,
   asi que se marca. Un inspector agradece la trazabilidad. */
.chip-diferido { border: 1px dashed var(--ambar); }

/* --- Plantilla compartida entre locales ------------------------------------- */

/* Turno que ese dia se trabaja en OTRO local del grupo: se ve (para no
   solaparle nada encima) pero apagado, que este cuadrante no es el suyo.
   El nombre del local va en SU PROPIA linea y recortado con puntos: en la
   misma linea que la hora se derramaba sobre el boton de anadir y no se
   leia nada (el nombre entero sigue en el title). */
.chip-ajeno { background: var(--fondo); color: var(--suave); border: 1px dashed var(--linea); overflow: hidden; max-width: 12ch; }
.chip-ajeno:hover { filter: none; border-color: var(--primario); }
.chip-ajeno small { display: block; overflow: hidden; text-overflow: ellipsis; }
/* Etiqueta del empleado prestado en el cuadrante. */
.chip-prestado {
  display: inline-block;
  background: transparent;
  color: var(--suave);
  border: 1px solid var(--linea);
  font-size: .72rem;
  padding: 0 .3rem;
  cursor: help;
}
/* El puesto y, debajo, los turnos tipo que hace: marcar y desmarcar aqui es
   decir «hace mananas y partidos pero nunca noches». */
.puesto-celda label {
  display: flex; align-items: center; gap: .3rem;
  white-space: nowrap; font-size: .8rem; margin-top: .15rem;
}

/* El selector del local y, debajo, los otros locales del grupo donde
   tambien puede trabajar: una sola columna en vez de dos. */
.tambien-celda label {
  display: flex; align-items: center; gap: .3rem;
  white-space: nowrap; font-size: .8rem; margin-top: .15rem;
}
.tambien-celda select { margin-bottom: .1rem; }

/* El boton de la barra que pide la sincronizacion al TPV: vestido como un
   enlace mas del menu, pero es un POST (deja la peticion en el buzon). */
.nav-sincronizar { display: inline; }
.nav-sincronizar button {
  background: transparent; border: none; cursor: pointer;
  color: inherit; font: inherit; opacity: .85; padding: 0;
}
.nav-sincronizar button:hover {
  opacity: 1; text-decoration: underline; background: transparent;
}

/* La letra del dia de la semana (L M X J V S D): compacta, con el nombre
   entero en el title. */
.letra-dia { font-weight: 700; text-decoration: none; cursor: help; }

/* La calculadora del coste hora: el boton va DEBAJO del campo (la tabla de
   empleados ya roza el ancho del contenedor; ensancharla esconde columnas). */
.boton-calcular { display: block; margin-top: .2rem; }
/* La tarjeta va DEBAJO del PIN por lo mismo: la tabla no puede ensanchar. */
.campo-tarjeta { display: block; margin-top: .2rem; }
.dialogo-calculadora { max-width: 560px; border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); }
.dialogo-calculadora::backdrop { background: rgba(15, 28, 35, .45); }

/* --- El estudio de ventas ---------------------------------------------------- */

.chip-festivo {
  display: inline-block; background: var(--ambar);
  color: var(--sobre-semantico);
}
.listado .fila-total td { background: var(--fondo); font-weight: 600; }

/* --- Ausencias -------------------------------------------------------------- */

.chip-ausencia { background: var(--pizarra); color: var(--primario-tinta); }
.boton.pendientes { border-color: var(--aviso-borde); background: var(--aviso-fondo); }
.boton.pendientes:hover { border-color: var(--ambar); }

.solicitud {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--linea);
  padding: .7rem 0;
}
.solicitud:first-of-type { border-top: 0; }
.solicitud-datos p { margin: .2rem 0 0; }
.solicitud-acciones { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.solicitud-acciones input { margin: 0; width: 180px; }

.dif-mas { color: var(--ambar); }
.dif-menos { color: var(--peligro); }
.bolsa-favor { color: var(--primario); font-weight: 600; }
.bolsa-debe { color: var(--peligro); font-weight: 600; }
.qr-tarjeta { max-width: 560px; margin: 1.5rem auto; text-align: center; }
.qr-marco {
  display: inline-block;
  background: var(--blanco-qr);
  padding: .8rem;
  border-radius: var(--radio-tarjeta);
  border: 1px solid var(--linea);
  margin: .8rem 0;
}
.qr-marco svg { display: block; max-width: 320px; height: auto; }
.qr-enlace { word-break: break-all; }

.enlace-bolsa { text-decoration: none; }
.enlace-bolsa:hover span { text-decoration: underline; }
.en-linea-label { display: inline-flex; align-items: center; gap: .3rem; margin: 0; }
.en-linea-label input { margin: 0; width: auto; }

.estado-pendiente { color: var(--ambar); font-weight: 600; }
.estado-aprobada { color: var(--primario); font-weight: 600; }
.estado-rechazada { color: var(--peligro); font-weight: 600; }
.estado-anulada { color: var(--suave); }

/* --- El terminal de fichaje ---------------------------------------------- */

body.terminal { background: var(--fondo); color: var(--tinta); }
.fichar {
  max-width: 420px;
  margin: 4vh auto;
  padding: 1.5rem;
  text-align: center;
}
.fichar h1 { font-size: 1.6rem; }
.fichar .suave { color: var(--suave); }
.fichar a.suave { color: var(--suave); }
.fichar .error {
  background: var(--peligro-fondo);
  border-color: var(--peligro-borde);
  color: var(--peligro);
}

.fichar #pin {
  width: 100%;
  text-align: center;
  font-size: 2rem;
  letter-spacing: .5rem;
  padding: .5rem;
  background: var(--hueco-terminal);
  border: 1px solid var(--linea);
  color: var(--tinta);
  border-radius: var(--radio-tarjeta);
}

.teclado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin-top: 1rem;
}
.teclado button {
  font-size: 1.7rem;
  padding: 1rem 0;
  border-radius: var(--radio-tarjeta);
  background: var(--tecla);
  color: var(--tinta);
}
.teclado button:hover { background: var(--tecla); filter: brightness(1.25); }
.teclado button.gris { background: var(--tecla-gris); color: var(--suave); }
.teclado button.gris:hover { background: var(--tecla-gris); filter: brightness(1.3); }
/* La tecla que confirma. Se sigue llamando `.verde` en las plantillas -es el
   nombre de la clase, no del color- y ahora va del turquesa de la casa. */
.teclado button.verde { background: var(--primario); color: var(--primario-tinta); }
.teclado button.verde:hover { background: var(--primario-vivo); filter: none; }

.acciones { display: grid; gap: .8rem; margin: 1.5rem 0; }

/* Los botones del terminal son enlaces: que parezcan botones de verdad. */
a.accion {
  display: block;
  text-align: center;
  text-decoration: none;
  background: var(--primario);
  color: var(--primario-tinta);
}
a.accion:hover { background: var(--primario-vivo); }

/* Las pausas del terminal: a la mitad de tamano y en filas de dos. La
   ultima (numero impar) ocupa la fila entera para no dejar un hueco cojo. */
.pausas { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pausas .pausa-chica {
  font-size: .95rem;
  padding: .55rem .3rem;
  line-height: 1.2;
}
.pausas .pausa-chica:last-child:nth-child(odd) { grid-column: span 2; }
a.accion {
  display: block;
  text-align: center;
  text-decoration: none;
  background: var(--primario);
  color: var(--primario-tinta);
  border-radius: var(--radio-tarjeta);
}
a.accion:hover { background: var(--primario-vivo); }
.fichar #motivo-libre {
  width: 100%;
  margin-bottom: .8rem;
  padding: .7rem;
  font-size: 1.1rem;
  background: var(--hueco-terminal);
  border: 1px solid var(--linea);
  color: var(--tinta);
  border-radius: var(--radio-tarjeta);
}
.acciones-portal { margin: .5rem 0; }
.acciones-portal .accion { font-size: 1.1rem; padding: .8rem 0; }
.accion {
  width: 100%;
  font-size: 1.4rem;
  padding: 1.1rem 0;
  border-radius: var(--radio-tarjeta);
}
.accion-salida { background: var(--piedra-honda); color: var(--sobre-pizarra); }
.accion-pausa_inicio, .accion-pausa_fin {
  background: var(--ambar); color: var(--sobre-semantico);
}

.hecho .tic {
  font-size: 4rem;
  color: var(--verde);
  line-height: 1;
  margin-bottom: .5rem;
}

/* --- El portal del empleado ----------------------------------------------- */

.portal {
  max-width: 560px;
  margin: 0 auto;
  padding: 1rem;
}
.portal-cabecera { margin: .5rem 0 1rem; }
.portal-cabecera h1 { margin-bottom: .1rem; }
.portal h2 { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.portal-total {
  margin-left: auto;
  background: var(--primario);
  color: var(--primario-tinta);
  border-radius: var(--radio-chico);
  padding: .1rem .5rem;
  font-size: .85rem;
}
.portal-dias { list-style: none; margin: 0; padding: 0; }
.portal-dias li {
  display: flex;
  gap: .8rem;
  padding: .45rem .3rem;
  border-top: 1px solid var(--linea);
  align-items: baseline;
}
.portal-dias li:first-child { border-top: 0; }
.portal-dia { flex: 0 0 7.5em; font-weight: 600; font-size: .9rem; }
.portal-turnos { display: flex; gap: .4rem; flex-wrap: wrap; align-items: baseline; }
.portal-turnos .chip { display: inline-block; margin: 0; }
.portal-libre { color: var(--suave); }
.portal-hoy { background: var(--hoy); border-radius: var(--radio-chico); }
.portal-abierto {
  background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde);
  border-radius: var(--radio-chico);
  padding: 0 .4rem;
  font-size: .8rem;
}
.portal-pie { text-align: center; margin: 1.5rem 0; }

/* --- Movil ---------------------------------------------------------------- */

@media (max-width: 700px) {
  .cabecera { gap: .5rem; }
  .quien { width: 100%; }
  .paginacion { margin-left: 0; }
  .en-linea input, .en-linea select { min-width: 70px; }
}