/* Incidencias MDI — hoja única, sin recursos externos. */
:root {
    --azul: #1F3A5F;
    --azul-claro: #E8EEF5;
    --papel: #F5F7FA;
    --blanco: #FFFFFF;
    --linea: #D3DAE3;
    --texto: #1B2430;
    --tenue: #5A6675;
    --tarjeta: #FFF3BF;
    --rojo: #A32A21;
    --verde: #2D6A4F;
    /* Estados de la captura: borde fuerte y fondo suave */
    --ok: #2D6A4F;          --ok-fondo: #E7F3EC;
    --pendiente: #B07D00;   --pendiente-fondo: #FFF6D6;
    --falta: #A32A21;       --falta-fondo: #FBEDEC;
    --capturado: #2B5C9E;   --capturado-fondo: #E8EEF5;
    --sin-procesar: #6B7480; --sin-procesar-fondo: #F0F2F5;
    --radio: 6px;
    --foco: 0 0 0 3px #7FA6D6;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--papel);
    color: var(--texto);
    font-family: "Segoe UI Variable Text", "Segoe UI", Roboto, system-ui, sans-serif;
    line-height: 1.5;
}

/* Encabezado: franja con logo (grande en Inicio y Entrar, compacta en las demás) y menú con íconos y submenús. */
.encabezado { background: var(--blanco); box-shadow: 0 2px 8px rgba(15, 45, 90, .12); position: relative; z-index: 10; }
.encabezado .franja {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .375rem max(1rem, calc((100% - 1280px) / 2));
    background: linear-gradient(100deg, #FFFFFF 0%, #FFFFFF 45%, #EAF3FC 62%, #9CC3EA 80%, #2F74C0 100%);
}
.encabezado.grande .franja { padding-top: 1rem; padding-bottom: 1rem; }
.marca { display: flex; align-items: center; gap: 1rem; color: #14325C; text-decoration: none; }
.marca .logo { height: 36px; width: auto; display: block; }
.encabezado.grande .marca .logo { height: 72px; }
.marca .titulo { display: flex; flex-direction: column; line-height: 1.15; padding-left: 1rem; border-left: 1px solid var(--linea); }
.marca .titulo strong { font-size: 1.125rem; white-space: nowrap; }
.marca .titulo span { font-size: .8125rem; color: var(--tenue); }
.encabezado.grande .marca .titulo strong { font-size: 2rem; }
.encabezado.grande .marca .titulo span { font-size: 1.125rem; }

.menu {
    display: flex;
    align-items: stretch;
    gap: .125rem;
    padding: .375rem max(1rem, calc((100% - 1280px) / 2)) 0;
    background: linear-gradient(180deg, #17508F 0%, #0F3A73 100%);
}
.icono { width: 22px; height: 22px; flex: none; }
.menu-op {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .125rem;
    min-width: 5.5rem;
    padding: .375rem .75rem .5rem;
    color: var(--blanco);
    font-size: .875rem;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border-radius: 8px 8px 0 0;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    list-style: none;
}
.menu-op::-webkit-details-marker { display: none; }
.menu-op:hover { background: rgba(255, 255, 255, .12); }
.menu-op[aria-current="page"] { background: var(--blanco); color: #1565C0; border-bottom-color: #29A3E0; font-weight: 600; }
.menu-op > .icono + span + .icono { position: absolute; right: .25rem; bottom: .5rem; width: 14px; height: 14px; }
summary.menu-op { padding-right: 1.375rem; }
.submenu { position: relative; }
.submenu[open] > summary.menu-op:not([aria-current="page"]) { background: rgba(255, 255, 255, .16); }
.submenu .opciones {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 13rem;
    padding: .375rem 0;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: 0 8px 20px rgba(15, 45, 90, .18);
    z-index: 20;
}
.submenu .opciones a { display: block; padding: .5rem 1rem; color: var(--azul); text-decoration: none; }
.submenu .opciones a:hover { background: var(--azul-claro); }

/* Sub-submenú (Nóminas ▸ Vacaciones): en escritorio se despliega a la derecha de su renglón. */
.submenu-interno { position: relative; }
.submenu-interno > summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem 1rem; color: var(--azul); cursor: pointer; list-style: none; }
.submenu-interno > summary::-webkit-details-marker { display: none; }
.submenu-interno > summary:hover, .submenu-interno[open] > summary { background: var(--azul-claro); }
.submenu-interno > summary > .icono { width: 14px; height: 14px; transform: rotate(-90deg); }
.submenu .submenu-interno > .opciones { top: -.375rem; left: 100%; }

/* La cuenta (campana, usuario, Salir) va en la franja, a la derecha, sobre el extremo azul del degradado. */
.cuenta { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.cuenta .usuario > summary.menu-op { flex-direction: row; gap: .5rem; min-width: 0; padding: .375rem 1.5rem .375rem .375rem; border-radius: 999px;
    border-bottom: 0; background: rgba(255, 255, 255, .1); font-size: .8125rem; }
.cuenta .usuario > summary.menu-op > .icono:first-child { width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: #1E88E5; }
.cuenta .usuario > summary.menu-op > .icono + span + .icono { bottom: auto; right: .5rem; }
.cuenta .usuario .opciones { left: auto; right: 0; }
.cuenta > span.usuario { color: var(--blanco); font-size: .875rem; }
.salir { margin: 0; }
.salir button {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin: 0;
    padding: .375rem .875rem;
    background: transparent;
    color: var(--blanco);
    border: 1px solid rgba(255, 255, 255, .6);
    font-weight: 600;
}
.salir button:hover { background: rgba(255, 255, 255, .12); }

.boton-menu {
    display: none;
    align-items: center;
    gap: .375rem;
    margin: 0;
    padding: .375rem .75rem;
    background: var(--azul);
    color: var(--blanco);
}

@media (max-width: 1180px) {
    .menu-op { min-width: 0; padding-left: .5rem; padding-right: .5rem; font-size: .8125rem; }
    summary.menu-op { padding-right: 1.25rem; }
    .cuenta .usuario > summary.menu-op > span { display: none; }
}

@media (max-width: 860px) {
    .encabezado .franja, .encabezado.grande .franja { padding-top: .375rem; padding-bottom: .375rem; }
    .marca .logo, .encabezado.grande .marca .logo { height: 32px; }
    .marca .titulo { padding-left: .75rem; }
    .marca .titulo strong, .encabezado.grande .marca .titulo strong { font-size: 1rem; }
    .marca .titulo span { display: none; }
    .boton-menu { display: flex; }
    .menu { flex-direction: column; align-items: stretch; padding: .25rem 1rem .5rem; }
    .js .menu { display: none; }
    .js .menu.abierto { display: flex; }
    .menu-op, summary.menu-op { flex-direction: row; justify-content: flex-start; gap: .625rem; padding: .625rem .5rem; font-size: .9375rem;
        border-radius: var(--radio); border-bottom: 0; text-align: left; }
    .menu-op > .icono + span + .icono { position: static; margin-left: auto; }
    .submenu .opciones { position: static; box-shadow: none; border: 0; background: transparent; padding: 0 0 .25rem 2.5rem; }
    .submenu .opciones a { color: var(--blanco); padding: .375rem .5rem; }
    .submenu .opciones a:hover { background: rgba(255, 255, 255, .12); }
    /* Sub-submenú en línea, con sangría. */
    .submenu .submenu-interno > .opciones { position: static; padding-left: 1rem; }
    .submenu-interno > summary { color: var(--blanco); padding: .375rem .5rem; }
    .submenu-interno > summary:hover, .submenu-interno[open] > summary { background: rgba(255, 255, 255, .12); }
    .submenu-interno > summary > .icono { margin-left: auto; transform: none; }
    /* La cuenta se queda en la franja, junto al botón «Menú»: solo íconos, y sus opciones flotan sobre la página. */
    .cuenta { gap: .375rem; }
    .cuenta .salir button span { display: none; }
    .cuenta .salir button { padding: .375rem .5rem; }
    .cuenta .usuario > summary.menu-op { padding: .25rem 1.25rem .25rem .25rem; }
    .cuenta .usuario > summary.menu-op > span { display: none; }
    .cuenta .usuario .opciones { position: absolute; right: 0; left: auto; background: var(--blanco); border: 1px solid var(--linea);
        box-shadow: 0 8px 20px rgba(15, 45, 90, .18); padding: .375rem 0; }
    .cuenta .usuario .opciones a { color: var(--azul); padding: .5rem 1rem; }
    .cuenta .usuario .opciones a:hover { background: var(--azul-claro); }
}

@media (max-width: 480px) {
    /* Que la franja quepa en 375 px sin barra horizontal: logo, cuenta (solo íconos) y botón «Menú» solo con ícono. */
    .encabezado .franja, .encabezado.grande .franja { gap: .5rem; }
    .marca .titulo { display: none; }
    .cuenta { gap: .125rem; }
    .cuenta .usuario > summary.menu-op { padding-right: .25rem; }
    .cuenta .usuario > summary.menu-op > .icono + span + .icono { display: none; }
    .boton-menu span { display: none; }
}

main {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 1rem; color: var(--azul); }
h2 { font-size: 1.25rem; margin: 2rem 0 .75rem; color: var(--azul); }
p { max-width: 70ch; }
a { color: var(--azul); }

/* Formularios */
form { max-width: 28rem; }
label { display: block; margin: 1rem 0 .25rem; font-weight: 600; }

input, select {
    width: 100%;
    font: inherit;
    padding: .625rem .75rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--blanco);
    color: var(--texto);
}
input[readonly] { background: var(--azul-claro); color: var(--tenue); }

button {
    font: inherit;
    font-weight: 600;
    margin-top: 1.25rem;
    padding: .625rem 1.25rem;
    border: 0;
    border-radius: var(--radio);
    background: var(--azul);
    color: var(--blanco);
    cursor: pointer;
}
button:hover { background: #172C48; }

:focus-visible { outline: none; box-shadow: var(--foco); }

fieldset {
    margin: 1.25rem 0 0;
    padding: .75rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    max-height: 18rem;
    overflow-y: auto;
    background: var(--blanco);
}
legend { font-weight: 600; padding: 0 .25rem; }
label.casilla { display: flex; gap: .5rem; align-items: center; font-weight: 400; margin: .25rem 0; }
label.casilla input { width: auto; }

.filtros { max-width: none; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.filtros > label:first-child { width: 100%; margin: 0; }
.filtros input:not([type=checkbox]) { flex: 1 1 14rem; width: auto; }
.filtros label.casilla { margin: 0; }
.filtros button { margin-top: 0; }

.nuevo { display: inline-block; margin: 1rem 0; font-weight: 600; }

.acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--linea); }
.acciones form { margin: 0; }
.acciones button { margin-top: 0; background: var(--blanco); color: var(--azul); border: 1px solid var(--azul); }
.acciones button:hover { background: var(--azul-claro); }

/* Alta de usuario: datos del BMS */
.ficha { display: grid; grid-template-columns: 10rem 1fr; gap: .25rem 1rem; margin: 1rem 0 .5rem; padding: 1rem;
         background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); max-width: 34rem; }
.ficha dt { color: var(--tenue); }
.ficha dd { margin: 0; font-weight: 600; }
.nota { color: var(--tenue); margin: 1.25rem 0 0; }
.cerrada { display: inline-block; margin-left: .375rem; padding: 0 .5rem; border-radius: 999px; font-size: .8125rem;
           color: var(--rojo); border: 1px solid currentColor; }
[hidden] { display: none !important; }
.deptos { margin: 0 0 .5rem 1.75rem; padding-left: .75rem; border-left: 2px solid var(--linea); }
.nota-depto { color: var(--tenue); font-size: .875rem; }
/* Explicación breve debajo de un campo o de un título. */
.nota-campo { color: var(--tenue); font-size: .875rem; margin: .25rem 0 .75rem; }

/* Confirmación antes de guardar */
.confirmar { max-width: 34rem; margin: 1rem 0; padding: 1.25rem; background: var(--blanco);
             border: 2px solid var(--azul); border-radius: var(--radio); }
.confirmar h2 { margin-top: 0; }
.confirmar ul { padding-left: 1.25rem; }
.confirmar form { max-width: none; }
.botones { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1rem; }
.botones button { margin-top: 0; }
.secundario { background: var(--blanco); color: var(--azul); border: 1px solid var(--azul); border-radius: var(--radio);
              padding: .625rem 1.25rem; font-weight: 600; text-decoration: none; }
button.secundario:hover { background: var(--azul-claro); }

/* Mensajes */
.mensaje-error, .mensaje-aviso {
    padding: .75rem 1rem;
    border-radius: var(--radio);
    border-left: 4px solid;
}
.mensaje-error { background: #FBEDEC; border-color: var(--rojo); color: var(--rojo); }
.mensaje-aviso { background: var(--azul-claro); border-color: var(--azul); }

.etiqueta {
    display: inline-block;
    padding: .125rem .625rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: .875rem;
    font-weight: 600;
}
.etiqueta.captura { color: var(--verde); }
.etiqueta.consulta { color: var(--tenue); }

/* Contraseña temporal: amarilla, como la tarjeta del checador */
.temporal {
    background: var(--tarjeta);
    border: 1px solid #E6CF6A;
    border-radius: var(--radio);
    padding: 1rem;
    margin: 1rem 0;
    max-width: 28rem;
}
.temporal p { margin: 0 0 .5rem; }
.temporal .valor { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.temporal code {
    font-family: Consolas, "Roboto Mono", monospace;
    font-size: 1.5rem;
    letter-spacing: .08em;
    color: var(--texto);
}
.temporal button { margin: 0; padding: .375rem .875rem; }

/* Captura diaria: día, filtros, conteo y renglones con el color del estado */
.dias { display: flex; align-items: center; gap: .75rem; margin: 1rem 0 .5rem; }
.dias a, .dias .sin-liga { font-size: 1.25rem; text-decoration: none; padding: .125rem .625rem;
                           border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); }
.dias .sin-liga { color: var(--linea); }
.dias .dia { font-size: 1.125rem; color: var(--azul); }
.filtros label.campo { display: flex; flex-direction: column; margin: 0; font-weight: 600; flex: 0 1 auto; width: auto; }
/* Dentro de label.campo (flex en columna) la base de 14rem de .filtros input sería el alto: alto normal, como el select. */
.filtros label.campo select, .filtros label.campo input { flex: 0 0 auto; width: auto; min-width: 10rem; margin-top: .25rem; }
.filtros > label.campo:first-child { width: auto; }
.filtros { align-items: flex-end; }
.conteo { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1rem 0; }
.conteo li { padding: .25rem .75rem; border-radius: 999px; border-left: 4px solid; font-size: .9375rem; }
.conteo .num { font-weight: 700; }
.ok { --estado: var(--ok); --estado-fondo: var(--ok-fondo); }
.pendiente { --estado: var(--pendiente); --estado-fondo: var(--pendiente-fondo); }
.falta { --estado: var(--falta); --estado-fondo: var(--falta-fondo); }
.capturado { --estado: var(--capturado); --estado-fondo: var(--capturado-fondo); }
.sin-procesar { --estado: var(--sin-procesar); --estado-fondo: var(--sin-procesar-fondo); }
.conteo li, .fila .estado { background: var(--estado-fondo); border-color: var(--estado); }
table.captura tr.fila > td:first-child { border-left: 4px solid var(--estado); }
.fila .nombre { display: block; font-weight: 600; }
.fila .puesto { display: block; color: var(--tenue); font-size: .875rem; }
.fila .estado { display: inline-block; padding: 0 .5rem; border-radius: 999px; border: 1px solid; font-weight: 600;
                font-size: .875rem; color: var(--texto); }
.fila .detalle { display: block; color: var(--tenue); font-size: .875rem; }
/* Incumplimiento de horario junto a las checadas (R-38): se parte en líneas aunque la columna no se parta. */
.checadas-horario { min-width: 11rem; white-space: normal; }
.fila .marca-horario { display: block; font-size: .875rem; font-weight: 600; }
.marca-fila { display: inline-block; margin: .125rem .25rem 0 0; padding: 0 .5rem; border-radius: 999px; font-size: .75rem;
              border: 1px solid var(--linea); color: var(--tenue); background: var(--papel); }
/* Captura de uno: clave, motivo y «Guardar» en el renglón */
form.captura-uno { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; max-width: none; margin: 0; }
form.captura-uno select { width: auto; min-width: 4.5rem; margin: 0; }
form.captura-uno input[name=Motivo] { width: auto; flex: 1 1 9rem; min-width: 7rem; margin: 0; }
form.captura-uno select[data-lista-motivos], form.captura-grupo select[data-lista-motivos] { flex: 1 1 14rem; max-width: 100%; min-width: 0; }
form.captura-uno button { margin: 0; padding: .375rem .875rem; }
form.captura-uno .mensaje-error { flex-basis: 100%; margin: .25rem 0 0; padding: .375rem .625rem; font-size: .875rem; }
/* Captura en grupo: barra con clave, motivo y «Capturar»; resumen para confirmar */
form.captura-grupo { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; max-width: none; margin: 0 0 .75rem;
                     padding: .5rem .75rem; background: var(--blanco); border: 1px solid var(--linea); }
form.captura-grupo select { width: auto; min-width: 4.5rem; margin: 0; }
form.captura-grupo input[name=Motivo] { width: auto; flex: 1 1 9rem; min-width: 7rem; margin: 0; }
form.captura-grupo button { margin: 0; }
/* Con JavaScript la barra queda fija abajo, a todo lo ancho, mientras haya alguno marcado (site.js deja espacio abajo). */
form.captura-grupo.fija { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; margin: 0; border: 0;
                          border-top: 3px solid var(--azul); box-shadow: 0 -2px 8px rgba(27, 36, 48, .15);
                          padding: .625rem max(1rem, calc((100% - 960px) / 2)); }
form.captura-grupo [data-conteo] { color: var(--azul); white-space: nowrap; }
th.con-todos label.casilla { margin: .25rem 0 0; font-size: .875rem; color: var(--texto); white-space: nowrap; }
td.num label.casilla { margin: 0; }
.resumen-lista { padding-left: 1.25rem; }
.resumen-lista li { margin: .25rem 0; }
.resumen-lista .mensaje-error { display: block; margin: .25rem 0; padding: .375rem .625rem; font-size: .875rem; }
form.confirmar { display: flex; flex-wrap: wrap; gap: .5rem; max-width: none; }

/* Tablas: en celular se vuelven tarjetas con la etiqueta de cada dato */
table { width: 100%; border-collapse: collapse; background: var(--blanco); border: 1px solid var(--linea); }
th, td { text-align: left; padding: .625rem .75rem; border-bottom: 1px solid var(--linea); }
th { background: var(--azul-claro); color: var(--azul); font-weight: 600; font-size: .9375rem; }
td.num { font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }

/* Captura diaria en pantalla ancha: la página usa más ancho y cada dato queda en una línea
   (nombre, checadas, horas, y la clave junto a «Guardar»). */
@media (min-width: 1024px) {
    main:has(table.captura) { max-width: 1280px; }
    table.captura td[data-etiqueta="Colaborador"] { min-width: 16rem; }
    table.captura td[data-etiqueta="Checadas"], table.captura td[data-etiqueta="Horas"] { white-space: nowrap; }
    table.captura form.captura-uno select { max-width: 13rem; }
    table.captura form.captura-uno select[data-lista-motivos] { max-width: 22rem; }
}
/* Tableta: las listas largas no deben ensanchar la tabla más que la pantalla. */
@media (min-width: 641px) and (max-width: 1023px) {
    table.captura form.captura-uno select { max-width: 13rem; }
}

/* Cuadrícula del periodo: se desplaza dentro de la altura de la pantalla (la barra lateral siempre a la vista), encabezado fijo
   arriba, nombre fijo a la izquierda y cada día con el color de su estado. */
main:has(table.periodo) { max-width: none; }
.barra-periodo { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
.barra-periodo h2 { margin-bottom: 0; }
.no-aplica { --estado: var(--linea); --estado-fondo: #F7F8FA; }
.leyenda li { font-size: .8125rem; }
.tabla-periodo { overflow: auto; max-height: calc(100vh - 1rem); border: 1px solid var(--linea); border-radius: var(--radio);
                 background: var(--blanco); }
table.periodo { width: auto; min-width: 100%; border: 0; font-size: .875rem; }
table.periodo th, table.periodo td { padding: .25rem .5rem; white-space: nowrap; border-bottom: 1px solid var(--linea); }
table.periodo th.dia, table.periodo td.dia { text-align: center; min-width: 3.25rem; padding: 0; }
table.periodo .nombre { position: sticky; left: 0; z-index: 1; background: var(--blanco); font-weight: 600; color: var(--texto);
                        border-right: 2px solid var(--linea); }
table.periodo thead th { position: sticky; top: 0; z-index: 2; }
table.periodo thead th.nombre { z-index: 3; background: var(--azul-claro); color: var(--azul); }
/* Puesto y departamento largos terminan en «…»; el texto completo sale al pasar el mouse. */
table.periodo td.corto { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
table.periodo td.puesto { color: var(--tenue); }
table.periodo td.dia { background: var(--estado-fondo); border-left: 1px solid var(--blanco); }
table.periodo td.dia a { display: block; padding: .25rem .375rem; color: var(--texto); text-decoration: none; font-weight: 600;
                         box-shadow: inset 0 -3px 0 var(--estado); }
table.periodo td.dia a:hover { text-decoration: underline; }
table.periodo tr.separador td { height: 1rem; background: var(--papel); }

/* Inicio de quien ve todas: un renglón con el nombre de la zona del BMS antes de sus sucursales. */
tr.zona th { font-size: .8125rem; letter-spacing: .03em; padding: .375rem .75rem; }

/* Bitácora: tabla ancha con desplazamiento lateral; en celular, tarjetas como las demás tablas. */
main:has(table.bitacora) { max-width: none; }
.tabla-bitacora { overflow-x: auto; }
table.bitacora { font-size: .875rem; }
table.bitacora td[data-etiqueta^="Fecha"], table.bitacora td.num, table.bitacora td[data-etiqueta="Día afectado"] { white-space: nowrap; }

@media (max-width: 640px) {
    table, thead, tbody, tr, td { display: block; }
    table { border: 0; background: none; }
    thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    tr { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: .75rem; padding: .25rem 0; }
    tbody tr:last-child td, td { border: 0; }
    td { display: grid; grid-template-columns: 8.5rem 1fr; gap: .5rem; padding: .375rem .75rem; }
    td::before { content: attr(data-etiqueta); color: var(--tenue); font-size: .875rem; }
    tr.zona { background: none; border: 0; margin: 1rem 0 .25rem; padding: 0; }
    tr.zona th { display: block; background: none; padding: 0; }
    table.captura tr.fila { border-left: 6px solid var(--estado); }
    table.captura tr.fila > td:first-child { border-left: 0; }
    /* En tarjetas el encabezado se oculta; «Marcar todos» sigue a la vista arriba de las tarjetas. */
    table.captura thead:has(label[data-marcar-todos]:not([hidden])) { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
    table.captura thead tr { background: none; border: 0; margin-bottom: .5rem; padding: 0; }
    table.captura thead th { display: none; }
    table.captura thead th.con-todos { display: block; background: none; border: 0; padding: 0; }
    table.captura thead th.con-todos .titulo { display: none; }
    form.captura-grupo.fija { gap: .375rem .5rem; padding: .5rem 1rem; }
    /* Dos líneas en celular: conteo y clave; luego motivo y «Capturar». */
    form.captura-grupo.fija select { flex: 1 1 10rem; min-width: 0; }
    form.captura-uno select { max-width: 100%; }
    /* La lista de motivos es larga: la clave ocupa todo el ancho de la tarjeta y cada campo su propia línea. */
    table.captura td[data-etiqueta="Clave"] { grid-template-columns: minmax(0, 1fr); }
    form.captura-uno select[name=Clave], form.captura-uno select[data-lista-motivos], form.captura-uno input[name=Motivo] { flex: 1 1 100%; width: 100%; min-width: 0; }
    form.captura-grupo.fija select[data-lista-motivos], form.captura-grupo.fija input[name=Motivo] { flex: 1 1 100%; width: 100%; min-width: 0; }
    /* La cuadrícula del periodo no se vuelve tarjetas: sigue siendo tabla, se desplaza de lado y el nombre queda fijo. */
    table.periodo { display: table; background: var(--blanco); }
    table.periodo thead { display: table-header-group; position: static; width: auto; height: auto; overflow: visible; clip: auto; }
    table.periodo tbody { display: table-row-group; }
    table.periodo tr { display: table-row; background: none; border: 0; border-radius: 0; margin: 0; padding: 0; }
    table.periodo th, table.periodo td { display: table-cell; border-bottom: 1px solid var(--linea); }
    table.periodo td::before { content: none; }
    /* El nombre se acomoda en varias líneas; «No asegurado» sigue a la vista debajo. */
    table.periodo .nombre { max-width: 11rem; white-space: normal; }
    table.periodo .nombre .marca-fila { display: table; }
    h1 { font-size: 1.5rem; }
}

/* Entrada: la tarjeta de checador */
.entrada {
    max-width: 24rem;
    margin: 2rem auto 0;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    position: relative;
    padding: 1.75rem 1.5rem 1.5rem;
}
/* Perforaciones arriba, como la tarjeta que entra al reloj */
.entrada::before {
    content: "";
    position: absolute;
    left: 1rem; right: 1rem; top: -1px;
    height: 10px;
    background: radial-gradient(circle at 9px 0, var(--papel) 4px, var(--linea) 4.5px, transparent 5.5px) 0 0 / 18px 10px repeat-x;
}
.entrada h1 { font-size: 1.375rem; margin-bottom: .25rem; }
.entrada .ayuda { color: var(--tenue); margin: 0 0 .5rem; }
.entrada form { max-width: none; }
.entrada #Usuario {
    font-size: 1.75rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .12em;
    padding: .5rem .75rem;
}
.entrada button { width: 100%; }

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

.nota-periodo { color: var(--tenue); font-size: .875rem; margin: -.25rem 0 .75rem; text-align: center; }

/* Periodos de nómina: botones de la lista y lista de pendientes del cierre (en celular, tarjetas como las demás tablas). */
a.boton { display: inline-block; padding: .375rem .875rem; border: 1px solid var(--azul); border-radius: var(--radio);
          background: var(--azul); color: var(--blanco); font-weight: 600; text-decoration: none; }
a.boton.secundario { background: var(--blanco); color: var(--azul); }
a.boton.resaltado { box-shadow: 0 0 0 3px var(--azul-claro); }
.estado-periodo.cerrado { font-weight: 600; }
table.pendientes { margin-bottom: .5rem; }
table.resumen-pendientes { margin-bottom: 1.5rem; }
details.detalle-pendientes { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); margin-bottom: .5rem; }
details.detalle-pendientes > summary { cursor: pointer; padding: .5rem .75rem; font-weight: 600; color: var(--azul); }
details.detalle-pendientes[open] > summary { border-bottom: 1px solid var(--linea); }
.zona-casillas { font-weight: 600; margin: .75rem 0 .25rem; }

/* Rol de descansos (Paso 10-A): tabla con las siete casillas en una línea (también en celular), cuadrícula de la quincena y aviso con
   ligas. Las pestañas también las usa Vacaciones. */
.pestanas { display: flex; gap: .25rem; border-bottom: 2px solid var(--linea); margin: .5rem 0 1rem; }
.pestanas a { padding: .5rem 1rem; text-decoration: none; color: var(--azul); border-radius: var(--radio) var(--radio) 0 0; }
.pestanas a[aria-current="page"] { background: var(--azul); color: var(--blanco); font-weight: 600; }
form.rol { max-width: none; }
form.rol input[type=date] { width: auto; min-width: 12rem; margin-bottom: 1rem; }
table.rol .nombre { display: block; font-weight: 600; }
table.rol .puesto, table.rol .detalle, .confirmar .detalle { display: block; color: var(--tenue); font-size: .875rem; }
.dias-rol { display: inline-flex; flex-wrap: nowrap; gap: .25rem; }
label.dia-rol { display: flex; flex-direction: column; align-items: center; margin: 0; font-size: .75rem; font-weight: 600; color: var(--tenue); }
label.dia-rol input { width: auto; margin: 0; }
table.rol td .mensaje-error { margin: .25rem 0 0; padding: .375rem .625rem; font-size: .875rem; }
ul.avisos-rol { list-style: none; padding-left: 1rem; }
ul.avisos-rol li + li { margin-top: .375rem; }
nav.quincena-rol { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; }
nav.quincena-rol a { text-decoration: none; font-size: 1.25rem; padding: .25rem .75rem; border: 1px solid var(--linea); border-radius: var(--radio); }
/* Cuadrícula: una casilla de ancho fijo por día, igual en el encabezado, en cada renglón y en los totales, para que se alineen. */
main:has(table.rol) { max-width: none; }
.tabla-rol { overflow-x: auto; }
table.rol th.quincena, table.rol td.quincena { padding-left: .25rem; padding-right: .25rem; }
.dias-quincena { display: flex; flex-wrap: nowrap; }
.dias-quincena > span { flex: 0 0 2rem; width: 2rem; min-height: 2rem; display: flex; flex-direction: column; align-items: center;
                        justify-content: center; text-align: center; font-weight: 600; font-size: .875rem; line-height: 1.1;
                        border-left: 1px solid var(--linea); }
.dias-quincena > span:last-child { border-right: 1px solid var(--linea); }
.encabezado-dia b { font-size: .875rem; }
.encabezado-dia { font-size: .75rem; }
.encabezado-dia.festivo { background: var(--pendiente-fondo); color: var(--pendiente); box-shadow: inset 0 -3px 0 var(--pendiente); cursor: help; }
.celda .fecha { display: none; }
.celda.descanso { background: var(--capturado-fondo); color: var(--capturado); }
.celda.vacaciones, .celda.en-vacaciones { background: var(--ok-fondo); color: var(--ok); }
.celda.incapacidad { background: var(--falta-fondo); color: var(--falta); }
.celda.fuera { background: repeating-linear-gradient(135deg, var(--sin-procesar-fondo) 0 4px, var(--blanco) 4px 8px); color: var(--tenue); }
.celda .checo { font-size: .75rem; line-height: 1; color: var(--texto); }
table.rol tr.baja td { color: var(--tenue); }
table.rol tfoot th, table.rol tfoot td { background: var(--azul-claro); color: var(--azul); border-top: 1px solid var(--linea); }
table.rol tfoot th { text-align: right; }
/* Horarios: la tabla del departamento (una fila por día; en celular, tarjetas con las etiquetas de cada casilla). */
table.horario { max-width: 40rem; }
table.horario input[type=time] { width: auto; min-width: 7rem; margin: 0; }
.vigencia { margin: .25rem 0; }
.vigencia.programado { color: var(--azul); }
@media (max-width: 640px) {
    table.horario tbody th { display: block; padding: .5rem .75rem 0; background: none; border: 0; }
}
/* Horarios: la semana de colaboradores. Reusa la tabla del rol; cada día es una casilla ancha con su fecha y su horario. En celular
   cada colaborador es una tarjeta y su semana se desplaza de lado. */
main:has(table.semana) { max-width: none; }
.dias-quincena.semana-horario > span { flex: 0 0 7.5rem; width: 7.5rem; min-height: 3.5rem; padding: .25rem; justify-content: flex-start;
                                       font-weight: 400; font-size: .8125rem; }
.dia-sem .fecha { display: block; font-size: .6875rem; font-weight: 600; color: var(--tenue); }
.dia-sem .valor { display: block; word-break: break-word; }
.dia-sem.descanso { background: var(--capturado-fondo); color: var(--capturado); }
.dia-sem.vacaciones { background: var(--ok-fondo); color: var(--ok); }
.dia-sem.incapacidad { background: var(--falta-fondo); color: var(--falta); }
.dia-sem.fuera { background: repeating-linear-gradient(135deg, var(--sin-procesar-fondo) 0 4px, var(--blanco) 4px 8px); color: var(--tenue); }
.dia-sem.descanso .valor, .dia-sem.vacaciones .valor, .dia-sem.incapacidad .valor { font-weight: 600; font-size: .875rem; }
.acciones-fila { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .375rem; }
.acciones-fila form { margin: 0; }
.acciones-fila a.secundario, .acciones-fila button { margin: 0; padding: .375rem .75rem; font-size: .875rem; }
@media (max-width: 640px) {
    table.semana .dias-quincena.semana-horario > span { flex-basis: 6.5rem; width: 6.5rem; min-height: 4rem; }
}
.leyenda-rol { color: var(--tenue); font-size: .875rem; margin: .5rem 0 1rem; }
/* Vista previa sin guardar (site.js): las celdas y totales que cambiarían llevan borde punteado. */
.dias-quincena > span.previa { outline: 2px dashed var(--azul); outline-offset: -3px; }
form.rol .aviso-previa { margin: .75rem 0; }
/* Barra fija abajo mientras haya colaboradores con cambios; site.js deja espacio al final de la página para que no tape nada. */
.barra-rol { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: .5rem .75rem;
             align-items: center; background: var(--blanco); border-top: 3px solid var(--azul);
             box-shadow: 0 -2px 8px rgba(27, 36, 48, .15); padding: .625rem max(1rem, calc((100% - 960px) / 2)); }
.barra-rol button { margin: 0; }
.barra-rol [data-resumen-rol] { color: var(--azul); font-weight: 600; flex: 1 1 14rem; }
@media (max-width: 640px) {
    form.rol input[type=date] { width: 100%; }
    .barra-rol { padding: .5rem 1rem; }
    .barra-rol button { flex: 1 1 auto; padding: .5rem .75rem; }
    .dias-rol { gap: .125rem; }
    /* En la tarjeta, la fila de días se desplaza de lado y cada casilla lleva su día (el encabezado no se ve). */
    table.rol td.quincena { display: block; padding: .375rem .75rem; }
    table.rol td.quincena::before { display: block; margin-bottom: .25rem; }
    table.rol .dias-quincena { overflow-x: auto; padding-bottom: .25rem; }
    table.rol .dias-quincena > span { flex-basis: 2.25rem; width: 2.25rem; min-height: 2.75rem; }
    table.rol .celda .fecha { display: block; font-size: .6875rem; font-weight: 400; color: var(--tenue); }
    /* Los totales, al final, en su propia tarjeta. */
    table.rol tfoot { display: block; }
    table.rol tfoot tr { display: block; }
    table.rol tfoot th { display: block; text-align: left; border: 0; padding: .5rem .75rem 0; }
    table.rol tfoot td { border: 0; background: none; }
    table.rol tfoot td::before { content: none; }
    table.rol tfoot td:empty { display: none; }
}

/* Vacaciones (Paso 10-B): formularios de la pestaña Periodos y lista en tarjetas de celular (las reglas de tabla del @media ya aplican). */
form.vacaciones { max-width: 34rem; }
form.vacaciones input[type=date], form.vacaciones input[type=number] { width: auto; min-width: 12rem; }
section.formulario-vacaciones { margin: 1rem 0; }
table.vacaciones .nombre { display: block; font-weight: 600; }
table.vacaciones tr.cancelada td { color: var(--tenue); text-decoration: line-through; }
table.vacaciones tr.cancelada td[data-etiqueta="Estado"] { text-decoration: none; }
table.vacaciones td[data-etiqueta="Acciones"] a + a { margin-left: .75rem; }
ul.dias-vacaciones { columns: 2 16rem; list-style: none; padding-left: 0; }
@media (max-width: 640px) {
    form.vacaciones input[type=date], form.vacaciones input[type=number] { width: 100%; }
    ul.dias-vacaciones { columns: 1; }
}

/* Vacaciones → Saldos y Carga inicial (Paso 10-B): periodos viejos y avisos de la lista de saldos. */
td .saldo { display: inline-block; margin-right: .75rem; white-space: nowrap; }
td .saldo.viejo, tr.viejo td { color: var(--rojo, #b45309); font-weight: 600; }
td .sin-saldo, td .revisar { display: inline-block; color: var(--rojo, #b45309); font-weight: 600; }
ul.problemas { padding-left: 1.25rem; }

/* Horarios v2: lista de turnos, cuadrícula a todo lo ancho, colaborador «Sin horario» en amarillo y barra fija con «Desde» y «Guardar». */
form[data-asignar-turnos], form[data-filtros-horario] { max-width: none; }
table.turnos { max-width: 60rem; }
table.turnos .vigencia { display: block; }
tr.colaborador.sin-horario td { background: #fff7d6; }
table.semana select { width: auto; max-width: 14rem; margin: 0; font-size: .875rem; }
.barra-guardar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: end; gap: .5rem 1rem;
    padding: .5rem 0; background: var(--blanco); border-top: 3px solid var(--azul); }
.barra-guardar .campo { margin: 0; }
.barra-guardar button { margin: 0; }
/* Cambio de un día: celdas que se pueden cambiar, marca «Solo este día», recuadro y casillas con su texto al lado. */
.dia-sem[data-editar-dia] { cursor: pointer; }
.dia-sem[data-editar-dia]:hover, .dia-sem[data-editar-dia]:focus { outline: 2px solid var(--azul); outline-offset: -2px; }
.dia-sem.cambio-dia { box-shadow: inset 0 0 0 2px #c77700; }
.solo-dia { display: block; font-size: .7rem; font-weight: 600; color: #8a5300; }
dialog.editor-dia { max-width: 36rem; border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.25rem; }
dialog.editor-dia::backdrop { background: rgba(27, 36, 48, .35); }
dialog.editor-dia input[type=time] { width: auto; min-width: 7rem; }
label.campo.casilla { display: flex; align-items: center; gap: .5rem; }
label.campo.casilla input[type=checkbox] { width: auto; margin: 0; }
/* Vista previa: el aviso va en la barra fija (no empuja la tabla) y cada fila dice desde cuándo aplica su cambio. */
.barra-rol .aviso-previa, .barra-guardar .aviso-previa { flex: 1 1 100%; color: var(--azul); font-weight: 600; }
.proximo-dia { display: block; font-size: .75rem; color: #8a5300; }
.proximo-dia:empty { display: none; }
#quincena, #semana { scroll-margin-top: 1rem; }
/* Reportes y rol con «Todas»: renglón de título por sucursal y departamento. */
tr.grupo th { text-align: left; background: #eef2f7; color: var(--azul); font-weight: 700; padding: .5rem .75rem; }

/* Avisos de Inicio: un renglón por aviso, con el color de su urgencia. */
.avisos { margin: 0 0 1.5rem; max-width: 56rem; }
.avisos h2 { margin-bottom: .5rem; }
.aviso { display: block; margin: 0 0 .4rem; padding: .55rem .8rem; border: 1px solid var(--linea); border-left-width: 4px;
         border-radius: var(--radio); color: var(--texto); text-decoration: none; background: var(--blanco); }
.aviso:hover, .aviso:focus-visible { text-decoration: underline; }
.aviso-rojo { border-left-color: var(--falta); background: var(--falta-fondo); }
.aviso-ambar { border-left-color: var(--pendiente); background: var(--pendiente-fondo); }
.aviso-azul { border-left-color: var(--capturado); background: var(--capturado-fondo); }
.avisos-mas > summary { cursor: pointer; color: var(--azul); font-weight: 600; margin: .25rem 0 .5rem; }

/* Campanita del encabezado: ícono con el número de avisos encima (rojo si hay alguno urgente). */
.campana { position: relative; display: inline-flex; align-items: center; padding: .35rem; color: inherit; border-radius: var(--radio); }
.campana:hover, .campana:focus-visible { background: rgba(255, 255, 255, .15); }
.campana .icono { width: 1.35rem; height: 1.35rem; }
.campana-num { position: absolute; top: -.1rem; right: -.25rem; min-width: 1.15rem; padding: 0 .3rem; border-radius: 999px;
               font-size: .7rem; font-weight: 700; line-height: 1.15rem; text-align: center; color: var(--blanco); }
.campana-rojo { background: var(--falta); }
.campana-ambar { background: var(--pendiente); }
/* Filtros con rango de fechas: Desde y Hasta juntos, en su propio renglón (debajo de sucursal y departamento). */
.filtros .fechas { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-end; }

/* Tablero: los bloques en una cuadrícula (dos o más columnas en pantallas anchas; en celular, apilados en una columna). */
main:has(.tablero) { max-width: none; }
/* Bloques chicos (Tendencia, Plantilla, Avance, Vacaciones): cuatro por fila en escritorio, dos en tableta y uno en celular; los
   anchos ocupan toda la fila. Columnas fijas (no auto-fit): con bloques a lo ancho, auto-fit dejaba columnas vacías a la derecha. */
.tablero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
@media (max-width: 1100px) { .tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tablero { grid-template-columns: minmax(0, 1fr); } }
.bloque { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem; min-width: 0; }
.bloque-ancho { grid-column: 1 / -1; }
.bloque > h2 { margin: 0 0 .75rem; font-size: 1.125rem; }
.bloque .cargando { color: var(--tenue); margin: 0; }
.bloque-error { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; color: var(--rojo); }
.bloque-error .reintentar { margin: 0; padding: .25rem .75rem; }
/* Botón con aspecto de enlace («Ver los 10», «Ver todas»): discreto dentro de un bloque. */
button.boton-liga { background: none; border: 0; padding: 0; min-height: 0; color: var(--azul); font: inherit; font-size: .875rem;
                    text-decoration: underline; cursor: pointer; }
button.boton-liga:hover { background: none; color: var(--azul); }

/* Tablero, días pasados: tarjetas (el color del % lo pone tablero.js con una clase: verde ≥ 95, ámbar 85–94.9, rojo < 85). */
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .75rem; }
.dato { display: flex; flex-direction: column; gap: .125rem; padding: .75rem; border: 1px solid var(--linea); border-left: 4px solid var(--linea);
        border-radius: var(--radio); background: var(--papel); min-width: 0; }
.dato-titulo { color: var(--tenue); font-size: .8125rem; }
.dato-valor { font-size: 1.5rem; line-height: 1.2; overflow-wrap: anywhere; }
.dato-detalle { color: var(--tenue); font-size: .8125rem; }
.dato-verde { border-left-color: var(--ok); background: var(--ok-fondo); }
.dato-verde .dato-valor { color: var(--ok); }
.dato-ambar { border-left-color: var(--pendiente); background: var(--pendiente-fondo); }
.dato-ambar .dato-valor { color: var(--pendiente); }
.dato-rojo { border-left-color: var(--falta); background: var(--falta-fondo); }
.dato-rojo .dato-valor { color: var(--falta); }
.dato-sin .dato-valor { color: var(--tenue); font-size: 1.125rem; font-weight: 600; }

/* Dona (colaborador-días por tipo) y su leyenda; cada parte toma su color de --color. */
.dona { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 1rem 0 0; }
.dona-grafica { width: 9rem; height: 9rem; flex: none; }
.dona-fondo { fill: none; stroke: var(--sin-procesar-fondo); stroke-width: 6; }
.dona-parte { fill: none; stroke: var(--color); stroke-width: 6; }
.dona-total { font-size: 5px; font-weight: 700; fill: var(--texto); }
.dona-leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; font-size: .875rem; }
.dona-leyenda li { display: grid; grid-template-columns: .875rem 1fr auto auto; align-items: center; gap: .5rem; }
.dona-pct { color: var(--tenue); font-size: .8125rem; min-width: 3.5rem; text-align: right; }
.dona-pie { flex: 1 0 100%; color: var(--tenue); font-size: .8125rem; }
.muestra { width: .875rem; height: .875rem; border-radius: 3px; background: var(--color); }
.dona-asistencia { --color: var(--ok); }
.dona-descanso { --color: var(--sin-procesar); }
.dona-vacaciones { --color: var(--capturado); }
.dona-incapacidad { --color: #6B4FA0; }
.dona-faltas { --color: var(--falta); }
.dona-otros { --color: var(--pendiente); }

/* Tendencia: barras por día, quincena actual contra la anterior; líneas de 85 % y 95 % punteadas. */
.tendencia-grafica { display: block; width: 100%; height: auto; }
.tendencia-guia { stroke: var(--linea); stroke-width: .5; }
.tendencia-meta { stroke: var(--tenue); stroke-width: .5; stroke-dasharray: 2 2; }
.tendencia-eje { font-size: 7px; fill: var(--tenue); }
.tendencia-actual { --color: var(--azul); fill: var(--color); }
.tendencia-anterior { --color: #9DB3CF; fill: var(--color); }
.tendencia-vacia { fill: var(--linea); }
.tendencia-leyenda { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.tendencia-leyenda li { grid-template-columns: .875rem auto; }

/* Tablero, hoy en vivo: medidor de media luna (checaron / plantilla) y tiendas sin ninguna checada en rojo. */
.hoy-dia { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem 2rem; margin-top: 1rem; }
.medidor { margin: 0; flex: none; text-align: center; }
.medidor-grafica { display: block; width: 12rem; height: auto; }
.medidor-fondo { fill: none; stroke: var(--sin-procesar-fondo); stroke-width: 6; stroke-linecap: round; }
.medidor-lleno { fill: none; stroke: var(--azul); stroke-width: 6; stroke-linecap: round; }
.medidor-valor { font-size: 7px; font-weight: 700; fill: var(--texto); }
.medidor-pie { color: var(--tenue); font-size: .875rem; }
.hoy-lado { flex: 1 1 16rem; min-width: 0; }
.hoy-titulo { margin: 0 0 .5rem; font-size: 1rem; }
.hoy-titulo:not(:first-child) { margin-top: 1rem; }
.hoy-alerta { color: var(--falta); }
.hoy-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; font-size: .875rem; }
.hoy-lista li { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem .5rem; border-radius: var(--radio); }
.hoy-lista li span { overflow-wrap: anywhere; }
.hoy-lista li strong { flex: none; }
.hoy-sin-checadas li { background: var(--falta-fondo); color: var(--falta); }
/* «Por área» en mosaico: tarjetas chicas con nombre, checaron / plantilla, porcentaje y barra (rojo < 30 %, ámbar < 60 %, verde). */
.hoy-areas { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem;
             grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); }
.hoy-area { border: 1px solid var(--linea); border-radius: var(--radio); padding: .375rem .5rem; background: var(--blanco); min-width: 0; }
.hoy-area-nombre { display: block; font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoy-area-cifras { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin: .125rem 0 .25rem; font-size: .8125rem; }
.hoy-area-pct { font-weight: 700; }
.hoy-area-barra { display: block; height: .3125rem; border-radius: 999px; background: var(--sin-procesar-fondo); overflow: hidden; }
.hoy-area-lleno { display: block; height: 100%; border-radius: 999px; }
.hoy-area-rojo { color: var(--falta); }       .hoy-area-fondo-rojo { background: var(--falta); }
.hoy-area-ambar { color: var(--pendiente); }  .hoy-area-fondo-ambar { background: var(--pendiente); }
.hoy-area-verde { color: var(--ok); }         .hoy-area-fondo-verde { background: var(--ok); }
.hoy-hora { margin: .75rem 0 0; }
.bloque-estado { margin: .5rem 0 0; font-size: .8125rem; color: var(--pendiente); }
/* Tablero: rankings (tres listas lado a lado; colaborador en un renglón: nombre y, en gris, puesto y sucursal), iniciales de la tabla
   y plantilla autorizada. */
.ranking-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: .5rem 1.5rem; }
.ranking-columnas .hoy-titulo { margin-top: 0; }
.ranking-quien { min-width: 0; }
.ranking-nombre { font-weight: 600; }
.ranking-mas { margin: .5rem 0 0; }
.iniciales { flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
             background: var(--sin-procesar-fondo); font-size: .75rem; font-weight: 700; }
.plantilla-detalle { display: block; }
.plantilla-lista .plantilla-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: .5rem; }
.plantilla-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plantilla-pie { margin: .5rem 0 0; font-size: .75rem; }
.plantilla-faltan { color: var(--falta); }
.plantilla-sobran { color: var(--pendiente); }
.avance-liga { margin: .75rem 0 0; }

/* Tablero: tabla de colaboradores (filas que abren el panel lateral) y paginado. En celular la tabla ya se vuelve tarjetas. */
.tabla-buscar { margin: 0 0 .25rem; font-size: .875rem; }
.tabla-buscar-campo { max-width: 24rem; margin-bottom: .75rem; }
.tabla-desplazable { overflow-x: auto; }
table.tabla-colaboradores { font-size: .875rem; }
table.tabla-colaboradores td.num { white-space: nowrap; }
tr.fila-colaborador { cursor: pointer; }
tr.fila-colaborador:hover td { background: var(--azul-claro); }
tr.fila-colaborador:focus-visible { outline: none; box-shadow: var(--foco); }
.colaborador-texto { display: flex; flex-direction: column; min-width: 0; }
.colaborador-nombre { font-weight: 600; overflow-wrap: anywhere; }
.colaborador-detalle { color: var(--tenue); font-size: .8125rem; }
.estatus { font-weight: 600; }
.alertas { display: flex; flex-wrap: wrap; gap: .25rem; }
.alerta { padding: .125rem .5rem; border-radius: 999px; background: var(--falta-fondo); color: var(--falta); font-size: .75rem;
          font-weight: 600; white-space: nowrap; }
.paginado { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .75rem; }
.paginado-boton { margin: 0; padding: .375rem .875rem; }
.paginado-boton:disabled { background: var(--sin-procesar-fondo); color: var(--tenue); cursor: default; }
.paginado-texto { color: var(--tenue); font-size: .875rem; }

/* Panel lateral del colaborador: a la derecha sobre la página (en celular, a todo el ancho), con un fondo que lo cierra al dar clic. */
.panel-fondo { position: fixed; inset: 0; z-index: 40; background: rgba(15, 45, 90, .35); }
.panel-lateral { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; display: flex; flex-direction: column;
                 width: min(28rem, 100%); background: var(--blanco); box-shadow: -8px 0 24px rgba(15, 45, 90, .2); }
.panel-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem;
                border-bottom: 1px solid var(--linea); }
.panel-cabeza h2 { margin: 0; font-size: 1.125rem; overflow-wrap: anywhere; }
.panel-cerrar { margin: 0; padding: .375rem .875rem; flex: none; }
.panel-contenido { flex: 1; overflow-y: auto; padding: 1rem; }
.panel-datos { margin: 0 0 1rem; color: var(--tenue); font-size: .875rem; }
.panel-dias { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.panel-dia { display: flex; flex-direction: column; gap: .125rem; padding: .5rem .75rem; border: 1px solid var(--linea);
             border-radius: var(--radio); background: var(--papel); font-size: .875rem; }
.panel-dia-cabeza { display: flex; justify-content: space-between; gap: 1rem; }
.panel-clave { font-weight: 700; }
.panel-sin { color: var(--tenue); font-weight: 400; }
.panel-horario, .panel-checadas { color: var(--texto); }
@media (max-width: 640px) {
    .panel-lateral { width: 100%; }
    .tabla-buscar-campo { max-width: none; }
}