:root {
    --color-primario: #0A1F44;
    --color-secundario: #123A70;
    --color-acento: #1E5FBF;
    --color-texto: #16213E;
    /* Antes #5B6B8C (contraste 5.3:1 sobre blanco); oscurecido a 7.8:1
       (nivel AAA) para que se lea mejor con luz de exterior en el kiosco. */
    --color-texto-suave: #44526F;
    --color-fondo: #EEF2FA;
    --color-superficie: #FFFFFF;
    --color-borde: #DCE3F0;
    --sombra-tarjeta: 0 10px 30px rgba(15, 35, 70, 0.09);

    /* Paleta complementaria: para diferenciar secciones, estados y
       tarjetas usando el azul oscuro como color de marca, no como
       fondo de toda la aplicación. */
    --color-verde: #16A34A;
    --color-verde-suave: rgba(22, 163, 74, 0.12);
    --color-ambar: #D97706;
    --color-ambar-suave: rgba(217, 119, 6, 0.12);
    --color-morado: #7C3AED;
    --color-morado-suave: rgba(124, 58, 237, 0.12);
    --color-rojo: #DC2626;
    --color-rojo-suave: rgba(220, 38, 38, 0.1);
}

* {
    box-sizing: border-box;
}

html {
    /* Sube el tamaño base (20px en vez de 16px): como casi todo el CSS
       usa rem, esto agranda proporcionalmente todo el sistema de una
       sola vez. En celulares (ver media query) baja para que no se
       vea exagerado en pantallas chicas. */
    font-size: 125%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: linear-gradient(160deg, #F5F8FE, #E7EDFA);
    background-attachment: fixed;
    color: var(--color-texto);
    /* Respeta el notch/home indicator cuando corre instalada como PWA */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

main {
    flex: 1;
    display: flex;
}

.pantalla-centrada {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.tarjeta {
    width: 100%;
    max-width: 480px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--sombra-tarjeta);
}

.tarjeta h1 {
    margin-top: 0;
    font-size: 1.5rem;
    color: var(--color-primario);
}

.subtitulo {
    color: var(--color-texto-suave);
    margin-top: -0.5rem;
}

/* Tarjeta de login: logo, nombre de empresa y subtítulo centrados;
   el formulario en sí queda alineado a la izquierda (más legible). */
.tarjeta-login h1,
.tarjeta-login .subtitulo {
    text-align: center;
}

.lista-estado {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.lista-estado li {
    padding: 0.4rem 0;
}

.lista-estado .ok {
    color: var(--color-verde);
    margin-right: 0.5rem;
}

.nota {
    font-size: 0.9rem;
    color: var(--color-texto-suave);
    border-top: 1px solid var(--color-borde);
    padding-top: 1rem;
}

/* Pantalla de asistencia del empleado */
.estado-linea {
    margin: 0.75rem 0 1.25rem;
}

.subtitulo-seccion {
    font-size: 1rem;
    margin: 1.5rem 0 0.75rem;
    color: var(--color-primario);
}

.filtro-periodo {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.filtro-periodo a {
    color: var(--color-texto-suave);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
}

.filtro-periodo a.activo {
    color: #fff;
    background: var(--color-acento);
    border-color: transparent;
}

.sin-datos {
    font-size: 0.9rem;
    color: var(--color-texto-suave);
}

.lista-registros {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lista-registros li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-borde);
    font-size: 0.9rem;
}

.lista-registros li:last-child {
    border-bottom: none;
}

.tipo-registro {
    font-weight: 600;
    min-width: 6.5rem;
}

.tipo-registro.tipo-entrada {
    color: #15803D;
}

.tipo-registro.tipo-salida {
    color: #B91C1C;
}

.tipo-registro.tipo-salida_almuerzo,
.tipo-registro.tipo-entrada_almuerzo {
    color: #92400E;
}

.fecha-registro {
    flex: 1;
    color: var(--color-texto-suave);
    text-align: center;
}

.metodo-registro {
    color: var(--color-texto-suave);
    font-size: 0.85rem;
}

/* Formularios */
label {
    display: block;
    margin: 0.6rem 0 0.25rem;
    font-size: 0.9rem;
    color: var(--color-texto-suave);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
textarea {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--color-borde);
    background: #F8FAFD;
    color: var(--color-texto);
    /* 1rem nunca baja de 16px reales (ver media query móvil), el
       mínimo para que Safari en iOS no haga zoom automático al enfocar */
    font-size: 1rem;
    color-scheme: light;
}

textarea {
    font-family: inherit;
    resize: vertical;
}

.nota-campo {
    font-size: 0.8rem;
    color: var(--color-texto-suave);
    margin: 0.35rem 0 0.9rem;
}

select {
    padding: 0.6rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--color-borde);
    background: #F8FAFD;
    color: var(--color-texto);
    font-size: 1rem;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus {
    outline: none;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px rgba(30, 95, 191, 0.15);
}

/* Campo de contraseña con botón para mostrar/ocultar (login) */
.campo-password {
    position: relative;
}

.campo-password input {
    padding-right: 2.75rem;
}

.boton-ver-password {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-texto-suave);
    cursor: pointer;
}

.boton-ver-password.activo {
    color: var(--color-acento);
}

/* Dos columnas en formularios (instalador y administración) */
.fila-doble {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.fila-doble > div {
    flex: 1;
    min-width: 200px;
}

button {
    padding: 0.7rem 1.2rem;
    border: none;
    border-radius: 10px;
    background: var(--color-acento);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

button:hover {
    filter: brightness(1.1);
}

.boton-ancho {
    width: 100%;
    padding: 0.85rem;
    margin-top: 1rem;
    font-size: 1rem;
}

.opcion-recordar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-texto-suave);
    margin-top: 0.9rem;
}

.opcion-recordar input {
    width: auto;
}

.fieldset-metodos {
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 0.5rem 1rem 0.9rem;
    margin-top: 1rem;
}

.fieldset-metodos legend {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primario);
    padding: 0 0.4rem;
}

.fieldset-metodos .opcion-recordar {
    margin-top: 0.6rem;
}

/* Agrupa formularios largos (Empleados, etc.) en secciones con nombre,
   para que se lean de un vistazo en vez de una sola lista de campos sin
   quiebres -- mismo look que .fieldset-metodos, generalizado. */
.fieldset-seccion {
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 0.3rem 1rem 1rem;
    margin-top: 1.25rem;
}

.fieldset-seccion legend {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primario);
    padding: 0 0.4rem;
}

.fieldset-seccion label:first-of-type {
    margin-top: 0.3rem;
}

.opcion-anidada {
    margin-left: 1.6rem;
    font-size: 0.8rem;
}

/* Botón/instrucciones para instalar la PWA desde el login */
.pwa-contenedor {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-borde);
}

.boton-secundario {
    background: transparent;
    border: 1px solid var(--color-acento);
    color: var(--color-acento);
}

.boton-secundario:hover {
    background: rgba(30, 95, 191, 0.08);
    filter: none;
}

.instrucciones-pwa {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
    padding: 0.9rem 1rem;
    border-radius: 10px;
    background: rgba(30, 95, 191, 0.08);
    color: var(--color-texto-suave);
    font-size: 0.85rem;
}

.instrucciones-pwa svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--color-acento);
    margin-top: 0.1rem;
}

.instrucciones-pwa strong {
    color: var(--color-texto);
}

.alerta-error {
    background: var(--color-rojo-suave);
    border: 1px solid rgba(220, 38, 38, 0.35);
    color: #991B1B;
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alerta-exito {
    background: var(--color-verde-suave);
    border: 1px solid rgba(22, 163, 74, 0.35);
    color: #166534;
    padding: 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
}

/* Barra superior (usuarios autenticados) */
.barra-superior {
    padding: 1rem 1.75rem;
    background: linear-gradient(120deg, var(--color-primario), var(--color-secundario));
    border-bottom: none;
    box-shadow: 0 4px 18px rgba(10, 31, 68, 0.28);
    position: relative;
    z-index: 10;
}

.barra-superior-contenido {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.marca {
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}

.logo-marca {
    /* Pensado para que un escudo/sello (no solo un logotipo rectangular
       tipo wordmark) se vea con detalle reconocible en la barra
       superior, sin agrandar demasiado la barra en sí. */
    height: 44px;
    width: auto;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

.logo-login {
    display: block;
    max-height: 100px;
    width: auto;
    margin: 0 auto 1rem;
}

/* Botón hamburguesa: oculto en escritorio, solo aparece en móvil (ver
   media query) para colapsar el menú en vez de amontonar los enlaces. */
.boton-menu-movil {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.boton-menu-movil span {
    display: block;
    height: 2px;
    width: 100%;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.boton-menu-movil[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.boton-menu-movil[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.boton-menu-movil[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.menu-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.menu-nav a {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}

.menu-nav a:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

.menu-nav a.enlace-destacado {
    color: var(--color-primario);
    background: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.menu-nav a.enlace-destacado:hover {
    filter: brightness(0.97);
    background: #fff;
}

.grupo-usuario {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.35rem;
    padding-left: 0.85rem;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.usuario-actual {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    white-space: nowrap;
}

.form-logout button {
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    white-space: nowrap;
}

.form-logout button:hover {
    filter: none;
    color: #fff;
    background: rgba(220, 38, 38, 0.65);
    border-color: rgba(220, 38, 38, 0.7);
}

/* Mensaje flash tras una acción (post-redirect-get) */
.flash-mensaje {
    max-width: 1100px;
    margin: 1rem auto 0;
    padding: 0.9rem 1.5rem;
    border-radius: 10px;
    font-size: 0.9rem;
}

.flash-exito {
    background: var(--color-verde-suave);
    border: 1px solid rgba(22, 163, 74, 0.35);
    color: #166534;
}

.flash-error {
    background: var(--color-rojo-suave);
    border: 1px solid rgba(220, 38, 38, 0.35);
    color: #991B1B;
}

/* Paneles de administración */
.panel {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.panel-angosto {
    max-width: 640px;
}

.panel h1 {
    margin-top: 0;
    font-size: 1.8rem;
    color: var(--color-primario);
}

.panel h2 {
    font-size: 1.25rem;
    margin: 2rem 0 1rem;
    color: var(--color-primario);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Tarjetas de navegación del dashboard de administración */
.grid-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 1.75rem;
    align-items: stretch;
}

.tarjeta-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-top: 4px solid var(--color-acento);
    border-radius: 16px;
    padding: 1.5rem;
    color: var(--color-texto);
    text-decoration: none;
    box-shadow: var(--sombra-tarjeta);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.tarjeta-panel:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(15, 35, 70, 0.14);
}

.tarjeta-panel--verde { border-top-color: var(--color-verde); }
.tarjeta-panel--ambar { border-top-color: var(--color-ambar); }
.tarjeta-panel--morado { border-top-color: var(--color-morado); }

.icono-tarjeta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: "Iowan Old Style", Georgia, serif;
    margin-bottom: 1rem;
    background: rgba(30, 95, 191, 0.1);
    color: var(--color-acento);
}

.tarjeta-panel--verde .icono-tarjeta {
    background: var(--color-verde-suave);
    color: var(--color-verde);
}

.tarjeta-panel--ambar .icono-tarjeta {
    background: var(--color-ambar-suave);
    color: var(--color-ambar);
}

.tarjeta-panel--morado .icono-tarjeta {
    background: var(--color-morado-suave);
    color: var(--color-morado);
}

.tarjeta-panel h2 {
    width: 100%;
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    color: var(--color-primario);
}

.tarjeta-panel p {
    width: 100%;
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-texto-suave);
}

/* Notificaciones push (Parte 16): botón de activar/desactivar en el dashboard */
.caja-notificaciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    box-shadow: var(--sombra-tarjeta);
}

.caja-notificaciones p {
    margin: 0.2rem 0 0;
}

.caja-notificaciones button {
    flex-shrink: 0;
}

/* Resumen "Hoy" del dashboard: tarjetas numéricas + listas colapsables */
.resumen-hoy {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin: 1rem 0 1.5rem;
}

.estadistica-tile {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    box-shadow: var(--sombra-tarjeta);
}

.estadistica-numero {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primario);
    line-height: 1;
}

.estadistica-etiqueta {
    font-size: 0.85rem;
    color: var(--color-texto-suave);
}

.estadistica-tile--verde .estadistica-numero { color: var(--color-verde); }
.estadistica-tile--rojo .estadistica-numero { color: var(--color-rojo); }
.estadistica-tile--ambar .estadistica-numero { color: var(--color-ambar); }

/* Gráficos del dashboard: barras hechas a mano con CSS, sin librerías */
.grid-graficos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin: 1rem 0 1.75rem;
}

.tarjeta-grafico {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 14px;
    padding: 1.25rem 1.4rem;
    box-shadow: var(--sombra-tarjeta);
}

.tarjeta-grafico h3 {
    margin: 0 0 1.1rem;
    font-size: 1rem;
    color: var(--color-primario);
}

/* Barras verticales (tardanzas por mes) */
.grafico-barras-v {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.6rem;
    height: 150px;
}

.columna-barra-v {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 100%;
}

.valor-barra-v {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-primario);
    min-height: 1.1em;
}

.pista-barra-v {
    flex: 1;
    width: 100%;
    max-width: 34px;
    display: flex;
    align-items: flex-end;
}

.barra-v {
    width: 100%;
    background: linear-gradient(180deg, var(--color-acento), var(--color-primario));
    border-radius: 5px 5px 2px 2px;
    min-height: 3px;
}

.etiqueta-barra-v {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Barras horizontales (ausentismo por empleado) */
.grafico-barras-h {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fila-barra-h {
    display: grid;
    grid-template-columns: minmax(90px, 40%) 1fr 1.75rem;
    align-items: center;
    gap: 0.6rem;
}

.etiqueta-barra-h {
    font-size: 0.85rem;
    color: var(--color-texto);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pista-barra-h {
    background: var(--color-fondo);
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}

.barra-h {
    height: 100%;
    background: linear-gradient(90deg, var(--color-ambar), var(--color-rojo));
    border-radius: 999px;
}

.valor-barra-h {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-texto-suave);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.listas-hoy {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.detalle-hoy {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    padding: 0.5rem 1rem;
}

.detalle-hoy summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-primario);
    padding: 0.5rem 0;
}

.detalle-hoy ul {
    margin: 0.25rem 0 0.75rem;
    padding-left: 1.25rem;
    font-size: 0.9rem;
}

.detalle-hoy li {
    padding: 0.2rem 0;
}

.detalle-hoy .sin-datos {
    margin: 0.25rem 0 0.75rem;
    font-size: 0.9rem;
    color: var(--color-texto-suave);
}

.boton-enlace {
    display: inline-block;
    padding: 0.6rem 1.1rem;
    border-radius: 10px;
    background: var(--color-acento);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.boton-enlace:hover {
    filter: brightness(1.1);
}

.enlace-volver {
    color: var(--color-acento);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}

.enlace-volver:hover {
    text-decoration: underline;
}

.botones-exportar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.botones-exportar .boton-enlace {
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    background: var(--color-primario);
}

/* Excel en verde (su color habitual), PDF en morado, para distinguirlos de un vistazo */
.botones-exportar .boton-enlace--excel {
    background: var(--color-verde);
}

.botones-exportar .boton-enlace--pdf {
    background: var(--color-morado);
}

/* Secciones largas (ej. Detalle de marcajes en Reportes) colapsadas por
   defecto -- el toggle es liviano a propósito, sin tarjeta ni sombra
   propia, porque la tabla de adentro ya trae la suya. */
.seccion-colapsable {
    margin-bottom: 1.5rem;
}

.seccion-colapsable > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-acento);
    font-size: 0.9rem;
    padding: 0.4rem 0;
    list-style: none;
}

.seccion-colapsable > summary::-webkit-details-marker {
    display: none;
}

.seccion-colapsable > summary::before {
    content: '▸ ';
}

.seccion-colapsable[open] > summary::before {
    content: '▾ ';
}

.seccion-colapsable > .tabla-envoltorio {
    margin-top: 0.75rem;
}

/* Filtros de búsqueda */
.filtros-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.filtros-form input,
.filtros-form select {
    width: auto;
    flex: 1;
    min-width: 160px;
}

/* Tabla de datos */
.tabla-envoltorio {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--color-borde);
    box-shadow: var(--sombra-tarjeta);
}

.tabla-datos {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-superficie);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.tabla-datos th,
.tabla-datos td {
    padding: 0.7rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-borde);
}

.tabla-datos thead th {
    background: var(--color-primario);
    color: #fff;
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tabla-datos tbody tr:hover {
    background: #F3F6FD;
}

.tabla-datos tbody tr:last-child td {
    border-bottom: none;
}

.badge {
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
}

.badge-activo {
    background: var(--color-verde-suave);
    color: #15803D;
}

.badge-inactivo {
    background: var(--color-rojo-suave);
    color: #B91C1C;
}

.badge-ambar {
    background: var(--color-ambar-suave);
    color: #92400E;
}

.acciones-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.acciones-fila form {
    display: inline;
}

/* Botones de acciones como íconos compactos: la columna "Acciones" es
   la que más ancho le agrega a la tabla, así que en vez de texto
   (Editar / Contraseña / Reset PIN / ...) se muestra solo un glifo,
   con el nombre disponible como tooltip/lectura de pantalla. */
.boton-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    border-radius: 8px;
    border: none;
    background: rgba(30, 95, 191, 0.1);
    color: var(--color-acento);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease;
}

.boton-icono:hover {
    background: rgba(30, 95, 191, 0.2);
    filter: none;
}

.boton-icono svg {
    width: 16px;
    height: 16px;
}

.boton-icono--verde {
    background: var(--color-verde-suave);
    color: var(--color-verde);
}

.boton-icono--verde:hover {
    background: rgba(22, 163, 74, 0.28);
}

.boton-icono--ambar {
    background: var(--color-ambar-suave);
    color: var(--color-ambar);
}

.boton-icono--ambar:hover {
    background: rgba(217, 119, 6, 0.28);
}

.boton-icono--rojo {
    background: var(--color-rojo-suave);
    color: var(--color-rojo);
}

.boton-icono--rojo:hover {
    background: rgba(220, 38, 38, 0.28);
}

/* Pantalla del kiosco */
.cuerpo-kiosco {
    user-select: none;
    -webkit-user-select: none;
}

.pantalla-kiosco {
    flex: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.tarjeta-kiosco {
    width: 100%;
    max-width: 460px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: var(--sombra-tarjeta);
    text-align: center;
}

.tarjeta-kiosco h1 {
    margin-top: 0;
    margin-bottom: 0.25rem;
    font-size: 1.4rem;
    color: var(--color-primario);
}

/* Aviso de marcajes guardados localmente, pendientes de enviar (sin conexión) */
.banner-offline {
    background: var(--color-ambar-suave);
    border: 1px solid rgba(217, 119, 6, 0.35);
    color: #92400E;
    font-size: 0.82rem;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    margin: 0 0 1rem;
}

.instruccion {
    font-size: 1rem;
    color: var(--color-texto-suave);
    margin: 1.25rem 0 0.75rem;
}

.oculto {
    display: none !important;
}

.botones-accion {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}

.boton-accion {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    font-size: 1.2rem;
    border-radius: 14px;
}

.icono-boton-accion {
    width: 2.2rem;
    height: 2.2rem;
}

/* Entrada/Salida con tonos distintos: verde para llegar, ámbar para salir */
.boton-accion[data-accion="entrada"] {
    background: var(--color-verde);
}

.boton-accion[data-accion="salida"] {
    background: var(--color-ambar);
}

/* Salida/Regreso de almuerzo (Parte 17): fila secundaria, más chica y
   discreta que Entrada/Salida -- son acciones que se usan una vez al
   día, no hace falta que compitan visualmente con las principales. */
.botones-accion--almuerzo {
    margin-top: 0.6rem;
}

.boton-accion--secundario {
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    border-radius: 12px;
    background: transparent;
    border: 1.5px solid var(--color-acento);
    color: var(--color-acento);
}

.boton-accion--secundario .icono-boton-accion {
    width: 1.6rem;
    height: 1.6rem;
}

.boton-accion--secundario:hover {
    background: rgba(30, 95, 191, 0.08);
    filter: none;
}

.enlace-boton {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-acento);
    text-decoration: underline;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}

.bloque-qr {
    margin-top: 1rem;
}

#qr-code {
    display: inline-block;
    background: #fff;
    padding: 12px;
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    line-height: 0;
}

.ayuda-qr {
    font-size: 0.85rem;
    color: var(--color-texto-suave);
    margin: 0.75rem 0 0.25rem;
}

.contador-qr {
    font-size: 0.85rem;
    color: var(--color-texto-suave);
    margin: 0;
}

.separador-o {
    margin: 1.5rem 0;
    color: var(--color-texto-suave);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.form-pin input {
    margin-bottom: 0.75rem;
    text-align: center;
}

/* Foto de respaldo al marcar con PIN (Parte 18): miniatura chica, solo
   para dejar evidencia -- no necesita ser grande como la de facial,
   que sí requiere que la persona se vea bien para verificarla. */
.camara-pin {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.9rem;
}

.video-pin {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--color-acento);
    background: #000;
    transform: scaleX(-1);
}

.estado-camara-pin {
    margin: 0;
    font-size: 0.78rem;
    color: var(--color-texto-suave);
    text-align: center;
}

.mensaje-kiosco {
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
}

.mensaje-exito {
    background: var(--color-verde-suave);
    border: 1px solid rgba(22, 163, 74, 0.35);
    color: #166534;
}

.mensaje-error {
    background: var(--color-rojo-suave);
    border: 1px solid rgba(220, 38, 38, 0.35);
    color: #991B1B;
}

/* Reconocimiento facial: panel de cámara del kiosco y de /mi-rostro */
.bloque-facial {
    margin-top: 0.25rem;
}

.boton-facial-destacado {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.85rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--color-morado);
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 14px var(--color-morado-suave);
}

.boton-facial-destacado:hover {
    filter: brightness(1.08);
}

.icono-facial {
    font-size: 1.3rem;
    line-height: 1;
}

.panel-facial {
    margin-top: 1rem;
}

.panel-facial-enrolamiento {
    margin-top: 1.25rem;
}

.video-facial {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--color-borde);
    background: #000;
    /* Efecto espejo: se siente más natural mirarse de frente que "invertido". */
    transform: scaleX(-1);
}

/* Número grande de cuenta regresiva antes de capturar el rostro (automático, sin botón) */
.cuenta-facial {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--color-acento);
    text-align: center;
    line-height: 1;
    margin-top: 0.6rem;
    min-height: 2.8rem;
}

.enlace-peligro {
    display: block;
    margin: 1rem auto 0;
    color: var(--color-rojo);
}

/* Página de Ayuda: buscador + secciones por tema */
.buscador-ayuda-caja {
    margin: 1rem 0 1.5rem;
}

.buscador-ayuda-envoltorio {
    position: relative;
    display: flex;
    align-items: center;
}

.icono-buscador-ayuda {
    position: absolute;
    left: 1.1rem;
    width: 19px;
    height: 19px;
    color: var(--color-texto-suave);
    pointer-events: none;
}

.buscador-ayuda {
    width: 100%;
    padding: 0.9rem 2.75rem 0.9rem 3rem;
    border: 1px solid var(--color-borde);
    border-radius: 999px;
    font-size: 1rem;
    background: var(--color-superficie);
    color: var(--color-texto);
    box-shadow: var(--sombra-tarjeta);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.buscador-ayuda::placeholder {
    color: var(--color-texto-suave);
}

.buscador-ayuda:focus {
    outline: none;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px rgba(30, 95, 191, 0.15);
}

/* Quita la "x" nativa de Chrome/Edge en <input type=search>: usamos un
   botón propio, con el mismo aspecto en todos los navegadores. */
.buscador-ayuda::-webkit-search-cancel-button,
.buscador-ayuda::-webkit-search-decoration {
    display: none;
}

.boton-limpiar-buscador-ayuda {
    position: absolute;
    right: 0.55rem;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--color-fondo);
    color: var(--color-texto-suave);
    cursor: pointer;
}

.boton-limpiar-buscador-ayuda svg {
    width: 14px;
    height: 14px;
}

.boton-limpiar-buscador-ayuda:hover {
    background: var(--color-borde);
    filter: none;
}

.contador-resultados-ayuda {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--color-texto-suave);
}

.titulo-grupo-ayuda {
    margin-top: 2rem;
}

.seccion-ayuda {
    margin-bottom: 1.5rem;
}

.seccion-ayuda h3 {
    font-size: 1rem;
    color: var(--color-texto-suave);
    margin: 0 0 0.5rem;
}

/* Acordeón nativo (<details>/<summary>) dentro de cada sección */
.lista-ayuda {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0 1.75rem;
}

.item-ayuda {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    padding: 0.25rem 1.25rem;
    box-shadow: var(--sombra-tarjeta);
}

.item-ayuda summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-primario);
    padding: 0.9rem 0;
    list-style: none;
}

.item-ayuda summary::-webkit-details-marker {
    display: none;
}

.item-ayuda summary::before {
    content: '+';
    display: inline-block;
    width: 1.2rem;
    color: var(--color-acento);
    font-weight: 700;
}

.item-ayuda[open] summary::before {
    content: '−';
}

.item-ayuda .cuerpo-ayuda {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-texto);
    padding: 0 0 1.1rem 1.2rem;
}

.item-ayuda .cuerpo-ayuda code {
    background: var(--color-fondo);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-size: 0.85rem;
}

/* Página de resultado tras escanear el QR */
.tarjeta-resultado {
    text-align: center;
}

.icono-resultado {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.tarjeta-exito .icono-resultado {
    color: var(--color-verde);
}

.tarjeta-error .icono-resultado {
    color: var(--color-rojo);
}

.mensaje-resultado {
    font-size: 1.05rem;
    color: var(--color-texto-suave);
}

/* ===================================================================
   Responsive: pantallas angostas (teléfonos)
   =================================================================== */
@media (max-width: 640px) {
    html {
        /* Vuelve a 16px reales en celulares: el aumento de tamaño
           general no se ve exagerado en pantallas chicas. */
        font-size: 100%;
    }

    .tarjeta,
    .tarjeta-kiosco {
        padding: 1.5rem;
        border-radius: 14px;
    }

    .tarjeta h1,
    .tarjeta-kiosco h1 {
        font-size: 1.25rem;
    }

    .panel,
    .panel-angosto {
        padding: 1.25rem 1rem;
    }

    .panel h1 {
        font-size: 1.3rem;
    }

    .barra-superior {
        padding: 0.85rem 1rem;
    }

    /* En móvil, marca + botón hamburguesa quedan en una sola fila; el
       menú se colapsa debajo y solo se muestra al abrir la hamburguesa
       (en vez de amontonar todos los enlaces envueltos como en escritorio). */
    .barra-superior-contenido {
        flex-wrap: wrap;
    }

    .boton-menu-movil {
        display: flex;
    }

    .menu-nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.5rem;
        margin-top: 0.9rem;
        order: 3;
    }

    .menu-nav.abierto {
        display: flex;
    }

    .menu-nav a {
        text-align: center;
    }

    .grupo-usuario {
        flex-direction: column;
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        padding-top: 0.6rem;
        margin-top: 0.3rem;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
    }

    .usuario-actual {
        display: block;
    }

    .filtros-form {
        flex-direction: column;
    }

    .filtros-form input,
    .filtros-form select,
    .filtros-form button {
        width: 100%;
    }

    .botones-exportar {
        flex-direction: column;
    }

    .botones-exportar .boton-enlace {
        text-align: center;
    }

    /* Tablas de datos -> tarjetas apiladas (Empleados, Reportes, Auditoría):
       cada fila pasa de columnas horizontales a pares etiqueta/valor
       verticales, así se elimina el scroll horizontal en celular. */
    .tabla-envoltorio {
        overflow-x: visible;
        border: none;
        box-shadow: none;
    }

    .tabla-datos,
    .tabla-datos tbody,
    .tabla-datos tr,
    .tabla-datos td {
        display: block;
        width: 100%;
    }

    .tabla-datos thead {
        display: none;
    }

    .tabla-datos tr {
        margin-bottom: 1rem;
        border: 1px solid var(--color-borde);
        border-radius: 12px;
        padding: 0.25rem 1rem;
        background: var(--color-superficie);
        box-shadow: var(--sombra-tarjeta);
    }

    .tabla-datos td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.65rem 0;
        border-bottom: 1px solid var(--color-borde);
        text-align: right;
    }

    .tabla-datos td:last-child {
        border-bottom: none;
    }

    .tabla-datos td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.8rem;
        color: var(--color-texto-suave);
        text-align: left;
        margin-right: 1rem;
        flex-shrink: 0;
    }

    /* La celda de acciones deja de ser fila flex (así se comportan las
       demás celdas transformadas a tarjeta): al quedar como bloque
       simple, el contenedor de íconos de abajo tiene un ancho fijo y
       predecible (100% de la celda), en vez de depender del ancho
       "de contenido" de un flex-item anidado, que en algunos
       navegadores móviles calculaba mal el wrap y terminaba
       superponiendo los íconos entre sí. */
    .tabla-datos td.celda-acciones {
        display: block;
        padding-top: 0.75rem;
    }

    .tabla-datos td.celda-acciones::before {
        content: none;
    }

    .tabla-datos td.celda-acciones .acciones-fila {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 420px) {
    .botones-accion {
        flex-direction: column;
    }
}