/* =============================================================
   Hoja de estilos central SORO.
   Define las variables de marca y los estilos base reutilizables.

   REGLA VISUAL FUNDAMENTAL:
   El amarillo (#F4B90D) es color de ACENTO, no de fondo dominante.
   Solo se usa en botones primarios, encabezados, indicadores
   activos y elementos de marca. El fondo dominante es blanco o
   casi-blanco; los textos van en negro suavizado. Esto protege
   la ergonomia visual de un sistema de uso prolongado.

   Mobile-first: los estilos base son para pantallas chicas;
   los breakpoints amplian cuando hay mas espacio.
   ============================================================= */


/* ----- Variables de marca SORO ----- */
:root {
    /* Paleta de colores */
    --color-primario:           #F4B90D;   /* amarillo dorado de ORO (acento) */
    --color-secundario:         #000000;   /* negro */
    --color-fondo:              #FFFFFF;   /* blanco */
    --color-fondo-suave:        #FAFAFA;   /* gris muy claro para tarjetas y secciones */
    --color-texto:              #1A1A1A;   /* negro suavizado para mejor lectura */
    --color-texto-secundario:   #555555;   /* gris medio */
    --color-borde:              #E0E0E0;   /* gris claro de borde */
    --color-exito:              #2E7D32;   /* verde mate */
    --color-error:              #B50000;   /* rojo de la paleta del grupo */

    /* Tipografia */
    --fuente-principal: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

    /* Espaciados estandar */
    --esp-xs:  0.25rem;   /*  4px */
    --esp-sm:  0.5rem;    /*  8px */
    --esp-md:  1rem;      /* 16px */
    --esp-lg:  1.5rem;    /* 24px */
    --esp-xl:  2.5rem;    /* 40px */

    /* Radios de borde */
    --radio-sm:  6px;
    --radio-md:  10px;
    --radio-lg:  16px;
}


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

html,
body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    font-family: var(--fuente-principal);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-texto);
    background-color: var(--color-fondo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ----- Pagina de login: layout ----- */
.login-pagina {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--esp-md);
    background-color: var(--color-fondo-suave);
}

.login-tarjeta {
    background-color: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    padding: var(--esp-xl) var(--esp-lg);
    width: 100%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}


/* ----- Bloque de marca dentro del login ----- */
.login-imagotipo {
    width: 96px;
    height: auto;
    margin: 0 auto var(--esp-md);
    display: block;
}

.login-marca {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 0 var(--esp-xs);
    color: var(--color-texto);
}

.login-descriptor {
    margin: 0 0 var(--esp-xl);
    color: var(--color-texto-secundario);
    font-size: 0.95rem;
    font-weight: 400;
}


/* ----- Bloque de error ----- */
.login-error {
    background-color: rgba(181, 0, 0, 0.05);
    color: var(--color-error);
    border: 1px solid rgba(181, 0, 0, 0.25);
    border-radius: var(--radio-sm);
    padding: var(--esp-sm) var(--esp-md);
    margin-bottom: var(--esp-md);
    font-size: 0.9rem;
    text-align: left;
}


/* ----- Formulario ----- */
.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--esp-md);
    text-align: left;
}

.campo label {
    display: block;
    margin-bottom: var(--esp-xs);
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-texto);
}

.campo input {
    width: 100%;
    padding: var(--esp-sm) var(--esp-md);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
    font-family: var(--fuente-principal);
    font-size: 1rem;
    color: var(--color-texto);
    background-color: var(--color-fondo);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.campo input:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(244, 185, 13, 0.20);
}


/* ----- Boton primario (acento amarillo) ----- */
.boton-primario {
    background-color: var(--color-primario);
    color: var(--color-secundario);
    border: none;
    border-radius: var(--radio-sm);
    padding: var(--esp-md);
    font-family: var(--fuente-principal);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: var(--esp-sm);
    transition: opacity 150ms ease, transform 80ms ease;
}

.boton-primario:hover {
    opacity: 0.92;
}

.boton-primario:active {
    transform: scale(0.99);
}

.boton-primario:focus-visible {
    outline: 3px solid rgba(244, 185, 13, 0.45);
    outline-offset: 2px;
}


/* ----- Pagina de inicio ----- */
.inicio-pagina {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--esp-md);
    background-color: var(--color-fondo-suave);
}

.inicio-tarjeta {
    background-color: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    padding: var(--esp-xl) var(--esp-lg);
    width: 100%;
    max-width: 480px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

.inicio-imagotipo {
    width: 80px;
    height: auto;
    margin: 0 auto var(--esp-md);
    display: block;
}

.inicio-saludo {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 var(--esp-xs);
    color: var(--color-texto);
}

/* Indicador discreto del rol del usuario debajo del saludo.
   Sirve para verificar visualmente que el rol llega del servidor;
   en pantallas futuras puede mostrarse aca u ocultarse. */
.inicio-rol {
    margin: 0 0 var(--esp-md);
    color: var(--color-texto-secundario);
    font-size: 0.85rem;
    font-weight: 500;
}

.inicio-descriptor {
    margin: 0 0 var(--esp-xl);
    color: var(--color-texto-secundario);
    font-size: 0.95rem;
}


/* ----- Boton secundario (sin amarillo) ----- */
/* Para acciones de menor jerarquia visual que el primario.
   Se usa, por ejemplo, en "Cerrar sesion": es una accion frecuente
   pero no la accion principal de la pagina. */
.boton-secundario {
    /* Sirve tanto para <button> como para <a> (links). */
    width: 100%;
    display: block;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
    padding: var(--esp-md);
    font-family: var(--fuente-principal);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.boton-secundario:hover {
    background-color: var(--color-fondo-suave);
}

.boton-secundario:focus-visible {
    outline: 3px solid rgba(244, 185, 13, 0.45);
    outline-offset: 2px;
}


/* ----- Pagina "Sin acceso" (HTTP 403) ----- */
/* Misma estructura visual que la pagina de inicio para coherencia,
   pero con el titulo en rojo de error para indicar denegacion. */
.sin-acceso-pagina {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--esp-md);
    background-color: var(--color-fondo-suave);
}

.sin-acceso-tarjeta {
    background-color: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    padding: var(--esp-xl) var(--esp-lg);
    width: 100%;
    max-width: 480px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

.sin-acceso-imagotipo {
    width: 72px;
    height: auto;
    margin: 0 auto var(--esp-md);
    display: block;
}

.sin-acceso-titulo {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 var(--esp-md);
    color: var(--color-error);
}

.sin-acceso-mensaje {
    margin: 0 0 var(--esp-xl);
    color: var(--color-texto-secundario);
    font-size: 0.95rem;
}


/* ----- Pantallas muy chicas: ajustes ----- */
@media (max-width: 480px) {
    .login-tarjeta,
    .inicio-tarjeta,
    .sin-acceso-tarjeta {
        padding: var(--esp-lg) var(--esp-md);
        border-radius: var(--radio-md);
    }

    .login-imagotipo,
    .inicio-imagotipo,
    .sin-acceso-imagotipo {
        width: 64px;
    }

    .login-marca {
        font-size: 2rem;
    }

    .inicio-saludo,
    .sin-acceso-titulo {
        font-size: 1.25rem;
    }
}


/* =============================================================
   MODULO DE EMPLEADOS — Formulario de alta (Paso 12)
   Clases nuevas. No modifican nada de lo anterior; solo reutilizan
   las variables de marca (--color-*, --esp-*, --radio-*).
   Mobile-first: una columna por defecto; dos columnas en pantallas
   anchas con el breakpoint de min-width.
   ============================================================= */

/* ----- Layout de la pagina del formulario ----- */
/* A diferencia del login (centrado vertical), el formulario es alto:
   se ancla arriba y deja respirar con padding. */
.form-pagina {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--esp-lg) var(--esp-md);
    background-color: var(--color-fondo-suave);
}

/* Contenedor mas ancho que la tarjeta de login: el alta tiene muchos
   campos y en pantallas anchas se reparten en dos columnas. */
.form-empleado {
    background-color: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    padding: var(--esp-xl) var(--esp-lg);
    width: 100%;
    max-width: 760px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}


/* ----- Encabezado de marca del formulario ----- */
.form-encabezado {
    text-align: center;
    margin-bottom: var(--esp-lg);
}

.form-imagotipo {
    width: 72px;
    height: auto;
    margin: 0 auto var(--esp-sm);
    display: block;
}

.form-titulo {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 var(--esp-xs);
    color: var(--color-texto);
}

.form-subtitulo {
    margin: 0;
    color: var(--color-texto-secundario);
    font-size: 0.9rem;
}

/* Asterisco de campo obligatorio: el amarillo de acento, en negrita. */
.obligatorio {
    color: var(--color-primario);
    font-weight: 700;
}


/* ----- Cuadro de exito (verde) ----- */
.form-exito {
    background-color: rgba(46, 125, 50, 0.08);
    color: var(--color-exito);
    border: 1px solid rgba(46, 125, 50, 0.30);
    border-radius: var(--radio-sm);
    padding: var(--esp-sm) var(--esp-md);
    margin-bottom: var(--esp-md);
    font-size: 0.95rem;
    font-weight: 500;
}


/* ----- Cuadro de errores (rojo, con lista) ----- */
.form-errores {
    background-color: rgba(181, 0, 0, 0.05);
    color: var(--color-error);
    border: 1px solid rgba(181, 0, 0, 0.25);
    border-radius: var(--radio-sm);
    padding: var(--esp-sm) var(--esp-md);
    margin-bottom: var(--esp-md);
    font-size: 0.9rem;
}

.form-errores-titulo {
    margin: 0 0 var(--esp-xs);
    font-weight: 700;
}

.form-errores ul {
    margin: 0;
    padding-left: var(--esp-lg);
}

.form-errores li {
    margin-bottom: var(--esp-xs);
}


/* ----- Secciones del formulario (fieldset + legend) ----- */
.form-seccion {
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    padding: var(--esp-md);
    margin: 0 0 var(--esp-lg);
}

.form-seccion legend {
    padding: 0 var(--esp-sm);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-texto);
}


/* ----- Grilla de campos: 1 columna en movil ----- */
.grid-campos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--esp-md);
}


/* ----- Los <select> heredan el mismo estilo que los <input> ----- */
/* La regla .campo input ya existe; aca extendemos lo mismo a select para
   que ambos se vean iguales sin duplicar la regla de input. */
.campo select {
    width: 100%;
    padding: var(--esp-sm) var(--esp-md);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
    font-family: var(--fuente-principal);
    font-size: 1rem;
    color: var(--color-texto);
    background-color: var(--color-fondo);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.campo select:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(244, 185, 13, 0.20);
}


/* ----- Acciones (botones) al pie del formulario ----- */
.form-acciones {
    display: flex;
    flex-direction: column;
    gap: var(--esp-sm);
}

/* El boton primario tiene margin-top propio (heredado del login) que aca
   no hace falta porque el gap del contenedor ya separa. */
.form-acciones .boton-primario {
    margin-top: 0;
}


/* ----- Pantallas anchas: dos columnas y botones lado a lado ----- */
@media (min-width: 640px) {
    .grid-campos {
        grid-template-columns: 1fr 1fr;
    }

    /* El nombre completo ocupa el ancho completo (la fila entera). */
    .grid-campos .campo-ancho {
        grid-column: 1 / -1;
    }

    .form-acciones {
        flex-direction: row;
        justify-content: flex-start;
    }

    .form-acciones .boton-primario,
    .form-acciones .boton-secundario {
        width: auto;
        min-width: 200px;
    }
}


/* =============================================================
   CARGA MASIVA — Reporte de previsualizacion (Pieza 2)
   Estilos del resumen y de la tabla de filas con error. Solo se
   agregan; no modifican nada anterior. Reutilizan las variables
   de marca y conviven con .form-exito / .form-errores existentes.
   ============================================================= */

/* Linea de resumen del reporte (totales). */
.reporte-resumen {
    margin: 0 0 var(--esp-md);
    color: var(--color-texto-secundario);
    font-size: 0.9rem;
}

/* Formulario de subida: un poco de aire arriba cuando va debajo de un
   reporte o de un mensaje de resultado. */
.form-subida {
    margin-top: var(--esp-lg);
}

/* Tabla del reporte de errores. Mobile-first: si no cabe en pantallas muy
   chicas, se puede desplazar en horizontal dentro de su propio scroll. */
.tabla-reporte {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--esp-lg);
    font-size: 0.9rem;
}

.tabla-reporte thead th {
    background-color: var(--color-fondo-suave);
    color: var(--color-texto);
    font-weight: 700;
    text-align: left;
    padding: var(--esp-sm) var(--esp-md);
    border-bottom: 2px solid var(--color-borde);
}

.tabla-reporte td {
    padding: var(--esp-sm) var(--esp-md);
    border-bottom: 1px solid var(--color-borde);
    vertical-align: top;
    /* Permite que palabras largas (correos, documentos) no rompan el ancho. */
    overflow-wrap: anywhere;
}

/* Columna del numero de fila: angosta y centrada. */
.tabla-reporte .celda-fila {
    text-align: center;
    font-weight: 700;
    white-space: nowrap;
    color: var(--color-error);
}

/* Lista de problemas dentro de una celda. */
.lista-problemas {
    margin: 0;
    padding-left: var(--esp-md);
}

.lista-problemas li {
    margin-bottom: var(--esp-xs);
    color: var(--color-error);
}


/* =============================================================
   EMPLEADOS — Lista, filtros y ficha de detalle (Pieza 3)
   Primera TABLA del proyecto: mobile-first, se ve como TARJETAS en
   el teléfono y como TABLA en pantallas anchas (mismo HTML, lo cambia
   el CSS). Solo se agrega; no se modifica nada anterior. El amarillo
   sigue siendo acento, nunca fondo dominante.
   ============================================================= */

/* ----- Permitir .boton-primario en enlaces (<a>), no solo <button> ----- */
a.boton-primario {
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
}

/* En la pantalla de inicio, el acceso a Empleados va a ancho completo,
   igual que el botón de cerrar sesión. */
.inicio-nav {
    margin-bottom: var(--esp-md);
}

.inicio-nav .boton-primario {
    display: block;
    width: 100%;
    margin-top: 0;
}


/* ----- Contenedor de la lista (más ancho que la tarjeta de formulario) ----- */
.lista-contenedor {
    background-color: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    padding: var(--esp-xl) var(--esp-lg);
    width: 100%;
    max-width: 980px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

/* Accesos rápidos arriba de la lista (Nuevo, Carga masiva, Inicio). */
.lista-acciones-top {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-sm);
    margin-bottom: var(--esp-md);
}

.lista-acciones-top .boton-primario,
.lista-acciones-top .boton-secundario {
    width: auto;
    margin-top: 0;
}


/* ----- Barra de filtros: apilada en móvil, en línea en pantalla ancha ----- */
.filtros-empleados {
    display: flex;
    flex-direction: column;
    gap: var(--esp-md);
    margin-bottom: var(--esp-lg);
    padding: var(--esp-md);
    background-color: var(--color-fondo-suave);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
}

.filtros-botones {
    display: flex;
    gap: var(--esp-sm);
}

@media (min-width: 720px) {
    .filtros-empleados {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .filtros-empleados .campo {
        flex: 1 1 12rem;
    }

    .filtros-botones {
        align-items: center;
    }

    .lista-acciones-top .boton-primario,
    .lista-acciones-top .boton-secundario,
    .filtros-botones .boton-primario,
    .filtros-botones .boton-secundario {
        width: auto;
        min-width: 0;
    }
}


/* ----- Mensaje de lista vacía ----- */
.lista-vacia {
    color: var(--color-texto-secundario);
    text-align: center;
    padding: var(--esp-lg);
}


/* ----- Tabla de datos: TARJETAS en móvil (caso base, mobile-first) ----- */
.tabla-datos {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--esp-md);
    font-size: 0.95rem;
}

/* En móvil ocultamos la cabecera: cada celda lleva su etiqueta (data-label). */
.tabla-datos thead {
    display: none;
}

/* Cada fila es una tarjeta. */
.tabla-datos tr {
    display: block;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    padding: var(--esp-sm) var(--esp-md);
    margin-bottom: var(--esp-md);
    background-color: var(--color-fondo);
}

/* Cada celda: etiqueta a la izquierda (via ::before) y valor a la derecha. */
.tabla-datos td {
    display: flex;
    justify-content: space-between;
    gap: var(--esp-md);
    padding: var(--esp-xs) 0;
    text-align: right;
    overflow-wrap: anywhere;
}

.tabla-datos td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--color-texto-secundario);
    text-align: left;
}

/* Fila vigente (historial): acento amarillo a la izquierda de la tarjeta. */
.tabla-datos tr.fila-vigente {
    border-left: 4px solid var(--color-primario);
}


/* ----- Tabla de datos: TABLA real en pantallas anchas ----- */
@media (min-width: 720px) {
    .tabla-datos thead {
        display: table-header-group;
    }

    .tabla-datos tr {
        display: table-row;
        border: none;
        border-radius: 0;
        padding: 0;
        margin: 0;
        background-color: transparent;
    }

    .tabla-datos th,
    .tabla-datos td {
        display: table-cell;
        text-align: left;
        padding: var(--esp-sm) var(--esp-md);
        border-bottom: 1px solid var(--color-borde);
        overflow-wrap: anywhere;
    }

    .tabla-datos td::before {
        content: none; /* en tabla, las etiquetas las da el <thead> */
    }

    .tabla-datos thead th {
        background-color: var(--color-fondo-suave);
        font-weight: 700;
        border-bottom: 2px solid var(--color-borde);
    }

    .tabla-datos tbody tr:hover {
        background-color: var(--color-fondo-suave);
    }

    /* Fila vigente en tabla: fondo amarillo muy tenue (acento, no dominante). */
    .tabla-datos tr.fila-vigente {
        border-left: none;
    }

    .tabla-datos tr.fila-vigente td {
        background-color: rgba(244, 185, 13, 0.10);
    }
}


/* ----- Insignia de estado (activo / inactivo) ----- */
.estado-activo,
.estado-inactivo {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.estado-activo {
    background-color: rgba(46, 125, 50, 0.12);
    color: var(--color-exito);
}

.estado-inactivo {
    background-color: rgba(181, 0, 0, 0.08);
    color: var(--color-error);
}


/* ----- Enlace "Ver ficha" de la columna de acciones ----- */
.enlace-ver {
    color: var(--color-texto);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

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


/* ----- Ficha de detalle (solo lectura) ----- */
.ficha-empleado {
    background-color: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    padding: var(--esp-xl) var(--esp-lg);
    width: 100%;
    max-width: 820px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

.ficha-seccion {
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    padding: var(--esp-md);
    margin: 0 0 var(--esp-lg);
}

.ficha-seccion h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 var(--esp-md);
    color: var(--color-texto);
}

/* Pares etiqueta/valor: una columna en móvil, dos en pantalla ancha. */
.ficha-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--esp-md);
    margin: 0;
}

.ficha-par dt {
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
    margin-bottom: 2px;
}

.ficha-par dd {
    margin: 0;
    font-size: 1rem;
    color: var(--color-texto);
    overflow-wrap: anywhere;
}

@media (min-width: 640px) {
    .ficha-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.ficha-acciones {
    margin-top: var(--esp-md);
}


/* ----- Migas de pan (navegación entre pantallas del módulo) ----- */
.migas {
    margin-bottom: var(--esp-lg);
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
}

.migas a {
    color: var(--color-texto-secundario);
    text-decoration: none;
}

.migas a:hover {
    color: var(--color-texto);
    text-decoration: underline;
}

.migas-sep {
    margin: 0 var(--esp-xs);
    color: var(--color-borde);
}

.migas-actual {
    color: var(--color-texto);
    font-weight: 700;
}


/* =============================================================
   EMPLEADOS — Editar / Inactivar / Eliminar (Pieza 4)
   Solo se agrega; no se modifica nada anterior.
   ============================================================= */

/* ----- Campos bloqueados (documento, fecha de ingreso) y notas ----- */
.campo input[readonly] {
    background-color: var(--color-fondo-suave);
    color: var(--color-texto-secundario);
    cursor: not-allowed;
}

.campo-bloqueado {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-texto-secundario);
}

.campo-nota {
    margin: var(--esp-xs) 0 0;
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
}

/* Campos de vigencia de salario/sede: un leve realce para distinguir que
   son condicionales (aparecen al cambiar el valor). */
.cambio-salario,
.cambio-sede {
    background-color: rgba(244, 185, 13, 0.06);
    border-radius: var(--radio-sm);
    padding: var(--esp-sm);
}


/* ----- Bloque de acciones del detalle ----- */
.acciones-empleado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-sm);
    margin: var(--esp-md) 0 var(--esp-lg);
}

/* Los <form> de inactivar/reactivar no deben romper la fila de botones. */
.acciones-empleado form {
    margin: 0;
}

.acciones-empleado .boton-primario,
.acciones-empleado .boton-secundario {
    width: auto;
    margin-top: 0;
}


/* ----- Botón de peligro (acción destructiva) ----- */
.boton-peligro {
    width: 100%;
    box-sizing: border-box;
    display: block;
    text-align: center;
    background-color: var(--color-error);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radio-sm);
    padding: var(--esp-md);
    font-family: var(--fuente-principal);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 150ms ease;
}

.boton-peligro:hover {
    opacity: 0.92;
}

.boton-peligro:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.boton-peligro:focus-visible {
    outline: 3px solid rgba(181, 0, 0, 0.4);
    outline-offset: 2px;
}

@media (min-width: 640px) {
    .boton-peligro {
        width: auto;
        display: inline-block;
    }
}


/* ----- Zona de confirmación de borrado (tono de advertencia, sin gritar) ----- */
.confirmar-borrado {
    border: 1px solid rgba(181, 0, 0, 0.30);
    border-radius: var(--radio-md);
    padding: var(--esp-md);
    margin-top: var(--esp-lg);
    background-color: rgba(181, 0, 0, 0.03);
}

.confirmar-borrado h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 var(--esp-sm);
    color: var(--color-error);
}

.confirmar-borrado-aviso {
    margin: 0 0 var(--esp-md);
    font-size: 0.9rem;
    color: var(--color-texto-secundario);
}


/* ----- Barra de acciones fija (sticky) para formularios largos ----- */
/* Mantiene "Guardar / Cancelar" siempre visibles al pie de la pantalla,
   para no tener que recorrer todos los campos hasta el final. Es CSS puro
   (sin JavaScript). Se queda pegada abajo mientras se hace scroll y se
   integra al final del formulario. Los botones van en una sola fila
   (incluso en móvil) para que la barra sea compacta. */
.barra-acciones-fija {
    position: sticky;
    bottom: 0;
    z-index: 5;
    flex-direction: row;
    gap: var(--esp-sm);
    margin-top: var(--esp-lg);
    padding: var(--esp-md) 0;
    background-color: var(--color-fondo);
    border-top: 1px solid var(--color-borde);
}

.barra-acciones-fija .boton-primario,
.barra-acciones-fija .boton-secundario {
    flex: 1;
    width: auto;
    margin-top: 0;
}


/* =============================================================
   PLANTILLA BASE DE LA APP — header + menú de módulos
   Envoltorio común de las pantallas autenticadas (cabecera.ejs +
   menu.ejs + pie.ejs). Mobile-first: menú colapsado en hamburguesa
   (solo CSS) en el teléfono, fila horizontal en escritorio. El
   amarillo solo como acento del módulo activo. No modifica el
   contenido (formularios, tablas, fichas).
   ============================================================= */

/* ----- Layout general: header arriba, contenido centrado debajo ----- */
.pagina-app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--color-fondo-suave);
}

.contenido-app {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--esp-md);
}


/* ----- Header de la app ----- */
.encabezado-app {
    position: relative; /* ancla del menú desplegable (absolute) en móvil */
    display: flex;
    align-items: center;
    gap: var(--esp-md);
    padding: var(--esp-sm) var(--esp-md);
    background-color: var(--color-fondo);
    border-bottom: 1px solid var(--color-borde);
}

.encabezado-marca {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-sm);
    text-decoration: none;
    color: var(--color-texto);
}

.encabezado-isotipo {
    width: 32px;
    height: auto;
    display: block;
}

.encabezado-nombre {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
}

.encabezado-usuario {
    margin-left: auto; /* empuja el usuario/logout a la derecha */
    display: flex;
    align-items: center;
    gap: var(--esp-sm);
}

.encabezado-usuario-nombre {
    display: none; /* en móvil se oculta para no apretar el header */
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
}

/* Botón con apariencia de enlace (para "Cerrar sesión", que es un form POST). */
.boton-enlace {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--fuente-principal);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-texto-secundario);
    text-decoration: underline;
}

.boton-enlace:hover {
    color: var(--color-texto);
}


/* ----- Menú de módulos: MÓVIL (hamburguesa, solo CSS) ----- */
.menu-checkbox {
    display: none; /* el checkbox controla el desplegado; lo abre el <label> */
}

.menu-hamburguesa {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-texto);
    user-select: none;
}

.menu-lista {
    display: none; /* oculto hasta abrir la hamburguesa */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    flex-direction: column;
    gap: var(--esp-xs);
    list-style: none;
    margin: 0;
    padding: var(--esp-sm) var(--esp-md);
    background-color: var(--color-fondo);
    border-bottom: 1px solid var(--color-borde);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
}

/* Al tocar la hamburguesa (marcar el checkbox), se muestra la lista. */
.menu-checkbox:checked ~ .menu-lista {
    display: flex;
}

.menu-enlace {
    display: block;
    padding: var(--esp-sm);
    text-decoration: none;
    color: var(--color-texto);
    font-weight: 500;
    border-radius: var(--radio-sm);
}

.menu-enlace:hover {
    background-color: var(--color-fondo-suave);
}

.menu-enlace.activo {
    font-weight: 700;
    border-left: 3px solid var(--color-primario); /* acento en móvil */
}


/* ----- Menú de módulos: ESCRITORIO (fila horizontal) ----- */
@media (min-width: 720px) {
    .menu-hamburguesa {
        display: none;
    }

    .menu-lista {
        display: flex;
        position: static;
        flex-direction: row;
        gap: var(--esp-md);
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
    }

    .menu-enlace {
        padding: var(--esp-xs) 0;
        border-radius: 0;
    }

    .menu-enlace:hover {
        background: none;
        text-decoration: underline;
    }

    .menu-enlace.activo {
        border-left: none;
        border-bottom: 2px solid var(--color-primario); /* acento abajo */
    }

    .encabezado-usuario-nombre {
        display: inline;
    }
}


/* =============================================================
   CONSTANCIA LABORAL (previsualización del certificado en PDF)
   La tarjeta ".constancia-doc" imita una hoja de papel para que el
   usuario lea el documento tal como saldrá en el PDF antes de bajarlo.
   ============================================================= */

.constancia-pagina {
    width: 100%;
    max-width: 820px;
}

/* Controles: la casilla "incluir salario" + (sin JS) botón actualizar. */
.constancia-controles {
    display: flex;
    align-items: center;
    gap: var(--esp-md);
    flex-wrap: wrap;
    margin-bottom: var(--esp-lg);
    padding: var(--esp-md);
    background: var(--color-fondo-suave);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
}

.constancia-check {
    display: flex;
    align-items: center;
    gap: var(--esp-sm);
    cursor: pointer;
    font-weight: 500;
}

.constancia-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primario); /* el check usa el amarillo de marca */
}

/* La "hoja" del documento. */
.constancia-doc {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    padding: var(--esp-xl);
    color: var(--color-texto);
    line-height: 1.6;
}

.constancia-membrete {
    text-align: right;
    padding-bottom: var(--esp-md);
    margin-bottom: var(--esp-lg);
}

.constancia-empresa {
    margin: 0;
    font-size: 1.5rem;
    color: var(--color-secundario);
}

.constancia-nit {
    margin: var(--esp-xs) 0 0;
    color: var(--color-texto-secundario);
    font-size: 0.9rem;
}

.constancia-fecha {
    margin-bottom: var(--esp-lg);
}

.constancia-destinatario,
.constancia-asunto {
    margin-bottom: var(--esp-md);
}

/* Párrafos del cuerpo: justificados, como el documento formal. */
.constancia-parrafo {
    margin-bottom: var(--esp-md);
    text-align: justify;
}

/* Bloque de firma: espacio en blanco (o futura imagen) + línea + datos. */
.constancia-firma {
    margin-top: var(--esp-xl);
}

.constancia-firma-espacio {
    height: 60px; /* espacio para firmar a mano / sello, igual que el PDF */
}

.constancia-firma-linea {
    width: 240px;
    max-width: 100%;
    border-top: 1px solid var(--color-secundario);
    margin: 0 0 var(--esp-xs);
}

.constancia-firmante-nombre {
    margin: 0;
}

.constancia-firma p {
    margin: 0;
}

.constancia-acciones {
    display: flex;
    gap: var(--esp-md);
    flex-wrap: wrap;
    margin-top: var(--esp-lg);
}

@media (max-width: 480px) {
    .constancia-doc {
        padding: var(--esp-lg);
    }
}


/* =============================================================
   ADMINISTRACIÓN (roles, permisos y usuarios)
   ============================================================= */

.admin-pagina {
    width: 100%;
    max-width: 820px;
}

/* Tarjetas de la landing de administración. */
.admin-tarjetas {
    display: grid;
    gap: var(--esp-md);
    grid-template-columns: 1fr;
}

.admin-tarjeta {
    display: block;
    padding: var(--esp-lg);
    background: var(--color-fondo-suave);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    text-decoration: none;
    color: var(--color-texto);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.admin-tarjeta:hover {
    border-color: var(--color-primario);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.admin-tarjeta h2 {
    margin: 0 0 var(--esp-xs);
    font-size: 1.2rem;
}

.admin-tarjeta p {
    margin: 0;
    color: var(--color-texto-secundario);
}

@media (min-width: 640px) {
    .admin-tarjetas {
        grid-template-columns: 1fr 1fr;
    }
}

/* Matriz de permisos: un grupo (fieldset) por recurso, con casillas. */
.permisos-intro {
    color: var(--color-texto-secundario);
    margin-bottom: var(--esp-md);
}

.permisos-grupo {
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    padding: var(--esp-md);
    margin-bottom: var(--esp-md);
}

.permisos-grupo legend {
    font-weight: 700;
    padding: 0 var(--esp-sm);
}

/* Cada permiso: casilla + nombre técnico + descripción legible. */
.permiso-item {
    display: flex;
    align-items: flex-start;
    gap: var(--esp-sm);
    padding: var(--esp-sm) 0;
    cursor: pointer;
}

.permiso-item input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--color-primario);
    flex-shrink: 0;
}

.permiso-texto {
    display: flex;
    flex-direction: column;
}

/* Etiqueta PRINCIPAL del permiso: la descripción legible. */
.permiso-desc {
    color: var(--color-texto);
    font-size: 1rem;
    font-weight: 500;
}

/* Nombre técnico (recurso.accion): secundario, chiquito y gris, solo como
   referencia. La descripción de arriba es lo que el usuario lee para decidir. */
.permiso-nombre {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
}

/* Formulario "en línea": un campo + su botón. Apilado en móvil, en fila y
   alineado al pie en pantallas anchas. Lo usan las acciones del detalle de
   usuario (cambiar rol, restablecer contraseña). */
.form-linea {
    display: flex;
    flex-direction: column;
    gap: var(--esp-sm);
}

.form-linea .campo {
    margin: 0;
}

@media (min-width: 560px) {
    .form-linea {
        flex-direction: row;
        align-items: flex-end;
        gap: var(--esp-md);
    }

    .form-linea .campo {
        flex: 1;
    }
}


/* =============================================================
   AUDITORÍA (Paso 20)
   Detalle (antes/después) legible dentro de la tabla y paginación.
   Reutiliza .tabla-datos y .filtros-empleados; solo agrega lo propio.
   ============================================================= */

/* El detalle puede tener varias líneas (salario, sede, permisos...). Se
   muestran apiladas, en tono secundario y un poco más chicas. */
.auditoria-detalle {
    display: flex;
    flex-direction: column;
    gap: var(--esp-xs);
}

.auditoria-detalle-linea {
    font-size: 0.9rem;
    color: var(--color-texto-secundario);
}

/* La columna de detalle puede ser larga: que respire y parta líneas. */
.tabla-auditoria td[data-label="Detalle"] {
    min-width: 16rem;
    white-space: normal;
}

/* Paginación: anterior / info / siguiente, centradas. */
.paginacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-md);
    margin-top: var(--esp-lg);
}

.paginacion-info {
    color: var(--color-texto-secundario);
    font-size: 0.95rem;
}

/* Botón de página deshabilitado (primera/última): se ve apagado y sin clic. */
.paginacion-deshabilitado {
    opacity: 0.45;
    pointer-events: none;
}


/* Texto de ayuda bajo un campo (ej. la pista de la llave en el formulario). */
.campo-ayuda {
    display: block;
    margin-top: var(--esp-xs);
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
}


/* =============================================================
   NÓMINA — Conceptos (Paso 23)
   Pequeños ajustes; reutiliza tabla-datos, form-empleado, etc.
   ============================================================= */

/* Varias acciones en una celda de tabla, en línea y que envuelven en móvil. */
.acciones-fila {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-sm);
    align-items: center;
}
.acciones-fila form {
    margin: 0;
}

/* Botón con aspecto de enlace para acciones tipo "Desactivar/Quitar" (un
   <button> dentro de un <form> POST). En rojo sobrio (acción de baja). */
.boton-texto {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--color-error);
    cursor: pointer;
    text-decoration: underline;
}
.boton-texto:hover {
    text-decoration: none;
}

/* Campo de tipo checkbox: la casilla y su etiqueta en una sola línea. */
.campo-checkbox label {
    display: flex;
    align-items: center;
    gap: var(--esp-sm);
    font-weight: 500;
}

/* Subtítulo de una sección dentro de una pantalla de lista. */
.seccion-titulo {
    margin-top: var(--esp-xl);
}

/* Lista de empleados con casillas (asignación de conceptos en lote). */
.lista-checks {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
    padding: var(--esp-sm);
    margin-top: var(--esp-sm);
}
.check-empleado {
    display: flex;
    align-items: center;
    gap: var(--esp-sm);
    padding: var(--esp-xs) var(--esp-sm);
    border-radius: var(--radio-sm);
    cursor: pointer;
}
.check-empleado:hover {
    background: var(--color-fondo-suave);
}
.check-todos {
    border-bottom: 1px solid var(--color-borde);
    margin-bottom: var(--esp-xs);
    border-radius: 0;
}
.check-doc {
    color: var(--color-texto-secundario);
}
/* Insignia "ya recurrente" alineada a la derecha de la fila. */
.badge-ya {
    margin-left: auto;
    font-size: 0.75rem;
    background: var(--color-fondo-suave);
    color: var(--color-texto-secundario);
    border: 1px solid var(--color-borde);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    white-space: nowrap;
}

/* Sub-navegación de un módulo (pestañas internas, ej. Nómina: Conceptos | Pagos). */
.sub-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-xs);
    border-bottom: 1px solid var(--color-borde);
    margin-bottom: var(--esp-lg);
}
.sub-nav-item {
    display: inline-block;
    padding: var(--esp-sm) var(--esp-md);
    text-decoration: none;
    color: var(--color-texto-secundario);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.sub-nav-item:hover {
    color: var(--color-texto);
}
.sub-nav-item.activo {
    color: var(--color-texto);
    font-weight: 600;
    border-bottom-color: var(--color-primario);
}


/* =============================================================
   CORRIDAS DE PAGO (nómina sub-pieza 2)
   ============================================================= */

/* Insignia de estado de una corrida (borrador / generado / pagado). */
.estado-corrida {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}
.estado-corrida.estado-borrador {
    background-color: var(--color-fondo-suave);
    color: var(--color-texto-secundario);
    border: 1px solid var(--color-borde);
}
.estado-corrida.estado-generado {
    background-color: rgba(244, 185, 13, 0.18);
    color: #8a6d00;
}
.estado-corrida.estado-pagado {
    background-color: rgba(46, 125, 50, 0.12);
    color: var(--color-exito);
}

/* Barra de filtros de la lista de corridas. */
.filtros-barra {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-md);
    align-items: flex-end;
    margin-bottom: var(--esp-lg);
    padding: var(--esp-md);
    background-color: var(--color-fondo-suave);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
}
.filtros-acciones {
    display: flex;
    gap: var(--esp-sm);
    align-items: center;
}

/* Barra de botones de transición de estado de la corrida. */
.acciones-estado {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-sm);
    align-items: center;
    margin-bottom: var(--esp-lg);
}

/* Formularios que deben quedar en línea (sin ocupar todo el ancho). */
.form-inline {
    display: inline;
    margin: 0;
}

/* Edición de valor inline dentro de la fila de un renglón. */
.form-valor-inline {
    display: flex;
    gap: var(--esp-xs);
    align-items: center;
    margin: 0;
}
.form-valor-inline input[type="number"] {
    width: 9rem;
    max-width: 100%;
}

/* Total de la corrida. */
.total-corrida {
    font-size: 1.05rem;
    margin: 0 0 var(--esp-md);
}

/* Barra de impresión de colillas seleccionadas. */
.imprimir-barra {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-sm);
    align-items: center;
    margin-bottom: var(--esp-md);
}


/* Grupo de un empleado dentro de una corrida (sus conceptos + su neto). */
.grupo-empleado {
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    margin-bottom: var(--esp-md);
    overflow: hidden;
}
.grupo-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-sm);
    padding: var(--esp-sm) var(--esp-md);
    background-color: var(--color-fondo-suave);
    border-bottom: 1px solid var(--color-borde);
}
.grupo-nombre {
    font-weight: 600;
}
.grupo-subtotal {
    margin-left: auto;
    font-weight: 700;
    white-space: nowrap;
}
/* La tabla de conceptos dentro de un grupo no necesita su propio borde externo. */
.tabla-renglones {
    margin: 0;
}

/* Etiqueta suma/resta junto al concepto. */
.naturaleza-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    margin-left: var(--esp-xs);
    vertical-align: middle;
}
.naturaleza-devengado {
    background-color: rgba(46, 125, 50, 0.12);
    color: var(--color-exito);
}
.naturaleza-deduccion {
    background-color: rgba(181, 0, 0, 0.08);
    color: var(--color-error);
}