/*
    ══════════════════════════════════════════════════════════════════════════
    RECURSOS HUMANOS — lo que sólo es de este módulo
    ══════════════════════════════════════════════════════════════════════════

    El formato —cabecera, sello, filtros, franja de indicadores, tarjeta de alto
    de ventana, ficha emergente, esqueleto, vacío— vive en pantalla.css con el
    prefijo .pan-, y es el mismo de facturas, presupuestos, inventario y activos
    fijos. Aquí va únicamente lo que no se puede escribir sin saber que se está
    hablando de personas y de planillas: la fotografía del expediente, el
    semáforo de lo que falta en la ficha, la línea de tiempo de una plaza y el
    comparador de quincenas.

    Se carga DESPUÉS de pantalla.css en index.html, que es lo que permite que
    las pistas de aquí ganen a las de allá sin recurrir a !important.

    Regla de oro del módulo: si una regla lleva el nombre de un dato del
    negocio —«expediente», «quincena», «antigüedad»— va aquí. Si describe una
    cabecera, un indicador o una celda, va en pantalla.css y la usan todas.
*/

/* ═══════════════════ Rejillas de filtros ═══════════════════ */

/*
    Colaboradores: siete pistas. «Pendiente» es la ancha de las cortas porque
    sus opciones son frases —«sin cuenta bancaria», «salario bajo el mínimo»— y
    recortarla obligaría a abrir el desplegable para leer lo ya elegido.
*/
.rrhh-filtros-colab {
    grid-template-columns:
        auto                 /* Estado: VIGENTES · TODOS · BAJAS */
        minmax(150px, 1fr)   /* Grupo de planilla */
        minmax(150px, 1fr)   /* Puesto */
        176px                /* Pendiente */
        minmax(170px, 1.2fr) /* Búsqueda */
        auto;                /* Acciones */
}

/* Planillas: el año es un número corto y no merece una pista de 150 px. */
.rrhh-filtros-planillas {
    grid-template-columns:
        104px                /* Año */
        minmax(170px, 1fr)   /* Grupo de planilla */
        minmax(150px, 1fr)   /* Quincena */
        200px                /* Pendiente */
        auto;                /* Acciones */
}

@media (max-width: 1400px) {
    .rrhh-filtros-colab {
        grid-template-columns: auto minmax(130px, 1fr) minmax(130px, 1fr) 160px 1fr auto;
    }

    .rrhh-filtros-planillas {
        grid-template-columns: 92px minmax(140px, 1fr) minmax(130px, 1fr) 184px auto;
    }
}

/* ═══════════════════ Franja de indicadores ═══════════════════ */

.rrhh-tira {
    grid-template-columns: repeat(4, 1fr);
}

/*
    Planillas lleva cinco: a los cuatro totales se suma «por atender», que es el
    único que dice qué hacer y no cuánto salió. Va aparte y no dentro de otro
    porque una cifra de trabajo pendiente metida como pie de un total se lee como
    parte del total.
*/
.rrhh-tira-5 {
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1400px) {
    .rrhh-tira-5 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1100px) {
    .rrhh-tira,
    .rrhh-tira-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ═══════════════════ Fotografía del expediente ═══════════════════ */

/*
    Redonda y pequeña en la rejilla, porque compite con el nombre; grande y
    rectangular en la ficha, porque ahí la fotografía ES parte del documento.
*/
.rrhh-foto {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--pan-fondo);
    display: block;
}

/* Sin fotografía no se deja el hueco en blanco: se dice que falta. */
.rrhh-foto-vacia {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--pan-fondo);
    color: var(--pan-tenue);
}

.rrhh-foto-vacia .rzi,
.rrhh-foto-vacia .rz-icon {
    font-size: 20px;
}

.rrhh-foto-ficha {
    width: 132px;
    height: 168px;
    border-radius: var(--pan-radio);
    object-fit: cover;
    background: var(--pan-fondo);
    border: 1px solid var(--pan-linea);
}

.rrhh-foto-ficha-vacia {
    width: 132px;
    height: 168px;
    border-radius: var(--pan-radio);
    display: grid;
    place-items: center;
    background: var(--pan-fondo);
    border: 1px dashed var(--pan-linea);
    color: var(--pan-tenue);
}

.rrhh-foto-ficha-vacia .rzi,
.rrhh-foto-ficha-vacia .rz-icon {
    font-size: 3rem;
}

/* ═══════════════════ Lo que falta ═══════════════════ */

/*
    Un dato que falta se escribe en gris y en cursiva, nunca en rojo. En un
    expediente recién importado faltan la mitad de los campos, y una pantalla
    entera en rojo deja de significar «atiende esto» para significar «así es
    esta pantalla». El rojo se reserva para lo que impide trabajar: sin puesto,
    sin grupo o sin salario, que es lo que deja al colaborador fuera de toda
    planilla.
*/
.rrhh-falta {
    color: var(--pan-tenue);
    font-style: italic;
    font-size: .78rem;
}

.rrhh-falta-grave {
    color: var(--pan-rojo);
    font-weight: 600;
    font-size: .78rem;
}

/*
    El resumen de huecos de un expediente: cinco puntos, uno por dato. Verde el
    que está, hueco el que falta. Se lee de un vistazo sin abrir la ficha, que
    es lo que hoy obliga a entrar a cien expedientes uno por uno.
*/
.rrhh-huecos {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.rrhh-hueco {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pan-verde);
    flex: none;
}

.rrhh-hueco-falta {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--pan-tenue);
}

/* Lo que impide entrar en planilla se marca en rojo, no en gris. */
.rrhh-hueco-grave {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--pan-rojo);
}

/* ═══════════════════ Antigüedad ═══════════════════ */

/*
    La barra de antigüedad hacia los diez años, que es el hito que importa: a
    partir de ahí la indemnización pesa más que el sueldo de un trimestre.
*/
.rrhh-antiguedad {
    display: block;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: var(--pan-linea);
    overflow: hidden;
    margin-top: 3px;
}

.rrhh-antiguedad span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--pan-azul);
}

/* ═══════════════════ Ficha emergente ═══════════════════ */

.rrhh-ficha-doc {
    display: block;
    font-family: var(--pan-mono);
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--pan-tenue);
}

.rrhh-ficha-titulo {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--pan-tinta);
}

/* La cabecera de la ficha: fotografía a la izquierda, cifras a la derecha. */
.rrhh-resumen {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--pan-linea);
    background: var(--pan-fondo);
}

.rrhh-resumen-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    align-content: start;
}

.rrhh-resumen-dato {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/*
    La ficha de una planilla no tiene fotografía: la primera pista —reservada al
    retrato en el expediente de una persona— sobra, y sin quitarla las cifras
    empezarían con un hueco de 96 px que nada llena.
*/
.rrhh-resumen-planilla {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 720px) {
    .rrhh-resumen {
        grid-template-columns: 1fr;
    }
}

/* La cuadrícula de datos: rótulo arriba, valor abajo. */
.rrhh-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px 20px;
    padding: 16px;
}

.rrhh-dato {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rrhh-dato-rotulo {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pan-tenue);
}

.rrhh-dato-valor {
    font-size: .84rem;
    color: var(--pan-tinta);
    overflow-wrap: anywhere;
}

.rrhh-bloque {
    padding: 0 16px 16px;
}

.rrhh-bloque h6 {
    margin: 14px 0 8px;
    padding-top: 12px;
    border-top: 1px solid var(--pan-linea);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pan-tenue);
}

/* El primer bloque de una tarjeta no lleva la raya: no separa de nada. */
.pan-tarjeta > .rrhh-bloque:first-child > h6 {
    margin-top: 4px;
    padding-top: 0;
    border-top: 0;
}

/* Encabezado de bloque con algo a la derecha: un botón, o un contador. */
.rrhh-bloque-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 14px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--pan-linea);
}

.rrhh-bloque-cab h6 {
    margin: 0;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pan-tenue);
}

/* Una aclaración bajo el título de un bloque: qué es y qué no es lo que sigue. */
.rrhh-nota {
    margin: 0 0 10px;
    font-size: .72rem;
    color: var(--pan-tenue);
}

.rrhh-tabla .rrhh-tenue {
    color: var(--pan-tenue);
}

/*
    ── Por qué la ficha no es una tarjeta de alto de ventana ─────────────────
    El resto de las pantallas son listados: una tabla que crece y una tarjeta
    que la contiene sin que la página entera se desplace. Un expediente es lo
    contrario —un documento que se lee de arriba abajo y se imprime entero—,
    así que aquí las tarjetas se apilan y quien se desplaza es la página.
*/
.rrhh-ficha-tarjeta {
    padding-bottom: 4px;
}

/* Dos columnas de tarjeta cuando caben, una cuando no. */
/*
    Sin margen: es hijo directo de .pan-pantalla-fluida, y el contrato de
    pantalla.css es que la separación entre bloques la pone el «gap» del
    envoltorio. Un margen aquí se SUMA a ese gap y descuadra la pantalla contra
    las demás.
*/
.rrhh-columnas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 12px;
    align-items: start;
}

/* Los seis campos del alta de un descuento. */
.rrhh-descuento-campos {
    display: grid;
    grid-template-columns:
        minmax(140px, .8fr)
        minmax(220px, 1.6fr)
        minmax(120px, .8fr)
        minmax(120px, .8fr)
        minmax(140px, .9fr)
        auto;
    gap: 12px;
    align-items: end;
}

@media (max-width: 1200px) {
    .rrhh-descuento-campos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ═══════════════════ Renglones de una planilla ═══════════════════ */

/*
    Dos pistas nada más: la búsqueda y «mostrar». Una planilla ya está acotada
    por su grupo y su quincena, así que los filtros que sirven aquí son los que
    recortan DENTRO —quién cambió, quién es nuevo, a quién le falta la cuenta—.
*/
.rrhh-filtros-lineas {
    grid-template-columns:
        minmax(200px, 1.4fr)   /* Buscar */
        minmax(180px, 1fr)     /* Mostrar */
        auto;                  /* Acciones */
}

/*
    El rubro presupuestario y las acciones del trámite comparten la banda de los
    filtros: son las dos cosas que se hacen sobre la planilla entera, y separarlas
    en dos tarjetas empujaba los renglones media pantalla hacia abajo.
*/
.rrhh-tramite {
    grid-template-columns: minmax(320px, 1fr) auto;
    align-items: end;
}

.rrhh-tramite-rubro {
    min-width: 0;
}

.rrhh-tramite-botones {
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 1100px) {
    .rrhh-tramite {
        grid-template-columns: minmax(0, 1fr);
    }

    .rrhh-tramite-botones {
        justify-content: flex-start;
    }

    .rrhh-filtros-lineas {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    }
}

/*
    Las casillas capturables de la rejilla. Ocupan la celda entera y no un ancho
    fijo en píxeles: con AllowColumnResize el usuario cambia el ancho de la
    columna, y un campo de 64 px se quedaría flotando en una columna de 200.
*/
.pan-rejilla .rrhh-celda {
    width: 100%;
    min-width: 0;
}

.pan-rejilla .rrhh-celda input {
    text-align: right;
}

/*
    ── La columna «No.» cuando se puede reordenar ──
    Asa, número y las dos flechas en una sola línea. Las flechas van una sobre
    otra y no lado a lado: la columna es la más angosta de la rejilla y dos
    botones en fila la doblaban.

    Un div dentro de la celda y no la celda con display:flex: un «td» que deja
    de ser table-cell hace que el navegador le genere una celda anónima
    alrededor y la columna deja de alinearse con la cabecera.
*/
.rrhh-orden {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
}

.rrhh-flechas {
    display: inline-flex;
    flex-direction: column;
}

.rrhh-flecha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--pan-tenue);
    cursor: pointer;
    line-height: 1;
    transition: color .15s ease, background-color .15s ease;
}

.rrhh-flecha:hover:not(:disabled) {
    color: var(--pan-azul);
    background: rgba(12, 39, 64, .06);
}

.rrhh-flecha:focus-visible {
    outline: 2px solid var(--pan-azul);
    outline-offset: 1px;
}

/* La primera fila no sube y la última no baja: el botón se queda, apagado, para
   que la columna no cambie de ancho de una fila a otra. */
.rrhh-flecha:disabled {
    opacity: .25;
    cursor: default;
}

.rrhh-flecha .rzi,
.rrhh-flecha .rz-icon,
.rrhh-flecha .notranslate {
    font-size: 14px !important;
    line-height: 1;
}

@media print {
    .rrhh-flechas { display: none; }
}

/* Los renglones de firma, al pie del documento. */
.rrhh-pie-firmas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
}

/* ═══════════════════ Generar una quincena ═══════════════════ */

/*
    El formulario de alta va DENTRO del listado y no en otra pantalla: las cuatro
    cosas que hay que elegir —grupo, año, mes y quincena— sólo tienen sentido
    junto a la lista de las que ya existen, que es lo que dice cuál falta.
*/
/*
    Con la especificidad de las DOS clases, a propósito. El panel toma su aspecto de
    «.pan-tarjeta», pero esa clase está pensada para la tarjeta principal de la
    pantalla —la que lleva la tabla— y trae «flex: 1 1 auto», «min-height: 0»,
    «overflow: hidden» y «padding: 0 !important». En la columna flex de la
    pantalla, con la tabla reclamando el espacio, esas cuatro reglas hacían que
    el formulario se ENCOGIERA a nada: se recortaba a media altura y la tira de
    indicadores se le montaba encima, con el botón de GENERAR asomando por
    debajo. Este bloque se dimensiona por su contenido, como la tira.

    Los «!important» son los mínimos para ganarle a los de «.pan-tarjeta»; la
    especificidad mayor hace el resto. Sin margen: la separación entre bloques
    la pone el «gap» del envoltorio, y un margen propio se le sumaría.
*/
.pan-tarjeta.rrhh-generar,
.rrhh-generar {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
    padding: 14px 16px 16px !important;
    border-left: 3px solid var(--pan-azul) !important;
}

.rrhh-generar-campos {
    display: grid;
    grid-template-columns:
        minmax(180px, 1.2fr)
        104px
        minmax(150px, 1fr)
        minmax(160px, 1fr)
        auto;
    gap: 12px;
    align-items: end;
}

@media (max-width: 1100px) {
    .rrhh-generar-campos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.rrhh-generar-nota {
    margin: 12px 0 0;
    font-size: .74rem;
    color: var(--pan-tenue);
}

/* ═══════════════════ Tabla menuda ═══════════════════ */

/*
    Para los desgloses de dentro de la ficha —proyección de quincena,
    prestaciones acumuladas, descuentos— y para el comparador. No es .pan-rejilla:
    aquélla estiliza un RadzenDataGrid entero, y aquí hacen falta cuatro filas de
    números sin paginador, sin cabecera fija y sin ordenamiento.
*/
.rrhh-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem;
    color: var(--pan-tinta);
}

.rrhh-tabla th {
    padding: 6px 8px;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pan-tenue);
    text-align: right;
    border-bottom: 1px solid var(--pan-linea);
    white-space: nowrap;
}

.rrhh-tabla th:first-child,
.rrhh-tabla td:first-child {
    text-align: left;
}

.rrhh-tabla td {
    padding: 6px 8px;
    text-align: right;
    border-bottom: 1px dashed var(--pan-linea);
    font-variant-numeric: tabular-nums;
}

.rrhh-tabla tr:last-child td {
    border-bottom: 0;
}

/*
    Las celdas son numéricas por omisión, así que .rrhh-num no cambia la
    alineación: la DECLARA. La tabla del comparador tiene una columna de texto al
    final —el motivo— y sin marcar cuáles son números habría que adivinar, al
    editarla, si el «text-align: right» de la regla general era intencional.
*/
.rrhh-tabla .rrhh-num {
    text-align: right;
    font-family: var(--pan-mono);
    white-space: nowrap;
}

.rrhh-tabla .rrhh-fuerte {
    font-weight: 700;
}

/* Una quincena de menos de 15 días no es un error, pero explica el líquido. */
.rrhh-tabla .rrhh-parcial {
    color: var(--pan-ambar);
    font-weight: 600;
}

.rrhh-tabla .rrhh-fila-total td {
    border-top: 1px solid var(--pan-linea);
    border-bottom: 0;
    font-weight: 700;
    padding-top: 8px;
}

.rrhh-tabla .rrhh-descuento {
    color: var(--pan-rojo);
}

/* ═══════════════════ Línea de tiempo de la plaza ═══════════════════ */

/*
    ── Por qué una sola línea y no tres tablas ───────────────────────────────
    El historial salarial, las acciones de personal y los descuentos son tres
    tablas distintas en la base, pero para quien revisa un expediente son la
    misma pregunta: qué le ha pasado a esta persona y cuándo. Tenerlas en tres
    bloques obliga a leer tres fechas en paralelo para reconstruir el orden.
*/
.rrhh-linea {
    position: relative;
    padding: 0 0 0 22px;
    margin: 0;
    list-style: none;
}

/* El hilo vertical. Va por detrás de los puntos, de ahí el z-index. */
.rrhh-linea::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--pan-linea);
}

.rrhh-hito {
    position: relative;
    padding: 7px 0;
}

.rrhh-hito::before {
    content: "";
    position: absolute;
    left: -21px;
    top: 12px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--pan-papel);
    box-shadow: inset 0 0 0 2px var(--rrhh-hito, var(--pan-apagado));
    z-index: 1;
}

.rrhh-hito-fecha {
    display: inline-block;
    min-width: 74px;
    font-family: var(--pan-mono);
    font-size: .7rem;
    color: var(--pan-tenue);
}

.rrhh-hito-texto {
    font-size: .8rem;
    color: var(--pan-tinta);
}

.rrhh-hito-pie {
    display: block;
    margin-left: 74px;
    font-size: .7rem;
    color: var(--pan-tenue);
}

/* ═══════════════════ Comparador de quincenas ═══════════════════ */

/*
    ── Por qué una tabla y no dos columnas enfrentadas ───────────────────────
    La pregunta no es «cómo era antes y cómo es ahora» —eso son dos planillas y
    ya se pueden abrir— sino «quién cambió y por qué». Eso es una lista de
    diferencias con su explicación al lado, y una lista se lee de arriba abajo.
    Dos paneles enfrentados obligarían a buscar el mismo apellido en las dos
    columnas, que es exactamente lo que se hacía a mano.
*/
.rrhh-comparar {
    padding: 14px 16px;
    border-top: 1px solid var(--pan-linea);
    overflow-x: auto;
}

.rrhh-comparar-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 14px;
    margin-bottom: 8px;
}

.rrhh-comparar-cab h4 {
    margin: 0;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pan-tinta);
}

/* La explicación del cambio: es prosa, se alinea a la izquierda y sí envuelve. */
.rrhh-tabla td.rrhh-comparar-motivo {
    text-align: left;
    font-size: .72rem;
    color: var(--pan-tenue);
    white-space: normal;
    min-width: 220px;
}

.rrhh-comparar-igual {
    margin: 0;
    padding: 10px 0 2px;
    font-size: .78rem;
    color: var(--pan-tenue);
}

/* ═══════════════════ Comprobante de pago ═══════════════════ */

/* En la fila es un botón más de «pan-acciones»; esto es la ficha: estado,
   referencia y la zona de soltar, compacta. */
.rrhh-comprobante-estado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0 0 10px;
    font-size: .82rem;
}

.rrhh-comprobante-estado .pan-enlace {
    margin-left: 0;
}

.rrhh-ok {
    display: inline-flex;
    color: var(--pan-verde);
}

.rrhh-ok .rzi,
.rrhh-ok .rz-icon,
.rrhh-ok .notranslate {
    font-size: 18px !important;
    line-height: 1;
}

.rrhh-comprobante-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

/* Cada comprobante en su propia caja: con dos o tres, sin el marco no se sabía
   qué referencia era de cuál. */
.rrhh-comprobante-item {
    padding: 8px 10px;
    margin-bottom: 8px;
    border: 1px solid var(--pan-linea);
    border-radius: 8px;
    background: #fbfcfd;
}

    .rrhh-comprobante-item .rrhh-comprobante-estado {
        margin-bottom: 6px;
    }

    .rrhh-comprobante-item .rrhh-comprobante-fila {
        margin-bottom: 0;
    }

.rrhh-comprobante-fila .pan-input {
    flex: 1 1 240px;
    min-width: 0;
}

/* Más baja que la zona de la fotografía del expediente: aquí es un accesorio de
   la ficha, no el centro de la pantalla. */
.rrhh-comprobante-soltar {
    padding: 10px 12px;
    font-size: 12px;
}

.rrhh-comprobante-soltar .rzi,
.rrhh-comprobante-soltar .rz-icon,
.rrhh-comprobante-soltar .notranslate {
    font-size: 22px !important;
    color: var(--pan-tenue);
}

/*
    El signo se dice con COLOR y con el signo escrito, no sólo con color: en una
    impresión en blanco y negro —que es como circula la planilla— el verde y el
    rojo son el mismo gris.
*/
.rrhh-sube {
    color: var(--pan-verde);
}

.rrhh-baja {
    color: var(--pan-rojo);
}

/*
    Sin diferencia no se pinta verde ni rojo: quedarse igual no es una buena ni
    una mala noticia, y colorearlo haría que la vista pareciera tener siempre
    algo que decir.
*/
.rrhh-sin-cambios {
    color: var(--pan-tenue);
}

/* ═══════════════════ Avisos de la planilla ═══════════════════ */

/*
    Lo que hay que mirar antes de aprobar. Se listan dentro de una tarjeta y no
    como un pan-error por aviso: son diez o quince, y quince cintas rojas
    apiladas empujan la planilla fuera de la pantalla y no se leen.
*/
.rrhh-avisos {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--pan-linea);
    border-left: 3px solid var(--pan-ambar);
    border-radius: var(--pan-radio);
    background: var(--pan-papel);
    /*
        Con tope y desplazamiento propio: la pantalla es de alto de ventana y el
        único bloque que puede crecer sin límite es éste —una planilla con quince
        avisos de ISR existe—. Sin tope, los avisos empujarían los renglones fuera
        de la pantalla, que es exactamente lo que la tarjeta de alto fijo evita.
    */
    max-height: 22vh;
    overflow-y: auto;
}

@media print {
    /* En papel no hay ventana que respetar: los avisos se imprimen enteros. */
    .rrhh-avisos {
        max-height: none;
        overflow: visible;
    }
}

.rrhh-aviso {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
    font-size: .78rem;
    color: var(--pan-apagado);
}

.rrhh-aviso b {
    color: var(--pan-tinta);
}

.rrhh-avisos-titulo {
    margin: 0 0 4px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pan-tenue);
}

/* ═══════════════════ Saldos iniciales de vacaciones (.vac-) ═══════════════════ */

/*
    Prefijo propio y no .rrhh-: esto es de una sola pantalla —la migración del libro,
    que se corre una vez— y mezclarlo con el formato del módulo obligaría a distinguir
    después qué se puede borrar el día que sobre. Mismo criterio que .cae- en
    abastecimiento.

    El resto —cabecera, tira de indicadores, vacío, esqueleto— sale de pantalla.css sin
    tocar nada.
*/

.vac-aviso { margin-bottom: 4px; }

/*
    Maestro y detalle. Seiscientas filas puestas seguidas no se trabajan: se busca a la
    persona, se pone su formulario de papel al lado y se capturan sus tres o cuatro
    años. Izquierda para encontrarla, derecha para capturar.
*/
.vac-tablero {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    min-height: 0;
    margin-top: 4px;
}

/* ── Columna izquierda ───────────────────────────────────────────────────── */

.vac-lista {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 68vh;
    border: 1px solid var(--pan-linea);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.vac-lista-buscar {
    padding: 10px;
    border-bottom: 1px solid var(--pan-linea);
    background: var(--pan-fondo);
}

.vac-lista-cuerpo {
    overflow-y: auto;
    overscroll-behavior: contain;
}

/*
    Botón y no un div con onclick: se llega con el tabulador, responde a Enter y el
    lector de pantalla lo anuncia como lo que es. La pantalla la usa RRHH a diario
    durante la migración y se recorre más rápido con el teclado.
*/
.vac-persona {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "nombre saldo"
        "pie    saldo";
    gap: 0 10px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--pan-linea);
    border-left: 3px solid transparent;
    background: transparent;
    text-align: left;
    font-family: var(--pan-sans);
    cursor: pointer;
}

.vac-persona:last-child { border-bottom: 0; }
.vac-persona:hover { background: rgba(24, 95, 165, .05); }

.vac-persona-activa,
.vac-persona-activa:hover {
    background: rgba(24, 95, 165, .09);
    border-left-color: var(--pan-azul);
}

.vac-persona-nombre {
    grid-area: nombre;
    font-size: 12px;
    font-weight: 600;
    color: var(--pan-tinta);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vac-persona-pie {
    grid-area: pie;
    font-size: 10.5px;
    color: var(--pan-apagado);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Los días que le quedan pendientes: es lo único que hace falta saber de un vistazo
   para decidir por quién seguir. */
.vac-persona-saldo {
    grid-area: saldo;
    align-self: center;
    min-width: 30px;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--pan-apagado);
}

.vac-sinresultado {
    margin: 0;
    padding: 18px 12px;
    text-align: center;
    font-family: var(--pan-sans);
    font-size: 11.5px;
    color: var(--pan-apagado);
}

/* ── Columna derecha ─────────────────────────────────────────────────────── */

.vac-detalle {
    border: 1px solid var(--pan-linea);
    border-radius: 12px;
    background: #fff;
    padding: 18px 22px 20px;
    min-height: 0;
}

.vac-vacio { border: 0; padding: 40px 20px; }

.vac-detalle-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--pan-linea);
}

.vac-detalle-cab h2 {
    margin: 0;
    font-family: var(--pan-serif, var(--pan-sans));
    font-size: 17px;
    font-weight: 700;
    color: var(--pan-tinta);
}

.vac-detalle-cab p {
    margin: 3px 0 0;
    font-family: var(--pan-sans);
    font-size: 11.5px;
    color: var(--pan-apagado);
}

.vac-tabla {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--pan-sans);
    font-size: 12px;
}

.vac-tabla th {
    padding: 7px 10px;
    border-bottom: 1px solid var(--pan-linea);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pan-apagado);
    text-align: left;
    white-space: nowrap;
}

.vac-tabla td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--pan-linea);
    vertical-align: middle;
}

.vac-tabla tbody tr:last-child td { border-bottom: 0; }

.vac-tabla .vac-num { text-align: right; font-variant-numeric: tabular-nums; }
.vac-tabla th.vac-num { text-align: right; }

.vac-periodo { font-weight: 700; color: var(--pan-tinta); white-space: nowrap; }
.vac-fechas,
.vac-limite { font-size: 11px; color: var(--pan-apagado); white-space: nowrap; }
.vac-pendientes { font-weight: 700; }
.vac-porvencer { color: var(--pan-ambar, #a8730f); font-weight: 600; }

/* Una fila vencida no se pinta de rojo entera —serían casi todas al empezar— sino que
   se marca en el canto: basta para encontrarlas sin que la tabla grite. */
.vac-fila-vencida td:first-child { box-shadow: inset 3px 0 0 var(--pan-rojo); }

.vac-guardar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--pan-linea);
}

.vac-observacion { flex: 1 1 320px; min-width: 0; }

.vac-observacion label {
    display: block;
    margin-bottom: 4px;
    font-family: var(--pan-sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--pan-apagado);
}

/* Debajo de 1040 px la columna de la izquierda deja de caber al lado y se pone
   encima, con altura recortada para que el detalle siga a la vista. */
@media (max-width: 1040px) {
    .vac-tablero { grid-template-columns: 1fr; }
    .vac-lista { max-height: 300px; }
}

@media (max-width: 700px) {
    .vac-tabla .vac-fechas,
    .vac-tabla th:nth-child(2) { display: none; }
}

/* ═══════════════════ Impresión ═══════════════════ */

@media print {
    /*
        En papel la línea de tiempo pierde el hilo y los puntos: son dos tintas
        que no aportan nada cuando no se puede recorrer con la vista de arriba
        abajo en una pantalla, y el hilo se corta feo al saltar de página.
    */
    .rrhh-linea::before,
    .rrhh-hito::before {
        display: none;
    }

    .rrhh-linea {
        padding-left: 0;
    }

    .rrhh-hito {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .rrhh-tabla tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /*
        En papel las dos columnas del expediente se apilan: a 21 cm dos tarjetas
        de tablas numéricas dejan las cifras en cuatro centímetros de ancho.
    */
    .rrhh-columnas {
        grid-template-columns: 1fr;
    }

    .rrhh-columnas > * {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Que la fotografía no arrastre sola una página. */
    .rrhh-resumen {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   SEGUNDAS QUINCENAS SIN CARGAR  ·  prefijo .rrhh-faltan-
   Hijo directo de la pantalla: sin margen, que la separación la pone el gap.
   ══════════════════════════════════════════════════════════════════════════ */

.rrhh-faltan { margin: 0; padding: 14px 24px 16px; border-color: #e8d2a8; background: #fdfaf4; }

.rrhh-faltan-titulo {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin: 0 0 10px;
    font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: #7a5f18;
}
.rrhh-faltan-titulo small {
    flex: 1 1 260px;
    font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none;
    color: var(--pan-apagado);
}
.rrhh-faltan-titulo .rzi,
.rrhh-faltan-titulo .notranslate { font-size: 17px; align-self: center; color: #b08a2a; }

.rrhh-faltan-cifras {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px;
}
.rrhh-faltan-cifra {
    display: flex; flex-direction: column; gap: 2px;
    padding: 9px 13px;
    border: 1px solid var(--pan-linea); border-radius: var(--pan-radio); background: #fff;
}
.rrhh-faltan-alerta { border-color: #dfc084; background: #fdf4e4; }
.rrhh-faltan-rotulo { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--pan-apagado); }
.rrhh-faltan-monto { font-family: var(--pan-mono); font-size: 21px; font-weight: 700; line-height: 1.1; }
.rrhh-faltan-pie { font-size: 11px; color: var(--pan-apagado); }

.rrhh-faltan-detalle { margin-top: 10px; font-size: 12px; }
.rrhh-faltan-detalle summary { cursor: pointer; color: var(--pan-apagado); }

.rrhh-faltan-tabla { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 12px; }
.rrhh-faltan-tabla th {
    padding: 4px 8px; border-bottom: 1px solid var(--pan-linea);
    font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--pan-apagado);
    text-align: left; font-weight: 600;
}
.rrhh-faltan-tabla td { padding: 4px 8px; border-bottom: 1px solid #eef1f4; }
.rrhh-faltan-tabla tbody tr:hover { background: #fff; }

.rrhh-faltan-nota { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--pan-apagado); }

@media print { .rrhh-faltan { display: none !important; } }

/* ── Quincenas sin rubro presupuestario ─────────────────────────────────── */

.rrhh-rubros { margin: 0; padding: 14px 24px 16px; }
.rrhh-rubros .rrhh-faltan-titulo { color: var(--pan-tinta); }
.rrhh-rubros .rrhh-faltan-titulo .rzi,
.rrhh-rubros .rrhh-faltan-titulo .notranslate { color: var(--pan-apagado); }
.rrhh-rubros .rrhh-faltan-tabla td { vertical-align: middle; }
.rrhh-rubros-impedimento { font-size: 11.5px; color: var(--pan-apagado); font-style: italic; }

@media print { .rrhh-rubros { display: none !important; } }

/* ═══════════════════ Liquidaciones laborales ═══════════════════ */

.rrhh-filtros-liq {
    grid-template-columns: minmax(200px, 1.4fr) 120px minmax(150px, 1fr) auto;
}

.rrhh-liq-campos {
    grid-template-columns: minmax(260px, 2fr) 150px 140px auto;
}

.rrhh-liq-previa {
    margin-top: 12px;
}

/* Meses a la izquierda, decisiones y finiquito a la derecha. */
.rrhh-liq-cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
    gap: 18px 28px;
    align-items: start;
}

.rrhh-liq-decisiones {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .rrhh-liq-decisiones .pan-filtro {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

.rrhh-liq-titulo {
    margin: 0 0 8px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pan-tenue);
}

@media (max-width: 1100px) {
    .rrhh-liq-cuerpo { grid-template-columns: minmax(0, 1fr); }
    .rrhh-filtros-liq, .rrhh-liq-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══════════════════ Conciliar cuentas y expedientes (.rrhh-conc-) ═══════════════════ */

.rrhh-conc-como { margin: 4px 0 0; padding-left: 18px; line-height: 1.6; }

/* Cifras del diagnóstico y de la simulación: mismo patrón que las franjas del módulo. */
.rrhh-conc-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin-top: 4px;
}
.rrhh-conc-cifra {
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--pan-linea);
    border-radius: var(--pan-radio);
    background: #fff;
}
.rrhh-conc-cifra-alerta { border-color: rgba(211, 47, 20, .35); background: #fff8f6; }
.rrhh-conc-cifra-rotulo { font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--pan-apagado); font-weight: 600; }
.rrhh-conc-cifra-monto { font-size: 22px; font-weight: 700; color: var(--pan-tinta); line-height: 1.1; }
.rrhh-conc-cifra-pie { font-size: 11.5px; color: var(--pan-apagado); }

.rrhh-conc-repetida { display: block; font-size: 12px; margin: 2px 0; }

/* Un bloque por tipo de caso. */
.rrhh-conc-bloque { margin-top: 16px; }
.rrhh-conc-tipo {
    display: flex; align-items: center; gap: 8px; margin: 0 0 2px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--pan-tinta);
}
.rrhh-conc-tipo .rzi { color: var(--pan-apagado); font-size: 18px; }
.rrhh-conc-tipo small { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--pan-apagado); }
.rrhh-conc-pista { margin: 0 0 8px; }

/* La tabla de casos: filas altas porque cada celda dice varias cosas. */
.rrhh-conc-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rrhh-conc-tabla th {
    text-align: left; padding: 6px 10px; font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase;
    color: var(--pan-apagado); border-bottom: 1px solid var(--pan-linea); font-weight: 600;
}
.rrhh-conc-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--pan-linea); vertical-align: top; }
.rrhh-conc-tabla tr.rrhh-conc-marcado td { background: #f4faf5; }
.rrhh-conc-tabla tr.rrhh-conc-ambiguo td { background: #fffaf0; }
.rrhh-conc-celda-sel { min-width: 220px; }
.rrhh-conc-celda-sel .pan-secundario { display: block; margin-top: 2px; }
.rrhh-conc-celda-sel .pan-principal { display: block; }

/* Personas: la sobrante → la que sobrevive, cada una con lo que apunta a ella. */
.rrhh-conc-personas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rrhh-conc-personas .rzi { color: var(--pan-apagado); font-size: 16px; }
.rrhh-conc-persona { display: flex; flex-direction: column; min-width: 140px; }
.rrhh-conc-persona b { font-size: 11px; color: var(--pan-apagado); font-weight: 600; }
.rrhh-conc-persona small { font-size: 11px; color: var(--pan-apagado); }
.rrhh-conc-origen { opacity: .8; }
.rrhh-conc-destino { font-weight: 600; }

/* Motivo y confianza. */
.rrhh-conc-motivo { max-width: 360px; }
.rrhh-conc-motivo > span { display: block; }
.rrhh-conc-nota { font-size: 11.5px; color: #7a5a00; margin-top: 2px; }
.rrhh-conc-conf {
    display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .5px;
    padding: 1px 6px; border-radius: 999px; margin-bottom: 3px;
}
.rrhh-conc-conf-3 { background: #e4f3e6; color: #1f6b34; }
.rrhh-conc-conf-2 { background: #e8effa; color: #2b4f87; }
.rrhh-conc-conf-1 { background: #fbe9c9; color: #7a5a00; }

/* Resultado de la simulación / aplicación. */
.rrhh-conc-resultado { margin-top: 12px; }
.rrhh-conc-resultado h6 { margin: 0 0 4px; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: #666; font-weight: 600; }
.rrhh-conc-resultado-mal h6 { color: var(--pan-rojo); }
.rrhh-conc-lista { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.55; }

@media (max-width: 900px) {
    .rrhh-conc-tabla, .rrhh-conc-tabla thead, .rrhh-conc-tabla tbody, .rrhh-conc-tabla tr, .rrhh-conc-tabla td { display: block; }
    .rrhh-conc-tabla thead { display: none; }
    .rrhh-conc-tabla tr { border-bottom: 2px solid var(--pan-linea); padding: 6px 0; }
    .rrhh-conc-tabla td { border-bottom: 0; padding: 4px 8px; }
    .rrhh-conc-celda-sel { min-width: 0; }
}

@media print { .rrhh-conc-tabla .rz-dropdown { border: 0; } }

.rrhh-filtros-proy {
    grid-template-columns: 150px minmax(170px, 1fr) 120px minmax(200px, 1.2fr);
}

/* ═══════════════════ Acreditamiento bancario (octubre de 2026) ═══════════════════
   El diálogo del archivo del banco (validación antes de descargar) y el del
   rechazo de un renglón; el badge RECHAZADO en la fila. acr- */
.acr-dialogo { display: grid; gap: 12px; font-family: var(--pan-sans); font-size: 12.5px; color: var(--pan-tinta); }
.acr-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.acr-cifra { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; background: var(--pan-fondo); border: 1px solid var(--pan-linea); }
.acr-cifra b { font-family: var(--pan-mono); font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.acr-cifra span { font-size: 10.5px; color: var(--pan-apagado); }
.acr-total b { color: var(--pan-azul); }
.acr-mal b { color: var(--pan-rojo, #b3261e); }
.acr-problemas, .acr-avisos { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.acr-problemas li { display: flex; gap: 8px; align-items: flex-start; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--pan-linea); background: var(--pan-papel); }
.acr-problemas li .rzi { font-size: 18px !important; flex: 0 0 auto; }
.acr-bloquea { border-color: rgba(179, 38, 30, .35) !important; }
.acr-bloquea .rzi { color: var(--pan-rojo, #b3261e); }
.acr-avisa .rzi { color: var(--pan-ambar, #b8541b); }
.acr-avisos li { padding: 4px 10px; color: var(--pan-apagado); font-size: 12px; }
.acr-avisos li::before { content: "· "; }
.acr-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 4px; border-top: 1px solid var(--pan-linea); }
.acr-quien { margin: 0; font-size: 13px; }
.acr-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acr-campo { display: grid; gap: 4px; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pan-tenue); }
.acr-campo .pan-input { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 14px; }
.acr-ancho { grid-column: 1 / -1; }
.acr-nota { margin: 0; font-size: 11.5px; color: var(--pan-apagado); }
.acr-pendiente { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; background: rgba(179, 38, 30, .06); border: 1px solid rgba(179, 38, 30, .3); }
.acr-pendiente .rzi { color: var(--pan-rojo, #b3261e); font-size: 18px !important; }
.acr-opciones { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.acr-opciones legend { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pan-tenue); margin-bottom: 4px; }
.acr-opcion { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--pan-linea); background: var(--pan-papel); cursor: pointer; }
.acr-opcion-activa { border-color: var(--pan-azul); box-shadow: inset 0 0 0 1px var(--pan-azul); }
.acr-problema { margin: 0; color: var(--pan-rojo, #b3261e); }
.rrhh-rechazado { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: rgba(179, 38, 30, .1); color: var(--pan-rojo, #b3261e); }
@media (max-width: 760px) {
    .acr-campos { grid-template-columns: 1fr; }
    .acr-campo .pan-input { font-size: 16px; min-height: 44px; }
    .acr-acciones .rz-button, .acr-opcion { min-height: 44px; }
}