/*!
 * Altheroh - Chrome del layout (sidebar / header / footer / fondo) + Login.
 *
 * Fase 1: los tokens de marca viven en altheroh-design-system.css, cargado
 *         globalmente antes que este archivo.
 * Fase 2: el chrome consume SOLO tokens --ath-*. El modo oscuro es 100% CSS
 *         (antes se forzaba por JS con estilos inline). altheroh-theme.js ya
 *         solo alterna el atributo html[data-altheroh-theme].
 *
 * Se conservan algunos !important donde hay que ganarle a dashmix.css
 * (plantilla de terceros, no editable). Al no haber ya !important inline por
 * JS, la cascada vuelve a ser predecible.
 */

/* ==========================================================================
   1. SIDEBAR
   ========================================================================== */
.altheroh-sidebar {
    background-color: var(--ath-surface) !important;
    border-right: 1px solid var(--ath-border);
    /* #sidebar (dashmix.css) ya es position:fixed con top:0/bottom:0 — con
       eso solo, la altura ya queda fijada al viewport sin necesitar un
       height:100vh explícito (que además chocaba con el pie de página fijo:
       el sidebar se pasaba por debajo, obligándolo a su propio scroll
       interno en vez de terminar justo donde empieza el footer). El scroll
       de la app debe salir SOLO en el body/#main-container.
       Ver #page-container.page-footer-fixed #sidebar más abajo para el
       "bottom" que deja el espacio del footer fijo. */
    height: auto !important;
    /* El <nav id="sidebar"> trae un style="min-height:100vh" inline (en
       _Layout.cshtml) — un inline SOLO lo gana un !important en hoja externa.
       Sin este override, min-height:100vh obligaba al rail a medir al menos
       el alto completo del viewport, más de lo que queda disponible arriba
       del footer fijo (100vh - 4.375rem), y por eso scrolleaba aunque el
       menú completo entrara de sobra ("sigue mostrando el scroll a pesar de
       que el menú no está desbordado", reportado en vivo). */
    min-height: 0 !important;
    max-height: none;
    overflow-y: auto !important;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

/* El pie de página queda fijo (page-footer-fixed en #page-container): el
   sidebar debe terminar justo ARRIBA del footer, no pasar por debajo (eso
   era lo que forzaba su propio scroll interno incluso con pocos ítems). */
#page-container.page-footer-fixed #sidebar {
    bottom: 4.375rem;
}

/* El verdadero causante del scroll que seguía saliendo: `.content-side`
   (dashmix.css) — un DIV DISTINTO, dentro de `#sidebar` — trae su PROPIO
   `min-height:100vh` + `overflow-y:auto` (para el sidebar completo, no el
   rail). Con el `#sidebar` exterior ya bien medido (100vh menos el footer),
   ese `min-height:100vh` interno lo hacía más alto que su propio
   contenedor, y su propio scroll (anidado, independiente del de
   `.altheroh-sidebar`) seguía apareciendo aunque el contenido real entrara
   de sobra. Un solo contenedor de scroll (el externo) alcanza. */
#sidebar .content-side {
    min-height: 0 !important;
    overflow-y: visible !important;
}

    /* Barra de scroll discreta */
    .altheroh-sidebar::-webkit-scrollbar {
        width: 8px;
    }

    .altheroh-sidebar::-webkit-scrollbar-thumb {
        background: var(--ath-border-strong);
        border-radius: var(--ath-radius-pill);
    }

    .altheroh-sidebar::-webkit-scrollbar-track {
        background: transparent;
    }

.altheroh-sidebar-logo {
    position: static;
    background-color: transparent;
    background-image: url('/img/site/altheroh_logotipo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 85%;
    height: 60px;
    margin: 1.25rem auto .5rem;
}

.altheroh-sidebar-isotipo {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

/* La plantilla reservaba 140px de padding-top en .content-side para el
   antiguo logo position:fixed; con el logo en flujo normal quedaba un hueco. */
.altheroh-sidebar .content-side {
    padding-top: .5rem;
    padding-bottom: 2rem; /* aire tras el ultimo item al llegar al final del scroll */
}

.altheroh-sidebar-heading {
    font-family: var(--ath-font-mono);
    font-size: var(--ath-fs-eyebrow);
    font-weight: var(--ath-fw-black);
    letter-spacing: var(--ath-tracking-label);
    text-transform: uppercase;
    color: var(--ath-primary-ink) !important;
    opacity: .7;
    padding-bottom: .5rem !important;
}

/* Color explicito (no depender del default de dashmix.css) para no quedar
   nunca en estado mixto claro/oscuro. */
.altheroh-sidebar .nav-main-link {
    color: var(--ath-primary) !important;
}

.altheroh-sidebar .nav-main-link-icon {
    color: var(--ath-primary) !important;
    opacity: .75;
}

.altheroh-sidebar .nav-main-link:hover {
    color: var(--ath-primary) !important;
    background-color: var(--ath-primary-soft);
}

.altheroh-sidebar .nav-main-link.active {
    color: var(--ath-primary) !important;
    background-color: var(--ath-primary-soft);
    box-shadow: inset 2px 0 0 var(--ath-accent);
}

li.nav-main-item {
    word-break: break-word;
}

/* ==========================================================================
   2. FONDO DEL CONTENIDO + TITULO DE PAGINA
   ========================================================================== */
#main-container {
    background-color: var(--ath-bg);
}

/* Reemplaza la fuente decorativa "Zen Dots" del titulo de pagina por la
   tipografia de marca. */
.altheroh-page-title {
    font-family: var(--ath-font-head);
    font-weight: var(--ath-fw-heavy);
    letter-spacing: var(--ath-tracking-tight);
}

/* El header de pagina (#body-header-title) tiene fondo azul de marca
   (dashmix.css: .block-header-default { background: var(--bs-primary-color) }),
   asi que el titulo va SIEMPRE en blanco, en claro y oscuro. */
#body-header-title .block-title,
#body-header-title .altheroh-page-title {
    color: #fff !important;
}

/* dashmix.css define `.block-content { padding: 1.25rem 1.25rem 1px }` — el
   padding inferior queda en 1px contra 1.25rem arriba (pensado para que el
   ULTIMO elemento hijo aporte su propio margin-bottom y no se duplique el
   espacio). Como esta clase envuelve el contenido de CADA pantalla no-Home
   (`#div-content > .block.block-rounded.block-bordered > .block-content` en
   `_Layout.cshtml`), esa asimetria se repite en toda la app: el contenedor
   externo (el `.block` con el titulo azul) queda con mucho mas aire arriba
   del contenido que abajo. Se pareja a los mismos 1.25rem en ambos lados. */
#main-container .block-content {
    padding-bottom: 1.25rem;
}

/* Breadcrumb (nivel 3-4: Modulo -> Pantalla). SmartBreadcrumbs se mantiene;
   aqui solo se alinea visualmente con la marca. */
#main-container .bg-body-light .content {
    padding-top: var(--ath-space-3);
    padding-bottom: var(--ath-space-3);
}

#main-container .breadcrumb {
    margin-bottom: 0;
    font-size: var(--ath-fs-sm);
}

/* dashmix.css pinta .breadcrumb con una caja azul marino solida fija
   (siempre oscura, en claro y en oscuro) + texto blanco por defecto. En modo
   oscuro ya se veia bien (el texto quedaba claro sobre esa caja oscura); en
   modo claro el texto se forzaba a --ath-on-canvas-text (oscuro) y quedaba
   ilegible sobre la misma caja, que sigue oscura en ambos modos. Fix: el
   texto de este breadcrumb queda SIEMPRE claro (no sigue el tema), igual que
   ya hacia en oscuro — la caja de fondo se conserva tal cual. */
#main-container .breadcrumb-item,
#main-container .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, .75) !important;
}

#main-container .breadcrumb-item > a {
    color: #fff !important;
    font-weight: var(--ath-fw-medium);
    opacity: .9;
}

    #main-container .breadcrumb-item > a:hover {
        color: #fff !important;
        opacity: 1;
    }

#main-container .breadcrumb-item.active {
    color: #fff !important;
    font-weight: var(--ath-fw-medium);
}

/* Prefijo jerarquico: "{Evento} ›" antepuesto al breadcrumb de SmartBreadcrumbs
   cuando hay un evento en contexto. No toca los atributos [Breadcrumb] de los
   controladores; se alimenta de HttpContext.Items["ath-evento-ctx"]. */
#main-container .ath-crumb-prefix {
    color: var(--ath-on-canvas-text) !important;
    font-size: var(--ath-fs-sm);
    font-weight: var(--ath-fw-bold);
    text-decoration: none;
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    #main-container .ath-crumb-prefix:hover {
        color: var(--ath-primary) !important;
        text-decoration: underline;
    }

#main-container .ath-crumb-prefix-sep {
    color: var(--ath-on-canvas-muted) !important;
    font-size: var(--ath-fs-sm);
    margin: 0 var(--ath-space-2);
    opacity: .7;
}

/* ==========================================================================
   2c. HEADER FIJO + FOOTER  (chrome sobre tokens)
   dashmix.css los deja en azules hardcodeados (#0665d0) o en variables de
   ThemeConfig; aqui se fijan al azul de marca en ambos modos.
   ========================================================================== */
.page-header-dark #page-header {
    background-color: var(--ath-primary) !important;
    color: rgba(255, 255, 255, .82);
    box-shadow: none;
}

    .page-header-dark.page-header-scroll #page-header {
        background-color: var(--ath-primary) !important;
        box-shadow: var(--ath-shadow-md);
    }

#page-footer,
#page-footer.titulo-colorPrimary {
    background-color: var(--ath-primary) !important;
    color: rgba(255, 255, 255, .8);
}

    #page-footer a {
        color: #fff !important;
        opacity: .92;
        font-weight: var(--ath-fw-bold);
    }

        #page-footer a:hover {
            opacity: 1;
            text-decoration: none;
        }

html[data-altheroh-theme="dark"] .page-header-dark #page-header,
html[data-altheroh-theme="dark"] #page-footer {
    background-color: var(--ath-blue-700) !important;
}

/* ==========================================================================
   2b. BARRA DE CONTEXTO DE EVENTO (nivel 2)
       La pinta EventoContextoViewComponent en _Layout.cshtml cuando hay un
       evento en contexto. 100% tokens => modo oscuro automatico.
   ========================================================================== */
/* Command bar (firma inmersiva MOVIRAH): sticky, franja de acento vertical
   marca->acento, identidad a la izquierda, metadata mono, acciones icon-first. */
.ath-eventbar {
    position: sticky;
    top: var(--ath-header-h);
    z-index: var(--ath-z-eventbar);
    display: flex;
    align-items: center;
    gap: var(--ath-space-4);
    min-height: var(--ath-eventbar-h);
    padding: var(--ath-space-3) var(--ath-space-5) var(--ath-space-3) calc(var(--ath-space-5) + 4px);
    background: color-mix(in srgb, var(--ath-surface-panel) 96%, transparent);
    border-bottom: 1px solid var(--ath-border);
    box-shadow: var(--ath-shadow-sm);
    backdrop-filter: blur(12px);
    overflow: hidden;
}

    .ath-eventbar::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 4px;
        background: linear-gradient(to bottom, var(--ath-primary), var(--ath-accent) 90%);
    }

@media (min-width: 768px) {
    .ath-eventbar {
        min-height: var(--ath-eventbar-h-lg);
    }
}

.ath-eventbar-mark {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--ath-radius-md);
    background: var(--ath-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ath-font-head);
    font-weight: var(--ath-fw-heavy);
    font-size: 1rem;
    letter-spacing: .01em;
}

.ath-eventbar-id {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ath-eventbar-name {
    display: flex;
    align-items: center;
    gap: var(--ath-space-3);
    min-width: 0;
}

    .ath-eventbar-name > a {
        font-family: var(--ath-font-head);
        font-weight: var(--ath-fw-heavy);
        font-size: var(--ath-fs-lg);
        letter-spacing: var(--ath-tracking-tight);
        color: var(--ath-text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .ath-eventbar-name > a:hover {
            color: var(--ath-primary-ink);
        }

.ath-eventbar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .4rem;
    margin-top: .3rem;
}

    .ath-eventbar-meta > span {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        white-space: nowrap;
        font-family: var(--ath-font-mono);
        font-size: var(--ath-fs-eyebrow);
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--ath-text-muted);
        border: 1px solid var(--ath-border);
        border-radius: var(--ath-radius-pill);
        padding: .2rem .55rem;
        line-height: 1.4;
    }

    .ath-eventbar-meta i {
        font-size: .8em;
        opacity: .75;
    }

.ath-eventbar-actions {
    flex: 0 0 auto;
    display: flex;
    gap: var(--ath-space-2);
}

@media (max-width: 767.98px) {
    .ath-eventbar {
        flex-wrap: wrap;
        gap: var(--ath-space-3);
        padding: var(--ath-space-3) var(--ath-space-4);
        position: static; /* en movil no compite con el header fijo */
    }

    .ath-eventbar-meta {
        display: none; /* el nombre + estado bastan en pantallas pequeñas */
    }

    .ath-eventbar-actions {
        width: 100%;
    }

        .ath-eventbar-actions .ath-btn {
            flex: 1 1 auto;
        }
}

/* ==========================================================================
   3. MODO OSCURO (chrome) - 100% CSS, sin JS
   ========================================================================== */
html[data-altheroh-theme="dark"] .altheroh-sidebar {
    background-color: var(--ath-surface) !important;
    border-right-color: var(--ath-border);
}

html[data-altheroh-theme="dark"] .altheroh-sidebar-logo {
    background-image: url('/img/site/altheroh_logotipo_bn.png');
    filter: brightness(0) invert(1);
}

/* El interior "blanco" del isotipo es transparente en el PNG: sobre el sidebar
   oscuro se veria el fondo detras, asi que se le pone un disco blanco. */
html[data-altheroh-theme="dark"] .altheroh-sidebar-isotipo {
    background-color: #fff;
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .35);
}

html[data-altheroh-theme="dark"] .altheroh-sidebar-heading {
    color: var(--ath-text-secondary) !important;
    opacity: .8;
}

html[data-altheroh-theme="dark"] .altheroh-sidebar .nav-main-link {
    color: var(--ath-text-secondary) !important;
}

html[data-altheroh-theme="dark"] .altheroh-sidebar .nav-main-link-icon {
    color: var(--ath-text-muted) !important;
}

html[data-altheroh-theme="dark"] .altheroh-sidebar .nav-main-link:hover,
html[data-altheroh-theme="dark"] .altheroh-sidebar .nav-main-link.active {
    color: var(--ath-text-primary) !important;
    background-color: var(--ath-primary-soft);
}

html[data-altheroh-theme="dark"] #main-container {
    background-color: var(--ath-bg);
}

/* Controles del header que en oscuro deben quedar legibles sobre el header. */
html[data-altheroh-theme="dark"] #page-header-user-dropdown,
html[data-altheroh-theme="dark"] #altheroh-theme-toggle,
html[data-altheroh-theme="dark"] [data-toggle="layout"][data-action="sidebar_toggle"] {
    color: #fff;
}

/* Menus desplegables y bloques sobre superficie oscura. */
html[data-altheroh-theme="dark"] .dropdown-menu {
    background-color: var(--ath-surface-raised);
    border-color: var(--ath-border);
    color: var(--ath-text-primary);
}

html[data-altheroh-theme="dark"] .dropdown-menu .dropdown-item {
    color: var(--ath-text-secondary);
}

html[data-altheroh-theme="dark"] .dropdown-menu .dropdown-item:hover {
    background-color: var(--ath-primary-soft);
    color: var(--ath-text-primary);
}

/* ==========================================================================
   4. LOGIN (piloto ya validado) - scoped bajo .altheroh-login
   ========================================================================== */
.altheroh-login .bg_jpj {
    background-image: none !important;
    background-color: var(--ath-primary-soft);
}

.altheroh-login .logo_jpj {
    background-image: url('/img/site/altheroh_logotipo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 90px;
    margin-bottom: 10px;
}

.altheroh-login .fondoIniBien {
    background-color: var(--ath-primary-soft);
    border-radius: 8px;
}

.altheroh-login .TextoBienvenido {
    color: var(--ath-primary) !important;
}

.altheroh-login .iniciarSesion {
    color: var(--ath-accent) !important;
}

.altheroh-login .form-control-alt:focus {
    border-color: var(--ath-primary);
    box-shadow: 0 0 0 0.2rem var(--ath-focus-ring);
}

.altheroh-login .btn-hero-primary {
    background-color: var(--ath-primary);
    border-color: var(--ath-primary);
    color: #fff;
}

    .altheroh-login .btn-hero-primary:hover,
    .altheroh-login .btn-hero-primary:focus {
        background-color: var(--ath-primary-hover);
        border-color: var(--ath-primary-hover);
        color: #fff;
    }

.altheroh-login a.link-fx {
    color: var(--ath-primary);
}

    .altheroh-login a.link-fx::before {
        background-color: var(--ath-accent);
    }

/* Panel derecho de marca */
.altheroh-login .altheroh-brand-panel {
    background: linear-gradient(160deg, var(--ath-blue-500) 0%, var(--ath-blue-600) 100%);
    position: relative;
    overflow: hidden;
}

    .altheroh-login .altheroh-brand-panel .altheroh-brand-isotipo {
        width: 220px;
        height: 220px;
        background-color: #fff;
        border-radius: 50%;
        background-image: url('/img/site/altheroh_isotipo.png');
        background-size: 88%;
        background-repeat: no-repeat;
        background-position: center;
        margin: 0 auto 1.5rem;
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, .2);
    }

    .altheroh-login .altheroh-brand-panel .altheroh-brand-tagline {
        color: #fff;
        font-weight: 600;
        font-size: 1.15rem;
        max-width: 22rem;
        margin: 0 auto;
        opacity: .92;
    }

    .altheroh-login .altheroh-brand-panel .altheroh-brand-accent {
        width: 60px;
        height: 4px;
        background-color: var(--ath-accent);
        margin: 1rem auto 1.25rem;
        border-radius: 2px;
    }

/* ==========================================================================
   Checkboxes / radios de Dashmix (.custom-control) — paleta de marca.
   Dashmix los pinta en su primary (naranja); aquí se fuerzan al azul de
   marca en TODO el contenido autenticado, para que se vean igual que en
   Evento/Editar sin depender de un id de contenedor concreto.
   ========================================================================== */
#main-container .custom-control-input ~ .custom-control-label::before {
    border: 1.5px solid var(--ath-border-strong);
}

#main-container .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--ath-primary);
    background-color: var(--ath-primary);
}

#main-container .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px var(--ath-primary-soft);
}

/* ==========================================================================
   Bloques de contenido internos de Dashmix (.block > .block-header-default).
   Por defecto Dashmix los pinta con el azul de --bs-primary-color. En el
   contenido sobre el lienzo se pasan a una cabecera CLARA. Se excluye
   #body-header-title (título de página), que va sobre azul de marca a propósito.
   Aplica a las pantallas "Configurar*" y demás vistas aún sin migrar.
   ========================================================================== */
#main-container .block > .block-header.block-header-default:not(#body-header-title) {
    background-color: var(--ath-surface-elevated) !important;
    color: var(--ath-text-secondary) !important;
    border-bottom: 1px solid var(--ath-border);
}

    #main-container .block > .block-header.block-header-default:not(#body-header-title) .block-title {
        color: var(--ath-text-primary) !important;
        font-family: var(--ath-font-head);
        font-weight: var(--ath-fw-heavy);
        font-size: var(--ath-fs-md);
    }

/* Botones legacy de Dashmix en TODO el contenido → aspecto de marca sin tocar el markup.
   (antes estaba limitado a .block / #div-content; ahora cubre toolbars y filtros sueltos
   de las pantallas Configurar*/Gestionar* y demás vistas aún sin migrar). */
#main-container .content .btn.btn-primary,
#main-container #div-content .btn.btn-primary {
    background-color: var(--ath-primary) !important;
    border-color: var(--ath-primary) !important;
    color: var(--ath-text-on-primary) !important;
}

    #main-container .content .btn.btn-primary:hover,
    #main-container #div-content .btn.btn-primary:hover {
        background-color: var(--ath-primary-hover) !important;
        border-color: var(--ath-primary-hover) !important;
    }

#main-container .content .btn.btn-secondary,
#main-container #div-content .btn.btn-secondary {
    background-color: var(--ath-surface-elevated) !important;
    border-color: var(--ath-border-strong) !important;
    color: var(--ath-text-primary) !important;
}

/* Botón "×" de eliminar en grids legacy → rojo de estado (no el rojo Bootstrap) */
#main-container .content .btn.btn-danger,
#main-container #div-content .btn.btn-danger {
    background-color: var(--ath-danger) !important;
    border-color: var(--ath-danger) !important;
}

/* Tablas Dashmix sueltas (.table.table-vcenter sin migrar) → acercarlas al look de marca */
#main-container .content .table.table-vcenter:not(.altheroh-table) > thead > tr > th {
    background-color: var(--ath-surface-elevated) !important;
    color: var(--ath-text-secondary) !important;
    font-family: var(--ath-font-mono);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--ath-border) !important;
}

#main-container .content .table.table-vcenter:not(.altheroh-table) > tbody > tr:hover > td {
    background-color: var(--ath-primary-soft) !important;
}

/* Encabezado de bloque legacy sin la clase :not() anterior — variante donde
   .block-header no es hijo directo pero sí lleva block-header-default */
#main-container .content .block-header.block-header-default:not(#body-header-title) {
    background-color: var(--ath-surface-elevated) !important;
    color: var(--ath-text-secondary) !important;
}
    #main-container .content .block-header.block-header-default:not(#body-header-title) .block-title {
        color: var(--ath-text-primary) !important;
    }

/* ==========================================================================
   Rail contextual (pieza MOVIRAH §12) — reutiliza el modo sidebar-mini de
   Dashmix. Dashmix ya colapsa #sidebar a ~72px y lo expande en :hover; aquí
   solo se adapta el logo/isotipo y se afina el ancho + el look de marca.
   Toggle: #altheroh-rail-toggle (data-action="sidebar_mini_toggle").
   ========================================================================== */
/* Se respeta el ancho colapsado por defecto de Dashmix (~60px) y su mecánica
   de translateX para posicionar el ícono — no se toca, o el ícono queda fuera
   del rail. Solo se ajusta el ancho EXPANDIDO al pasar el cursor y el chrome. */
.sidebar-mini.sidebar-o #sidebar:hover {
    width: 240px;
    box-shadow: var(--ath-shadow-lg);
}

/* Asegura que el ícono sea visible y con color de marca en estado colapsado
   (sin alterar el transform de Dashmix). */
.sidebar-mini.sidebar-o #sidebar:not(:hover) .nav-main .nav-main-link-icon {
    opacity: 1 !important;
    color: var(--ath-primary) !important;
    font-size: 1.05rem;
}

/* Logo ancho: se oculta colapsado; el isotipo queda pequeño y centrado */
.sidebar-mini.sidebar-o #sidebar:not(:hover) .altheroh-sidebar-logo {
    background-size: 0 0;
}

.sidebar-mini.sidebar-o #sidebar:not(:hover) .altheroh-sidebar-isotipo {
    width: 38px;
    height: 38px;
}

/* Colapsado, `#sidebar` (240px) se corre `translateX(-176px)`, dejando visible
   solo su franja derecha de 64px. El wrapper del isotipo es ahora hijo DIRECTO
   de `#sidebar` (ver _Layout.cshtml) — un solo nivel de transform, no dos
   anidados — así que para que caiga dentro de esa franja visible basta con
   ubicarlo en local-x [176,240] dentro de `#sidebar`: ancho 64px + margin-left
   176px. Sin :hover (rail expandido) no hace falta ninguna regla especial,
   vuelve a su flujo normal centrado en las 240px. */
.sidebar-mini.sidebar-o #sidebar:not(:hover) .altheroh-sidebar-isotipo-wrap {
    width: 64px !important;
    margin-left: 176px !important;
}

/* Acento del item activo visible en estado colapsado */
.sidebar-mini.sidebar-o #sidebar:not(:hover) .nav-main-link.active {
    box-shadow: inset 3px 0 0 var(--ath-accent);
}

/* El rail, al expandirse en :hover (240px), es position:fixed — por diseño
   de Dashmix queda SOBRE el contenido (#page-container/#page-header solo
   reservan el ancho colapsado, 64px, de forma fija). Reportado en vivo: eso
   tapaba el encabezado/breadcrumb. Con :has() (soportado en Edge/Chrome
   modernos) se reacomoda el contenido al ancho expandido mientras el mouse
   esté sobre el rail, en vez de dejar que lo cubra. */
@media (min-width: 992px) {
    #page-container.sidebar-mini.sidebar-o {
        transition: padding-left .6s cubic-bezier(.215, .61, .355, 1);
    }

    #page-container.sidebar-mini.sidebar-o:has(#sidebar:hover) {
        padding-left: 240px;
    }

    #page-container.page-header-fixed.sidebar-mini.sidebar-o #page-header,
    #page-container.page-header-glass.sidebar-mini.sidebar-o #page-header {
        transition: padding-left .6s cubic-bezier(.215, .61, .355, 1);
    }

    #page-container.page-header-fixed.sidebar-mini.sidebar-o:has(#sidebar:hover) #page-header,
    #page-container.page-header-glass.sidebar-mini.sidebar-o:has(#sidebar:hover) #page-header {
        padding-left: 240px;
    }

    #page-container.page-header-fixed.sidebar-mini.sidebar-o:has(#sidebar:hover) #page-header .overlay-header,
    #page-container.page-header-glass.sidebar-mini.sidebar-o:has(#sidebar:hover) #page-header .overlay-header {
        left: 240px;
    }

    /* dashmix.css solo define #page-footer-fixed.sidebar-o (240px) — sin
       variante .sidebar-mini, así que el pie de página quedaba con 240px de
       margen incluso con el rail colapsado a 64px. Mismo ajuste + mismo
       empuje en :hover que ya tiene el header. */
    #page-container.page-footer-fixed.sidebar-mini.sidebar-o #page-footer {
        padding-left: 64px;
        transition: padding-left .6s cubic-bezier(.215, .61, .355, 1);
    }

    #page-container.page-footer-fixed.sidebar-mini.sidebar-o:has(#sidebar:hover) #page-footer {
        padding-left: 240px;
    }
}

/* ==========================================================================
   Etiqueta fija del "evento de la sesión" en el header (no seleccionable —
   se elige una vez al ingresar; cambiarla exige cerrar sesión). Ver
   EventoSesionController + altheroh-evento-gate.js/altheroh-evento-global.js.
   ========================================================================== */
.ath-evento-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 2.375rem;
    margin-left: .5rem;
    padding: 0 .75rem;
    border-radius: 999px;
    border: 1px solid var(--ath-border);
    background: var(--ath-primary-soft);
    color: var(--ath-primary-ink, var(--ath-primary));
    font-family: var(--ath-font-mono);
    font-size: .6875rem;
    font-weight: var(--ath-fw-bold);
    letter-spacing: .04em;
    white-space: nowrap;
    max-width: 16rem;
    vertical-align: middle;
}

    .ath-evento-badge > i { font-size: .8rem; opacity: .85; }

    .ath-evento-badge .ath-evento-badge-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

@media (max-width: 575.98px) {
    .ath-evento-badge { max-width: 8rem; }
}

/* ==========================================================================
   Fix global — componente "Tabla/Cards" (.view-toggle) copiado en ~20 vistas
   de ConsultarInscripcion/DelegacionEvento/ResultadoFase/etc. Cada vista trae
   su propio <style> con fondo transparente/azul ajeno (#3490dc); en vez de
   editar cada .cshtml, se neutraliza acá con mayor especificidad (#main-container
   + .view-toggle le gana a la regla suelta de cada vista, incluso con !important
   de ambos lados) y tokens de marca. Cubre tanto el toggle por CSS (.active)
   como el que la propia página alterna vía JS con las clases de Bootstrap
   (.btn-primary / .btn-outline-primary).
   ========================================================================== */
#main-container .view-toggle {
    background-color: var(--ath-surface) !important;
    border: 1px solid var(--ath-border-strong) !important;
    color: var(--ath-text-secondary) !important;
    -webkit-appearance: none;
    appearance: none;
}

#main-container .view-toggle:hover {
    background-color: var(--ath-primary-hover) !important;
    border-color: var(--ath-primary-hover) !important;
    color: var(--ath-text-on-primary) !important;
}

#main-container .view-toggle.active,
#main-container .view-toggle.btn-primary {
    background-color: var(--ath-primary) !important;
    border-color: var(--ath-primary) !important;
    color: var(--ath-text-on-primary) !important;
}

/* Inputs numéricos deshabilitados del mismo grupo de vistas (.entrada-numerica):
   mismo fix que en ConsultarInscripcion/Numerica — nunca fondo transparente en
   un <input disabled>, o el navegador lo repinta con su propio esquema oscuro. */
#main-container .entrada-numerica {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--ath-surface) !important;
    color: var(--ath-text-primary) !important;
    color-scheme: light;
}

    /* El campo "Total" (siempre disabled, es un valor calculado de solo
       lectura, no un control inhabilitado por permisos) va en el mismo azul
       de marca — pero el navegador atenua el color de los <input disabled>
       por su cuenta (mas alla del fix de fondo/appearance de arriba), asi que
       hacia falta forzar tambien el color de texto explicitamente: sin esto,
       "Total" quedaba practicamente invisible en modo oscuro (reportado en
       vivo en InscripcionNumericaUsuarioDelegacion). */
    #main-container .entrada-numerica.text-primary {
        color: var(--ath-primary) !important;
    }

    #main-container .entrada-numerica:disabled {
        background-color: var(--ath-surface) !important;
        opacity: 1;
        -webkit-text-fill-color: currentColor;
    }

/* Botones "outline" de Bootstrap (.btn-outline-*): mismo bug de auto-dark-mode
   nativo que .view-toggle/.entrada-numerica — reportado en vivo en
   ConsultarInscripcion/NominalAtletas ("Aprobar"/"Retirar atleta" saliendo
   ambos en rojo, sin importar el color semantico real). Un <button> con
   background:transparent, bajo color-scheme:dark, es repintado por el propio
   navegador con su esquema nativo, ignorando el borde/color de autor. Fix:
   fondo explicito (nunca transparente) en reposo + override explicito del
   :hover (Bootstrap ya lo pinta solido al pasar el mouse, pero como el fix de
   reposo necesita !important para ganarle al navegador, hay que repetir el
   !important en :hover o el navegador tambien se queda con ese estado). */
#main-container .btn-outline-primary,
#main-container .btn-outline-secondary,
#main-container .btn-outline-success,
#main-container .btn-outline-danger,
#main-container .btn-outline-warning,
#main-container .btn-outline-info {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--ath-surface) !important;
}

#main-container .btn-outline-primary:hover,
#main-container .btn-outline-primary:focus {
    background-color: var(--ath-primary) !important;
    border-color: var(--ath-primary) !important;
    color: var(--ath-text-on-primary) !important;
}

#main-container .btn-outline-secondary:hover,
#main-container .btn-outline-secondary:focus {
    background-color: var(--ath-surface-elevated) !important;
    color: var(--ath-text-primary) !important;
}

#main-container .btn-outline-success:hover,
#main-container .btn-outline-success:focus {
    background-color: var(--ath-success) !important;
    border-color: var(--ath-success) !important;
    color: #fff !important;
}

#main-container .btn-outline-danger:hover,
#main-container .btn-outline-danger:focus {
    background-color: var(--ath-danger) !important;
    border-color: var(--ath-danger) !important;
    color: #fff !important;
}

#main-container .btn-outline-warning:hover,
#main-container .btn-outline-warning:focus {
    background-color: var(--ath-warning) !important;
    border-color: var(--ath-warning) !important;
    color: #1a1a1a !important;
}

#main-container .btn-outline-info:hover,
#main-container .btn-outline-info:focus {
    background-color: var(--ath-info) !important;
    border-color: var(--ath-info) !important;
    color: #fff !important;
}

/* ==========================================================================
   "Glow" de marca en tarjetas/formularios legacy (.block/.card de Dashmix).
   2026-09-07: en oscuro, la sombra CLARA que trae Dashmix por defecto
   (rgba(230,235,244,.4), pensada solo para claro) se veía por accidente como
   un halo de luz sobre el lienzo oscuro — se le gustó al usuario y se pidió
   como firma visual intencional en TODOS los formularios, en los dos temas
   (en claro se veía plano, sin ese aro). Se reemplaza por --ath-shadow-glow
   (mismo token que ya usa .ath-card) sin importar el tema: el valor del
   token ya cambia solo entre claro/oscuro, así que una sola regla alcanza.
   ========================================================================== */
#main-container .block,
#main-container .card {
    box-shadow: var(--ath-shadow-glow);
    border: 1px solid var(--ath-border-glow);
}

/* El glow tiene blur/spread real: bloques apilados con el margen chico de
   Dashmix (1.75rem) quedaban con la sombra del de arriba chocando contra el
   de abajo (se veía la esquina redondeada "flotando" encima del siguiente
   bloque). Se les da mas aire para que el halo respire sin pisar al vecino. */
#main-container .block {
    margin-bottom: 2.5rem;
}

/* ==========================================================================
   MODO OSCURO — retrofit de componentes legacy (Bootstrap/Dashmix crudos).
   2026-09-06: hasta ahora el modo oscuro solo oscurecía el lienzo/sidebar/
   header; el contenido interno (tarjetas ".block"/".card", tablas crudas,
   formularios) seguía renderizando los blancos hardcodeados de Bootstrap
   porque nunca consumió tokens --ath-*. Con #main-container ya heredando
   las variables oscuras (ver altheroh-design-system.css), aquí se fuerzan
   los selectores base de Dashmix/Bootstrap que aún no migraron a los
   componentes .ath-*/.altheroh-* a usar esos mismos tokens — así CUALQUIER
   pantalla, migrada o no, oscurece fondos y aclara texto.
   NOTA: los componentes ya migrados (.ath-card, .altheroh-table, .ath-btn,
   etc.) no necesitan nada de esto: ya consumen los tokens directamente.
   ========================================================================== */
html[data-altheroh-theme="dark"] #main-container {
    color: var(--ath-text-primary);
}

/* Tarjetas Dashmix (.block) y Bootstrap (.card) crudas */
html[data-altheroh-theme="dark"] #main-container .block,
html[data-altheroh-theme="dark"] #main-container .card {
    background-color: var(--ath-surface-card);
    color: var(--ath-text-primary);
    border-color: var(--ath-border);
}

html[data-altheroh-theme="dark"] #main-container .block-content,
html[data-altheroh-theme="dark"] #main-container .card-body,
html[data-altheroh-theme="dark"] #main-container .card-footer {
    background-color: transparent;
    color: var(--ath-text-primary);
    border-color: var(--ath-border);
}

html[data-altheroh-theme="dark"] #main-container .block-header:not(.block-header-default):not(#body-header-title) {
    background-color: var(--ath-surface-elevated);
    color: var(--ath-text-primary);
    border-color: var(--ath-border);
}

/* Encabezados de sección / hr / texto secundario Bootstrap sueltos */
html[data-altheroh-theme="dark"] #main-container hr {
    border-color: var(--ath-border);
}

html[data-altheroh-theme="dark"] #main-container .text-muted {
    color: var(--ath-text-muted) !important;
}

html[data-altheroh-theme="dark"] #main-container h1,
html[data-altheroh-theme="dark"] #main-container h2,
html[data-altheroh-theme="dark"] #main-container h3,
html[data-altheroh-theme="dark"] #main-container h4,
html[data-altheroh-theme="dark"] #main-container h5,
html[data-altheroh-theme="dark"] #main-container h6,
html[data-altheroh-theme="dark"] #main-container label {
    color: var(--ath-text-primary);
}

/* Tablas crudas (sin migrar a .altheroh-table): fondo/borde/texto por tokens */
html[data-altheroh-theme="dark"] #main-container table,
html[data-altheroh-theme="dark"] #main-container .table {
    color: var(--ath-text-primary);
    border-color: var(--ath-border);
}

html[data-altheroh-theme="dark"] #main-container .table thead th,
html[data-altheroh-theme="dark"] #main-container .thead-light th {
    background-color: var(--ath-surface-elevated) !important;
    color: var(--ath-text-secondary) !important;
    border-color: var(--ath-border) !important;
}

html[data-altheroh-theme="dark"] #main-container .table td,
html[data-altheroh-theme="dark"] #main-container .table th {
    border-color: var(--ath-border);
}

html[data-altheroh-theme="dark"] #main-container .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--ath-surface-elevated);
}

html[data-altheroh-theme="dark"] #main-container .table-hover tbody tr:hover {
    background-color: var(--ath-primary-soft);
}

/* Formularios crudos (form-control/custom-select sin migrar a <altheroh-field>) */
html[data-altheroh-theme="dark"] #main-container .form-control,
html[data-altheroh-theme="dark"] #main-container .custom-select,
html[data-altheroh-theme="dark"] #main-container select,
html[data-altheroh-theme="dark"] #main-container input[type="text"],
html[data-altheroh-theme="dark"] #main-container input[type="search"],
html[data-altheroh-theme="dark"] #main-container input[type="number"],
html[data-altheroh-theme="dark"] #main-container input[type="date"],
html[data-altheroh-theme="dark"] #main-container input[type="email"],
html[data-altheroh-theme="dark"] #main-container input[type="password"],
html[data-altheroh-theme="dark"] #main-container textarea {
    background-color: var(--ath-surface-input);
    color: var(--ath-text-primary);
    border-color: var(--ath-border-strong);
}

html[data-altheroh-theme="dark"] #main-container .form-control::placeholder {
    color: var(--ath-text-muted);
    opacity: 1;
}

html[data-altheroh-theme="dark"] #main-container .form-control:disabled,
html[data-altheroh-theme="dark"] #main-container .form-control[readonly] {
    background-color: var(--ath-surface-elevated);
    color: var(--ath-text-muted);
}

html[data-altheroh-theme="dark"] #main-container .input-group-text {
    background-color: var(--ath-surface-elevated);
    color: var(--ath-text-secondary);
    border-color: var(--ath-border-strong);
}

/* Modales y paginación de Dashmix/Bootstrap crudos */
html[data-altheroh-theme="dark"] #main-container .modal-content {
    background-color: var(--ath-surface-modal);
    color: var(--ath-text-primary);
    border-color: var(--ath-border);
}

html[data-altheroh-theme="dark"] #main-container .modal-header,
html[data-altheroh-theme="dark"] #main-container .modal-footer {
    border-color: var(--ath-border);
}

html[data-altheroh-theme="dark"] #main-container .close {
    color: var(--ath-text-primary);
    text-shadow: none;
}

html[data-altheroh-theme="dark"] #main-container .pagination .page-link {
    background-color: var(--ath-surface-card);
    border-color: var(--ath-border);
    color: var(--ath-text-secondary);
}

html[data-altheroh-theme="dark"] #main-container .pagination .page-item.active .page-link {
    background-color: var(--ath-primary);
    border-color: var(--ath-primary);
    color: var(--ath-text-on-primary);
}

html[data-altheroh-theme="dark"] #main-container .pagination .page-item.disabled .page-link {
    background-color: var(--ath-surface-elevated);
    color: var(--ath-text-muted);
}

/* DataTables (buscador/paginador propios, cuando la vista no usa .ath-dt-wrap) */
html[data-altheroh-theme="dark"] #main-container .dataTables_wrapper,
html[data-altheroh-theme="dark"] #main-container .dataTables_wrapper .dataTables_info,
html[data-altheroh-theme="dark"] #main-container .dataTables_wrapper .dataTables_length,
html[data-altheroh-theme="dark"] #main-container .dataTables_wrapper .dataTables_filter {
    color: var(--ath-text-secondary);
}

html[data-altheroh-theme="dark"] #main-container .dataTables_wrapper .dataTables_filter input,
html[data-altheroh-theme="dark"] #main-container .dataTables_wrapper .dataTables_length select {
    background-color: var(--ath-surface-input);
    color: var(--ath-text-primary);
    border-color: var(--ath-border-strong);
}

/* Select2 (los <select> "mejorados" por Dashmix helpers en filtros/formularios
   no son un <select> visible: select2 pinta su propio markup aparte). */
html[data-altheroh-theme="dark"] #main-container .select2-container--default .select2-selection--single,
html[data-altheroh-theme="dark"] #main-container .select2-container--default .select2-selection--multiple {
    background-color: var(--ath-surface-input);
    border-color: var(--ath-border-strong);
}

html[data-altheroh-theme="dark"] #main-container .select2-container--default .select2-selection__rendered {
    color: var(--ath-text-primary);
}

html[data-altheroh-theme="dark"] #main-container .select2-container--default .select2-selection__placeholder {
    color: var(--ath-text-muted);
}

/* El dropdown de select2 se pinta flotante fuera de #main-container (hijo
   directo de <body> salvo que la vista fije dropdownParent), por eso estas
   reglas van sin ese ancestro. */
html[data-altheroh-theme="dark"] .select2-dropdown {
    background-color: var(--ath-surface-popover);
    border-color: var(--ath-border-strong);
    color: var(--ath-text-primary);
}

html[data-altheroh-theme="dark"] .select2-search__field {
    background-color: var(--ath-surface-input);
    color: var(--ath-text-primary);
    border-color: var(--ath-border-strong);
}

html[data-altheroh-theme="dark"] .select2-results__option {
    color: var(--ath-text-primary);
}

html[data-altheroh-theme="dark"] .select2-results__option--highlighted {
    background-color: var(--ath-primary) !important;
    color: var(--ath-text-on-primary) !important;
}