/*
 * Módulos del panel del Admin: UN sistema de color y UNA cabecera, definidos aquí una vez.
 *
 * Cada módulo se reconoce por el color de su tarjeta en el índice /settings
 * (views/settings/admin/settings.hbs). La raíz de cada pantalla lleva `.sec-mod` y la clase
 * de su módulo (`.mod-instituciones`, `.mod-usuarios`, …), que fija las variables; el resto de
 * este archivo SOLO usa las variables. Las pantallas sin `.sec-mod` (Presupuestal,
 * Inventarios, Contratación y los módulos del Admin que todavía no adoptan el sistema) no se
 * ven afectadas.
 *
 * Variables de cada módulo:
 *   --mod-base     el color de su tarjeta (barra superior)
 *   --mod-texto    texto sobre la barra (≥ 4,5:1 sobre --mod-base)
 *   --mod-oscuro   texto, enlaces, indicador y botones con texto blanco (≥ 6:1 sobre blanco)
 *   --mod-oscuro-2 el mismo, al pasar el mouse (≥ 8:1 con texto blanco)
 *   --mod-claro    fondos, filas al pasar el mouse y la pestaña activa (≥ 5:1 con --mod-oscuro)
 *   --mod-claro-2  bordes y fondos de énfasis (≥ 4,5:1 con --mod-oscuro)
 *   --mod-foco     anillo de foco
 * Contrastes medidos con la fórmula WCAG; los de cada módulo, en su bloque.
 *
 * Se conservan fuera de la paleta, a propósito: rojo de peligro (eliminar, desactivar), verde y
 * gris de estado (Activa/Inactiva), y el violeta y el naranja que distinguen los dos productos
 * del SP en Contratación de Servicios (contratados.hbs: una señal de seguridad, no decoración).
 */

/* ── Paletas por módulo ───────────────────────────────────────────────────── */
.sec-mod {
    --mod-gris: #565D64; /* texto secundario: 6,6:1 sobre blanco */
}
/* Instituciones — tarjeta rgb(251,150,138). Oscuros del rediseño anterior, ya aprobados.
   oscuro 6,02:1 · oscuro-2 8,18:1 (blanco) · claro 5,26:1 · claro-2 4,58:1 · texto/base 8,36:1 */
.mod-instituciones {
    --mod-base: #FB968A;
    --mod-texto: #2B0F0B;
    --mod-oscuro: #B03A2E;
    --mod-oscuro-2: #8F2D23;
    --mod-claro: #FDECE9;
    --mod-claro-2: #FBD9D4;
    --mod-foco: rgba(176, 58, 46, .30);
}
/* Usuarios — tarjeta rgb(109,220,109).
   oscuro 6,13:1 · oscuro-2 8,04:1 (blanco) · claro 5,65:1 · claro-2 5,06:1 · texto/base 7,06:1 */
.mod-usuarios {
    --mod-base: #6DDC6D;
    --mod-texto: #0F3E0F;
    --mod-oscuro: #1B711B;
    --mod-oscuro-2: #165D16;
    --mod-claro: #EAFAEA;
    --mod-claro-2: #CEF3CE;
    --mod-foco: rgba(27, 113, 27, .30);
}
/* Listas para cuando los demás módulos adopten el sistema (todavía no los usa ninguna pantalla).
   Misma derivación: base = su tarjeta; oscuro ≥ 6:1 y oscuro-2 ≥ 8:1 con blanco; claros ≥ 4,5:1. */
.mod-parametros { --mod-base: #8FEDE3; --mod-texto: #0C4D46; --mod-oscuro: #126E64; --mod-oscuro-2: #0E5A52; --mod-claro: #E9FBFA; --mod-claro-2: #CAF7F2; --mod-foco: rgba(18, 110, 100, .30); }
.mod-cuentas    { --mod-base: #E2B336; --mod-texto: #382B08; --mod-oscuro: #7B5E12; --mod-oscuro-2: #644D0E; --mod-claro: #FCF7E9; --mod-claro-2: #F7EBCA; --mod-foco: rgba(123, 94, 18, .30); }
.mod-cargar     { --mod-base: #C7CEEA; --mod-texto: #2A386F; --mod-oscuro: #455CB8; --mod-oscuro-2: #384B96; --mod-claro: #ECEFF8; --mod-claro-2: #DADFF1; --mod-foco: rgba(69, 92, 184, .30); }
.mod-historial  { --mod-base: #E4A3C7; --mod-texto: #4B1633; --mod-oscuro: #AC3275; --mod-oscuro-2: #8C2960; --mod-claro: #F9EBF3; --mod-claro-2: #F3D8E7; --mod-foco: rgba(172, 50, 117, .30); }
.mod-puc        { --mod-base: #A88679; --mod-texto: #30241F; --mod-oscuro: #7A5B4F; --mod-oscuro-2: #644B41; --mod-claro: #F5F1F0; --mod-claro-2: #E7DDDA; --mod-foco: rgba(122, 91, 79, .30); }
.mod-ente       { --mod-base: #57788D; --mod-texto: #FFFFFF; --mod-oscuro: #4A6678; --mod-oscuro-2: #3C5362; --mod-claro: #EFF3F5; --mod-claro-2: #D9E2E8; --mod-foco: rgba(74, 102, 120, .30); }

/* ── Página: el ancho no cambia con o sin barra de desplazamiento ─────────── */
html:has(.sec-mod) {
    scrollbar-gutter: stable;
}
/* Los avisos flash (views/partials/messages.hbs, errors.hbs) van ANTES de la cabecera en el
   layout: en estas páginas flotan, para no empujar la barra hacia abajo. */
body:has(> .sec-mod) > .alert {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1090;
    max-width: min(28rem, calc(100vw - 2rem));
    margin: 0;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
}

/* ── Cabecera de módulo (views/partials/modulo_cabecera.hbs) ─────────────── */
.sec-mod .contenedor-mod {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
.mod-cabecera {
    /* La cabecera queda quieta en la transición entre pestañas; solo el contenido se funde. */
    view-transition-name: mod-cabecera;
    background: #fff;
    margin-bottom: 1rem;
}
.mod-cabecera__barra {
    background: var(--mod-base);
    color: var(--mod-texto);
}
.mod-cabecera__fila {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 3.25rem;
}
.mod-cabecera__regresar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--mod-texto);
    font-weight: 600;
    text-decoration: none;
    padding: .35rem .6rem;
    margin-left: -.6rem;
    border-radius: .375rem;
}
.mod-cabecera__regresar:hover {
    color: var(--mod-texto);
    background: rgba(255, 255, 255, .35);
}
.mod-cabecera__nombre {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--mod-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mod-cabecera__nombre::before {
    /* separador entre «Regresar» y el nombre */
    content: '';
    flex: 0 0 auto;
    width: 1px;
    height: 1.4rem;
    margin-right: .5rem;
    background: currentColor;
    opacity: .35;
}

/* Pestañas: UNA línea siempre; en pantallas angostas se desplazan en horizontal. */
.mod-tabs {
    border-bottom: 1px solid var(--mod-claro-2);
}
.mod-tabs__lista {
    display: flex;
    flex-wrap: nowrap;
    gap: .25rem;
    height: 3rem;
    margin: 0;
    padding: 0 1rem;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
/* En pantallas angostas la fila se desplaza con el dedo: sin barra (taparía el indicador de la
   pestaña activa) y con un desvanecido en los bordes que avisa que hay más pestañas. */
@media (max-width: 767.98px) {
    .mod-tabs__lista {
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
    }
    .mod-tabs__lista::-webkit-scrollbar { display: none; }
}
.mod-tabs__lista > li {
    flex: 0 0 auto;
    display: flex;
}
.mod-tab {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 .9rem;
    color: var(--mod-oscuro);
    font-weight: 600;
    font-size: .95rem;
    white-space: nowrap;
    text-decoration: none;
    border-radius: .375rem .375rem 0 0;
}
.mod-tab:hover {
    color: var(--mod-oscuro-2);
    background: var(--mod-claro);
}
/* Activa: color, fondo e indicador (no solo color). */
.mod-tab[aria-current="page"] {
    color: var(--mod-oscuro-2);
    background: var(--mod-claro);
    font-weight: 700;
}
.mod-tab[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--mod-oscuro);
}
.mod-tab:focus-visible,
.mod-cabecera__regresar:focus-visible {
    outline: 2px solid var(--mod-oscuro);
    outline-offset: -2px;
    box-shadow: 0 0 0 4px var(--mod-foco);
}
.mod-cabecera__regresar:focus-visible {
    outline-color: var(--mod-texto);
}

/* Transición entre documentos: el contenido se funde, la cabecera no se mueve. La regla
   @view-transition va en el parcial, para que solo estas páginas la pidan. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .16s;
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* ── Contenido: tipografía y enlaces ──────────────────────────────────────── */
.sec-mod .mod-contexto {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem 1rem;
    margin-bottom: .75rem;
    font-size: .9rem;
    color: var(--mod-gris);
}
.sec-mod .mod-contexto strong { color: var(--mod-oscuro); }
.sec-mod h4,
.sec-mod h5,
.sec-mod h6 {
    color: var(--mod-oscuro);
    font-weight: 700;
}
.sec-mod h5 { font-size: 1.15rem; }
.sec-mod h6 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--mod-claro-2);
}
.sec-mod .text-muted,
.sec-mod .form-text {
    color: var(--mod-gris) !important;
}
.sec-mod a:not(.btn):not(.nav-link):not(.mod-tab):not(.mod-cabecera__regresar):not(.list-group-item) {
    color: var(--mod-oscuro);
}
.sec-mod a:not(.btn):not(.nav-link):not(.mod-tab):not(.mod-cabecera__regresar):not(.list-group-item):hover {
    color: var(--mod-oscuro-2);
}
.sec-mod code {
    color: var(--mod-oscuro);
    background: var(--mod-claro);
    padding: .05rem .3rem;
    border-radius: .25rem;
}

/* Subpestañas de las pantallas antiguas (Configuración, CPC): dentro de la tarjeta. */
.sec-mod .card-header-tabs .list-group-item {
    color: var(--mod-oscuro);
    font-weight: 600;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: .375rem .375rem 0 0;
    background: transparent;
}
.sec-mod .card-header-tabs .list-group-item:hover {
    background: var(--mod-claro);
    color: var(--mod-oscuro-2);
}
.sec-mod .card-header-tabs .list-group-item.active {
    background: var(--mod-claro);
    color: var(--mod-oscuro);
    border-bottom-color: var(--mod-oscuro);
}
.sec-mod .card-header-tabs .list-group-item.disabled {
    opacity: 1;
    pointer-events: none;
}

/* ── Tarjetas ─────────────────────────────────────────────────────────────── */
.sec-mod .card {
    border: 1px solid var(--mod-claro-2);
    border-radius: .6rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.sec-mod .card-header {
    background: var(--mod-claro);
    border-bottom: 1px solid var(--mod-claro-2);
}
/* Una tabla ancha se desplaza dentro de su tarjeta, no desborda la página. */
.sec-mod .card-body {
    overflow-x: auto;
}

/* ── Tablas ───────────────────────────────────────────────────────────────── */
.sec-mod .table {
    --bs-table-hover-bg: var(--mod-claro);
    vertical-align: middle;
}
.sec-mod .table thead th:not([class*="col-group-header--sso"]):not([class*="col-sso"]) {
    /* background-color y no `background`: el abreviado pisa el background-repeat de las flechas
       de orden de DataTables y las repite como un patrón. */
    background-color: var(--mod-claro);
    color: var(--mod-oscuro);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 2px solid var(--mod-oscuro);
}
.sec-mod .table tbody th,
.sec-mod .table tbody td {
    border-color: var(--mod-claro);
}
.sec-mod .table-responsive {
    border-radius: .4rem;
}

/* ── Botones ──────────────────────────────────────────────────────────────── */
.sec-mod .btn-mod,
.sec-mod .btn-primary,
.sec-mod .btn-secondary {
    background-color: var(--mod-oscuro);
    border-color: var(--mod-oscuro);
    color: #fff;
    font-weight: 600;
}
.sec-mod .btn-mod:hover,
.sec-mod .btn-primary:hover,
.sec-mod .btn-secondary:hover {
    background-color: var(--mod-oscuro-2);
    border-color: var(--mod-oscuro-2);
    color: #fff;
}
.sec-mod .btn-outline-mod,
.sec-mod .btn-outline-primary,
.sec-mod .btn-outline-secondary,
.sec-mod .btn-gestionar {
    background-color: #fff;
    border: 1px solid var(--mod-oscuro);
    color: var(--mod-oscuro);
    font-weight: 600;
}
.sec-mod .btn-outline-mod:hover,
.sec-mod .btn-outline-primary:hover,
.sec-mod .btn-outline-secondary:hover,
.sec-mod .btn-gestionar:hover {
    background-color: var(--mod-oscuro);
    border-color: var(--mod-oscuro);
    color: #fff;
}
.sec-mod .btn:focus-visible,
.sec-mod .btn:focus {
    box-shadow: 0 0 0 .25rem var(--mod-foco);
}
/* El peligro y el estado conservan su color: rojo para eliminar y desactivar, verde para activar. */
.sec-mod .btn-danger { color: #fff; }

/* ── Insignias ────────────────────────────────────────────────────────────── */
.sec-mod .badge.bg-success { background-color: #198754 !important; color: #fff; }
.sec-mod .badge.bg-secondary { background-color: #6c757d !important; color: #fff; }
.sec-mod .badge.bg-danger { background-color: #dc3545 !important; color: #fff; }
.sec-mod .badge-mod,
.sec-mod .badge-aviso {
    background-color: var(--mod-claro-2);
    color: var(--mod-oscuro);
    border: 1px solid var(--mod-oscuro);
    font-weight: 600;
}

/* ── Formularios ──────────────────────────────────────────────────────────── */
.sec-mod .form-label {
    font-weight: 600;
    font-size: .875rem;
    color: #212529;
}
.sec-mod .form-control:focus,
.sec-mod .form-select:focus,
.sec-mod .form-check-input:focus {
    border-color: var(--mod-oscuro);
    box-shadow: 0 0 0 .25rem var(--mod-foco);
}
.sec-mod .form-check-input:checked {
    background-color: var(--mod-oscuro);
    border-color: var(--mod-oscuro);
}

/* ── Contratación de Servicios: los grupos de Presupuesto e Inventarios ───── */
.sec-mod .col-group-header--productos {
    background-color: var(--mod-claro);
    color: var(--mod-oscuro);
}

/* ── Usuarios: listado y modal «Gestionar» ────────────────────────────────── */
.sec-mod #UsersVisible thead th { white-space: nowrap; }
.sec-mod .user-cell__wrap { display: flex; align-items: center; gap: .7rem; }
.sec-mod .user-avatar {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--mod-oscuro);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.sec-mod .user-info { display: flex; flex-direction: column; line-height: 1.25; }
.sec-mod .user-name { font-weight: 600; color: #212529; }
.sec-mod .user-email { font-size: .82rem; color: var(--mod-gris); }
.sec-mod .user-meta { font-size: .78rem; color: var(--mod-gris); margin-top: .1rem; }
.sec-mod .user-meta .user-sex { margin-right: .35rem; color: var(--mod-oscuro); }
.sec-mod .user-sep { margin: 0 .25rem; color: var(--mod-gris); }

.sec-mod .perm-cell { white-space: normal; }
.sec-mod .perm-pill {
    display: inline-block;
    margin: .12rem;
    padding: .18rem .55rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    background: var(--mod-claro);
    color: var(--mod-oscuro);
    border: 1px solid var(--mod-claro-2);
}
.sec-mod .perm-pill--pres { background: var(--mod-claro-2); border-color: var(--mod-oscuro); }
.sec-mod .perm-none { color: var(--mod-gris); }
.sec-mod .perm-none:not(:only-child) { display: none; }

.sec-mod .estado-badge {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
}
.sec-mod .estado-badge--on { background: #e4f4ee; color: #1f6b4d; }
.sec-mod .estado-badge--on::before { content: '\25CF'; margin-right: .3rem; color: #3da37e; }
.sec-mod .estado-badge--off { background: #eceeef; color: #565d64; }
.sec-mod .estado-badge--off::before { content: '\25CB'; margin-right: .3rem; }
.sec-mod .user-row--inactive { opacity: .6; }

.sec-mod .btn-gestionar {
    font-size: .82rem;
    padding: .3rem .8rem;
    border-radius: 6px;
}

.sec-mod#userModal .modal-header { background: var(--mod-base); color: var(--mod-texto); }
.sec-mod#userModal .modal-title { color: var(--mod-texto); }
.sec-mod#userModal .um-section { padding: .8rem 0; border-bottom: 1px solid var(--mod-claro-2); }
.sec-mod#userModal .um-section:last-child { border-bottom: 0; }
.sec-mod#userModal .um-section h6 { margin-bottom: .6rem; border-bottom: 0; }
.sec-mod#userModal .um-sub { margin-left: 1.6rem; }
.sec-mod#userModal .um-id-btn {
    background: var(--mod-claro);
    border: 1px solid var(--mod-oscuro);
    color: var(--mod-oscuro);
    border-radius: 6px; padding: .15rem .6rem; font-size: .85rem; font-weight: 600;
}
.sec-mod#userModal .um-id-btn:hover { background: var(--mod-oscuro); color: #fff; }

/* ── Iconos de estado y enlaces con ícono ─────────────────────────────────── */
.sec-mod .text-estado-ok { color: #198754; }
.sec-mod .text-estado-no { color: #dc3545; }
.sec-mod .text-estado-na { color: var(--mod-gris); }
.sec-mod a.enlace-icono { color: var(--mod-oscuro); }
.sec-mod a.enlace-icono:hover { color: var(--mod-oscuro-2); }