/* IBM Plex Sans is already @import'd by asoc-theme/css/style.css. */

:root {
    --safa-primary: #6c5ffc;
    --safa-primary-hover: #233ac5;
    --safa-primary-border: #6276ed;
    --safa-ink: #292e4a;
    --safa-muted: #6c757d;
    --safa-surface: rgba(255, 255, 255, 0.92);

    /* Bridge into Bootstrap 5's own theming variables so every built-in
       component (buttons, links, focus rings, badges...) picks up the
       asoc/ purple instead of Bootstrap's default blue. */
    --bs-primary: var(--safa-primary);
    --bs-primary-rgb: 108, 95, 252;
    --bs-link-color: var(--safa-primary);
    --bs-link-color-rgb: 108, 95, 252;
    --bs-link-hover-color: var(--safa-primary-hover);
    --bs-body-font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Opacity variants of the primary color referenced by the ported asoc/
       stylesheet (originally defined in its dark/transparent mode files,
       which we don't ship since SAFA doesn't offer that mode switcher). */
    --primary005: rgba(108, 95, 252, 0.05);
    --primary01: rgba(108, 95, 252, 0.1);
    --primary02: rgba(108, 95, 252, 0.2);
    --primary03: rgba(108, 95, 252, 0.3);
    --primary06: rgba(108, 95, 252, 0.6);
    --primary09: rgba(108, 95, 252, 0.9);
}

body {
    min-height: 100vh;
    font-family: var(--bs-body-font-family);
    background:
        radial-gradient(circle at top left, rgba(108, 95, 252, 0.12), transparent 24rem),
        linear-gradient(135deg, #f4f3ff 0%, #f8f8ff 45%, #eaeaff 100%);
    color: var(--safa-ink);
}

.swal2-container {
    z-index: 10050 !important;
}

.custom-card-warning {
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

a {
    color: var(--safa-primary);
}

a:hover {
    color: var(--safa-primary-hover);
}

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

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--safa-primary-hover);
    border-color: var(--safa-primary-hover);
}

.navbar-brand {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--safa-primary) !important;
}

.page-shell {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.glass-card {
    background: var(--safa-surface);
    border: 1px solid rgba(41, 46, 74, 0.08);
    border-radius: 1.25rem;
    box-shadow: 0 24px 70px rgba(41, 46, 74, 0.12);
}

.hero-card {
    overflow: hidden;
}

.hero-card::after {
    content: '';
    position: absolute;
    inset: auto -2rem -2rem auto;
    width: 12rem;
    height: 12rem;
    border-radius: 999px;
    background: rgba(108, 95, 252, 0.14);
    filter: blur(10px);
}

.muted-note {
    color: var(--safa-muted);
}

.credential-box {
    background: var(--safa-ink);
    color: #f9fafb;
    border-radius: 1rem;
}

.feature-pill {
    background: rgba(108, 95, 252, 0.1);
    color: var(--safa-primary-hover);
    border-radius: 999px;
    display: inline-flex;
    padding: 0.45rem 0.9rem;
    margin: 0.3rem 0.3rem 0 0;
}

/* Auth pages (login / reset password) reuse asoc/'s login100 card. The
   purple-to-blue background itself comes from asoc-theme/css/color1.css's
   .login-img / .login-img::before rules (already ported, with its bg2.jpg
   photo) - .auth-shell only adds layout, it must NOT set its own
   `background`, or it clobbers .login-img's on the same element (equal
   specificity, same property, last one in app.js's import order wins). See
   SAFA's templates/base.html.twig `main` block override, which auth
   templates replace entirely so this can paint edge-to-edge instead of
   sitting inside the shared .page-shell/.container chrome. */
.auth-shell {
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    /* Si la tarjeta supera el alto de la pantalla (p. ej. cuando aparece el aviso de ingreso
       fallido), el contenedor debe poder desplazarse: con `align-items: center` el desbordamiento
       superior es inalcanzable y el mensaje —que va ARRIBA— no se veía. */
    overflow-y: auto;
}

.auth-shell .wrap-login100 {
    max-width: 460px;
    width: 100%;
    padding: 48px 40px;
    /* `margin: auto` centra igual que `align-items: center` pero, si el contenido es más alto que la
       pantalla, permite llegar al tope en vez de recortarlo. */
    margin: auto;
}

.auth-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.auth-brand img {
    height: 48px;
}

/* Font Awesome: el theme asoc-theme/style.css força .fa/.far/.fas a
   "Font Awesome 5 Free", pero el proyecto carga Font Awesome 4.7
   (@font-face "FontAwesome"). Restauramos la familia correcta para que
   los íconos `fa fa-*` (asociaciones, etc.) se dibujen. */
.fa,
.far,
.fas {
    font-family: 'FontAwesome' !important;
}

/* ---------------------------------------------------------------------------
   LOGO DEL APP-SIDEBAR SIEMPRE VISIBLE (regresión del plugin sticky)
   ---------------------------------------------------------------------------
   El theme fija el logo (.side-header, z-index 99) y el sidebar (.app-sidebar,
   z-index 99) por CSS, y el header (.app-header, blanco y de ancho completo)
   queda por debajo en el apilado (z-index 9 en escritorio): así el logo se ve
   SOBRE la franja del header.

   El plugin `assets/vendor-legacy/sticky.js` agregaba la clase `sticky-pin` al
   envoltorio del sidebar (<div class="sticky">), que lo fija con `z-index: 1`:
   al crear un contexto de apilado con z-index bajo, el sidebar y su logo caían
   POR DEBAJO del header y el logo desaparecía al hacer scroll (volvía sólo al
   llegar arriba). Causa raíz corregida en el JS (el plugin ahora excluye ese
   envoltorio); esta regla es la red de seguridad para que el logo NUNCA quede
   tapado, aunque el envoltorio vuelva a posicionarse. */
@media (min-width: 992px) {
    /* Sólo el envoltorio `div` del sidebar (el header del theme también lleva la clase
       `sticky` y debe conservar su z-index 9 para no tapar el logo). */
    .page-main > div.sticky {
        z-index: 100 !important;
    }

    .side-header {
        z-index: 100 !important;
    }
}

/* ==========================================================================
   MENÚS DESPLEGABLES DEL HEADER (notificaciones y perfil)
   ==========================================================================
   El header usa Bootstrap 5: el menú lo posiciona Popper con un
   `transform: translate(...)` tomando como referencia el propio botón. El theme
   portado (asoc-theme/style.css) además forzaba
   `.header .dropdown-menu { top: 3.5rem !important; }`, y esa regla se SUMABA al
   transform de Popper: el menú quedaba colgado ~56 px más abajo del header y
   desalineado. Aquí se anula ese posicionamiento para que mande Popper:
   `top: 0` + una separación real bajo el botón (Popper la usa como offset).
   El respaldo sin Popper (`[data-bs-popper="static"]`) conserva su `top: 100%`. */
.app-header .dropdown-menu:not([data-bs-popper="static"]) {
    top: 0 !important;
    margin-top: .35rem !important;
}

/* ==========================================================================
   MANTENEDOR DE PERFILES · MATRIZ DE PERMISOS (Ver / Modificar por sección)
   Usabilidad: celdas grandes y clicables, cabecera fija, categorías con su
   propio "marcar todo", buscador y contador. Sigue el look del tema (warning).
   ========================================================================== */
.perm-matriz {
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: .5rem;
    overflow: hidden;
    background: #fff;
}

.perm-cabecera,
.perm-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px 112px 92px;
    align-items: stretch;
}

.perm-cabecera {
    background: #f8f9fa;
    border-bottom: 2px solid rgba(0, 0, 0, .12);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6c757d;
}

.perm-cabecera > div {
    padding: .6rem .75rem;
}

.perm-cuerpo {
    max-height: min(58vh, 560px);
    overflow-y: auto;
    /* `auto` (y NO `contain`): la matriz tiene su propio scroll, y con `contain` la rueda se quedaba
       "atrapada" en la lista al llegar al final, sin encadenar con el cuerpo del modal. Eso, sumado a
       que el pie del modal estaba dentro del body, hacía que los botones Guardar/Cancelar del modal de
       perfiles nunca aparecieran. */
    overscroll-behavior: auto;
}

/* PIE DEL MODAL DE PERFILES: siempre visible. No se comprime ni se desplaza; el único que hace scroll
   es `.modal-body` (Bootstrap + `modal-dialog-scrollable`). */
#modalPerfil .modal-footer {
    flex-shrink: 0;
}

/* Cabecera de categoría: fija mientras se desplaza la matriz */
.perm-grupo {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .45rem .75rem;
    background: #fff6e0;
    border-top: 1px solid rgba(0, 0, 0, .08);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.perm-grupo-titulo {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #a1730a;
}

.perm-grupo-todos,
.perm-celda {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
}

.perm-grupo-todos {
    font-size: .78rem;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
}

.perm-fila {
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    transition: background-color .12s ease-in-out;
}

.perm-fila:nth-of-type(even) {
    background: rgba(0, 0, 0, .015);
}

.perm-fila:hover {
    background: rgba(255, 193, 7, .10);
}

.perm-fila-bloqueada {
    background: rgba(220, 53, 69, .05) !important;
    color: #6c757d;
}

.perm-col-seccion {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    padding: .5rem .75rem;
    min-width: 0;
}

.perm-seccion {
    font-size: .875rem;
    font-weight: 600;
    color: #3b3f5c;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   IMPORTANTE: el tema legacy (`asoc-theme/css/style.css`) aplica
   `.form-check-input { position: absolute; margin-top: .3rem; margin-left: -1.25rem }`
   (patrón Bootstrap 4). Como las celdas de la matriz NO son `.form-check`, los
   checkboxes se posicionaban respecto a `.modal-content`: aparecían encima del
   modal y se movían con el scroll. Aquí se devuelven al flujo normal de la fila.
   -------------------------------------------------------------------------- */
.perm-matriz .form-check-input {
    position: static !important;
    margin: 0 !important;
    float: none !important;
    inset: auto !important;
}

/* Celda grande y clicable: todo el recuadro marca el permiso */
.perm-celda {
    width: 100%;
    min-height: 46px;
    padding: .5rem .35rem;
    border-left: 1px dashed rgba(0, 0, 0, .10);
    transition: background-color .12s ease-in-out, box-shadow .12s ease-in-out;
}

.perm-celda:hover {
    background: rgba(255, 193, 7, .18);
}

.perm-celda .form-check-input {
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
    border-color: #adb5bd;
    cursor: pointer;
    flex: 0 0 auto;
}

.perm-celda:has(.form-check-input:checked) {
    background: rgba(25, 135, 84, .10);
    box-shadow: inset 0 0 0 1px rgba(25, 135, 84, .35);
}

.perm-celda:has(.form-check-input:disabled) {
    opacity: .55;
    cursor: not-allowed;
}

.perm-celda-texto {
    font-size: .8rem;
    font-weight: 600;
    color: #3b3f5c;
}

.perm-col-todos {
    display: flex;
    align-items: center;
    justify-content: center;
}

.perm-celda-todos {
    min-height: 46px;
    width: 100%;
    border-left: 1px solid rgba(0, 0, 0, .08);
    background: rgba(108, 117, 125, .05);
}

.perm-toolbar .perm-buscar {
    min-width: 260px;
    flex: 1 1 260px;
    max-width: 420px;
}

/* El tema legacy deja el padding de Bootstrap 4 en `.form-check`: se ajusta para que el
   switch "Perfil Activo" (Bootstrap 5) no se monte sobre su etiqueta. */
#modalPerfil .form-switch {
    padding-left: 3rem;
    min-height: 1.5rem;
}

#modalPerfil .form-switch .form-check-input {
    width: 2.6rem;
    height: 1.3rem;
    margin-top: .1rem;
    margin-left: -3rem;
}

/* ==========================================================================
   TABLA DE VALORES DE TRÁMITES · código de colores de los montos
   ARFA = AZUL · ASOCIACIÓN = AMARILLO · GANANCIA = VERDE
   (ganancia = Valor Asociación − Valor ARFA, nunca negativa)
   ========================================================================== */
.th-valor {
    font-weight: 700;
}

.th-valor-arfa,
.col-valor-arfa {
    background: rgba(13, 110, 253, .10) !important;
    color: #0a58ca !important;
}

.th-valor-asoc,
.col-valor-asoc {
    background: rgba(255, 193, 7, .22) !important;
    color: #8a6100 !important;
}

.th-ganancia,
.col-ganancia {
    background: rgba(25, 135, 84, .12) !important;
    color: #0f5132 !important;
}

/* Pastilla del monto: legible en pantalla y al imprimir */
.valor-pill {
    display: inline-block;
    min-width: 104px;
    padding: .3rem .6rem;
    border-radius: .375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.valor-pill-arfa {
    color: #0a58ca;
    background: rgba(13, 110, 253, .10);
    border: 1px solid rgba(13, 110, 253, .35);
}

.valor-pill-asoc {
    color: #8a6100;
    background: rgba(255, 193, 7, .18);
    border: 1px solid rgba(255, 193, 7, .55);
}

.valor-pill-ganancia {
    color: #0f5132;
    background: rgba(25, 135, 84, .12);
    border: 1px solid rgba(25, 135, 84, .35);
}

/* Ganancia en 0 (sin margen) y defensa por si existiera un dato antiguo negativo */
.valor-pill-cero {
    color: #664d03;
    background: rgba(255, 193, 7, .16);
    border: 1px solid rgba(255, 193, 7, .5);
}

.valor-pill-negativa {
    color: #842029;
    background: rgba(220, 53, 69, .12);
    border: 1px solid rgba(220, 53, 69, .35);
}

@media (max-width: 767.98px) {
    .perm-cabecera,
    .perm-fila {
        grid-template-columns: minmax(0, 1fr) 88px 96px;
    }

    .perm-col-todos,
    .perm-cabecera .perm-col-todos {
        display: none;
    }

    .perm-celda-texto {
        display: none;
    }
}
/* ==========================================================================
   Botón de cierre de los modales (partial `_boton_cerrar_modal.html.twig`)
   --------------------------------------------------------------------------
   El `btn-close` de Bootstrap pinta una X oscura que se pierde sobre las
   cabeceras coloreadas del tema (bg-danger, bg-warning, bg-success…). Este
   botón blanco circular con "×" se ve igual sobre cualquier cabecera y es el
   único lugar donde vive su estilo: las plantillas solo incluyen el partial.
   ========================================================================== */
.btn-cerrar-modal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 35px;
    min-width: 35px; /* el tema legacy deja min-width en los .btn y deformaba el círculo */
    height: 35px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #fff;
    color: #212529;
    font-size: 1.25rem;
    line-height: 1;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

/* Mantiene el anillo de foco de Bootstrap sobre cualquier cabecera */
.btn-cerrar-modal:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(108, 95, 252, .45);
}

/* ==========================================================================
   CAMPANA DE NOTIFICACIONES DEL ENCABEZADO
   --------------------------------------------------------------------------
   Refuerzos propios del SGFA sobre el componente del tema (que ya estiliza
   `.notifications-menu`, `.notifyimg` y `.notification-label`):

     - `.sgfa-badge-nuevo`  : pulso del contador cuando LLEGA algo nuevo.
     - `.notificaciones-panel`: el desplegable no crece sin límite (scroll propio).
     - `.notificaciones-mensaje`: el mensaje se recorta a 2 líneas.
     - `.notificaciones-skeleton`: barras de carga mientras llega el resumen.

   Accesibilidad: el pulso se desactiva con `prefers-reduced-motion`.
   ========================================================================== */

@keyframes sgfa-badge-pulso {
    0% { transform: scale(1); }
    40% { transform: scale(1.28); }
    100% { transform: scale(1); }
}

.notification-badge.sgfa-badge-nuevo {
    animation: sgfa-badge-pulso .9s ease-in-out 2;
}

@media (prefers-reduced-motion: reduce) {
    .notification-badge.sgfa-badge-nuevo {
        animation: none;
    }
}

/* --- Panel (el desplegable) -------------------------------------------------
   Anclado a la derecha y con ancho acotado. Si el ancho lo decide el contenido,
   una notificación con texto largo estira el panel hasta el menú lateral y lo
   tapa: el `app-sidebar` del tema es `position: fixed; z-index: 99` y se pinta
   después del header en el DOM. */
.header .notifications .dropdown-menu {
    width: 22rem;                 /* 352px: ancho de un panel de avisos */
    min-width: 0;
    max-width: calc(100vw - 1.5rem);
    padding: 0;
    border: 1px solid #e9edf4;
    border-radius: .6rem;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .12);
    overflow: hidden;
}

/* El encabezado y su desplegable deben quedar POR ENCIMA del app-sidebar. Bootstrap reserva
   1040/1055 para backdrop/modal, así que 1000 deja los modales por delante del header. */
.app-header.header,
.modal-open .app-header.header {
    z-index: 1000;
}

/* --- Listado ---------------------------------------------------------------
   Alto natural (el tema lo fija en 300px y se veía un panel enorme y vacío) y
   scroll NATIVO: el polling repinta la lista y perfect-scrollbar perdería su riel
   (ver la nota de `initPerfectScrollbars()` en app.js). */
.header .notifications-menu.notificaciones-panel {
    height: auto;
    max-height: 20rem;            /* 320px: ~4 avisos y luego se desplaza */
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cfd6e0 transparent;
}

/* Contador sobre la campana. El tema solo posiciona `.header-badge` (y con `display: block
   !important`, que anularía el `d-none` de "sin novedades"), así que el posicionamiento va aquí. */
.header-right-icons .nav-link.icon .notification-badge {
    position: absolute;
    top: -3px;
    right: 0;
    padding: 3px 5px;
    font-size: 10px;
    line-height: 1.1;
    border-radius: 50px;
}

/* --- Encabezado, pie y chip ------------------------------------------------ */
.header .dropdown.notifications .drop-heading {
    padding: .7rem .9rem .5rem;
}

.header .dropdown.notifications .drop-heading h6 {
    font-size: .875rem;
}

.notificaciones-chip {
    padding: .1rem .45rem;
    border-radius: 999px;
    background: #fdecef;
    color: #d6394f;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.6;
}

.header .dropdown.notifications .notificaciones-marcar-todas {
    padding: 0;
    border: 0;
    background: none;
    color: #8a94a6;
    font-size: .75rem;
}

.header .dropdown.notifications .notificaciones-marcar-todas:hover {
    color: #6c5ffc;
}

.header .dropdown.notifications .notificaciones-pie {
    padding: .6rem .9rem !important;
    border-top: 1px solid #f1f4f9;
    color: #6c5ffc;
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
}

/* --- Fila de notificación (minimalista) ----------------------------------- */
.header .dropdown.notifications .notificaciones-item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .65rem .9rem !important;
    border-bottom: 1px solid #f4f6fb;
    white-space: normal;
}

.header .dropdown.notifications .notificaciones-item:last-child {
    border-bottom: 0;
}

.header .dropdown.notifications .notificaciones-item:hover {
    background: #f8fafc;
}

.header .dropdown.notifications .notificaciones-item--nueva {
    background: #f7f8ff;
}

.notificaciones-icono {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    font-size: .8rem;
}

.notificaciones-cuerpo {
    flex: 1 1 auto;
    min-width: 0;                 /* deja recortar el texto en vez de estirar el panel */
}

.notificaciones-titulo {
    display: block;
    color: #1f2937;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.3;
}

.notificaciones-punto {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: .3rem;
    border-radius: 50%;
    background: #d6394f;
    vertical-align: middle;
}

/* Mensaje: dos líneas como máximo (el detalle completo está en el centro). */
.notificaciones-mensaje {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: .1rem;
    color: #6b7280;
    font-size: .75rem;
    line-height: 1.35;
}

.notificaciones-hora {
    display: block;
    margin-top: .15rem;
    color: #9aa3af;
    font-size: .6875rem;
}

/* Acción de la fila: discreta, aparece al pasar el ratón (o al enfocar con teclado). */
.notificaciones-accion {
    flex: 0 0 auto;
    padding: 0 .1rem;
    border: 0;
    background: none;
    color: #9aa3af;
    line-height: 1;
    opacity: 0;
    transition: opacity .15s ease;
}

.header .dropdown.notifications .notificaciones-item:hover .notificaciones-accion,
.notificaciones-accion:focus-visible {
    opacity: 1;
}

.notificaciones-skeleton {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #eef1f4 25%, #e3e7ec 37%, #eef1f4 63%);
    background-size: 400% 100%;
    animation: sgfa-skeleton 1.4s ease infinite;
}

@keyframes sgfa-skeleton {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/*
 * BUSCADOR DEL ENCABEZADO (`#typehead`): arranca `readonly` para que el navegador NO le escriba el usuario
 * guardado del sitio (el RUT del login) — ver `assets/sin_autofill.js` y `modulo-layout-y-sesion.md` —. El
 * tema pinta los `form-control[readonly]` con un fondo tenue; acá se mantiene el fondo NORMAL del campo,
 * así el buscador se ve igual que siempre (el módulo lo libera en cuanto el usuario lo toca).
 */
.main-header-center #typehead[readonly] {
    background-color: #ffffff;
    cursor: text;
}

/* --- Sub-ítems del menú lateral (pasos con su "Modificar") -------------------
   El `mega-menu` del tema fuerza `display: block !important` en sus `ul`, así que un sub-ítem no se
   puede anidar visualmente: se indenta con esta clase, de modo que el `1.1 Modificar Torneo` quede
   pegado a su paso (`1. Ingresar Torneo`) y se lea como su continuación. El COLOR lo fija el bloque
   de contraste AA de más abajo. */
.slide-menu .slide-item.slide-item--sub {
    padding-left: 1.75rem;
    font-size: 12.8px;
}

/* ==========================================================================
   CONTRASTE DEL MENÚ LATERAL (WCAG 2.1 AA)
   --------------------------------------------------------------------------
   El tema pinta los ítems con `#74829c` (13,3 px) y el sub-ítem quedaba en `#8a94a6` (12,8 px):
   sobre el fondo blanco del sidebar (`.app-sidebar { background: #fff }`) dan **3,88:1** y
   **3,06:1**, por debajo del **4,5:1** que exige AA para texto normal. Estos tonos conservan la
   jerarquía visual (el sub-ítem sigue más claro, más chico y sangrado) pero cumplen: **6,1:1** y
   **4,8:1**. Lo verifica `tests/Layout/ContrasteSidebarTest.php`, que calcula el contraste de estos
   hexadecimales (si alguien vuelve a un gris claro, la prueba falla).
   ========================================================================== */
.app-sidebar .slide-item {
    color: #56627a;                /* ítems del menú (6,1:1 sobre #fff) */
}

.app-sidebar .slide-item.slide-item--sub {
    color: #667385;                /* sub-ítems 1.1 / 2.1 (4,8:1 sobre #fff) */
}

.app-sidebar .slide-menu li .slide-item:before {
    color: #667385;                /* el guioncito que precede a cada ítem */
}

/* ==========================================================================
   ANILLO DE FOCO POR TECLADO EN EL MENÚ LATERAL
   --------------------------------------------------------------------------
   El tema sólo cambia el COLOR en `:focus` (idéntico al hover), así que navegando con el teclado no
   se distinguía el foco del mouse; y no se puede usar `outline` porque el tema lo anula en los
   botones (`.btn:focus { outline: none !important }`). Se usa `box-shadow`: el MISMO anillo del botón
   de cierre de los modales (`.btn-cerrar-modal:focus-visible`). Lo verifica
   `tests/Layout/FocoVisibleSidebarTest.php`.
   ========================================================================== */
.app-sidebar a:focus-visible,
.app-sidebar .side-menu__item:focus-visible,
.app-sidebar .slide-item:focus-visible {
    outline: none;
    border-radius: .375rem;
    box-shadow: 0 0 0 .25rem rgba(108, 95, 252, .45);   /* el mismo anillo de .btn-cerrar-modal */
}