/* ==========================================================================
   Portal RRHH Mota-Engil - capa de usabilidad y adaptacion a moviles.

   Esta hoja se carga DESPUES de bootstrap.css, mdl/material.css y estilos.css,
   asi que solo corrige lo que hace falta. No cambia la identidad del portal:
   se conserva el azul corporativo, el logo y la cabecera de Material Design.

   El portal lo usan obreros desde el celular en obra, muchas veces con una
   mano y con guantes. De ahi las tres decisiones de fondo:
     1. Nada mide menos de 44 px de alto: se puede tocar sin apuntar.
     2. En pantalla angosta las tablas dejan de ser tablas y pasan a ser
        tarjetas, cada dato con su etiqueta al lado.
     3. Los campos de texto usan 16 px, porque con menos iOS hace zoom solo
        al enfocarlos y descuadra la pagina.
   ========================================================================== */

:root {
    --rrhh-azul:        #1B78D0;
    --rrhh-azul-oscuro: #14538F;
    --rrhh-azul-claro:  #4B78BF;
    --rrhh-azul-fondo:  #EAF2FB;
    --rrhh-texto:       #212529;
    --rrhh-suave:       #6C757D;
    --rrhh-borde:       #DEE2E6;
    --rrhh-fondo:       #F4F6F8;
    --rrhh-blanco:      #FFFFFF;
    --rrhh-verde:       #1E7E34;
    --rrhh-rojo:        #C82333;
    --rrhh-ambar:       #B8860B;
    --rrhh-radio:       8px;
    --rrhh-sombra:      0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.06);
    --rrhh-toque:       44px;
}

body {
    background: var(--rrhh-fondo);
    color: var(--rrhh-texto);
    -webkit-text-size-adjust: 100%;
}

/* Material Design trae un rosa fuerte como color de enlace, que no es de la
   marca y encima se confunde con los avisos de error. Los enlaces van en el
   azul corporativo. */
a, a:link, a:visited {
    color: var(--rrhh-azul-oscuro);
}
a:hover, a:focus {
    color: var(--rrhh-azul);
}

/* --------------------------------------------------------------------------
   1. Barra superior y menu lateral

   Antes la cabecera usaba el contenedor de Material Design (.mdl-layout) y se
   cerraba ANTES del contenido de la pagina. Al hacerlo, MDL crea un
   .mdl-layout__container que ocupa toda la ventana y queda POR ENCIMA del
   contenido: los botones y los campos se veian, pero al tocarlos el clic se
   lo quedaba esa capa. Se reemplazo por una barra propia, sin capas encima.
   -------------------------------------------------------------------------- */
.rrhh-barra {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--rrhh-azul);
    color: #fff;
    box-shadow: 0 1px 4px rgba(16,24,40,.18);
}
.rrhh-barra-interior {
    max-width: 1140px;
    margin: 0 auto;
    padding: 8px 16px;
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.rrhh-barra img {
    height: 34px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    background: #fff;
    border-radius: 4px;
    padding: 2px 6px;
}
.rrhh-barra-espacio { flex: 1 1 auto; }

.rrhh-menu {
    background: transparent;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: var(--rrhh-radio);
    color: #fff;
    width: var(--rrhh-toque);
    height: var(--rrhh-toque);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
}
.rrhh-menu:hover { background: rgba(255,255,255,.15); }

/* Menu lateral que entra desde la izquierda. */
.rrhh-cajon {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 264px;
    max-width: 82vw;
    background: var(--rrhh-blanco);
    z-index: 1100;
    transform: translateX(-100%);
    transition: transform .22s ease;
    overflow-y: auto;
    box-shadow: 2px 0 12px rgba(16,24,40,.18);
}
.rrhh-cajon.abierto { transform: translateX(0); }
.rrhh-cajon-titulo {
    padding: 18px 20px;
    font-weight: 600;
    font-size: 15px;
    color: var(--rrhh-azul-oscuro);
    border-bottom: 1px solid var(--rrhh-borde);
}
.rrhh-cajon a {
    display: block;
    padding: 13px 20px;
    color: var(--rrhh-texto);
    text-decoration: none;
    font-size: 15px;
    border-bottom: 1px solid #F1F4F7;
}
.rrhh-cajon a:hover { background: var(--rrhh-azul-fondo); }
.rrhh-cajon a[aria-current="page"] {
    background: var(--rrhh-azul-fondo);
    color: var(--rrhh-azul-oscuro);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--rrhh-azul);
}

.rrhh-velo {
    position: fixed;
    inset: 0;
    background: rgba(16,24,40,.45);
    z-index: 1050;
    display: none;
}
.rrhh-velo.abierto { display: block; }

/* El logo, cuando alguna pantalla siga usando la cabecera de MDL. */
.mdl-layout__header-row img {
    height: 38px !important;
    width: auto !important;
    max-width: 160px;
    object-fit: contain;
}
.mdl-layout__header-row { padding-left: 16px; padding-right: 16px; }

.rrhh-usuario {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    margin: 0 12px 0 0;
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* En pantalla angosta el nombre completo no cabe junto al logo y al boton. */
@media (max-width: 560px) {
    .rrhh-usuario { display: none; }
}

.rrhh-salir {
    background: transparent;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: var(--rrhh-radio);
    color: #fff;
    min-height: var(--rrhh-toque);
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}
.rrhh-salir:hover { background: rgba(255,255,255,.15); }
.rrhh-salir .rrhh-salir-texto { display: inline; }
@media (max-width: 560px) {
    .rrhh-salir { padding: 0 12px; }
    .rrhh-salir .rrhh-salir-texto { display: none; }
}

/* --------------------------------------------------------------------------
   2. Contenedor de pagina
   Antes el contenido iba dentro de .col-sm-4, o sea un tercio del ancho en
   escritorio, con separadores de alto fijo (150 px) que en el celular dejaban
   la pantalla en blanco al entrar.
   -------------------------------------------------------------------------- */
.rrhh-pagina {
    max-width: 1140px;
    margin: 0 auto;
    padding: 24px 16px 72px;
}
@media (max-width: 767px) {
    .rrhh-pagina { padding: 16px 12px 72px; }
}

.rrhh-titulo {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 4px;
}
.rrhh-bajada {
    color: var(--rrhh-suave);
    font-size: 14px;
    margin: 0 0 20px;
}

.rrhh-tarjeta {
    background: var(--rrhh-blanco);
    border: 1px solid var(--rrhh-borde);
    border-radius: var(--rrhh-radio);
    box-shadow: var(--rrhh-sombra);
    margin-bottom: 16px;
}
.rrhh-tarjeta-cabecera {
    padding: 14px 18px;
    border-bottom: 1px solid var(--rrhh-borde);
    font-weight: 600;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.rrhh-tarjeta-cuerpo { padding: 18px; }
@media (max-width: 767px) {
    .rrhh-tarjeta-cuerpo { padding: 14px; }
}

/* --------------------------------------------------------------------------
   3. Formularios
   -------------------------------------------------------------------------- */
.rrhh-campo { margin-bottom: 16px; }
.rrhh-campo label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--rrhh-texto);
}
.rrhh-campo .rrhh-ayuda {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--rrhh-suave);
    margin-top: 4px;
}

/* 16 px evita el zoom automatico de iOS al enfocar un campo. */
.form-control,
input[type="text"].form-control,
input[type="password"].form-control,
input[type="number"].form-control,
input[type="date"].form-control,
input[type="email"].form-control,
select.form-control {
    min-height: var(--rrhh-toque);
    font-size: 16px;
    border-radius: var(--rrhh-radio);
    border: 1px solid var(--rrhh-borde);
}
.form-control:focus {
    border-color: var(--rrhh-azul);
    box-shadow: 0 0 0 3px rgba(27,120,208,.18);
    outline: none;
}

.btn {
    min-height: var(--rrhh-toque);
    border-radius: var(--rrhh-radio);
    font-size: 15px;
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.btn-primary { background: var(--rrhh-azul); border-color: var(--rrhh-azul); }
.btn-primary:hover, .btn-primary:focus { background: var(--rrhh-azul-oscuro); border-color: var(--rrhh-azul-oscuro); }

/*
 * Un enlace con aspecto de boton tiene que llevar el texto en blanco.
 *
 * La regla "a, a:link, a:visited { color: azul oscuro }" de mas arriba pesa mas
 * que ".btn-primary { color: #fff }" de Bootstrap (a:link es 0,1,1 y .btn-primary
 * es 0,1,0), asi que botones como "Exportar a Excel", "Exportar a PDF" o "Volver
 * al portal" salian con el texto azul oscuro sobre fondo de color: apenas se
 * leian. Solo afecta a las variantes solidas; las de contorno conservan su color.
 */
a.btn-primary, a.btn-primary:link, a.btn-primary:visited, a.btn-primary:hover, a.btn-primary:focus,
a.btn-success, a.btn-success:link, a.btn-success:visited, a.btn-success:hover, a.btn-success:focus,
a.btn-danger,  a.btn-danger:link,  a.btn-danger:visited,  a.btn-danger:hover,  a.btn-danger:focus,
a.btn-info,    a.btn-info:link,    a.btn-info:visited,    a.btn-info:hover,    a.btn-info:focus,
a.btn-secondary, a.btn-secondary:link, a.btn-secondary:visited, a.btn-secondary:hover, a.btn-secondary:focus {
    color: var(--rrhh-blanco);
}

/* El foco del teclado tiene que verse: hay gente que navega con TAB. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--rrhh-azul);
    outline-offset: 2px;
}

/* Los botones apilados en el celular ocupan el ancho completo. */
.rrhh-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 575px) {
    .rrhh-acciones { flex-direction: column; align-items: stretch; }
    .rrhh-acciones .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   4. Tablas
   En escritorio siguen siendo tablas. Por debajo de 768 px cada fila pasa a
   ser una tarjeta y cada celda muestra su etiqueta, tomada del atributo
   data-etiqueta. Asi se deja de hacer scroll horizontal para leer un dato.
   -------------------------------------------------------------------------- */
.rrhh-tabla-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.rrhh-tabla { width: 100%; margin-bottom: 0; background: var(--rrhh-blanco); }
.rrhh-tabla thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--rrhh-azul-claro);
    color: #fff;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
    border: none;
    padding: 12px;
    white-space: nowrap;
}
.rrhh-tabla tbody td {
    padding: 12px;
    vertical-align: middle;
    border-top: 1px solid var(--rrhh-borde);
    font-size: 14px;
}
.rrhh-tabla tbody tr:hover { background: var(--rrhh-azul-fondo); }

/* El nombre del archivo de la boleta es larguísimo. Si se deja partir, la fila
   crece hasta seis líneas y la tabla se vuelve ilegible. Se muestra en una
   sola línea recortada; el nombre completo sale al pasar el puntero. */
.rrhh-celda-larga {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    color: var(--rrhh-suave);
}
@media (max-width: 767px) {
    .rrhh-celda-larga { max-width: 55%; }
}

@media (max-width: 767px) {
    .rrhh-tabla, .rrhh-tabla tbody, .rrhh-tabla tr, .rrhh-tabla td { display: block; width: 100%; }
    .rrhh-tabla thead { display: none; }
    .rrhh-tabla tbody tr {
        border: 1px solid var(--rrhh-borde);
        border-radius: var(--rrhh-radio);
        margin-bottom: 12px;
        padding: 4px 0;
        background: var(--rrhh-blanco);
        box-shadow: var(--rrhh-sombra);
    }
    .rrhh-tabla tbody td {
        border-top: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 14px;
        text-align: right;
    }
    .rrhh-tabla tbody td::before {
        content: attr(data-etiqueta);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--rrhh-suave);
        text-align: left;
        flex: 0 0 42%;
    }
    /* Una celda sin etiqueta (la de acciones) ocupa toda la fila. */
    .rrhh-tabla tbody td[data-etiqueta=""]::before { content: none; }
    .rrhh-tabla tbody td[data-etiqueta=""] { justify-content: stretch; }
    .rrhh-tabla tbody td[data-etiqueta=""] .btn { width: 100%; }
    /* En tarjeta, el botón de acción ocupa el ancho completo y no lleva etiqueta. */
    .rrhh-tabla tbody td.rrhh-celda-accion::before { content: none; }
    .rrhh-tabla tbody td.rrhh-celda-accion { justify-content: stretch; }
    .rrhh-tabla tbody td.rrhh-celda-accion:empty { display: none; }
    .rrhh-tabla tbody td.rrhh-celda-accion .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   4b. Columna de acciones fija
   El botón "Marcar en reproceso" vive en la última de nueve columnas: al achicar
   la ventana quedaba fuera de la vista y había que arrastrar la tabla entera para
   alcanzarlo. Se ancla a la derecha para que esté siempre a un clic. Solo aplica
   en escritorio y tablet: por debajo de 768px la tabla ya es una lista de tarjetas
   y no hay scroll horizontal que compensar.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    /* Sin un ancho mínimo, nueve columnas en 1140px se reparten el espacio y las de
       texto largo (Estado, Reproceso) quedan aplastadas hasta ser ilegibles. Se deja
       que la tabla desborde y desplace: la columna de acciones queda fija, así que
       desplazarse no cuesta perder el botón. */
    .rrhh-tabla--fija { min-width: 1240px; }
    .rrhh-tabla--fija td[data-etiqueta="Estado"] { min-width: 170px; }
    .rrhh-tabla--fija td[data-etiqueta="Reproceso"] { min-width: 150px; }
    .rrhh-tabla--fija td[data-etiqueta="Colaborador"] { min-width: 170px; }
    .rrhh-tabla--fija td[data-etiqueta="Fecha de rechazo"],
    .rrhh-tabla--fija td[data-etiqueta="Fecha del PDF"] { white-space: nowrap; }

    .rrhh-tabla--fija th:last-child,
    .rrhh-tabla--fija td:last-child {
        position: sticky;
        right: 0;
        background: var(--rrhh-blanco);
        /* La sombra avisa de que hay contenido por debajo, hacia la izquierda. */
        box-shadow: -6px 0 6px -6px rgba(15, 40, 70, .18);
    }
    .rrhh-tabla--fija th:last-child {
        background: var(--rrhh-azul-claro);
        z-index: 3;
    }
    .rrhh-tabla--fija td:last-child { z-index: 1; }
    .rrhh-tabla--fija tbody tr:hover td:last-child { background: var(--rrhh-azul-fondo); }
    .rrhh-tabla--fija td.rrhh-celda-accion { white-space: nowrap; }
}
@media (min-width: 768px) and (max-width: 1100px) {
    /* En tablet la columna fija se come el ancho útil: el botón se queda con el
       icono y el texto viaja al aria-label. */
    .rrhh-celda-accion .rrhh-boton-texto {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* --------------------------------------------------------------------------
   4c. Cabeceras ordenables
   Cada cabecera es un botón: se ordena por el tipo de dato real de la columna
   (texto, número o fecha), no alfabéticamente a ciegas. La flecha indica el
   sentido actual; ↕ significa "se puede ordenar por aquí".
   -------------------------------------------------------------------------- */
.rrhh-orden {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    text-align: left;
}
.rrhh-orden:hover { text-decoration: underline; }
.rrhh-orden:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rrhh-orden-flecha { font-size: 10px; opacity: .55; }
.rrhh-orden--activa .rrhh-orden-flecha { opacity: 1; }

/* Listas de instrucciones dentro de una tarjeta. */
.rrhh-lista { margin: 0 0 4px; padding-left: 20px; }
.rrhh-lista li { margin-bottom: 8px; line-height: 1.55; }

/* En escritorio se ordena tocando la cabecera; el desplegable sobra. */
.rrhh-orden-movil { display: none; }
@media (max-width: 767px) {
    .rrhh-orden-movil {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
    }
    .rrhh-orden-movil label {
        margin: 0;
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--rrhh-suave);
    }
    .rrhh-orden-movil select { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   4d. Paginación
   Cada página son 50 filas pedidas al servidor en el momento: el navegador nunca
   pinta las 3.688 de golpe. Mientras llega la respuesta se cubre la tabla con un
   velo para que se vea que está cargando sin perder la posición de lectura.
   -------------------------------------------------------------------------- */
.rrhh-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 4px 4px;
    font-size: 13px;
    color: var(--rrhh-suave);
}
.rrhh-pager-botones { display: flex; flex-wrap: wrap; gap: 6px; }
.rrhh-pag {
    min-width: 40px;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid var(--rrhh-borde);
    border-radius: var(--rrhh-radio);
    background: var(--rrhh-blanco);
    color: var(--rrhh-azul);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.rrhh-pag:hover:not([disabled]):not(.rrhh-pag--activa) { background: var(--rrhh-azul-fondo); }
.rrhh-pag--activa {
    background: var(--rrhh-azul);
    border-color: var(--rrhh-azul);
    color: #fff;
    cursor: default;
}
.rrhh-pag[disabled] { opacity: .4; cursor: not-allowed; }
.rrhh-pager-puntos { align-self: center; padding: 0 2px; }

.rrhh-tabla-velo {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, .78);
    z-index: 5;
    font-size: 13px;
    color: var(--rrhh-suave);
}

@media (max-width: 560px) {
    /* En móvil el pie se apila y el conteo de páginas sobra: ya está en los botones. */
    .rrhh-pager { justify-content: center; text-align: center; }
    .rrhh-pager-total { display: none; }
}

/* --------------------------------------------------------------------------
   5. Estados
   -------------------------------------------------------------------------- */
.rrhh-estado {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.rrhh-estado--aceptada  { background: #E3F4E8; color: var(--rrhh-verde); }
.rrhh-estado--rechazada { background: #FBE7E9; color: var(--rrhh-rojo); }
.rrhh-estado--pendiente { background: #FEF3D7; color: var(--rrhh-ambar); }

/* Pantalla vacia: nunca dejar al usuario mirando un recuadro en blanco
   sin saber si el portal fallo o si de verdad no hay nada. */
.rrhh-vacio {
    text-align: center;
    padding: 48px 20px;
    color: var(--rrhh-suave);
}
.rrhh-vacio .rrhh-vacio-icono { font-size: 42px; color: #C9D3DE; display: block; margin-bottom: 12px; }
.rrhh-vacio strong { display: block; color: var(--rrhh-texto); font-size: 16px; margin-bottom: 6px; }

/* --------------------------------------------------------------------------
   6. Ventanas modales
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .modal-dialog {
        margin: 0;
        max-width: 100% !important;
        width: 100%;
        min-height: 100%;
    }
    .modal-content { border-radius: 0; min-height: 100vh; }
    .modal-body iframe { height: 68vh !important; }
    .modal-footer { flex-direction: column-reverse; gap: 8px; }
    .modal-footer .btn { width: 100%; margin: 0; }
}

/* --------------------------------------------------------------------------
   6b. La ventana de una boleta
   Antes eran DOS ventanas superpuestas: el PDF abajo y, encima, un cuadro
   preguntando si estaba de acuerdo. Tapaba justo lo que habia que leer para
   responder. Ahora es una sola: la decision arriba y el documento debajo,
   ocupando todo el alto disponible.
   -------------------------------------------------------------------------- */
.rrhh-modal-boleta .modal-dialog {
    max-width: 980px;
    width: 96vw;
    margin: 1.5rem auto;
}
.rrhh-modal-boleta .modal-content {
    height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.rrhh-modal-boleta .modal-header {
    flex: 0 0 auto;
    align-items: flex-start;
    padding: 14px 20px;
}
.rrhh-modal-encabezado .modal-title { font-size: 17px; font-weight: 600; margin: 0; }
.rrhh-modal-periodo {
    display: block;
    font-size: 13px;
    color: var(--rrhh-suave);
    margin-top: 2px;
}

/* El cuerpo es lo que crece: el documento se lleva todo el espacio que sobra. */
.rrhh-modal-boleta .modal-body {
    flex: 1 1 auto;
    position: relative;
    padding: 0;
    overflow: hidden;
    background: #E9EDF2;
}
.rrhh-modal-boleta .modal-body iframe {
    display: none;
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 1;
}
.rrhh-modal-boleta .modal-body iframe.rrhh-visor-activo { display: block; }

/* Mientras la boleta esta pendiente el documento va atenuado y con la marca de
   agua: es una vista para revisar, todavia no el comprobante. */
.rrhh-modal-pendiente .modal-body iframe { opacity: .8; }
.rrhh-modal-boleta .watermark {
    display: none;
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    padding: 0;
    line-height: 1.2;
    font-size: 64px;
    z-index: 2;
    pointer-events: none;   /* no debe estorbar el desplazamiento del PDF */
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* Se enciende con una clase y no con .show() de jQuery, que devolveria
   display:block y perderia el centrado. */
.rrhh-modal-boleta .watermark.rrhh-marca-visible { display: flex; }

/* --- franja de decision ---------------------------------------------------
   Ambar, el mismo color con el que la lista marca "Pendiente": quien llega aqui
   ya vio ese color y lo reconoce. Es el unico acento de la ventana. */
.rrhh-decision {
    flex: 0 0 auto;
    background: #FEF9EA;
    border-top: 1px solid #F0DFAE;
    border-bottom: 1px solid #F0DFAE;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.rrhh-decision-texto {
    flex: 1 1 320px;
    min-width: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6B4E00;
}
.rrhh-decision-texto p { margin: 0; }
.rrhh-decision-botones {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rrhh-decision-botones .btn { min-height: var(--rrhh-toque); }
/* Mientras la boleta esta pendiente la respuesta es obligatoria: no hay aspa
   para cerrar ni se cierra tocando fuera. Solo se sale aceptando o rechazando. */
.rrhh-modal-pendiente .modal-header .close { display: none; }

/* El rechazo se confirma aqui mismo, sin otro cuadro encima. */
.rrhh-decision-confirmar {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.rrhh-decision-pregunta {
    flex: 1 1 300px;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
    color: #86212B;
}

@media (max-width: 767px) {
    .rrhh-modal-boleta .modal-dialog { width: 100%; margin: 0; }
    .rrhh-modal-boleta .modal-content { height: 100vh; min-height: 100vh; border-radius: 0; }
    /* Gana al 68vh general de mas arriba: aqui el PDF llena lo que quede. */
    .rrhh-modal-boleta .modal-body iframe { height: 100% !important; }
    .rrhh-modal-boleta .watermark { font-size: 38px; }

    .rrhh-decision { padding: 12px 16px; gap: 10px; }
    .rrhh-decision-texto { flex-basis: 100%; max-height: 5.5em; overflow-y: auto; }
    .rrhh-decision-botones { width: 100%; }
    /* En el celular los dos botones de respuesta ocupan la fila entera: son el
       objetivo de la pantalla y no deben quedar del tamano de un enlace. */
    .rrhh-decision-botones .btn-primary,
    .rrhh-decision-botones .btn-danger,
    .rrhh-decision-botones .btn-outline-secondary { flex: 1 1 45%; }
}

/* --------------------------------------------------------------------------
   7. Pie de pagina
   Estaba fijo al fondo y en el celular tapaba la ultima fila de la tabla.
   -------------------------------------------------------------------------- */
.myfooter {
    position: static;
    background: var(--rrhh-azul);
    color: #fff;
    font-size: 12px;
    line-height: 1.6;
    padding: 14px 16px;
    text-align: center;
    margin-top: 32px;
}
.myfooter strong { font-weight: 400; }

/* --------------------------------------------------------------------------
   8. Capa de espera
   -------------------------------------------------------------------------- */
.rrhh-cargando {
    position: fixed;
    inset: 0;
    background: rgba(244,246,248,.85);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    color: var(--rrhh-suave);
    font-size: 14px;
}
.rrhh-spinner {
    width: 38px; height: 38px;
    border: 3px solid #D5DEE8;
    border-top-color: var(--rrhh-azul);
    border-radius: 50%;
    animation: rrhh-girar .8s linear infinite;
}
@keyframes rrhh-girar { to { transform: rotate(360deg); } }

/* Hay gente a la que el movimiento le produce mareo; el sistema lo avisa. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .rrhh-spinner { animation: none; border-top-color: #D5DEE8; }
}

/* --------------------------------------------------------------------------
   9. Avisos en linea
   Reemplazan a los alert() del navegador, que en el celular tapan la pantalla
   y no dicen que hacer a continuacion.
   -------------------------------------------------------------------------- */
.rrhh-aviso {
    border-radius: var(--rrhh-radio);
    padding: 12px 14px;
    font-size: 14px;
    margin-bottom: 16px;
    display: none;
    border: 1px solid transparent;
}
.rrhh-aviso.visible { display: block; }
.rrhh-aviso--error { background: #FBE7E9; border-color: #F1B9BE; color: #86212B; }
.rrhh-aviso--ok    { background: #E3F4E8; border-color: #B4DFC2; color: #15602A; }
.rrhh-aviso--info  { background: var(--rrhh-azul-fondo); border-color: #BBD7F2; color: #12507F; }

/* Solo para lectores de pantalla. */
.rrhh-solo-lectores {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   9. Panel de control

   Las graficas se dibujan en SVG desde el servidor (modulos/graficos.php).
   No hay libreria de terceros: la anterior venia de un CDN al que este
   servidor no llega, asi que las cuatro graficas salian en blanco.

   Toda la paleta sale de las variables de arriba. Aqui no se inventa ningun
   color nuevo: verde = aceptada, rojo = rechazada, azul = actividad, que es
   el mismo codigo que ya usan las etiquetas de estado del portal.
   -------------------------------------------------------------------------- */

.rrhh-filtro-obra {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}
.rrhh-filtro-obra .rrhh-campo { flex: 1 1 260px; margin-bottom: 0; }
.rrhh-filtro-obra .rrhh-acciones { margin-top: 0; }

/* ---- La cinta: una sola barra que responde "¿están firmando?" ----------- */
.rrhh-cinta {
    display: flex;
    height: 40px;
    border-radius: var(--rrhh-radio);
    overflow: hidden;
    background: var(--rrhh-borde);
}
.rrhh-cinta-parte { display: block; height: 100%; }
/* Un minimo visible: una porcion del 0,1 % debe seguir viendose, porque
   "casi ninguna" no es lo mismo que "ninguna". */
.rrhh-cinta-parte { min-width: 3px; }
.rrhh-cinta--acepta  { background: var(--rrhh-verde); }
.rrhh-cinta--rechaza { background: var(--rrhh-rojo); }

.rrhh-cinta-detalle {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    margin: 16px 0 0;
    padding: 0;
}
.rrhh-cinta-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.rrhh-cinta-punto {
    width: 10px; height: 10px;
    border-radius: 2px;
    flex: none;
    align-self: center;
}
.rrhh-cinta-cifra {
    font-size: 20px;
    font-weight: 600;
    /* Cifras de ancho fijo: en una pantalla de datos, los numeros deben poder
       compararse de un vistazo sin que el ancho de cada digito los descuadre. */
    font-variant-numeric: tabular-nums;
}
.rrhh-cinta-nombre { color: var(--rrhh-suave); }
.rrhh-cinta-pct { color: var(--rrhh-texto); font-weight: 600; }

/* ---- Cifras de apoyo ---------------------------------------------------- */
.rrhh-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 40px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--rrhh-borde);
}
.rrhh-kpi { flex: 1 1 140px; }
.rrhh-kpi-cifra {
    display: block;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.rrhh-kpi-nombre {
    display: block;
    font-size: 13px;
    color: var(--rrhh-suave);
    margin-top: 2px;
}

/* ---- Graficas de lineas ------------------------------------------------- */
/* El envoltorio se desplaza de lado en pantalla angosta; la pagina, nunca. */
.rrhh-grafico-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.rrhh-grafico {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
@media (max-width: 640px) {
    /* Por debajo de este ancho el SVG deja de encogerse: preferimos que la
       grafica se arrastre de lado antes que dejar los numeros ilegibles. */
    .rrhh-grafico { min-width: 560px; }
}
.rrhh-grafico-rejilla { stroke: var(--rrhh-borde); stroke-width: 1; }
.rrhh-grafico-eje {
    fill: var(--rrhh-suave);
    font-size: 12px;
    font-family: inherit;
}
.rrhh-grafico-linea {
    fill: none;
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.rrhh-grafico-punto { stroke: var(--rrhh-blanco); stroke-width: 1.5; }

.rrhh-grafico-leyenda {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 12px 0 0;
    padding: 0;
    font-size: 14px;
    color: var(--rrhh-suave);
}
.rrhh-grafico-leyenda strong {
    color: var(--rrhh-texto);
    font-variant-numeric: tabular-nums;
}
.rrhh-grafico-marca {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 2px;
    margin-right: 8px;
}
/* La serie discontinua se marca con un trazo, no con un cuadro de color: es la
   misma pista que da la grafica y sirve aunque no se distingan los colores. */
.rrhh-grafico-marca--rayada {
    width: 16px; height: 0;
    border-top: 3px dashed;
    border-radius: 0;
    transform: translateY(-3px);
}

.rrhh-nota-grafico {
    font-size: 12px;
    color: var(--rrhh-suave);
    margin: 10px 0 0;
}

/* ---- Ranking por obra ---------------------------------------------------
   En horizontal y no en columnas: los nombres de obra ("C.Vial.Pto.Berm",
   "PIQU.ALEJANDRIA") son largos y en la version anterior salian girados 90
   grados y recortados, que es como no ponerlos.
   ------------------------------------------------------------------------- */
.rrhh-ranking { list-style: none; margin: 0; padding: 0; }
.rrhh-ranking-fila {
    display: grid;
    grid-template-columns: minmax(120px, 190px) 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 7px 0;
}
.rrhh-ranking-nombre {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rrhh-ranking-pista {
    background: var(--rrhh-azul-fondo);
    border-radius: 4px;
    height: 16px;
    overflow: hidden;
}
.rrhh-ranking-valor {
    display: block;
    height: 100%;
    border-radius: 4px;
    min-width: 2px;
}
.rrhh-ranking-cifra {
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 62px;
}

.rrhh-ayuda-bloque {
    font-size: 13px;
    color: var(--rrhh-suave);
    margin: 0 0 16px;
}

@media (max-width: 575px) {
    /* En el celular el nombre de la obra necesita la linea entera; partirlo en
       tres columnas lo dejaba en dos letras y unos puntos suspensivos. */
    .rrhh-ranking-fila {
        grid-template-columns: 1fr auto;
        gap: 4px 12px;
    }
    .rrhh-ranking-nombre { grid-column: 1 / -1; white-space: normal; }
    .rrhh-kpi-cifra { font-size: 24px; }
    .rrhh-cinta-detalle { gap: 8px 20px; }
}