:root {
    --color-primario: #0A1F44;
    --color-secundario: #123A70;
    --color-acento: #1E5FBF;
    --color-texto: #16213E;
    --color-texto-suave: #5B6B8C;
    --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);
}

.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: 4.5rem;
}

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

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

.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"] {
    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;
}

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);
}

/* 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;
}

.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 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
}

.marca {
    font-weight: 700;
    color: var(--color-primario);
    display: flex;
    align-items: center;
}

.logo-marca {
    height: 34px;
    width: auto;
    display: block;
}

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

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

.menu-nav a {
    display: inline-block;
    color: var(--color-primario);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: #EEF2FA;
    border: 1px solid var(--color-borde);
    transition: background 0.15s ease, transform 0.15s ease;
}

.menu-nav a:hover {
    background: #E1E9F9;
    transform: translateY(-1px);
}

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

.menu-nav a.enlace-destacado:hover {
    filter: brightness(1.1);
}

.usuario-actual {
    color: var(--color-texto-suave);
    font-size: 0.85rem;
    margin-left: 0.25rem;
}

.form-logout button {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 999px;
    color: var(--color-primario);
    background: #EEF2FA;
    border: 1px solid var(--color-borde);
}

.form-logout button:hover {
    filter: none;
    color: #991B1B;
    background: var(--color-rojo-suave);
    border-color: rgba(220, 38, 38, 0.35);
}

/* 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-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-top: 1.75rem;
}

.tarjeta-panel {
    display: block;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-top: 3px 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;
}

.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 {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    color: var(--color-primario);
}

.tarjeta-panel p {
    margin: 0;
    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), CSV en ámbar, para distinguirlos de un vistazo */
.botones-exportar .boton-enlace--excel {
    background: var(--color-verde);
}

.botones-exportar .boton-enlace--csv {
    background: var(--color-ambar);
}

/* 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;
}

.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);
}

/* 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);
}

.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;
    padding: 1.5rem 1rem;
    font-size: 1.2rem;
    border-radius: 14px;
}

/* 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);
}

.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;
}

.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;
}

/* 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;
    }

    .menu-nav {
        gap: 0.85rem;
        width: 100%;
        justify-content: space-between;
    }

    .usuario-actual {
        display: none; /* ya se ve reflejado en el saludo de cada pantalla */
    }

    .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;
    }

    .tabla-datos td.celda-acciones {
        justify-content: flex-end;
    }

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

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