/**
 * asistencia.css — WTF Publicidad Panel Interno
 * La jornada de hoy en la barra superior (Asistencia · fase 1).
 * Las pantallas del módulo traen sus estilos en su propio bloque.
 *
 * AL CENTRO Y NO A LA DERECHA. El botón vivía arriba a la derecha entre otros
 * seis y se perdía: marcar la entrada tiene que costar un clic desde donde sea,
 * y para eso primero hay que verlo. Al centro no compite con nada, y además es
 * donde el equipo ya lo busca por costumbre del sistema anterior.
 *
 * NO VA EN VERDE LLENO. En la barra de arriba el verde lleno ya lo usa «Nueva
 * Oferta», y dos botones del mismo peso compiten entre sí; además el verde de
 * marca es acento, no fondo. Así que el botón es neutro, y el verde aparece
 * solo como un tinte CUANDO YA SE ENTRÓ: ese tinte es el que dice, de un
 * vistazo y sin leer, que la entrada de hoy ya quedó registrada.
 */

/* ─── EL GRUPO: reloj + botones ─── */
.tb-jornada {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: .4rem;
}

/* ─── EL RELOJ: trabajado / lo que toca hoy ───
   El de la izquierda es TRABAJADO, ya sin la comida. El de la derecha es la
   meta del día: 8h de lunes a viernes, 5h el sábado. No son las 9h en bruto
   del horario, que llevan la comida dentro. */
.tb-reloj {
  display: flex; align-items: baseline; gap: .3rem;
  padding: 4px 11px; border-radius: 20px;
  border: 1px solid var(--br); background: var(--c2);
  font-size: 12px; font-variant-numeric: tabular-nums; cursor: default;
  white-space: nowrap;
}
.tb-reloj-hecho { font-weight: 700; color: var(--t); }
.tb-reloj-sep   { color: var(--tm); }
.tb-reloj-meta  { color: var(--ts); }

/* Dentro: el número que corre va en verde de TEXTO (#3B6D11), no en el verde
   de marca. Sobre blanco el de marca da 2.9:1 y no pasa AA; este da 7.2:1.
   Ver la sección del verde en brand/wtf-brand.md. */
.tb-jornada[data-entrada]:not([data-entrada=""])[data-cerrado="0"] .tb-reloj-hecho { color: var(--go); }
[data-theme="dark"] .tb-jornada[data-entrada]:not([data-entrada=""])[data-cerrado="0"] .tb-reloj-hecho { color: var(--g); }

/* En pausa el reloj se para, y se nota: si siguiera corriendo mientras alguien
   come, estaríamos contando la comida como trabajo otra vez. */
.tb-reloj.en-pausa { border-color: rgba(239,159,39,.45); background: rgba(239,159,39,.10); }
.tb-reloj.en-pausa .tb-reloj-hecho { color: #8A5509; }
[data-theme="dark"] .tb-reloj.en-pausa .tb-reloj-hecho { color: #EF9F27; }

/* ─── LOS BOTONES ─── */
.tb-fichar {
  width: auto;
  padding: 0 .7rem;
  gap: .35rem;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  border: 1px solid var(--br);
}
.tb-fichar i { font-size: 16px; }
.tb-fichar:focus-visible { outline: 2px solid var(--t); outline-offset: 1px; }
.tb-fichar[disabled] { opacity: .6; cursor: default; }

/* Ya se entró: el tinte verde es el acuse de recibo. */
.tb-jornada[data-entrada]:not([data-entrada=""])[data-cerrado="0"] .tb-fichar {
  background: var(--green-bg);
  border-color: var(--green-br);
  color: var(--go);
}
.tb-jornada[data-entrada]:not([data-entrada=""])[data-cerrado="0"] .tb-fichar:hover { background: var(--gob); }
[data-theme="dark"] .tb-jornada[data-entrada]:not([data-entrada=""])[data-cerrado="0"] .tb-fichar { color: var(--g); }

/* La segunda acción —salir cuando toca comer, o comer cuando toca salir—
   existe porque quien come a la 1 o se va a las 5 no puede quedarse atrapado:
   acabaría marcando lo que no es, y eso ensucia el patrón que todo esto existe
   para poder leer.

   LLEVA SU NOMBRE, COMO LA PRIMERA. Antes era un cuadro de 32 px con puro
   ícono, y cuál acción cae en segundo lugar CAMBIA CON LA HORA: antes de las
   13:55 es la comida, y de 13:55 a 16:00 es la salida. Miranda cerró su
   jornada el 16 de octubre de 2026 creyendo que picaba la comida, y tuvo que
   pedir corrección. Un ícono que significa una cosa a la una y otra a las tres
   no se puede adivinar, y el `title` no se ve al pasar de largo ni existe en
   una pantalla táctil. Se distingue por ser más tenue, no por ser muda. */
.tb-fichar-otra { font-weight: 500; opacity: .85; }
.tb-fichar-otra:hover { opacity: 1; }

/* ─── EL AVISO DE LA COMIDA ───
   Se vigila QUE FALTE, no cuánto duró. */
.tb-aviso {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  padding: 3px 8px; border-radius: 20px;
  background: rgba(239,159,39,.12); border: 1px solid rgba(239,159,39,.35);
  color: #8A5509; cursor: default;
}
[data-theme="dark"] .tb-aviso { color: #EF9F27; }

/* ─── ANGOSTO ───
   El centro absoluto solo se sostiene mientras quepa. Por debajo vuelve al
   flujo, pegado a la derecha, y se va soltando lastre: primero el aviso,
   después el reloj, y al final queda el ícono de fichar, que es lo único
   que no puede faltar. */
@media (max-width: 1180px) {
  .tb-jornada { position: static; transform: none; margin-left: auto; }
  .tb-right { margin-left: .4rem; }
}
@media (max-width: 980px) { .tb-aviso { display: none; } }
@media (max-width: 760px) {
  .tb-reloj { display: none; }
  .tb-fichar { padding: 0; width: 34px; }
  .tb-fichar span { display: none; }
}