/* Chalán claro: paleta común y Poppins local, sin solicitudes a Google Fonts. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins/poppins-700.woff2') format('woff2'); }
:root {
    --fondo-pagina: #f5f7f8;
    --fondo-sutil: #f7f9f9;
    --texto-principal: #212529;
    --texto-secundario: #647078;
    --acento: #147d83;
    --acento-oscuro: #10646a;
    --acento-suave: #eaf7f6;
    --borde-suave: #e0e7e7;
    --borde-acento: #c6e5e2;
    --azul-estructura: #3563a3;
    --azul-estructura-suave: #edf3fc;
    --azul-estructura-borde: #d9e5f5;
    --cabecera-tabla-fondo: var(--azul-estructura-suave);
    --cabecera-tabla-texto: var(--azul-estructura);
    --cabecera-tabla-borde: var(--azul-estructura-borde);
    --bs-body-font-family: 'Poppins', 'Segoe UI', sans-serif;
    --bs-body-color: #212529;
    --bs-secondary-color: #647078;
    --bs-link-color: #147d83;
    --bs-link-hover-color: #10646a;
    --bs-primary-rgb: 20, 125, 131;
}
:root {
    --bg: var(--fondo-pagina);
    --panel: #ffffff;
    --line: var(--borde-suave);
    --text: var(--texto-principal);
    --muted: var(--texto-secundario);
    --primary: var(--acento);
    --primary-dark: var(--acento-oscuro);
    --teal: var(--acento);
}

/* Cambio de espacio discreto; el área táctil conserva 44 px sin agrandar la pista. */
.selector-espacio { display:flex; align-items:center; justify-content:center; gap:10px; margin:0; padding:0 8px; border-radius:10px; background:var(--fondo-sutil); }
.selector-espacio-etiqueta { font-size:12px; color:var(--texto-secundario); white-space:nowrap; }
.selector-espacio-etiqueta.seleccionada { color:var(--azul-estructura); font-weight:600; }
.interruptor-espacio { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:0; border:0; border-radius:8px; background:transparent; cursor:pointer; }
.interruptor-espacio-pista { position:relative; width:38px; height:22px; border:1px solid var(--azul-estructura-borde); border-radius:20px; background:var(--azul-estructura-suave); }
.interruptor-espacio-pista::after { content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:var(--azul-estructura); }
.interruptor-espacio[aria-checked="true"] .interruptor-espacio-pista::after { transform:translateX(16px); }
.interruptor-espacio:hover .interruptor-espacio-pista { border-color:var(--azul-estructura); }
.interruptor-espacio:focus-visible { outline:2px solid var(--azul-estructura); outline-offset:2px; }

/* La cuenta agrupa identidad y espacio; el tema mantiene su propio control. */
.espacio-cuenta-escritorio { flex-shrink:0; margin-inline:4px 8px; }
.menu-cuenta-movil { position:relative; }
.menu-cuenta-movil summary { display:flex; align-items:center; gap:8px; min-height:44px; padding:0 6px; border-radius:8px; cursor:pointer; list-style:none; font-size:13px; color:var(--texto-principal); }
.menu-cuenta-movil summary::-webkit-details-marker { display:none; }
.menu-cuenta-movil summary > .bi-person-circle { font-size:20px; color:var(--azul-estructura); }
.menu-cuenta-movil summary > .bi-chevron-down { font-size:10px; }
.menu-cuenta-movil[open] summary, .menu-cuenta-movil summary:hover { background:var(--fondo-sutil); }
.menu-cuenta-movil summary:focus-visible { outline:2px solid var(--azul-estructura); outline-offset:2px; }
.menu-cuenta-panel { position:absolute; z-index:1030; top:calc(100% + 8px); left:0; width:min(280px,calc(100vw - 36px)); padding:12px; border:1px solid var(--borde-suave); border-radius:10px; background:var(--panel); box-shadow:0 6px 20px rgb(0 0 0 / .08); }
.menu-cuenta-panel .identidad-usuario { text-align:left; padding:0 2px 12px; }
@media (min-width:641px) and (max-width:991.98px) { .menu-cuenta-panel { left:auto; right:0; } }
@media (min-width:992px) { .cuenta-superior > .identidad-usuario { max-width:220px; } }

/* Trabajadores: formulario adaptable y desplazamiento lateral solo en la tabla. */
.bloque-trabajadores {
    padding: 18px;
    min-width: 0;
}
.bloque-trabajadores h2, .titulo-alta-trabajador {
    font-size: 1.05rem;
    font-weight: 700;
}
.bloque-trabajadores h2 {
    margin-bottom: 18px;
}
.titulo-alta-trabajador {
    cursor: pointer;
}
.titulo-alta-trabajador:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
}
.tabla-trabajadores {
    min-width: 820px;
}
.tabla-trabajadores td {
    max-width: 260px;
    overflow-wrap: anywhere;
}

/* Catálogos: dos paneles en pantallas amplias, apilados en dispositivos pequeños. */
.rejilla-catalogos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.catalogo {
    padding: 18px;
    min-width: 0;
}
.catalogo h2 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 18px;
}
.formulario-catalogo {
    display: grid;
    gap: 12px;
    margin-bottom: 24px;
}
.formulario-catalogo > button {
    justify-self: start;
}
.catalogo td {
    overflow-wrap: anywhere;
}
@media (max-width: 1199.98px) {
    .rejilla-catalogos { grid-template-columns: minmax(0, 1fr); }
}

* {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background: var(--bg);
    font-size: 15px;
    overflow-x: hidden;
}

.portal-page {
    min-height: 100vh;
}

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.12), transparent 36%),
        linear-gradient(315deg, rgba(15, 118, 110, 0.12), transparent 38%),
        var(--bg);
}

.login-card {
    width: min(100%, 420px);
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(16, 24, 40, 0.08);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.brand-mark {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 8px;
    background: var(--teal);
    font-size: 1.35rem;
}

.brand-mark.with-logo {
    background: #fff;
    border: 1px solid var(--line);
}

.brand-mark img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.login-brand h1,
.page-heading h1 {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
}

.login-brand p,
.page-heading p {
    margin: 3px 0 0;
    color: var(--muted);
}

.panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.04);
}

.page-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 18px;
    margin-bottom: 18px;
}

.btn {
    min-height: 40px;
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

@media (max-width: 640px) {
    body {
        font-size: 14px;
    }

    .auth-page {
        padding: 14px;
    }

    .login-card {
        padding: 20px;
    }

    .page-heading {
        align-items: start;
        flex-direction: column;
        gap: 12px;
    }
}

/* Estructura original: barra de 64px, lateral de 248px y contenido flexible. */
.barra-superior {
    position: sticky;
    top: 0;
    z-index: 1020;
    min-height: 64px;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--line);
}
.marca-superior, .cuenta-superior, .marca-menu {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.marca-superior {
    font-weight: 800;
}
.marca-superior img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}
.identidad-usuario {
    display: grid;
    text-align: right;
    overflow-wrap: anywhere;
}
.identidad-usuario strong {
    font-size: .9rem;
}
.identidad-usuario span {
    color: var(--muted);
    font-size: .8rem;
}
.salida-portal {
    white-space: nowrap;
}
.estructura-portal {
    display: grid;
    grid-template-columns: 248px minmax(0,1fr);
    min-height: calc(100vh - 64px);
}
.lateral-portal {
    --bs-offcanvas-width: min(320px, 88vw);
    padding: 22px 16px;
    border-right: 1px solid var(--line);
    background: var(--panel) !important;
}
.cabecera-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}
.marca-menu img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}
.marca-menu strong {
    font-size: .98rem;
    font-weight: 800;
}
.menu-portal {
    display: grid;
    gap: 6px;
}
.enlace-menu {
    min-height: 42px;
    padding: 9px 10px;
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--text);
    border-radius: 8px;
    text-decoration: none;
}
.enlace-menu:hover, .enlace-menu.activo {
    background: var(--acento-suave);
    color: var(--primary-dark);
}
.enlace-menu:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.contenido-portal {
    padding: 28px;
    min-width: 0;
    overflow-wrap: anywhere;
}
.resumen-cuenta {
    padding: 18px;
}
.resumen-cuenta h2 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 20px;
}
.datos-cuenta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 64px;
}
.datos-cuenta dt {
    font-size: .85rem;
    font-weight: 400;
    color: var(--muted);
    margin-bottom: 6px;
}
.datos-cuenta dd {
    font-weight: 600;
}
.estado-activo {
    color: #08604b;
    background: #e7f5ef;
    border-radius: 6px;
    padding: 3px 9px;
    font-size: .85rem;
}
.nota-portal {
    border-top: 1px solid var(--line);
    padding-top: 16px;
    color: var(--muted);
}
.salto-contenido:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 1100;
    background: white;
    padding: 12px;
}
/* Bootstrap gestiona foco, fondo modal, Escape y desplazamiento del menú móvil. */
@media (max-width: 991.98px) {
    .estructura-portal {
        grid-template-columns: minmax(0,1fr);
    }
    .contenido-portal {
        padding: 18px;
    }
    .barra-superior {
        padding: 10px 18px;
        flex-wrap: wrap;
    }
    .lateral-portal {
        overflow-y: auto;
    }
}
@media (max-width: 640px) {
    .barra-superior {
        min-height: 58px;
        padding: 10px 14px;
        gap: 10px;
    }
    .cuenta-superior {
        width: 100%;
        justify-content: space-between;
    }
    .identidad-usuario {
        text-align: left;
    }
    .contenido-portal {
        padding: 14px;
    }
    .page-heading h1 {
        font-size: 1.28rem;
    }
}
@media (max-width: 390px) {
    .contenido-portal {
        padding: 10px;
    }
}


/* Directorio de personas: estilos propios, limitados a Trabajadores. */
.directorio-trabajadores { --acento-directorio: var(--acento); color: var(--texto-principal); }
.encabezado-directorio { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 6px 0 28px; }
.etiqueta-seccion { font-size: .68rem; font-weight: 700; letter-spacing: .13em; color: var(--texto-secundario); }
.encabezado-directorio h1 { font-size: 1.9rem; letter-spacing: -.04em; margin: 5px 0 7px; font-weight: 700; }
.encabezado-directorio p { margin: 0; color: var(--texto-secundario); font-size: .9rem; }
.directorio-trabajadores .btn-primary { background: var(--acento-directorio); border-color: var(--acento-directorio); border-radius: 9px; }
.boton-nuevo { display: flex; align-items: center; gap: 9px; padding: 11px 16px; white-space: nowrap; font-size: .85rem; }
.panel-directorio { border: 1px solid var(--borde-suave); background: #fff; border-radius: 16px; box-shadow: 0 5px 20px rgba(33, 37, 41, .025); overflow: hidden; }
.barra-busqueda { padding: 22px 24px 10px; display: flex; align-items: center; gap: 12px; }
.campo-busqueda { display: flex; align-items: center; flex: 1; min-width: 0; border: 1px solid var(--borde-suave); background: var(--fondo-sutil); border-radius: 10px; padding: 0 14px; gap: 12px; color: var(--texto-secundario); }
.campo-busqueda:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(20, 125, 131, .14); }
.campo-busqueda input { width: 100%; min-width: 0; padding: 12px 0; border: 0; outline: none; background: transparent; color: var(--texto-principal); font-size: .88rem; }
.campo-busqueda input::placeholder { color: var(--texto-secundario); opacity: 1; }
.boton-filtros { border: 1px solid var(--borde-suave); border-radius: 9px; padding: 11px 15px; font-size: .85rem; white-space: nowrap; }
.boton-filtros[aria-expanded=true] { background: var(--acento-suave); color: var(--acento); border-color: var(--borde-acento); }
.limpiar-busqueda { color: var(--texto-secundario); font-size: .8rem; text-underline-offset: 3px; padding: 10px 0; }
.opciones-filtro { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; padding: 12px 24px; }
.directorio-trabajadores .form-label { font-size: .8rem; font-weight: 500; }
.directorio-trabajadores .form-select, .directorio-trabajadores .form-control { font-size: .88rem; border-color: var(--borde-suave); border-radius: 8px; min-height: 42px; }
.aviso-busqueda { min-height: 31px; padding: 0 24px 10px; font-size: .75rem; color: var(--texto-secundario); display: flex; gap: 12px; align-items: center; }
.cabecera-resultados { padding: 18px 24px; border-top: 1px solid var(--borde-suave); display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.cabecera-resultados h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.cabecera-resultados h2 span { margin-left: 7px; padding: 3px 9px; border-radius: 6px; background: var(--acento-suave); color: var(--acento); font-size: .75rem; }
.cabecera-resultados p { margin: 0; color: var(--texto-secundario); font-size: .75rem; }
.contenedor-directorio { position: relative; }
.tabla-directorio { width: 100%; border-collapse: collapse; font-size: .84rem; }
.tabla-directorio th { padding: 12px 24px; font-size: .72rem; border-top: 1px solid var(--borde-suave); }
.tabla-directorio td { padding: 17px 24px; border-bottom: 1px solid var(--borde-suave); vertical-align: middle; }
.tabla-directorio tbody tr:last-child td { border-bottom: 0; }
.tabla-directorio tbody tr:hover { background: var(--fondo-sutil); }
.identidad-colaborador { display: flex; align-items: center; gap: 12px; }
.avatar-colaborador { flex: 0 0 38px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: var(--acento-suave); color: var(--acento); border: 1px solid var(--borde-acento); border-radius: 12px; font-size: .9rem; font-weight: 600; }
.nombre-colaborador { border: 0; background: none; color: var(--texto-principal); font-weight: 600; font-size: .83rem; padding: 0; text-align: left; line-height: 1.5; }
.nombre-colaborador:hover { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
.dato-secundario { display: block; color: var(--texto-secundario); font-size: .74rem; margin-top: 3px; }
.tipo-colaborador { font-size: .77rem; }
.estado-colaborador { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 500; padding: 6px 9px; border-radius: 7px; white-space: nowrap; }
.estado-pendiente { background: #fff7e8; color: #916112; }
.estado-habilitado { background: #eaf6f0; color: #24654b; }
.estado-bloqueado { background: #f0f2f5; color: #536174; }
.boton-ficha { color: var(--acento); background: transparent; border: 0; padding: 9px 0; font-size: .75rem; white-space: nowrap; }
.boton-ficha:hover { color: var(--acento); }
.directorio-trabajadores button:focus-visible, .directorio-trabajadores a:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.paginacion-trabajadores { padding: 18px 24px; border-top: 1px solid var(--borde-suave); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; font-size: .76rem; }
.directorio-trabajadores .page-link { font-size: .76rem; padding: 7px 11px; }
#resultados-trabajadores[aria-busy=true] { opacity: .55; pointer-events: none; }
.directorio-vacio { padding: 45px 12px; text-align: center; color: var(--texto-secundario); }
.directorio-vacio > i { display: block; font-size: 1.8rem; color: #9aaac6; margin-bottom: 15px; }
.directorio-vacio h3 { font-size: 1.05rem; color: var(--texto-principal); }
.directorio-vacio p { margin: 10px 0 4px; }
.directorio-vacio span { font-size: .8rem; }
/* Ficha y alta comparten el panel nativo de Bootstrap, sin duplicar lógica de acceso. */
.directorio-trabajadores .ficha-trabajador { --bs-offcanvas-width: 490px; }
.ficha-trabajador .offcanvas-header { padding: 23px; border-bottom: 1px solid var(--borde-suave); }
.ficha-trabajador .offcanvas-header h2 { font-size: 1rem; margin: 0; }
.ficha-trabajador .offcanvas-body { padding: 24px; }
.presentacion-ficha { padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px solid var(--borde-suave); }
.presentacion-ficha .avatar-colaborador { width: 56px; height: 56px; font-size: 1.4rem; margin-bottom: 17px; }
.presentacion-ficha h3 { font-size: 1.15rem; line-height: 1.5; }
.presentacion-ficha p { margin-bottom: 0; color: var(--texto-secundario); font-size: .85rem; }
.ficha-trabajador h4 { font-size: .88rem; margin-bottom: 18px; font-weight: 600; }
.datos-ficha { margin-bottom: 28px; }
.datos-ficha > div { margin: 14px 0; }
.datos-ficha dt { font-size: .76rem; color: var(--texto-secundario); font-weight: 400; margin-bottom: 5px; }
.datos-ficha dd { font-size: .86rem; overflow-wrap: anywhere; }
.acceso-ficha { padding: 20px; border-radius: 12px; background: var(--fondo-sutil); font-size: .85rem; }
@media (max-width: 1199.98px) {
    .tabla-directorio th, .tabla-directorio td { padding-left: 16px; padding-right: 16px; }
}
/* Una fila se convierte en tarjeta en móvil: conserva datos y acciones, sin desplazamiento lateral. */
@media (max-width: 767.98px) {
    .encabezado-directorio { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 22px; }
    .encabezado-directorio h1 { font-size: 1.65rem; }
    .barra-busqueda { flex-wrap: wrap; padding: 18px 16px 8px; gap: 10px; }
    .campo-busqueda { flex-basis: 100%; }
    .campo-busqueda input { font-size: 1rem; }
    .opciones-filtro { grid-template-columns: 1fr; padding-inline: 16px; }
    .directorio-trabajadores .form-control, .directorio-trabajadores .form-select { font-size: 1rem; }
    .aviso-busqueda { padding-inline: 16px; }
    .cabecera-resultados { padding: 18px 16px; }
    .cabecera-resultados p { display: none; }
    .tabla-directorio, .tabla-directorio tbody { display: block; }
    .tabla-directorio thead { display: none; }
    .tabla-directorio tr { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 20px 16px; border-bottom: 1px solid var(--borde-suave); }
    .tabla-directorio td { display: block; padding: 0; border: 0; }
    .tabla-directorio td:first-child { grid-column: 1 / -1; }
    .tabla-directorio td:nth-child(2) { grid-column: 1 / -1; padding-left: 50px; }
    .tabla-directorio td:nth-child(3) { align-self: center; }
    .tabla-directorio .acciones-colaborador { text-align: right; }
    .nombre-colaborador { font-size: .88rem; }
    .estado-colaborador { white-space: normal; }
    .paginacion-trabajadores { padding: 16px; }
}

/* Navegación común: jerarquía visible, estado activo y foco conservado con Bootstrap. */
.lateral-portal { padding: 25px 16px; border-color: var(--borde-suave); }
.cabecera-menu { padding: 2px 6px 25px; margin-bottom: 0; }
.marca-menu { gap:10px; min-width:0; }
.marca-menu img { width:34px; height:34px; flex-shrink:0; object-fit:contain; }
.marca-menu > div { min-width:0; overflow-wrap:anywhere; }
.cabecera-menu { gap:8px; }
.cabecera-menu .btn-close { flex-shrink:0; width:44px; height:44px; padding:0; background-size:16px; }
.marca-menu strong { font-size: .94rem; color: var(--texto-principal); }
.subtitulo-marca { display: block; font-size: .69rem; font-weight: 400; color: var(--texto-secundario); margin-top: 2px; }
.menu-portal { gap: 7px; }
.grupo-menu { color: var(--texto-secundario); font-size: .62rem; font-weight: 600; letter-spacing: .12em; padding: 18px 12px 5px; }
.enlace-menu { min-height: 42px; border: 1px solid transparent; padding: 9px 12px; gap: 11px; border-radius: 11px; color: var(--texto-secundario); }
.enlace-menu > i:first-child { font-size: 1.1rem; }
.texto-menu { display: block; min-width: 0; }
.texto-menu > span { font-size: .83rem; font-weight: 500; }

.enlace-menu .flecha-menu { margin-left: auto; font-size: .62rem; opacity: 0; }
.enlace-menu:hover { background: var(--azul-estructura-suave); color: var(--azul-estructura); }
.enlace-menu.activo { background: var(--azul-estructura-suave); border-color: var(--azul-estructura-borde); color: var(--azul-estructura); }
.enlace-menu.activo .flecha-menu { opacity: 1; }

.barra-superior { border-color: var(--borde-suave); }
.identidad-usuario strong { color: var(--texto-principal); font-size: .82rem; }
.identidad-usuario span { color: var(--texto-secundario); font-size: .72rem; }
.salida-portal { border-color: var(--borde-suave); color: var(--texto-secundario); font-size: .8rem; border-radius: 9px; }
/* Catálogos comparte la tipografía, colores y superficies del directorio aprobado. */
.modulo-catalogos { color: var(--texto-principal); }
.modulo-catalogos .rejilla-catalogos { gap: 24px; align-items: start; }
.modulo-catalogos .catalogo { border: 1px solid var(--borde-suave); border-radius: 16px; padding: 0; box-shadow: 0 5px 20px rgba(33, 37, 41, .025); overflow: hidden; }
.cabecera-catalogo { display: flex; align-items: center; gap: 13px; padding: 24px; border-bottom: 1px solid var(--borde-suave); }
.icono-catalogo { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--acento-suave); color: var(--acento); font-size: 1.25rem; }
.modulo-catalogos .catalogo h2 { font-size: 1rem; font-weight: 600; margin: 0 0 5px; }
.cabecera-catalogo p { margin: 0; font-size: .76rem; color: var(--texto-secundario); }
.cantidad-catalogo { display: inline-block; margin-left: 5px; padding: 2px 7px; border-radius: 5px; background: var(--acento-suave); color: var(--acento); font-size: .7rem; vertical-align: middle; }
.modulo-catalogos .formulario-catalogo { padding: 22px 24px; margin: 0; gap: 15px; }
.modulo-catalogos .form-label { color: var(--texto-secundario); font-size: .8rem; margin-bottom: 7px; }
.modulo-catalogos .form-control { min-height: 42px; border-color: var(--borde-suave); border-radius: 9px; font-size: .87rem; }
.modulo-catalogos .btn-primary { padding: 10px 15px; background: var(--acento); border-color: var(--acento); border-radius: 9px; font-size: .8rem; }
.modulo-catalogos .tabla-catalogo { position: relative; border-top: 1px solid var(--borde-suave); }
.modulo-catalogos table { margin: 0; font-size: .82rem; }
.modulo-catalogos thead th { font-size: .72rem; padding: 12px 20px; }

/* Cabeceras uniformes en todos los listados del portal. */
.portal-page table thead th {
    background-color: var(--cabecera-tabla-fondo);
    color: var(--cabecera-tabla-texto);
    font-size: .8125rem;
    font-weight: 600;
    border-bottom: 1px solid var(--cabecera-tabla-borde);
}
.modulo-catalogos tbody td { padding: 16px 20px; border-color: var(--borde-suave); color: var(--texto-principal); }
.modulo-catalogos tbody tr:last-child td { border-bottom: 0; }
.modulo-catalogos .direccion-catalogo { font-size: .75rem; color: var(--texto-secundario); min-width: 110px; }
.estado-catalogo { display: inline-block; padding: 5px 8px; font-size: .7rem; border-radius: 6px; }
.catalogo-activo { background: #eaf6f0; color: #24654b; }
.catalogo-inactivo { background: #f0f2f5; color: #536174; }
.accion-catalogo { border: 1px solid var(--borde-suave); border-radius: 7px; background: #fff; color: var(--texto-secundario); padding: 7px 10px; font-size: .73rem; }
.accion-catalogo:hover { color: var(--acento); background: var(--acento-suave); border-color: var(--borde-acento); }
.modulo-catalogos button:focus-visible, .tabla-catalogo:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.vacio-catalogo { padding: 20px 0; text-align: center; color: var(--texto-secundario); }
.vacio-catalogo > i { font-size: 1.7rem; color: #9aaac6; }
.vacio-catalogo p { margin: 10px 0 6px; font-size: .82rem; }
.vacio-catalogo span { font-size: .73rem; }
@media (max-width: 575.98px) {
    .cabecera-catalogo { padding: 20px 16px; }
    .modulo-catalogos .formulario-catalogo { padding: 20px 16px; }
    .modulo-catalogos thead th, .modulo-catalogos tbody td { padding: 12px; }
    .modulo-catalogos .form-control { font-size: 1rem; }
    .modulo-catalogos table { min-width: 330px; }
    .modulo-catalogos .accion-catalogo { min-height: 38px; }
}
/* Mantener estados y acciones legibles; las sedes pueden desplazarse dentro de la tabla. */
.modulo-catalogos .estado-catalogo, .modulo-catalogos .accion-catalogo { white-space: nowrap; }

/* Configuración compacta: una tabla visible; las altas quedan en paneles laterales. */
.configuracion-compacta .encabezado-directorio { margin-bottom: 22px; }
.pestanas-catalogos { display: flex; gap: 24px; padding: 0 22px; border-bottom: 1px solid var(--borde-suave); }
.pestana-catalogo { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 18px 0; font-size: .85rem; color: var(--texto-secundario); }
.pestana-catalogo.active { color: var(--azul-estructura); border-bottom-color: var(--azul-estructura); font-weight: 600; }
.acciones-catalogo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; }
.acciones-catalogo p { margin: 0; color: var(--texto-secundario); font-size: .8rem; }
.configuracion-compacta .tabla-catalogo th:first-child { width: 65%; }
.configuracion-compacta .tabla-catalogo th:last-child, .configuracion-compacta .tabla-catalogo td:last-child { text-align: right; }
.configuracion-compacta .tabla-catalogo td { padding-top: 13px; padding-bottom: 13px; }
.formulario-configuracion { --bs-offcanvas-width: 440px; }
.formulario-configuracion .offcanvas-header { padding: 22px; border-bottom: 1px solid var(--borde-suave); }
.formulario-configuracion h2 { font-size: 1.05rem; margin: 0; }
.formulario-configuracion .offcanvas-body { padding: 22px; }
.formulario-configuracion .offcanvas-body > p { color: var(--texto-secundario); font-size: .85rem; }
.modulo-catalogos .formulario-configuracion .formulario-catalogo { padding: 12px 0; }
@media (max-width: 575.98px) {
    .pestanas-catalogos { padding: 0 14px; gap: 20px; }
    .pestana-catalogo { font-size: .8rem; }
    .acciones-catalogo { padding: 16px 14px; align-items: flex-start; }
    .acciones-catalogo p { max-width: 55%; font-size: .74rem; }
    .acciones-catalogo .btn { white-space: nowrap; }
    .configuracion-compacta .tabla-catalogo th:first-child { width: auto; }
}

/* En celular se conserva una zona táctil cómoda aunque el menú sea de una sola línea. */
@media (max-width: 991.98px) { .enlace-menu { min-height: 44px; } }


/* Estados interactivos de Bootstrap armonizados con la paleta, incluido hover y teclado. */
body { font-family: var(--bs-body-font-family); }
.auth-page { background: var(--fondo-pagina); }
.btn-primary {
    --bs-btn-bg: var(--acento); --bs-btn-border-color: var(--acento);
    --bs-btn-hover-bg: var(--acento-oscuro); --bs-btn-hover-border-color: var(--acento-oscuro);
    --bs-btn-active-bg: var(--acento-oscuro); --bs-btn-active-border-color: var(--acento-oscuro);
    --bs-btn-disabled-bg: var(--acento); --bs-btn-disabled-border-color: var(--acento);
    --bs-btn-focus-shadow-rgb: 20, 125, 131;
}
.btn-outline-primary {
    --bs-btn-color: var(--acento); --bs-btn-border-color: var(--acento);
    --bs-btn-hover-bg: var(--acento); --bs-btn-hover-border-color: var(--acento);
    --bs-btn-active-bg: var(--acento-oscuro); --bs-btn-active-border-color: var(--acento-oscuro);
    --bs-btn-focus-shadow-rgb: 20, 125, 131;
}
.btn-primary:hover, .btn-primary:active, .directorio-trabajadores .btn-primary:hover, .modulo-catalogos .btn-primary:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }
.form-control:focus, .form-select:focus { border-color: var(--acento); box-shadow: 0 0 0 .2rem rgba(20,125,131,.14); }
.form-check-input:checked { background-color: var(--acento); border-color: var(--acento); }
.pagination { --bs-pagination-color: var(--acento); --bs-pagination-hover-color: var(--acento-oscuro); --bs-pagination-active-bg: var(--acento); --bs-pagination-active-border-color: var(--acento); --bs-pagination-focus-color: var(--acento-oscuro); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(20,125,131,.14); }
.grupo-menu { font-size: .68rem; }
.directorio-trabajadores .form-label, .modulo-catalogos .form-label { font-size: .85rem; }
.nombre-colaborador { font-size: .875rem; }

/* Prueba visual solo del login: blanco, tipografía ligera y turquesa luminoso. */
.auth-page.login-referencia { position:relative; isolation:isolate; overflow:hidden; background:#fff; padding:40px 24px; }
/* Geometría decorativa: detrás del formulario, sin imágenes ni interacción. */
.portal-page:has(> .login-referencia) { display:flex; flex-direction:column; min-height:100svh; }
.auth-page.login-referencia { flex:1; min-height:0; }
.login-referencia::before, .login-referencia::after { content:""; position:absolute; z-index:-1; pointer-events:none; width:55vw; height:clamp(80px,9vw,145px); border-radius:999px; background:var(--acento-suave); opacity:.8; }
.login-referencia::before { top:28%; left:-24vw; transform:rotate(45deg); box-shadow:0 240px 0 var(--azul-estructura-suave); }
.login-referencia::after { top:12%; right:-27.5vw; transform:rotate(-45deg); box-shadow:-260px 260px 0 var(--azul-estructura-suave); }
@media (max-width:575.98px) {
    .login-referencia::before, .login-referencia::after { width:300px; height:65px; opacity:.65; }
    .login-referencia::before { top:25px; left:-185px; box-shadow:0 100px 0 var(--azul-estructura-suave); }
    .login-referencia::after { top:auto; bottom:35px; right:-185px; box-shadow:0 100px 0 var(--azul-estructura-suave); }
}
.login-referencia .login-card { width: min(100%, 440px); padding: 32px; border: 1px solid var(--borde-suave); box-shadow: 0 12px 36px rgba(33,37,41,.07); border-radius: 16px; }
.login-referencia .login-brand { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--borde-suave); gap: 14px; }
.login-referencia .brand-mark.with-logo { border: 0; width: 56px; height: 56px; }
.login-referencia .brand-mark img { width: 52px; height: 52px; }
.login-referencia h1 { font-size: 1.3rem; font-weight: 500; letter-spacing: -.025em; }
.login-referencia .login-brand p { font-size: .8rem; font-weight: 400; color: #647078; margin-top: 5px; }
.login-referencia .form-label { font-size: 1rem; font-weight: 400; margin-bottom: 9px; color: #212529; }
.login-referencia .form-control { min-height: 49px; border: 1px solid #d6dadd; border-radius: 9px; padding: 11px 15px; font-size: 1rem; font-weight: 400; background: #fff; }
.login-referencia .form-control::placeholder { color: #737c83; opacity: 1; }
.login-referencia .form-control:focus { border-color: #16858a; box-shadow: 0 0 0 3px rgba(40,174,175,.14); }
.login-referencia form.vstack { gap: 20px !important; }
.login-referencia .btn-primary { background: #28aeaf; border-color: #28aeaf; color: #fff; min-height: 51px; border-radius: 9px; font-size: 1.05rem; font-weight: 500; margin-top: 5px; }
.login-referencia .btn-primary:hover, .login-referencia .btn-primary:active { background: #239c9e; border-color: #239c9e; color: #fff; }
.login-referencia .btn-primary:focus-visible { outline: 2px solid #147d83; outline-offset: 3px; box-shadow: none; }
@media (max-width: 575.98px) {
    .auth-page.login-referencia { padding: 32px 24px; }
    .login-referencia h1 { font-size: 1.35rem; }
    .login-referencia .login-brand { margin-bottom: 22px; gap: 12px; }
}


/* Escala común para formularios de alta, activación y autenticación. No afecta las tablas. */
.formulario-portal .form-label, .formulario-portal .form-check-label { font-size: .875rem; font-weight: 500; line-height: 1.5; }
.formulario-portal .form-label { margin-bottom: 7px; }
.formulario-portal .form-control, .formulario-portal .form-select { min-height: 44px; padding: 10px 12px; font-size: .9375rem; line-height: 1.5; font-weight: 400; border-radius: 8px; }
.formulario-portal .form-select { padding-right: 36px; }
.formulario-portal .form-text, .formulario-portal .invalid-feedback { font-size: .78rem; line-height: 1.5; margin-top: 6px; }
.formulario-portal .btn { min-height: 44px; font-size: .875rem; font-weight: 500; padding: 10px 16px; }
.formulario-portal .form-check-label { font-weight: 400; }
.login-referencia .formulario-portal .btn-primary { min-height: 46px; font-size: .9375rem; margin-top: 4px; }
.auth-page:not(.login-referencia) .login-card { width: min(100%, 470px); border-radius: 16px; padding: 28px; box-shadow: 0 12px 36px rgba(33,37,41,.07); }
.auth-page:not(.login-referencia) .login-brand h1 { font-size: 1.2rem; font-weight: 500; }
.auth-page:not(.login-referencia) .login-card > p { font-size: .875rem; line-height: 1.6; }
@media (max-width: 575.98px) {
    .auth-page.login-referencia { padding: 24px 16px; }
    .login-referencia .login-card { padding: 26px 22px; }
    .login-referencia h1 { font-size: 1.2rem; }
    .login-referencia .login-brand p { font-size: .75rem; }
    .login-referencia .brand-mark.with-logo { width: 46px; height: 46px; flex-shrink: 0; }
    .login-referencia .brand-mark img { width: 44px; height: 44px; }
    .formulario-portal .form-control, .formulario-portal .form-select { font-size: 1rem; }
    .auth-page:not(.login-referencia) .login-card { padding: 24px 20px; }
}

/* Interior: jerarquía y superficies compartidas sobre la paleta aprobada. */
.contenido-portal :is(.page-heading, .encabezado-directorio, .encabezado-catalogos) { margin-bottom: 24px; }
.contenido-portal :is(.page-heading, .encabezado-directorio, .encabezado-catalogos) h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.3; }
.contenido-portal :is(.page-heading, .encabezado-directorio, .encabezado-catalogos) p { font-size: .875rem; line-height: 1.6; color: var(--texto-secundario); margin: 6px 0 0; }
.contenido-portal .panel { border-radius: 16px; border-color: var(--borde-suave); box-shadow: 0 5px 20px rgba(33,37,41,.025); }
.marca-superior, .marca-menu strong { font-weight: 600; }
.identidad-usuario strong { font-size: .8125rem; font-weight: 500; }
.identidad-usuario span { font-size: .75rem; }
.salida-portal { font-size: .8125rem; padding: 8px 12px; border-radius: 8px; }
.ficha-trabajador .offcanvas-header, .formulario-configuracion .offcanvas-header { padding: 22px 24px; }
.ficha-trabajador .offcanvas-header h2, .formulario-configuracion .offcanvas-header h2 { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.ficha-trabajador .offcanvas-body, .formulario-configuracion .offcanvas-body { padding: 24px; }

/* Inicio presenta solamente información real, en una tarjeta de lectura acotada. */
.inicio-portal { max-width: 800px; }
.inicio-portal .resumen-cuenta { padding: 28px; }
.cabecera-resumen { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.icono-resumen { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--acento-suave); color: var(--acento); font-size: 1.3rem; }
.cabecera-resumen h2 { font-size: 1rem; font-weight: 600; margin: 0; }
.cabecera-resumen p { color: var(--texto-secundario); font-size: .8125rem; line-height: 1.5; margin: 5px 0 0; }
.inicio-portal .datos-cuenta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; }
.inicio-portal .datos-cuenta > div { padding: 16px; border: 1px solid var(--borde-suave); border-radius: 10px; }
.inicio-portal .datos-cuenta dt { font-size: .8125rem; }
.inicio-portal .datos-cuenta dd { font-size: .875rem; margin: 0; font-weight: 500; }
.inicio-portal .nota-portal { font-size: .8125rem; line-height: 1.6; }
@media (max-width: 575.98px) {
    .contenido-portal :is(.page-heading, .encabezado-directorio, .encabezado-catalogos) h1 { font-size: 1.25rem; }
    .inicio-portal .resumen-cuenta { padding: 20px; }
    .inicio-portal .datos-cuenta { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .ficha-trabajador .offcanvas-body, .formulario-configuracion .offcanvas-body { padding: 20px; }
}

/* Botones principales: mismo turquesa del login en todas las pantallas. */
:root { --boton-principal: #28aeaf; --boton-principal-hover: #239c9e; }
.portal-page .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
    --bs-btn-bg: var(--boton-principal);
    --bs-btn-border-color: var(--boton-principal);
    --bs-btn-hover-bg: var(--boton-principal-hover);
    --bs-btn-hover-border-color: var(--boton-principal-hover);
    --bs-btn-active-bg: var(--boton-principal-hover);
    --bs-btn-active-border-color: var(--boton-principal-hover);
    --bs-btn-disabled-bg: var(--boton-principal);
    --bs-btn-disabled-border-color: var(--boton-principal);
    background: var(--boton-principal);
    border-color: var(--boton-principal);
    color: #fff;
}
.portal-page .btn-primary:hover, .portal-page .btn-primary:active {
    background: var(--boton-principal-hover);
    border-color: var(--boton-principal-hover);
    color: #fff;
}

/* Edición legible y filas ligeramente más compactas solo en escritorio. */
.edicion-trabajador { max-width: 800px; padding: 24px; }
@media (min-width: 768px) {
    .tabla-directorio td { padding-top: 12px; padding-bottom: 12px; }
}

/* Tres catálogos: desplazamiento horizontal de pestañas en pantallas pequeñas. */
.pestanas-catalogos { overflow-x: auto; }
.pestana-catalogo { flex-shrink: 0; white-space: nowrap; }

/* Formularios de personas: escala compacta y bloques con orden de lectura. */
#alta-trabajador { --bs-offcanvas-width: 560px; }
#alta-trabajador .ayuda-alta { color: var(--texto-secundario); font-size: .8rem; line-height: 1.5; margin: 0 0 18px; }
.formulario-persona { --bs-gutter-y: 12px; }
.formulario-persona .titulo-bloque-formulario { font-size: .8125rem; font-weight: 600; color: var(--acento); margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--borde-suave); }
#alta-trabajador .formulario-persona .form-label, .edicion-trabajador .formulario-persona .form-label { font-size: .8125rem; margin-bottom: 5px; }
#alta-trabajador .formulario-persona .form-control, #alta-trabajador .formulario-persona .form-select, .edicion-trabajador .formulario-persona .form-control, .edicion-trabajador .formulario-persona .form-select { font-size: .875rem; min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
#alta-trabajador .formulario-persona .btn, .edicion-trabajador .formulario-persona .btn { font-size: .8125rem; min-height: 40px; padding: 8px 14px; }
.formulario-persona .form-text { font-size: .75rem; }
.referencia-identidad { border-left: 3px solid var(--borde-acento); padding-left: 16px; }
.referencia-identidad p { margin: 4px 0; font-size: .875rem; }
.referencia-identidad small { font-size: .75rem; color: var(--texto-secundario); }
@media (max-width: 575.98px) {
    #alta-trabajador .formulario-persona .form-control, #alta-trabajador .formulario-persona .form-select, .edicion-trabajador .formulario-persona .form-control, .edicion-trabajador .formulario-persona .form-select { font-size: 1rem; }
    #alta-trabajador .formulario-persona .btn, .edicion-trabajador .formulario-persona .btn { min-height: 44px; }
}

/* Boletas: conservar columnas legibles en pantallas pequeñas mediante desplazamiento interno. */
.modulo-boletas .tabla-catalogo table { min-width: 640px; table-layout: auto; }
.revision-boletas .tabla-catalogo table { min-width: 1000px; }
.modulo-boletas .tabla-catalogo th { white-space: nowrap; }
@media (max-width: 767.98px) {
    /* En el autoservicio, las cuatro boletas se presentan como fichas con acciones visibles. */
    .mis-boletas .tabla-catalogo table { min-width: 0; display: block; }
    .mis-boletas .tabla-catalogo thead { display: none; }
    .mis-boletas .tabla-catalogo tbody, .mis-boletas .tabla-catalogo tr { display: block; }
    .mis-boletas .tabla-catalogo tr { padding: 14px; border-bottom: 1px solid var(--borde-suave); }
    .mis-boletas .tabla-catalogo td { display: block; padding: 5px 0; border: 0; }
    .mis-boletas .tabla-catalogo td:first-child { font-weight: 600; }
}

/* Períodos: acciones en una línea y menor altura, sin alterar otros catálogos. */
.periodos-compactos tbody td { padding: 8px 14px; }
.periodos-compactos thead th { padding: 10px 14px; }
.acciones-periodo { display: flex; align-items: flex-start; gap: 8px; }
.periodos-compactos .acciones-periodo .accion-catalogo { display: inline-flex; align-items: center; padding: 5px 9px; min-height: 30px; }
.acciones-periodo details[open] { max-width: 280px; }
@media (max-width: 767.98px) {
    .periodos-compactos table { min-width: 580px; }
    .periodos-compactos .acciones-periodo .accion-catalogo { min-height: 38px; }
}

/* Escala administrativa aprobada: tamaños comunes, sin afectar la autenticación.
   Alturas mínimas: el contenido largo y los errores pueden crecer sin recortarse. */
.portal-page .contenido-portal { padding: 20px; }
.portal-page .contenido-portal :is(.page-heading, .encabezado-directorio, .encabezado-catalogos) { margin-top: 0; margin-bottom: 16px; gap: 12px; }
.portal-page .contenido-portal :is(.page-heading, .encabezado-directorio, .encabezado-catalogos) h1 { font-size: 1.25rem; margin: 4px 0; }
/* Azul para estructura y cabeceras; botones y tarjetas conservan su paleta. */
.portal-page .contenido-portal :is(h1, h2, .titulo-bloque-formulario) { color: var(--azul-estructura); }
.portal-page :is(.icono-catalogo, .cantidad-catalogo, .icono-resumen) { color: var(--azul-estructura); background: var(--azul-estructura-suave); }
.portal-page .contenido-portal .titulo-administracion i { color: var(--azul-estructura); }
.portal-page .contenido-portal :is(.page-heading, .encabezado-directorio, .encabezado-catalogos) p { font-size: .8125rem; margin-top: 4px; }
.portal-page .contenido-portal .btn { min-height: 36px; padding: 7px 12px; font-size: .8125rem; font-weight: 500; line-height: 1.5; }
.portal-page .contenido-portal .btn-primary { font-weight: 600; }
.portal-page .contenido-portal .accion-catalogo { font-size: .8125rem; font-weight: 500; }
/* Datos destacados: seminegrita; detalles secundarios conservan peso normal. */
.portal-page .contenido-portal :is(tbody strong, .nombre-colaborador, .candidato-identidad strong) { font-weight: 600; }
.portal-page .boletas-publicadas:not(.mis-boletas) tbody td:nth-child(2) { font-weight: 600; }
.portal-page .contenido-portal tbody :is(small, .small, .dato-secundario) { font-weight: 400; }
.portal-page .contenido-portal :is(.form-control, .form-select) { min-height: 38px; padding: 7px 12px; font-size: .875rem; line-height: 1.5; }
.portal-page .contenido-portal .form-select { padding-right: 36px; }
.portal-page .contenido-portal .form-label { font-size: .8125rem; font-weight: 500; margin-bottom: 4px; }
.portal-page .contenido-portal .form-check-label { font-size: .8125rem; }
.portal-page .contenido-portal :is(.offcanvas-header, .offcanvas-body) { padding: 16px 20px; }
.portal-page .contenido-portal .offcanvas-header h2 { font-size: 1rem; }
.portal-page .contenido-portal .offcanvas .btn-close { padding: 12px; }
.portal-page .edicion-trabajador { padding: 20px; }
.portal-page .lateral-portal { padding: 16px 12px; }
.portal-page .cabecera-menu { padding-bottom: 12px; }
.portal-page .menu-portal { gap: 4px; }
/* Menú por secciones: superficie discreta y estado activo marcado con línea azul. */
.portal-page .menu-portal .grupo-menu-plegable { margin-top:12px; border:0; background:transparent; }
.grupo-menu-plegable > summary { display:flex; align-items:center; gap:10px; padding:8px 10px; min-height:44px; list-style:none; cursor:pointer; color:var(--texto-principal); font-size:.8125rem; font-weight:600; border-radius:8px; }
.grupo-menu-plegable > summary::-webkit-details-marker { display:none; }
.grupo-menu-plegable .icono-grupo-menu { width:18px; font-size:1.125rem; font-weight:400; }
.grupo-menu-plegable .indicador-grupo-menu { margin-left:auto; color:var(--texto-secundario); font-size:.65rem; }
.grupo-menu-plegable[open] > summary > .indicador-grupo-menu { transform:rotate(90deg); }
.grupo-menu-plegable > summary:hover { color:var(--azul-estructura); }
.grupo-menu-plegable > summary:focus-visible { outline:2px solid var(--azul-estructura); outline-offset:2px; }
.opciones-grupo-menu { margin:4px 0 4px 19px; padding:0 0 0 8px; border-left:1px solid var(--borde-suave); display:grid; gap:2px; }
.portal-page .opciones-grupo-menu .enlace-menu { min-height:44px; }
.portal-page .menu-portal .enlace-menu { position:relative; }
.portal-page .menu-portal .enlace-menu.activo { border-color:transparent; font-weight:600; }
.portal-page .menu-portal .enlace-menu.activo::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:3px; background:var(--azul-estructura); }
.portal-page .menu-portal .enlace-menu.activo .texto-menu > span { font-weight:600; }
.portal-page .menu-portal .flecha-menu { display:none; }
@media (max-width:991.98px) { .grupo-menu-plegable > summary { min-height:44px; } }
.portal-page .grupo-menu { padding-top: 12px; }
.portal-page .enlace-menu { min-height: 38px; padding: 7px 10px; line-height: 1.5; font-size: .8125rem; border-radius: 8px; }
.portal-page .texto-menu > span { font-size: .8125rem; }
.portal-page .enlace-menu > i:first-child { font-size: 1rem; }

/* Directorio: recuperar espacio para datos antes de reducir su letra. */
.portal-page .barra-busqueda { padding: 12px 16px 4px; gap: 8px; }
.portal-page .campo-busqueda input { padding: 7px 0; font-size: .875rem; }
.portal-page .aviso-busqueda { min-height: 24px; padding: 0 16px 4px; }
.portal-page .cabecera-resultados { padding: 10px 16px; }
.portal-page .cabecera-resultados h2 { font-size: .875rem; }
.portal-page .opciones-filtro { padding: 8px 16px; gap: 12px; }
.portal-page .pestanas-catalogos { padding-inline: 16px; gap: 20px; }
.portal-page .pestana-catalogo { padding-block: 12px; font-size: .8125rem; }
.portal-page .acciones-catalogo { padding: 12px 16px; gap: 12px; }
.portal-page .inicio-portal .resumen-cuenta { padding: 20px; }
.portal-page progress { accent-color: var(--boton-principal); }
.portal-page .cabecera-resumen { margin-bottom: 16px; }

@media (min-width: 768px) {
    .portal-page .tabla-directorio th { padding: 8px 16px; }
    .portal-page .tabla-directorio td { padding: 8px 16px; }
    .portal-page .modulo-catalogos thead th { padding: 8px 16px; }
    .portal-page .modulo-catalogos tbody td { padding: 8px 16px; }
    .portal-page .modulo-catalogos .accion-catalogo { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 9px; }
    .portal-page .configuracion-compacta tbody td { padding-block: 7px; }
    /* Boletas y pendientes: ajuste leve de densidad, conservando texto y acciones. */
    .portal-page .boletas-listado tbody td { padding: 6px 12px; }
}

/* Móvil: mantener campos legibles y acciones táctiles; simplificar la distribución. */
@media (max-width: 767.98px) {
    .portal-page .contenido-portal { padding: 12px; }
    .portal-page .contenido-portal .btn { min-height: 44px; }
    .portal-page .contenido-portal :is(.form-control, .form-select),
    .portal-page #alta-trabajador .formulario-persona :is(.form-control, .form-select),
    .portal-page .edicion-trabajador .formulario-persona :is(.form-control, .form-select) { min-height: 44px; font-size: 1rem; }
    .portal-page .enlace-menu { min-height: 44px; }
    .portal-page .campo-busqueda input { min-height: 44px; font-size: 1rem; }
    .portal-page .barra-busqueda { padding: 12px 12px 4px; }
    .portal-page .tabla-directorio tr { padding: 12px; gap: 8px; }
    .portal-page .tabla-directorio .boton-ficha { min-height: 44px; }
    .portal-page .acciones-catalogo { flex-wrap: wrap; padding: 12px; }
    .portal-page .acciones-catalogo p { max-width: none; flex: 1 1 150px; }
    .portal-page .modulo-catalogos .accion-catalogo { display: inline-flex; align-items: center; min-height: 44px; padding: 7px 10px; }
    /* Solo los listados: la revisión de importaciones conserva su tabla especializada. */
    .portal-page :is(.periodos-compactos, .boletas-listado) .tabla-catalogo table { min-width: 0; display: block; }
    .portal-page :is(.periodos-compactos, .boletas-listado) .tabla-catalogo thead { display: none; }
    .portal-page :is(.periodos-compactos, .boletas-listado) .tabla-catalogo :is(tbody, tr) { display: block; }
    .portal-page :is(.periodos-compactos, .boletas-listado) .tabla-catalogo tr { padding: 12px; border-bottom: 1px solid var(--borde-suave); }
    .portal-page :is(.periodos-compactos, .boletas-listado) .tabla-catalogo td { display: block; border: 0; padding: 4px 0; white-space: normal !important; overflow-wrap: anywhere; }
    .portal-page :is(.periodos-compactos, .boletas-listado) .tabla-catalogo td:first-child { font-weight: 600; }
    .portal-page .acciones-periodo { flex-wrap: wrap; }
    .portal-page .boletas-listado .tabla-catalogo tr { padding: 10px; }
    .portal-page .filtros-boletas .col-md-3 { width: 50%; }
    .portal-page .filtros-boletas .col-md-2 { display: flex; gap: 8px; }
}

/* Control por período: filtros completos y legibles en pantallas pequeñas. */
@media (max-width: 767.98px) {
    .portal-page .filtros-control-boletas .row > :is(.col-md-2, .col-md-3) { display: block; width: 100%; }
    .portal-page .filtros-control-boletas .col-md-9 { width: 100%; }
}

/* Estados discretos: el texto mantiene el significado además del color. */
.boleta-pendiente { background: #fff4dc; color: #76591c; }
.boleta-vista { background: #e6f5f5; color: #24666a; }
.boleta-confirmada { background: #edf5ee; color: #3b664a; }
.boleta-comentada { background: #f1edf8; color: #635078; }
.cabecera-constancia { display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--borde-suave); padding-bottom: 18px; }
.cabecera-constancia img { object-fit: contain; flex-shrink: 0; }
@media print {
 .constancia-boleta .no-imprimir, body:has(.constancia-boleta) :is(.barra-superior, .lateral-portal, .salto-contenido) { display: none !important; }
 body:has(.constancia-boleta) .estructura-portal { display: block !important; }
 body:has(.constancia-boleta) .contenido-portal { margin: 0 !important; padding: 0 !important; width: 100% !important; }
 .constancia-boleta .documento-constancia { border: none !important; box-shadow: none !important; max-width: none !important; font-size: 11pt; }
}

/* Constancia interna: encabezado corporativo y detalle alineado para impresión. */
.titulo-constancia { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:24px; padding-bottom:18px; border-bottom:4px solid var(--acento, #28aeaf); }
.codigo-constancia { border:1px solid var(--borde-suave); border-radius:10px; padding:10px 14px; max-width:240px; }
.codigo-constancia strong { display:block; font-size:.75rem; overflow-wrap:anywhere; margin-top:4px; }
.detalle-constancia { display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px 20px; font-size:.875rem; }
.detalle-constancia :is(dt,dd) { margin:0; overflow-wrap:anywhere; }
.detalle-constancia .dato-tecnico { font-family:monospace; font-size:.75rem; }
@media (max-width:575.98px) {
 .titulo-constancia { flex-direction:column; align-items:stretch; }
 .codigo-constancia { max-width:none; }
 .detalle-constancia { grid-template-columns:1fr; gap:4px; }
 .detalle-constancia dd { margin-bottom:10px; }
}
@media print {
 .detalle-constancia { grid-template-columns:150px minmax(0,1fr); }
 .titulo-constancia { flex-direction:row; }
}

/* Filas de boletas: recepción en líneas cortas, sin botones apilados. */
.boletas-publicadas > .catalogo { width:100%; }
.boletas-publicadas .recepcion-compacta { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.boletas-publicadas .recepcion-compacta > small { flex-basis:100%; font-size:.7rem; }
.portal-page .boletas-publicadas .recepcion-compacta .accion-catalogo { border:0; background:transparent; padding:2px 0; min-height:24px; border-radius:0; font-size:.72rem; }
.portal-page .boletas-publicadas .recepcion-compacta .estado-catalogo { padding:3px 7px; font-size:.7rem; line-height:1.4; }
@media (min-width:768px) {
 .portal-page .boletas-publicadas .tabla-catalogo table { table-layout:fixed; min-width:0; }
 .portal-page .boletas-publicadas .tabla-catalogo :is(th,td) { padding:7px 10px; overflow-wrap:anywhere; }
 .boletas-publicadas:not(.mis-boletas) th:nth-child(1) { width:12%; }
 .boletas-publicadas:not(.mis-boletas) th:nth-child(2) { width:24%; }
 .boletas-publicadas:not(.mis-boletas) th:nth-child(3) { width:21%; }
 .boletas-publicadas:not(.mis-boletas) th:nth-child(4) { width:17%; }
 .boletas-publicadas:not(.mis-boletas) th:nth-child(5) { width:26%; }

 .boletas-publicadas.mis-boletas th:nth-child(1) { width:18%; }
 .boletas-publicadas.mis-boletas th:nth-child(2) { width:27%; }
 .boletas-publicadas.mis-boletas th:nth-child(3) { width:23%; }
 .boletas-publicadas.mis-boletas th:nth-child(4) { width:32%; }
 .portal-page .boletas-publicadas td.text-nowrap { white-space:normal !important; }
 .portal-page .boletas-publicadas td.text-nowrap .accion-catalogo { margin:2px 4px 2px 0 !important; min-height:28px; padding:3px 6px; }
}
@media (max-width:767.98px) {
 .portal-page .boletas-publicadas .recepcion-compacta .accion-catalogo { min-height:44px; padding:7px 4px; }
}
.boletas-publicadas .recepcion-compacta > small { order:1; }
.boletas-publicadas .recepcion-compacta > a { order:2; }

/* Las tablas crecen con sus filas: evitar barras internas por redondeo de bordes. */
.portal-page :is(.boletas-listado, .configuracion-compacta) .tabla-catalogo { overflow:visible; max-height:none; }
.portal-page .configuracion-compacta .pestanas-catalogos { overflow:visible; flex-wrap:wrap; }

/* Pie de tablas: la paginación comparte el margen de las filas, sin pegarse al borde. */
.portal-page .catalogo > nav { padding:12px 16px; border-top:1px solid var(--borde-suave); }
.portal-page .catalogo > nav p { margin:0; font-size:.75rem; }
.portal-page .catalogo > nav .pagination { margin:0; }
.portal-page .catalogo > nav > .d-sm-flex { gap:12px; flex-wrap:wrap; }
@media (max-width:575.98px) {
 .portal-page .catalogo > nav { padding:12px; }
}

/* Administración reutiliza la superficie compacta y el acento del portal. */
.administracion-sistema { max-width: 1280px; }
.administracion-sistema .titulo-administracion { font-size: 1rem; font-weight: 600; margin-bottom: 14px; }
.administracion-sistema .titulo-administracion i { color: var(--acento, #28aeaf); }
.administracion-sistema .vista-identidad { display:flex; align-items:center; gap:14px; padding:12px 16px; border:1px solid var(--borde-suave); border-radius:10px; background:var(--fondo-suave, #f7fafb); }
.administracion-sistema .vista-identidad img { width:48px; height:48px; object-fit:contain; }
.administracion-sistema .vista-identidad span { display:block; color:var(--texto-secundario, #667085); font-size:.8rem; }
.administracion-sistema :is(td,th) { overflow-wrap:anywhere; white-space:normal; }
.administracion-sistema .tabla-catalogo table { min-width:0; width:100%; }
.administracion-sistema fieldset { min-width:0; }
@media(max-width:767.98px) {
 .administracion-sistema .tabla-catalogo thead { display:none; }
 .administracion-sistema .tabla-catalogo :is(tbody,tr,td) { display:block; width:100%; }
 .administracion-sistema .tabla-catalogo tr { border-bottom:1px solid var(--borde-suave); padding:10px; }
 .administracion-sistema .tabla-catalogo td { border:0; padding:4px 0; }
 .administracion-sistema .tabla-catalogo td:first-child { font-weight:600; }
 .administracion-sistema .btn { min-height:42px; }
}

/* Filtros móviles: etiquetas encima del campo y botones dentro del mismo margen. */
@media (max-width:767.98px) {
 .portal-page .boletas-publicadas .filtros-boletas .row > :is(.col-md-2, .col-md-3) { display:block; width:100%; }
 .portal-page .boletas-publicadas .filtros-boletas .row > .col-md-2:last-child { display:flex; flex-wrap:wrap; gap:8px; }
}
@media(min-width:768px) {
 .portal-page .administracion-sistema .tabla-catalogo th:first-child { width:38%; }
 .portal-page .administracion-sistema .tabla-catalogo :is(th,td) { padding:9px 12px; }
 .portal-page .administracion-sistema .tabla-catalogo th:not(:first-child) { white-space:nowrap; }
 .portal-page .administracion-sistema .tabla-catalogo .accion-catalogo { white-space:nowrap; }
}

/* Contratos: conservar columnas legibles y desplazar solo la tabla en pantallas pequeñas. */
.modulo-contratos .tabla-catalogo table { min-width: 720px; }
.modulo-contratos .tabla-catalogo input[type="date"] { min-width: 140px; }
.modulo-contratos .tabla-catalogo input[type="number"] { min-width: 105px; }
.modulo-contratos .tabla-catalogo td, .modulo-contratos .tabla-catalogo th { overflow-wrap: normal; word-break: normal; }

/* Dashboard: cifras y gráficos nativos, sin dependencias ni scroll dentro de paneles. */
.contenido-portal:has(.tablero-boletas) { background:#fff; }
.tablero-rrhh { width:100%; min-width:0; }
.tablero-rrhh h2 { font-size:1rem; font-weight:600; margin:0; }
.tablero-rrhh h3 { font-size:.8rem; font-weight:500; margin:0; }
.tablero-rrhh a { color:var(--acento-oscuro); text-decoration:none; }
.tablero-rrhh a:hover { text-decoration:underline; }
.tablero-fecha { color:var(--texto-secundario); font-size:.78rem; white-space:nowrap; }
.tablero-titulo { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; }
.tablero-titulo p, .tablero-contratos p { color:var(--texto-secundario); font-size:.75rem; margin:5px 0 0; }
.tablero-titulo > a, .tablero-titulo > span { font-size:.75rem; }
.tablero-indicadores { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:22px; }
.tablero-rrhh .tablero-indicador { padding:18px; position:relative; margin:0; }
.tablero-indicador h3 { color:var(--texto-secundario); padding-right:28px; min-height:30px; }
.tablero-indicador > strong { display:block; font-size:1.8rem; line-height:1.35; font-weight:600; margin:6px 0; color:var(--texto-principal); }
.tablero-indicador p { color:var(--texto-secundario); font-size:.7rem; margin:0; }
.tablero-icono { position:absolute; right:16px; top:16px; width:30px; height:30px; display:grid; place-items:center; background:var(--acento-suave); color:var(--acento); border-radius:9px; }
.tablero-rrhh .tablero-boletas, .tablero-rrhh .tablero-grafico { padding:22px; margin-bottom:20px; min-width:0; }
.tablero-filtro { display:flex; align-items:center; gap:8px; min-width:0; }
.tablero-filtro label { font-size:.75rem; }
.tablero-filtro .form-select { width:200px; max-width:100%; font-size:.78rem; }
.tablero-cifras { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:4px 0 20px; }
.tablero-cifras > div { display:flex; flex-direction:column; gap:4px; padding:10px 16px; border-left:3px solid var(--borde-acento); }
.tablero-cifras span { font-size:.78rem; color:var(--texto-secundario); }
.tablero-cifras strong { font-size:1.7rem; font-weight:600; }
.tablero-cifras small, .tablero-cifras a { font-size:.72rem; }
.tablero-cifras small { color:var(--texto-secundario); }
.tablero-seguimiento { border-top:1px solid var(--borde-suave); padding-top:18px; }

.segmento-confirmada { background:#079b80; }
.segmento-con_acceso { background:#3275df; }
.segmento-sin_acceso { background:#f4b632; }
.tablero-estados { display:grid; gap:10px; width:100%; margin:0; }
.tablero-estados a { display:flex; align-items:center; gap:8px; padding:10px; border:1px solid var(--borde-suave); border-radius:9px; font-size:.73rem; color:var(--texto-principal); }
.tablero-estados strong { margin-left:auto; font-size:1rem; }
.tablero-punto { flex:0 0 8px; height:8px; border-radius:50%; }
.tablero-nota { font-size:.7rem; line-height:1.65; color:var(--texto-secundario); margin:0; }
.tablero-graficos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.tablero-barras { display:grid; gap:14px; }
.tablero-fila-barra > div:first-child { display:flex; justify-content:space-between; gap:12px; font-size:.75rem; margin-bottom:6px; overflow-wrap:anywhere; }
.tablero-pista { height:7px; border-radius:4px; background:var(--fondo-sutil); overflow:hidden; }
.tablero-pista span { display:block; height:100%; background:#0b9caa; border-radius:4px; }
.tablero-rrhh .tablero-contratos { display:flex; align-items:center; gap:36px; padding:20px 22px; margin-bottom:20px; }
.tablero-contratos > div:first-child { margin-right:auto; }
.tablero-contratos > div:not(:first-child) { display:flex; flex-direction:column; gap:2px; }
.tablero-contratos strong { font-size:1.4rem; font-weight:600; }
.tablero-contratos span, .tablero-contratos a { font-size:.75rem; }
.tablero-vacio { text-align:center; padding:25px 12px; color:var(--texto-secundario); }
.tablero-vacio > i { font-size:1.8rem; }
.tablero-vacio h3 { margin-top:12px; }
.tablero-vacio p, .tablero-vacio a { font-size:.8rem; }
@media(max-width:1199.98px) { .tablero-indicadores { grid-template-columns:repeat(2,minmax(0,1fr)); } .tablero-boletas > .tablero-titulo { align-items:flex-start; flex-wrap:wrap; } }
@media(max-width:767.98px) {
 .tablero-graficos, .tablero-estados { grid-template-columns:minmax(0,1fr); }
 .tablero-rrhh .tablero-boletas, .tablero-rrhh .tablero-grafico { padding:16px; }
 .tablero-rrhh .tablero-indicador { padding:14px; }
 .tablero-icono { display:none; } .tablero-indicador h3 { padding-right:0; }
 .tablero-indicadores { gap:10px; }
 .tablero-cifras { grid-template-columns:minmax(0,1fr); gap:8px; }
 .tablero-cifras > div { padding:6px 12px; }
 .tablero-filtro { width:100%; flex-wrap:wrap; } .tablero-filtro label { width:100%; }
 .tablero-filtro .form-select { flex:1; width:0; font-size:16px; min-height:44px; } .tablero-filtro button { min-height:44px; }
 .tablero-rrhh .tablero-contratos { flex-wrap:wrap; gap:18px; padding:16px; } .tablero-contratos > div:first-child { width:100%; } .tablero-contratos > a { margin-left:auto; }
}

/* Colores del tablero: etiquetas y cantidades visibles sin depender solo del color. */
.tablero-rrhh .tablero-indicador { overflow:hidden; color:#273943; border:1px solid rgb(var(--tinte-tarjeta) / .18); background:linear-gradient(rgb(var(--tinte-tarjeta) / .10),rgb(var(--tinte-tarjeta) / .10)),#fff; }
.tablero-rrhh .indicador-0 { --tinte-tarjeta:8 127 140; --cifra-tarjeta:#096c77; }
.tablero-rrhh .indicador-1 { --tinte-tarjeta:40 97 203; --cifra-tarjeta:#2459b7; }
.tablero-rrhh .indicador-2 { --tinte-tarjeta:245 184 51; --cifra-tarjeta:#805808; }
.tablero-rrhh .indicador-3 { --tinte-tarjeta:201 68 76; --cifra-tarjeta:#af3440; }
.tablero-indicador h3, .tablero-indicador p { color:inherit; position:relative; z-index:1; }
.tablero-indicador h3 { padding-right:0; }
.tablero-indicador > strong { font-size:2rem; color:var(--cifra-tarjeta); position:relative; z-index:1; }
/* El icono decorativo queda detrás del contenido, con el mismo tinte al 10 %. */
.tablero-indicador .tablero-icono { display:grid; top:auto; bottom:8px; right:10px; width:76px; height:76px; font-size:68px; line-height:1; color:rgb(var(--tinte-tarjeta) / .10); background:none; pointer-events:none; }
.tablero-recepcion { display:grid; grid-template-columns:170px minmax(0,1fr); align-items:center; gap:32px; margin:6px 0 18px; max-width:800px; }
.tablero-dona { width:164px; height:164px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#079b80 0 var(--confirmado),#3275df var(--confirmado) var(--acceso),#f4b632 var(--acceso) 100%); }
.tablero-dona.dona-vacia { background:#e6ecee; }
.tablero-dona > div { background:#fff; width:120px; height:120px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.tablero-dona strong { font-size:1.9rem; font-weight:600; }
.tablero-dona span { font-size:.65rem; color:var(--texto-secundario); }
.tablero-estados a { padding:12px; font-size:.76rem; }
.tablero-estados small { width:48px; flex-shrink:0; text-align:right; color:var(--texto-secundario); font-size:.7rem; }
.tablero-leyenda { display:flex; flex-wrap:wrap; gap:18px; font-size:.73rem; margin-bottom:22px; color:var(--texto-secundario); }
.tablero-leyenda > span { display:flex; align-items:center; gap:6px; }
.tablero-leyenda i { width:9px; height:9px; border-radius:3px; }
.serie-mensual { background:#087fba; }
.serie-vacaciones { background:#8250d7; }
.tablero-columnas { display:grid; grid-template-columns:repeat(var(--periodos),minmax(0,1fr)); gap:12px; padding-top:12px; margin-bottom:14px; }
.tablero-columna { display:flex; flex-direction:column; align-items:center; min-width:0; }
.tablero-columna-area { height:150px; width:100%; display:flex; align-items:flex-end; justify-content:center; border-bottom:1px solid var(--borde-suave); background:repeating-linear-gradient(to top,transparent 0,transparent 49px,#edf1f3 49px,#edf1f3 50px); }
.tablero-columna-pila { width:100%; max-width:48px; position:relative; display:flex; flex-direction:column; border-radius:5px 5px 0 0; }
.tablero-columna-pila > span { flex-shrink:0; }
.tablero-columna-total { position:absolute; bottom:calc(100% + 5px); left:50%; transform:translateX(-50%); font-size:.75rem; color:var(--texto-principal); }
.tablero-columna-nombre { margin-top:10px; text-align:center; font-size:.72rem; overflow-wrap:anywhere; }
.tablero-columna-detalle { font-size:.65rem; color:var(--texto-secundario); margin-top:3px; text-align:center; }
.tablero-columna:hover .tablero-columna-pila { filter:brightness(1.12); }
.tablero-rrhh a:focus-visible { outline:3px solid #2861cb; outline-offset:4px; border-radius:4px; }
@media(max-width:767.98px) {
 .tablero-recepcion { grid-template-columns:minmax(0,1fr); gap:18px; }
 .tablero-dona { justify-self:center; }
 .tablero-estados a { gap:6px; padding:10px; font-size:.7rem; }
 .tablero-columnas { gap:6px; }
 .tablero-columna-nombre { font-size:.65rem; }
 .tablero-columna-detalle { font-size:.6rem; }
}



/* Encabezados contractuales y editor individual, sin alterar módulos vecinos. */
.portal-page .modulo-contratos { --contratos-azul:#3563a3; }
.portal-page .modulo-contratos .tabla-catalogo table thead th,
.portal-page .modulo-contratos .panel > h2,
.portal-page .modulo-contratos .acciones-catalogo,
.portal-page .modulo-contratos .cabecera-candidatos,
.portal-page .modulo-contratos .cabecera-visor-contrato { background:var(--contratos-azul); color:#fff; }
.portal-page .modulo-contratos .tabla-catalogo table thead th { --bs-table-bg:var(--contratos-azul); --bs-table-color:#fff; border-color:rgb(255 255 255 / .2); }
.portal-page .modulo-contratos .panel > h2,
.portal-page .modulo-contratos .cabecera-visor-contrato { padding:12px 16px !important; margin-bottom:14px; border-radius:8px 8px 0 0; }
.portal-page .modulo-contratos .acciones-catalogo h2,
.portal-page .modulo-contratos .cabecera-candidatos :is(h2,p,small,strong) { color:#fff; }
.portal-page .modulo-contratos .cabecera-candidatos { padding:12px 16px; border-radius:8px; }
.portal-page .modulo-contratos .cabecera-candidatos .text-secondary { color:#fff !important; }
.portal-page .modulo-contratos .acciones-catalogo .btn-primary { background:#fff; color:#244874; border-color:#fff; }
.modulo-contratos .aviso-edicion-contrato { border-left:3px solid var(--contratos-azul); padding:12px 16px; background:var(--fondo-suave); font-size:12px; line-height:1.6; }
.modulo-contratos .acciones-visor-contrato { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.modulo-contratos .columnas-visor-contrato { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:18px; align-items:start; }
.modulo-contratos .columnas-visor-contrato > * { min-width:0; }
.modulo-contratos .pdf-contrato { display:block; width:100%; height:760px; border:0; background:#525659; }
.modulo-contratos .editor-contrato .titulo-clausula { line-height:1.6; overflow-wrap:anywhere; }
.modulo-contratos .editor-contrato textarea { resize:vertical; min-height:120px; font-size:13px; line-height:1.7; }
.modulo-contratos .editor-contrato .form-select { width:100%; text-overflow:ellipsis; }
.modulo-contratos .grupo-clausula[hidden] { display:none; }
@media screen { [data-bs-theme="dark"] .portal-page .modulo-contratos { --contratos-azul:#244874; } }
@media(max-width:991.98px) {
    .modulo-contratos .columnas-visor-contrato { grid-template-columns:minmax(0,1fr); }
    .modulo-contratos .pdf-contrato { height:500px; }
}
@media(max-width:575.98px) {
    .modulo-contratos .acciones-visor-contrato { align-items:stretch; }
    .modulo-contratos .acciones-visor-contrato .btn { flex:1 1 100%; }
    .modulo-contratos .pdf-contrato { height:420px; }
    .modulo-contratos .editor-contrato button[type="submit"] { width:100%; white-space:normal; }
    .modulo-contratos.visor-contrato { overflow-wrap:anywhere; }
}
.modulo-contratos #firma-canvas { display:block; width:100%; height:auto; aspect-ratio:900 / 260; background:#fff; border:1px solid var(--borde-suave); border-radius:8px; touch-action:none; cursor:crosshair; }
.modulo-contratos #firma-canvas:focus-visible { outline:3px solid var(--contratos-azul); outline-offset:3px; }
.modulo-contratos.contrato-personal { max-width:1100px; margin:0 auto; }
.modulo-contratos.contrato-personal #clave-firma { max-width:420px; }
@media(max-width:575.98px) { .modulo-contratos #confirmar-firma { width:100%; } }
/* Flujo contractual: pasos visibles y fichas legibles también en celular. */
.pasos-contratos { list-style:none; display:flex; gap:8px; padding:0; margin:0 0 18px; }
.pasos-contratos li { flex:1; display:flex; align-items:center; gap:9px; padding:12px; color:var(--texto-secundario); border-bottom:2px solid var(--borde-suave); font-size:12px; }
.pasos-contratos li > span { display:grid; place-items:center; width:25px; height:25px; flex-shrink:0; border:1px solid var(--borde-suave); border-radius:50%; background:#fff; }
.pasos-contratos .paso-actual { color:var(--acento); border-color:var(--acento); font-weight:600; }
.pasos-contratos .paso-actual > span { background:var(--acento); border-color:var(--acento); color:#fff; }
.pasos-contratos .paso-completo { color:var(--acento); }
#zona-resultados-contratos { min-width:0; }
#zona-resultados-contratos[aria-busy="true"] { opacity:.65; }
.cabecera-candidatos { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 12px; }
.lista-candidatos { display:grid; gap:8px; }
.candidato-contrato { display:grid; grid-template-columns:20px minmax(0,1fr) minmax(160px,.7fr) auto; align-items:center; gap:14px; padding:16px; background:#fff; border:1px solid var(--borde-suave); border-radius:12px; }
.candidato-contrato:has(input:checked) { border-color:var(--acento); background:var(--acento-suave); }
.candidato-identidad strong, .candidato-identidad small, .candidato-estado small { display:block; overflow-wrap:anywhere; }
.candidato-identidad strong { font-size:13px; font-weight:600; }
.candidato-identidad small, .candidato-estado small { font-size:11px; color:var(--texto-secundario); margin-top:5px; }
.candidato-estado .estado-catalogo { white-space:normal; }
.barra-seleccion-contratos { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.barra-seleccion-contratos > div { min-width:0; }
.barra-seleccion-contratos > button { flex-shrink:0; }
.seleccion-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.seleccion-chip { border:1px solid var(--borde-acento); border-radius:8px; background:var(--acento-suave); color:var(--acento); padding:5px 8px; font-size:11px; text-align:left; }
.inicio-contratos { padding:28px; text-align:center; }
.inicio-contratos p { max-width:620px; margin:10px auto 18px; color:var(--texto-secundario); }
@media(max-width:767.98px) {
    .pasos-contratos { gap:4px; }
    .pasos-contratos li { flex-direction:column; gap:6px; padding:8px 2px; font-size:11px; }
    .cabecera-candidatos, .barra-seleccion-contratos { flex-direction:column; align-items:stretch; }
    .candidato-contrato { grid-template-columns:20px minmax(0,1fr); gap:10px; padding:14px; }
    .candidato-estado, .candidato-contrato > a, .candidato-contrato > small { grid-column:2; justify-self:start; }
}
/* Inicio personal: bienvenida, documentos y accesos en una composición compacta. */
.inicio-colaborador { max-width:1240px; margin:0 auto; }
.portal-page .inicio-colaborador .bienvenida-colaborador { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 30px; margin-bottom:26px; background:linear-gradient(105deg,#fff 25%,#eaf6f5); border:1px solid #dcebea; border-radius:18px; border-left:4px solid #279da2; }
.portal-page .inicio-colaborador .bienvenida-colaborador h1 { color:#204c53; font-size:1.55rem; margin:9px 0; }
.bienvenida-detalle { display:block; color:#63767c; font-size:.78rem; margin-top:5px; }
.colaborador-composicion { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr); align-items:start; gap:22px; }
.colaborador-recientes,.colaborador-accesos { background:#fff; border:1px solid #e1e9eb; border-radius:16px; padding:22px; box-shadow:0 5px 18px #183f4905; min-width:0; }
.colaborador-eyebrow { display:block; font-size:.62rem; font-weight:600; letter-spacing:.1em; color:#72848a; margin-bottom:7px; }
.colaborador-numero { display:grid; place-items:center; background:#edf6f5; color:#226c71; font-weight:600; border-radius:9px; min-width:30px; height:30px; }
.colaborador-tarjetas { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.colaborador-boleta { background:#fff; border:1px solid #dde6e8; border-radius:12px; padding:17px; min-width:0; }
.colaborador-boleta.boleta-destacada { border-top:3px solid #279da2; background:#fff; }
.colaborador-boleta:only-child { grid-column:1/-1; }
.boleta-cabecera { display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.colaborador-pdf { display:grid; place-items:center; height:33px; width:30px; color:#287c83; background:#eaf5f4; border-radius:7px; font-size:1.15rem; }
.boleta-tipo { font-size:.7rem; color:#586e75; }
.boleta-reciente { margin-left:auto; font-size:.6rem; color:#266c58; background:#eaf6ef; border:1px solid #d9eddf; border-radius:20px; padding:4px 7px; }
.tablero-rrhh .colaborador-boleta h3 { font-size:1.1rem; font-weight:600; color:#243f46; overflow-wrap:anywhere; }
.colaborador-boleta p { margin:6px 0 15px; font-size:.7rem; color:#75858a; }
.boleta-pie { display:flex; justify-content:space-between; align-items:center; gap:8px; border-top:1px solid #edf1f2; padding-top:12px; }
.boleta-pie > span { color:#839095; font-size:.62rem; }
.boleta-pie a { display:flex; align-items:center; gap:8px; background:#ecf7f6; border:1px solid #d6eae8; border-radius:7px; padding:8px 10px; font-size:.72rem; font-weight:600; }
.colaborador-ayuda { display:flex; align-items:center; gap:6px; margin:17px 0 0; font-size:.65rem; color:#78898e; }
.colaborador-accesos > p { font-size:.75rem; color:#75858a; margin:8px 0 18px; }
.colaborador-acceso { display:flex; align-items:center; gap:12px; padding:15px 0; border-bottom:1px solid #edf1f2; }
.acceso-icono { display:grid; place-items:center; background:#f0f5f6; border-radius:10px; width:38px; height:38px; flex-shrink:0; color:#477b85; }
.colaborador-acceso strong { display:block; font-size:.8rem; color:#334e56; font-weight:500; }
.colaborador-acceso small { display:block; font-size:.65rem; margin-top:4px; color:#78888e; }
.colaborador-acceso > i { margin-left:auto; }
.colaborador-consejo { display:flex; align-items:flex-start; gap:10px; background:#f6f9fa; padding:14px; border-radius:10px; margin-top:20px; color:#617b84; }
.colaborador-consejo h3 { font-size:.75rem; color:#3e5c65; }
.colaborador-consejo p { margin:5px 0 0; font-size:.7rem; line-height:1.6; }
.colaborador-vacio { grid-column:1/-1; padding:28px 12px; text-align:center; }
.colaborador-vacio > i { font-size:2rem; color:#83a9ad; }
.colaborador-vacio h3 { margin-top:14px; }
.colaborador-vacio p { font-size:.75rem; color:#75858a; margin-top:8px; }
@media(max-width:1199.98px) { .colaborador-tarjetas { grid-template-columns:minmax(0,1fr); } }
@media(max-width:767.98px) {
 .colaborador-composicion { grid-template-columns:minmax(0,1fr); gap:16px; }
 .portal-page .inicio-colaborador .bienvenida-colaborador { padding:20px; align-items:flex-start; flex-direction:column; gap:12px; }
 .portal-page .inicio-colaborador .bienvenida-colaborador h1 { font-size:1.25rem; }
 .colaborador-recientes,.colaborador-accesos { padding:17px; }
 .boleta-pie a { min-height:44px; }
}

/* Auditoría: columnas equilibradas y detalles sin desplazamiento interno. */
.portal-page .auditoria-sistema .tabla-catalogo table { table-layout:fixed; }
.portal-page .auditoria-sistema .tabla-catalogo th:first-child { width:18%; }
.portal-page .auditoria-sistema .tabla-catalogo th:nth-child(2) { width:24%; }
.portal-page .auditoria-sistema .tabla-catalogo th:nth-child(3) { width:24%; }
.portal-page .auditoria-sistema .tabla-catalogo th:nth-child(4) { width:15%; }
.portal-page .auditoria-sistema .tabla-catalogo :is(td,th):last-child { text-align:left; }
.detalle-auditoria { overflow-wrap:anywhere; }
.detalle-auditoria summary { cursor:pointer; color:var(--acento-oscuro, #147d83); }
@media(max-width:767.98px) {
 .auditoria-sistema td[data-label]::before { content:attr(data-label) ': '; color:var(--texto-secundario, #667085); font-size:.75rem; font-weight:400; }
 .auditoria-sistema td small { display:inline !important; margin-left:6px; }
}

/* Mostrar contraseña: control dentro del campo, sin modificar el tamaño del login. */
.auth-page .clave-ingreso { position:relative; }
.auth-page .clave-ingreso input { padding-right:48px; }
.auth-page .alternar-clave { position:absolute; top:0; right:0; bottom:0; width:44px; border:0; border-radius:0 8px 8px 0; background:transparent; color:var(--texto-secundario); }
.auth-page .alternar-clave:hover { color:var(--acento); }
.auth-page .alternar-clave:focus-visible { outline:2px solid var(--acento); outline-offset:-3px; }

/* Notificaciones: lectura por destinatario en celular, sin tablas comprimidas. */
.notificaciones-boletas .tabla-catalogo td { overflow-wrap:anywhere; }
@media(max-width:767.98px) {
 .notificaciones-boletas .tabla-catalogo table,.notificaciones-boletas .tabla-catalogo tbody,.notificaciones-boletas .tabla-catalogo tr,.notificaciones-boletas .tabla-catalogo td { display:block; width:100%; }
 .notificaciones-boletas .tabla-catalogo thead { display:none; }
 .notificaciones-boletas .tabla-catalogo tr { padding:12px 16px; border-bottom:1px solid var(--bs-border-color); }
 .notificaciones-boletas .tabla-catalogo td { padding:5px 0; border:0; text-align:left; }
 .notificaciones-boletas td[data-label]::before { content:attr(data-label) ': '; font-size:.75rem; font-weight:500; color:var(--bs-secondary-color); }
 .notificaciones-boletas .estado-catalogo { white-space:normal; }
}

/* Permisos en acordeones nativos: una fila por módulo, sin altura fija ni barras internas. */
.lista-permisos { border:1px solid var(--borde-suave); border-radius:10px; overflow:clip; background:var(--panel); }
.grupo-permisos { min-width:0; border-bottom:1px solid var(--borde-suave); }
.grupo-permisos:last-child { border-bottom:0; }
.grupo-permisos > summary { display:flex; align-items:center; gap:12px; min-height:44px; padding:10px 14px; cursor:pointer; list-style:none; font-size:.8rem; font-weight:500; color:var(--texto-principal); }
.grupo-permisos > summary::-webkit-details-marker { display:none; }
.grupo-permisos > summary::after { content:''; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); flex-shrink:0; margin:0 3px 4px; }
.grupo-permisos[open] > summary::after { transform:rotate(225deg); margin-bottom:0; }
/* El fondo identifica el módulo; las casillas indican la selección real. */
.grupo-permisos > summary { background:var(--acento-suave); }
.grupo-permisos > summary:hover { background:var(--borde-acento); }
.grupo-permisos .form-check-input:checked,.grupo-permisos .form-check-input:indeterminate { background-color:var(--boton-principal); border-color:var(--boton-principal); }
.grupo-permisos .form-check-input:focus-visible { outline:2px solid var(--acento); outline-offset:3px; }
.grupo-permisos > summary:focus-visible { outline:2px solid var(--acento); outline-offset:-3px; }
.conteo-permisos { margin-left:auto; white-space:nowrap; padding:2px 7px; border-radius:5px; background:var(--acento-suave); color:var(--acento); font-size:.7rem; font-weight:500; }
/* Segundo nivel: la guía enlaza visualmente los permisos con su módulo. */
.grupo-permisos > summary > span:first-of-type { font-weight:600; }
.contenido-permisos { margin:0 14px 10px 22px; padding:2px 0 0 18px; border-left:1px solid var(--borde-acento); }
.contenido-permisos .opcion-permiso { position:relative; }
.contenido-permisos .opcion-permiso::before { content:''; position:absolute; left:-18px; top:19px; width:12px; border-top:1px solid var(--borde-acento); }
.grupo-permisos .opcion-permiso { margin:0; padding:9px 0 9px 26px; border-bottom:1px solid var(--borde-suave); }
.grupo-permisos .opcion-permiso:last-child { border-bottom:0; }
.grupo-permisos .form-check-label { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px; font-size:.8rem; cursor:pointer; }
.grupo-permisos .badge { font-size:.65rem; font-weight:400; }

.grupo-permisos .selector-modulo { flex-shrink:0; margin:0; cursor:pointer; }

/* Acciones y consulta opcional vinculadas a cada boleta del inicio personal. */
.acciones-boleta-personal { justify-content:flex-start; flex-wrap:wrap; }
.consulta-boleta { margin-top:12px; border-top:1px solid var(--borde-suave); padding-top:10px; }
.consulta-boleta > summary { font-size:.72rem; color:var(--acento); cursor:pointer; padding:5px 0; }
.consulta-boleta > .panel { padding:10px 0 !important; margin-top:0 !important; border:0; box-shadow:none; background:transparent; }
.consulta-boleta h2 { display:none; }
.consulta-boleta .form-label { font-size:.75rem; }
.consulta-boleta textarea { font-size:.8rem; }
.consulta-boleta p { margin:8px 0; }

/* Verde invita al primer acceso; gris distingue un acceso registrado sin deshabilitarlo. */
.portal-page .documento-pendiente a { background:#e8f5ed; color:#25613e; border:1px solid #b9dac5; border-radius:7px; padding:8px 10px; display:inline-flex; align-items:center; gap:6px; }
.portal-page .documento-abierto a { background:#f0f2f4; color:#4b5563; border:1px solid #d6dbe1; border-radius:7px; padding:8px 10px; display:inline-flex; align-items:center; gap:6px; }
.portal-page :is(.documento-pendiente,.documento-abierto) a:hover { text-decoration:underline; }
/* En tarjetas, la acción define el color; el estado de acceso se indica en texto. */
.portal-page .acciones-boleta-personal > a { background:#fff; color:#147d83; border-color:#147d83; min-height:44px; }
.portal-page .acciones-boleta-personal > a:first-child { background:#28aeaf; border-color:#28aeaf; color:#fff; }
.portal-page .acciones-boleta-personal > a:hover { background:#eaf7f6; }
.portal-page .acciones-boleta-personal > a:first-child:hover { background:#239c9e; border-color:#239c9e; }
.portal-page .acciones-boleta-personal > a:focus-visible { outline:2px solid #147d83; outline-offset:3px; }
.estado-acceso-personal { display:block; margin-top:8px; font-size:.68rem; color:var(--texto-secundario); }

/* Lista de ocupaciones compacta con búsqueda; colores compartidos en claro y oscuro. */
.selector-ocupacion { position:relative; min-width:0; }
.selector-ocupacion > summary { cursor:pointer; list-style:none; white-space:normal; overflow-wrap:anywhere; color:var(--text); background-color:var(--panel); }
.selector-ocupacion > summary::-webkit-details-marker { display:none; }
.selector-ocupacion-panel { position:absolute; z-index:20; top:calc(100% + 6px); left:0; right:0; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:0 8px 24px #0002; }
.selector-ocupacion-opciones { max-height:240px; overflow-y:auto; margin-top:8px; }
.selector-ocupacion-opcion { display:block; width:100%; min-height:40px; padding:8px 10px; border:0; border-radius:6px; text-align:left; white-space:normal; overflow-wrap:anywhere; background:transparent; color:var(--text); font:inherit; }
.selector-ocupacion-opcion:hover, .selector-ocupacion-opcion:focus-visible, .selector-ocupacion-opcion[aria-pressed="true"] { background:var(--acento-suave); color:var(--acento); }
@media (max-width:640px) { .selector-ocupacion-opcion { min-height:44px; } }

/* Selección de contratos: tabla compacta y resumen persistente. */
.tabla-candidatos-contenedor { border:1px solid var(--borde-suave); border-radius:10px; overflow:hidden; background:var(--panel); }
.tabla-candidatos { width:100%; table-layout:fixed; font-size:13px; }
.tabla-candidatos th, .tabla-candidatos td { padding:8px 10px; border-bottom:1px solid var(--borde-suave); vertical-align:middle; overflow-wrap:anywhere; }
.tabla-candidatos th { background:var(--azul-estructura-suave); color:var(--azul-estructura); font-weight:600; }
.tabla-candidatos th:first-child { width:38px; }
.tabla-candidatos th:nth-child(2) { width:30%; }
.tabla-candidatos th:nth-child(3) { width:24%; }
.tabla-candidatos th:last-child { width:140px; }
.tabla-candidatos tr:last-child td { border-bottom:0; }
.tabla-candidatos .candidato-identidad small, .tabla-candidatos .candidato-estado small { margin-top:2px; }
.tabla-candidatos .fila-candidato:has(input:checked) { background:var(--acento-suave); }
.paginador-candidatos { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; }
.paginador-candidatos select { width:auto; }
.barra-seleccion-contratos { position:sticky; bottom:10px; z-index:10; background:var(--panel); box-shadow:0 -3px 18px #0001; }
.detalle-seleccion-contratos { font-size:12px; margin-top:6px; }
.detalle-seleccion-contratos summary { cursor:pointer; color:var(--acento); }
.detalle-seleccion-contratos .seleccion-chips { max-height:140px; overflow-y:auto; }
@media(min-width:768px) {
    .portal-page .modulo-contratos .tabla-candidatos tbody td { padding:4px 10px; line-height:1.25; }
    .tabla-candidatos .candidato-identidad small, .tabla-candidatos .candidato-estado small { line-height:1.2; margin-top:2px; }
    .tabla-candidatos .estado-catalogo { padding:2px 6px; line-height:16px; }
    .portal-page .modulo-contratos .tabla-candidatos .candidato-accion .btn { min-height:28px; padding:3px 7px; font-size:12px; line-height:20px; white-space:nowrap; }
}
@media(max-width:767px) {
    .tabla-candidatos thead { display:none; }
    .modulo-contratos .tabla-candidatos, .tabla-candidatos tbody { display:block; min-width:0; }
    .tabla-candidatos tr { display:grid; grid-template-columns:30px minmax(0,1fr); padding:10px; border-bottom:1px solid var(--borde-suave); gap:5px; }
    .portal-page .modulo-contratos .tabla-candidatos td { display:block; border:0; padding:0; }
    .tabla-candidatos td:not(:first-child) { grid-column:2; }
    .tabla-candidatos td:first-child { grid-row:1; }
    .tabla-candidatos .candidato-identidad { grid-row:1; }
    .tabla-candidatos .candidato-ocupacion { font-size:12px; color:var(--texto-secundario); }
    .tabla-candidatos .btn { min-height:44px; display:inline-flex; align-items:center; }
    .barra-seleccion-contratos { bottom:0; padding:10px !important; gap:8px; }
}


/* Acciones y filas compactas de los cinco catálogos de RR. HH. */
.catalogos-rrhh .tabla-catalogo tbody td { padding-top: 7px; padding-bottom: 7px; }
.catalogos-rrhh .acciones-fila-catalogo { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 6px; }
.catalogos-rrhh .acciones-fila-catalogo form { margin: 0; }
.catalogos-rrhh .acciones-fila-catalogo .accion-catalogo { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 3px 7px; font-size: .7rem; line-height: 18px; text-decoration: none; }
.catalogos-rrhh .estado-catalogo { padding: 3px 7px; font-size: .7rem; line-height: 18px; }

/* Un único paginador numerado para todos los listados del portal. */
.paginador-portal { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.paginador-portal .pagination { flex-wrap:wrap; }
.paginador-portal .page-link { padding:7px 11px; font-size:13px; line-height:20px; }
@media(max-width:575px) { .paginador-portal .page-link { padding:7px 9px; } }

/* Ficha rápida: secciones accesibles sin apilar todo el expediente. */
#ficha-trabajador.ficha-rapida { --bs-offcanvas-width: 510px; }
#ficha-trabajador .offcanvas-header, #ficha-trabajador .offcanvas-body { padding: 16px; }
.cabecera-ficha-rapida { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.cabecera-ficha-rapida > div { min-width:0; }
.cabecera-ficha-rapida h3 { font-size:17px; font-weight:600; line-height:1.4; margin:0 0 5px; overflow-wrap:anywhere; }
.cabecera-ficha-rapida p { font-size:13px; color:var(--texto-secundario); margin:0; }
.cabecera-ficha-rapida .avatar-colaborador, .foto-ficha-rapida { width:64px; height:76px; flex-shrink:0; border-radius:10px; object-fit:contain; background:var(--fondo-sutil); }
.acciones-ficha-rapida { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.pestanas-ficha-rapida { display:flex; margin-bottom:16px; }
#ficha-trabajador .nav-link { font-size:13px; min-height:44px; color:var(--azul-estructura); }
#ficha-trabajador .nav-link.active { color:var(--azul-estructura); background:var(--panel); border-color:var(--borde-suave) var(--borde-suave) var(--panel); font-weight:600; }
#ficha-trabajador .titulo-ficha-rapida { font-size:13px; font-weight:600; color:var(--azul-estructura); background:var(--azul-estructura-suave); padding:9px 12px; border-radius:8px; margin:0 0 14px; }
.cuadricula-ficha-rapida { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px 18px; margin:0 0 16px; }
.cuadricula-ficha-rapida .dato-ficha-amplio { grid-column:1/-1; }
.cuadricula-ficha-rapida dt { font-size:12px; font-weight:600; color:var(--texto-secundario); margin-bottom:4px; }
.cuadricula-ficha-rapida dd { font-size:13px; line-height:1.5; margin:0; overflow-wrap:anywhere; color:var(--texto-principal); }
.estado-acceso-rapido { font-size:13px; padding:12px; border:1px solid var(--borde-suave); border-radius:8px; }

/* Maestro de contratos con densidad de catálogo. */
.filtros-plantillas { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; padding:12px; }
.filtros-plantillas > div { flex:1 1 220px; max-width:480px; }
.filtros-plantillas .form-label { margin-bottom:4px; font-size:12px; }
.portal-page .plantillas-compactas .tabla-catalogo tbody td { padding:4px 10px; line-height:1.3; }
.plantillas-compactas .acciones-plantilla { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.plantillas-compactas .acciones-plantilla form { margin:0; }
.portal-page .plantillas-compactas .acciones-plantilla .accion-catalogo { display:inline-flex; align-items:center; gap:4px; min-height:28px; padding:3px 7px; font-size:12px; line-height:20px; text-decoration:none; }
.plantillas-compactas .estado-catalogo { padding:2px 6px; line-height:18px; }
@media(max-width:767px) { .plantillas-compactas .tabla-catalogo table { min-width:720px; } .portal-page .plantillas-compactas .acciones-plantilla .accion-catalogo { min-height:44px; } }

/* INICIO turquesa limpio: retirar este bloque para recuperar los fondos originales. */
@media screen {
    :root:not([data-bs-theme="dark"]) .contenido-portal:has(.tablero-boletas) { background:#fafcfc; }
    :root:not([data-bs-theme="dark"]) .lateral-portal { background:#f1fafa !important; }
    :root:not([data-bs-theme="dark"]) .lateral-portal .enlace-menu:hover { background:#e4f3f3; color:#14666b; }
    :root:not([data-bs-theme="dark"]) .lateral-portal .enlace-menu.activo { background:#fff; color:#14666b; }
    :root:not([data-bs-theme="dark"]) .lateral-portal .enlace-menu.activo::before { background:#5abebf; }
    :root:not([data-bs-theme="dark"]) .lateral-portal .grupo-menu-plegable > summary:hover { color:#14666b; }
}
/* FIN turquesa limpio. */