/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* Fondo claro neutro, no el degradado de marca del sidebar — decisión
   de la migración de Login/Logout/RecuperarPassword (ver entregable de
   la tarea). El login es la carta de presentación del sistema: un
   segundo fondo oscuro (además del sidebar, que el usuario ni siquiera
   ha visto todavía) suma peso visual sin aportar nada, y le resta
   protagonismo a la franja tricolor, que es la que de verdad identifica
   la marca en esta pantalla. */
.auth-layout[b-2kc0lbt686] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-page);
    padding: var(--espacio-4);
    position: relative;
}

/* Franja tricolor — ancho completo de la ventana, fija arriba, mismo
   criterio que la franja de MainLayout (ver §6.3/§8.3 de
   SISTEMA-DISENO.md): es lo que identifica visualmente a la CGT desde
   la primera pantalla, antes incluso de iniciar sesión. */
.auth-layout[b-2kc0lbt686]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: var(--marca-franja);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-828awevjrj] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Franja tricolor de marca — ahora hermana de .page-body (no hija de
   main): cruza TODA la ventana de borde a borde, por encima del
   sidebar y de la barra superior, en vez de arrancar donde termina el
   sidebar. Decorativa (aria-hidden en el markup), no sticky — se
   desplaza con el resto del contenido no fijo. Ver §6.3 de
   SISTEMA-DISENO.md. */
.franja-marca[b-828awevjrj] {
    height: 6px;
    width: 100%;
    background: var(--marca-franja);
    flex-shrink: 0;
}

.page-body[b-828awevjrj] {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

main[b-828awevjrj] {
    flex: 1;
}

/* Sidebar — degradado sutil de carbón (gris-800 → gris-950, A7b),
   decisión final tras comparar Propuesta A/B/C y variantes de
   intensidad en /design-system (§6.3/§8 de SISTEMA-DISENO.md). Mismo
   tratamiento que .ds-menu-demo-frame--degradado de /design-system.
   Estilos base mobile-first. */
.sidebar[b-828awevjrj] {
    background: var(--sidebar-fondo);
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    height: 100vh;
    z-index: 1000;
    transition: left var(--transition-normal);
    overflow-y: auto;
}

.sidebar.open[b-828awevjrj] {
    left: 0 !important;
    animation: slideIn-b-828awevjrj var(--transition-normal);
}

.hamburger-btn[b-828awevjrj] {
    position: fixed;
    top: var(--espacio-4);
    left: var(--espacio-4);
    z-index: 1002;
    background-color: var(--color-accion-primaria);
    color: var(--text-inverso);
    border: none;
    border-radius: var(--radio-8);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: var(--transition-normal);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.hamburger-btn i[b-828awevjrj] {
    font-size: var(--icono-sm);
    pointer-events: none;
}

.hamburger-btn:hover[b-828awevjrj] {
    background-color: var(--color-accion-primaria-hover);
    transform: scale(1.05);
}

.hamburger-btn:active[b-828awevjrj] {
    transform: scale(0.95);
}

.hamburger-btn.hidden[b-828awevjrj] {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
}

.menu-overlay[b-828awevjrj] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-oscuro-50);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.menu-overlay.visible[b-828awevjrj] {
    opacity: 1;
    visibility: visible;
}

@keyframes fadeIn-b-828awevjrj {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-828awevjrj {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.top-row[b-828awevjrj] {
    background-color: var(--surface-sunken);
    border-bottom: 1px solid var(--borde-sutil);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.user-info[b-828awevjrj] {
    display: flex;
    align-items: center;
    gap: var(--espacio-4);
}

.user-name[b-828awevjrj] {
    color: var(--text-heading);
    font-weight: var(--peso-medio);
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

.user-name i[b-828awevjrj] {
    font-size: var(--icono-sm);
    color: var(--text-secondary);
}

/* Cerrar sesión NO es una acción destructiva (no borra datos, es
   reversible con solo volver a iniciar sesión) — no hereda la regla
   de "destructivo siempre outline rojo". Se trata como una acción
   secundaria más: outline gris, no relleno rojo. Un relleno gris-100
   claro se descartó a propósito (el mismo problema de contraste que
   ver/editar en tabla: 1.10:1 contra un fondo casi blanco como
   --surface-sunken, prácticamente invisible) — outline gris-500/
   gris-700, mismo patrón ya corregido ahí. Ver §3.3 de
   SISTEMA-DISENO.md. */
.btn-logout[b-828awevjrj] {
    padding: var(--espacio-2) var(--espacio-4);
    background-color: transparent;
    border: 1px solid var(--gris-500);
    color: var(--gris-700);
    text-decoration: none;
    border-radius: var(--radio-6);
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    transition: var(--transition-normal);
}

.btn-logout:hover[b-828awevjrj] {
    background-color: var(--color-accion-secundaria-fondo);
    border-color: var(--gris-700);
    color: var(--gris-900);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.top-row[b-828awevjrj]  a,
.top-row[b-828awevjrj]  .btn-link {
    white-space: nowrap;
    margin-left: var(--espacio-6);
    text-decoration: none;
}

.top-row[b-828awevjrj]  a:hover,
.top-row[b-828awevjrj]  .btn-link:hover {
    text-decoration: underline;
}

.top-row[b-828awevjrj]  a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640.98px) {
    .top-row[b-828awevjrj] {
        justify-content: space-between;
        padding-left: 70px;
    }

    .top-row[b-828awevjrj]  a,
    .top-row[b-828awevjrj]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page-body[b-828awevjrj] {
        flex-direction: row;
    }

    .hamburger-btn[b-828awevjrj] {
        display: none;
    }

    .menu-overlay[b-828awevjrj] {
        display: none;
    }

    .sidebar[b-828awevjrj] {
        position: sticky;
        left: 0 !important;
        width: 250px;
        height: 100vh;
        top: 0;
        flex-shrink: 0;
        transition: none;
    }

    main[b-828awevjrj] {
        flex: 1;
        min-width: 0;
    }

    .top-row[b-828awevjrj] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .content[b-828awevjrj] {
        padding-top: 1.1rem;
    }
}

#blazor-error-ui[b-828awevjrj] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-828awevjrj] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-r3zkkmzaw3],
.components-reconnect-repeated-attempt-visible[b-r3zkkmzaw3],
.components-reconnect-failed-visible[b-r3zkkmzaw3],
.components-pause-visible[b-r3zkkmzaw3],
.components-resume-failed-visible[b-r3zkkmzaw3],
.components-rejoining-animation[b-r3zkkmzaw3] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-r3zkkmzaw3],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-r3zkkmzaw3],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-r3zkkmzaw3],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-r3zkkmzaw3],
#components-reconnect-modal.components-reconnect-retrying[b-r3zkkmzaw3],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-r3zkkmzaw3],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-r3zkkmzaw3],
#components-reconnect-modal.components-reconnect-failed[b-r3zkkmzaw3],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-r3zkkmzaw3] {
    display: block;
}


#components-reconnect-modal[b-r3zkkmzaw3] {
    background-color: var(--surface-card);
    width: 20rem;
    margin: 20vh auto;
    padding: var(--espacio-8);
    border: 0;
    border-radius: var(--radio-8);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-r3zkkmzaw3 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-r3zkkmzaw3 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-r3zkkmzaw3 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-r3zkkmzaw3]::backdrop {
    background-color: var(--overlay-oscuro-40);
    animation: components-reconnect-modal-fadeInOpacity-b-r3zkkmzaw3 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-r3zkkmzaw3 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-r3zkkmzaw3 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-r3zkkmzaw3 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-r3zkkmzaw3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-4);
}

#components-reconnect-modal p[b-r3zkkmzaw3] {
    margin: 0;
    text-align: center;
}

/* Botón de acción genérico (Retry/Resume) — mismo criterio que el
   resto del sistema: acciones en carbón, sin color de marca suelto
   (era un azul de plantilla sin relación con la paleta CGT). */
#components-reconnect-modal button[b-r3zkkmzaw3] {
    border: 0;
    background-color: var(--color-accion-primaria);
    color: var(--text-inverso);
    padding: var(--espacio-1) var(--espacio-6);
    border-radius: var(--radio-4);
}

    #components-reconnect-modal button:hover[b-r3zkkmzaw3] {
        background-color: var(--color-accion-primaria-hover);
    }

    #components-reconnect-modal button:active[b-r3zkkmzaw3] {
        background-color: var(--color-accion-primaria-activo);
    }

.components-rejoining-animation[b-r3zkkmzaw3] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-r3zkkmzaw3] {
        position: absolute;
        border: 3px solid var(--color-accion-primaria);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-r3zkkmzaw3 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-r3zkkmzaw3] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-r3zkkmzaw3 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Admin/DesignSystem.razor.rz.scp.css */
/* ============================================================
   Guía de estilo — /design-system
   Autocontenido: solo usa los tokens de wwwroot/app.css (var(--...)),
   nunca clases de otras páginas (.btn, .card, .badge de app.css u
   otros .razor.css). Fuente: Docs/design-system/SISTEMA-DISENO.md.
   ============================================================ */

.ds-page[b-4tux4i5ljh] {
    font-family: var(--fuente-base);
    color: var(--text-body);
    background: var(--surface-page);
    padding: var(--espacio-8) var(--espacio-6) var(--espacio-12);
    max-width: 1180px;
    margin: 0 auto;
}

/* ---------- Hero + TOC ---------- */
.ds-hero[b-4tux4i5ljh] {
    margin-bottom: var(--espacio-6);
}

.ds-hero-title[b-4tux4i5ljh] {
    font-size: var(--texto-3xl);
    font-weight: var(--peso-bold);
    line-height: var(--interlineado-titulo);
    color: var(--text-heading);
    margin-bottom: var(--espacio-2);
}

.ds-hero-sub[b-4tux4i5ljh] {
    font-size: var(--texto-base);
    line-height: var(--interlineado-normal);
    color: var(--text-secondary);
    max-width: 70ch;
}

.ds-hero-sub code[b-4tux4i5ljh] {
    background: var(--gris-100);
    padding: 0.1rem 0.35rem;
    border-radius: var(--radio-4);
    font-size: 0.9em;
}

.ds-toc[b-4tux4i5ljh] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-8);
    padding-bottom: var(--espacio-4);
    border-bottom: 1px solid var(--borde-sutil);
}

.ds-toc a[b-4tux4i5ljh] {
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--text-link);
    text-decoration: underline;
    padding: var(--espacio-1) var(--espacio-2);
    border-radius: var(--radio-4);
}

.ds-toc a:hover[b-4tux4i5ljh] {
    background: var(--gris-100);
    color: var(--text-link-hover);
}

/* ---------- Secciones ---------- */
.ds-section[b-4tux4i5ljh] {
    margin-bottom: var(--espacio-12);
    padding-top: var(--espacio-4);
}

.ds-section-title[b-4tux4i5ljh] {
    font-size: var(--texto-xl);
    font-weight: var(--peso-bold);
    color: var(--text-heading);
    margin-bottom: var(--espacio-2);
}

.ds-subtitle[b-4tux4i5ljh] {
    font-size: var(--texto-md);
    font-weight: var(--peso-semibold);
    color: var(--text-heading);
    margin-top: var(--espacio-6);
    margin-bottom: var(--espacio-3);
}

.ds-section-desc[b-4tux4i5ljh] {
    font-size: var(--texto-sm);
    line-height: var(--interlineado-normal);
    color: var(--text-secondary);
    max-width: 80ch;
    margin-bottom: var(--espacio-4);
}

.ds-section-desc code[b-4tux4i5ljh], .ds-nota code[b-4tux4i5ljh] {
    background: var(--gris-100);
    padding: 0.05rem 0.3rem;
    border-radius: var(--radio-4);
    font-size: 0.92em;
}

.ds-nota[b-4tux4i5ljh] {
    font-size: var(--texto-xs);
    line-height: var(--interlineado-normal);
    color: var(--text-muted);
    background: var(--surface-sunken);
    border-left: 3px solid var(--borde-fuerte);
    padding: var(--espacio-3) var(--espacio-4);
    border-radius: var(--radio-4);
    margin-top: var(--espacio-3);
    max-width: 80ch;
}

.ds-token-label[b-4tux4i5ljh] {
    display: block;
    font-size: var(--texto-xs);
    color: var(--text-muted);
    margin-top: var(--espacio-2);
}

.ds-token-label code[b-4tux4i5ljh] {
    background: var(--gris-100);
    padding: 0.05rem 0.3rem;
    border-radius: var(--radio-4);
}

/* ---------- 1. Paleta ---------- */
.ds-swatch-grid[b-4tux4i5ljh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--espacio-4);
}

.ds-swatch[b-4tux4i5ljh] {
    border-radius: var(--radio-8);
    overflow: hidden;
    background: var(--surface-card);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--borde-sutil);
}

.ds-swatch-color[b-4tux4i5ljh] {
    height: 64px;
}

.ds-swatch-info[b-4tux4i5ljh] {
    padding: var(--espacio-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ds-swatch-info code[b-4tux4i5ljh] {
    font-size: var(--texto-xs);
    font-weight: var(--peso-semibold);
    color: var(--text-body);
}

.ds-swatch-hex[b-4tux4i5ljh] {
    font-size: var(--texto-xs);
    color: var(--text-muted);
}

.ds-swatch-contrast[b-4tux4i5ljh] {
    font-size: 0.68rem;
    color: var(--text-muted);
}

/* ---------- 2. Tipografía ---------- */
.ds-type-scale[b-4tux4i5ljh] {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
}

.ds-type-row[b-4tux4i5ljh] {
    display: flex;
    align-items: baseline;
    gap: var(--espacio-4);
    padding-bottom: var(--espacio-3);
    border-bottom: 1px solid var(--borde-sutil);
}

.ds-type-sample[b-4tux4i5ljh] {
    color: var(--text-body);
    flex: 1;
    line-height: var(--interlineado-titulo);
}

.ds-type-token[b-4tux4i5ljh] {
    font-size: var(--texto-xs);
    color: var(--text-secondary);
    background: var(--gris-100);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radio-4);
    white-space: nowrap;
}

.ds-type-px[b-4tux4i5ljh] {
    font-size: var(--texto-xs);
    color: var(--text-muted);
    width: 4rem;
    text-align: right;
}

.ds-tabular-demo[b-4tux4i5ljh] {
    display: flex;
    gap: var(--espacio-8);
    margin-top: var(--espacio-3);
}

.ds-tabular-col[b-4tux4i5ljh] {
    background: var(--surface-card);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-8);
    padding: var(--espacio-4);
}

.ds-tabular-label[b-4tux4i5ljh] {
    display: block;
    font-size: var(--texto-xs);
    color: var(--text-muted);
    margin-bottom: var(--espacio-2);
}

.ds-tabular-num[b-4tux4i5ljh] {
    font-size: var(--texto-lg);
    font-weight: var(--peso-semibold);
    color: var(--text-body);
    text-align: right;
}

/* ---------- 3. Botones ---------- */
.ds-btn-row[b-4tux4i5ljh] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-6);
    margin-bottom: var(--espacio-4);
}

.ds-btn-demo[b-4tux4i5ljh] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espacio-1);
}

.ds-btn[b-4tux4i5ljh] {
    font-family: var(--fuente-base);
    font-size: var(--texto-sm);
    font-weight: var(--peso-semibold);
    border: none;
    border-radius: var(--radio-8);
    padding: var(--espacio-2) var(--espacio-5);
    cursor: pointer;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
}

.ds-btn-primario[b-4tux4i5ljh] {
    background: var(--color-accion-primaria);
    color: var(--text-inverso);
}

.ds-btn-primario:hover[b-4tux4i5ljh], .ds-estado-hover[b-4tux4i5ljh] {
    background: var(--color-accion-primaria-hover);
}

.ds-btn-primario:active[b-4tux4i5ljh], .ds-estado-activo[b-4tux4i5ljh] {
    background: var(--color-accion-primaria-activo);
}

.ds-btn-primario:disabled[b-4tux4i5ljh] {
    background: var(--color-deshabilitado-fondo);
    color: var(--color-deshabilitado-texto);
    cursor: not-allowed;
}

.ds-btn-secundario[b-4tux4i5ljh] {
    background: var(--color-accion-secundaria-fondo);
    color: var(--color-accion-secundaria-texto);
    border: 1px solid var(--color-accion-secundaria-borde);
}

.ds-btn-secundario:hover[b-4tux4i5ljh] {
    background: var(--color-accion-secundaria-fondo-hover);
}

.ds-btn-outline[b-4tux4i5ljh] {
    background: transparent;
    color: var(--color-accion-primaria);
    border: 1.5px solid var(--color-accion-primaria);
}

.ds-btn-outline:hover[b-4tux4i5ljh] {
    background: var(--gris-100);
}

/* Destructivo: SIEMPRE en outline, nunca relleno — decisión fijada.
   Un botón lleno de rojo al lado del primario le gana peso visual a
   la acción principal. */
.ds-btn-destructivo-outline[b-4tux4i5ljh] {
    background: transparent;
    color: var(--color-destructivo);
    border: 1.5px solid var(--color-destructivo);
}

.ds-btn-destructivo-outline:hover[b-4tux4i5ljh] {
    background: var(--color-destructivo-fondo);
}

.ds-btn-cargando[b-4tux4i5ljh] {
    opacity: 0.75;
}

.ds-spinner[b-4tux4i5ljh] {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: var(--radio-full);
    display: inline-block;
    animation: ds-spin-b-4tux4i5ljh 0.8s linear infinite;
}

@keyframes ds-spin-b-4tux4i5ljh {
    to { transform: rotate(360deg); }
}

.ds-btn-icon-demo[b-4tux4i5ljh] {
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: var(--radio-6);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--icono-xs);
    transition: var(--transition-fast);
}

/* ---------- 4. Badges ---------- */
.ds-badge-row[b-4tux4i5ljh] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-2);
}

.ds-badge[b-4tux4i5ljh] {
    display: inline-block;
    font-size: var(--texto-xs);
    font-weight: var(--peso-semibold);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    padding: var(--espacio-1) var(--espacio-3);
    border-radius: var(--radio-20);
}

/* ---------- 5. Tablas ---------- */
.ds-table-wrap[b-4tux4i5ljh] {
    background: var(--surface-card);
    border-radius: var(--radio-8);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--borde-sutil);
    margin-bottom: var(--espacio-3);
}

.ds-table[b-4tux4i5ljh] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-sm);
}

.ds-table thead[b-4tux4i5ljh] {
    background: var(--color-accion-primaria);
}

.ds-table th[b-4tux4i5ljh] {
    color: var(--text-inverso);
    text-align: left;
    font-weight: var(--peso-semibold);
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    padding: var(--espacio-3) var(--espacio-4);
}

.ds-table td[b-4tux4i5ljh] {
    padding: var(--espacio-3) var(--espacio-4);
    border-bottom: 1px solid var(--borde-sutil);
    color: var(--text-body);
}

.ds-table tbody tr:last-child td[b-4tux4i5ljh] {
    border-bottom: none;
}

.ds-table tbody tr:hover[b-4tux4i5ljh] {
    background: var(--surface-sunken);
}

.ds-row-selected-demo[b-4tux4i5ljh] {
    background: var(--gris-200);
}

.ds-col-num[b-4tux4i5ljh] {
    text-align: right;
}

.ds-empty-state[b-4tux4i5ljh] {
    padding: var(--espacio-8);
    text-align: center;
}

.ds-empty-icon[b-4tux4i5ljh] {
    font-size: var(--texto-2xl);
    color: var(--borde-fuerte);
    display: block;
    margin-bottom: var(--espacio-2);
}

.ds-empty-state p[b-4tux4i5ljh] {
    color: var(--text-muted);
    font-size: var(--texto-sm);
    margin-bottom: var(--espacio-1);
}

.ds-empty-sub[b-4tux4i5ljh] {
    font-size: var(--texto-xs);
    color: var(--text-muted);
}

.ds-empty-sub code[b-4tux4i5ljh] {
    background: var(--gris-100);
    padding: 0.05rem 0.3rem;
    border-radius: var(--radio-4);
}

/* ---------- 6. Formularios ---------- */
.ds-form-grid[b-4tux4i5ljh] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espacio-5);
}

.ds-field[b-4tux4i5ljh] {
    display: flex;
    flex-direction: column;
}

.ds-field-full[b-4tux4i5ljh] {
    grid-column: 1 / -1;
}

.ds-label[b-4tux4i5ljh] {
    font-size: var(--texto-xs);
    font-weight: var(--peso-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--espacio-1);
}

.ds-input[b-4tux4i5ljh] {
    font-family: var(--fuente-base);
    font-size: var(--texto-sm);
    padding: var(--espacio-2) var(--espacio-3);
    border: 1px solid var(--borde-input);
    border-radius: var(--radio-6);
    background: var(--surface-card);
    color: var(--text-body);
    transition: var(--transition-fast);
}

.ds-input:focus[b-4tux4i5ljh], .ds-input-foco-demo[b-4tux4i5ljh] {
    outline: none;
    border-color: var(--borde-input-foco);
    box-shadow: 0 0 0 3px var(--color-foco-anillo);
}

.ds-input-error[b-4tux4i5ljh] {
    border-color: var(--color-destructivo);
}

.ds-input-error:focus[b-4tux4i5ljh] {
    box-shadow: 0 0 0 3px var(--color-destructivo-fondo);
}

.ds-input:disabled[b-4tux4i5ljh] {
    background: var(--color-deshabilitado-fondo);
    color: var(--color-deshabilitado-texto);
    border-color: var(--color-deshabilitado-borde);
    cursor: not-allowed;
}

.ds-error-msg[b-4tux4i5ljh] {
    font-size: var(--texto-xs);
    color: var(--color-destructivo-texto);
    margin-top: var(--espacio-1);
}

.ds-help-text[b-4tux4i5ljh] {
    font-size: var(--texto-xs);
    color: var(--text-muted);
    margin-top: var(--espacio-1);
}

/* ---------- 7. Cards y stat cards ---------- */
.ds-card-demo[b-4tux4i5ljh] {
    max-width: 360px;
    margin-bottom: var(--espacio-4);
}

.ds-card[b-4tux4i5ljh] {
    background: var(--surface-card);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.ds-card-header[b-4tux4i5ljh] {
    background: var(--gris-100);
    color: var(--text-heading);
    font-weight: var(--peso-semibold);
    padding: var(--espacio-3) var(--espacio-4);
    border-bottom: 1px solid var(--borde-sutil);
}

.ds-card-body[b-4tux4i5ljh] {
    padding: var(--espacio-4);
    font-size: var(--texto-sm);
    color: var(--text-body);
    line-height: var(--interlineado-normal);
}

.ds-card-body code[b-4tux4i5ljh] {
    background: var(--gris-100);
    padding: 0.05rem 0.3rem;
    border-radius: var(--radio-4);
}

.ds-stat-grid[b-4tux4i5ljh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--espacio-4);
}

/* Fondo tintado de familia (--ds-fondo, escalón 100) + borde superior
   de acento (--ds-acento) — Variante B4, decisión final, §7.3 de
   SISTEMA-DISENO.md. */
.ds-stat-card[b-4tux4i5ljh] {
    background: var(--ds-fondo, var(--color-neutro-fondo));
    border: 1px solid var(--borde-sutil);
    border-top: 4px solid var(--ds-acento, var(--gris-400));
    border-radius: var(--radio-8);
    box-shadow: var(--shadow-sm);
    padding: var(--espacio-4);
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
}

.ds-stat-label[b-4tux4i5ljh] {
    font-size: var(--texto-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
}

.ds-stat-num[b-4tux4i5ljh] {
    font-size: var(--texto-2xl);
    font-weight: var(--peso-bold);
    color: var(--text-heading);
    line-height: var(--interlineado-titulo);
}

/* ---------- 8. Alertas ---------- */
.ds-alert-stack[b-4tux4i5ljh] {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
}

.ds-alert[b-4tux4i5ljh] {
    border-left: 4px solid;
    border-radius: var(--radio-8);
    padding: var(--espacio-4);
    font-size: var(--texto-sm);
    line-height: var(--interlineado-normal);
}

.ds-alert strong[b-4tux4i5ljh] {
    font-weight: var(--peso-bold);
}

/* Ajuste 4: la alerta informativa en gris se confundía con una card
   (mismo fondo neutro, mismo borde fino). Se mantiene gris (Propuesta
   C no reserva acento para "información") pero con más peso: borde
   más grueso (6px vs. 4px) y más oscuro (gris-700 vs. gris-400) para
   que el borde de color siga leyéndose como el disparador de "esto es
   una alerta", no un simple margen decorativo. */
.ds-alert-info[b-4tux4i5ljh] {
    border-left-width: 6px;
}

/* ---------- 9. Elevación ---------- */
.ds-shadow-grid[b-4tux4i5ljh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--espacio-8);
}

.ds-shadow-demo[b-4tux4i5ljh] {
    background: var(--surface-card);
    border-radius: var(--radio-12);
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-shadow-demo span[b-4tux4i5ljh] {
    font-size: var(--texto-xs);
    color: var(--text-secondary);
    font-weight: var(--peso-medio);
}

/* ---------- 10. Marca ---------- */

/* Franja: escapa el padding horizontal de .ds-page para ocupar el
   100% del ancho real de la página, como se vería en la cabecera —
   no un ancho de contenido arbitrario. Sin border-radius: los cortes
   entre colores deben ser limpios, redondear las puntas de una barra
   de 3 bloques sólidos difumina el color del extremo contra el fondo
   (eso es lo que se leía como "degradado"). */
.ds-franja-fullbleed[b-4tux4i5ljh] {
    margin-left: calc(-1 * var(--espacio-6));
    margin-right: calc(-1 * var(--espacio-6));
    width: calc(100% + 2 * var(--espacio-6));
    margin-bottom: var(--espacio-2);
}

.ds-franja[b-4tux4i5ljh] {
    height: 6px;
    width: 100%;
    background: var(--marca-franja);
    display: block;
}

/* ---------- Indicador de menú activo (decisión fijada) ---------- */
.ds-menu-demo-wrap[b-4tux4i5ljh] {
    max-width: 260px;
    margin-bottom: var(--espacio-2);
}

.ds-menu-demo-frame[b-4tux4i5ljh] {
    background: var(--sidebar-fondo);
    border-radius: var(--radio-8);
    overflow: hidden;
}

.ds-franja-mini[b-4tux4i5ljh] {
    height: 4px;
    background: var(--marca-franja);
}

.ds-menu-sidebar[b-4tux4i5ljh] {
    display: flex;
    flex-direction: column;
    padding: var(--espacio-2) 0;
}

.ds-menu-item-v[b-4tux4i5ljh] {
    padding: var(--espacio-3) var(--espacio-4);
    color: var(--gris-300);
    font-size: var(--texto-sm);
    transition: var(--transition-fast);
    position: relative;
}

/* Hover: cambio sutil de fondo, sin borde tricolor — el indicador de
   "activo" es exclusivo del ítem activo, nunca se dispara con el
   simple paso del mouse. Deliberadamente más tenue que el fondo de
   "activo" (0.06 vs. 0.14) para que los dos estados se lean distintos
   entre sí incluso sin mirar el borde. */
.ds-menu-item-v:hover[b-4tux4i5ljh] {
    background: rgba(255, 255, 255, 0.06);
}

/* Indicador de menú activo — decisión final (Variante A7b, §8.1 de
   SISTEMA-DISENO.md): borde izquierdo tricolor, tres segmentos
   apilados en vertical (rojo/amarillo/verde CGT, de arriba a abajo),
   4px de grosor, + tinte de fondo en rojo CGT muy tenue (fijo, no
   depende de la sección — ver §10.3, puntos de color por sección
   descartados).

   Corregido de border-left + border-image a un ::before: con un solo
   valor, border-image-width se aplica a los CUATRO lados (anula el
   ancho de border-width que border-style: none dejaba en 0 en los
   otros tres) — pintaba el degradado como marco completo en vez de
   un solo borde al replicarse en NavMenu real (mismo CSS, mismo
   bug). Un pseudo-elemento posicionado en absoluto no depende de
   ninguna regla de border-image y da control total — ver
   Components/Layout/NavMenu.razor para la implementación real que
   este mockup refleja. A 4px de alto total, cada segmento mide
   ~1.33px — verificar visualmente que a esa escala los tres colores
   se distinguen y no se ven como una sola mancha borrosa una vez
   renderizado en un navegador real. */
.ds-menu-activo[b-4tux4i5ljh] {
    background: var(--menu-activo-fondo);
    color: var(--text-inverso);
    font-weight: var(--peso-semibold);
}

.ds-menu-activo[b-4tux4i5ljh]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--menu-activo-borde);
}

.ds-menu-activo:hover[b-4tux4i5ljh] {
    background: var(--menu-activo-fondo);
}

/* Área de reserva ("clear space"): el manual de marca exige un mínimo
   de 100px de ancho para el logo en digital, más un margen de
   aislamiento libre de otros elementos alrededor equivalente a una
   unidad "X" — acá aproximada a 20px (1/5 del ancho mínimo) mientras
   no exista el manual real para confirmar la medida exacta; ver nota
   en la página. El recuadro punteado exterior es esa zona de reserva;
   el interior es el logo en su tamaño mínimo. */
.ds-logo-reserve[b-4tux4i5ljh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gris-50);
    border: 1px dashed var(--gris-300);
    border-radius: var(--radio-8);
    padding: 20px;
    margin-bottom: var(--espacio-2);
}

.ds-logo-real[b-4tux4i5ljh] {
    width: 100px;
    height: auto;
}

/* Dos variantes lado a lado — completo (Login/PDF) y sello (sidebar/favicon) */
.ds-logo-variantes[b-4tux4i5ljh] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-6);
    margin-bottom: var(--espacio-3);
}

.ds-logo-variante[b-4tux4i5ljh] {
    flex: 1 1 260px;
}

/* Fondo carbón para probar el sello — mismo degradado que --sidebar-fondo,
   así la demo reproduce el contexto real donde se ve el logo. */
.ds-logo-reserve-oscura[b-4tux4i5ljh] {
    background: var(--sidebar-fondo);
    border: 1px dashed var(--gris-600);
}

/* border-radius: 50% recorta las esquinas claras del PNG (sin canal
   alfa) — ver nota en la página. Mismo tratamiento que .nav-logo en
   NavMenu.razor. */
.ds-logo-sello[b-4tux4i5ljh] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

/* Ícono dentro de la stat card — escalón 900 de cada familia, nunca el
   ancla 600 (falla AA como color de ícono, ver §7.3 de SISTEMA-DISENO.md). */
.ds-stat-icon[b-4tux4i5ljh] {
    font-size: var(--icono-sm);
}

.ds-modcard-grid[b-4tux4i5ljh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-2);
}

/* Fondo tintado del grupo (--ds-fondo, escalón 100) + ícono y texto
   oscuros — Variante M5, decisión final (pendiente de aplicar a Home),
   §9 de SISTEMA-DISENO.md. */
.ds-modcard[b-4tux4i5ljh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--espacio-1);
    padding: var(--espacio-4) var(--espacio-2);
    border-radius: var(--radio-12);
    background: var(--ds-fondo, var(--color-neutro-fondo));
    color: var(--gris-900);
    border: 1px solid var(--borde-sutil);
}

.ds-modcard i[b-4tux4i5ljh] {
    font-size: var(--texto-xl);
}

.ds-modcard-name[b-4tux4i5ljh] {
    font-size: var(--texto-xs);
    font-weight: var(--peso-semibold);
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
    .ds-form-grid[b-4tux4i5ljh] {
        grid-template-columns: 1fr;
    }

    .ds-tabular-demo[b-4tux4i5ljh] {
        flex-direction: column;
    }
}
/* /Components/Pages/Admin/GestionModulos.razor.rz.scp.css */
/* ===================================================
   GESTIÓN DE MÓDULOS — migrado al sistema de tokens
   Docs/design-system/SISTEMA-DISENO.md
   =================================================== */

.loading-container[b-o0kgb8x3pn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

/* ===== PESTAÑAS ===== */
.modulos-tabs[b-o0kgb8x3pn] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--espacio-6);
    padding: var(--espacio-2);
    background: var(--surface-card);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    list-style: none;
}

.tab-btn[b-o0kgb8x3pn] {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    padding: var(--espacio-3) var(--espacio-5);
    border: 2px solid transparent;
    border-radius: var(--radio-8);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--texto-sm);
    font-weight: var(--peso-semibold);
    cursor: pointer;
    transition: var(--transition-normal);
    white-space: nowrap;
}

.tab-btn:hover[b-o0kgb8x3pn] {
    background: var(--menu-activo-fondo);
    color: var(--color-accion-primaria);
    border-color: var(--color-accion-primaria);
}

/* Pestaña activa — carbón sólido, mismo criterio que el resto del
   sistema (primario = flat, nunca degradado de color arbitrario). */
.tab-btn.active[b-o0kgb8x3pn] {
    background: var(--color-accion-primaria);
    color: var(--text-inverso);
    border-color: var(--color-accion-primaria);
}

/* ===== CARD-HEADER: mismo patrón claro + acento tricolor que el resto
   del sistema (DetalleCruce/LibroDiario/GestionCursos, etc.) en vez
   del degradado violeta hardcodeado. ::deep porque el markup lo emite
   este mismo componente vía RenderFragment, no un hijo. ===== */
.card-header[b-o0kgb8x3pn] {
    background: var(--surface-card);
    color: var(--text-heading);
    border-bottom: 1px solid var(--borde-sutil);
    position: relative;
    overflow: hidden;
}

.card-header[b-o0kgb8x3pn]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--menu-activo-borde);
}

.card-header h5[b-o0kgb8x3pn] {
    margin-bottom: 0;
    font-size: var(--texto-base);
    font-weight: var(--peso-semibold);
}

/* ===== TABLA ===== */
.table-responsive[b-o0kgb8x3pn] {
    border-radius: 0 0 var(--radio-12) var(--radio-12);
    overflow: hidden;
}

.table[b-o0kgb8x3pn] {
    margin-bottom: 0;
}

.table thead[b-o0kgb8x3pn] {
    background: var(--gris-50);
}

.table th[b-o0kgb8x3pn] {
    color: var(--text-secondary);
    font-size: var(--texto-xs);
    font-weight: var(--peso-semibold);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    border-bottom: 2px solid var(--borde-sutil);
}

.table tbody tr:hover[b-o0kgb8x3pn] {
    background-color: var(--surface-sunken);
}

/* Fila de módulo restringido a SuperAdmin — deja de estar disponible
   para editar en este contexto, mismo tratamiento que .row-anulado en
   LibroDiario/CrucesCaja (fondo neutro + texto atenuado). */
.row-restringido td[b-o0kgb8x3pn] {
    background: var(--gris-50) !important;
}

/* ===== PILLS DE ESTADÍSTICAS ===== */
.stat-pill[b-o0kgb8x3pn] {
    display: inline-flex;
    align-items: center;
    padding: var(--espacio-2) var(--espacio-4);
    border-radius: var(--radio-full);
    font-size: var(--texto-sm);
    font-weight: var(--peso-semibold);
    gap: var(--espacio-2);
}

.stat-pill-neutro[b-o0kgb8x3pn] {
    background: var(--color-neutro-fondo);
    color: var(--color-neutro-texto);
}

.stat-pill-activos[b-o0kgb8x3pn] {
    background: var(--color-exito-fondo);
    color: var(--color-exito-texto);
}

/* ===== ESTADO VACÍO ===== */
.estado-vacio[b-o0kgb8x3pn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--espacio-12) var(--espacio-5);
    color: var(--text-muted);
    text-align: center;
    background: var(--surface-card);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
}

.estado-vacio i[b-o0kgb8x3pn] {
    font-size: var(--icono-xl);
    margin-bottom: var(--espacio-4);
    color: var(--gris-300);
}

.estado-vacio p[b-o0kgb8x3pn] {
    font-size: var(--texto-base);
    margin: 0;
}

/* ===== CARD selector ===== */
.card-selector[b-o0kgb8x3pn] {
    background: var(--surface-card);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    padding: var(--espacio-5);
    margin-bottom: var(--espacio-5);
    border: 1px solid var(--borde-sutil);
}

.toast-container[b-o0kgb8x3pn] {
    z-index: 9999;
}

.toast[b-o0kgb8x3pn] {
    min-width: 300px;
}

/* ===== ICONO EN TABLA ===== */
.table tbody td i.bi[b-o0kgb8x3pn] {
    color: var(--color-accion-primaria);
}

.table tbody tr.row-restringido td i.bi[b-o0kgb8x3pn] {
    color: var(--text-muted);
}
/* /Components/Pages/Archivo/GestionArchivo.razor.rz.scp.css */
/* ========================================
   GESTIÓN DOCUMENTAL - Estilos
   ======================================== */

/* ─── Contenedor principal ─────────────────────────────────────────────── */
.gd-container[b-ycwqogt88e] {
    padding: var(--espacio-6);
    max-width: 1400px;
}

/* ─── Header ────────────────────────────────────────────────────────────── */
.gd-header[b-ycwqogt88e] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-6);
}

.gd-header h1[b-ycwqogt88e] {
    font-size: 1.6rem;
    font-weight: var(--peso-bold);
    margin-bottom: var(--espacio-1);
    color: var(--text-heading);
}

.gd-header .subtitle[b-ycwqogt88e] {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.875rem;
}

/* ─── Botón subir (primario: carbón sólido, sin degradado) ──────────────── */
.gd-btn-subir[b-ycwqogt88e] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 1.25rem;
    border: none;
    border-radius: var(--radio-10);
    background: var(--color-accion-primaria);
    color: var(--text-inverso);
    font-weight: var(--peso-semibold);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    box-shadow: var(--shadow-sm);
}

.gd-btn-subir:hover[b-ycwqogt88e] {
    background: var(--color-accion-primaria-hover);
    transform: translateY(-1px);
}

/* ─── Panel de filtros ──────────────────────────────────────────────────── */
.gd-filtros[b-ycwqogt88e] {
    background: var(--surface-card);
    border-radius: var(--radio-16);
    box-shadow: var(--shadow-sm);
    padding: var(--espacio-4) var(--espacio-5);
    margin-bottom: var(--espacio-6);
}

/* Grid interno de filtros — CSS Grid propio, no depende de Bootstrap columns */
.gd-filtros-grid[b-ycwqogt88e] {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.2fr 1fr 1fr;
    gap: 0.6rem;
    align-items: center;
}

.gd-filtros-footer[b-ycwqogt88e] {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.gd-filtros-footer button[b-ycwqogt88e] {
    padding: 0 0.25rem;
    font-size: 0.8rem;
    color: var(--text-heading);
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.gd-filtros-footer button:hover[b-ycwqogt88e] {
    color: var(--color-accion-primaria);
    text-decoration: underline;
}

/* ─── Grid de documentos ────────────────────────────────────────────────── */
.gd-grid[b-ycwqogt88e] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: var(--espacio-5);
}

/* ─── Tarjeta de documento ──────────────────────────────────────────────── */
.gd-card[b-ycwqogt88e] {
    background: var(--surface-card);
    border-radius: var(--radio-16);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
    border: 1px solid var(--borde-sutil);
}

.gd-card:hover[b-ycwqogt88e] {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* Franja de acento superior — HORIZONTAL (--marca-franja: tres bloques
   de color en línea, mismo patrón que Login/Home), no vertical. Antes
   usaba --menu-activo-borde, un gradiente "to bottom" pensado para un
   borde IZQUIERDO de 4px de ANCHO (donde los tres tramos se apilan en
   vertical, ver su comentario en app.css) — aplicado aquí a un div de
   4px de ALTO, esos mismos tramos verticales quedaban comprimidos en
   una franja casi imperceptible, sin el efecto de tres bloques de
   color como el resto del sistema. */
.gd-card-accent[b-ycwqogt88e] {
    height: 4px;
    background: var(--marca-franja);
}

.gd-card-body[b-ycwqogt88e] {
    padding: var(--espacio-4);
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Icono + Título */
.gd-card-title-row[b-ycwqogt88e] {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-3);
    margin-bottom: 0.75rem;
}

.gd-card-icon[b-ycwqogt88e] {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.gd-card-title[b-ycwqogt88e] {
    font-size: 0.95rem;
    font-weight: var(--peso-bold);
    color: var(--text-heading);
    margin: 0 0 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gd-card-tipo[b-ycwqogt88e] {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* Badges */
.gd-card-badges[b-ycwqogt88e] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

/* ─── Badges de tarjeta ─────────────────────────────────────────────────── */
.gd-badge[b-ycwqogt88e] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: var(--peso-semibold);
    padding: 0.22em 0.65em;
    border-radius: var(--radio-20);
    white-space: nowrap;
    letter-spacing: 0.3px;
}

/* Categoría: taxonomía plana sin orden (igual que .pub-category-badge en
   Comunicaciones) — ni jerarquía ni color CGT, solo etiqueta neutra. */
.gd-badge-cat[b-ycwqogt88e] {
    background: var(--color-accion-secundaria-fondo);
    color: var(--text-secondary);
}

/* Descargable: permiso habilitado, carga positiva real -> pastel éxito. */
.gd-badge-dl[b-ycwqogt88e] {
    background: var(--color-exito-fondo);
    color: var(--color-exito-texto);
}

/* Confidencial: nivel de confidencialidad real (no decorativo) -> pastel
   advertencia, mismo ámbar que ya usaba el original sin tokenizar. */
.gd-badge-conf[b-ycwqogt88e] {
    background: var(--color-advertencia-fondo);
    color: var(--color-advertencia-texto);
    border: 1px solid var(--amarillo-cgt-100);
}

/* Afiliado: etiqueta informativa (a qué afiliado pertenece el
   documento), no es estado ni categoría -> neutra. */
.gd-badge-af[b-ycwqogt88e] {
    background: var(--color-accion-secundaria-fondo);
    color: var(--text-secondary);
}

/* Meta info */
.gd-card-meta[b-ycwqogt88e] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
    margin-bottom: var(--espacio-4);
}

.gd-card-meta i[b-ycwqogt88e] {
    width: 14px;
    text-align: center;
    margin-right: 0.3rem;
}

/* Botones de acción */
.gd-card-actions[b-ycwqogt88e] {
    display: flex;
    gap: var(--espacio-2);
    margin-top: auto;
}

.gd-card-actions .btn[b-ycwqogt88e] {
    font-size: 0.8rem;
    padding: 0.35rem 0.7rem;
    border-radius: var(--radio-8);
}

/* ─── Estado vacío ──────────────────────────────────────────────────────── */
.gd-empty[b-ycwqogt88e] {
    text-align: center;
    padding: var(--espacio-12) var(--espacio-4);
    color: var(--text-muted);
}

.gd-empty i[b-ycwqogt88e] {
    font-size: 4rem;
    margin-bottom: var(--espacio-4);
    display: block;
    opacity: 0.5;
}

/* ─── Overlay modal ─────────────────────────────────────────────────────── */
.gd-overlay[b-ycwqogt88e] {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay-carga);
    background: var(--overlay-oscuro-55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem var(--espacio-4);
    overflow-y: auto;
}

/* ─── Modal formulario ──────────────────────────────────────────────────── */
.gd-modal[b-ycwqogt88e] {
    background: var(--surface-card);
    border-radius: var(--radio-16);
    width: 100%;
    max-width: 680px;
    margin: auto;
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Encabezado: superficie carbón + acento de marca, mismo criterio que
   .ge-modal-header (Eventos) y .desc-upload-header (Comunicaciones). */
.gd-modal-header[b-ycwqogt88e] {
    background: var(--surface-card);
    padding: 1.1rem var(--espacio-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    border-bottom: 1px solid var(--borde-sutil);
    position: relative;
}

.gd-modal-header[b-ycwqogt88e]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--menu-activo-borde);
}

.gd-modal-title[b-ycwqogt88e] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: var(--peso-bold);
    color: var(--text-heading);
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

.gd-btn-close[b-ycwqogt88e] {
    background: var(--color-accion-secundaria-fondo);
    border: none;
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: var(--radio-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s;
    flex-shrink: 0;
}

.gd-btn-close:hover[b-ycwqogt88e] {
    background: var(--color-accion-secundaria-fondo-hover);
}

.gd-modal-body[b-ycwqogt88e] {
    padding: var(--espacio-6);
    overflow-y: auto;
    max-height: calc(100vh - 10rem);
}

/* ─── Secciones del formulario ──────────────────────────────────────────── */
.gd-form-section[b-ycwqogt88e] {
    margin-bottom: var(--espacio-5);
    padding-bottom: var(--espacio-5);
    border-bottom: 1px solid var(--borde-sutil);
}

.gd-form-section:last-child[b-ycwqogt88e] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ─── Label y campos ────────────────────────────────────────────────────── */
.gd-label[b-ycwqogt88e] {
    display: block;
    font-size: 0.8rem;
    font-weight: var(--peso-semibold);
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
    letter-spacing: 0.2px;
}

.gd-input[b-ycwqogt88e],
.gd-select[b-ycwqogt88e],
.gd-textarea[b-ycwqogt88e] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1.5px solid var(--borde-input);
    border-radius: var(--radio-8);
    font-size: 0.875rem;
    color: var(--text-heading);
    background: var(--surface-card);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    box-sizing: border-box;
}

.gd-input:focus[b-ycwqogt88e],
.gd-select:focus[b-ycwqogt88e],
.gd-textarea:focus[b-ycwqogt88e] {
    border-color: var(--borde-input-foco);
    box-shadow: 0 0 0 3px var(--color-foco-anillo);
}

.gd-textarea[b-ycwqogt88e] {
    resize: vertical;
    min-height: 72px;
}

/* ─── Zona de carga de archivo ──────────────────────────────────────────── */
.gd-upload-zone[b-ycwqogt88e] {
    position: relative;
    border: 2px dashed var(--borde-fuerte);
    border-radius: var(--radio-12);
    padding: 1.5rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: var(--surface-sunken);
    overflow: hidden;
}

.gd-upload-zone:hover[b-ycwqogt88e] {
    border-color: var(--color-accion-primaria);
    background: var(--color-accion-secundaria-fondo);
}

.gd-upload-zone.has-file[b-ycwqogt88e] {
    border-color: var(--color-exito);
    background: var(--color-exito-fondo);
    border-style: solid;
}

.gd-upload-zone i[b-ycwqogt88e] {
    font-size: 2rem;
    color: var(--color-accion-primaria);
    display: block;
    margin-bottom: 0.4rem;
}

.gd-upload-zone.has-file i[b-ycwqogt88e] {
    color: var(--color-exito);
}

.gd-upload-zone p[b-ycwqogt88e] {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    font-weight: var(--peso-semibold);
    color: var(--text-secondary);
}

.gd-upload-zone small[b-ycwqogt88e] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.gd-upload-input[b-ycwqogt88e] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/* ─── Opciones (checkboxes) ─────────────────────────────────────────────── */
.gd-opciones[b-ycwqogt88e] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gd-check-row[b-ycwqogt88e] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
}

.gd-check-row input[type="checkbox"][b-ycwqogt88e] {
    margin-top: 2px;
    accent-color: var(--color-accion-primaria);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

.gd-check-label[b-ycwqogt88e] {
    font-size: 0.875rem;
    color: var(--text-heading);
}

.gd-check-label small[b-ycwqogt88e] {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* ─── Footer del modal ──────────────────────────────────────────────────── */
.gd-modal-footer[b-ycwqogt88e] {
    display: flex;
    justify-content: flex-end;
    gap: var(--espacio-3);
    padding-top: var(--espacio-5);
    border-top: 1px solid var(--borde-sutil);
    margin-top: var(--espacio-5);
}

.gd-btn-cancelar[b-ycwqogt88e] {
    padding: 0.5rem 1.25rem;
    border: 1.5px solid var(--color-accion-secundaria-borde);
    border-radius: var(--radio-8);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: var(--peso-semibold);
    cursor: pointer;
    transition: background 0.15s;
}

.gd-btn-cancelar:hover:not(:disabled)[b-ycwqogt88e] {
    background: var(--color-accion-secundaria-fondo);
}

.gd-btn-submit[b-ycwqogt88e] {
    padding: 0.5rem 1.5rem;
    border: none;
    border-radius: var(--radio-8);
    background: var(--color-accion-primaria);
    color: var(--text-inverso);
    font-size: 0.875rem;
    font-weight: var(--peso-semibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 0.2s;
    box-shadow: var(--shadow-sm);
}

.gd-btn-submit:hover:not(:disabled)[b-ycwqogt88e] {
    background: var(--color-accion-primaria-hover);
}

.gd-btn-submit:disabled[b-ycwqogt88e],
.gd-btn-cancelar:disabled[b-ycwqogt88e] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- Lista de usuarios para acceso confidencial --------------------------- */
.gd-user-list[b-ycwqogt88e] { display:flex; flex-direction:column; gap:.45rem; max-height:280px; overflow-y:auto; padding-right:.25rem; }
.gd-user-list[b-ycwqogt88e]::-webkit-scrollbar { width:4px; }
.gd-user-list[b-ycwqogt88e]::-webkit-scrollbar-track { background: var(--surface-sunken); border-radius:4px; }
.gd-user-list[b-ycwqogt88e]::-webkit-scrollbar-thumb { background: var(--gris-300); border-radius:4px; }
.gd-user-item[b-ycwqogt88e] { display:flex; align-items:center; gap:.65rem; padding:.55rem .75rem; border:1.5px solid var(--borde-sutil); border-radius: var(--radio-10); background: var(--surface-card); cursor:pointer; transition:border-color .15s,background .15s,box-shadow .15s; user-select:none; }
.gd-user-item:hover[b-ycwqogt88e] { border-color: var(--borde-fuerte); background: var(--surface-sunken); }
.gd-user-item.selected[b-ycwqogt88e] { border-color: var(--color-accion-primaria); background: var(--menu-activo-fondo); box-shadow: var(--shadow-sm); }
.gd-user-check input[type="checkbox"][b-ycwqogt88e] { width:16px; height:16px; accent-color: var(--color-accion-primaria); cursor:pointer; flex-shrink:0; }

/* Avatar de iniciales: mismo patrón que .avatar-circle (Caja) — gris
   neutro sin seleccionar, degradado de marca (el único permitido) al
   seleccionar, para señalar énfasis sin inventar un color nuevo. */
.gd-user-avatar[b-ycwqogt88e] { width:36px; height:36px; border-radius: var(--radio-full); background: var(--gris-500); color: var(--text-inverso); font-size:.75rem; font-weight: var(--peso-bold); display:flex; align-items:center; justify-content:center; flex-shrink:0; letter-spacing:.5px; text-transform:uppercase; transition:background .15s; }
.gd-user-avatar.selected[b-ycwqogt88e] { background: var(--primary-gradient); }
.gd-user-info[b-ycwqogt88e] { flex:1; min-width:0; display:flex; flex-direction:column; gap:.12rem; }
.gd-user-top[b-ycwqogt88e] { display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; }
.gd-user-name[b-ycwqogt88e] { font-size:.85rem; font-weight: var(--peso-semibold); color: var(--text-heading); }
.gd-user-entity[b-ycwqogt88e] { font-size:.73rem; color: var(--text-muted); }
.gd-user-badge[b-ycwqogt88e] { font-size:.65rem; font-weight: var(--peso-bold); padding:.12rem .45rem; border-radius: var(--radio-20); white-space:nowrap; flex-shrink:0; text-transform:uppercase; letter-spacing:.3px; }

/* Rol del usuario: mismo rol (TipoUsuario) ya resuelto en Usuarios.razor
   con la familia --badge-jerarquia-* (hallazgo #7) — se reutiliza aquí
   en vez de la paleta arco-iris original, que además no cubría
   AdminFederacion (quedaba sin badge de color). */
.gd-badge-superadmin[b-ycwqogt88e]      { background: var(--badge-jerarquia-1); color: var(--badge-jerarquia-1-texto); }
.gd-badge-admincgt[b-ycwqogt88e]        { background: var(--badge-jerarquia-2); color: var(--badge-jerarquia-2-texto); }
.gd-badge-adminfederacion[b-ycwqogt88e] { background: var(--badge-jerarquia-3); color: var(--badge-jerarquia-3-texto); }
.gd-badge-adminsindicato[b-ycwqogt88e]  { background: var(--badge-jerarquia-4); color: var(--badge-jerarquia-4-texto); }
.gd-badge-admindirectiva[b-ycwqogt88e]  { background: var(--badge-jerarquia-5); color: var(--badge-jerarquia-5-texto); }
.gd-badge-afiliado[b-ycwqogt88e]        { background: var(--badge-jerarquia-6); color: var(--badge-jerarquia-6-texto); }

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .gd-filtros-grid[b-ycwqogt88e] {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 576px) {
    .gd-container[b-ycwqogt88e] {
        padding: 1rem;
    }

    .gd-filtros-grid[b-ycwqogt88e] {
        grid-template-columns: 1fr;
    }

    .gd-grid[b-ycwqogt88e] {
        grid-template-columns: 1fr;
    }

    .gd-header[b-ycwqogt88e] {
        flex-direction: column;
    }

    .gd-btn-subir[b-ycwqogt88e] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/Caja/AportesOrganizacionales.razor.rz.scp.css */
/* Aportes Organizacionales — modal de registro
   Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md */

/* --- Overlay --------------------------------------------------------------- */
.ao-overlay[b-54uanxk1kr] {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: var(--overlay-oscuro-55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--espacio-6) var(--espacio-4);
    overflow-y: auto;
}

/* --- Modal ----------------------------------------------------------------- */
.ao-modal[b-54uanxk1kr] {
    background: var(--surface-card);
    border-radius: var(--radio-16);
    width: 100%;
    max-width: 700px;
    margin: auto;
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Card clara con acento de marca en el borde — mismo patrón ya
   corregido en GestionEventos.razor.css/desc-upload-header
   (Comunicaciones)/gd-modal-header (Archivo); antes degradado carbón
   sólido (hallazgo #5 de AJUSTES-PENDIENTES.md). */
.ao-modal-header[b-54uanxk1kr] {
    background: var(--surface-card);
    padding: var(--espacio-5) var(--espacio-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    border-bottom: 1px solid var(--borde-sutil);
    position: relative;
    overflow: hidden;
}

.ao-modal-header[b-54uanxk1kr]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--menu-activo-borde);
}

.ao-modal-title[b-54uanxk1kr] {
    margin: 0;
    font-size: var(--texto-md);
    font-weight: var(--peso-bold);
    color: var(--text-heading);
    letter-spacing: var(--interletra-amplia);
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

.ao-btn-close[b-54uanxk1kr] {
    background: var(--color-accion-secundaria-fondo);
    border: none;
    color: var(--text-secondary);
    width: 34px;
    height: 34px;
    border-radius: var(--radio-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--texto-sm);
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.ao-btn-close:hover[b-54uanxk1kr] {
    background: var(--color-accion-secundaria-fondo-hover);
}

/* --- Cuerpo del modal ------------------------------------------------------ */
.ao-modal-body[b-54uanxk1kr] {
    padding: var(--espacio-6);
    overflow-y: auto;
    max-height: calc(100vh - 10rem);
}

/* --- Secciones del formulario ---------------------------------------------- */
.ao-form-section[b-54uanxk1kr] {
    margin-bottom: var(--espacio-5);
    padding-bottom: var(--espacio-5);
    border-bottom: 1px solid var(--borde-sutil);
}

.ao-form-section-last[b-54uanxk1kr] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* --- Labels ---------------------------------------------------------------- */
.ao-label[b-54uanxk1kr] {
    display: block;
    font-size: var(--texto-xs);
    font-weight: var(--peso-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--espacio-1);
    letter-spacing: var(--interletra-amplia);
}

/* --- Inputs ---------------------------------------------------------------- */
.ao-input[b-54uanxk1kr] {
    width: 100%;
    padding: var(--espacio-2) var(--espacio-3);
    border: 1.5px solid var(--borde-input);
    border-radius: var(--radio-8);
    font-size: var(--texto-sm);
    color: var(--text-body);
    background: var(--surface-card);
    transition: var(--transition-fast);
    outline: none;
    box-sizing: border-box;
    appearance: auto;
}

.ao-input:focus[b-54uanxk1kr] {
    border-color: var(--borde-input-foco);
    box-shadow: 0 0 0 3px var(--color-foco-anillo);
    background: var(--surface-card);
}

/* --- Input con prefijo de moneda ------------------------------------------- */
.ao-input-group[b-54uanxk1kr] {
    display: flex;
    align-items: stretch;
}

.ao-input-prefix[b-54uanxk1kr] {
    display: flex;
    align-items: center;
    padding: 0 var(--espacio-3);
    background: var(--color-neutro-fondo);
    border: 1.5px solid var(--borde-input);
    border-right: none;
    border-radius: var(--radio-8) 0 0 var(--radio-8);
    color: var(--text-secondary);
    font-weight: var(--peso-semibold);
    font-size: var(--texto-sm);
    flex-shrink: 0;
}

.ao-input-with-prefix[b-54uanxk1kr] {
    border-radius: 0 var(--radio-8) var(--radio-8) 0;
}

/* --- Footer del modal ------------------------------------------------------ */
.ao-modal-footer[b-54uanxk1kr] {
    padding: var(--espacio-4) var(--espacio-6);
    border-top: 1px solid var(--borde-sutil);
    display: flex;
    justify-content: flex-end;
    gap: var(--espacio-3);
    flex-shrink: 0;
    background: var(--color-neutro-fondo);
}

.ao-btn-cancelar[b-54uanxk1kr] {
    display: inline-flex;
    align-items: center;
    padding: var(--espacio-2) var(--espacio-5);
    border: 1.5px solid var(--borde-input);
    border-radius: var(--radio-10);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-weight: var(--peso-semibold);
    font-size: var(--texto-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.ao-btn-cancelar:hover:not(:disabled)[b-54uanxk1kr] {
    background: var(--color-neutro-fondo);
    border-color: var(--borde-fuerte);
}

/* Botón primario del modal — carbón sólido, decisión fijada (§7.1 de
   SISTEMA-DISENO.md), no el degradado/color de marca anterior. */
.ao-btn-guardar[b-54uanxk1kr] {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    padding: var(--espacio-2) var(--espacio-6);
    border: none;
    border-radius: var(--radio-10);
    background: var(--color-accion-primaria);
    color: var(--text-inverso);
    font-weight: var(--peso-semibold);
    font-size: var(--texto-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.ao-btn-guardar:hover:not(:disabled)[b-54uanxk1kr] {
    background: var(--color-accion-primaria-hover);
}

.ao-btn-cancelar:disabled[b-54uanxk1kr],
.ao-btn-guardar:disabled[b-54uanxk1kr] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
/* /Components/Pages/Caja/Caja.razor.rz.scp.css */
/* Caja - Gestión de Aportes
   Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md */

.caja-container[b-y0b1yxww60] {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--espacio-6) var(--espacio-4);
}

/* Cabecera de página */
.caja-header[b-y0b1yxww60] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--espacio-6);
}

.caja-header h3[b-y0b1yxww60] {
    margin-bottom: var(--espacio-1);
}

/* Filtros en una fila (búsqueda más ancha + 2 selects) */
.caja-filters[b-y0b1yxww60] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--espacio-4);
    align-items: start;
}

/* Tarjetas de estadísticas en fila de 3 */
.stats-grid[b-y0b1yxww60] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-6);
}

/* Stat cards — patrón B4 (fondo tintado + borde superior de acento).
   Sin ícono: el markup de estas tres tarjetas no tiene <i>, y agregar
   uno sería tocar estructura — queda como caso reportado en el
   entregable de la migración. Las tres tarjetas son neutras: "Total
   Afiliados" es un conteo sin carga valorativa, y los dos aportes
   "esperados" son cifras PROYECTADAS, no realizadas — verde queda
   reservado para montos ya recaudados (regla de sistema fijada en
   §7.4 de SISTEMA-DISENO.md tras el hallazgo #2 de
   AJUSTES-PENDIENTES.md: un color de éxito en una cifra que todavía no
   ocurrió comunica un logro que no es real). */
.stat-card[b-y0b1yxww60] {
    background: var(--color-neutro-fondo);
    border: 1px solid var(--borde-sutil);
    border-top: 4px solid var(--color-accion-primaria);
    border-radius: var(--radio-12);
    padding: var(--espacio-5) var(--espacio-6);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
}

.stat-card:hover[b-y0b1yxww60] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.stat-label[b-y0b1yxww60] {
    font-size: var(--texto-xs);
    font-weight: var(--peso-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    margin-bottom: var(--espacio-2);
}

.stat-value[b-y0b1yxww60] {
    font-size: var(--texto-2xl);
    font-weight: var(--peso-bold);
    color: var(--text-heading);
}

/* Cabecera de la tabla de afiliados */
.afiliados-header[b-y0b1yxww60] {
    background: var(--surface-card) !important;
    border-bottom: 2px solid var(--borde-sutil);
}

.afiliados-header h5[b-y0b1yxww60] {
    color: var(--text-heading);
    margin: 0;
}

/* Avatar redondo en tabla */
.avatar-circle[b-y0b1yxww60] {
    width: 40px;
    height: 40px;
    border-radius: var(--radio-full);
    background: var(--primary-gradient);
    color: var(--text-inverso);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: var(--espacio-2);
}

.avatar-circle img[b-y0b1yxww60] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radio-full);
}

/* Tabla interna */
.table > :not(caption) > * > *[b-y0b1yxww60] {
    padding: var(--espacio-3) var(--espacio-3);
    vertical-align: middle;
}

@media (max-width: 768px) {
    .caja-filters[b-y0b1yxww60] {
        grid-template-columns: 1fr;
    }

    .stats-grid[b-y0b1yxww60] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .stats-grid[b-y0b1yxww60] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Caja/DashboardCobranza.razor.rz.scp.css */
/* ========================================
   DASHBOARD COBRANZA - Estilos
   Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md
   ======================================== */

.dashboard-container[b-3boluzr6cj] {
    padding: var(--espacio-6);
}

/* Header */
.dashboard-header[b-3boluzr6cj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-6);
}

.dashboard-header h1[b-3boluzr6cj] {
    font-size: var(--texto-xl);
    font-weight: var(--peso-bold);
    color: var(--text-heading);
    margin: 0;
}

.dashboard-header .subtitle[b-3boluzr6cj] {
    color: var(--text-secondary);
    margin: var(--espacio-1) 0 0;
    font-size: var(--texto-sm);
}

.dashboard-header-actions[b-3boluzr6cj] {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

/* Override card-header for this component (blanco en vez de degradado) */
.card-header[b-3boluzr6cj] {
    background: var(--surface-card);
    color: var(--text-heading);
    border-bottom: 1px solid var(--borde-sutil);
    padding: var(--espacio-3) var(--espacio-5);
}

.card-header h6[b-3boluzr6cj] {
    color: var(--text-heading);
    font-size: var(--texto-sm);
}

/* KPI Grid - 4 columnas. Patrón B4: fondo tintado + ícono en color +
   borde superior de acento. "Afiliados Activos" es un total sin carga
   valorativa (gris); "Cumplimiento %" tampoco es positiva/negativa por
   sí sola (es una tasa informativa) — sin token CGT para el azul/info
   original, se resuelve en gris neutro (ver entregable de la migración,
   tokens faltantes). */
.kpi-grid[b-3boluzr6cj] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-5);
}

.kpi-card[b-3boluzr6cj] {
    background: var(--color-neutro-fondo);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    padding: var(--espacio-6) var(--espacio-4);
    text-align: center;
    border: 1px solid var(--borde-sutil);
    border-top: 4px solid var(--gris-400);
    transition: var(--transition-normal);
}

.kpi-card:hover[b-3boluzr6cj] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.kpi-card:nth-child(2)[b-3boluzr6cj] {
    background: var(--verde-cgt-100);
    border-top-color: var(--color-exito-superficie);
}

.kpi-card:nth-child(3)[b-3boluzr6cj] {
    background: var(--rojo-cgt-100);
    border-top-color: var(--color-destructivo-superficie);
}

.kpi-icon[b-3boluzr6cj] {
    font-size: var(--icono-xl);
    display: block;
    margin-bottom: var(--espacio-2);
}

.kpi-value[b-3boluzr6cj] {
    font-size: var(--texto-2xl);
    font-weight: var(--peso-bold);
    line-height: var(--interlineado-titulo);
    margin-bottom: var(--espacio-1);
    color: var(--text-heading);
}

.kpi-label[b-3boluzr6cj] {
    font-size: var(--texto-xs);
    color: var(--text-secondary);
    font-weight: var(--peso-medio);
}

/* La familia "info" (4a tarjeta, "Cumplimiento") ya no necesita este
   override local: .text-info/.progress-bar.bg-info se resolvieron a
   nivel global en app.css (absorbidas en --color-neutro-*, pasada
   final de coherencia) — este componente hereda el mismo carbón neutro
   sin necesidad de sobrescribirlo acá. */

/* Money Grid - 3 columnas */
.money-grid[b-3boluzr6cj] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-5);
}

.money-card[b-3boluzr6cj] {
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    padding: var(--espacio-5) var(--espacio-6);
    border: 1px solid transparent;
    transition: var(--transition-normal);
}

.money-card:hover[b-3boluzr6cj] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* "Recaudo Real" es positiva (verde). "Recaudo Este Mes" no usaba el
   verde de éxito en el original sino el color de marca (rgba de
   #667eea, hoy carbón) para destacarla sin valorarla — se resuelve en
   gris neutro, no en verde, para no forzar una lectura "positiva" que
   el diseño original no le daba. "Deuda Total Pendiente" es la única
   crítica, rojo. */
.money-card.accent-green[b-3boluzr6cj] {
    background: var(--verde-cgt-100);
    border-color: var(--verde-cgt-100);
}

.money-card.accent-blue[b-3boluzr6cj] {
    background: var(--color-neutro-fondo);
    border-color: var(--borde-sutil);
}

.money-card.accent-red[b-3boluzr6cj] {
    background: var(--rojo-cgt-100);
    border-color: var(--rojo-cgt-100);
}

.money-card-body[b-3boluzr6cj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--espacio-4);
}

.money-label[b-3boluzr6cj] {
    font-size: var(--texto-xs);
    color: var(--text-secondary);
    margin-bottom: var(--espacio-1);
}

.money-value[b-3boluzr6cj] {
    font-size: var(--texto-lg);
    font-weight: var(--peso-bold);
    line-height: var(--interlineado-titulo);
}

.money-sub[b-3boluzr6cj] {
    font-size: var(--texto-xs);
    color: var(--text-secondary);
    margin-top: var(--espacio-1);
}

.money-icon[b-3boluzr6cj] {
    font-size: var(--icono-xl);
    opacity: 0.7;
    flex-shrink: 0;
}

/* Two-column layout: morosidad (1fr) + monthly table (2fr) */
.dashboard-two-col[b-3boluzr6cj] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-5);
    align-items: start;
}

/* Morosidad distribution rows */
.distribution-row[b-3boluzr6cj] {
    margin-bottom: var(--espacio-3);
}

.distribution-row:last-of-type[b-3boluzr6cj] {
    margin-bottom: 0;
}

.distribution-label[b-3boluzr6cj] {
    display: flex;
    justify-content: space-between;
    font-size: var(--texto-sm);
    margin-bottom: var(--espacio-1);
}

/* Table overrides (scoped to this component) */
thead th[b-3boluzr6cj] {
    background: var(--gris-50);
    color: var(--text-secondary);
    font-size: var(--texto-xs);
    padding: var(--espacio-2) var(--espacio-3);
    font-weight: var(--peso-semibold);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    border-bottom: 2px solid var(--borde-sutil);
}

tbody td[b-3boluzr6cj] {
    padding: var(--espacio-2) var(--espacio-3);
    font-size: var(--texto-sm);
}

.row-current-month td[b-3boluzr6cj] {
    background-color: color-mix(in srgb, var(--color-accion-primaria) 6%, transparent);
}

/* Escala de morosidad por antigüedad — Leve y Moderada colapsan al
   mismo amarillo CGT (mismo criterio ya fijado en app.css, donde
   .bg-orange ya apunta a --color-advertencia-superficie, el mismo
   token que .bg-warning): la paleta de tres colores CGT no tiene un
   cuarto tono para distinguirlas — ver "tokens faltantes" en el
   entregable de esta migración. */
.progress-bar.bg-success[b-3boluzr6cj] {
    background: var(--color-exito-superficie) !important;
}

.progress-bar.bg-warning[b-3boluzr6cj] {
    background: var(--color-advertencia-superficie) !important;
}

.progress-bar.bg-danger[b-3boluzr6cj] {
    background: var(--color-destructivo-superficie) !important;
}

/* Responsive */
@media (max-width: 1100px) {
    .kpi-grid[b-3boluzr6cj] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .dashboard-two-col[b-3boluzr6cj] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-container[b-3boluzr6cj] {
        padding: var(--espacio-4) var(--espacio-3);
    }

    .dashboard-header[b-3boluzr6cj] {
        flex-direction: column;
        align-items: flex-start;
    }

    .money-grid[b-3boluzr6cj] {
        grid-template-columns: 1fr;
    }

    .kpi-grid[b-3boluzr6cj] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/Caja/DetalleAportesAfiliado.razor.rz.scp.css */
/* ============================================================
   Detalle Aportes Afiliado — estilos del módulo Caja
   Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md.
   El componente tenía además un <style> embebido (sin scope, CSS
   global) duplicando/compitiendo con este archivo — se eliminó: sus
   reglas de .mes-card/.estado-icon/etc. ya perdían siempre contra las
   de este archivo (mayor especificidad por el scope de Blazor), y las
   que apuntaban a .modal-header.bg-primary/.modal-footer.bg-light eran
   código muerto (el modal real usa las clases .aporte-modal-*, no
   Bootstrap real — no hay Bootstrap cargado en este proyecto).
   ============================================================ */

/* ── Contenedor general ── */
.detalle-aportes-container[b-asvynbdg85] {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--espacio-6) var(--espacio-4);
}

/* ── Encabezado de página ── */
.page-header[b-asvynbdg85] {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-6);
}

.page-header .back-btn[b-asvynbdg85] {
    color: var(--color-accion-primaria);
    text-decoration: none;
    font-size: var(--texto-sm);
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--espacio-1);
    transition: var(--transition-fast);
}

.page-header .back-btn:hover[b-asvynbdg85] { color: var(--color-accion-primaria-hover); }

.page-header h3[b-asvynbdg85] {
    margin: 0;
    font-size: var(--texto-lg);
    font-weight: var(--peso-bold);
    color: var(--text-heading);
}

/* ── Card del afiliado ── */
.afiliado-card[b-asvynbdg85] {
    background: var(--surface-card);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--borde-sutil);
    overflow: hidden;
    margin-bottom: var(--espacio-6);
}

/* Card clara con acento de marca en el borde — antes degradado carbón
   sólido (--primary-gradient), mismo patrón ya corregido en
   DetalleCruce.razor.css (Financiero) y la familia VerDirectiva
   (organizacionales); ver Home.razor.css .welcome-banner para el
   tratamiento original del que parte esta convención. */
.afiliado-card-header[b-asvynbdg85] {
    background: var(--surface-card);
    padding: var(--espacio-4) var(--espacio-6);
    display: flex;
    align-items: center;
    gap: var(--espacio-4);
    border-bottom: 1px solid var(--borde-sutil);
    position: relative;
    overflow: hidden;
}

.afiliado-card-header[b-asvynbdg85]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--menu-activo-borde);
}

.afiliado-avatar[b-asvynbdg85] {
    width: 56px;
    height: 56px;
    border-radius: var(--radio-full);
    background: var(--color-accion-secundaria-fondo);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--texto-lg);
    color: var(--text-secondary);
    flex-shrink: 0;
    overflow: hidden;
    border: 2px solid var(--borde-sutil);
}

.afiliado-avatar img[b-asvynbdg85] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.afiliado-card-header .afiliado-nombre[b-asvynbdg85] {
    font-size: var(--texto-md);
    font-weight: var(--peso-bold);
    color: var(--text-heading);
    margin: 0;
}

.afiliado-card-header .afiliado-sub[b-asvynbdg85] {
    font-size: var(--texto-xs);
    color: var(--text-secondary);
    margin: 0;
}

.afiliado-card-body[b-asvynbdg85] {
    padding: var(--espacio-4) var(--espacio-6);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--espacio-4);
}

@media (max-width: 768px) {
    .afiliado-card-body[b-asvynbdg85] { grid-template-columns: repeat(2, 1fr); }
}

.afiliado-stat small[b-asvynbdg85] {
    display: block;
    font-size: var(--texto-xs);
    font-weight: var(--peso-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    margin-bottom: 2px;
}

.afiliado-stat strong[b-asvynbdg85] {
    font-size: var(--texto-sm);
    color: var(--text-heading);
}

/* ── Card de resumen año ── */
.resumen-anio-card[b-asvynbdg85] {
    background: var(--surface-card);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--borde-sutil);
    padding: var(--espacio-5) var(--espacio-6);
    margin-bottom: var(--espacio-6);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--espacio-8);
    align-items: center;
}

@media (max-width: 576px) {
    .resumen-anio-card[b-asvynbdg85] { grid-template-columns: 1fr; }
}

.resumen-anio-stats[b-asvynbdg85] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espacio-6);
}

.resumen-stat-label[b-asvynbdg85] {
    font-size: var(--texto-xs);
    font-weight: var(--peso-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    margin-bottom: 2px;
}

.resumen-stat-value[b-asvynbdg85] {
    font-size: var(--texto-lg);
    font-weight: var(--peso-bold);
    color: var(--text-heading);
}

/* ── Calendario de meses ── */
.calendario-card[b-asvynbdg85] {
    background: var(--surface-card);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--borde-sutil);
    margin-bottom: var(--espacio-6);
    overflow: hidden;
}

.calendario-header[b-asvynbdg85] {
    background: var(--surface-card);
    padding: var(--espacio-4) var(--espacio-6);
    border-bottom: 2px solid var(--borde-sutil);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calendario-header h5[b-asvynbdg85] { margin: 0; font-weight: var(--peso-bold); color: var(--text-heading); }

.calendario-grid[b-asvynbdg85] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--espacio-4);
    padding: var(--espacio-6);
}

@media (max-width: 992px) { .calendario-grid[b-asvynbdg85] { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 576px) { .calendario-grid[b-asvynbdg85] { grid-template-columns: repeat(2, 1fr); } }

/* ── Tarjeta de mes — dos estados: pagado (verde) / pendiente (neutro).
   No hay un tercer estado "vencido" acá, es un calendario binario. ── */
.mes-card[b-asvynbdg85] {
    border-radius: var(--radio-8);
    border: 1.5px solid var(--borde-sutil);
    overflow: hidden;
    transition: var(--transition-fast);
    background: var(--surface-card);
}

.mes-card:hover[b-asvynbdg85] { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.mes-card.pagado[b-asvynbdg85] { border-color: var(--color-exito-superficie); }
.mes-card.pendiente[b-asvynbdg85] { border-color: var(--borde-sutil); }

.mes-card-header[b-asvynbdg85] {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    padding: var(--espacio-2) var(--espacio-3);
    font-size: var(--texto-sm);
    font-weight: var(--peso-semibold);
}

.mes-card.pagado .mes-card-header[b-asvynbdg85]    { background: var(--verde-cgt-100); color: var(--color-exito-texto); }
.mes-card.pendiente .mes-card-header[b-asvynbdg85] { background: var(--gris-50); color: var(--text-secondary); }

.mes-numero[b-asvynbdg85] {
    font-size: var(--texto-sm);
    font-weight: 800;
    line-height: 1;
}

.mes-nombre[b-asvynbdg85] { font-size: var(--texto-xs); font-weight: var(--peso-semibold); }

.mes-card-body[b-asvynbdg85] {
    padding: var(--espacio-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-1);
    min-height: 60px;
    justify-content: center;
}

.estado-icon[b-asvynbdg85] { font-size: var(--icono-lg); line-height: 1; }
.estado-icon.success[b-asvynbdg85] { color: var(--color-exito-superficie); }
.estado-icon.warning[b-asvynbdg85] { color: var(--gris-400); }

.estado-texto[b-asvynbdg85] { font-size: var(--texto-xs); font-weight: var(--peso-semibold); text-transform: uppercase; color: var(--text-secondary); }

.mes-card-footer[b-asvynbdg85] { padding: var(--espacio-2) var(--espacio-3) var(--espacio-3); }

/* ── Historial de aportes ── */
.historial-card[b-asvynbdg85] {
    background: var(--surface-card);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--borde-sutil);
    overflow: hidden;
    margin-bottom: var(--espacio-6);
}

.historial-header[b-asvynbdg85] {
    background: var(--surface-card);
    padding: var(--espacio-4) var(--espacio-6);
    border-bottom: 2px solid var(--borde-sutil);
}

.historial-header h5[b-asvynbdg85] { margin: 0; font-weight: var(--peso-bold); color: var(--text-heading); }

/* ── Modal de Registro ── */
.aporte-modal-overlay[b-asvynbdg85] {
    position: fixed;
    inset: 0;
    background: var(--overlay-oscuro-55);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--espacio-4);
}

.aporte-modal[b-asvynbdg85] {
    background: var(--surface-card);
    border-radius: var(--radio-16);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 580px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalEntrada-b-asvynbdg85 .2s ease-out;
}

@keyframes modalEntrada-b-asvynbdg85 {
    from { opacity: 0; transform: translateY(-16px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* Card clara con acento de marca en el borde — mismo patrón ya
   corregido en .afiliado-card-header más arriba (hallazgo #5 de
   AJUSTES-PENDIENTES.md); antes degradado carbón sólido. */
.aporte-modal-header[b-asvynbdg85] {
    background: var(--surface-card);
    padding: var(--espacio-5) var(--espacio-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid var(--borde-sutil);
    position: relative;
    overflow: hidden;
}

.aporte-modal-header[b-asvynbdg85]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--menu-activo-borde);
}

.aporte-modal-header h5[b-asvynbdg85] {
    color: var(--text-heading);
    margin: 0;
    font-size: var(--texto-base);
    font-weight: var(--peso-bold);
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

.aporte-modal-close[b-asvynbdg85] {
    background: var(--color-accion-secundaria-fondo);
    border: none;
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: var(--radio-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: var(--texto-lg);
    line-height: 1;
}

.aporte-modal-close:hover[b-asvynbdg85] { background: var(--color-accion-secundaria-fondo-hover); }

.aporte-modal-body[b-asvynbdg85] {
    padding: var(--espacio-6);
    background: var(--surface-card);
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

.aporte-modal-footer[b-asvynbdg85] {
    padding: var(--espacio-4) var(--espacio-6);
    background: var(--gris-50);
    border-top: 1px solid var(--borde-sutil);
    display: flex;
    justify-content: flex-end;
    gap: var(--espacio-3);
    flex-shrink: 0;
}

/* ── Form dentro del modal ── */
.aporte-form-row[b-asvynbdg85] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-4);
}

@media (max-width: 480px) { .aporte-form-row[b-asvynbdg85] { grid-template-columns: 1fr; } }

.aporte-form-field[b-asvynbdg85] { display: flex; flex-direction: column; gap: var(--espacio-1); }

.aporte-form-field label[b-asvynbdg85] {
    font-size: var(--texto-xs);
    font-weight: var(--peso-semibold);
    color: var(--text-secondary);
}

.aporte-form-field .form-control[b-asvynbdg85],
.aporte-form-field .form-select[b-asvynbdg85] {
    background: var(--surface-card);
    border: 1.5px solid var(--borde-input);
    border-radius: var(--radio-8);
    color: var(--text-body);
    font-size: var(--texto-sm);
    padding: var(--espacio-2) var(--espacio-3);
    transition: var(--transition-fast);
}

.aporte-form-field .form-control:focus[b-asvynbdg85],
.aporte-form-field .form-select:focus[b-asvynbdg85] {
    border-color: var(--borde-input-foco);
    box-shadow: 0 0 0 3px var(--color-foco-anillo);
    outline: none;
}

.aporte-form-field .input-group .form-control[b-asvynbdg85] { border-radius: 0 var(--radio-8) var(--radio-8) 0; }
.aporte-form-field .input-group-text[b-asvynbdg85] {
    background: var(--gris-50);
    border: 1.5px solid var(--borde-input);
    border-right: none;
    color: var(--text-secondary);
    border-radius: var(--radio-8) 0 0 var(--radio-8);
    padding: var(--espacio-2) var(--espacio-3);
}

.aporte-hint[b-asvynbdg85] {
    font-size: var(--texto-xs);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--espacio-1);
}

.aporte-hint .badge-hint[b-asvynbdg85] {
    background: var(--color-exito-superficie);
    color: var(--color-exito-superficie-texto);
    padding: 2px var(--espacio-2);
    border-radius: var(--radio-full);
    font-size: var(--texto-xs);
    font-weight: var(--peso-semibold);
}

/* Responsive */
@media (max-width: 768px) {
    .mes-card[b-asvynbdg85] {
        min-height: 160px;
    }
}
/* /Components/Pages/Caja/EstadoCuentaAfiliado.razor.rz.scp.css */
/* ========================================
   ESTADO DE CUENTA AFILIADO - Estilos
   Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md
   ======================================== */

.ec-container[b-pnf87j2p9w] {
    padding: var(--espacio-6);
}

/* Header */
.ec-header[b-pnf87j2p9w] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-6);
}

.ec-header-left[b-pnf87j2p9w] {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
}

.ec-header-left h3[b-pnf87j2p9w] {
    margin: 0;
    font-size: var(--texto-lg);
    color: var(--text-heading);
}

.ec-header-actions[b-pnf87j2p9w] {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

.btn-back[b-pnf87j2p9w] {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    font-size: var(--texto-sm);
    color: var(--color-accion-primaria);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    font-weight: var(--peso-medio);
}

.btn-back:hover[b-pnf87j2p9w] {
    color: var(--color-accion-primaria-hover);
    text-decoration: underline;
}

/* Afiliado info card — 3-column grid */
.afiliado-info-grid[b-pnf87j2p9w] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--espacio-5);
    align-items: center;
}

/* Override card-header (blanco en vez de degradado) */
.card-header[b-pnf87j2p9w] {
    background: var(--surface-card);
    color: var(--text-heading);
    border-bottom: 1px solid var(--borde-sutil);
    padding: var(--espacio-3) var(--espacio-5);
}

.card-header h6[b-pnf87j2p9w] {
    color: var(--text-heading);
}

/* KPI Grid - 4 columnas */
.ec-kpi-grid[b-pnf87j2p9w] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-5);
}

.ec-kpi-card[b-pnf87j2p9w] {
    background: var(--surface-card);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    padding: var(--espacio-6) var(--espacio-4);
    text-align: center;
    border: 1px solid var(--borde-sutil);
    transition: var(--transition-normal);
}

.ec-kpi-card:hover[b-pnf87j2p9w] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.ec-kpi-label[b-pnf87j2p9w] {
    font-size: var(--texto-xs);
    color: var(--text-secondary);
    margin-bottom: var(--espacio-2);
}

.ec-kpi-value[b-pnf87j2p9w] {
    font-size: var(--texto-2xl);
    font-weight: var(--peso-bold);
    line-height: var(--interlineado-titulo);
    margin-bottom: var(--espacio-1);
}

.ec-kpi-value-md[b-pnf87j2p9w] {
    font-size: var(--texto-lg);
    font-weight: var(--peso-bold);
    line-height: var(--interlineado-titulo);
    margin-bottom: var(--espacio-1);
}

.ec-kpi-sub[b-pnf87j2p9w] {
    font-size: var(--texto-xs);
    color: var(--text-secondary);
}

/* Table overrides (scoped to this component) */
thead th[b-pnf87j2p9w] {
    background: var(--gris-50);
    color: var(--text-secondary);
    font-size: var(--texto-xs);
    padding: var(--espacio-2) var(--espacio-3);
    font-weight: var(--peso-semibold);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    border-bottom: 2px solid var(--borde-sutil);
}

tbody td[b-pnf87j2p9w] {
    padding: var(--espacio-2) var(--espacio-3);
    font-size: var(--texto-sm);
}

/* Fila de período pendiente/vencido — tinte muy sutil, no el pastel
   completo (era rgba(220,53,69,.06), un resaltado de fila, no una
   superficie de estado). */
.row-pending td[b-pnf87j2p9w] {
    background-color: color-mix(in srgb, var(--color-destructivo) 8%, transparent);
}

/* Responsive */
@media (max-width: 1100px) {
    .ec-kpi-grid[b-pnf87j2p9w] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .afiliado-info-grid[b-pnf87j2p9w] {
        grid-template-columns: 1fr 1fr;
    }

    .afiliado-name[b-pnf87j2p9w] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .ec-container[b-pnf87j2p9w] {
        padding: var(--espacio-4) var(--espacio-3);
    }

    .ec-header[b-pnf87j2p9w] {
        flex-direction: column;
    }

    .ec-kpi-grid[b-pnf87j2p9w] {
        grid-template-columns: repeat(2, 1fr);
    }

    .afiliado-info-grid[b-pnf87j2p9w] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Caja/MorosidadAfiliados.razor.rz.scp.css */
/* ========================================
   ALERTAS DE MOROSIDAD - Estilos
   Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md
   ======================================== */

.morosidad-container[b-tvut46bhm5] {
    padding: var(--espacio-6);
}

/* Header */
.morosidad-header[b-tvut46bhm5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-6);
}

.morosidad-header h1[b-tvut46bhm5] {
    font-size: var(--texto-xl);
    font-weight: var(--peso-bold);
    color: var(--text-heading);
    margin: 0;
}

.morosidad-header .subtitle[b-tvut46bhm5] {
    color: var(--text-secondary);
    margin: var(--espacio-1) 0 0;
    font-size: var(--texto-sm);
}

.morosidad-header-actions[b-tvut46bhm5] {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

/* Override card-header (blanco en vez de degradado) */
.card-header[b-tvut46bhm5] {
    background: var(--surface-card);
    color: var(--text-heading);
    border-bottom: 1px solid var(--borde-sutil);
    padding: var(--espacio-3) var(--espacio-5);
}

/* KPI Grid - 4 columnas. Patrón B4: fondo tintado + borde superior de
   acento — Leve y Moderada colapsan al mismo amarillo CGT (la paleta
   de tres colores no distingue un cuarto nivel de severidad, ver
   "tokens faltantes" en el entregable). */
.mk-grid[b-tvut46bhm5] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-5);
}

.mk-card[b-tvut46bhm5] {
    background: var(--color-neutro-fondo);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    padding: var(--espacio-6) var(--espacio-4);
    text-align: center;
    border: 1px solid var(--borde-sutil);
    border-top: 4px solid var(--gris-400);
    transition: var(--transition-normal);
}

.mk-card:hover[b-tvut46bhm5] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.mk-card.accent-success[b-tvut46bhm5] {
    background: var(--verde-cgt-100);
    border-top-color: var(--color-exito-superficie);
}

.mk-card.accent-warning[b-tvut46bhm5],
.mk-card.accent-orange[b-tvut46bhm5] {
    background: var(--amarillo-cgt-100);
    border-top-color: var(--color-advertencia-superficie);
}

.mk-card.accent-danger[b-tvut46bhm5] {
    background: var(--rojo-cgt-100);
    border-top-color: var(--color-destructivo-superficie);
}

.mk-icon[b-tvut46bhm5] {
    font-size: var(--icono-xl);
    display: block;
    margin-bottom: var(--espacio-2);
}

.mk-value[b-tvut46bhm5] {
    font-size: var(--texto-2xl);
    font-weight: var(--peso-bold);
    line-height: var(--interlineado-titulo);
    margin-bottom: var(--espacio-1);
    color: var(--text-heading);
}

.mk-label[b-tvut46bhm5] {
    font-size: var(--texto-xs);
    color: var(--text-secondary);
    font-weight: var(--peso-medio);
}

/* Filters row */
.morosidad-filters[b-tvut46bhm5] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--espacio-3);
    align-items: center;
}

.filter-summary[b-tvut46bhm5] {
    font-size: var(--texto-sm);
    color: var(--text-secondary);
}

/* Period badges (pending months) — patrón pastel */
.badge-period[b-tvut46bhm5] {
    display: inline-block;
    padding: 3px var(--espacio-2);
    border-radius: var(--radio-12);
    font-size: 11px;
    font-weight: var(--peso-semibold);
    background-color: var(--color-destructivo-fondo);
    color: var(--color-destructivo-texto);
    border: 1px solid var(--rojo-cgt-100);
}

/* Badge count (larger for KPI table cell) */
.badge-count[b-tvut46bhm5] {
    font-size: var(--texto-sm);
    padding: var(--espacio-2) var(--espacio-4);
}

/* Table overrides */
thead th[b-tvut46bhm5] {
    background: var(--gris-50);
    color: var(--text-secondary);
    font-size: var(--texto-xs);
    padding: var(--espacio-2) var(--espacio-3);
    font-weight: var(--peso-semibold);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    border-bottom: 2px solid var(--borde-sutil);
}

tbody td[b-tvut46bhm5] {
    padding: var(--espacio-2) var(--espacio-3);
    font-size: var(--texto-sm);
}

/* Responsive */
@media (max-width: 1100px) {
    .mk-grid[b-tvut46bhm5] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .morosidad-container[b-tvut46bhm5] {
        padding: var(--espacio-4) var(--espacio-3);
    }

    .morosidad-header[b-tvut46bhm5] {
        flex-direction: column;
        align-items: flex-start;
    }

    .mk-grid[b-tvut46bhm5] {
        grid-template-columns: repeat(2, 1fr);
    }

    .morosidad-filters[b-tvut46bhm5] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Caja/MorosidadOrganizacional.razor.rz.scp.css */
/* ========================================
   MOROSIDAD ORGANIZACIONAL - Estilos
   Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md
   ======================================== */

.mo-container[b-qdss57p1aq] {
    padding: var(--espacio-6);
}

/* ── Header ── */
.mo-header[b-qdss57p1aq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-6);
}

.mo-title[b-qdss57p1aq] {
    font-size: var(--texto-xl);
    font-weight: var(--peso-bold);
    margin: 0 0 var(--espacio-1);
    color: var(--text-heading);
}

.mo-title i[b-qdss57p1aq] {
    color: var(--color-advertencia-texto);
}

.mo-subtitle[b-qdss57p1aq] {
    color: var(--text-secondary);
    font-size: var(--texto-sm);
    margin: 0;
}

.mo-header-actions[b-qdss57p1aq] {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    flex-wrap: wrap;
}

.mo-year-select[b-qdss57p1aq] {
    width: 115px;
}

.mo-btn-volver[b-qdss57p1aq] {
    display: inline-flex;
    align-items: center;
    padding: var(--espacio-2) var(--espacio-4);
    border-radius: var(--radio-8);
    border: 2px solid var(--color-accion-primaria);
    color: var(--color-accion-primaria);
    font-size: var(--texto-sm);
    font-weight: var(--peso-semibold);
    text-decoration: none;
    transition: var(--transition-fast);
}

.mo-btn-volver:hover[b-qdss57p1aq] {
    background: var(--color-accion-primaria);
    color: var(--text-inverso);
}

/* ── KPI Grid ── */
.mo-kpi-grid[b-qdss57p1aq] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-6);
}

@media (max-width: 900px) {
    .mo-kpi-grid[b-qdss57p1aq] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .mo-kpi-grid[b-qdss57p1aq] {
        grid-template-columns: 1fr;
    }
}

/* Patrón B4: fondo tintado + borde superior de acento. Leve y Moderada
   colapsan al mismo amarillo CGT — ver "tokens faltantes" en el
   entregable de esta migración. */
.mo-kpi-card[b-qdss57p1aq] {
    background: var(--color-neutro-fondo);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    padding: var(--espacio-6) var(--espacio-4);
    text-align: center;
    border: 1px solid var(--borde-sutil);
    border-top: 4px solid var(--gris-400);
    transition: box-shadow 0.2s, transform 0.15s;
}

.mo-kpi-card:hover[b-qdss57p1aq] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.mo-kpi-card.accent-success[b-qdss57p1aq] { background: var(--verde-cgt-100); border-top-color: var(--color-exito-superficie); }
.mo-kpi-card.accent-warning[b-qdss57p1aq],
.mo-kpi-card.accent-orange[b-qdss57p1aq]  { background: var(--amarillo-cgt-100); border-top-color: var(--color-advertencia-superficie); }
.mo-kpi-card.accent-danger[b-qdss57p1aq]  { background: var(--rojo-cgt-100); border-top-color: var(--color-destructivo-superficie); }

.mo-kpi-icon[b-qdss57p1aq] {
    font-size: var(--icono-xl);
    display: block;
    margin-bottom: var(--espacio-2);
}

.mo-kpi-value[b-qdss57p1aq] {
    font-size: var(--texto-2xl);
    font-weight: var(--peso-bold);
    line-height: var(--interlineado-titulo);
    margin-bottom: var(--espacio-1);
    color: var(--text-heading);
}

.mo-kpi-label[b-qdss57p1aq] {
    font-size: var(--texto-xs);
    color: var(--text-secondary);
    font-weight: var(--peso-semibold);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
}

/* ── Table wrapper ── */
.mo-table-wrapper[b-qdss57p1aq] {
    background: var(--surface-card);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin-top: var(--espacio-2);
}

/* Card clara con acento de marca en el borde — mismo patrón ya
   corregido en DetalleCruce.razor.css (Financiero) y
   .afiliado-card-header (Caja); antes degradado carbón sólido
   (hallazgo #5 de AJUSTES-PENDIENTES.md). */
.mo-table-header[b-qdss57p1aq] {
    background: var(--surface-card);
    color: var(--text-heading);
    padding: var(--espacio-4) var(--espacio-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: var(--peso-semibold);
    font-size: var(--texto-sm);
    border-bottom: 1px solid var(--borde-sutil);
    position: relative;
    overflow: hidden;
}

.mo-table-header[b-qdss57p1aq]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--menu-activo-borde);
}

/* Conteo decorativo, sin estado propio — misma excepción sólida que
   .badge-primary (§3.1 SISTEMA-DISENO.md), ya no necesita los overlays
   translúcidos pensados para el fondo oscuro que tenía antes. */
.mo-badge-count[b-qdss57p1aq] {
    background: var(--color-accion-primaria);
    color: var(--text-inverso);
    padding: var(--espacio-1) var(--espacio-4);
    border-radius: var(--radio-20);
    font-size: var(--texto-xs);
    font-weight: var(--peso-bold);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    white-space: nowrap;
}

.mo-table[b-qdss57p1aq] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-sm);
}

.mo-table thead tr[b-qdss57p1aq] {
    background: var(--gris-100);
    border-bottom: 2px solid var(--borde-sutil);
}

.mo-table thead th[b-qdss57p1aq] {
    padding: var(--espacio-3) var(--espacio-4);
    font-weight: var(--peso-bold);
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    color: var(--text-secondary);
}

.mo-table tbody tr[b-qdss57p1aq] {
    border-bottom: 1px solid var(--borde-sutil);
    transition: background 0.15s;
}

.mo-table tbody tr:last-child[b-qdss57p1aq] {
    border-bottom: none;
}

.mo-table tbody tr:hover[b-qdss57p1aq] {
    background: var(--gris-50);
}

.mo-table tbody td[b-qdss57p1aq] {
    padding: var(--espacio-4) var(--espacio-4);
    vertical-align: middle;
    color: var(--text-heading);
}

/* ── Badges de nivel — patrón pastel, sin degradado ni relleno sólido.
   Leve y Moderada colapsan al mismo amarillo CGT (mismo criterio del
   resto del módulo). ── */
.mo-nivel-leve[b-qdss57p1aq] {
    background: var(--color-advertencia-fondo);
    color: var(--color-advertencia-texto);
    padding: var(--espacio-1) var(--espacio-3);
    border-radius: var(--radio-20);
    font-size: var(--texto-xs);
    font-weight: var(--peso-bold);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    display: inline-block;
}

.mo-nivel-moderada[b-qdss57p1aq] {
    background: var(--color-advertencia-fondo);
    color: var(--color-advertencia-texto);
    padding: var(--espacio-1) var(--espacio-3);
    border-radius: var(--radio-20);
    font-size: var(--texto-xs);
    font-weight: var(--peso-bold);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    display: inline-block;
}

.mo-nivel-critica[b-qdss57p1aq] {
    background: var(--color-destructivo-fondo);
    color: var(--color-destructivo-texto);
    padding: var(--espacio-1) var(--espacio-3);
    border-radius: var(--radio-20);
    font-size: var(--texto-xs);
    font-weight: var(--peso-bold);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    display: inline-block;
}

.mo-badge-tipo[b-qdss57p1aq] {
    background: var(--color-neutro-fondo);
    color: var(--color-neutro-texto);
    padding: var(--espacio-1) var(--espacio-3);
    border-radius: var(--radio-20);
    font-size: var(--texto-xs);
    font-weight: var(--peso-semibold);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    display: inline-block;
}

.mo-count-num[b-qdss57p1aq] {
    font-size: var(--texto-md);
    font-weight: var(--peso-bold);
    color: var(--text-heading);
}

/* ── Estado vacío ── */
.mo-empty[b-qdss57p1aq] {
    text-align: center;
    padding: var(--espacio-12) var(--espacio-4);
    color: var(--text-secondary);
    background: var(--surface-card);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    margin-top: var(--espacio-2);
}

.mo-empty-icon[b-qdss57p1aq] {
    font-size: var(--icono-2xl);
    display: block;
    margin-bottom: var(--espacio-4);
    color: var(--color-exito-superficie);
}
/* /Components/Pages/Censo/Censo.razor.rz.scp.css */
/* ========================================
   CENSO SINDICAL - DISEÑO MEJORADO
   Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md
   ======================================== */

/* Contenedor principal */
.censo-container[b-9iszzftu5n] {
    padding: var(--espacio-5);
    max-width: 100%;
}

/* ========================================
   ESTADÍSTICAS HORIZONTALES — stat cards
   Patrón oficial B4 (ver /design-system, sección "Cards y stat cards",
   y §7.3/§7.4 de SISTEMA-DISENO.md): fondo tintado + ícono suelto en
   color de familia (escalón 900, nunca el ancla 600 —
   verde-cgt-600/amarillo-cgt-600 no pasan 3:1 como color de ícono sobre
   blanco, 2.66:1 y 1.52:1) + borde superior de acento. Mismo
   tratamiento de ícono en las cuatro tarjetas, tintadas o neutras — sin
   círculo de fondo detrás del glifo, que hubiera sumado una forma
   decorativa más al sistema (menos sobrio, ver §7.4).

   Asignación de color por tipo de métrica (regla formal, §7.4):
   verde = positivas, amarillo = pendientes/en riesgo, rojo =
   vencidas/críticas, gris = totales y métricas sin carga valorativa.
   "Fallecidos" queda en gris por decisión semántica, no por omisión —
   el rojo se reserva para urgencia (vencidos, morosidad); aplicarlo a
   personas fallecidas banalizaría el color. El tinte neutro (gris-200,
   un escalón más oscuro que el gris-100 de las familias de color) le
   da a "Total" y "Fallecidos" el mismo peso visual que las tintadas,
   en vez de leerse como una tarjeta sin terminar.
   ======================================== */
.estadisticas-row[b-9iszzftu5n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-6);
}

.stat-card[b-9iszzftu5n] {
    background: var(--gris-200);
    border: 1px solid var(--borde-sutil);
    border-top: 4px solid var(--gris-400);
    border-radius: var(--radio-8);
    padding: var(--espacio-5);
    display: flex;
    align-items: center;
    gap: var(--espacio-4);
    box-shadow: var(--shadow-md);
    transition: var(--transition-normal);
    cursor: pointer;
}

.stat-card:hover[b-9iszzftu5n] {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* Acento por métrica — fondo tintado + borde superior, misma familia */
.stat-card.total[b-9iszzftu5n] {
    border-top-color: var(--color-accion-primaria);
}

.stat-card.activos[b-9iszzftu5n] {
    background: var(--verde-cgt-100);
    border-top-color: var(--color-exito-superficie);
}

.stat-card.inactivos[b-9iszzftu5n] {
    background: var(--amarillo-cgt-100);
    border-top-color: var(--color-advertencia-superficie);
}

.stat-card.fallecidos[b-9iszzftu5n] {
    border-top-color: var(--gris-600);
}

.stat-card i[b-9iszzftu5n] {
    font-size: var(--icono-xl);
    color: var(--gris-900);
    opacity: 0.9;
}

.stat-card.activos i[b-9iszzftu5n] {
    color: var(--verde-cgt-900);
}

.stat-card.inactivos i[b-9iszzftu5n] {
    color: var(--amarillo-cgt-900);
}

.stat-info[b-9iszzftu5n] {
    flex: 1;
}

.stat-number[b-9iszzftu5n] {
    font-size: var(--texto-2xl);
    font-weight: var(--peso-bold);
    line-height: var(--interlineado-titulo);
    color: var(--text-heading);
    margin-bottom: var(--espacio-1);
}

.stat-label[b-9iszzftu5n] {
    font-size: var(--texto-sm);
    color: var(--text-secondary);
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
}

/* ========================================
   FILTROS
   ======================================== */
.filtros-card[b-9iszzftu5n] {
    background: var(--surface-card);
    border-radius: var(--radio-12);
    padding: var(--espacio-5);
    margin-bottom: var(--espacio-5);
    box-shadow: var(--shadow-sm);
}

.filtros-row[b-9iszzftu5n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-4);
}

.filtro-group label[b-9iszzftu5n] {
    display: block;
    font-size: var(--texto-sm);
    font-weight: var(--peso-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--espacio-1);
}

.filtro-group select[b-9iszzftu5n],
.filtro-group input[b-9iszzftu5n] {
    width: 100%;
    padding: var(--espacio-2) var(--espacio-3);
    border: 1px solid var(--borde-input);
    border-radius: var(--radio-6);
    font-size: var(--texto-sm);
    transition: var(--transition-fast);
}

.filtro-group select:focus[b-9iszzftu5n],
.filtro-group input:focus[b-9iszzftu5n] {
    outline: none;
    border-color: var(--borde-input-foco);
    box-shadow: 0 0 0 3px var(--color-foco-anillo);
}

/* ========================================
   TABLA DE AFILIADOS
   ======================================== */
.table-container[b-9iszzftu5n] {
    background: var(--surface-card);
    border-radius: var(--radio-12);
    padding: var(--espacio-5);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
}

.afiliados-table[b-9iszzftu5n] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--texto-sm);
}

.afiliados-table thead[b-9iszzftu5n] {
    background: var(--primary-gradient);
    color: var(--text-inverso);
}

.afiliados-table th[b-9iszzftu5n] {
    padding: var(--espacio-3);
    text-align: left;
    font-weight: var(--peso-semibold);
    font-size: var(--texto-sm);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    white-space: nowrap;
}

.afiliados-table th:first-child[b-9iszzftu5n] {
    border-radius: var(--radio-8) 0 0 0;
    padding-left: var(--espacio-5);
}

.afiliados-table th:last-child[b-9iszzftu5n] {
    border-radius: 0 var(--radio-8) 0 0;
    padding-right: var(--espacio-5);
}

.afiliados-table tbody tr[b-9iszzftu5n] {
    border-bottom: 1px solid var(--borde-sutil);
    transition: var(--transition-fast);
}

.afiliados-table tbody tr:hover[b-9iszzftu5n] {
    background-color: var(--surface-sunken);
}

.afiliados-table tbody tr:last-child[b-9iszzftu5n] {
    border-bottom: none;
}

.afiliados-table td[b-9iszzftu5n] {
    padding: var(--espacio-3);
    vertical-align: middle;
}

.afiliados-table td:first-child[b-9iszzftu5n] {
    padding-left: var(--espacio-5);
}

.afiliados-table td:last-child[b-9iszzftu5n] {
    padding-right: var(--espacio-5);
}

/* ========================================
   FOTO EN MINIATURA
   ======================================== */
.foto-miniatura[b-9iszzftu5n] {
    width: 45px;
    height: 45px;
    border-radius: var(--radio-full);
    object-fit: cover;
    border: 3px solid var(--gris-200);
    box-shadow: var(--shadow-sm);
}

.foto-placeholder[b-9iszzftu5n] {
    width: 45px;
    height: 45px;
    border-radius: var(--radio-full);
    background: var(--primary-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-inverso);
    font-weight: var(--peso-bold);
    font-size: var(--texto-md);
    border: 3px solid var(--gris-200);
    box-shadow: var(--shadow-sm);
}

/* ========================================
   BADGES DE ESTADO
   Patrón pastel (fondo -100 + texto -900) — decisión fijada en
   /design-system, sección 8 "Badges". Este módulo ya usaba esta
   estructura (fondo pastel + texto oscuro), migración directa a los
   tokens semánticos de estado en vez de los hex sueltos.
   ======================================== */
.badge[b-9iszzftu5n] {
    padding: var(--espacio-1) var(--espacio-3);
    border-radius: var(--radio-12);
    font-size: var(--texto-xs);
    font-weight: var(--peso-semibold);
    text-transform: uppercase;
    display: inline-block;
    letter-spacing: var(--interletra-amplia);
}

.badge-activo[b-9iszzftu5n] {
    background-color: var(--color-exito-fondo);
    color: var(--color-exito-texto);
}

.badge-inactivo[b-9iszzftu5n] {
    background-color: var(--color-advertencia-fondo);
    color: var(--color-advertencia-texto);
}

.badge-fallecido[b-9iszzftu5n] {
    background-color: var(--color-destructivo-fondo);
    color: var(--color-destructivo-texto);
}

/* ========================================
   BOTONES DE ACCIÓN
   ======================================== */
.acciones-grupo[b-9iszzftu5n] {
    display: flex;
    gap: var(--espacio-2);
}

.btn-icon[b-9iszzftu5n] {
    padding: var(--espacio-1) var(--espacio-3);
    border: none;
    border-radius: var(--radio-6);
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: var(--texto-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
}

.btn-icon:hover[b-9iszzftu5n] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Íconos de acción de fila — excepción acotada a "acciones en gris"
   (§3.3 de SISTEMA-DISENO.md, mismo criterio que Excel/PDF): con
   varias acciones compactas en la misma fila, el color acelera el
   reconocimiento al escanear. outline gris (contraste correcto) seguía
   siendo dos siluetas casi idénticas de lejos. azul-900/amarillo-cgt-900
   son tonos contenidos (escalón 900, no el ancla saturada 600) que ya
   existían como tokens sin usarse para esto — no son nuevos valores.
   Contraste: azul-900 10.13:1, amarillo-cgt-900 5.40:1, ambos muy por
   encima del mínimo 3:1 no-texto. El hover sigue neutro (mismo gris
   para las tres acciones) para que la retroalimentación de interacción
   no compita con el color de reconocimiento en reposo. Eliminar
   conserva el rojo destructivo sin cambios. */
.btn-ver[b-9iszzftu5n] {
    background-color: transparent;
    border: 1px solid var(--azul-900);
    color: var(--azul-900);
}

.btn-editar[b-9iszzftu5n] {
    background-color: transparent;
    border: 1px solid var(--amarillo-cgt-900);
    color: var(--amarillo-cgt-900);
}

.btn-ver:hover[b-9iszzftu5n],
.btn-editar:hover[b-9iszzftu5n] {
    background-color: var(--color-accion-secundaria-fondo);
    border-color: var(--gris-700);
    color: var(--gris-900);
}

.btn-ver:focus-visible[b-9iszzftu5n],
.btn-editar:focus-visible[b-9iszzftu5n] {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-foco-anillo);
}

/* ========================================
   LOADING Y MENSAJES
   ======================================== */
.spinner-container[b-9iszzftu5n] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--espacio-12);
}

.spinner[b-9iszzftu5n] {
    border: 4px solid var(--gris-100);
    border-top: 4px solid var(--primary-color);
    border-radius: var(--radio-full);
    width: 50px;
    height: 50px;
    animation: spin-b-9iszzftu5n 1s linear infinite;
}

@keyframes spin-b-9iszzftu5n {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1024px) {
    .estadisticas-row[b-9iszzftu5n] {
        grid-template-columns: repeat(2, 1fr);
    }

    .filtros-row[b-9iszzftu5n] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .estadisticas-row[b-9iszzftu5n] {
        grid-template-columns: 1fr;
    }

    .filtros-row[b-9iszzftu5n] {
        grid-template-columns: 1fr;
    }

    .stat-number[b-9iszzftu5n] {
        font-size: var(--texto-xl);
    }

    .foto-miniatura[b-9iszzftu5n],
    .foto-placeholder[b-9iszzftu5n] {
        width: 40px;
        height: 40px;
    }

    .afiliados-table[b-9iszzftu5n] {
        font-size: var(--texto-sm);
    }

    .afiliados-table th[b-9iszzftu5n],
    .afiliados-table td[b-9iszzftu5n] {
        padding: var(--espacio-3) var(--espacio-2);
    }
}

@media (max-width: 576px) {
    .censo-container[b-9iszzftu5n] {
        padding: var(--espacio-3);
    }

    .stat-card[b-9iszzftu5n] {
        padding: var(--espacio-4);
    }

    .stat-card i[b-9iszzftu5n] {
        font-size: var(--icono-lg);
    }

    .stat-number[b-9iszzftu5n] {
        font-size: var(--texto-xl);
    }

    .stat-label[b-9iszzftu5n] {
        font-size: var(--texto-xs);
    }

    .foto-miniatura[b-9iszzftu5n],
    .foto-placeholder[b-9iszzftu5n] {
        width: 35px;
        height: 35px;
    }

    .table-container[b-9iszzftu5n] {
        padding: var(--espacio-3);
    }

    .afiliados-table[b-9iszzftu5n] {
        font-size: var(--texto-xs);
    }

    .btn-icon[b-9iszzftu5n] {
        padding: var(--espacio-1) var(--espacio-3);
        font-size: var(--texto-xs);
    }
}

/* ========================================
   BOTONES DE EXPORTACIÓN
   ======================================== */
.export-separator[b-9iszzftu5n] {
    width: 1px;
    height: 28px;
    background: var(--borde-sutil);
    flex-shrink: 0;
}

.btn-export[b-9iszzftu5n] {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
    padding: var(--espacio-2) var(--espacio-4);
    border: none;
    border-radius: var(--radio-8);
    font-size: var(--texto-sm);
    font-weight: var(--peso-semibold);
    cursor: pointer;
    transition: filter var(--transition-fast), transform 0.1s, box-shadow var(--transition-fast);
    white-space: nowrap;
    line-height: var(--interlineado-normal);
    box-shadow: var(--shadow-sm);
}

    .btn-export:hover[b-9iszzftu5n] {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
        filter: brightness(1.08);
    }

    .btn-export:active[b-9iszzftu5n] {
        transform: translateY(0);
        filter: brightness(.96);
    }

/* Excel/PDF: la excepción de color sigue justificada (identifican el
   tipo de archivo, no un estado), pero rellenos sólidos saturados les
   daban más peso visual que a "Agregar Afiliado" (carbón) — la acción
   primaria de la pantalla. Se pasa a outline con el token de texto
   (escalón 900, no la superficie 600/700) para que además sea
   suficientemente oscuro para servir como texto visible ("Excel"/
   "PDF" junto al ícono, no solo el ícono) — verde-cgt-900 da 6.53:1,
   rojo-cgt-900 da 7.52:1, ambos sobre el mínimo 4.5:1 de texto. */
.btn-export-excel[b-9iszzftu5n] {
    background: transparent;
    border: 1px solid var(--color-exito-texto);
    color: var(--color-exito-texto);
}

.btn-export-excel:hover[b-9iszzftu5n] {
    background: var(--color-exito-fondo);
}

.btn-export-pdf[b-9iszzftu5n] {
    background: transparent;
    border: 1px solid var(--color-destructivo-texto);
    color: var(--color-destructivo-texto);
}

.btn-export-pdf:hover[b-9iszzftu5n] {
    background: var(--color-destructivo-fondo);
}
/* /Components/Pages/Censo/CrearAfiliado.razor.rz.scp.css */
/* Estilos para CrearAfiliado - complementa los estilos globales de formulario */

/* Marco de la vista previa de foto: es un encuadre decorativo, no una
   acción — se usa --borde-fuerte (gris) en vez de --primary-color
   (púrpura legacy), acorde a Propuesta C. */
.img-thumbnail[b-vlkqm5g2r5] {
    border: 2px solid var(--borde-fuerte);
    border-radius: var(--radio-8);
    box-shadow: var(--shadow-sm);
}
/* /Components/Pages/Censo/EditarAfiliado.razor.rz.scp.css */
/* Estilos para EditarAfiliado - complementa los estilos globales de formulario */

/* Marco de la vista previa de foto: es un encuadre decorativo, no una
   acción — se usa --borde-fuerte (gris) en vez de --primary-color
   (púrpura legacy), acorde a Propuesta C. */
.img-thumbnail[b-i3jqm15728] {
    border: 2px solid var(--borde-fuerte);
    border-radius: var(--radio-8);
    box-shadow: var(--shadow-sm);
}

.beneficiario-form[b-i3jqm15728] {
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-8);
    padding: var(--espacio-4) var(--espacio-5);
    background: var(--surface-sunken);
}
/* /Components/Pages/Censo/VerAfiliado.razor.rz.scp.css */
/* ========================================
   DETALLES DEL AFILIADO - DISEÑO PROFESIONAL
   Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md
   ======================================== */

.detalles-container[b-508x3fi6jq] {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--espacio-5);
}

/* ========================================
   ENCABEZADO
   ======================================== */
.detalles-header[b-508x3fi6jq] {
    margin-bottom: var(--espacio-8);
}

.header-content[b-508x3fi6jq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--espacio-5);
}

.header-actions[b-508x3fi6jq] {
    display: flex;
    gap: var(--espacio-3);
}

.btn-action[b-508x3fi6jq] {
    padding: var(--espacio-3) var(--espacio-5);
    border: none;
    border-radius: var(--radio-8);
    font-weight: var(--peso-semibold);
    cursor: pointer;
    transition: var(--transition-normal);
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
}

/* Botones de acción de encabezado — regla formalizada post-piloto
   (§3.3 de SISTEMA-DISENO.md): "editar"/"agregar" son acciones
   genéricas, sin significado de éxito/advertencia, así que van en gris
   secundario en vez del naranja/verde sueltos que traían. La única
   excepción a "acciones en gris" son los botones que identifican un
   tipo de archivo (exportar Excel/PDF en Censo.razor.css) — no aplica
   aquí. */
.btn-editar[b-508x3fi6jq],
.btn-agregar[b-508x3fi6jq] {
    background: var(--color-accion-secundaria-fondo);
    color: var(--color-accion-secundaria-texto);
}

.btn-editar:hover[b-508x3fi6jq],
.btn-agregar:hover[b-508x3fi6jq] {
    background: var(--color-accion-secundaria-fondo-hover);
}

.btn-volver[b-508x3fi6jq] {
    background: var(--secondary-gradient);
    color: var(--text-inverso);
}

.btn-action:hover[b-508x3fi6jq] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ========================================
   FOTO DE PERFIL (CENTRADA)
   ======================================== */
.foto-section[b-508x3fi6jq] {
    text-align: center;
    margin-bottom: var(--espacio-10);
    padding: var(--espacio-8);
    background: var(--surface-card);
    border-radius: var(--radio-16);
    box-shadow: var(--shadow-md);
}

.foto-perfil[b-508x3fi6jq] {
    width: 180px;
    height: 180px;
    border-radius: var(--radio-full);
    object-fit: cover;
    border: 5px solid var(--gris-100);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--espacio-5);
}

.foto-placeholder-perfil[b-508x3fi6jq] {
    width: 180px;
    height: 180px;
    border-radius: var(--radio-full);
    background: var(--primary-gradient);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-inverso);
    font-size: var(--icono-3xl);
    font-weight: var(--peso-bold);
    border: 5px solid var(--gris-100);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--espacio-5);
}

.nombre-completo[b-508x3fi6jq] {
    font-size: var(--texto-xl);
    font-weight: var(--peso-bold);
    color: var(--text-heading);
    margin-bottom: var(--espacio-2);
}

.documento[b-508x3fi6jq] {
    font-size: var(--texto-base);
    color: var(--text-secondary);
    margin-bottom: var(--espacio-4);
}

.badges-estado[b-508x3fi6jq] {
    display: flex;
    justify-content: center;
    gap: var(--espacio-3);
    flex-wrap: wrap;
}

/* ========================================
   BADGES
   Patrón pastel (fondo -100 + texto -900), decisión fijada en
   /design-system, sección 8 "Badges". Los 5 badges de este archivo
   eran de degradado + texto blanco — se convierten al patrón pastel
   como el resto del sistema.
   ======================================== */
.badge[b-508x3fi6jq] {
    padding: var(--espacio-2) var(--espacio-4);
    border-radius: var(--radio-20);
    font-size: var(--texto-sm);
    font-weight: var(--peso-semibold);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
}

.badge-activo[b-508x3fi6jq] {
    background: var(--color-exito-fondo);
    color: var(--color-exito-texto);
}

.badge-inactivo[b-508x3fi6jq] {
    background: var(--color-advertencia-fondo);
    color: var(--color-advertencia-texto);
}

.badge-fallecido[b-508x3fi6jq] {
    background: var(--color-destructivo-fondo);
    color: var(--color-destructivo-texto);
}

/* badge-info (género) y badge-secondary (edad) no son un estado del
   afiliado (no son éxito/advertencia/destructivo) — son informativos
   neutros. Familia --color-neutro-* formalizada en app.css tras el
   piloto (antes se usaban las primitivas gris-100/gris-700 sin token
   semántico propio — ver §3.4 de SISTEMA-DISENO.md). */
.badge-info[b-508x3fi6jq] {
    background: var(--color-neutro-fondo);
    color: var(--color-neutro-texto);
}

.badge-secondary[b-508x3fi6jq] {
    background: var(--color-neutro-fondo);
    color: var(--color-neutro-texto);
}

/* ========================================
   CARDS DE INFORMACIÓN
   ======================================== */
.info-cards[b-508x3fi6jq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--espacio-5);
    margin-bottom: var(--espacio-8);
}

.info-card[b-508x3fi6jq] {
    background: var(--surface-card);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: var(--transition-normal);
}

.info-card:hover[b-508x3fi6jq] {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* Card clara con acento de marca en el borde — mismo patrón ya
   corregido en DetalleCruce.razor.css (Financiero), la familia
   VerDirectiva (organizacionales) y .afiliado-card-header (Caja);
   antes degradado carbón sólido (hallazgo #5 de AJUSTES-PENDIENTES.md). */
.info-card-header[b-508x3fi6jq] {
    background: var(--surface-card);
    color: var(--text-heading);
    padding: var(--espacio-4) var(--espacio-5);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    border-bottom: 1px solid var(--borde-sutil);
    position: relative;
    overflow: hidden;
}

.info-card-header[b-508x3fi6jq]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--menu-activo-borde);
}

.info-card-header i[b-508x3fi6jq] {
    font-size: var(--icono-md);
}

.info-card-header h4[b-508x3fi6jq] {
    margin: 0;
    font-size: var(--texto-md);
    font-weight: var(--peso-semibold);
}

.info-card-body[b-508x3fi6jq] {
    padding: var(--espacio-5);
}

.info-row[b-508x3fi6jq] {
    display: flex;
    justify-content: space-between;
    padding: var(--espacio-3) 0;
    border-bottom: 1px solid var(--borde-sutil);
}

.info-row:last-child[b-508x3fi6jq] {
    border-bottom: none;
}

.info-label[b-508x3fi6jq] {
    font-weight: var(--peso-semibold);
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-right: var(--espacio-5);
}

.info-value[b-508x3fi6jq] {
    color: var(--text-body);
    text-align: right;
    word-break: break-word;
}

/* ========================================
   SECCIÓN DE BENEFICIARIOS
   ======================================== */
.beneficiarios-section[b-508x3fi6jq] {
    background: var(--surface-card);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    padding: var(--espacio-5);
    margin-bottom: var(--espacio-8);
}

.beneficiarios-header[b-508x3fi6jq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--espacio-5);
    padding-bottom: var(--espacio-4);
    border-bottom: 2px solid var(--borde-sutil);
}

.beneficiarios-header h4[b-508x3fi6jq] {
    margin: 0;
    color: var(--text-heading);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
}

.beneficiarios-header h4 i[b-508x3fi6jq] {
    font-size: var(--icono-md);
    color: var(--primary-color);
}

/* ========================================
   TABLA DE BENEFICIARIOS
   ======================================== */
.beneficiarios-table[b-508x3fi6jq] {
    overflow-x: auto;
}

.tabla-beneficiarios[b-508x3fi6jq] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--texto-sm);
}

.tabla-beneficiarios thead[b-508x3fi6jq] {
    background: var(--primary-gradient);
    color: var(--text-inverso);
}

.tabla-beneficiarios th[b-508x3fi6jq] {
    padding: var(--espacio-3);
    text-align: left;
    font-weight: var(--peso-semibold);
    font-size: var(--texto-sm);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    white-space: nowrap;
}

.tabla-beneficiarios th:first-child[b-508x3fi6jq] {
    border-radius: var(--radio-8) 0 0 0;
}

.tabla-beneficiarios th:last-child[b-508x3fi6jq] {
    border-radius: 0 var(--radio-8) 0 0;
}

.tabla-beneficiarios tbody tr[b-508x3fi6jq] {
    border-bottom: 1px solid var(--borde-sutil);
    transition: var(--transition-fast);
}

.tabla-beneficiarios tbody tr:hover[b-508x3fi6jq] {
    background-color: var(--surface-sunken);
}

.tabla-beneficiarios tbody tr:last-child[b-508x3fi6jq] {
    border-bottom: none;
}

.tabla-beneficiarios td[b-508x3fi6jq] {
    padding: var(--espacio-3);
    vertical-align: middle;
}

/* ========================================
   ESTADO VACÍO
   ======================================== */
.empty-state[b-508x3fi6jq] {
    text-align: center;
    padding: var(--espacio-10) var(--espacio-5);
    color: var(--text-secondary);
}

.empty-state i[b-508x3fi6jq] {
    font-size: var(--icono-2xl);
    margin-bottom: var(--espacio-5);
    opacity: 0.5;
}

.empty-state p[b-508x3fi6jq] {
    font-size: var(--texto-md);
    margin-bottom: var(--espacio-5);
}

/* ========================================
   BOTONES DE ACCIÓN EN TABLA
   ======================================== */
.acciones-grupo[b-508x3fi6jq] {
    display: flex;
    gap: var(--espacio-2);
}

.btn-icon[b-508x3fi6jq] {
    padding: var(--espacio-1) var(--espacio-3);
    border: none;
    border-radius: var(--radio-6);
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: var(--texto-sm);
}

.btn-icon:hover[b-508x3fi6jq] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Íconos de acción de fila — misma excepción acotada que
   Censo.razor.css: color contenido (escalón 900, no el ancla) para
   acelerar el reconocimiento con varias acciones compactas en la
   misma fila. amarillo-cgt-900 da 5.40:1, muy por encima del mínimo
   3:1 no-texto. Ver §3.3 de SISTEMA-DISENO.md. Eliminar sigue en
   outline destructivo, sin cambios. */
.btn-icon.btn-editar[b-508x3fi6jq] {
    background-color: transparent;
    border: 1px solid var(--amarillo-cgt-900);
    color: var(--amarillo-cgt-900);
}

.btn-icon.btn-editar:hover[b-508x3fi6jq] {
    background-color: var(--color-accion-secundaria-fondo);
    border-color: var(--gris-700);
    color: var(--gris-900);
}

.btn-icon.btn-editar:focus-visible[b-508x3fi6jq] {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-foco-anillo);
}

.btn-icon.btn-eliminar[b-508x3fi6jq] {
    background-color: transparent;
    color: var(--color-destructivo);
    border: 1px solid var(--color-destructivo);
}

.btn-icon.btn-eliminar:hover[b-508x3fi6jq] {
    background-color: var(--color-destructivo-fondo);
}

.btn-icon.btn-eliminar:focus-visible[b-508x3fi6jq] {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-foco-anillo);
}

/* ========================================
   LOADING
   ======================================== */
.spinner-container[b-508x3fi6jq] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--espacio-12);
}

.spinner[b-508x3fi6jq] {
    border: 4px solid var(--gris-100);
    border-top: 4px solid var(--primary-color);
    border-radius: var(--radio-full);
    width: 50px;
    height: 50px;
    animation: spin-b-508x3fi6jq 1s linear infinite;
}

@keyframes spin-b-508x3fi6jq {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1024px) {
    .info-cards[b-508x3fi6jq] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .detalles-container[b-508x3fi6jq] {
        padding: var(--espacio-4);
    }

    .header-content[b-508x3fi6jq] {
        flex-direction: column;
        gap: var(--espacio-4);
    }

    .header-actions[b-508x3fi6jq] {
        width: 100%;
        justify-content: flex-start;
    }

    .info-cards[b-508x3fi6jq] {
        grid-template-columns: 1fr;
    }

    .foto-perfil[b-508x3fi6jq],
    .foto-placeholder-perfil[b-508x3fi6jq] {
        width: 150px;
        height: 150px;
    }

    .foto-placeholder-perfil[b-508x3fi6jq] {
        font-size: var(--icono-2xl);
    }

    .nombre-completo[b-508x3fi6jq] {
        font-size: var(--texto-xl);
    }

    .info-row[b-508x3fi6jq] {
        flex-direction: column;
        gap: var(--espacio-1);
    }

    .info-value[b-508x3fi6jq] {
        text-align: left;
    }

    .beneficiarios-header[b-508x3fi6jq] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--espacio-4);
    }
}

@media (max-width: 576px) {
    .btn-action[b-508x3fi6jq] {
        padding: var(--espacio-2) var(--espacio-4);
        font-size: var(--texto-sm);
    }

    .foto-perfil[b-508x3fi6jq],
    .foto-placeholder-perfil[b-508x3fi6jq] {
        width: 120px;
        height: 120px;
    }

    .foto-placeholder-perfil[b-508x3fi6jq] {
        font-size: var(--icono-xl);
    }

    .nombre-completo[b-508x3fi6jq] {
        font-size: var(--texto-lg);
    }

    .documento[b-508x3fi6jq] {
        font-size: var(--texto-sm);
    }

    .tabla-beneficiarios[b-508x3fi6jq] {
        font-size: var(--texto-xs);
    }

    .tabla-beneficiarios th[b-508x3fi6jq],
    .tabla-beneficiarios td[b-508x3fi6jq] {
        padding: var(--espacio-2);
    }
}
/* /Components/Pages/Comunicaciones/Descargas.razor.rz.scp.css */
/* ─── Upload overlay ─────────────────────────────────────────────────────── */
.desc-upload-overlay[b-3sqxp63yh7] {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay-carga);
    background: var(--overlay-oscuro-55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--espacio-6);
    animation: descOverlayIn-b-3sqxp63yh7 .2s ease;
}

.desc-upload-dialog[b-3sqxp63yh7] {
    position: relative;
    background: var(--surface-card);
    border-radius: var(--radio-16);
    width: 100%;
    max-width: 520px;
    box-shadow: var(--shadow-xl);
    animation: descDialogIn-b-3sqxp63yh7 .25s cubic-bezier(.34,1.2,.64,1) both;
    overflow: hidden;
}

/* Header — superficie carbón con acento de marca, mismo criterio que
   .ge-modal-header (Eventos) — no degradado sólido púrpura. */
.desc-upload-header[b-3sqxp63yh7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem var(--espacio-6);
    background: var(--surface-card);
    color: var(--text-heading);
    border-bottom: 1px solid var(--borde-sutil);
    position: relative;
}

.desc-upload-header[b-3sqxp63yh7]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--menu-activo-borde);
}

.desc-upload-title[b-3sqxp63yh7] {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.05rem;
    font-weight: var(--peso-bold);
}

    .desc-upload-title i[b-3sqxp63yh7] {
        font-size: 1.2rem;
        opacity: .9;
    }

.desc-upload-close[b-3sqxp63yh7] {
    width: 1.9rem;
    height: 1.9rem;
    border: none;
    border-radius: var(--radio-full);
    background: var(--color-accion-secundaria-fondo);
    color: var(--text-secondary);
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, transform .15s;
    flex-shrink: 0;
}

    .desc-upload-close:hover[b-3sqxp63yh7] {
        background: var(--color-accion-secundaria-fondo-hover);
        transform: scale(1.1);
    }

/* Body ──────────────────────────────────────────────────────────────────── */
.desc-upload-body[b-3sqxp63yh7] {
    padding: var(--espacio-6);
}

/* Footer ────────────────────────────────────────────────────────────────── */
.desc-upload-footer[b-3sqxp63yh7] {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: var(--espacio-6);
    padding-top: var(--espacio-4);
    border-top: 1px solid var(--borde-sutil);
}

/* Animations ────────────────────────────────────────────────────────────── */
@keyframes descOverlayIn-b-3sqxp63yh7 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes descDialogIn-b-3sqxp63yh7 {
    from { opacity: 0; transform: scale(.95) translateY(16px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Mobile ────────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .desc-upload-overlay[b-3sqxp63yh7] {
        align-items: flex-end;
        padding: 0;
    }

    .desc-upload-dialog[b-3sqxp63yh7] {
        border-radius: 18px 18px 0 0;
        max-width: 100%;
    }
}

/* ─── Author org label ────────────────────────────────────────────────────── */

.dl-author-org[b-3sqxp63yh7] {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-weight: var(--peso-medio);
    opacity: 0.85;
    margin-top: 0.1rem;
}
/* /Components/Pages/Comunicaciones/Publicaciones.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   PUBLICACIONES — Scoped styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Page Header ─────────────────────────────────────────────────────────── */

.page-header[b-428vrybl76] {
    padding: var(--espacio-6) var(--espacio-6) var(--espacio-4);
}

.header-content[b-428vrybl76] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--espacio-4);
}

.header-text h1[b-428vrybl76] {
    font-size: 1.6rem;
    font-weight: var(--peso-bold);
    margin-bottom: var(--espacio-1);
    color: var(--text-heading);
}

.header-text .subtitle[b-428vrybl76] {
    color: var(--text-secondary);
    margin: 0;
    font-size: var(--texto-sm);
}

.content-container[b-428vrybl76] {
    padding: 0 var(--espacio-6) var(--espacio-8);
}

/* ─── Filter Bar ──────────────────────────────────────────────────────────── */
/* .btn-primary / .btn-outline-secondary de esta barra ya heredan del
   global (carbón sólido / outline gris) — sin override local de marca. */

.content-container > .card[b-428vrybl76] {
    border-radius: var(--radio-12) !important;
    border: 1px solid var(--borde-sutil) !important;
    background: var(--surface-card) !important;
}

/* ─── Section Headers ─────────────────────────────────────────────────────── */

h6.text-muted.small.fw-semibold[b-428vrybl76] {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    font-size: 0.72rem !important;
    letter-spacing: 1px;
    color: var(--text-muted) !important;
}

h6.text-muted.small.fw-semibold[b-428vrybl76]::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 2px;
    background: var(--color-accion-primaria);
    border-radius: 2px;
}

/* ─── Timeline Feed ───────────────────────────────────────────────────────── */

.pub-feed[b-428vrybl76] {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
    max-width: 900px;
}

/* Contador: badge de conteo decorativo, sin estado — misma excepción
   sólida que .badge-primary (§3.1 SISTEMA-DISENO.md). */
.pub-count-badge[b-428vrybl76] {
    background: var(--color-accion-primaria);
    color: var(--text-inverso);
    border-radius: var(--radio-20);
    padding: 0.1rem 0.55rem;
    font-size: 0.7rem;
    font-weight: var(--peso-bold);
}

/* ─── Post Card ───────────────────────────────────────────────────────────── */

.pub-card[b-428vrybl76] {
    background: var(--surface-card);
    border-radius: var(--radio-16);
    border: 1px solid var(--borde-sutil);
    box-shadow: var(--shadow-sm);
    display: flex;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.15s;
    animation: pubSlideIn-b-428vrybl76 0.28s ease both;
}

.pub-card:hover[b-428vrybl76] {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* Destacada: acento de marca en vez de degradado púrpura sólido, mismo
   criterio de franja lateral que el resto del sistema. */
.pub-featured[b-428vrybl76] {
    border-left: 4px solid var(--color-accion-primaria);
    background: var(--surface-card);
}

.pub-expired[b-428vrybl76] {
    opacity: 0.6;
}

@keyframes pubSlideIn-b-428vrybl76 {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Thumbnail ───────────────────────────────────────────────────────────── */

.pub-thumb[b-428vrybl76] {
    width: 190px;
    min-width: 190px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.pub-thumb-img[b-428vrybl76] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.pub-card:hover .pub-thumb-img[b-428vrybl76] {
    transform: scale(1.05);
}

.pub-thumb-placeholder[b-428vrybl76] {
    width: 100%;
    height: 100%;
    min-height: 140px;
    background: var(--primary-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--overlay-claro-45);
    font-size: 2.8rem;
}

/* Destacada: ícono-indicador en círculo, no badge de texto — mismo
   criterio sólido que edu-completado-badge (Educación), en ámbar CGT en
   vez del dorado arbitrario original. */
.pub-featured-badge[b-428vrybl76] {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--amarillo-cgt-600);
    color: var(--gris-900);
    border-radius: var(--radio-full);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    box-shadow: var(--shadow-sm);
}

/* ─── Card Body ───────────────────────────────────────────────────────────── */

.pub-body[b-428vrybl76] {
    flex: 1;
    padding: var(--espacio-4) 1.15rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pub-header[b-428vrybl76] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.45rem;
    flex-wrap: wrap;
}

/* Categoría: taxonomía plana sin orden (Noticias, Convocatorias,
   Circulares...) — mismo criterio que .edu-cat-badge en Educación: ni
   jerarquía (no hay "más autoridad" entre categorías) ni color CGT (no
   es un estado). */
.pub-category-badge[b-428vrybl76] {
    font-size: 0.67rem;
    font-weight: var(--peso-bold);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 0.18rem var(--espacio-3);
    border-radius: var(--radio-20);
    background: var(--color-accion-secundaria-fondo);
    color: var(--text-secondary);
    white-space: nowrap;
}

.pub-date[b-428vrybl76] {
    font-size: 0.77rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.pub-title[b-428vrybl76] {
    font-size: 0.98rem;
    font-weight: var(--peso-bold);
    color: var(--text-heading);
    margin: 0 0 0.3rem 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pub-featured .pub-title[b-428vrybl76] {
    font-size: 1.05rem;
}

.pub-excerpt[b-428vrybl76] {
    font-size: 0.84rem;
    color: var(--text-secondary);
    margin: 0 0 0.6rem 0;
    line-height: var(--interlineado-normal);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */

.pub-footer[b-428vrybl76] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2);
    margin-top: auto;
    padding-top: 0.55rem;
    border-top: 1px solid var(--borde-sutil);
    flex-wrap: wrap;
}

.pub-author[b-428vrybl76] {
    font-size: 0.77rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.pub-author-org[b-428vrybl76] {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-weight: var(--peso-medio);
    opacity: 0.85;
}

.pub-actions[b-428vrybl76] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

/* ─── Heart Button ────────────────────────────────────────────────────────── */
/* Mismo criterio que .ev-btn-heart (Eventos): "me gusta" usa rojo como
   convención de corazón, no como estado destructivo. */

.btn-heart[b-428vrybl76] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: 1.5px solid var(--borde-sutil);
    border-radius: var(--radio-20);
    padding: 0.22rem 0.65rem;
    font-size: 0.82rem;
    font-weight: var(--peso-semibold);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}

.btn-heart:hover[b-428vrybl76] {
    background: var(--color-destructivo-fondo);
    border-color: var(--color-destructivo);
    color: var(--color-destructivo);
    transform: scale(1.06);
}

.btn-heart.liked[b-428vrybl76] {
    background: var(--color-destructivo-fondo);
    border-color: var(--color-destructivo);
    color: var(--color-destructivo);
}

/* ─── Read Button ─────────────────────────────────────────────────────────── */

.btn-read[b-428vrybl76] {
    background: var(--color-accion-primaria) !important;
    border: none !important;
    color: var(--text-inverso) !important;
    border-radius: var(--radio-8) !important;
    padding: 0.22rem 0.75rem !important;
    font-size: 0.8rem;
    font-weight: var(--peso-semibold);
    transition: background 0.15s, transform 0.1s;
}

.btn-read:hover[b-428vrybl76] {
    background: var(--color-accion-primaria-hover) !important;
    transform: translateY(-1px);
}

/* ─── Icon Buttons ────────────────────────────────────────────────────────── */

.btn-icon[b-428vrybl76] {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: var(--radio-8) !important;
    font-size: 0.78rem;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .pub-thumb[b-428vrybl76] {
        width: 110px;
        min-width: 110px;
    }

    .pub-thumb-placeholder[b-428vrybl76] {
        font-size: 2rem;
    }

    .pub-author[b-428vrybl76] {
        display: none;
    }
}

/* ─── Bootstrap Modal — superficie carbón corregida ──────────────────────── */

.modal-content[b-428vrybl76] {
    background-color: var(--surface-card) !important;
    border: none !important;
    border-radius: var(--radio-16) !important;
    box-shadow: var(--shadow-xl) !important;
    overflow: hidden;
}

/* ─── Modal Header ────────────────────────────────────────────────────────── */

.modal-header[b-428vrybl76] {
    background: var(--surface-card) !important;
    border-bottom: 1px solid var(--borde-sutil) !important;
    padding: 1.25rem var(--espacio-6) !important;
}

.modal-title[b-428vrybl76],
.modal-title span[b-428vrybl76] {
    color: var(--text-heading) !important;
    font-size: 1.1rem;
    font-weight: var(--peso-bold);
    letter-spacing: 0.3px;
}

/* ─── Modal Body ──────────────────────────────────────────────────────────── */

.modal-body[b-428vrybl76] {
    background-color: var(--surface-card) !important;
    padding: 1.75rem !important;
    overflow-y: auto;
    max-height: calc(100vh - 11rem);
}

/* ─── Form — Section Dividers ─────────────────────────────────────────────── */

.modal-body .row.g-3[b-428vrybl76] {
    row-gap: 1.1rem !important;
}

/* ─── Form Labels ─────────────────────────────────────────────────────────── */

.modal-body .form-label[b-428vrybl76] {
    display: block;
    font-size: 0.79rem;
    font-weight: var(--peso-bold);
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.modal-body .form-label small[b-428vrybl76] {
    font-weight: var(--peso-normal);
    font-size: 0.76rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-muted);
}

/* ─── Form Controls ───────────────────────────────────────────────────────── */

.modal-body .form-control[b-428vrybl76],
.modal-body .form-select[b-428vrybl76] {
    background-color: var(--surface-card) !important;
    border: 1.5px solid var(--borde-input) !important;
    border-radius: var(--radio-8) !important;
    font-size: 0.9rem;
    color: var(--text-heading) !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.modal-body .form-control:focus[b-428vrybl76],
.modal-body .form-select:focus[b-428vrybl76] {
    border-color: var(--borde-input-foco) !important;
    box-shadow: 0 0 0 3px var(--color-foco-anillo) !important;
    background-color: var(--surface-card) !important;
    outline: none;
}

.modal-body .form-control.is-invalid[b-428vrybl76],
.modal-body .form-control:invalid[b-428vrybl76] {
    border-color: var(--color-destructivo) !important;
    box-shadow: 0 0 0 3px var(--color-destructivo-fondo) !important;
}

.modal-body textarea.form-control[b-428vrybl76] {
    resize: vertical;
    min-height: 72px;
}

/* ─── File Input ──────────────────────────────────────────────────────────── */

.modal-body input[type="file"].form-control[b-428vrybl76] {
    padding: 0.45rem 0.85rem;
    cursor: pointer;
    color: var(--text-secondary);
}

.modal-body input[type="file"].form-control[b-428vrybl76]::file-selector-button {
    background: var(--color-accion-primaria);
    color: var(--text-inverso);
    border: none;
    border-radius: var(--radio-6);
    padding: 0.3rem 0.9rem;
    font-size: 0.82rem;
    font-weight: var(--peso-semibold);
    margin-right: 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
}

.modal-body input[type="file"].form-control[b-428vrybl76]::file-selector-button:hover {
    background: var(--color-accion-primaria-hover);
}

/* ─── Invalid feedback ────────────────────────────────────────────────────── */

.modal-body .invalid-feedback[b-428vrybl76] {
    font-size: 0.82rem;
    color: var(--color-destructivo);
}

/* ─── Quill Editor (descendant selectors for JS-generated DOM) ────────────── */

#quill-pub-editor .ql-toolbar.ql-snow[b-428vrybl76] {
    background: var(--surface-sunken) !important;
    border: 1.5px solid var(--borde-input) !important;
    border-bottom: 1px solid var(--borde-sutil) !important;
    border-radius: var(--radio-8) var(--radio-8) 0 0;
    padding: 8px 10px;
}

#quill-pub-editor .ql-toolbar.ql-snow .ql-formats[b-428vrybl76] {
    margin-right: 10px;
}

#quill-pub-editor .ql-toolbar.ql-snow button[b-428vrybl76],
#quill-pub-editor .ql-toolbar.ql-snow .ql-picker-label[b-428vrybl76] {
    color: var(--text-secondary);
    border-radius: var(--radio-4);
    transition: background 0.15s, color 0.15s;
}

#quill-pub-editor .ql-toolbar.ql-snow button:hover[b-428vrybl76],
#quill-pub-editor .ql-toolbar.ql-snow .ql-picker-label:hover[b-428vrybl76] {
    background: color-mix(in srgb, var(--color-accion-primaria) 8%, transparent);
    color: var(--color-accion-primaria);
}

#quill-pub-editor .ql-toolbar.ql-snow button.ql-active[b-428vrybl76],
#quill-pub-editor .ql-toolbar.ql-snow .ql-picker-label.ql-active[b-428vrybl76] {
    color: var(--color-accion-primaria);
}

#quill-pub-editor .ql-toolbar.ql-snow .ql-stroke[b-428vrybl76] {
    stroke: var(--text-secondary);
}

#quill-pub-editor .ql-toolbar.ql-snow button:hover .ql-stroke[b-428vrybl76],
#quill-pub-editor .ql-toolbar.ql-snow button.ql-active .ql-stroke[b-428vrybl76] {
    stroke: var(--color-accion-primaria);
}

#quill-pub-editor .ql-toolbar.ql-snow .ql-fill[b-428vrybl76] {
    fill: var(--text-secondary);
}

#quill-pub-editor .ql-toolbar.ql-snow button:hover .ql-fill[b-428vrybl76],
#quill-pub-editor .ql-toolbar.ql-snow button.ql-active .ql-fill[b-428vrybl76] {
    fill: var(--color-accion-primaria);
}

#quill-pub-editor .ql-container.ql-snow[b-428vrybl76] {
    background-color: var(--surface-card) !important;
    border: 1.5px solid var(--borde-input) !important;
    border-top: none !important;
    border-radius: 0 0 var(--radio-8) var(--radio-8);
    font-size: 0.92rem;
    font-family: var(--fuente-base);
}

#quill-pub-editor .ql-editor[b-428vrybl76] {
    min-height: 260px;
    color: var(--text-heading);
    background-color: var(--surface-card) !important;
    line-height: 1.65;
    padding: 1rem 1.1rem;
}

#quill-pub-editor .ql-editor.ql-blank[b-428vrybl76]::before {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.9rem;
}

#quill-pub-editor .ql-editor p[b-428vrybl76],
#quill-pub-editor .ql-editor h1[b-428vrybl76],
#quill-pub-editor .ql-editor h2[b-428vrybl76],
#quill-pub-editor .ql-editor h3[b-428vrybl76] {
    margin-bottom: 0.6rem;
}

#quill-pub-editor .ql-editor img[b-428vrybl76] {
    max-width: 100%;
    border-radius: var(--radio-6);
    margin: 0.5rem 0;
}

#quill-pub-editor .ql-snow .ql-picker-options[b-428vrybl76] {
    background-color: var(--surface-card) !important;
    border: 1.5px solid var(--borde-input) !important;
    border-radius: var(--radio-8);
    box-shadow: var(--shadow-md);
}

/* ─── Checkbox — Destacado ────────────────────────────────────────────────── */

.modal-body .form-check[b-428vrybl76] {
    padding: 0.8rem 1rem 0.8rem 2.4rem;
    background: var(--surface-sunken);
    border-radius: var(--radio-10);
    border: 1.5px solid var(--borde-sutil);
}

.modal-body .form-check-input[b-428vrybl76] {
    width: 17px;
    height: 17px;
    accent-color: var(--color-accion-primaria);
    cursor: pointer;
    margin-top: 0.15rem;
}

.modal-body .form-check-input:focus[b-428vrybl76] {
    box-shadow: 0 0 0 3px var(--color-foco-anillo);
    border-color: var(--borde-input-foco) !important;
}

.modal-body .form-check-label[b-428vrybl76] {
    font-size: 0.9rem;
    font-weight: var(--peso-semibold);
    color: var(--text-secondary);
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
}

/* ─── Alert de error ──────────────────────────────────────────────────────── */

.modal-body .alert-danger[b-428vrybl76] {
    border-radius: var(--radio-10);
    border: 1.5px solid var(--rojo-cgt-100);
    background: var(--color-destructivo-fondo) !important;
    color: var(--color-destructivo-texto);
    font-size: 0.88rem;
    padding: 0.75rem 1rem;
}

/* ─── Action Buttons (bottom of form) ────────────────────────────────────── */

.modal-body .btn-secondary[b-428vrybl76] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 1.2rem;
    border: 1.5px solid var(--borde-input) !important;
    border-radius: var(--radio-10);
    background: var(--surface-card) !important;
    color: var(--text-secondary) !important;
    font-weight: var(--peso-semibold);
    font-size: 0.88rem;
    transition: background 0.15s, border-color 0.15s;
}

.modal-body .btn-secondary:hover[b-428vrybl76] {
    background: var(--color-accion-secundaria-fondo) !important;
    border-color: var(--borde-fuerte) !important;
    color: var(--text-heading) !important;
}

.modal-body .btn-primary[b-428vrybl76] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 1.4rem;
    border: none !important;
    border-radius: var(--radio-10);
    background: var(--color-accion-primaria) !important;
    color: var(--text-inverso) !important;
    font-weight: var(--peso-bold);
    font-size: 0.88rem;
    box-shadow: var(--shadow-sm);
    transition: background 0.2s, transform 0.15s, box-shadow 0.15s;
}

.modal-body .btn-primary:hover:not(:disabled)[b-428vrybl76] {
    background: var(--color-accion-primaria-hover) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: var(--text-inverso) !important;
}

.modal-body .btn-primary:disabled[b-428vrybl76] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    background: var(--color-accion-primaria) !important;
}

/* ─── View Mode — Publication HTML Content ────────────────────────────────── */

.pub-content[b-428vrybl76] {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--text-heading);
}

.pub-content p[b-428vrybl76] {
    margin-bottom: 0.9rem;
}

.pub-content h1[b-428vrybl76],
.pub-content h2[b-428vrybl76],
.pub-content h3[b-428vrybl76] {
    color: var(--text-heading);
    font-weight: var(--peso-bold);
    margin: 1.2rem 0 0.6rem;
}

.pub-content h1[b-428vrybl76] { font-size: 1.45rem; }
.pub-content h2[b-428vrybl76] { font-size: 1.2rem; }
.pub-content h3[b-428vrybl76] { font-size: 1.05rem; }

.pub-content img[b-428vrybl76] {
    max-width: 100%;
    border-radius: var(--radio-8);
    margin: 0.75rem 0;
    box-shadow: var(--shadow-sm);
}

.pub-content iframe[b-428vrybl76] {
    max-width: 100%;
    border-radius: var(--radio-8);
    margin: 0.75rem 0;
    aspect-ratio: 16/9;
}

.pub-content blockquote[b-428vrybl76] {
    border-left: 4px solid var(--color-accion-primaria);
    background: var(--surface-sunken);
    padding: 0.75rem 1.1rem;
    border-radius: 0 var(--radio-8) var(--radio-8) 0;
    margin: 1rem 0;
    color: var(--text-secondary);
    font-style: italic;
}

.pub-content pre[b-428vrybl76] {
    background: var(--surface-sunken);
    border-radius: var(--radio-8);
    padding: 1rem;
    font-size: 0.85rem;
    color: var(--text-heading);
    overflow-x: auto;
}

.pub-content ul[b-428vrybl76],
.pub-content ol[b-428vrybl76] {
    padding-left: 1.5rem;
    margin-bottom: 0.9rem;
}

.pub-content li[b-428vrybl76] {
    margin-bottom: 0.3rem;
}

.pub-content a[b-428vrybl76] {
    color: var(--text-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pub-content a:hover[b-428vrybl76] {
    color: var(--text-link-hover);
}

/* ─── Título clicable en la tarjeta ──────────────────────────────────────── */
.pub-title-link[b-428vrybl76] {
    cursor: pointer;
    transition: color .18s;
}

.pub-title-link:hover[b-428vrybl76] {
    color: var(--color-accion-primaria);
}

/* ─── Lightbox de lectura ────────────────────────────────────────────────── */
.pub-read-overlay[b-428vrybl76] {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay-carga);
    background: var(--overlay-oscuro-55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--espacio-6);
    animation: overlayFadeIn-b-428vrybl76 .2s ease;
}

.pub-read-dialog[b-428vrybl76] {
    position: relative;
    background: var(--surface-card);
    border-radius: var(--radio-20);
    width: 100%;
    max-width: 780px;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    animation: readModalIn-b-428vrybl76 .25s cubic-bezier(.34,1.2,.64,1) both;
    scrollbar-width: thin;
    scrollbar-color: var(--gris-300) transparent;
}

    .pub-read-dialog[b-428vrybl76]::-webkit-scrollbar {
        width: 5px;
    }

    .pub-read-dialog[b-428vrybl76]::-webkit-scrollbar-thumb {
        background: var(--gris-300);
        border-radius: 3px;
    }

/* Close button ─────────────────────────────────────────────────────────── */
.pub-read-close[b-428vrybl76] {
    position: absolute;
    top: .85rem;
    right: .85rem;
    z-index: 20;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: var(--radio-full);
    background: var(--overlay-claro-85);
    backdrop-filter: blur(6px);
    color: var(--text-secondary);
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, transform .15s;
    box-shadow: var(--shadow-sm);
}

    .pub-read-close:hover[b-428vrybl76] {
        background: var(--surface-card);
        transform: scale(1.1);
        color: var(--color-accion-primaria);
    }

/* Hero image ────────────────────────────────────────────────────────────── */
.pub-read-hero[b-428vrybl76] {
    width: 100%;
    height: 260px;
    overflow: hidden;
    border-radius: var(--radio-20) var(--radio-20) 0 0;
}

    .pub-read-hero img[b-428vrybl76] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.pub-read-hero-placeholder[b-428vrybl76] {
    width: 100%;
    height: 140px;
    border-radius: var(--radio-20) var(--radio-20) 0 0;
    background: var(--primary-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    color: var(--overlay-claro-70);
}

/* Body ──────────────────────────────────────────────────────────────────── */
.pub-read-body[b-428vrybl76] {
    padding: 1.75rem 2.25rem 1.5rem;
}

.pub-read-meta[b-428vrybl76] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: var(--espacio-4);
}

/* Mismo criterio que .pub-featured-badge: ícono-indicador sólido en
   ámbar CGT, no el dorado arbitrario original. */
.pub-read-dest-badge[b-428vrybl76] {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    background: var(--amarillo-cgt-600);
    color: var(--gris-900);
    font-size: .7rem;
    font-weight: var(--peso-bold);
    padding: .25rem .55rem;
    border-radius: var(--radio-20);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pub-read-title[b-428vrybl76] {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-heading);
    line-height: 1.25;
    margin-bottom: .75rem;
}

.pub-read-author[b-428vrybl76] {
    font-size: .88rem;
    color: var(--text-secondary);
    font-weight: var(--peso-medio);
    margin-bottom: var(--espacio-5);
}

.pub-read-summary[b-428vrybl76] {
    font-style: italic;
    color: var(--text-secondary);
    font-size: .95rem;
    line-height: 1.6;
    border-left: 3px solid var(--color-accion-primaria);
    padding-left: .9rem;
    margin-bottom: var(--espacio-6);
    background: var(--surface-sunken);
    border-radius: 0 var(--radio-8) var(--radio-8) 0;
    padding: .65rem .9rem;
}

/* Rich content ──────────────────────────────────────────────────────────── */
.pub-read-content[b-428vrybl76] {
    font-size: .97rem;
    color: var(--text-heading);
    line-height: 1.8;
    border-top: 1px solid var(--borde-sutil);
    padding-top: var(--espacio-5);
    margin-bottom: var(--espacio-6);
}

    .pub-read-content p[b-428vrybl76] {
        margin-bottom: 1em;
    }

    .pub-read-content h1[b-428vrybl76],
    .pub-read-content h2[b-428vrybl76],
    .pub-read-content h3[b-428vrybl76] {
        color: var(--text-heading);
        font-weight: var(--peso-bold);
        margin-top: 1.4em;
        margin-bottom: .5em;
    }

    .pub-read-content blockquote[b-428vrybl76] {
        border-left: 3px solid var(--color-accion-primaria);
        margin-left: 0;
        padding-left: 1rem;
        color: var(--text-secondary);
        font-style: italic;
    }

    .pub-read-content img[b-428vrybl76] {
        max-width: 100%;
        border-radius: var(--radio-8);
        margin: .5rem 0;
    }

    .pub-read-content a[b-428vrybl76] {
        color: var(--text-link);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

        .pub-read-content a:hover[b-428vrybl76] {
            color: var(--text-link-hover);
        }

/* Footer ────────────────────────────────────────────────────────────────── */
.pub-read-footer[b-428vrybl76] {
    display: flex;
    justify-content: flex-end;
    padding-top: .75rem;
    border-top: 1px solid var(--borde-sutil);
}

/* Animations ────────────────────────────────────────────────────────────── */
@keyframes overlayFadeIn-b-428vrybl76 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes readModalIn-b-428vrybl76 {
    from { opacity: 0; transform: scale(.95) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Mobile ─ bottom sheet ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .pub-read-overlay[b-428vrybl76] {
        align-items: flex-end;
        padding: 0;
    }

    .pub-read-dialog[b-428vrybl76] {
        border-radius: var(--radio-20) var(--radio-20) 0 0;
        max-height: 95vh;
        max-width: 100%;
    }

    .pub-read-hero[b-428vrybl76] {
        border-radius: var(--radio-20) var(--radio-20) 0 0;
        height: 180px;
    }

    .pub-read-hero-placeholder[b-428vrybl76] {
        border-radius: var(--radio-20) var(--radio-20) 0 0;
    }

    .pub-read-body[b-428vrybl76] {
        padding: 1.25rem 1.25rem 1rem;
    }

    .pub-read-title[b-428vrybl76] {
        font-size: 1.25rem;
    }
}
/* /Components/Pages/Directivas/CrearDirectiva.razor.rz.scp.css */
/* Crear Directiva — módulo organizacional
   Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md. */

.container[b-3v8ejf7f79] {
    max-width: 1200px;
    padding-top: var(--espacio-8);
}

h2[b-3v8ejf7f79] {
    color: var(--text-heading);
    font-weight: var(--peso-semibold);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-4);
}

h2 i[b-3v8ejf7f79] {
    color: var(--color-accion-primaria);
    font-size: var(--icono-xl);
}

.breadcrumb[b-3v8ejf7f79] {
    background-color: transparent;
    padding: 0;
    font-size: var(--texto-sm);
}

.breadcrumb-item a[b-3v8ejf7f79] {
    color: var(--color-accion-primaria);
    text-decoration: none;
}

.breadcrumb-item a:hover[b-3v8ejf7f79] {
    color: var(--color-accion-primaria-hover);
}

.card[b-3v8ejf7f79] {
    border: none;
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    background: var(--surface-card);
    margin-bottom: var(--espacio-8);
}

.card-body[b-3v8ejf7f79] {
    padding: var(--espacio-8);
}

.form-label[b-3v8ejf7f79] {
    font-weight: var(--peso-semibold);
    color: var(--text-secondary);
    font-size: var(--texto-sm);
}

.form-control[b-3v8ejf7f79],
.form-select[b-3v8ejf7f79],
textarea.form-control[b-3v8ejf7f79] {
    border: 1.5px solid var(--borde-input);
    border-radius: var(--radio-8);
    padding: var(--espacio-3) var(--espacio-4);
    transition: var(--transition-normal);
}

.form-control:focus[b-3v8ejf7f79],
.form-select:focus[b-3v8ejf7f79] {
    border-color: var(--borde-input-foco);
    box-shadow: 0 0 0 3px var(--color-foco-anillo);
}

.form-check-input[b-3v8ejf7f79] {
    width: 3rem;
    height: 1.5rem;
    cursor: pointer;
}

.form-check-input:checked[b-3v8ejf7f79] {
    background-color: var(--color-accion-primaria);
}

.btn-primary[b-3v8ejf7f79] {
    background: var(--color-accion-primaria);
    border: none;
    padding: var(--espacio-3) var(--espacio-6);
    border-radius: var(--radio-8);
}

.btn-primary:hover[b-3v8ejf7f79] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background: var(--color-accion-primaria-hover);
}

.btn-secondary[b-3v8ejf7f79] {
    background-color: var(--color-accion-secundaria-fondo);
    border: none;
    color: var(--color-accion-secundaria-texto);
}

.alert[b-3v8ejf7f79] {
    border: none;
    border-radius: var(--radio-10);
    padding: var(--espacio-4) var(--espacio-5);
}

@keyframes fadeIn-b-3v8ejf7f79 {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.card[b-3v8ejf7f79] { animation: fadeIn-b-3v8ejf7f79 0.3s ease; }
/* /Components/Pages/Directivas/Directivas.razor.rz.scp.css */
/* Gestión de Directivas — módulo organizacional
   Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md.
   Mismo caso que Usuarios.razor.css: sobrescribe clases globales ya
   migradas en app.css con el scope de Blazor — se retokeniza acá en
   vez de eliminarse para no cambiar la arquitectura de la página. */

/* Header de la página */
h2[b-as8uccqc0k] {
    color: var(--text-heading);
    font-weight: var(--peso-semibold);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-2);
}

h2 i[b-as8uccqc0k] {
    color: var(--color-accion-primaria);
    font-size: var(--icono-xl);
}

.text-muted[b-as8uccqc0k] {
    color: var(--text-muted) !important;
    font-size: var(--texto-sm);
}

/* Botones principales */
.btn-primary[b-as8uccqc0k] {
    background: var(--color-accion-primaria);
    border: none;
    padding: var(--espacio-3) var(--espacio-6);
    font-weight: var(--peso-medio);
    border-radius: var(--radio-8);
    box-shadow: none;
    transition: var(--transition-normal);
}

.btn-primary:hover[b-as8uccqc0k] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background: var(--color-accion-primaria-hover);
}

.btn-primary i[b-as8uccqc0k] {
    margin-right: var(--espacio-2);
}

/* Cards */
.card[b-as8uccqc0k] {
    border: none;
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
    background: var(--surface-card);
}

.card:hover[b-as8uccqc0k] {
    box-shadow: var(--shadow-md);
}

.card-body[b-as8uccqc0k] {
    padding: var(--espacio-6);
}

/* Formularios y controles */
.form-label[b-as8uccqc0k] {
    font-weight: var(--peso-medio);
    color: var(--text-secondary);
    margin-bottom: var(--espacio-2);
    font-size: var(--texto-sm);
}

.form-select[b-as8uccqc0k],
.form-control[b-as8uccqc0k] {
    border: 1.5px solid var(--borde-input);
    border-radius: var(--radio-8);
    padding: var(--espacio-3) var(--espacio-4);
    transition: var(--transition-normal);
    font-size: var(--texto-sm);
}

.form-select:focus[b-as8uccqc0k],
.form-control:focus[b-as8uccqc0k] {
    border-color: var(--borde-input-foco);
    box-shadow: 0 0 0 3px var(--color-foco-anillo);
}

/* Alertas */
.alert[b-as8uccqc0k] {
    border: none;
    border-radius: var(--radio-10);
    padding: var(--espacio-4) var(--espacio-5);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    box-shadow: var(--shadow-sm);
}

.alert i[b-as8uccqc0k] {
    font-size: var(--texto-lg);
}

.alert-success[b-as8uccqc0k] {
    background: var(--color-exito-fondo);
    color: var(--color-exito-texto);
}

.alert-danger[b-as8uccqc0k] {
    background: var(--color-destructivo-fondo);
    color: var(--color-destructivo-texto);
}

.btn-close[b-as8uccqc0k] {
    margin-left: auto;
}

/* Tabla */
.table-responsive[b-as8uccqc0k] {
    border-radius: var(--radio-8);
    overflow: hidden;
}

.table[b-as8uccqc0k] {
    margin-bottom: 0;
}

.table thead[b-as8uccqc0k] {
    background: var(--gris-50);
    color: var(--text-secondary);
}

.table thead th[b-as8uccqc0k] {
    border: none;
    padding: var(--espacio-4);
    font-weight: var(--peso-semibold);
    text-transform: uppercase;
    font-size: var(--texto-xs);
    letter-spacing: var(--interletra-amplia);
}

.table tbody tr[b-as8uccqc0k] {
    transition: var(--transition-fast);
    border-bottom: 1px solid var(--gris-100);
}

.table tbody tr:hover[b-as8uccqc0k] {
    background-color: var(--gris-50);
}

.table tbody td[b-as8uccqc0k] {
    padding: var(--espacio-4);
    vertical-align: middle;
    font-size: var(--texto-sm);
    color: var(--text-secondary);
}

.table tbody td strong[b-as8uccqc0k] {
    color: var(--text-heading);
    font-weight: var(--peso-semibold);
}

/* Badges — solo patrón pastel (§3.4). Usuarios/Afiliados son conteos
   sin carga valorativa (§7.4), ambos neutros. */
.badge[b-as8uccqc0k] {
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-6);
    font-weight: var(--peso-medio);
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
}

/* Grupo de botones de acción */
.btn-group-sm .btn[b-as8uccqc0k] {
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-6);
    transition: var(--transition-fast);
}

/* Ver/Editar — excepción acotada de color en íconos de acción de fila
   (§3.3, 3 acciones compactas por fila), mismos tokens que
   Censo.razor.css/Usuarios.razor.css/Sindicatos.razor.css. Reemplaza a
   btn-outline-primary/btn-outline-warning. */
.btn-ver[b-as8uccqc0k] {
    background-color: transparent;
    border-color: var(--azul-900);
    color: var(--azul-900);
}

.btn-editar[b-as8uccqc0k] {
    background-color: transparent;
    border-color: var(--amarillo-cgt-900);
    color: var(--amarillo-cgt-900);
}

.btn-ver:hover[b-as8uccqc0k],
.btn-editar:hover[b-as8uccqc0k] {
    background-color: var(--color-accion-secundaria-fondo);
    border-color: var(--gris-700);
    color: var(--gris-900);
    transform: translateY(-2px);
}

.btn-outline-secondary[b-as8uccqc0k] {
    color: var(--text-secondary);
    border-color: var(--gris-500);
}

.btn-outline-secondary:hover[b-as8uccqc0k] {
    background-color: var(--gris-500);
    border-color: var(--gris-500);
    color: var(--text-inverso);
    transform: translateY(-2px);
}

.btn-outline-success[b-as8uccqc0k] {
    color: var(--color-exito-texto);
    border-color: var(--color-exito);
}

.btn-outline-success:hover[b-as8uccqc0k] {
    background-color: var(--color-exito);
    border-color: var(--color-exito);
    transform: translateY(-2px);
}

/* Iconos en contacto */
.table tbody td .bi-telephone[b-as8uccqc0k],
.table tbody td .bi-envelope[b-as8uccqc0k] {
    color: var(--color-accion-primaria);
    margin-right: var(--espacio-1);
}

/* Spinner de carga */
.spinner-border[b-as8uccqc0k] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

.text-center.py-5[b-as8uccqc0k] {
    padding: var(--espacio-12) 0;
}

.text-center.py-5 i[b-as8uccqc0k] {
    opacity: 0.3;
}

/* Estado vacío */
.text-center.py-5 .bi-inbox[b-as8uccqc0k] {
    color: var(--gris-400);
    font-size: var(--icono-2xl);
}

/* Responsive */
@media (max-width: 768px) {
    .card-body[b-as8uccqc0k] {
        padding: var(--espacio-4);
    }

    .table thead th[b-as8uccqc0k],
    .table tbody td[b-as8uccqc0k] {
        padding: var(--espacio-3) var(--espacio-2);
        font-size: var(--texto-xs);
    }

    .btn-group-sm[b-as8uccqc0k] {
        flex-direction: column;
    }

    h2[b-as8uccqc0k] {
        font-size: var(--texto-lg);
    }
}

/* Animaciones */
@keyframes fadeIn-b-as8uccqc0k {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card[b-as8uccqc0k],
.alert[b-as8uccqc0k] {
    animation: fadeIn-b-as8uccqc0k 0.3s ease;
}
/* /Components/Pages/Directivas/EditarDirectiva.razor.rz.scp.css */
/* Editar Directiva — módulo organizacional
   Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md.
   Ícono en amarillo-cgt-900, mismo criterio que EditarUsuario.razor.css/
   EditarSindicato.razor.css. Foco de inputs con los tokens estándar en
   vez del ámbar original — ver comentario en EditarUsuario.razor.css. */

.container[b-qp57qdfwca] {
    max-width: 1200px;
    padding-top: var(--espacio-8);
}

/* El card-header de "Logo de la directiva" ya traía bg-white/border-0
   en el markup (fondo claro), pero heredaba color: var(--text-inverso)
   (blanco) del .card-header global de app.css — texto blanco sobre
   fondo blanco, invisible. Encontrado durante la pasada final de
   coherencia (hallazgo #5 de AJUSTES-PENDIENTES.md); se corrige el
   color, sin tocar el fondo/borde que ya estaban bien. */
[b-qp57qdfwca] .card-header {
    color: var(--text-heading);
}

h2[b-qp57qdfwca] {
    color: var(--text-heading);
    font-weight: var(--peso-semibold);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-4);
}

h2 i[b-qp57qdfwca] {
    color: var(--amarillo-cgt-900);
    font-size: var(--icono-xl);
}

.breadcrumb[b-qp57qdfwca] {
    background-color: transparent;
    padding: 0;
    font-size: var(--texto-sm);
}

.breadcrumb-item a[b-qp57qdfwca] {
    color: var(--color-accion-primaria);
    text-decoration: none;
}

.breadcrumb-item a:hover[b-qp57qdfwca] {
    color: var(--color-accion-primaria-hover);
}

.card[b-qp57qdfwca] {
    border: none;
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    background: var(--surface-card);
    margin-bottom: var(--espacio-8);
}

.card-body[b-qp57qdfwca] {
    padding: var(--espacio-8);
}

.form-label[b-qp57qdfwca] {
    font-weight: var(--peso-semibold);
    color: var(--text-secondary);
    font-size: var(--texto-sm);
}

.form-control[b-qp57qdfwca],
.form-select[b-qp57qdfwca],
textarea.form-control[b-qp57qdfwca] {
    border: 1.5px solid var(--borde-input);
    border-radius: var(--radio-8);
    padding: var(--espacio-3) var(--espacio-4);
    transition: var(--transition-normal);
}

.form-control:focus[b-qp57qdfwca],
.form-select:focus[b-qp57qdfwca] {
    border-color: var(--borde-input-foco);
    box-shadow: 0 0 0 3px var(--color-foco-anillo);
}

.form-check-input[b-qp57qdfwca] {
    width: 3rem;
    height: 1.5rem;
    cursor: pointer;
}

.form-check-input:checked[b-qp57qdfwca] {
    background-color: var(--color-accion-primaria);
}

.btn-primary[b-qp57qdfwca] {
    background: var(--color-accion-primaria);
    border: none;
    padding: var(--espacio-3) var(--espacio-6);
    border-radius: var(--radio-8);
}

.btn-primary:hover[b-qp57qdfwca] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background: var(--color-accion-primaria-hover);
}

.btn-secondary[b-qp57qdfwca] {
    background-color: var(--color-accion-secundaria-fondo);
    border: none;
    color: var(--color-accion-secundaria-texto);
}

.alert[b-qp57qdfwca] {
    border: none;
    border-radius: var(--radio-10);
    padding: var(--espacio-4) var(--espacio-5);
}

@keyframes fadeIn-b-qp57qdfwca {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.card[b-qp57qdfwca] { animation: fadeIn-b-qp57qdfwca 0.3s ease; }
/* /Components/Pages/Directivas/VerDirectiva.razor.rz.scp.css */
/* Ver Directiva — módulo organizacional
   Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md. */

.container[b-atfbpq537e] {
    max-width: 1200px;
    padding-top: var(--espacio-8);
}

h2[b-atfbpq537e] {
    color: var(--text-heading);
    font-weight: var(--peso-semibold);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-4);
}

h2 i[b-atfbpq537e] {
    color: var(--color-accion-primaria);
    font-size: var(--icono-xl);
}

.breadcrumb[b-atfbpq537e] {
    background-color: transparent;
    padding: 0;
    font-size: var(--texto-sm);
}

.breadcrumb-item a[b-atfbpq537e] {
    color: var(--color-accion-primaria);
    text-decoration: none;
}

.breadcrumb-item a:hover[b-atfbpq537e] {
    color: var(--color-accion-primaria-hover);
}

.card[b-atfbpq537e] {
    border: none;
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    background: var(--surface-card);
    margin-bottom: var(--espacio-6);
}

/* Card-header claro con acento de marca en el borde — antes degradado
   sólido con texto blanco (hallazgo #5 de AJUSTES-PENDIENTES.md).
   Mismo tratamiento que VerUsuario.razor.css/VerSindicato.razor.css. */
.card-header[b-atfbpq537e] {
    background: var(--surface-card) !important;
    color: var(--text-heading);
    border: none;
    border-bottom: 1px solid var(--borde-sutil);
    border-radius: var(--radio-12) var(--radio-12) 0 0 !important;
    padding: var(--espacio-4) var(--espacio-6);
    position: relative;
    overflow: hidden;
}

.card-header[b-atfbpq537e]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--menu-activo-borde);
}

.card-header h5[b-atfbpq537e] {
    color: var(--text-heading);
    font-weight: var(--peso-semibold);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

.card-body[b-atfbpq537e] {
    padding: var(--espacio-6);
}

.row.mb-3[b-atfbpq537e] {
    margin-bottom: var(--espacio-6) !important;
    padding-bottom: var(--espacio-4);
    border-bottom: 1px solid var(--gris-100);
}

.row.mb-3:last-child[b-atfbpq537e] {
    border-bottom: none;
}

.row strong[b-atfbpq537e] {
    color: var(--text-secondary);
    font-weight: var(--peso-semibold);
    display: block;
    margin-bottom: var(--espacio-1);
}

.badge[b-atfbpq537e] {
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-6);
    font-weight: var(--peso-medio);
    font-size: var(--texto-xs);
    text-transform: uppercase;
}

.btn-secondary[b-atfbpq537e] {
    background-color: var(--color-accion-secundaria-fondo);
    border: none;
    color: var(--color-accion-secundaria-texto);
}

.btn-secondary:hover[b-atfbpq537e] {
    background-color: var(--color-accion-secundaria-fondo-hover);
    transform: translateY(-2px);
}

.alert[b-atfbpq537e] {
    border: none;
    border-radius: var(--radio-10);
    padding: var(--espacio-4) var(--espacio-5);
}

@keyframes fadeIn-b-atfbpq537e {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.card[b-atfbpq537e] { animation: fadeIn-b-atfbpq537e 0.3s ease; }
/* /Components/Pages/Educacion/DetalleCurso.razor.rz.scp.css */
/* ─── Layout ────────────────────────────────────────────────────────────── */
.dc-container[b-jjr2oxf2qd] {
    max-width: 1300px;
    margin: 0 auto;
}

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.dc-hero[b-jjr2oxf2qd] {
    background-size: cover;
    background-position: center;
    background-color: var(--gris-950);
    border-radius: var(--radio-16);
    overflow: hidden;
    margin-bottom: var(--espacio-6);
}

.dc-hero-overlay[b-jjr2oxf2qd] {
    background: var(--overlay-oscuro-55);
    padding: var(--espacio-8) 2.5rem;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dc-back[b-jjr2oxf2qd] {
    color: var(--overlay-claro-75);
    text-decoration: none;
    font-size: var(--texto-sm);
    transition: color .2s;
}

    .dc-back:hover[b-jjr2oxf2qd] { color: var(--text-inverso); }

/* Categoría de curso: misma taxonomía plana sin orden que .edu-cat-badge
   en Educacion.razor.css — etiqueta neutra translúcida sobre la imagen. */
.dc-cat-badge[b-jjr2oxf2qd] {
    background: var(--overlay-claro-20);
    color: var(--text-inverso);
    padding: .2rem var(--espacio-3);
    border-radius: var(--radio-20);
    font-size: var(--texto-xs);
    margin-bottom: var(--espacio-3);
    display: inline-block;
}

.dc-hero-content h1[b-jjr2oxf2qd] {
    color: var(--text-inverso);
    font-size: 1.8rem;
    font-weight: var(--peso-bold);
    margin: var(--espacio-2) 0;
}

.dc-hero-content p[b-jjr2oxf2qd] {
    color: var(--overlay-claro-80);
    margin: 0 0 var(--espacio-4);
    max-width: 700px;
}

.dc-hero-meta[b-jjr2oxf2qd] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-5);
    color: var(--overlay-claro-75);
    font-size: var(--texto-sm);
}

/* ─── Body (main + sidebar) ─────────────────────────────────────────────── */
.dc-body[b-jjr2oxf2qd] {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--espacio-6);
    align-items: start;
    padding: 0 .5rem var(--espacio-8);
}

/* ─── Main ───────────────────────────────────────────────────────────────── */
.dc-main[b-jjr2oxf2qd] {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-5);
}

.dc-section[b-jjr2oxf2qd] { }

.dc-section-title[b-jjr2oxf2qd] {
    font-weight: var(--peso-semibold);
    color: var(--text-heading);
    margin-bottom: var(--espacio-3);
}

.dc-html-content[b-jjr2oxf2qd] {
    color: var(--text-secondary);
    font-size: .9rem;
    line-height: var(--interlineado-relajado);
}

/* ─── Progreso card ─────────────────────────────────────────────────────── */
.dc-progress-card[b-jjr2oxf2qd] {
    background: var(--surface-sunken);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-12);
    padding: var(--espacio-5) var(--espacio-6);
}

.dc-progress-pct[b-jjr2oxf2qd] {
    font-size: 1.1rem;
    font-weight: var(--peso-bold);
    color: var(--text-heading);
}

.dc-progress-wrap[b-jjr2oxf2qd] {
    height: 8px;
    background: var(--gris-200);
    border-radius: var(--radio-4);
    overflow: hidden;
}

/* Sin variante "completado" propia en este componente (no hay clase
   condicional en el .razor para 100%) — queda neutra, igual que la
   barra "en progreso" de Educacion.razor.css. El aviso de "curso
   completado" ya lo comunica el texto .dc-completado, no la barra. */
.dc-progress-bar[b-jjr2oxf2qd] {
    height: 100%;
    background: var(--color-neutro);
    border-radius: var(--radio-4);
    transition: width .5s ease;
}

.dc-completado[b-jjr2oxf2qd] {
    color: var(--color-exito-superficie);
    font-weight: var(--peso-semibold);
    font-size: .9rem;
    margin: 0;
}

.dc-btn-continuar[b-jjr2oxf2qd] {
    width: 100%;
    padding: 0.65rem;
    background: var(--color-accion-primaria);
    color: var(--text-inverso);
    border: none;
    border-radius: var(--radio-8);
    font-weight: var(--peso-semibold);
    cursor: pointer;
    transition: background .2s;
}

    .dc-btn-continuar:hover[b-jjr2oxf2qd] { background: var(--color-accion-primaria-hover); }

/* ─── Sidebar ────────────────────────────────────────────────────────────── */
.dc-sidebar[b-jjr2oxf2qd] {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-4);
}

.dc-enroll-card[b-jjr2oxf2qd] {
    background: var(--surface-card);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-12);
    padding: var(--espacio-5);
    box-shadow: var(--shadow-sm);
}

.dc-btn-inscribir[b-jjr2oxf2qd] {
    width: 100%;
    padding: var(--espacio-3);
    background: var(--color-accion-primaria);
    color: var(--text-inverso);
    border: none;
    border-radius: var(--radio-10);
    font-weight: var(--peso-semibold);
    font-size: var(--texto-base);
    cursor: pointer;
    transition: background .2s;
}

    .dc-btn-inscribir:hover[b-jjr2oxf2qd] { background: var(--color-accion-primaria-hover); }
    .dc-btn-inscribir:disabled[b-jjr2oxf2qd] { opacity: .7; cursor: default; }

.dc-error[b-jjr2oxf2qd] {
    color: var(--color-destructivo);
    font-size: var(--texto-xs);
    margin: 0;
}

/* ─── Módulos acordeón ──────────────────────────────────────────────────── */
.dc-modules[b-jjr2oxf2qd] {
    background: var(--surface-card);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-12);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.dc-module[b-jjr2oxf2qd] {
    border-bottom: 1px solid var(--borde-sutil);
}

    .dc-module:last-child[b-jjr2oxf2qd] { border-bottom: none; }

.dc-module-header[b-jjr2oxf2qd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .9rem var(--espacio-4);
    cursor: pointer;
    background: var(--surface-sunken);
    transition: background .15s;
}

    .dc-module-header:hover[b-jjr2oxf2qd] { background: var(--color-accion-secundaria-fondo); }

.dc-module-title[b-jjr2oxf2qd] {
    font-size: .88rem;
    font-weight: var(--peso-semibold);
    color: var(--text-heading);
    display: block;
}

.dc-module-meta[b-jjr2oxf2qd] {
    font-size: 0.72rem;
    color: var(--text-muted);
    display: block;
}

.dc-lessons[b-jjr2oxf2qd] {
    padding: .25rem 0;
}

.dc-lesson[b-jjr2oxf2qd] {
    display: flex;
    align-items: center;
    padding: .6rem var(--espacio-4) .6rem 1.5rem;
    font-size: .83rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .15s;
    gap: var(--espacio-2);
}

    .dc-lesson:hover[b-jjr2oxf2qd] { background: var(--surface-sunken); }

.dc-lesson-done[b-jjr2oxf2qd] {
    color: var(--color-exito-superficie);
}

.dc-lesson-title[b-jjr2oxf2qd] {
    flex: 1;
}

.dc-lesson-dur[b-jjr2oxf2qd] {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .dc-body[b-jjr2oxf2qd] {
        grid-template-columns: 1fr;
    }

    .dc-sidebar[b-jjr2oxf2qd] {
        position: static;
    }
}
/* /Components/Pages/Educacion/Educacion.razor.rz.scp.css */
/* ─── Layout ────────────────────────────────────────────────────────────── */
.edu-container[b-86t03qbbms] {
    padding: var(--espacio-6);
    max-width: 1400px;
    margin: 0 auto;
}

.edu-header[b-86t03qbbms] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--espacio-6);
}

    .edu-header h1[b-86t03qbbms] {
        font-size: var(--texto-xl);
        font-weight: var(--peso-bold);
        color: var(--text-heading);
        margin: 0;
    }

    .edu-header .subtitle[b-86t03qbbms] {
        color: var(--text-secondary);
        margin: var(--espacio-1) 0 0;
        font-size: var(--texto-sm);
    }

/* ─── Filtros ────────────────────────────────────────────────────────────── */
.edu-filters[b-86t03qbbms] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-4);
    align-items: center;
    margin-bottom: var(--espacio-6);
    padding: var(--espacio-4) var(--espacio-5);
    background: var(--surface-card);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
}

.edu-search-wrap[b-86t03qbbms] {
    position: relative;
    flex: 1;
    min-width: 200px;
}

    .edu-search-wrap i[b-86t03qbbms] {
        position: absolute;
        left: .75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
    }

.edu-search[b-86t03qbbms] {
    width: 100%;
    padding: .5rem .75rem .5rem 2.25rem;
    border: 1px solid var(--borde-input);
    border-radius: var(--radio-8);
    font-size: var(--texto-sm);
    outline: none;
    transition: border-color .2s;
}

    .edu-search:focus[b-86t03qbbms] {
        border-color: var(--borde-input-foco);
    }

.edu-cats[b-86t03qbbms] {
    display: flex;
    gap: var(--espacio-2);
    flex-wrap: wrap;
}

.edu-cat-btn[b-86t03qbbms] {
    padding: .35rem .9rem;
    border: 1px solid var(--borde-input);
    border-radius: var(--radio-20);
    background: var(--surface-card);
    font-size: var(--texto-xs);
    cursor: pointer;
    color: var(--text-secondary);
    transition: all .2s;
}

    .edu-cat-btn:hover[b-86t03qbbms],
    .edu-cat-btn.active[b-86t03qbbms] {
        background: var(--color-accion-primaria);
        border-color: var(--color-accion-primaria);
        color: var(--text-inverso);
    }

/* ─── Secciones ──────────────────────────────────────────────────────────── */
.edu-section[b-86t03qbbms] {
    margin-bottom: var(--espacio-8);
}

.edu-section-title[b-86t03qbbms] {
    font-weight: var(--peso-semibold);
    color: var(--text-heading);
    margin-bottom: var(--espacio-4);
    font-size: var(--texto-base);
}

/* ─── Grid de cursos ─────────────────────────────────────────────────────── */
.edu-grid[b-86t03qbbms] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--espacio-5);
}

/* ─── Card de curso ──────────────────────────────────────────────────────── */
.edu-card[b-86t03qbbms] {
    background: var(--surface-card);
    border-radius: var(--radio-16);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    overflow: hidden;
    border: 1px solid var(--borde-sutil);
}

    .edu-card:hover[b-86t03qbbms] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
    }

.edu-card-img[b-86t03qbbms] {
    height: 160px;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-sunken);
    position: relative;
}

/* Categoría de curso: taxonomía plana sin orden (Liderazgo, Derecho
   Laboral, Comunicación...) — no es jerarquía (no hay "más autoridad"
   entre categorías), así que no usa --badge-jerarquia-*. Tampoco es un
   estado con carga valorativa, así que no usa un color CGT: queda como
   etiqueta neutra semitransparente sobre la imagen. */
.edu-cat-badge[b-86t03qbbms] {
    position: absolute;
    top: .6rem;
    left: .6rem;
    background: var(--overlay-oscuro-55);
    color: var(--text-inverso);
    font-size: var(--texto-xs);
    padding: .2rem .6rem;
    border-radius: var(--radio-20);
    font-weight: var(--peso-medio);
}

/* Insignias de estado (inscrito/completado): íconos-indicador en
   círculo, no badges de texto — se resuelven en verde éxito sólido
   (ambas son variantes de "vas bien" en el curso), no en el patrón
   pastel que rige los badges de texto. */
.edu-inscrito-badge[b-86t03qbbms] {
    position: absolute;
    top: .6rem;
    right: .6rem;
    background: var(--color-exito-superficie);
    color: var(--text-inverso);
    width: 26px;
    height: 26px;
    border-radius: var(--radio-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
}

.edu-card-body[b-86t03qbbms] {
    padding: var(--espacio-4) 1.1rem 1.1rem;
}

.edu-card-title[b-86t03qbbms] {
    font-weight: var(--peso-semibold);
    color: var(--text-heading);
    margin: 0 0 .3rem;
    font-size: .95rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.edu-card-desc[b-86t03qbbms] {
    font-size: var(--texto-xs);
    color: var(--text-secondary);
    margin: 0 0 .6rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.edu-card-sub[b-86t03qbbms] {
    font-size: var(--texto-xs);
    color: var(--text-secondary);
    margin: 0 0 .5rem;
}

.edu-card-meta[b-86t03qbbms] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ─── Progreso ───────────────────────────────────────────────────────────── */
/* En progreso = neutro (sin carga de estado, es solo informativo).
   Completado = éxito/verde (única barra con carga valorativa real:
   "terminaste el curso"). Mismo criterio de dos familias que
   .progress-bar.bg-success/warning/danger en Caja/DashboardCobranza,
   adaptado a que aquí solo hay dos estados reales, no tres. */
.edu-progress-wrap[b-86t03qbbms] {
    height: 6px;
    background: var(--surface-sunken);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: .25rem;
}

.edu-progress-bar[b-86t03qbbms] {
    height: 100%;
    background: var(--color-neutro);
    border-radius: 3px;
    transition: width .4s ease;
}

.edu-progress-label[b-86t03qbbms] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: var(--peso-medio);
}

/* ─── Otros ──────────────────────────────────────────────────────────────── */
.edu-inscritos[b-86t03qbbms] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.edu-btn-inscribirse[b-86t03qbbms] {
    font-size: var(--texto-xs);
    color: var(--text-heading);
    font-weight: var(--peso-semibold);
}

.edu-empty[b-86t03qbbms] {
    text-align: center;
    padding: var(--espacio-12) var(--espacio-8);
    color: var(--text-muted);
}

    .edu-empty i[b-86t03qbbms] {
        font-size: var(--icono-2xl);
        display: block;
        margin-bottom: .75rem;
    }

/* ─── Card en progreso (hero strip) ─────────────────────────────────────── */
.edu-card-progress .edu-card-img[b-86t03qbbms] {
    height: 120px;
}

/* ─── Card completado ────────────────────────────────────────────────────── */
.edu-card-done[b-86t03qbbms] {
    opacity: .92;
}

    .edu-card-done .edu-progress-bar[b-86t03qbbms] {
        background: var(--color-exito-superficie);
    }

.edu-completado-badge[b-86t03qbbms] {
    position: absolute;
    top: .6rem;
    right: .6rem;
    background: var(--color-exito-superficie);
    color: var(--text-inverso);
    width: 26px;
    height: 26px;
    border-radius: var(--radio-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}
/* /Components/Pages/Educacion/GestionCursos.razor.rz.scp.css */
/* ─── Layout raiz ─── */
.lms-admin[b-xfrqo4qlbv] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    background: var(--surface-page);
    overflow: hidden;
}

/* ─── Header ─── */
.lms-header[b-xfrqo4qlbv] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    background: var(--primary-gradient);
    color: var(--text-inverso);
    flex-shrink: 0;
}

.lms-header-left[b-xfrqo4qlbv] { flex: 1; }

/* Color explícito: el h1/p heredaría --text-inverso (blanco) de
   .lms-header, pero la regla global h1,h2,h3,h4,h5,h6{color:
   var(--gray-700)} (app.css) declara color directo sobre el propio
   elemento, y una declaración directa siempre gana sobre un valor
   heredado — el título quedaba en gris-900 (casi negro) sobre el
   degradado carbón, prácticamente invisible. */
    .lms-header-left h1[b-xfrqo4qlbv] {
        font-size: 1.4rem;
        font-weight: 800;
        margin: 0;
        letter-spacing: -.01em;
        color: var(--text-inverso);
    }

    .lms-header-left p[b-xfrqo4qlbv] {
        margin: .15rem 0 0;
        font-size: .82rem;
        opacity: .85;
        color: var(--text-inverso);
    }

.lms-header-stats[b-xfrqo4qlbv] {
    display: flex;
    gap: 1rem;
}

.hstat[b-xfrqo4qlbv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--overlay-claro-20);
    border-radius: 10px;
    padding: .4rem .9rem;
    min-width: 68px;
}

.hstat-num[b-xfrqo4qlbv] {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
}

.hstat-lbl[b-xfrqo4qlbv] {
    font-size: .7rem;
    opacity: .85;
    margin-top: .15rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ─── Workspace ─── */
.lms-workspace[b-xfrqo4qlbv] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ─── Sidebar (lista de cursos) ─── */
.lms-sidebar[b-xfrqo4qlbv] {
    width: 320px;
    flex-shrink: 0;
    background: var(--surface-card);
    border-right: 1px solid var(--borde-sutil);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lms-sidebar-search[b-xfrqo4qlbv] {
    padding: .85rem;
    border-bottom: 1px solid var(--borde-sutil);
    flex-shrink: 0;
}

.search-input-wrapper[b-xfrqo4qlbv] {
    position: relative;
    margin-bottom: .6rem;
}

    .search-input-wrapper i[b-xfrqo4qlbv] {
        position: absolute;
        left: .75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-secondary);
        font-size: .85rem;
    }

    .search-input-wrapper input[b-xfrqo4qlbv] {
        width: 100%;
        padding: .5rem .75rem .5rem 2rem;
        border: 1px solid var(--borde-sutil);
        border-radius: 8px;
        font-size: .82rem;
        background: var(--surface-page);
        outline: none;
        transition: border-color .15s;
    }

        .search-input-wrapper input:focus[b-xfrqo4qlbv] { border-color: var(--color-accion-primaria); }

.filter-pills[b-xfrqo4qlbv] {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

.pill[b-xfrqo4qlbv] {
    padding: .2rem .6rem;
    border: 1px solid var(--borde-sutil);
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 500;
    background: var(--surface-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .15s;
}

    .pill.active[b-xfrqo4qlbv], .pill:hover[b-xfrqo4qlbv] {
        background: var(--color-accion-primaria);
        border-color: var(--color-accion-primaria);
        color: var(--text-inverso);
    }

/* Course cards in sidebar */
.lms-sidebar[b-xfrqo4qlbv] {
    overflow-y: auto;
}

.course-card[b-xfrqo4qlbv] {
    display: flex;
    flex-direction: column;
    padding: .85rem;
    border-bottom: 1px solid var(--borde-sutil);
    cursor: pointer;
    transition: background .12s;
}

    .course-card:hover[b-xfrqo4qlbv] { background: var(--surface-sunken); }
    .course-card.selected[b-xfrqo4qlbv] { background: var(--menu-activo-fondo); border-left: 3px solid var(--color-accion-primaria); }

.course-card-thumb[b-xfrqo4qlbv] {
    position: relative;
    margin-bottom: .5rem;
}

.course-thumb-placeholder[b-xfrqo4qlbv] {
    height: 70px;
    background: var(--color-accion-secundaria-fondo);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accion-primaria);
    font-size: 1.6rem;
}

.course-cat-chip[b-xfrqo4qlbv] {
    position: absolute;
    top: .4rem;
    left: .4rem;
    background: var(--overlay-oscuro-55);
    color: var(--text-inverso);
    font-size: .65rem;
    font-weight: 600;
    padding: .15rem .5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.course-card-title[b-xfrqo4qlbv] {
    font-weight: 700;
    font-size: .875rem;
    color: var(--text-heading);
    margin-bottom: .35rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-card-meta[b-xfrqo4qlbv] {
    display: flex;
    gap: .6rem;
    font-size: .72rem;
    color: var(--text-secondary);
    margin-bottom: .4rem;
}

    .course-card-meta i[b-xfrqo4qlbv] { margin-right: .15rem; }

.course-card-author[b-xfrqo4qlbv] {
    font-size: .72rem;
    color: var(--text-secondary);
    margin-bottom: .4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .course-card-author i[b-xfrqo4qlbv] { margin-right: .2rem; }

.course-author-org[b-xfrqo4qlbv] {
    color: var(--text-secondary);
    font-weight: 500;
    opacity: 0.85;
}

/* ─── Estado pills ─── */
.estado-pill[b-xfrqo4qlbv] {
    display: inline-block;
    padding: .2rem .65rem;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pill-publicado[b-xfrqo4qlbv] { background: var(--color-exito-fondo); color: var(--color-exito-texto); }
.pill-borrador[b-xfrqo4qlbv]  { background: var(--color-advertencia-fondo); color: var(--color-advertencia-texto); }
.pill-archivado[b-xfrqo4qlbv] { background: var(--color-accion-secundaria-fondo); color: var(--color-neutro-texto); }

/* ─── Loading / empty states ─── */
.lms-loading[b-xfrqo4qlbv] {
    display: flex;
    justify-content: center;
    padding: 2.5rem;
}

.lms-empty-list[b-xfrqo4qlbv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 2.5rem 1rem;
    color: var(--text-secondary);
    text-align: center;
}

    .lms-empty-list i[b-xfrqo4qlbv] { font-size: 2rem; }
    .lms-empty-list p[b-xfrqo4qlbv] { font-size: .875rem; margin: 0; }

/* ─── Editor (columna derecha) ─── */
.lms-editor[b-xfrqo4qlbv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface-page);
}

/* Empty state editor */
.editor-empty[b-xfrqo4qlbv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    color: var(--text-secondary);
    text-align: center;
    padding: 3rem;
}

    .editor-empty i[b-xfrqo4qlbv] { font-size: 3.5rem; opacity: .35; }
    .editor-empty h3[b-xfrqo4qlbv] { font-size: 1.2rem; color: var(--text-heading); margin: 0; }
    .editor-empty p[b-xfrqo4qlbv] { font-size: .875rem; max-width: 320px; margin: 0; }

/* Course header */
.editor-course-header[b-xfrqo4qlbv] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 1.5rem;
    background: var(--surface-card);
    border-bottom: 1px solid var(--borde-sutil);
    flex-shrink: 0;
    gap: 1rem;
}

.editor-course-title-row[b-xfrqo4qlbv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
}

    .editor-course-title-row h2[b-xfrqo4qlbv] {
        font-size: 1.2rem;
        font-weight: 800;
        margin: 0;
        color: var(--text-heading);
    }

.editor-course-sub[b-xfrqo4qlbv] {
    font-size: .8rem;
    color: var(--text-secondary);
    margin: .2rem 0 0;
}

    .editor-course-sub span + span[b-xfrqo4qlbv] { margin-left: .5rem; }

.editor-course-actions[b-xfrqo4qlbv] {
    display: flex;
    gap: .4rem;
    flex-shrink: 0;
}

/* Quick stats bar */
.editor-quick-stats[b-xfrqo4qlbv] {
    display: flex;
    gap: 1.5rem;
    padding: .6rem 1.5rem;
    background: var(--surface-card);
    border-bottom: 1px solid var(--borde-sutil);
    flex-shrink: 0;
}

.qstat[b-xfrqo4qlbv] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--text-secondary);
}

    .qstat i[b-xfrqo4qlbv] { color: var(--color-accion-primaria); }

/* Tabs */
.editor-tabs[b-xfrqo4qlbv] {
    display: flex;
    padding: 0 1.5rem;
    background: var(--surface-card);
    border-bottom: 2px solid var(--borde-sutil);
    gap: .25rem;
    flex-shrink: 0;
}

.etab[b-xfrqo4qlbv] {
    padding: .7rem 1rem;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    display: flex;
    align-items: center;
    gap: .35rem;
    transition: all .15s;
    white-space: nowrap;
}

    .etab:hover[b-xfrqo4qlbv] { color: var(--color-accion-primaria); }

    .etab.active[b-xfrqo4qlbv] {
        color: var(--color-accion-primaria);
        border-bottom-color: var(--color-accion-primaria);
    }

.etab-badge[b-xfrqo4qlbv] {
    background: var(--color-accion-primaria);
    color: var(--text-inverso);
    font-size: .65rem;
    padding: .1rem .4rem;
    border-radius: 10px;
    font-weight: 700;
}

/* Tab content */
.editor-tab-content[b-xfrqo4qlbv] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* ─── TAB: CONTENIDO ─── */
.tab-contenido-actions[b-xfrqo4qlbv] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.contenido-empty[b-xfrqo4qlbv] {
    text-align: center;
    padding: 2.5rem;
    color: var(--text-secondary);
}

    .contenido-empty i[b-xfrqo4qlbv] { font-size: 2.5rem; display: block; margin-bottom: .5rem; opacity: .4; }

.modulo-block[b-xfrqo4qlbv] {
    background: var(--surface-card);
    border: 1px solid var(--borde-sutil);
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.modulo-header[b-xfrqo4qlbv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1rem;
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--borde-sutil);
}

.modulo-info[b-xfrqo4qlbv] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.modulo-orden[b-xfrqo4qlbv] {
    font-size: .7rem;
    font-weight: 700;
    background: var(--color-accion-primaria);
    color: var(--text-inverso);
    padding: .1rem .4rem;
    border-radius: 4px;
}

.modulo-title[b-xfrqo4qlbv] {
    font-weight: 700;
    font-size: .9rem;
    color: var(--text-heading);
}

.modulo-count[b-xfrqo4qlbv] {
    font-size: .72rem;
    color: var(--text-secondary);
    background: var(--color-accion-secundaria-fondo);
    padding: .15rem .5rem;
    border-radius: 8px;
}

.modulo-actions[b-xfrqo4qlbv] {
    display: flex;
    gap: .3rem;
}

/* Lesson rows */
.lecciones-list[b-xfrqo4qlbv] { padding: .5rem 0; }

.leccion-row[b-xfrqo4qlbv] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--borde-sutil);
    transition: background .1s;
}

    .leccion-row:hover[b-xfrqo4qlbv] { background: var(--surface-sunken); }
    .leccion-row:last-child[b-xfrqo4qlbv] { border-bottom: none; }

.leccion-icon[b-xfrqo4qlbv] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--color-accion-secundaria-fondo);
    color: var(--color-accion-primaria);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    flex-shrink: 0;
}

.leccion-info[b-xfrqo4qlbv] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.leccion-orden[b-xfrqo4qlbv] { font-size: .7rem; color: var(--text-secondary); }
.leccion-title[b-xfrqo4qlbv] { font-size: .85rem; font-weight: 600; color: var(--text-heading); }

.leccion-dur[b-xfrqo4qlbv] {
    font-size: .72rem;
    color: var(--text-secondary);
}

.leccion-type-chip[b-xfrqo4qlbv] {
    font-size: .65rem;
    background: var(--color-accion-secundaria-fondo);
    color: var(--text-secondary);
    padding: .1rem .45rem;
    border-radius: 5px;
    font-weight: 600;
}

.leccion-actions[b-xfrqo4qlbv] { display: flex; gap: .25rem; margin-left: auto; }

.lecciones-empty[b-xfrqo4qlbv] {
    padding: .75rem 1rem;
    font-size: .82rem;
    color: var(--text-secondary);
}

/* ─── TAB: ACCESO ─── */
.tab-acceso[b-xfrqo4qlbv] { max-width: 700px; }

.acceso-header[b-xfrqo4qlbv] { margin-bottom: 1rem; }

    .acceso-header h4[b-xfrqo4qlbv] { font-size: 1rem; font-weight: 700; color: var(--text-heading); margin: 0 0 .25rem; }

.accesos-list[b-xfrqo4qlbv] {
    background: var(--surface-card);
    border: 1px solid var(--borde-sutil);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.acceso-empty[b-xfrqo4qlbv] {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

    .acceso-empty i[b-xfrqo4qlbv] { font-size: 1.75rem; display: block; margin-bottom: .4rem; opacity: .4; }
    .acceso-empty p[b-xfrqo4qlbv] { font-size: .85rem; margin: 0; }

.acceso-row[b-xfrqo4qlbv] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--borde-sutil);
    font-size: .875rem;
}

    .acceso-row:last-child[b-xfrqo4qlbv] { border-bottom: none; }
    .acceso-row i[b-xfrqo4qlbv] { color: var(--color-accion-primaria); font-size: 1rem; }

.acceso-nombre[b-xfrqo4qlbv] { font-weight: 600; color: var(--text-heading); }

.acceso-tipo[b-xfrqo4qlbv] {
    font-size: .72rem;
    background: var(--color-accion-secundaria-fondo);
    color: var(--text-secondary);
    padding: .15rem .5rem;
    border-radius: 5px;
}

.acceso-form-card[b-xfrqo4qlbv] {
    background: var(--surface-card);
    border: 1px solid var(--borde-sutil);
    border-radius: 12px;
    padding: 1.25rem;
}

    .acceso-form-card h5[b-xfrqo4qlbv] {
        font-size: .9rem;
        font-weight: 700;
        color: var(--text-heading);
        margin: 0 0 1rem;
    }

/* ─── TAB: ESTUDIANTES ─── */
.est-header[b-xfrqo4qlbv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

    .est-header h4[b-xfrqo4qlbv] { font-size: 1rem; font-weight: 700; color: var(--text-heading); margin: 0; }

.est-count[b-xfrqo4qlbv] {
    font-size: .78rem;
    background: var(--color-accion-primaria);
    color: var(--text-inverso);
    padding: .2rem .65rem;
    border-radius: 20px;
    font-weight: 600;
}

.est-empty[b-xfrqo4qlbv] {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

    .est-empty i[b-xfrqo4qlbv] { font-size: 2.5rem; display: block; margin-bottom: .5rem; opacity: .35; }

.est-table-wrapper[b-xfrqo4qlbv] {
    background: var(--surface-card);
    border: 1px solid var(--borde-sutil);
    border-radius: 12px;
    overflow: auto;
}

.est-table[b-xfrqo4qlbv] {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

    .est-table thead tr[b-xfrqo4qlbv] {
        background: var(--surface-sunken);
        border-bottom: 2px solid var(--borde-sutil);
    }

    .est-table th[b-xfrqo4qlbv] {
        padding: .75rem 1rem;
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--text-secondary);
        white-space: nowrap;
    }

    .est-table td[b-xfrqo4qlbv] {
        padding: .75rem 1rem;
        border-bottom: 1px solid var(--borde-sutil);
        vertical-align: middle;
    }

    .est-table tbody tr:hover[b-xfrqo4qlbv] { background: var(--surface-sunken); }
    .est-table tbody tr:last-child td[b-xfrqo4qlbv] { border-bottom: none; }

.est-name[b-xfrqo4qlbv] { display: flex; align-items: center; gap: .65rem; }

.est-avatar[b-xfrqo4qlbv] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary-gradient);
    color: var(--text-inverso);
    font-weight: 700;
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.progress-cell[b-xfrqo4qlbv] {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 120px;
}

.progress-bar-wrap[b-xfrqo4qlbv] {
    flex: 1;
    height: 7px;
    background: var(--gris-200);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill[b-xfrqo4qlbv] {
    height: 100%;
    background: var(--color-neutro);
    border-radius: 4px;
    transition: width .3s ease;
}

.progress-pct[b-xfrqo4qlbv] {
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-secondary);
    min-width: 30px;
}

/* ─── TAB: CONFIGURACION ─── */
.tab-config[b-xfrqo4qlbv] { max-width: 700px; }

    .tab-config h4[b-xfrqo4qlbv] {
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-heading);
        margin: 0 0 1.25rem;
    }

.config-form[b-xfrqo4qlbv] {
    background: var(--surface-card);
    border: 1px solid var(--borde-sutil);
    border-radius: 12px;
    padding: 1.5rem;
}

/* ─── Buttons ─── */
.lms-btn-primary[b-xfrqo4qlbv] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem 1.1rem;
    background: var(--color-accion-primaria);
    color: var(--text-inverso);
    border: none;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    text-decoration: none;
}

    .lms-btn-primary:hover:not(:disabled)[b-xfrqo4qlbv] { background: var(--color-accion-primaria-hover); }
    .lms-btn-primary:disabled[b-xfrqo4qlbv] { opacity: .65; cursor: default; }

.lms-btn-success[b-xfrqo4qlbv] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem 1rem;
    background: var(--color-exito-superficie);
    color: var(--text-inverso);
    border: none;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

    .lms-btn-success:hover[b-xfrqo4qlbv] { background: var(--color-exito-superficie); }

.lms-btn-warning[b-xfrqo4qlbv] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem 1rem;
    background: var(--color-advertencia-superficie);
    color: var(--text-inverso);
    border: none;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

    .lms-btn-warning:hover[b-xfrqo4qlbv] { background: var(--color-advertencia-superficie); }

.lms-btn-danger[b-xfrqo4qlbv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .45rem .7rem;
    background: var(--color-destructivo-fondo);
    color: var(--color-destructivo);
    border: none;
    border-radius: 8px;
    font-size: .85rem;
    cursor: pointer;
    transition: all .15s;
}

/* ─── Quick action buttons on sidebar course cards ─── */

.course-card-quick-actions[b-xfrqo4qlbv] {
    position: absolute;
    top: .35rem;
    right: .35rem;
    display: flex;
    gap: .25rem;
    opacity: 0;
    transition: opacity .15s;
}

.course-card:hover .course-card-quick-actions[b-xfrqo4qlbv],
.course-card.selected .course-card-quick-actions[b-xfrqo4qlbv] {
    opacity: 1;
}

.quick-action-btn[b-xfrqo4qlbv] {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    cursor: pointer;
    transition: all .12s;
    padding: 0;
}

.quick-action-btn.publish[b-xfrqo4qlbv] {
    background: var(--color-exito-superficie);
    color: var(--text-inverso);
}

    .quick-action-btn.publish:hover[b-xfrqo4qlbv] { background: var(--color-exito-superficie); }

.quick-action-btn.archive[b-xfrqo4qlbv] {
    background: var(--gris-700);
    color: var(--text-inverso);
}

    .quick-action-btn.archive:hover[b-xfrqo4qlbv] { background: var(--color-advertencia-superficie); }

/* ─── Access tab: type pills ─── */

.acceso-tipo-pills[b-xfrqo4qlbv] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.acceso-tipo-pill[b-xfrqo4qlbv] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .85rem;
    background: var(--color-accion-secundaria-fondo);
    color: var(--text-secondary);
    border: 1.5px solid var(--borde-input);
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}

    .acceso-tipo-pill:hover[b-xfrqo4qlbv] {
        background: var(--menu-activo-fondo);
        border-color: var(--color-accion-primaria);
        color: var(--color-accion-primaria);
    }

    .acceso-tipo-pill.active[b-xfrqo4qlbv] {
        background: var(--color-accion-primaria);
        border-color: var(--color-accion-primaria);
        color: var(--text-inverso);
    }

.pill-count[b-xfrqo4qlbv] {
    background: var(--overlay-oscuro-10);
    border-radius: 20px;
    padding: .05rem .4rem;
    font-size: .7rem;
    font-weight: 700;
}

.acceso-tipo-pill.active .pill-count[b-xfrqo4qlbv] {
    background: var(--overlay-claro-25);
}

/* ─── Access tab: entity search + list ─── */

.acceso-todos-bloque[b-xfrqo4qlbv] {
    padding: .75rem 0;
}

.acceso-busqueda[b-xfrqo4qlbv] {
    position: relative;
    margin-bottom: .5rem;
}

    .acceso-busqueda i[b-xfrqo4qlbv] {
        position: absolute;
        left: .75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        font-size: .85rem;
    }

    .acceso-busqueda input[b-xfrqo4qlbv] {
        width: 100%;
        padding: .45rem .75rem .45rem 2.1rem;
        border: 1.5px solid var(--borde-input);
        border-radius: 8px;
        font-size: .85rem;
        transition: border-color .15s;
    }

        .acceso-busqueda input:focus[b-xfrqo4qlbv] {
            outline: none;
            border-color: var(--color-accion-primaria);
        }

.acceso-entidad-list[b-xfrqo4qlbv] {
    max-height: 280px;
    overflow-y: auto;
    border: 1.5px solid var(--borde-input);
    border-radius: 10px;
    background: var(--surface-card);
}

.acceso-entidad-item[b-xfrqo4qlbv] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .85rem;
    cursor: pointer;
    transition: background .1s;
    border-bottom: 1px solid var(--color-accion-secundaria-fondo);
}

    .acceso-entidad-item:last-child[b-xfrqo4qlbv] { border-bottom: none; }

    .acceso-entidad-item:hover[b-xfrqo4qlbv] { background: var(--surface-sunken); }

    .acceso-entidad-item.selected[b-xfrqo4qlbv] { background: var(--menu-activo-fondo); }

    .acceso-entidad-item input[type=checkbox][b-xfrqo4qlbv] {
        width: 15px;
        height: 15px;
        accent-color: var(--color-accion-primaria);
        cursor: pointer;
        flex-shrink: 0;
    }

.entidad-nombre[b-xfrqo4qlbv] {
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-heading);
    flex: 1;
}

.entidad-meta[b-xfrqo4qlbv] {
    font-size: .75rem;
    color: var(--text-muted);
}

.acceso-form-actions[b-xfrqo4qlbv] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

    .lms-btn-danger:hover[b-xfrqo4qlbv] { background: var(--color-destructivo); color: var(--text-inverso); }

.lms-btn-ghost[b-xfrqo4qlbv] {
    padding: .5rem 1.1rem;
    border: 1px solid var(--borde-sutil);
    background: var(--surface-card);
    color: var(--text-secondary);
    border-radius: 8px;
    font-size: .82rem;
    cursor: pointer;
    transition: all .15s;
}

    .lms-btn-ghost:hover[b-xfrqo4qlbv] { border-color: var(--color-accion-primaria); color: var(--color-accion-primaria); }

.lms-btn-link[b-xfrqo4qlbv] {
    background: none;
    border: none;
    color: var(--color-accion-primaria);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Icon buttons */
.icon-btn[b-xfrqo4qlbv] {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 7px;
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font-size: .8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

    .icon-btn:hover[b-xfrqo4qlbv] { background: var(--color-accion-primaria); color: var(--text-inverso); }

    .icon-btn.danger:hover[b-xfrqo4qlbv] { background: var(--color-destructivo); color: var(--text-inverso); }

    .icon-btn.sm[b-xfrqo4qlbv] { width: 26px; height: 26px; font-size: .75rem; }

/* ─── Modals ─── */
.lms-modal-backdrop[b-xfrqo4qlbv] {
    position: fixed;
    inset: 0;
    background: var(--overlay-oscuro-55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
    backdrop-filter: blur(2px);
}

.lms-modal[b-xfrqo4qlbv] {
    background: var(--surface-card);
    border-radius: 18px;
    width: 100%;
    max-width: 480px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.lms-modal-lg[b-xfrqo4qlbv] { max-width: 640px; }

/* Card clara con acento de marca en el borde — mismo patrón ya
   corregido en GestionEventos.razor.css/desc-upload-header
   (Comunicaciones)/gd-modal-header (Archivo); antes degradado carbón
   sólido (hallazgo #5 de AJUSTES-PENDIENTES.md). */
.lms-modal-header[b-xfrqo4qlbv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem;
    background: var(--surface-card);
    flex-shrink: 0;
    border-bottom: 1px solid var(--borde-sutil);
    position: relative;
    overflow: hidden;
}

.lms-modal-header[b-xfrqo4qlbv]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--menu-activo-borde);
}

    .lms-modal-header h5[b-xfrqo4qlbv] {
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-heading);
        margin: 0;
        display: flex;
        align-items: center;
        gap: .4rem;
    }

        .lms-modal-header h5 i[b-xfrqo4qlbv] { color: var(--text-secondary); }

.modal-close-btn[b-xfrqo4qlbv] {
    background: var(--color-accion-secundaria-fondo);
    border: none;
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    cursor: pointer;
    transition: background .15s;
    padding: 0;
    flex-shrink: 0;
}

    .modal-close-btn:hover[b-xfrqo4qlbv] { background: var(--color-accion-secundaria-fondo-hover); }

.lms-modal-body[b-xfrqo4qlbv] {
    padding: 1.25rem 1.4rem;
    overflow-y: auto;
    flex: 1;
    background: var(--surface-card);
}

/* Form controls scoped inside modals */
.lms-modal-body .form-label[b-xfrqo4qlbv] {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: .35rem;
    letter-spacing: .02em;
}

.lms-modal-body .form-control[b-xfrqo4qlbv],
.lms-modal-body .form-select[b-xfrqo4qlbv] {
    border: 1.5px solid var(--borde-input);
    border-radius: 9px;
    font-size: .88rem;
    color: var(--text-heading);
    background: var(--surface-card);
    padding: .5rem .85rem;
    transition: border-color .2s, box-shadow .2s;
}

    .lms-modal-body .form-control:focus[b-xfrqo4qlbv],
    .lms-modal-body .form-select:focus[b-xfrqo4qlbv] {
        border-color: var(--color-accion-primaria);
        box-shadow: 0 0 0 3px var(--color-foco-anillo);
        background: var(--surface-card);
        outline: none;
    }

.lms-modal-body .form-text[b-xfrqo4qlbv] {
    font-size: .75rem;
    color: var(--text-muted);
}

.lms-modal-body .form-check-input:checked[b-xfrqo4qlbv] {
    background-color: var(--color-accion-primaria);
    border-color: var(--color-accion-primaria);
}

.lms-modal-body .form-check-label[b-xfrqo4qlbv] {
    font-size: .85rem;
    color: var(--text-heading);
}

.lms-modal-footer[b-xfrqo4qlbv] {
    padding: .9rem 1.4rem;
    border-top: 1px solid var(--borde-sutil);
    background: var(--surface-sunken);
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
}

/* ─── Modal XL (leccion) ─── */
.lms-modal-xl[b-xfrqo4qlbv] { max-width: 920px; width: 95%; }

.leccion-modal-body[b-xfrqo4qlbv] {
    max-height: 72vh;
    overflow-y: auto;
    padding: 1.25rem 1.4rem;
}

/* ─── Quill editor ─── */
.lms-quill-editor[b-xfrqo4qlbv] {
    border: 1px solid var(--borde-sutil);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-card);
}

.lms-quill-editor .ql-toolbar[b-xfrqo4qlbv] {
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--borde-sutil);
    border-top: none;
    border-left: none;
    border-right: none;
    padding: .45rem .6rem;
}

.lms-quill-editor .ql-container[b-xfrqo4qlbv] {
    min-height: 150px;
    font-size: .92rem;
    border: none;
}

.lms-quill-tall .ql-container[b-xfrqo4qlbv] { min-height: 300px; }

/* ─── Tabs URL / Subir ─── */
.leccion-content-source[b-xfrqo4qlbv] {
    border: 1px solid var(--borde-sutil);
    border-radius: 10px;
    overflow: hidden;
}

.csrc-tabs[b-xfrqo4qlbv] {
    display: flex;
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--borde-sutil);
}

.csrc-tab[b-xfrqo4qlbv] {
    flex: 1;
    padding: .5rem 1rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-size: .85rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color .18s, background .18s, border-color .18s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}

.csrc-tab:hover[b-xfrqo4qlbv] {
    background: color-mix(in srgb, var(--color-accion-primaria) 6%, transparent);
    color: var(--color-accion-primaria);
}

.csrc-tab-active[b-xfrqo4qlbv] {
    color: var(--color-accion-primaria);
    font-weight: 600;
    border-bottom-color: var(--color-accion-primaria);
    background: var(--surface-card);
}

.csrc-panel[b-xfrqo4qlbv] { padding: .85rem; }

/* ─── Preview archivo / video subido ─── */
.upload-progress[b-xfrqo4qlbv] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 0;
    color: var(--text-secondary);
    font-size: .88rem;
}

.archivo-subido-preview[b-xfrqo4qlbv] { margin-bottom: .6rem; }

.leccion-video-preview[b-xfrqo4qlbv] {
    width: 100%;
    max-height: 200px;
    border-radius: 8px;
    background: var(--negro-absoluto);
    display: block;
    margin-bottom: .5rem;
}

.archivo-subido-info[b-xfrqo4qlbv] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem;
    background: var(--surface-sunken);
    border-radius: 8px;
    border: 1px solid var(--borde-sutil);
}

.archivo-icon[b-xfrqo4qlbv] { font-size: 1.4rem; flex-shrink: 0; }

.archivo-nombre[b-xfrqo4qlbv] {
    flex: 1;
    font-size: .88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-heading);
}

/* ─── Panel de recursos adjuntos ─── */
.leccion-recursos-panel[b-xfrqo4qlbv] {
    border: 1px solid var(--borde-sutil);
    border-radius: 10px;
    padding: 1rem;
    background: var(--surface-sunken);
}

.recursos-header[b-xfrqo4qlbv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .6rem;
}

.recursos-header h6[b-xfrqo4qlbv] {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text-heading);
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
}

.recurso-upload-label[b-xfrqo4qlbv] {
    font-size: .8rem;
    padding: .3rem .75rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    cursor: pointer;
}

.recursos-list[b-xfrqo4qlbv] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: .4rem;
}

.recurso-item[b-xfrqo4qlbv] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .75rem;
    background: var(--surface-card);
    border: 1px solid var(--borde-sutil);
    border-radius: 8px;
    font-size: .85rem;
    transition: background .15s;
}

.recurso-item:hover[b-xfrqo4qlbv] { background: var(--surface-sunken); }

.recurso-icon[b-xfrqo4qlbv] { font-size: 1.2rem; flex-shrink: 0; }

.recurso-nombre[b-xfrqo4qlbv] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-heading);
}

.recurso-size[b-xfrqo4qlbv] {
    font-size: .78rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .lms-workspace[b-xfrqo4qlbv] { flex-direction: column; }
    .lms-sidebar[b-xfrqo4qlbv] { width: 100%; height: 260px; border-right: none; border-bottom: 1px solid var(--borde-sutil); }
    .lms-header-stats[b-xfrqo4qlbv] { display: none; }
    .editor-tabs[b-xfrqo4qlbv] { overflow-x: auto; }
    .lms-modal-xl[b-xfrqo4qlbv] { width: 100%; }
    .leccion-modal-body[b-xfrqo4qlbv] { max-height: 80vh; }
}
/* /Components/Pages/Educacion/VerLeccion.razor.rz.scp.css */
/* ─── Layout ────────────────────────────────────────────────────────────── */
.vl-container[b-0q9gquc37z] {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--espacio-4) var(--espacio-6) var(--espacio-8);
}

/* ─── Breadcrumb ─────────────────────────────────────────────────────────── */
.vl-breadcrumb[b-0q9gquc37z] {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    font-size: var(--texto-xs);
    color: var(--text-muted);
    margin-bottom: var(--espacio-4);
}

    .vl-breadcrumb a[b-0q9gquc37z] {
        color: var(--text-heading);
        text-decoration: none;
    }

        .vl-breadcrumb a:hover[b-0q9gquc37z] { text-decoration: underline; }

    .vl-breadcrumb span:last-child[b-0q9gquc37z] {
        color: var(--text-secondary);
        font-weight: var(--peso-medio);
    }

/* ─── Body grid ──────────────────────────────────────────────────────────── */
.vl-body[b-0q9gquc37z] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--espacio-6);
    align-items: start;
}

/* ─── Área del reproductor ───────────────────────────────────────────────── */
.vl-player-area[b-0q9gquc37z] {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-4);
}

.vl-player-header[b-0q9gquc37z] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--espacio-4);
}

.vl-modulo-label[b-0q9gquc37z] {
    font-size: var(--texto-xs);
    color: var(--text-secondary);
    font-weight: var(--peso-semibold);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}

.vl-titulo[b-0q9gquc37z] {
    font-size: 1.2rem;
    font-weight: var(--peso-bold);
    color: var(--text-heading);
    margin: .2rem 0 0;
}

.vl-progress-info[b-0q9gquc37z] {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    white-space: nowrap;
    font-size: var(--texto-xs);
    color: var(--text-secondary);
    font-weight: var(--peso-semibold);
}

.vl-mini-progress[b-0q9gquc37z] {
    width: 80px;
    height: 6px;
    background: var(--gris-200);
    border-radius: 3px;
    overflow: hidden;
}

/* Barra de progreso del curso (no de la lección): mismo criterio neutro
   que .edu-progress-bar / .dc-progress-bar — informativa, sin variante
   de "completado" propia en este componente. */
.vl-mini-bar[b-0q9gquc37z] {
    height: 100%;
    background: var(--color-neutro);
    border-radius: 3px;
    transition: width .4s ease;
}

/* ─── Reproductor ────────────────────────────────────────────────────────── */
.vl-player[b-0q9gquc37z] {
    background: var(--gris-950);
    border-radius: var(--radio-12);
    overflow: hidden;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vl-video[b-0q9gquc37z] {
    width: 100%;
    max-height: 520px;
    border-radius: var(--radio-12);
}

.vl-iframe-wrap[b-0q9gquc37z] {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.vl-iframe[b-0q9gquc37z] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.vl-pdf-wrap[b-0q9gquc37z] {
    width: 100%;
    height: 600px;
}

.vl-pdf[b-0q9gquc37z] {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--radio-8);
}

.vl-html-content[b-0q9gquc37z] {
    background: var(--surface-card);
    border-radius: var(--radio-12);
    padding: var(--espacio-6) var(--espacio-8);
    color: var(--text-heading);
    font-size: .95rem;
    line-height: var(--interlineado-relajado);
    border: 1px solid var(--borde-sutil);
    width: 100%;
}

.vl-no-content[b-0q9gquc37z] {
    text-align: center;
    color: var(--text-secondary);
    padding: var(--espacio-12);
}

    .vl-no-content i[b-0q9gquc37z] { font-size: 3rem; display: block; margin-bottom: .75rem; }

/* ─── Descripción ────────────────────────────────────────────────────────── */
.vl-desc[b-0q9gquc37z] {
    background: var(--surface-sunken);
    border-left: 3px solid var(--color-accion-primaria);
    border-radius: 0 var(--radio-8) var(--radio-8) 0;
    padding: var(--espacio-3) var(--espacio-4);
    font-size: .875rem;
    color: var(--text-secondary);
}

    .vl-desc p[b-0q9gquc37z] { margin: 0; }

/* ─── Controles de navegación ────────────────────────────────────────────── */
.vl-nav-controls[b-0q9gquc37z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--espacio-4);
    padding: var(--espacio-3) 0;
    border-top: 1px solid var(--borde-sutil);
}

.vl-btn-nav[b-0q9gquc37z] {
    padding: .55rem 1.1rem;
    border: 1px solid var(--borde-input);
    border-radius: var(--radio-8);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-size: .875rem;
    cursor: pointer;
    transition: all .2s;
    font-weight: var(--peso-medio);
}

    .vl-btn-nav:hover[b-0q9gquc37z] {
        border-color: var(--borde-fuerte);
        color: var(--text-heading);
    }

.vl-btn-completar[b-0q9gquc37z] {
    padding: .55rem 1.5rem;
    background: var(--color-accion-primaria);
    color: var(--text-inverso);
    border: none;
    border-radius: var(--radio-8);
    font-size: .875rem;
    font-weight: var(--peso-semibold);
    cursor: pointer;
    transition: background .2s;
    display: flex;
    align-items: center;
}

    .vl-btn-completar:hover[b-0q9gquc37z] { background: var(--color-accion-primaria-hover); }
    .vl-btn-completar:disabled[b-0q9gquc37z] { opacity: .7; cursor: default; }

.vl-btn-completado[b-0q9gquc37z] {
    background: var(--color-exito-superficie);
}

/* ─── Sidebar ────────────────────────────────────────────────────────────── */
.vl-sidebar[b-0q9gquc37z] {
    position: sticky;
    top: 80px;
    background: var(--surface-card);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-12);
    overflow: hidden;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    box-shadow: var(--shadow-sm);
}

.vl-sidebar-header[b-0q9gquc37z] {
    padding: var(--espacio-4) 1.1rem;
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--borde-sutil);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .vl-sidebar-header h6[b-0q9gquc37z] {
        margin: 0;
        font-size: .88rem;
        font-weight: var(--peso-semibold);
        color: var(--text-heading);
    }

.vl-ver-curso[b-0q9gquc37z] {
    font-size: var(--texto-xs);
    color: var(--text-heading);
    text-decoration: none;
}

.vl-mod-group[b-0q9gquc37z] {
    border-bottom: 1px solid var(--borde-sutil);
    padding-bottom: .25rem;
}

    .vl-mod-group:last-child[b-0q9gquc37z] { border-bottom: none; }

.vl-mod-title[b-0q9gquc37z] {
    padding: .6rem var(--espacio-4);
    font-size: .78rem;
    font-weight: var(--peso-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--surface-sunken);
}

.vl-lesson-item[b-0q9gquc37z] {
    display: flex;
    align-items: center;
    padding: .55rem .9rem .55rem var(--espacio-4);
    font-size: .82rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .15s;
    gap: .4rem;
}

    .vl-lesson-item:hover[b-0q9gquc37z] { background: var(--surface-sunken); }

/* Lección seleccionada: reutiliza --menu-activo-fondo, el mismo criterio
   de "elemento activo" ya usado en course-card.selected (GestionCursos)
   y en la celda "hoy" del calendario de Eventos. */
.vl-lesson-active[b-0q9gquc37z] {
    background: var(--menu-activo-fondo) !important;
    color: var(--color-accion-primaria);
    font-weight: var(--peso-semibold);
    border-left: 3px solid var(--color-accion-primaria);
}

.vl-lesson-done[b-0q9gquc37z] { color: var(--color-exito-superficie); }

.vl-lesson-dur[b-0q9gquc37z] {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ─── Recursos adjuntos ──────────────────────────────────────────────────── */
.vl-recursos[b-0q9gquc37z] {
    margin-top: var(--espacio-6);
    padding: var(--espacio-4) var(--espacio-5);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-10);
    background: var(--surface-sunken);
}

.vl-recursos-titulo[b-0q9gquc37z] {
    font-size: .88rem;
    font-weight: var(--peso-bold);
    color: var(--text-heading);
    margin-bottom: var(--espacio-3);
    display: flex;
    align-items: center;
}

.vl-recursos-lista[b-0q9gquc37z] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.vl-recurso-item[b-0q9gquc37z] {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: .55rem .85rem;
    background: var(--surface-card);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-8);
    text-decoration: none;
    color: var(--text-heading);
    font-size: .85rem;
    transition: background .15s, border-color .15s;
}

.vl-recurso-item:hover[b-0q9gquc37z] {
    background: var(--color-accion-secundaria-fondo);
    border-color: var(--color-accion-primaria);
    color: var(--color-accion-primaria);
}

.vl-recurso-icon[b-0q9gquc37z] { font-size: 1.2rem; flex-shrink: 0; }

.vl-recurso-nombre[b-0q9gquc37z] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vl-recurso-size[b-0q9gquc37z] {
    font-size: var(--texto-xs);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.vl-recurso-dl[b-0q9gquc37z] {
    font-size: .85rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .vl-body[b-0q9gquc37z] {
        grid-template-columns: 1fr;
    }

    .vl-sidebar[b-0q9gquc37z] {
        position: static;
        max-height: 350px;
    }
}
/* /Components/Pages/Eventos/Eventos.razor.rz.scp.css */

/* ─── Layout ──────────────────────────────────────────────────────────────── */
.ev-container[b-2srec9lhca] {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--espacio-6);
}

.ev-header[b-2srec9lhca] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-6);
}

.ev-header h1[b-2srec9lhca] {
    font-size: var(--texto-xl);
    font-weight: var(--peso-bold);
    margin-bottom: var(--espacio-1);
    color: var(--text-heading);
}

.ev-header .subtitle[b-2srec9lhca] {
    color: var(--text-secondary);
    font-size: var(--texto-sm);
    margin: 0;
}

.ev-header-actions[b-2srec9lhca] {
    display: flex;
    gap: var(--espacio-2);
}

/* ─── Calendar card ───────────────────────────────────────────────────────── */
.ev-calendar-card[b-2srec9lhca] {
    background: var(--surface-card);
    border: none;
    box-shadow: var(--shadow-md);
    border-radius: var(--radio-16);
    overflow: hidden;
}

.ev-cal-nav[b-2srec9lhca] {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-4) var(--espacio-5);
    border-bottom: 1px solid var(--borde-sutil);
    background: var(--surface-sunken);
}

.ev-cal-title[b-2srec9lhca] {
    font-weight: var(--peso-bold);
    font-size: var(--texto-base);
    letter-spacing: var(--interletra-amplia);
    flex: 1;
    text-align: center;
    color: var(--text-heading);
}

.ev-cal-grid[b-2srec9lhca] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.ev-cal-header-row[b-2srec9lhca] {
    background: var(--surface-sunken);
    border-bottom: 2px solid var(--borde-sutil);
}

.ev-cal-dayname[b-2srec9lhca] {
    padding: var(--espacio-2) 0;
    text-align: center;
    font-size: var(--texto-xs);
    font-weight: var(--peso-bold);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    color: var(--text-secondary);
}

.ev-cal-cell[b-2srec9lhca] {
    min-height: 100px;
    padding: 0.4rem 0.35rem;
    border-right: 1px solid var(--borde-sutil);
    border-bottom: 1px solid var(--borde-sutil);
    background: var(--surface-card);
    transition: background var(--transition-fast);
}

.ev-cal-cell-other[b-2srec9lhca] {
    background: var(--surface-sunken);
}

.ev-cal-cell-other .ev-cal-day-num[b-2srec9lhca] {
    color: var(--text-muted);
}

/* Día actual: reutiliza --menu-activo-fondo, el único token del sistema
   para "este es el elemento activo/actual" (hoy nace del mismo concepto
   que el ítem de menú activo, no es un estado de dato). */
.ev-cal-cell-today[b-2srec9lhca] {
    background: var(--menu-activo-fondo);
}

.ev-cal-cell-today .ev-cal-day-num[b-2srec9lhca] {
    background: var(--color-accion-primaria);
    color: var(--text-inverso);
    border-radius: var(--radio-full);
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--texto-xs);
    box-shadow: var(--shadow-sm);
}

.ev-cal-day-num[b-2srec9lhca] {
    font-size: var(--texto-xs);
    font-weight: var(--peso-semibold);
    display: block;
    margin-bottom: 2px;
    color: var(--text-secondary);
}

.ev-cal-event-chip[b-2srec9lhca] {
    font-size: 0.69rem;
    color: var(--text-inverso);
    border-radius: var(--radio-4);
    padding: 2px 6px;
    margin-bottom: 2px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: var(--interlineado-normal);
    font-weight: var(--peso-medio);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.ev-cal-event-chip:hover[b-2srec9lhca] {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* ─── Timeline ────────────────────────────────────────────────────────────── */
.ev-timeline-wrap[b-2srec9lhca] {
    max-width: 760px;
    margin: 0 auto;
    padding-top: var(--espacio-2);
}

.ev-tl-section-title[b-2srec9lhca] {
    font-size: var(--texto-xs);
    font-weight: var(--peso-bold);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    color: var(--text-heading);
    margin-bottom: var(--espacio-3);
    padding-bottom: var(--espacio-2);
    border-bottom: 2px solid var(--borde-sutil);
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

.ev-tl-item[b-2srec9lhca] {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: var(--espacio-2);
    cursor: pointer;
    border-radius: var(--radio-10);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.ev-tl-item:hover[b-2srec9lhca] {
    transform: translateX(4px);
    box-shadow: var(--shadow-lg);
}

.ev-tl-date-badge[b-2srec9lhca] {
    width: 52px;
    min-width: 52px;
    background: var(--primary-gradient);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--espacio-2) 0;
    color: var(--text-inverso);
}

.ev-tl-date-badge-past[b-2srec9lhca] {
    background: var(--gris-700);
}

.ev-tl-day[b-2srec9lhca] {
    font-size: var(--texto-lg);
    font-weight: var(--peso-bold);
    line-height: 1;
}

.ev-tl-month[b-2srec9lhca] {
    font-size: 0.63rem;
    text-transform: uppercase;
    opacity: 0.9;
    font-weight: var(--peso-semibold);
    letter-spacing: var(--interletra-amplia);
}

.ev-tl-connector[b-2srec9lhca] {
    width: 4px;
    background: currentColor;
    opacity: 0.25;
}

.ev-tl-connector-past[b-2srec9lhca] {
    background: var(--gris-400);
    opacity: 0.4;
}

.ev-tl-content[b-2srec9lhca] {
    flex: 1;
    background: var(--surface-card);
    border: 1px solid var(--borde-sutil);
    border-left: none;
    border-radius: 0 var(--radio-10) var(--radio-10) 0;
    padding: var(--espacio-3) var(--espacio-4);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
}

.ev-tl-dot[b-2srec9lhca] {
    width: 10px;
    height: 10px;
    border-radius: var(--radio-full);
    flex-shrink: 0;
}

.ev-tl-dot-past[b-2srec9lhca] {
    background: var(--gris-400);
}

.ev-tl-info[b-2srec9lhca] {
    flex: 1;
    min-width: 0;
}

.ev-tl-item-past .ev-tl-info .fw-semibold[b-2srec9lhca] {
    color: var(--text-muted);
}

/* ─── Modal overlay ───────────────────────────────────────────────────────── */
.ev-overlay[b-2srec9lhca] {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay-carga);
    background: var(--overlay-oscuro-55);
    display: flex;
    padding: var(--espacio-4);
    overflow-y: auto;
    animation: ev-fade-in-b-2srec9lhca 0.2s ease;
}

@keyframes ev-fade-in-b-2srec9lhca {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ev-modal[b-2srec9lhca] {
    background: var(--surface-card);
    border-radius: var(--radio-16);
    width: 100%;
    max-width: 660px;
    margin: auto;
    box-shadow: var(--shadow-xl);
    animation: ev-slide-in-b-2srec9lhca 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
}

@keyframes ev-slide-in-b-2srec9lhca {
    from { opacity: 0; transform: translateY(-20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)     scale(1);    }
}

.ev-modal-cover[b-2srec9lhca] {
    width: 100%;
    height: 260px;
    position: relative;
    overflow: hidden;
    border-radius: var(--radio-16) var(--radio-16) 0 0;
    background: var(--gris-950);
}

.ev-modal-cover iframe[b-2srec9lhca] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.ev-modal-cover-bg[b-2srec9lhca] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
}

.ev-modal-cover-img-only[b-2srec9lhca] {
    background: var(--primary-gradient);
}

.ev-modal-cover-img-only img[b-2srec9lhca] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ev-modal-cover-gradient[b-2srec9lhca] {
    position: absolute;
    inset: 0;
    background: var(--primary-gradient);
    opacity: 0.9;
}

.ev-play-btn[b-2srec9lhca] {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 72px;
    height: 72px;
    border-radius: var(--radio-full);
    border: none;
    background: var(--overlay-claro-20);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--text-inverso);
    font-size: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast);
    box-shadow: 0 4px 24px var(--overlay-oscuro-40);
    z-index: 2;
}

.ev-play-btn:hover[b-2srec9lhca] {
    transform: scale(1.12);
    background: var(--overlay-claro-30);
}

.ev-modal-header[b-2srec9lhca] {
    padding: var(--espacio-4) var(--espacio-6) 0.85rem;
    border-bottom: 1px solid var(--borde-sutil);
    position: relative;
}

.ev-modal-accent-bar[b-2srec9lhca] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--ev-accent, var(--color-accion-primaria));
    border-radius: 0 3px 3px 0;
}

.ev-modal-title-row[b-2srec9lhca] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espacio-3);
    padding-left: var(--espacio-2);
}

.ev-modal-title[b-2srec9lhca] {
    font-size: var(--texto-lg);
    font-weight: var(--peso-bold);
    color: var(--text-heading);
    margin: 0;
    line-height: 1.35;
}

.ev-modal-close[b-2srec9lhca] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--radio-full);
    border: none;
    background: var(--color-accion-secundaria-fondo);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.ev-modal-close:hover[b-2srec9lhca] {
    background: var(--color-accion-primaria);
    color: var(--text-inverso);
}

.ev-modal-body[b-2srec9lhca] {
    padding: 1.1rem var(--espacio-6) 0.5rem;
}

.ev-modal-meta[b-2srec9lhca] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem var(--espacio-4);
    font-size: var(--texto-sm);
    color: var(--text-secondary);
    padding-bottom: var(--espacio-4);
    border-bottom: 1px solid var(--borde-sutil);
    margin-bottom: var(--espacio-4);
}

.ev-modal-meta span[b-2srec9lhca] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.ev-modal-meta i[b-2srec9lhca] {
    color: var(--text-muted);
}

.ev-modal-desc[b-2srec9lhca] {
    font-size: var(--texto-sm);
    line-height: var(--interlineado-relajado);
    color: var(--text-body);
    margin-bottom: var(--espacio-2);
}

.ev-modal-desc img[b-2srec9lhca] {
    max-width: 100%;
    border-radius: var(--radio-8);
    margin: var(--espacio-2) 0;
}

.ev-modal-occurrences[b-2srec9lhca] {
    background: var(--surface-sunken);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-10);
    padding: var(--espacio-3) var(--espacio-4);
    margin-top: var(--espacio-3);
}

.ev-modal-occurrences-label[b-2srec9lhca] {
    font-size: var(--texto-xs);
    font-weight: var(--peso-bold);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    color: var(--text-heading);
    margin-bottom: var(--espacio-2);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.ev-modal-occurrences ul[b-2srec9lhca] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ev-modal-occurrences li[b-2srec9lhca] {
    font-size: var(--texto-sm);
    color: var(--text-secondary);
    padding: 0.15rem 0;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.ev-modal-occurrences li i[b-2srec9lhca] {
    color: var(--text-muted);
    font-size: 1.1rem;
}

.ev-modal-footer[b-2srec9lhca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--espacio-4) var(--espacio-6);
    border-top: 1px solid var(--borde-sutil);
    gap: var(--espacio-3);
}

.ev-btn-heart[b-2srec9lhca] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem var(--espacio-4);
    border-radius: var(--radio-20);
    border: 1.5px solid var(--borde-sutil);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-size: var(--texto-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ev-btn-heart:hover[b-2srec9lhca] {
    border-color: var(--color-destructivo);
    color: var(--color-destructivo);
}

.ev-btn-heart.liked[b-2srec9lhca] {
    background: var(--color-destructivo-fondo);
    border-color: var(--color-destructivo);
    color: var(--color-destructivo);
}

.ev-btn-heart small[b-2srec9lhca] {
    font-size: var(--texto-xs);
    color: var(--text-secondary);
}

.ev-btn-heart.liked small[b-2srec9lhca] {
    color: var(--color-destructivo);
}

.ev-btn-close-footer[b-2srec9lhca] {
    padding: 0.42rem var(--espacio-6);
    border-radius: var(--radio-20);
    border: 1.5px solid var(--color-accion-secundaria-borde);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-size: var(--texto-sm);
    font-weight: var(--peso-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ev-btn-close-footer:hover[b-2srec9lhca] {
    background: var(--color-accion-primaria);
    color: var(--text-inverso);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}
/* /Components/Pages/Eventos/FeedEventos.razor.rz.scp.css */
/* ─── Feed Layout ─────────────────────────────────────────────────────────── */

.fe-container[b-4xf0cg37h4] {
    max-width: 820px;
    margin: 0 auto;
    padding: var(--espacio-6);
}

/* ─── Section titles ──────────────────────────────────────────────────────── */

.fe-section-title[b-4xf0cg37h4] {
    font-size: var(--texto-xs);
    font-weight: var(--peso-bold);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    color: var(--text-heading);
    margin-bottom: var(--espacio-4);
    padding-bottom: var(--espacio-2);
    border-bottom: 2px solid var(--borde-sutil);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.fe-section-title-past[b-4xf0cg37h4] {
    color: var(--text-muted);
    border-bottom-color: var(--borde-sutil);
}

/* ─── Past date badge ─────────────────────────────────────────────────────── */

.fe-card-date-past[b-4xf0cg37h4] {
    background: var(--gris-700);
}

.fe-header[b-4xf0cg37h4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-7);
}

.fe-header h1[b-4xf0cg37h4] {
    font-size: var(--texto-xl);
    font-weight: var(--peso-bold);
    margin-bottom: var(--espacio-1);
    color: var(--text-heading);
}

.fe-header .subtitle[b-4xf0cg37h4] {
    color: var(--text-secondary);
    font-size: var(--texto-sm);
    margin: 0;
}

/* ─── Feed list ───────────────────────────────────────────────────────────── */

.fe-feed[b-4xf0cg37h4] {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-5);
}

/* ─── Card ────────────────────────────────────────────────────────────────── */

.fe-card[b-4xf0cg37h4] {
    background: var(--surface-card);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow .2s, transform .15s;
}

.fe-card:hover[b-4xf0cg37h4] {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.fe-card-past[b-4xf0cg37h4] {
    opacity: 0.75;
}

/* Cover image / placeholder */

.fe-cover[b-4xf0cg37h4] {
    position: relative;
    height: 200px;
    overflow: hidden;
    cursor: pointer;
    background: var(--surface-sunken);
}

.fe-cover img[b-4xf0cg37h4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}

.fe-card:hover .fe-cover img[b-4xf0cg37h4] {
    transform: scale(1.03);
}

.fe-cover-placeholder[b-4xf0cg37h4] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fe-cover-icon[b-4xf0cg37h4] {
    font-size: var(--icono-2xl);
    color: var(--overlay-claro-60);
}

/* Chip "Próximo": patrón pastel (mismo criterio que los demás badges de
   estado — el color transmite carga valorativa, no debe ser sólido). */
.fe-badge-upcoming[b-4xf0cg37h4] {
    position: absolute;
    top: var(--espacio-3);
    right: var(--espacio-3);
    background: var(--color-exito-fondo);
    color: var(--color-exito-texto);
    font-size: 0.72rem;
    font-weight: var(--peso-semibold);
    padding: 0.2rem var(--espacio-3);
    border-radius: var(--radio-20);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    box-shadow: var(--shadow-sm);
}

/* Card body */

.fe-card-body[b-4xf0cg37h4] {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-4);
    padding: var(--espacio-4) var(--espacio-5);
}

.fe-card-date[b-4xf0cg37h4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
    background: var(--primary-gradient);
    border-radius: var(--radio-8);
    padding: 0.4rem var(--espacio-2);
    flex-shrink: 0;
}

.fe-day[b-4xf0cg37h4] {
    font-size: var(--texto-lg);
    font-weight: var(--peso-bold);
    line-height: 1;
    color: var(--text-inverso);
}

.fe-month-year[b-4xf0cg37h4] {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--overlay-claro-85);
    text-align: center;
    letter-spacing: 0.3px;
}

.fe-card-info[b-4xf0cg37h4] {
    flex: 1;
    cursor: pointer;
}

.fe-card-title[b-4xf0cg37h4] {
    font-size: var(--texto-base);
    font-weight: var(--peso-bold);
    margin-bottom: 0.3rem;
    color: var(--text-heading);
}

.fe-card-meta[b-4xf0cg37h4] {
    font-size: var(--texto-sm);
    color: var(--text-secondary);
}

/* Actions bar */

.fe-card-actions[b-4xf0cg37h4] {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    padding: 0.6rem var(--espacio-5);
    border-top: 1px solid var(--borde-sutil);
    background: var(--surface-sunken);
}

/* Like button */

.fe-like-btn[b-4xf0cg37h4] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: 1.5px solid var(--borde-sutil);
    border-radius: var(--radio-20);
    padding: 0.25rem var(--espacio-3);
    font-size: var(--texto-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .15s;
}

.fe-like-btn:hover[b-4xf0cg37h4] {
    border-color: var(--color-destructivo);
    color: var(--color-destructivo);
    background: var(--color-destructivo-fondo);
}

.fe-like-btn.liked[b-4xf0cg37h4] {
    border-color: var(--color-destructivo);
    color: var(--color-destructivo);
    background: var(--color-destructivo-fondo);
}

.fe-like-btn .bi-heart-fill[b-4xf0cg37h4] {
    color: var(--color-destructivo);
}

/* ─── Modal overlay (shared .ev-* classes) ───────────────────────────────── */

.ev-overlay[b-4xf0cg37h4] {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay-carga);
    background: var(--overlay-oscuro-55);
    display: flex;
    padding: var(--espacio-4);
    overflow-y: auto;
    animation: ev-fade-in-b-4xf0cg37h4 0.2s ease;
}

@keyframes ev-fade-in-b-4xf0cg37h4 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ev-modal[b-4xf0cg37h4] {
    background: var(--surface-card);
    border-radius: var(--radio-16);
    width: 100%;
    max-width: 660px;
    margin: auto;
    box-shadow: var(--shadow-xl);
    animation: ev-slide-in-b-4xf0cg37h4 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
}

@keyframes ev-slide-in-b-4xf0cg37h4 {
    from { opacity: 0; transform: translateY(-20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)     scale(1);    }
}

.ev-modal-cover[b-4xf0cg37h4] {
    width: 100%;
    height: 260px;
    position: relative;
    overflow: hidden;
    border-radius: var(--radio-16) var(--radio-16) 0 0;
    background: var(--gris-950);
}

.ev-modal-cover iframe[b-4xf0cg37h4] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.ev-modal-cover-bg[b-4xf0cg37h4] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
}

.ev-modal-cover-img-only[b-4xf0cg37h4] {
    background: var(--primary-gradient);
}

.ev-modal-cover-img-only img[b-4xf0cg37h4] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ev-modal-cover-gradient[b-4xf0cg37h4] {
    position: absolute;
    inset: 0;
    background: var(--primary-gradient);
    opacity: 0.9;
}

.ev-play-btn[b-4xf0cg37h4] {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 72px;
    height: 72px;
    border-radius: var(--radio-full);
    border: none;
    background: var(--overlay-claro-20);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--text-inverso);
    font-size: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast);
    box-shadow: 0 4px 24px var(--overlay-oscuro-40);
    z-index: 2;
}

.ev-play-btn:hover[b-4xf0cg37h4] {
    transform: scale(1.12);
    background: var(--overlay-claro-30);
}

.ev-modal-header[b-4xf0cg37h4] {
    padding: var(--espacio-4) var(--espacio-6) 0.85rem;
    border-bottom: 1px solid var(--borde-sutil);
    position: relative;
}

.ev-modal-accent-bar[b-4xf0cg37h4] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--ev-accent, var(--color-accion-primaria));
    border-radius: 0 3px 3px 0;
}

.ev-modal-title-row[b-4xf0cg37h4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espacio-3);
    padding-left: var(--espacio-2);
}

.ev-modal-title[b-4xf0cg37h4] {
    font-size: var(--texto-lg);
    font-weight: var(--peso-bold);
    color: var(--text-heading);
    margin: 0;
    line-height: 1.35;
}

.ev-modal-close[b-4xf0cg37h4] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--radio-full);
    border: none;
    background: var(--color-accion-secundaria-fondo);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.ev-modal-close:hover[b-4xf0cg37h4] {
    background: var(--color-accion-primaria);
    color: var(--text-inverso);
}

.ev-modal-body[b-4xf0cg37h4] {
    padding: 1.1rem var(--espacio-6) 0.5rem;
}

.ev-modal-meta[b-4xf0cg37h4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem var(--espacio-4);
    font-size: var(--texto-sm);
    color: var(--text-secondary);
    padding-bottom: var(--espacio-4);
    border-bottom: 1px solid var(--borde-sutil);
    margin-bottom: var(--espacio-4);
}

.ev-modal-meta span[b-4xf0cg37h4] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.ev-modal-meta i[b-4xf0cg37h4] {
    color: var(--text-muted);
}

.ev-modal-desc[b-4xf0cg37h4] {
    font-size: var(--texto-sm);
    line-height: var(--interlineado-relajado);
    color: var(--text-body);
    margin-bottom: var(--espacio-2);
}

.ev-modal-desc img[b-4xf0cg37h4] {
    max-width: 100%;
    border-radius: var(--radio-8);
    margin: var(--espacio-2) 0;
}

.ev-modal-occurrences[b-4xf0cg37h4] {
    background: var(--surface-sunken);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-10);
    padding: var(--espacio-3) var(--espacio-4);
    margin-top: var(--espacio-3);
}

.ev-modal-occurrences-label[b-4xf0cg37h4] {
    font-size: var(--texto-xs);
    font-weight: var(--peso-bold);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    color: var(--text-heading);
    margin-bottom: var(--espacio-2);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.ev-modal-occurrences ul[b-4xf0cg37h4] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ev-modal-occurrences li[b-4xf0cg37h4] {
    font-size: var(--texto-sm);
    color: var(--text-secondary);
    padding: 0.15rem 0;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.ev-modal-occurrences li i[b-4xf0cg37h4] {
    color: var(--text-muted);
    font-size: 1.1rem;
}

.ev-modal-footer[b-4xf0cg37h4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--espacio-4) var(--espacio-6);
    border-top: 1px solid var(--borde-sutil);
    gap: var(--espacio-3);
}

.ev-btn-heart[b-4xf0cg37h4] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem var(--espacio-4);
    border-radius: var(--radio-20);
    border: 1.5px solid var(--borde-sutil);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-size: var(--texto-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ev-btn-heart:hover[b-4xf0cg37h4] {
    border-color: var(--color-destructivo);
    color: var(--color-destructivo);
}

.ev-btn-heart.liked[b-4xf0cg37h4] {
    background: var(--color-destructivo-fondo);
    border-color: var(--color-destructivo);
    color: var(--color-destructivo);
}

.ev-btn-heart small[b-4xf0cg37h4] {
    font-size: var(--texto-xs);
    color: var(--text-secondary);
}

.ev-btn-heart.liked small[b-4xf0cg37h4] {
    color: var(--color-destructivo);
}

.ev-btn-close-footer[b-4xf0cg37h4] {
    padding: 0.42rem var(--espacio-6);
    border-radius: var(--radio-20);
    border: 1.5px solid var(--color-accion-secundaria-borde);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-size: var(--texto-sm);
    font-weight: var(--peso-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ev-btn-close-footer:hover[b-4xf0cg37h4] {
    background: var(--color-accion-primaria);
    color: var(--text-inverso);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}
/* /Components/Pages/Eventos/GestionEventos.razor.rz.scp.css */
/* ─── Layout ──────────────────────────────────────────────────────────────── */
.ge-container[b-c69rn0tcyq] {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--espacio-6);
}

.ge-header[b-c69rn0tcyq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--espacio-6);
    flex-wrap: wrap;
    gap: var(--espacio-4);
}

.ge-header h1[b-c69rn0tcyq] {
    font-size: var(--texto-xl);
    font-weight: var(--peso-bold);
    margin-bottom: var(--espacio-1);
    color: var(--text-heading);
}

.ge-header .subtitle[b-c69rn0tcyq] {
    color: var(--text-secondary);
    margin: 0;
    font-size: var(--texto-sm);
}

/* ─── Botón nuevo evento (primario: carbón sólido, sin degradado) ───────────── */
.ge-btn-nuevo[b-c69rn0tcyq] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem var(--espacio-5);
    border: none;
    border-radius: var(--radio-10);
    background: var(--color-accion-primaria);
    color: var(--text-inverso);
    font-weight: var(--peso-semibold);
    font-size: var(--texto-sm);
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.ge-btn-nuevo:hover[b-c69rn0tcyq] {
    background: var(--color-accion-primaria-hover);
    transform: translateY(-1px);
}

/* ─── Tabla ───────────────────────────────────────────────────────────────── */
.ge-table-wrapper[b-c69rn0tcyq] {
    background: var(--surface-card);
    border-radius: var(--radio-16);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin-top: var(--espacio-4);
}

.ge-table[b-c69rn0tcyq] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-sm);
}

.ge-table thead tr[b-c69rn0tcyq] {
    background: var(--surface-sunken);
    border-bottom: 2px solid var(--borde-sutil);
}

.ge-table thead th[b-c69rn0tcyq] {
    padding: 0.85rem var(--espacio-4);
    font-weight: var(--peso-bold);
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    color: var(--text-secondary);
}

.ge-table tbody tr[b-c69rn0tcyq] {
    border-bottom: 1px solid var(--borde-sutil);
    transition: background var(--transition-fast);
}

.ge-table tbody tr:last-child[b-c69rn0tcyq] {
    border-bottom: none;
}

.ge-table tbody tr:hover[b-c69rn0tcyq] {
    background: var(--surface-sunken);
}

.ge-table tbody td[b-c69rn0tcyq] {
    padding: 0.75rem var(--espacio-4);
    vertical-align: middle;
    color: var(--text-body);
}

.ge-color-dot[b-c69rn0tcyq] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: var(--radio-full);
    vertical-align: middle;
    box-shadow: var(--shadow-sm);
}

.ge-badge[b-c69rn0tcyq] {
    display: inline-block;
    padding: 0.3rem var(--espacio-3);
    border-radius: var(--radio-20);
    font-size: var(--texto-xs);
    font-weight: var(--peso-semibold);
    letter-spacing: 0.3px;
}

.ge-badge-activo[b-c69rn0tcyq] {
    background: var(--color-exito-fondo);
    color: var(--color-exito-texto);
}

.ge-badge-pasado[b-c69rn0tcyq] {
    background: var(--color-neutro-fondo);
    color: var(--color-neutro-texto);
}

.ge-btn-edit[b-c69rn0tcyq],
.ge-btn-delete[b-c69rn0tcyq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radio-8);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background var(--transition-fast), transform var(--transition-fast);
    margin: 0 2px;
}

/* Solo 2 acciones por fila (editar + eliminar): no aplica la excepción
   de color de íconos (requiere 3+ acciones compactas) — editar queda
   en gris genérico, eliminar en rojo por ser destructiva. */
.ge-btn-edit[b-c69rn0tcyq] {
    background: var(--color-accion-secundaria-fondo);
    color: var(--text-secondary);
}

.ge-btn-edit:hover[b-c69rn0tcyq] {
    background: var(--color-accion-secundaria-fondo-hover);
    transform: scale(1.08);
}

.ge-btn-delete[b-c69rn0tcyq] {
    background: var(--color-destructivo-fondo);
    color: var(--color-destructivo);
}

.ge-btn-delete:hover[b-c69rn0tcyq] {
    background: var(--color-destructivo);
    color: var(--text-inverso);
    transform: scale(1.08);
}

/* ─── Overlay ─────────────────────────────────────────────────────────────── */
.ge-overlay[b-c69rn0tcyq] {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay-carga);
    background: var(--overlay-oscuro-55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem var(--espacio-4);
    overflow-y: auto;
}

/* ─── Modal ───────────────────────────────────────────────────────────────── */
.ge-modal[b-c69rn0tcyq] {
    background: var(--surface-card);
    border-radius: var(--radio-16);
    width: 100%;
    max-width: 860px;
    margin: auto;
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Encabezado del modal: acento de marca en vez de degradado púrpura sólido
   (mismo criterio de "superficie carbón" ya aplicado en cards de otros
   módulos — carbón + franja tricolor, no un color decorativo). */
.ge-modal-header[b-c69rn0tcyq] {
    background: var(--surface-card);
    padding: 1.25rem var(--espacio-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    border-bottom: 1px solid var(--borde-sutil);
    position: relative;
}

.ge-modal-header[b-c69rn0tcyq]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--menu-activo-borde);
}

.ge-modal-title[b-c69rn0tcyq] {
    margin: 0;
    font-size: var(--texto-lg);
    font-weight: var(--peso-bold);
    color: var(--text-heading);
    letter-spacing: 0.3px;
}

.ge-btn-close[b-c69rn0tcyq] {
    background: var(--color-accion-secundaria-fondo);
    border: none;
    color: var(--text-secondary);
    width: 34px;
    height: 34px;
    border-radius: var(--radio-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s;
    flex-shrink: 0;
}

.ge-btn-close:hover[b-c69rn0tcyq] {
    background: var(--color-accion-secundaria-fondo-hover);
}

.ge-modal-body[b-c69rn0tcyq] {
    padding: var(--espacio-6);
    overflow-y: auto;
    max-height: calc(100vh - 12rem);
}

/* ─── Formulario ──────────────────────────────────────────────────────────── */
.ge-form-section[b-c69rn0tcyq] {
    margin-bottom: var(--espacio-5);
    padding-bottom: var(--espacio-5);
    border-bottom: 1px solid var(--borde-sutil);
}

.ge-form-section-last[b-c69rn0tcyq] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.ge-label[b-c69rn0tcyq] {
    display: block;
    font-size: 0.82rem;
    font-weight: var(--peso-semibold);
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
    letter-spacing: 0.2px;
}

.ge-input[b-c69rn0tcyq] {
    width: 100%;
    padding: 0.55rem 0.85rem;
    border: 1.5px solid var(--borde-input);
    border-radius: var(--radio-8);
    font-size: var(--texto-sm);
    color: var(--text-body);
    background: var(--surface-card);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    box-sizing: border-box;
}

.ge-input:focus[b-c69rn0tcyq] {
    border-color: var(--borde-input-foco);
    box-shadow: 0 0 0 3px var(--color-foco-anillo);
    background: var(--surface-card);
}

.ge-input-invalid[b-c69rn0tcyq] {
    border-color: var(--color-destructivo) !important;
    box-shadow: 0 0 0 3px var(--color-destructivo-fondo) !important;
}

.ge-input-color[b-c69rn0tcyq] {
    padding: 0.3rem;
    height: 44px;
    cursor: pointer;
    border-radius: var(--radio-8);
}

.ge-input-sm[b-c69rn0tcyq] {
    padding: 0.4rem var(--espacio-3);
    font-size: 0.82rem;
}

.ge-hint[b-c69rn0tcyq] {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
}

/* ─── Checkboxes ──────────────────────────────────────────────────────────── */
.ge-check-wrap[b-c69rn0tcyq] {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    padding: 0.55rem 0;
}

.ge-check-input[b-c69rn0tcyq] {
    width: 17px;
    height: 17px;
    accent-color: var(--color-accion-primaria);
    cursor: pointer;
    flex-shrink: 0;
}

.ge-check-label[b-c69rn0tcyq] {
    font-size: 0.88rem;
    color: var(--text-secondary);
    font-weight: var(--peso-medio);
    cursor: pointer;
    user-select: none;
}

/* ─── Ocurrencias ─────────────────────────────────────────────────────────── */
.ge-ocurrencias-box[b-c69rn0tcyq] {
    background: var(--surface-sunken);
    border-radius: var(--radio-12);
    padding: var(--espacio-4) 1.1rem;
    border: 1.5px solid var(--borde-sutil);
}

.ge-btn-agregar[b-c69rn0tcyq] {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem var(--espacio-4);
    border: 1.5px solid var(--color-accion-secundaria-borde);
    border-radius: var(--radio-8);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: var(--peso-semibold);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.ge-btn-agregar:hover[b-c69rn0tcyq] {
    background: var(--color-accion-primaria);
    color: var(--text-inverso);
    border-color: var(--color-accion-primaria);
}

.ge-btn-eliminar-oc[b-c69rn0tcyq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--rojo-cgt-100);
    border-radius: var(--radio-8);
    background: var(--surface-card);
    color: var(--color-destructivo);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.ge-btn-eliminar-oc:hover[b-c69rn0tcyq] {
    background: var(--color-destructivo);
    color: var(--text-inverso);
    border-color: var(--color-destructivo);
}

/* ─── Imagen preview ──────────────────────────────────────────────────────── */
.ge-img-preview[b-c69rn0tcyq] {
    max-height: 100px;
    max-width: 100%;
    border-radius: var(--radio-10);
    object-fit: cover;
    border: 2px solid var(--borde-sutil);
    box-shadow: var(--shadow-sm);
}

/* ─── Quill editor ────────────────────────────────────────────────────────── */
.ge-quill-editor[b-c69rn0tcyq] {
    min-height: 200px;
    font-size: var(--texto-sm);
    border-radius: 0 0 var(--radio-8) var(--radio-8);
}

.ql-toolbar.ql-snow[b-c69rn0tcyq] {
    border-radius: var(--radio-8) var(--radio-8) 0 0;
    background: var(--surface-sunken);
    border-color: var(--borde-input) !important;
}

.ql-container.ql-snow[b-c69rn0tcyq] {
    border-radius: 0 0 var(--radio-8) var(--radio-8);
    border-color: var(--borde-input) !important;
}

.ql-container.ql-snow .ql-editor[b-c69rn0tcyq] {
    min-height: 160px;
    color: var(--text-body);
}

/* ─── Footer del modal ────────────────────────────────────────────────────── */
.ge-modal-footer[b-c69rn0tcyq] {
    padding: var(--espacio-4) var(--espacio-6);
    border-top: 1px solid var(--borde-sutil);
    display: flex;
    justify-content: flex-end;
    gap: var(--espacio-3);
    flex-shrink: 0;
    background: var(--surface-sunken);
}

.ge-btn-cancelar[b-c69rn0tcyq] {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1.2rem;
    border: 1.5px solid var(--color-accion-secundaria-borde);
    border-radius: var(--radio-10);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-weight: var(--peso-semibold);
    font-size: 0.88rem;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.ge-btn-cancelar:hover[b-c69rn0tcyq] {
    background: var(--color-accion-secundaria-fondo);
    border-color: var(--borde-fuerte);
}

.ge-btn-guardar[b-c69rn0tcyq] {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem var(--espacio-7);
    border: none;
    border-radius: var(--radio-10);
    background: var(--color-accion-primaria);
    color: var(--text-inverso);
    font-weight: var(--peso-bold);
    font-size: 0.88rem;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.ge-btn-guardar:hover:not(:disabled)[b-c69rn0tcyq] {
    background: var(--color-accion-primaria-hover);
    transform: translateY(-1px);
}

.ge-btn-guardar:disabled[b-c69rn0tcyq] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ─── Spinner ─────────────────────────────────────────────────────────────── */
.ge-spinner[b-c69rn0tcyq] {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid var(--borde-sutil);
    border-top-color: var(--color-accion-primaria);
    border-radius: var(--radio-full);
    animation: ge-spin-b-c69rn0tcyq 0.8s linear infinite;
}

@keyframes ge-spin-b-c69rn0tcyq {
    to { transform: rotate(360deg); }
}

.ge-saving-text[b-c69rn0tcyq] {
    color: var(--text-heading);
    font-weight: var(--peso-medio);
    font-size: var(--texto-sm);
}
/* /Components/Pages/Financiero/CrucesCaja.razor.rz.scp.css */
/* Cruces de Caja — módulo Financiero
   Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md. */

/* Container */
.cc-container[b-jhso3g5a8g] {
    padding: var(--espacio-6);
    max-width: 1400px;
}

/* Cruce anulado: mismo tratamiento visual que LibroDiario.razor.css
   .row-anulado, incluido el mismo ajuste de contraste (--gris-700 en vez
   de --gris-500, que daba 2.92:1 — bajo AA). */
.cc-row-anulado td[b-jhso3g5a8g] {
    background: var(--color-neutro-fondo) !important;
    color: var(--gris-700);
}

/* Header */
.cc-header[b-jhso3g5a8g] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--espacio-6);
    gap: var(--espacio-4);
}

.cc-header h1[b-jhso3g5a8g] {
    font-size: var(--texto-xl);
    font-weight: var(--peso-bold);
    color: var(--text-heading);
    margin-bottom: var(--espacio-1);
}

.cc-header .subtitle[b-jhso3g5a8g] {
    color: var(--text-secondary);
    margin: 0;
}

/* Último cruce card headers — dos estados con carga valorativa real
   (cuadrado vs. con diferencia), no un total neutro: se mantienen en
   verde/amarillo. "Sobrante" y "faltante" no se distinguen hoy en el
   código (solo se compara Diferencia == 0, sin mirar el signo del resto)
   — ver tokens faltantes en el entregable de esta migración; no se
   agregó una tercera rama acá para no tocar lógica. */
.cc-cruce-header-success[b-jhso3g5a8g] {
    padding: var(--espacio-3) var(--espacio-5);
    background: var(--color-exito-fondo);
    border-bottom: 2px solid var(--color-exito);
    color: var(--color-exito-texto);
    font-weight: var(--peso-semibold);
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

.cc-cruce-header-warning[b-jhso3g5a8g] {
    padding: var(--espacio-3) var(--espacio-5);
    background: var(--color-advertencia-fondo);
    border-bottom: 2px solid var(--color-advertencia);
    color: var(--color-advertencia-texto);
    font-weight: var(--peso-semibold);
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

/* Último cruce body layout */
.cc-cruce-body[b-jhso3g5a8g] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--espacio-6);
    align-items: start;
}

.cc-cruce-fields[b-jhso3g5a8g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espacio-3) var(--espacio-6);
}

.cc-cruce-resultado[b-jhso3g5a8g] {
    text-align: center;
    padding: var(--espacio-5);
    border-radius: var(--radio-8);
    background: var(--gris-50);
    border: 1px solid var(--borde-sutil);
}

.cc-saldo-fisico-value[b-jhso3g5a8g] {
    font-size: var(--texto-xl);
    font-weight: var(--peso-bold);
    color: var(--text-heading);
    margin: var(--espacio-1) 0;
}

.cc-diferencia-value[b-jhso3g5a8g] {
    font-size: var(--texto-lg);
    font-weight: var(--peso-bold);
    margin: var(--espacio-1) 0;
}

.cc-observaciones[b-jhso3g5a8g] {
    margin-top: var(--espacio-4);
    padding-top: var(--espacio-4);
    border-top: 1px solid var(--borde-sutil);
}

/* Modal result grids */
.cc-modal-grid-3[b-jhso3g5a8g] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-4);
}

.cc-modal-grid-2[b-jhso3g5a8g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-4);
}

.cc-modal-full[b-jhso3g5a8g] {
    margin-bottom: var(--espacio-4);
}

/* Result cards in modal */
.cc-result-card[b-jhso3g5a8g] {
    border-radius: var(--radio-8);
    padding: var(--espacio-4);
    text-align: center;
    border: 1px solid var(--borde-sutil);
    background: var(--gris-50);
}

/* Entradas/Salidas del resultado del cruce: mismo criterio que
   LibroDiario — un total de entradas o de salidas es un hecho contable,
   no un logro ni un problema (§7.4, fila "Total, sin estado"). Antes
   accent-success/accent-danger; unificadas en una sola clase neutra. */
.cc-result-card.accent-neutral[b-jhso3g5a8g] {
    background: var(--surface-card);
    border-color: var(--borde-sutil);
}

.cc-result-card.accent-primary[b-jhso3g5a8g] {
    background: var(--color-neutro-fondo);
    border-color: var(--color-accion-primaria);
}

/* Card and table overrides */
[b-jhso3g5a8g] .card-header {
    background: var(--surface-card);
    color: var(--text-heading);
    border-bottom: 1px solid var(--borde-sutil);
}

[b-jhso3g5a8g] thead th {
    background: var(--gris-50);
    color: var(--text-secondary);
    font-size: var(--texto-xs);
    font-weight: var(--peso-semibold);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    border-bottom: 2px solid var(--borde-sutil);
    padding: var(--espacio-3) var(--espacio-4);
    white-space: nowrap;
}

[b-jhso3g5a8g] tbody td {
    padding: var(--espacio-3) var(--espacio-4);
    border-bottom: 1px solid var(--gris-100);
    vertical-align: middle;
}

/* Responsive */
@media (max-width: 900px) {
    .cc-cruce-body[b-jhso3g5a8g] { grid-template-columns: 1fr; }
    .cc-cruce-fields[b-jhso3g5a8g] { grid-template-columns: 1fr 1fr; }
    .cc-modal-grid-3[b-jhso3g5a8g] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .cc-cruce-fields[b-jhso3g5a8g] { grid-template-columns: 1fr; }
    .cc-modal-grid-3[b-jhso3g5a8g],
    .cc-modal-grid-2[b-jhso3g5a8g] { grid-template-columns: 1fr; }
}

/* Modal */
.modal[b-jhso3g5a8g] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--espacio-8) var(--espacio-4);
    overflow-y: auto;
}

.modal-dialog[b-jhso3g5a8g] {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.modal-content[b-jhso3g5a8g] {
    background: var(--surface-card);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

/* Card clara con acento de marca en el borde — mismo patrón que
   ::deep .card-header (arriba) y el resto del sistema (DetalleCruce,
   LibroDiario, GestionCursos, etc.); antes bg-primary text-white
   (--primary-gradient carbón sólido), inconsistente con el patrón de
   encabezados claros ya establecido en el resto de Financiero. */
.modal-header[b-jhso3g5a8g] {
    padding: var(--espacio-4) var(--espacio-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface-card);
    color: var(--text-heading);
    border-bottom: 1px solid var(--borde-sutil);
    position: relative;
    overflow: hidden;
}

.modal-header[b-jhso3g5a8g]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--menu-activo-borde);
}

.modal-title[b-jhso3g5a8g] {
    font-size: var(--texto-base);
    font-weight: var(--peso-semibold);
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
}

.modal-body[b-jhso3g5a8g] {
    padding: var(--espacio-6);
    background: var(--surface-card);
}

.modal-footer[b-jhso3g5a8g] {
    padding: var(--espacio-4) var(--espacio-6);
    display: flex;
    justify-content: flex-end;
    gap: var(--espacio-2);
    border-top: 1px solid var(--borde-sutil);
    background: var(--gris-50);
}

.btn-close[b-jhso3g5a8g] {
    background: transparent;
    border: none;
    font-size: var(--texto-xl);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.7;
    color: inherit;
}

    .btn-close[b-jhso3g5a8g]::before {
        content: "×";
    }

    .btn-close:hover[b-jhso3g5a8g] {
        opacity: 1;
    }
/* /Components/Pages/Financiero/DetalleCruce.razor.rz.scp.css */
/* Detalle Cruce de Caja — módulo Financiero
   Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md. */

.dc-container[b-j5luyq25ck] {
    padding: var(--espacio-6);
    max-width: 1000px;
}

.dc-header[b-j5luyq25ck] {
    margin-bottom: var(--espacio-6);
}

.dc-header h1[b-j5luyq25ck] {
    font-size: var(--texto-xl);
    font-weight: var(--peso-bold);
    color: var(--text-heading);
    margin-bottom: var(--espacio-1);
}

.dc-header .subtitle[b-j5luyq25ck] {
    color: var(--text-secondary);
    margin: 0;
}

/* Card-header claro con acento de marca en el borde — antes heredaba el
   degradado carbón sólido de .card-header (app.css), el mismo patrón que
   Docs/design-system/AJUSTES-PENDIENTES.md registra sin resolver para
   Caja/DetalleAportesAfiliado.razor. Mismo tratamiento que
   Home.razor.css .welcome-banner (card clara + borde tricolor via
   ::before, no border-image: con un ancho explícito se aplica a los
   cuatro lados, no solo al izquierdo). */
[b-j5luyq25ck] .card-header {
    background: var(--surface-card);
    color: var(--text-heading);
    border-bottom: 1px solid var(--borde-sutil);
    position: relative;
    overflow: hidden;
}

[b-j5luyq25ck] .card-header::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--menu-activo-borde);
}

/* Estado alert — dos estados con carga valorativa real (cuadrado vs. con
   diferencia), mismos tokens que .alert-success/.alert-warning
   (app.css), reproducidos acá porque el markup necesita que .dc-estado-alert
   se combine con el color sin depender de la clase base .alert. */
.dc-alert-success[b-j5luyq25ck] {
    background: var(--color-exito-fondo);
    border: 1px solid var(--color-exito);
    color: var(--color-exito-texto);
    border-radius: var(--radio-8);
}

.dc-alert-warning[b-j5luyq25ck] {
    background: var(--color-advertencia-fondo);
    border: 1px solid var(--color-advertencia);
    color: var(--color-advertencia-texto);
    border-radius: var(--radio-8);
}

/* "Cruce Anulado" usa la clase Bootstrap-like .alert-secondary, que no
   existe en app.css (ningún otro módulo la usa) — sin esta regla el
   bloque queda sin fondo/color, solo con el padding base de .alert.
   Gris neutro: un cruce anulado es un hecho de auditoría, no una
   urgencia — mismo criterio que "Fallecido" en Censo/Caja. */
.dc-estado-alert.alert-secondary[b-j5luyq25ck] {
    background: var(--color-neutro-fondo);
    border: 1px solid var(--gris-300);
    color: var(--color-neutro-texto);
    border-radius: var(--radio-8);
}

.dc-estado-alert[b-j5luyq25ck] {
    padding: var(--espacio-4) var(--espacio-5);
    margin-bottom: var(--espacio-6);
}

.dc-estado-content[b-j5luyq25ck] {
    display: flex;
    align-items: center;
    gap: var(--espacio-4);
}

.dc-estado-icon[b-j5luyq25ck] {
    font-size: var(--icono-xl);
}

.dc-estado-title[b-j5luyq25ck] {
    font-size: var(--texto-base);
    font-weight: var(--peso-semibold);
}

.dc-estado-sub[b-j5luyq25ck] {
    font-size: var(--texto-sm);
    opacity: 0.8;
}

/* Info grid */
.dc-info-grid[b-j5luyq25ck] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--espacio-4);
}

.dc-info-item[b-j5luyq25ck] {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
}

.dc-info-item label[b-j5luyq25ck] {
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    color: var(--text-secondary);
    font-weight: var(--peso-semibold);
    margin: 0;
}

.dc-info-item span[b-j5luyq25ck] {
    font-weight: var(--peso-medio);
    color: var(--text-heading);
}

.dc-observaciones[b-j5luyq25ck] {
    padding: var(--espacio-3) var(--espacio-4);
    background: var(--gris-50);
    border-radius: var(--radio-6);
    border-left: 3px solid var(--color-accion-primaria);
}

.dc-observaciones label[b-j5luyq25ck] {
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    color: var(--text-secondary);
    font-weight: var(--peso-semibold);
    display: block;
    margin-bottom: var(--espacio-1);
}

/* Financiero grid */
.dc-financiero-grid[b-j5luyq25ck] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espacio-4);
}

@media (max-width: 768px) {
    .dc-financiero-grid[b-j5luyq25ck] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .dc-financiero-grid[b-j5luyq25ck] {
        grid-template-columns: 1fr;
    }
}

.dc-fin-card[b-j5luyq25ck] {
    padding: var(--espacio-4);
    border-radius: var(--radio-8);
    background: var(--gris-50);
    border: 1px solid var(--borde-sutil);
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
}

.dc-fin-value[b-j5luyq25ck] {
    font-size: var(--texto-lg);
    font-weight: var(--peso-bold);
}

/* Entradas y Salidas: sin acento de color — mismo criterio que
   LibroDiario/CrucesCaja (§7.4, "Total, sin estado"). Antes
   dc-fin-success/dc-fin-danger (mismo nombre de clase que usa la tarjeta
   de Diferencia cuadrada, ver abajo, pero para un caso semántico
   distinto); unificadas en una sola clase neutra. */
.dc-fin-neutral[b-j5luyq25ck] {
    border-left: 3px solid var(--borde-sutil);
}

/* Diferencia == 0 (caja cuadrada): estado con carga valorativa real, no
   un total — se mantiene en verde. */
.dc-fin-success[b-j5luyq25ck] {
    border-left: 3px solid var(--color-exito);
}

/* Diferencia ≠ 0 (caja con diferencia): estado con carga valorativa
   real, no un total — se mantiene en ámbar. */
.dc-fin-warning[b-j5luyq25ck] {
    border-left: 3px solid var(--color-advertencia);
}

/* Saldo Calculado / Saldo Físico: cifras de referencia, mismo acento
   carbón que "Saldo Actual"/"Saldo Físico" en LibroDiario y CrucesCaja. */
.dc-fin-primary[b-j5luyq25ck] {
    border-left: 3px solid var(--color-accion-primaria);
}
/* /Components/Pages/Financiero/DetalleMovimiento.razor.rz.scp.css */
/* Detalle de Movimiento — módulo Financiero
   Mismo patrón de tokens que DetalleCruce.razor.css — ver
   Docs/design-system/SISTEMA-DISENO.md. */

.dm-container[b-aahepkzx1m] {
    padding: var(--espacio-6);
    max-width: 1000px;
}

.dm-header[b-aahepkzx1m] {
    margin-bottom: var(--espacio-6);
}

.dm-header h1[b-aahepkzx1m] {
    font-size: var(--texto-xl);
    font-weight: var(--peso-bold);
    color: var(--text-heading);
    margin-bottom: var(--espacio-1);
}

.dm-header .subtitle[b-aahepkzx1m] {
    color: var(--text-secondary);
    margin: 0;
}

/* Card-header claro con acento de marca en el borde — mismo patrón que
   DetalleCruce.razor.css/LibroDiario.razor.css en vez del degradado
   carbón sólido de .card-header (app.css). */
[b-aahepkzx1m] .card-header {
    background: var(--surface-card);
    color: var(--text-heading);
    border-bottom: 1px solid var(--borde-sutil);
    position: relative;
    overflow: hidden;
}

[b-aahepkzx1m] .card-header::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--menu-activo-borde);
}

/* Valor del movimiento — sin acento de color: es un hecho del libro
   contable, no un logro ni un problema (§7.4 de SISTEMA-DISENO.md,
   mismo criterio que LibroDiario/CrucesCaja). La dirección
   (Entrada/Salida) ya la comunican el ícono y el título de la card. */
.dm-valor-destacado[b-aahepkzx1m] {
    font-size: var(--texto-2xl);
    font-weight: var(--peso-bold);
    color: var(--text-heading);
}

.dm-concepto[b-aahepkzx1m] {
    color: var(--text-secondary);
    margin-top: var(--espacio-1);
}

/* "Movimiento Anulado" usa .alert-secondary, que no existe en app.css
   (ningún otro módulo la usa) — mismo tratamiento que
   DetalleCruce.razor.css .dc-estado-alert.alert-secondary. */
.dm-estado-alert.alert-secondary[b-aahepkzx1m] {
    background: var(--color-neutro-fondo);
    border: 1px solid var(--gris-300);
    color: var(--color-neutro-texto);
    border-radius: var(--radio-8);
}

.dm-estado-alert[b-aahepkzx1m] {
    padding: var(--espacio-4) var(--espacio-5);
    margin-bottom: var(--espacio-6);
}

.dm-estado-content[b-aahepkzx1m] {
    display: flex;
    align-items: center;
    gap: var(--espacio-4);
}

.dm-estado-icon[b-aahepkzx1m] {
    font-size: var(--icono-xl);
}

.dm-estado-title[b-aahepkzx1m] {
    font-size: var(--texto-base);
    font-weight: var(--peso-semibold);
}

.dm-estado-sub[b-aahepkzx1m] {
    font-size: var(--texto-sm);
    opacity: 0.8;
}

/* Info grid */
.dm-info-grid[b-aahepkzx1m] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--espacio-4);
}

.dm-info-item[b-aahepkzx1m] {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
}

.dm-info-item label[b-aahepkzx1m] {
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    color: var(--text-secondary);
    font-weight: var(--peso-semibold);
    margin: 0;
}

.dm-info-item span[b-aahepkzx1m] {
    font-weight: var(--peso-medio);
    color: var(--text-heading);
}

.dm-observaciones[b-aahepkzx1m] {
    padding: var(--espacio-3) var(--espacio-4);
    background: var(--gris-50);
    border-radius: var(--radio-6);
    border-left: 3px solid var(--color-accion-primaria);
}

.dm-observaciones label[b-aahepkzx1m] {
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    color: var(--text-secondary);
    font-weight: var(--peso-semibold);
    display: block;
    margin-bottom: var(--espacio-1);
}
/* /Components/Pages/Financiero/LibroDiario.razor.rz.scp.css */
/* Libro Diario — módulo Financiero
   Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md. */

/* Container */
.ld-container[b-5m8ma3pocn] {
    padding: var(--espacio-6);
    max-width: 1400px;
}

/* Header */
.ld-header[b-5m8ma3pocn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--espacio-6);
    gap: var(--espacio-4);
}

.ld-header h1[b-5m8ma3pocn] {
    font-size: var(--texto-xl);
    font-weight: var(--peso-bold);
    color: var(--text-heading);
    margin-bottom: var(--espacio-1);
}

.ld-header .subtitle[b-5m8ma3pocn] {
    color: var(--text-secondary);
    margin: 0;
}

.ld-header-actions[b-5m8ma3pocn] {
    display: flex;
    gap: var(--espacio-2);
    flex-shrink: 0;
}

/* Summary Grid */
.ld-summary-grid[b-5m8ma3pocn] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-6);
}

.ld-summary-card[b-5m8ma3pocn] {
    background: var(--surface-card);
    border-radius: var(--radio-12);
    padding: var(--espacio-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--borde-sutil);
}

/* Entradas y Salidas: sin acento de color. Una entrada de dinero (o una
   salida) es un hecho del libro contable, no un logro ni un problema —
   §7.4 de SISTEMA-DISENO.md reserva verde/rojo para métricas con carga
   valorativa real (positivas/vencidas), y el ejemplo textual de la fila
   gris es justo "Total, sin estado". Estas dos tarjetas SON "Total
   Entradas"/"Total Salidas": encajan ahí, no en verde/rojo por asociación
   con success/danger. Mismo criterio aplicado abajo al badge y al color
   del monto en la tabla de movimientos (antes badge bg-success/bg-danger
   y text-success/text-danger por fila) — la dirección del movimiento ya
   la comunican el ícono y el texto ("Entrada"/"Salida"), sin necesidad de
   color. "Saldo Actual" sí es un estado con carga valorativa (saludable
   vs. en rojo) y mantiene acento — ver accent-primary/accent-danger. */
.ld-summary-card.accent-neutral[b-5m8ma3pocn] {
    border-left-color: var(--borde-sutil);
}

.ld-summary-card.accent-primary[b-5m8ma3pocn] { border-left-color: var(--color-accion-primaria); }

/* Saldo Actual negativo: estado crítico real (la organización está en
   rojo), no una simple advertencia — §7.4 lo ubica en "vencidas o
   críticas" (rojo), no en "pendientes o en riesgo" (antes accent-warning,
   ámbar). Clase renombrada de accent-warning a accent-danger para que el
   nombre no mienta sobre el color que aplica. */
.ld-summary-card.accent-danger[b-5m8ma3pocn] { border-left-color: var(--color-destructivo); }

.ld-summary-label[b-5m8ma3pocn] {
    font-size: var(--texto-xs);
    font-weight: var(--peso-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    margin-bottom: var(--espacio-2);
}

.ld-summary-value[b-5m8ma3pocn] {
    font-size: var(--texto-2xl);
    font-weight: var(--peso-bold);
    color: var(--text-heading);
    line-height: 1;
}

.ld-summary-icon[b-5m8ma3pocn] {
    font-size: var(--icono-xl);
    flex-shrink: 0;
}

.ld-summary-card.accent-neutral .ld-summary-icon[b-5m8ma3pocn] { color: var(--text-secondary); opacity: 0.5; }
.ld-summary-card.accent-primary .ld-summary-icon[b-5m8ma3pocn] { color: var(--color-accion-primaria); opacity: 0.4; }
.ld-summary-card.accent-danger  .ld-summary-icon[b-5m8ma3pocn] { color: var(--color-destructivo); opacity: 0.4; }

/* Filters */
.ld-filters[b-5m8ma3pocn] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: var(--espacio-4);
    align-items: end;
}

/* Table. Texto en --gris-700 (no --gris-500, que resultaba el original
   `--gray-400`/legacy): 2.92:1 sobre --color-neutro-fondo, bajo el
   mínimo AA de 4.5:1 para texto — hallazgo de la verificación de esta
   migración. --gris-700 da 5.99:1, sigue leyéndose atenuado frente al
   texto normal (--gris-900) sin caer bajo AA. */
.row-anulado td[b-5m8ma3pocn] {
    background: var(--color-neutro-fondo) !important;
    color: var(--gris-700);
}

/* Modal form grids */
.ld-modal-grid-2[b-5m8ma3pocn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-4);
}

.ld-modal-grid-3[b-5m8ma3pocn] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-4);
}

.ld-modal-full[b-5m8ma3pocn] {
    margin-bottom: var(--espacio-4);
}

/* Card and table overrides */
[b-5m8ma3pocn] .card-header {
    background: var(--surface-card);
    color: var(--text-heading);
    border-bottom: 1px solid var(--borde-sutil);
}

[b-5m8ma3pocn] thead th {
    background: var(--gris-50);
    color: var(--text-secondary);
    font-size: var(--texto-xs);
    font-weight: var(--peso-semibold);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
    border-bottom: 2px solid var(--borde-sutil);
    padding: var(--espacio-3) var(--espacio-4);
    white-space: nowrap;
}

[b-5m8ma3pocn] tbody td {
    padding: var(--espacio-3) var(--espacio-4);
    border-bottom: 1px solid var(--gris-100);
    vertical-align: middle;
}

/* Responsive */
@media (max-width: 1100px) {
    .ld-summary-grid[b-5m8ma3pocn] { grid-template-columns: repeat(2, 1fr); }
    .ld-filters[b-5m8ma3pocn] { grid-template-columns: 1fr 1fr; }
    .ld-filters > div:last-child[b-5m8ma3pocn] { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .ld-summary-grid[b-5m8ma3pocn] { grid-template-columns: 1fr; }
    .ld-filters[b-5m8ma3pocn] { grid-template-columns: 1fr; }
    .ld-modal-grid-2[b-5m8ma3pocn],
    .ld-modal-grid-3[b-5m8ma3pocn] { grid-template-columns: 1fr; }
}

/* Modal */
.modal[b-5m8ma3pocn] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--espacio-8) var(--espacio-4);
    overflow-y: auto;
}

.modal-dialog[b-5m8ma3pocn] {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.modal-content[b-5m8ma3pocn] {
    background: var(--surface-card);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

/* Card clara con acento de marca en el borde — mismo patrón que
   ::deep .card-header (arriba) y el resto del sistema (DetalleCruce,
   GestionCursos, etc.); antes bg-success/bg-danger + text-white,
   verde/rojo sólido con texto oscuro heredado de --color-exito-superficie-texto
   (gris-900), ilegible sobre el fondo saturado. La dirección del
   movimiento ya la comunican el ícono y el texto del título, sin
   necesidad de un acento de color en el encabezado. */
.modal-header[b-5m8ma3pocn] {
    padding: var(--espacio-4) var(--espacio-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface-card);
    color: var(--text-heading);
    border-bottom: 1px solid var(--borde-sutil);
    position: relative;
    overflow: hidden;
}

.modal-header[b-5m8ma3pocn]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--menu-activo-borde);
}

.modal-title[b-5m8ma3pocn] {
    font-size: var(--texto-base);
    font-weight: var(--peso-semibold);
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
}

.modal-body[b-5m8ma3pocn] {
    padding: var(--espacio-6);
    background: var(--surface-card);
}

.modal-footer[b-5m8ma3pocn] {
    padding: var(--espacio-4) var(--espacio-6);
    display: flex;
    justify-content: flex-end;
    gap: var(--espacio-2);
    border-top: 1px solid var(--borde-sutil);
    background: var(--gris-50);
}

.btn-close[b-5m8ma3pocn] {
    background: transparent;
    border: none;
    font-size: var(--texto-xl);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.7;
    color: inherit;
}

    .btn-close[b-5m8ma3pocn]::before {
        content: "×";
    }

    .btn-close:hover[b-5m8ma3pocn] {
        opacity: 1;
    }
/* /Components/Pages/Home.razor.rz.scp.css */
/* Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md.
   ======================================== */
.home-container[b-qhyegrtut5] {
    padding: var(--espacio-8) 0;
}

/* Banner de bienvenida — antes degradado púrpura de pantalla ancha.
   Se decidió NO llevarlo a un degradado carbón equivalente: el sidebar
   y la cabecera ya son carbón, y una segunda superficie oscura grande
   justo arriba del contenido suma peso visual sin aportar nada — el
   mismo argumento que descartó el degradado carbón en el fondo de
   Login (ver AuthLayout.razor.css). Tratamiento más ligero: card clara
   con acento de marca en el borde izquierdo, mismo lenguaje que el
   resto de cards del sistema (--surface-card, --shadow-sm). */
.welcome-banner[b-qhyegrtut5] {
    display: flex;
    align-items: center;
    gap: var(--espacio-5);
    background: var(--surface-card);
    color: var(--text-body);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-16);
    padding: var(--espacio-6) var(--espacio-8);
    margin-bottom: var(--espacio-8);
    box-shadow: var(--shadow-sm);
    position: relative;
}

/* Borde tricolor de marca — mismo enfoque que el indicador de menú
   activo de NavMenu.razor (::before absoluto, no border-image: con un
   ancho explícito border-image-width se aplica a los cuatro lados, no
   solo al izquierdo, y pinta un marco completo en vez de un borde).
   Antes era border-left sólido en carbón (un solo color, no los tres
   de la marca) y no llegaba a cubrir el alto completo de la card. */
.welcome-banner[b-qhyegrtut5]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--menu-activo-borde);
    border-radius: var(--radio-16) 0 0 var(--radio-16);
}

.welcome-icon[b-qhyegrtut5] {
    font-size: var(--icono-xl);
    color: var(--color-accion-primaria);
    opacity: 0.9;
}

.welcome-title[b-qhyegrtut5] {
    font-size: var(--texto-xl);
    font-weight: var(--peso-bold);
    color: var(--text-heading);
    margin: 0 0 var(--espacio-1);
}

.welcome-subtitle[b-qhyegrtut5] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--texto-sm);
}

.section-title[b-qhyegrtut5] {
    font-weight: var(--peso-semibold);
    color: var(--text-heading);
    margin-bottom: var(--espacio-4);
    padding-left: var(--espacio-3);
    border-left: 4px solid var(--color-accion-primaria);
}

.module-grid[b-qhyegrtut5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--espacio-5);
    margin-bottom: var(--espacio-8);
}

/* Tarjetas de módulo — patrón M5 (§9 de SISTEMA-DISENO.md): fondo
   claro tintado del grupo (escalón 100, escalón 200 en la neutra para
   que pese igual que las tintadas — mismo ajuste que las stat cards de
   Censo, §7.4), ícono y texto oscuros. Sin degradados de color por
   módulo. */
.module-card[b-qhyegrtut5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--espacio-8) var(--espacio-5);
    border-radius: var(--radio-16);
    border: 1px solid var(--borde-sutil);
    text-decoration: none;
    color: var(--gris-900);
    transition: var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.module-card:hover[b-qhyegrtut5] {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    color: var(--gris-900);
    text-decoration: none;
}

.module-card i[b-qhyegrtut5] {
    font-size: var(--icono-xl);
    margin-bottom: var(--espacio-3);
    color: var(--gris-900);
    opacity: 0.9;
}

.mod-name[b-qhyegrtut5] {
    font-size: var(--texto-base);
    font-weight: var(--peso-bold);
    margin-bottom: var(--espacio-1);
}

.mod-desc[b-qhyegrtut5] {
    font-size: var(--texto-xs);
    color: var(--text-secondary);
    line-height: var(--interlineado-normal);
}

/* Agrupación semántica por función — administración (rojo), operación
   (verde), reportes y consulta (amarillo). Neutro para lo que no
   encaja en ninguno de los tres (ver entregable de la migración). */
.mod-admin[b-qhyegrtut5] {
    background: var(--rojo-cgt-100);
}

.mod-operacion[b-qhyegrtut5] {
    background: var(--verde-cgt-100);
}

.mod-reportes[b-qhyegrtut5] {
    background: var(--amarillo-cgt-100);
}

.mod-neutro[b-qhyegrtut5] {
    background: var(--gris-200);
}

.empty-modules[b-qhyegrtut5] {
    text-align: center;
    padding: var(--espacio-12);
    background: var(--surface-card);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-12);
}

.empty-modules-icon[b-qhyegrtut5] {
    font-size: var(--icono-xl);
}
/* /Components/Pages/Landing.razor.rz.scp.css */
/* Franja tricolor -- 4px, fija arriba de toda la ventana, mismo token de
   marca que ya usan AuthLayout/MainLayout/etc (--marca-franja, ver
   app.css y §6.3/§8.3 de SISTEMA-DISENO.md). Position:fixed a propósito:
   la landing es una portada de ancho completo (no una tarjeta centrada
   como AuthLayout), así que dibuja su propia franja en vez de heredar
   la de 6px del layout. */
.landing-franja[b-uxeh5qjiqd] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--marca-franja);
    z-index: 10;
}

.landing-split[b-uxeh5qjiqd] {
    min-height: 100vh;
    display: flex;
}

.landing-panel[b-uxeh5qjiqd] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--espacio-12);
}

/* Panel izquierdo -- carbón (--gris-900, el color dominante de Propuesta
   C), proporción ~1.15:1 contra el derecho. */
.landing-panel-marca[b-uxeh5qjiqd] {
    flex: 1.15;
    align-items: center;
    text-align: center;
    background: var(--gris-900);
    color: var(--text-inverso);
}

/* Insignia circular -- mismo archivo y misma técnica que .nav-logo en
   NavMenu.razor: logo-cgt-sello.png no tiene canal alfa (triángulos
   claros en las esquinas), border-radius:50% los oculta. */
.landing-sello[b-uxeh5qjiqd] {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    margin-bottom: var(--espacio-6);
}

.landing-titulo[b-uxeh5qjiqd] {
    font-size: var(--texto-2xl);
    font-weight: var(--peso-semibold);
    color: var(--text-inverso);
    margin: 0 0 var(--espacio-2);
}

.landing-subtitulo[b-uxeh5qjiqd] {
    font-size: var(--texto-md);
    color: var(--overlay-claro-80);
    margin: 0;
}

/* Panel derecho -- dos tarjetas apiladas. */
.landing-panel-acceso[b-uxeh5qjiqd] {
    flex: 1;
    align-items: stretch;
    justify-content: center;
    gap: var(--espacio-5);
    background: var(--surface-page);
}

/* Mismo borde/radio/sombra que .card y .stat-card ya establecidos
   (--borde-sutil, --radio-12, --shadow-md/lg, mismo hover de
   translateY que ya señala "esto es clickeable" en el resto de la app). */
.landing-card[b-uxeh5qjiqd] {
    display: flex;
    align-items: center;
    gap: var(--espacio-4);
    background: var(--surface-card);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-md);
    padding: var(--espacio-6);
    text-decoration: none;
    color: inherit;
    transition: var(--transition-normal);
}

.landing-card:hover[b-uxeh5qjiqd] {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.landing-card-icono[b-uxeh5qjiqd] {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gris-100);
    color: var(--gris-900);
    font-size: var(--icono-md);
}

.landing-card-texto h2[b-uxeh5qjiqd] {
    font-size: var(--texto-lg);
    font-weight: var(--peso-semibold);
    color: var(--text-heading);
    margin: 0 0 var(--espacio-1);
}

.landing-card-texto p[b-uxeh5qjiqd] {
    font-size: var(--texto-sm);
    color: var(--text-body);
    opacity: .75;
    margin: 0;
}

.landing-card-externo[b-uxeh5qjiqd] {
    font-size: var(--texto-sm);
    margin-left: var(--espacio-1);
    opacity: .6;
}

/* Responsive -- apilar en vez de partir en columnas por debajo de 768px,
   mismo punto de corte que el resto de la app (Censo.razor.css y otros). */
@media (max-width: 768px) {
    .landing-split[b-uxeh5qjiqd] {
        flex-direction: column;
    }

    .landing-panel[b-uxeh5qjiqd] {
        padding: var(--espacio-8) var(--espacio-5);
    }

    .landing-panel-marca[b-uxeh5qjiqd],
    .landing-panel-acceso[b-uxeh5qjiqd] {
        flex: none;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md.
   El centrado de pantalla completa y la franja tricolor viven en
   AuthLayout.razor.css (compartido con Logout y RecuperarPassword);
   acá solo el contenido propio de esta pantalla. */
.login-container[b-bklp2izz41] {
    width: 100%;
    display: flex;
    justify-content: center;
}

.login-card[b-bklp2izz41] {
    background: var(--surface-card);
    border-radius: var(--radio-16);
    box-shadow: var(--shadow-xl);
    padding: var(--espacio-8);
    width: 100%;
    max-width: 450px;
    animation: slideUp-b-bklp2izz41 0.5s ease-out;
}

@keyframes slideUp-b-bklp2izz41 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-header[b-bklp2izz41] {
    text-align: center;
    margin-bottom: var(--espacio-8);
}

/* Logo institucional completo (CGT + nombre + lema) — reemplaza el
   placeholder (recuadro punteado "CGT") que estuvo acá hasta que
   llegaron los archivos de marca definitivos, ver /design-system
   sección "Detalles de marca". Ancho de despliegue 200px; el archivo
   real (logo-cgt-completo.png) se sirve a 400px (variante 2x) para que
   se vea nítido en pantallas de alta densidad.

   Área de reserva ("X"): 40px (--espacio-10) de padding alrededor del
   logo, libre de otros elementos — aproximación al 20% del ancho de
   despliegue, mismo criterio que ya usaba el placeholder de
   /design-system antes de tener los archivos reales; ajustar si llega
   una medida exacta del manual de marca. */
.login-logo-reserve[b-bklp2izz41] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--espacio-10) 0;
    margin-bottom: var(--espacio-2);
}

.login-logo[b-bklp2izz41] {
    width: 200px;
    height: auto;
}

.login-header h1[b-bklp2izz41] {
    color: var(--text-heading);
    font-size: var(--texto-xl);
    font-weight: var(--peso-bold);
    margin-bottom: var(--espacio-2);
}

.login-subtitle[b-bklp2izz41] {
    color: var(--text-secondary);
    font-size: var(--texto-base);
    margin: 0;
}

.form-group[b-bklp2izz41] {
    margin-bottom: var(--espacio-5);
}

/* .form-label, .form-control, .alert, .alert-danger ya están
   token-migrados en app.css (§3.3/§8 de SISTEMA-DISENO.md) — no se
   redefinen acá, solo el detalle propio de esta pantalla (color del
   ícono dentro del label). */
.form-label i[b-bklp2izz41] {
    margin-right: var(--espacio-2);
    color: var(--color-accion-primaria);
}

.password-input-group[b-bklp2izz41] {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-group .form-control[b-bklp2izz41] {
    padding-right: 45px;
}

.btn-toggle-password[b-bklp2izz41] {
    position: absolute;
    right: var(--espacio-3);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--espacio-2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.btn-toggle-password:hover[b-bklp2izz41] {
    color: var(--color-accion-primaria);
}

.btn-toggle-password i[b-bklp2izz41] {
    font-size: var(--icono-sm);
}

.form-check[b-bklp2izz41] {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-5);
}

/* accent-color, no un fondo/borde re-implementado a mano: el foco y el
   estado marcado del checkbox nativo siguen el carbón de la acción
   primaria — nunca el púrpura/rojo. */
.form-check-input[b-bklp2izz41] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--borde-input);
    border-radius: var(--radio-4);
    cursor: pointer;
    accent-color: var(--color-accion-primaria);
}

.form-check-label[b-bklp2izz41] {
    color: var(--text-secondary);
    font-size: var(--texto-sm);
    cursor: pointer;
    user-select: none;
}

/* .btn/.btn-primary ya son carbón sólido en app.css — acá solo el
   ajuste de layout (ancho completo, centrado) para esta pantalla. */
.btn-login[b-bklp2izz41] {
    width: 100%;
    justify-content: center;
}

/* Separador entre el formulario (izquierda) y el pie (centrado) — hace
   que el cambio de eje se lea como estructura deliberada, no como
   descuido de alineación. */
.login-footer[b-bklp2izz41] {
    margin-top: var(--espacio-6);
    padding-top: var(--espacio-6);
    border-top: 1px solid var(--borde-sutil);
    text-align: center;
}

.link-recuperar[b-bklp2izz41] {
    color: var(--text-link);
    text-decoration: none;
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
}

.link-recuperar:hover[b-bklp2izz41] {
    color: var(--text-link-hover);
    text-decoration: underline;
}

/* Parte del mismo bloque "pie" que .login-footer — el separador que
   marca la transición desde el formulario ya está arriba, en
   .login-footer; acá solo el respiro interno entre el link y el texto
   de contacto. */
.login-info[b-bklp2izz41] {
    margin-top: var(--espacio-4);
    text-align: center;
}

@media (max-width: 576px) {
    .login-card[b-bklp2izz41] {
        padding: var(--espacio-6) var(--espacio-5);
    }
}
/* /Components/Pages/Mensajeria/Mensajeria.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   MENSAJERÍA PRIVADA — Scoped styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Layout principal ────────────────────────────────────────────────────── */

.mensajeria-container[b-1g7afjggb9] {
    display: flex;
    height: calc(100vh - 65px);
    background: var(--surface-page);
    overflow: hidden;
}

/* ─── Sidebar ─────────────────────────────────────────────────────────────── */

.sidebar[b-1g7afjggb9] {
    width: 360px;
    min-width: 360px;
    background: var(--surface-card);
    border-right: 1px solid var(--borde-sutil);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-header[b-1g7afjggb9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.25rem var(--espacio-4);
    border-bottom: 1px solid var(--borde-sutil);
}

.sidebar-header h2[b-1g7afjggb9] {
    font-size: 1.3rem;
    font-weight: var(--peso-bold);
    margin: 0;
    color: var(--text-heading);
}

.btn-nuevo-chat[b-1g7afjggb9] {
    background: var(--color-accion-primaria);
    border: none;
    color: var(--text-inverso);
    width: 38px;
    height: 38px;
    border-radius: var(--radio-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    box-shadow: var(--shadow-sm);
}

.btn-nuevo-chat:hover[b-1g7afjggb9] {
    background: var(--color-accion-primaria-hover);
    transform: scale(1.08);
}

.sidebar-empty[b-1g7afjggb9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    gap: var(--espacio-2);
    padding: var(--espacio-8);
}

.sidebar-empty i[b-1g7afjggb9] {
    font-size: 2.5rem;
}

/* ─── Lista de conversaciones ─────────────────────────────────────────────── */

.conversation-list[b-1g7afjggb9] {
    flex: 1;
    overflow-y: auto;
}

.conv-item[b-1g7afjggb9] {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: 0.85rem 1.25rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--borde-sutil);
}

.conv-item:hover[b-1g7afjggb9] {
    background: var(--surface-sunken);
}

/* Conversación seleccionada: mismo criterio de "elemento activo" que
   .course-card.selected (Educación) y .vl-lesson-active — reutiliza
   --menu-activo-fondo en vez de un tinte púrpura sin relación con la
   marca. */
.conv-active[b-1g7afjggb9] {
    background: var(--menu-activo-fondo) !important;
    border-left: 3px solid var(--color-accion-primaria);
}

/* Avatar con iniciales: mismo patrón que .avatar-circle (Caja). */
.conv-avatar[b-1g7afjggb9] {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: var(--radio-full);
    background: var(--primary-gradient);
    color: var(--text-inverso);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--peso-bold);
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.conv-info[b-1g7afjggb9] {
    flex: 1;
    min-width: 0;
}

.conv-name[b-1g7afjggb9] {
    font-weight: var(--peso-semibold);
    font-size: 0.92rem;
    color: var(--text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conv-preview[b-1g7afjggb9] {
    font-size: 0.82rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.conv-sender[b-1g7afjggb9] {
    font-weight: var(--peso-semibold);
    color: var(--text-heading);
    margin-right: 3px;
}

.conv-meta[b-1g7afjggb9] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.conv-time[b-1g7afjggb9] {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* Badge de no leídos: notificación, no dato de estado — mismo criterio
   y mismo token que .nav-badge (NavMenu.razor), incluido el escalón 700
   en vez de 600 por el mismo motivo de contraste (5.44:1 vs 4.14:1). */
.conv-badge[b-1g7afjggb9] {
    background: var(--rojo-cgt-700);
    color: var(--text-inverso);
    font-size: 0.7rem;
    font-weight: var(--peso-bold);
    border-radius: var(--radio-10);
    padding: 1px 7px;
    min-width: 20px;
    text-align: center;
}

/* ─── Área del chat ───────────────────────────────────────────────────────── */

.chat-area[b-1g7afjggb9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--surface-page);
    min-width: 0;
}

.chat-placeholder[b-1g7afjggb9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    gap: var(--espacio-2);
}

.chat-placeholder i[b-1g7afjggb9] {
    font-size: 4rem;
    opacity: 0.4;
}

.chat-placeholder h3[b-1g7afjggb9] {
    font-size: 1.2rem;
    font-weight: var(--peso-semibold);
    color: var(--text-secondary);
    margin: 0;
}

.chat-placeholder p[b-1g7afjggb9] {
    color: var(--text-muted);
    margin: 0;
}

/* ─── Chat header ─────────────────────────────────────────────────────────── */

.chat-header[b-1g7afjggb9] {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: 0.85rem 1.25rem;
    background: var(--surface-card);
    border-bottom: 1px solid var(--borde-sutil);
    box-shadow: var(--shadow-sm);
}

.btn-back-mobile[b-1g7afjggb9] {
    display: none;
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--color-accion-primaria);
    cursor: pointer;
    padding: 0.25rem;
}

.chat-header-avatar[b-1g7afjggb9] {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: var(--radio-full);
    background: var(--primary-gradient);
    color: var(--text-inverso);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--peso-bold);
    font-size: 0.82rem;
}

.chat-header-name[b-1g7afjggb9] {
    font-weight: var(--peso-bold);
    font-size: 1rem;
    color: var(--text-heading);
}

.chat-header-detail[b-1g7afjggb9] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Presidente / Junta Directiva: etiquetas informativas, no excluyentes
   entre sí (un usuario puede tener ambas) — no es un campo jerárquico
   de un solo valor, así que no usa --badge-jerarquia-*; queda neutra. */
.badge-role[b-1g7afjggb9] {
    display: inline-block;
    background: var(--color-accion-secundaria-fondo);
    color: var(--text-secondary);
    font-size: 0.65rem;
    font-weight: var(--peso-semibold);
    padding: 1px 8px;
    border-radius: var(--radio-8);
    letter-spacing: 0.3px;
}

/* ─── Mensajes ────────────────────────────────────────────────────────────── */

.chat-messages[b-1g7afjggb9] {
    flex: 1;
    overflow-y: auto;
    padding: var(--espacio-4) 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-empty-messages[b-1g7afjggb9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.chat-empty-messages i[b-1g7afjggb9] {
    font-size: 2.5rem;
    opacity: 0.5;
}

.msg-wrapper[b-1g7afjggb9] {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    max-width: 75%;
}

.msg-mine[b-1g7afjggb9] {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.msg-other[b-1g7afjggb9] {
    align-self: flex-start;
}

/* Avatar pequeño junto al mensaje: mismo patrón que el resto de
   avatares de iniciales del módulo (antes usaba un degradado propio,
   más claro, sin relación con la marca). */
.msg-avatar-small[b-1g7afjggb9] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: var(--radio-full);
    background: var(--primary-gradient);
    color: var(--text-inverso);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--peso-bold);
    font-size: 0.6rem;
    flex-shrink: 0;
}

.msg-bubble[b-1g7afjggb9] {
    padding: 0.5rem 0.85rem;
    border-radius: var(--radio-16);
    position: relative;
    word-break: break-word;
}

/* Burbuja propia vs. ajena: la distinción es de autoría, no de estado
   -- se resuelve en carbón (marca neutra) vs. superficie blanca, sin
   usar rojo/verde/amarillo (que sí tienen carga de estado en el
   sistema) para algo que no es un estado real. Contraste verificado:
   texto blanco sobre --color-accion-primaria (gris-900) > 15:1;
   --text-heading sobre --surface-card > 15:1. */
.msg-mine .msg-bubble[b-1g7afjggb9] {
    background: var(--color-accion-primaria);
    color: var(--text-inverso);
    border-bottom-right-radius: 4px;
}

.msg-other .msg-bubble[b-1g7afjggb9] {
    background: var(--surface-card);
    color: var(--text-heading);
    border-bottom-left-radius: 4px;
    box-shadow: var(--shadow-sm);
}

.msg-sender[b-1g7afjggb9] {
    font-weight: var(--peso-bold);
    font-size: 0.75rem;
    color: var(--color-accion-primaria);
    margin-bottom: 2px;
}

.msg-text[b-1g7afjggb9] {
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: pre-wrap;
}

.msg-deleted[b-1g7afjggb9] {
    font-style: italic;
    opacity: 0.6;
    font-size: 0.82rem;
}

.msg-time[b-1g7afjggb9] {
    font-size: 0.65rem;
    opacity: 0.65;
    text-align: right;
    margin-top: 3px;
}

.msg-edited[b-1g7afjggb9] {
    font-style: italic;
    margin-left: 4px;
}

/* Adjuntos en mensajes */

.msg-image[b-1g7afjggb9] {
    margin: 4px 0;
    max-width: 280px;
}

.msg-image img[b-1g7afjggb9] {
    width: 100%;
    border-radius: var(--radio-10);
    cursor: pointer;
    transition: opacity 0.15s;
}

.msg-image img:hover[b-1g7afjggb9] {
    opacity: 0.9;
}

.msg-audio[b-1g7afjggb9] {
    margin: 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.msg-audio audio[b-1g7afjggb9] {
    max-width: 240px;
    height: 36px;
}

.audio-duration[b-1g7afjggb9] {
    font-size: 0.72rem;
    opacity: 0.7;
}

/* ─── Input area ──────────────────────────────────────────────────────────── */

.chat-input-area[b-1g7afjggb9] {
    display: flex;
    align-items: flex-end;
    gap: var(--espacio-2);
    padding: var(--espacio-3) 1.25rem;
    background: var(--surface-card);
    border-top: 1px solid var(--borde-sutil);
}

.btn-attach[b-1g7afjggb9] {
    background: none;
    border: none;
    color: var(--color-accion-primaria);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0.35rem;
    transition: color 0.15s;
    display: flex;
    align-items: center;
}

.btn-attach:hover[b-1g7afjggb9] {
    color: var(--color-accion-primaria-hover);
}

.input-wrapper[b-1g7afjggb9] {
    flex: 1;
}

.input-wrapper textarea[b-1g7afjggb9] {
    width: 100%;
    border: 1px solid var(--borde-input);
    border-radius: var(--radio-20);
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    resize: none;
    max-height: 120px;
    background: var(--surface-sunken);
    transition: border-color 0.15s;
    outline: none;
}

.input-wrapper textarea:focus[b-1g7afjggb9] {
    border-color: var(--borde-input-foco);
    background: var(--surface-card);
}

.btn-send[b-1g7afjggb9] {
    background: var(--color-accion-primaria);
    border: none;
    color: var(--text-inverso);
    width: 40px;
    height: 40px;
    border-radius: var(--radio-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.btn-send:hover:not(:disabled)[b-1g7afjggb9] {
    background: var(--color-accion-primaria-hover);
    transform: scale(1.06);
}

.btn-send:disabled[b-1g7afjggb9] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Adjunto pendiente */

.adjunto-preview[b-1g7afjggb9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 1.25rem;
    background: var(--surface-sunken);
    border-top: 1px solid var(--borde-sutil);
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.btn-remove-attach[b-1g7afjggb9] {
    background: none;
    border: none;
    color: var(--color-destructivo);
    font-size: 1rem;
    cursor: pointer;
    padding: 2px 6px;
}

/* ─── Modal Nueva Conversación (flotante, sin Bootstrap) ─────────────────── */

.nc-backdrop[b-1g7afjggb9] {
    position: fixed;
    inset: 0;
    background: var(--overlay-oscuro-45);
    z-index: 1040;
    animation: ncFadeIn-b-1g7afjggb9 0.18s ease;
}

.nc-modal[b-1g7afjggb9] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    pointer-events: none;
}

.nc-content[b-1g7afjggb9] {
    background: var(--surface-card);
    border-radius: var(--radio-16);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    animation: ncSlideIn-b-1g7afjggb9 0.2s ease;
}

@keyframes ncFadeIn-b-1g7afjggb9 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ncSlideIn-b-1g7afjggb9 {
    from { opacity: 0; transform: translateY(-12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)     scale(1);    }
}

/* Encabezado: superficie carbón + acento de marca, mismo criterio que
   .ge-modal-header (Eventos), .desc-upload-header (Comunicaciones) y
   .gd-modal-header (Archivo). */
.nc-header[b-1g7afjggb9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem var(--espacio-6);
    background: var(--surface-card);
    border-bottom: 1px solid var(--borde-sutil);
    flex-shrink: 0;
    position: relative;
}

.nc-header[b-1g7afjggb9]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--menu-activo-borde);
}

.nc-title[b-1g7afjggb9] {
    font-size: 1rem;
    font-weight: var(--peso-bold);
    margin: 0;
    color: var(--text-heading);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nc-close[b-1g7afjggb9] {
    background: var(--color-accion-secundaria-fondo);
    border: none;
    color: var(--text-secondary);
    width: 28px;
    height: 28px;
    border-radius: var(--radio-full);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    transition: background 0.15s;
}

.nc-close:hover[b-1g7afjggb9] {
    background: var(--color-accion-secundaria-fondo-hover);
}

.nc-body[b-1g7afjggb9] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.nc-tabs[b-1g7afjggb9] {
    display: flex;
    border-bottom: 1px solid var(--borde-sutil);
    flex-shrink: 0;
}

.nc-tab[b-1g7afjggb9] {
    flex: 1;
    padding: 0.65rem 0.5rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-weight: var(--peso-semibold);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: color 0.15s, border-color 0.15s;
}

.nc-tab-active[b-1g7afjggb9] {
    color: var(--color-accion-primaria);
    border-bottom-color: var(--color-accion-primaria);
}

.nc-group-name[b-1g7afjggb9] {
    padding: 0.75rem 1rem 0;
    flex-shrink: 0;
}

.nc-group-bar[b-1g7afjggb9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--surface-sunken);
    margin-top: 0.5rem;
    flex-shrink: 0;
}

.nc-selected-count[b-1g7afjggb9] {
    color: var(--text-heading);
    font-weight: var(--peso-semibold);
    font-size: 0.85rem;
}

.nc-search[b-1g7afjggb9] {
    padding: 0.75rem 1rem;
    flex-shrink: 0;
}

.nc-loading[b-1g7afjggb9] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--espacio-8);
}

.nc-spinner[b-1g7afjggb9] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--borde-sutil);
    border-top-color: var(--color-accion-primaria);
    border-radius: var(--radio-full);
    animation: ncSpin-b-1g7afjggb9 0.7s linear infinite;
}

@keyframes ncSpin-b-1g7afjggb9 {
    to { transform: rotate(360deg); }
}

.nc-empty[b-1g7afjggb9] {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.nc-empty p[b-1g7afjggb9] {
    margin: 0;
}

.nc-checkbox[b-1g7afjggb9] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accion-primaria);
    flex-shrink: 0;
}

/* ─── Modal contactos ─────────────────────────────────────────────────────── */

.contacto-list[b-1g7afjggb9] {
    max-height: 400px;
    overflow-y: auto;
}

.contacto-item[b-1g7afjggb9] {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--borde-sutil);
}

.contacto-item:hover[b-1g7afjggb9] {
    background: var(--surface-sunken);
}

.contacto-item-selected[b-1g7afjggb9] {
    background: var(--menu-activo-fondo) !important;
}

.contacto-avatar[b-1g7afjggb9] {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: var(--radio-full);
    background: var(--primary-gradient);
    color: var(--text-inverso);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--peso-bold);
    font-size: 0.8rem;
}

.contacto-info[b-1g7afjggb9] {
    flex: 1;
    min-width: 0;
}

.contacto-name[b-1g7afjggb9] {
    font-weight: var(--peso-semibold);
    font-size: 0.92rem;
    color: var(--text-heading);
}

.contacto-detail[b-1g7afjggb9] {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* ─── Vista previa imagen ─────────────────────────────────────────────────── */

.image-preview-overlay[b-1g7afjggb9] {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--espacio-8);
    cursor: pointer;
}

.image-preview-overlay img[b-1g7afjggb9] {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: var(--radio-8);
    box-shadow: var(--shadow-xl);
}

.image-preview-close[b-1g7afjggb9] {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1061;
}

/* ─── Recording bar ───────────────────────────────────────────────────────── */
/* "Grabando" reutiliza el rojo del sistema como convención universal de
   grabación en curso (no es una acción destructiva ni un estado de
   error), mismo espíritu que el corazón rojo de "me gusta" en Eventos/
   Comunicaciones — sin degradado, pastel plano. */

.recording-bar[b-1g7afjggb9] {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-3) 1.25rem;
    background: var(--color-destructivo-fondo);
    border-top: 1px solid var(--rojo-cgt-100);
}

.recording-dot[b-1g7afjggb9] {
    width: 12px;
    height: 12px;
    border-radius: var(--radio-full);
    background: var(--color-destructivo);
    animation: pulse-recording-b-1g7afjggb9 1s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes pulse-recording-b-1g7afjggb9 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

.recording-time[b-1g7afjggb9] {
    font-size: 1rem;
    font-weight: var(--peso-semibold);
    color: var(--color-destructivo-texto);
    font-variant-numeric: tabular-nums;
    flex: 1;
}

.btn-cancel-record[b-1g7afjggb9] {
    background: none;
    border: 1px solid var(--color-destructivo);
    color: var(--color-destructivo);
    width: 36px;
    height: 36px;
    border-radius: var(--radio-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s;
}

.btn-cancel-record:hover[b-1g7afjggb9] {
    background: var(--color-destructivo);
    color: var(--text-inverso);
}

.btn-stop-record[b-1g7afjggb9] {
    background: var(--color-accion-primaria);
    border: none;
    color: var(--text-inverso);
    width: 40px;
    height: 40px;
    border-radius: var(--radio-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    box-shadow: var(--shadow-sm);
    transition: background 0.15s, transform 0.15s;
}

.btn-stop-record:hover[b-1g7afjggb9] {
    background: var(--color-accion-primaria-hover);
    transform: scale(1.06);
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .mensajeria-container[b-1g7afjggb9] {
        height: calc(100vh - 56px);
    }

    .sidebar[b-1g7afjggb9] {
        width: 100%;
        min-width: 100%;
    }

    .sidebar-hidden-mobile[b-1g7afjggb9] {
        display: none;
    }

    .chat-hidden-mobile[b-1g7afjggb9] {
        display: none;
    }

    .chat-area[b-1g7afjggb9] {
        width: 100%;
    }

    .btn-back-mobile[b-1g7afjggb9] {
        display: flex;
    }

    .msg-wrapper[b-1g7afjggb9] {
        max-width: 88%;
    }

    .msg-image[b-1g7afjggb9] {
        max-width: 220px;
    }
}
/* /Components/Pages/RecuperarPassword.razor.rz.scp.css */
/* Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md.
   Mismo tratamiento que Login.razor.css (fondo + franja en
   AuthLayout.razor.css, compartido) — Blazor aísla el CSS por
   componente, así que el patrón de card/formulario se repite acá en
   vez de heredarse. */
.login-container[b-6a99qk3ais] {
    width: 100%;
    display: flex;
    justify-content: center;
}

.login-card[b-6a99qk3ais] {
    background: var(--surface-card);
    border-radius: var(--radio-16);
    box-shadow: var(--shadow-xl);
    padding: var(--espacio-8);
    width: 100%;
    max-width: 450px;
}

.login-header[b-6a99qk3ais] {
    text-align: center;
    margin-bottom: var(--espacio-8);
}

.back-button[b-6a99qk3ais] {
    text-align: left;
    margin-bottom: var(--espacio-5);
}

.btn-back[b-6a99qk3ais] {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    color: var(--text-link);
    text-decoration: none;
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    transition: var(--transition-fast);
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-6);
}

.btn-back:hover[b-6a99qk3ais] {
    background-color: var(--gris-100);
    color: var(--text-link-hover);
}

.btn-back i[b-6a99qk3ais] {
    font-size: var(--icono-sm);
}

/* Logo institucional completo — reemplaza el placeholder que compartía
   con Login y con /design-system, sección "Detalles de marca". Mismo
   tratamiento que Login.razor.css: 200px de ancho de despliegue (el
   archivo real se sirve a 400px, variante 2x) y 40px (--espacio-10) de
   área de reserva alrededor. */
.login-logo-reserve[b-6a99qk3ais] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--espacio-10) 0;
    margin-bottom: var(--espacio-2);
}

.login-logo[b-6a99qk3ais] {
    width: 200px;
    height: auto;
}

.login-header h1[b-6a99qk3ais] {
    color: var(--text-heading);
    font-size: var(--texto-xl);
    font-weight: var(--peso-bold);
    margin-bottom: var(--espacio-2);
}

.login-subtitle[b-6a99qk3ais] {
    color: var(--text-secondary);
    font-size: var(--texto-base);
    margin: 0;
}

.form-group[b-6a99qk3ais] {
    margin-bottom: var(--espacio-5);
}

.form-label i[b-6a99qk3ais] {
    margin-right: var(--espacio-2);
    color: var(--color-accion-primaria);
}

.form-text[b-6a99qk3ais] {
    display: block;
    font-size: var(--texto-xs);
}

/* .btn/.btn-primary ya son carbón sólido en app.css. */
.btn-login[b-6a99qk3ais] {
    width: 100%;
    justify-content: center;
}

.login-info[b-6a99qk3ais] {
    margin-top: var(--espacio-6);
    padding-top: var(--espacio-6);
    border-top: 1px solid var(--borde-sutil);
    text-align: center;
}

@media (max-width: 576px) {
    .login-card[b-6a99qk3ais] {
        padding: var(--espacio-6) var(--espacio-5);
    }
}
/* /Components/Pages/Reportes/Reportes.razor.rz.scp.css */
.reportes-container[b-4f7vhx21bb] {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--espacio-8);
}

.header[b-4f7vhx21bb] {
    text-align: center;
    margin-bottom: var(--espacio-12);
}

.header h1[b-4f7vhx21bb] {
    font-size: 2.5rem;
    color: var(--text-heading);
    margin-bottom: var(--espacio-2);
}

.subtitle[b-4f7vhx21bb] {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.reportes-grid[b-4f7vhx21bb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: var(--espacio-8);
    margin-top: var(--espacio-8);
}

/* Tarjetas de acceso: mismo patrón M5 que .module-card en Home.razor.css
   (§9 de SISTEMA-DISENO.md) — superficie clara, borde sutil, sombra al
   pasar el mouse, sin degradado. */
.reporte-card[b-4f7vhx21bb] {
    background: var(--surface-card);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    padding: var(--espacio-8);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--borde-sutil);
}

.reporte-card:hover[b-4f7vhx21bb] {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--borde-fuerte);
}

.card-icon[b-4f7vhx21bb] {
    width: 80px;
    height: 80px;
    border-radius: var(--radio-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--espacio-6);
    font-size: 2.5rem;
}

/* Censo y Financieros son ambos accesos de la categoría "reportes y
   consulta" — mismo grupo semántico (amarillo) que .mod-reportes en
   Home.razor.css, no un color por tarjeta individual. */
.card-icon.censo[b-4f7vhx21bb],
.card-icon.financiero[b-4f7vhx21bb] {
    background: var(--amarillo-cgt-100);
}

.card-content h3[b-4f7vhx21bb] {
    font-size: var(--texto-xl);
    color: var(--text-heading);
    margin-bottom: var(--espacio-2);
}

.card-content > p[b-4f7vhx21bb] {
    color: var(--text-secondary);
    margin-bottom: var(--espacio-4);
}

.features[b-4f7vhx21bb] {
    list-style: none;
    padding: 0;
    margin: var(--espacio-6) 0;
}

.features li[b-4f7vhx21bb] {
    padding: var(--espacio-2) 0;
    color: var(--text-secondary);
    position: relative;
    padding-left: var(--espacio-6);
}

.features li[b-4f7vhx21bb]::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-exito);
    font-weight: var(--peso-bold);
}

.card-footer[b-4f7vhx21bb] {
    margin-top: var(--espacio-6);
    padding-top: var(--espacio-6);
    border-top: 1px solid var(--borde-sutil);
}

.btn-link[b-4f7vhx21bb] {
    color: var(--text-link);
    font-weight: var(--peso-semibold);
    font-size: var(--texto-base);
}

.reporte-card:hover .btn-link[b-4f7vhx21bb] {
    color: var(--text-link-hover);
}

@media (max-width: 768px) {
    .reportes-grid[b-4f7vhx21bb] {
        grid-template-columns: 1fr;
    }

    .header h1[b-4f7vhx21bb] {
        font-size: 2rem;
    }
}
/* /Components/Pages/Reportes/ReportesCenso.razor.rz.scp.css */
.reportes-censo-container[b-52bv4qhbem] {
    padding: var(--espacio-8);
    max-width: 1600px;
    margin: 0 auto;
}

.header[b-52bv4qhbem] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--espacio-8);
    flex-wrap: wrap;
    gap: var(--espacio-4);
}

.header h1[b-52bv4qhbem] {
    font-size: 2rem;
    color: var(--text-heading);
    margin: 0;
}

.btn-back[b-52bv4qhbem] {
    background: var(--surface-sunken);
    border: 1px solid var(--borde-input);
    padding: var(--espacio-2) var(--espacio-4);
    border-radius: var(--radio-6);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-back:hover[b-52bv4qhbem] {
    background: var(--color-accion-secundaria-fondo);
}

.actions[b-52bv4qhbem] {
    display: flex;
    gap: var(--espacio-4);
}

.btn[b-52bv4qhbem] {
    padding: var(--espacio-3) var(--espacio-6);
    border: none;
    border-radius: var(--radio-6);
    cursor: pointer;
    font-weight: var(--peso-semibold);
    transition: all 0.3s ease;
}

/* Exportar Excel/PDF: excepción documentada (§3.3 SISTEMA-DISENO.md,
   mismo criterio ya fijado en Censo/Censo.razor.css) — el color
   identifica el tipo de archivo generado, no un estado de la acción.
   Outline con el token de texto (900), relleno pastel solo al hover. */
.btn-success[b-52bv4qhbem] {
    background: transparent;
    border: 1px solid var(--color-exito-texto);
    color: var(--color-exito-texto);
}

.btn-success:hover[b-52bv4qhbem] {
    background: var(--color-exito-fondo);
}

.btn-danger[b-52bv4qhbem] {
    background: transparent;
    border: 1px solid var(--color-destructivo-texto);
    color: var(--color-destructivo-texto);
}

.btn-danger:hover[b-52bv4qhbem] {
    background: var(--color-destructivo-fondo);
}

.btn:disabled[b-52bv4qhbem] {
    opacity: 0.6;
    cursor: not-allowed;
}

.loading[b-52bv4qhbem] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.spinner[b-52bv4qhbem] {
    border: 4px solid var(--borde-sutil);
    border-top: 4px solid var(--color-accion-primaria);
    border-radius: var(--radio-full);
    width: 50px;
    height: 50px;
    animation: spin-b-52bv4qhbem 1s linear infinite;
}

@keyframes spin-b-52bv4qhbem {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.estadisticas-grid[b-52bv4qhbem] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--espacio-6);
    margin-bottom: var(--espacio-8);
}

.stat-card[b-52bv4qhbem] {
    background: var(--surface-card);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    padding: var(--espacio-6);
    display: flex;
    align-items: center;
    gap: var(--espacio-4);
}

.stat-icon[b-52bv4qhbem] {
    width: 60px;
    height: 60px;
    border-radius: var(--radio-12);
    color: var(--text-inverso);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.stat-content h3[b-52bv4qhbem] {
    font-size: 2rem;
    margin: 0;
    color: var(--text-heading);
    font-variant-numeric: tabular-nums;
}

.stat-content p[b-52bv4qhbem] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--texto-sm);
}

.charts-grid[b-52bv4qhbem] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: var(--espacio-8);
}

.chart-card[b-52bv4qhbem] {
    background: var(--surface-card);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    padding: var(--espacio-6);
}

.chart-card.full-width[b-52bv4qhbem] {
    grid-column: 1 / -1;
}

.chart-card h3[b-52bv4qhbem] {
    margin-top: 0;
    margin-bottom: var(--espacio-4);
    color: var(--text-heading);
    font-size: 1.2rem;
}

.chart-card canvas[b-52bv4qhbem] {
    max-height: 400px;
}

@media (max-width: 768px) {
    .header[b-52bv4qhbem] {
        flex-direction: column;
        align-items: flex-start;
    }

    .charts-grid[b-52bv4qhbem] {
        grid-template-columns: 1fr;
    }

    .estadisticas-grid[b-52bv4qhbem] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Reportes/ReportesFinancieros.razor.rz.scp.css */
.reportes-financieros-container[b-mp5cwrv4ba] {
    padding: var(--espacio-8);
    max-width: 1600px;
    margin: 0 auto;
}

.header[b-mp5cwrv4ba] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--espacio-8);
    flex-wrap: wrap;
    gap: var(--espacio-4);
}

.header h1[b-mp5cwrv4ba] {
    font-size: 2rem;
    color: var(--text-heading);
    margin: 0;
}

.btn-back[b-mp5cwrv4ba] {
    background: var(--surface-sunken);
    border: 1px solid var(--borde-input);
    padding: var(--espacio-2) var(--espacio-4);
    border-radius: var(--radio-6);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-back:hover[b-mp5cwrv4ba] {
    background: var(--color-accion-secundaria-fondo);
}

.actions[b-mp5cwrv4ba] {
    display: flex;
    gap: var(--espacio-4);
    align-items: center;
}

.form-select[b-mp5cwrv4ba] {
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid var(--borde-input);
    border-radius: var(--radio-6);
    background: var(--surface-card);
    cursor: pointer;
}

.btn[b-mp5cwrv4ba] {
    padding: var(--espacio-3) var(--espacio-6);
    border: none;
    border-radius: var(--radio-6);
    cursor: pointer;
    font-weight: var(--peso-semibold);
    transition: all 0.3s ease;
}

/* Exportar Excel/PDF: misma excepción documentada que en
   ReportesCenso.razor.css y en Censo/Censo.razor.css (§3.3
   SISTEMA-DISENO.md) — el color identifica el tipo de archivo, no un
   estado de la acción. Outline con el token de texto (900). */
.btn-success[b-mp5cwrv4ba] {
    background: transparent;
    border: 1px solid var(--color-exito-texto);
    color: var(--color-exito-texto);
}

.btn-success:hover[b-mp5cwrv4ba] {
    background: var(--color-exito-fondo);
}

.btn-danger[b-mp5cwrv4ba] {
    background: transparent;
    border: 1px solid var(--color-destructivo-texto);
    color: var(--color-destructivo-texto);
}

.btn-danger:hover[b-mp5cwrv4ba] {
    background: var(--color-destructivo-fondo);
}

.btn:disabled[b-mp5cwrv4ba] {
    opacity: 0.6;
    cursor: not-allowed;
}

.loading[b-mp5cwrv4ba] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.spinner[b-mp5cwrv4ba] {
    border: 4px solid var(--borde-sutil);
    border-top: 4px solid var(--color-accion-primaria);
    border-radius: var(--radio-full);
    width: 50px;
    height: 50px;
    animation: spin-b-mp5cwrv4ba 1s linear infinite;
}

@keyframes spin-b-mp5cwrv4ba {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.estadisticas-grid[b-mp5cwrv4ba] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--espacio-6);
    margin-bottom: var(--espacio-8);
}

.stat-card[b-mp5cwrv4ba] {
    background: var(--surface-card);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    padding: var(--espacio-6);
    display: flex;
    align-items: center;
    gap: var(--espacio-4);
}

.stat-icon[b-mp5cwrv4ba] {
    width: 60px;
    height: 60px;
    border-radius: var(--radio-12);
    color: var(--text-inverso);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.stat-content h3[b-mp5cwrv4ba] {
    font-size: 2rem;
    margin: 0;
    color: var(--text-heading);
    font-variant-numeric: tabular-nums;
}

.stat-content p[b-mp5cwrv4ba] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--texto-sm);
}

.charts-grid[b-mp5cwrv4ba] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: var(--espacio-8);
}

.chart-card[b-mp5cwrv4ba] {
    background: var(--surface-card);
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    padding: var(--espacio-6);
}

.chart-card.full-width[b-mp5cwrv4ba] {
    grid-column: 1 / -1;
}

.chart-card h3[b-mp5cwrv4ba] {
    margin-top: 0;
    margin-bottom: var(--espacio-4);
    color: var(--text-heading);
    font-size: 1.2rem;
}

.chart-card canvas[b-mp5cwrv4ba] {
    max-height: 400px;
}

.table-responsive[b-mp5cwrv4ba] {
    overflow-x: auto;
}

.table[b-mp5cwrv4ba] {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--espacio-4);
}

.table th[b-mp5cwrv4ba],
.table td[b-mp5cwrv4ba] {
    padding: var(--espacio-3);
    text-align: left;
    border-bottom: 1px solid var(--borde-sutil);
}

.table th[b-mp5cwrv4ba] {
    background: var(--surface-sunken);
    font-weight: var(--peso-semibold);
    color: var(--text-secondary);
}

.table tbody tr:hover[b-mp5cwrv4ba] {
    background: var(--surface-sunken);
}

@media (max-width: 768px) {
    .header[b-mp5cwrv4ba] {
        flex-direction: column;
        align-items: flex-start;
    }

    .actions[b-mp5cwrv4ba] {
        flex-direction: column;
        width: 100%;
    }

    .form-select[b-mp5cwrv4ba],
    .btn[b-mp5cwrv4ba] {
        width: 100%;
    }

    .charts-grid[b-mp5cwrv4ba] {
        grid-template-columns: 1fr;
    }

    .estadisticas-grid[b-mp5cwrv4ba] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Sindicatos/CrearSindicato.razor.rz.scp.css */
/* Crear Sindicato — módulo organizacional
   Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md. */

/* Container */
.container[b-250fayx08l] {
    max-width: 1200px;
    padding-top: var(--espacio-8);
}

/* Header */
h2[b-250fayx08l] {
    color: var(--text-heading);
    font-weight: var(--peso-semibold);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-4);
}

h2 i[b-250fayx08l] {
    color: var(--color-accion-primaria);
    font-size: var(--icono-xl);
}

/* Breadcrumb */
.breadcrumb[b-250fayx08l] {
    background-color: transparent;
    padding: 0;
    margin-bottom: 0;
    font-size: var(--texto-sm);
}

.breadcrumb-item a[b-250fayx08l] {
    color: var(--color-accion-primaria);
    text-decoration: none;
    transition: var(--transition-normal);
}

.breadcrumb-item a:hover[b-250fayx08l] {
    color: var(--color-accion-primaria-hover);
    text-decoration: underline;
}

.breadcrumb-item.active[b-250fayx08l] {
    color: var(--text-muted);
}

/* Card principal */
.card[b-250fayx08l] {
    border: none;
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    background: var(--surface-card);
    margin-bottom: var(--espacio-8);
}

.card-body[b-250fayx08l] {
    padding: var(--espacio-8);
}

/* Formularios */
.form-label[b-250fayx08l] {
    font-weight: var(--peso-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--espacio-2);
    font-size: var(--texto-sm);
}

.form-control[b-250fayx08l],
.form-select[b-250fayx08l],
textarea.form-control[b-250fayx08l] {
    border: 1.5px solid var(--borde-input);
    border-radius: var(--radio-8);
    padding: var(--espacio-3) var(--espacio-4);
    transition: var(--transition-normal);
    font-size: var(--texto-sm);
}

.form-control:focus[b-250fayx08l],
.form-select:focus[b-250fayx08l],
textarea.form-control:focus[b-250fayx08l] {
    border-color: var(--borde-input-foco);
    box-shadow: 0 0 0 3px var(--color-foco-anillo);
}

textarea.form-control[b-250fayx08l] {
    min-height: 100px;
    resize: vertical;
}

/* Switch */
.form-check-input[b-250fayx08l] {
    width: 3rem;
    height: 1.5rem;
    cursor: pointer;
    border: 1.5px solid var(--borde-input);
    background-color: var(--gris-200);
}

.form-check-input:checked[b-250fayx08l] {
    background-color: var(--color-accion-primaria);
    border-color: var(--color-accion-primaria);
}

.form-check-label[b-250fayx08l] {
    font-weight: var(--peso-medio);
    color: var(--text-secondary);
    margin-left: var(--espacio-2);
    cursor: pointer;
}

/* Alertas */
.alert[b-250fayx08l] {
    border: none;
    border-radius: var(--radio-10);
    padding: var(--espacio-4) var(--espacio-5);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--espacio-6);
}

.alert i[b-250fayx08l] {
    font-size: var(--texto-lg);
}

.alert-danger[b-250fayx08l] {
    background: var(--color-destructivo-fondo);
    color: var(--color-destructivo-texto);
}

.btn-close[b-250fayx08l] {
    margin-left: auto;
}

/* Botones */
.btn[b-250fayx08l] {
    padding: var(--espacio-3) var(--espacio-6);
    font-weight: var(--peso-medio);
    border-radius: var(--radio-8);
    transition: var(--transition-normal);
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
}

.btn-primary[b-250fayx08l] {
    background: var(--color-accion-primaria);
    border: none;
    color: var(--text-inverso);
    box-shadow: none;
}

.btn-primary:hover[b-250fayx08l] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background: var(--color-accion-primaria-hover);
}

.btn-secondary[b-250fayx08l] {
    background-color: var(--color-accion-secundaria-fondo);
    border: none;
    color: var(--color-accion-secundaria-texto);
}

.btn-secondary:hover[b-250fayx08l] {
    background-color: var(--color-accion-secundaria-fondo-hover);
    transform: translateY(-2px);
}

.btn:disabled[b-250fayx08l] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Botones de acción */
.d-flex.gap-2[b-250fayx08l] {
    gap: var(--espacio-4) !important;
    margin-top: var(--espacio-8);
}

/* Spinner */
.spinner-border[b-250fayx08l] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

.text-center.py-5[b-250fayx08l] {
    padding: var(--espacio-12) 0;
}

/* Secciones */
.row.mb-3[b-250fayx08l] {
    margin-bottom: var(--espacio-6) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .container[b-250fayx08l] {
        padding: var(--espacio-4);
    }

    .card-body[b-250fayx08l] {
        padding: var(--espacio-5);
    }

    h2[b-250fayx08l] {
        font-size: var(--texto-lg);
    }

    .btn[b-250fayx08l] {
        width: 100%;
        justify-content: center;
    }

    .d-flex.gap-2[b-250fayx08l] {
        flex-direction: column;
    }
}

/* Animaciones */
@keyframes fadeIn-b-250fayx08l {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card[b-250fayx08l],
.alert[b-250fayx08l] {
    animation: fadeIn-b-250fayx08l 0.3s ease;
}
/* /Components/Pages/Sindicatos/EditarSindicato.razor.rz.scp.css */
/* Editar Sindicato — módulo organizacional
   Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md.
   Ícono en amarillo-cgt-900, mismo criterio que EditarUsuario.razor.css
   (misma señal de color que "editar" en la excepción de íconos de fila,
   §3.3). El foco de los inputs usa los tokens estándar en vez del ámbar
   original — ver el comentario correspondiente en EditarUsuario.razor.css. */

.container[b-8rust78jvv] {
    max-width: 1200px;
    padding-top: var(--espacio-8);
}

/* El card-header de "Logo del sindicato" ya traía bg-white/border-0 en
   el markup (fondo claro), pero heredaba color: var(--text-inverso)
   (blanco) del .card-header global de app.css — texto blanco sobre
   fondo blanco, invisible. Encontrado durante la pasada final de
   coherencia (hallazgo #5 de AJUSTES-PENDIENTES.md); se corrige el
   color, sin tocar el fondo/borde que ya estaban bien. */
[b-8rust78jvv] .card-header {
    color: var(--text-heading);
}

h2[b-8rust78jvv] {
    color: var(--text-heading);
    font-weight: var(--peso-semibold);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-4);
}

h2 i[b-8rust78jvv] {
    color: var(--amarillo-cgt-900);
    font-size: var(--icono-xl);
}

.breadcrumb[b-8rust78jvv] {
    background-color: transparent;
    padding: 0;
    margin-bottom: 0;
    font-size: var(--texto-sm);
}

.breadcrumb-item a[b-8rust78jvv] {
    color: var(--color-accion-primaria);
    text-decoration: none;
}

.breadcrumb-item a:hover[b-8rust78jvv] {
    color: var(--color-accion-primaria-hover);
    text-decoration: underline;
}

.card[b-8rust78jvv] {
    border: none;
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    background: var(--surface-card);
    margin-bottom: var(--espacio-8);
}

.card-body[b-8rust78jvv] {
    padding: var(--espacio-8);
}

.form-label[b-8rust78jvv] {
    font-weight: var(--peso-semibold);
    color: var(--text-secondary);
    font-size: var(--texto-sm);
}

.form-control[b-8rust78jvv],
.form-select[b-8rust78jvv],
textarea.form-control[b-8rust78jvv] {
    border: 1.5px solid var(--borde-input);
    border-radius: var(--radio-8);
    padding: var(--espacio-3) var(--espacio-4);
    transition: var(--transition-normal);
}

.form-control:focus[b-8rust78jvv],
.form-select:focus[b-8rust78jvv] {
    border-color: var(--borde-input-foco);
    box-shadow: 0 0 0 3px var(--color-foco-anillo);
}

.form-check-input[b-8rust78jvv] {
    width: 3rem;
    height: 1.5rem;
    cursor: pointer;
}

.form-check-input:checked[b-8rust78jvv] {
    background-color: var(--color-accion-primaria);
}

.btn-primary[b-8rust78jvv] {
    background: var(--color-accion-primaria);
    border: none;
    padding: var(--espacio-3) var(--espacio-6);
    border-radius: var(--radio-8);
}

.btn-primary:hover[b-8rust78jvv] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background: var(--color-accion-primaria-hover);
}

.btn-secondary[b-8rust78jvv] {
    background-color: var(--color-accion-secundaria-fondo);
    border: none;
    color: var(--color-accion-secundaria-texto);
}

.btn-secondary:hover[b-8rust78jvv] {
    background-color: var(--color-accion-secundaria-fondo-hover);
}

.alert[b-8rust78jvv] {
    border: none;
    border-radius: var(--radio-10);
    padding: var(--espacio-4) var(--espacio-5);
    margin-bottom: var(--espacio-6);
}

@keyframes fadeIn-b-8rust78jvv {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.card[b-8rust78jvv] { animation: fadeIn-b-8rust78jvv 0.3s ease; }
/* /Components/Pages/Sindicatos/Sindicatos.razor.rz.scp.css */
/* Gestión de Sindicatos — módulo organizacional
   Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md.
   Mismo caso que Usuarios.razor.css: sobrescribe clases globales ya
   migradas en app.css con el scope de Blazor — se retokeniza acá en
   vez de eliminarse para no cambiar la arquitectura de la página. */

/* Header de la página */
h2[b-osgh5lmc9n] {
    color: var(--text-heading);
    font-weight: var(--peso-semibold);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-2);
}

h2 i[b-osgh5lmc9n] {
    color: var(--color-accion-primaria);
    font-size: var(--icono-xl);
}

.text-muted[b-osgh5lmc9n] {
    color: var(--text-muted) !important;
    font-size: var(--texto-sm);
}

/* Botones principales */
.btn-primary[b-osgh5lmc9n] {
    background: var(--color-accion-primaria);
    border: none;
    padding: var(--espacio-3) var(--espacio-6);
    font-weight: var(--peso-medio);
    border-radius: var(--radio-8);
    box-shadow: none;
    transition: var(--transition-normal);
}

.btn-primary:hover[b-osgh5lmc9n] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background: var(--color-accion-primaria-hover);
}

.btn-primary i[b-osgh5lmc9n] {
    margin-right: var(--espacio-2);
}

/* Cards */
.card[b-osgh5lmc9n] {
    border: none;
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
    background: var(--surface-card);
}

.card:hover[b-osgh5lmc9n] {
    box-shadow: var(--shadow-md);
}

.card-body[b-osgh5lmc9n] {
    padding: var(--espacio-6);
}

/* Formularios y controles */
.form-label[b-osgh5lmc9n] {
    font-weight: var(--peso-medio);
    color: var(--text-secondary);
    margin-bottom: var(--espacio-2);
    font-size: var(--texto-sm);
}

.form-select[b-osgh5lmc9n],
.form-control[b-osgh5lmc9n] {
    border: 1.5px solid var(--borde-input);
    border-radius: var(--radio-8);
    padding: var(--espacio-3) var(--espacio-4);
    transition: var(--transition-normal);
    font-size: var(--texto-sm);
}

.form-select:focus[b-osgh5lmc9n],
.form-control:focus[b-osgh5lmc9n] {
    border-color: var(--borde-input-foco);
    box-shadow: 0 0 0 3px var(--color-foco-anillo);
}

/* Alertas */
.alert[b-osgh5lmc9n] {
    border: none;
    border-radius: var(--radio-10);
    padding: var(--espacio-4) var(--espacio-5);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    box-shadow: var(--shadow-sm);
}

.alert i[b-osgh5lmc9n] {
    font-size: var(--texto-lg);
}

.alert-success[b-osgh5lmc9n] {
    background: var(--color-exito-fondo);
    color: var(--color-exito-texto);
}

.alert-danger[b-osgh5lmc9n] {
    background: var(--color-destructivo-fondo);
    color: var(--color-destructivo-texto);
}

.btn-close[b-osgh5lmc9n] {
    margin-left: auto;
}

/* Tabla */
.table-responsive[b-osgh5lmc9n] {
    border-radius: var(--radio-8);
    overflow: hidden;
}

.table[b-osgh5lmc9n] {
    margin-bottom: 0;
}

.table thead[b-osgh5lmc9n] {
    background: var(--gris-50);
    color: var(--text-secondary);
}

.table thead th[b-osgh5lmc9n] {
    border: none;
    padding: var(--espacio-4);
    font-weight: var(--peso-semibold);
    text-transform: uppercase;
    font-size: var(--texto-xs);
    letter-spacing: var(--interletra-amplia);
}

.table tbody tr[b-osgh5lmc9n] {
    transition: var(--transition-fast);
    border-bottom: 1px solid var(--gris-100);
}

.table tbody tr:hover[b-osgh5lmc9n] {
    background-color: var(--gris-50);
}

.table tbody td[b-osgh5lmc9n] {
    padding: var(--espacio-4);
    vertical-align: middle;
    font-size: var(--texto-sm);
    color: var(--text-secondary);
}

.table tbody td strong[b-osgh5lmc9n] {
    color: var(--text-heading);
    font-weight: var(--peso-semibold);
}

/* Badges — solo patrón pastel (§3.4). Los contadores (Directivas,
   Usuarios) no son un estado, son un total sin carga valorativa
   (§7.4): antes bg-info/bg-secondary, ahora ambos badge-secondary. */
.badge[b-osgh5lmc9n] {
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-6);
    font-weight: var(--peso-medio);
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
}

/* Grupo de botones de acción */
.btn-group-sm .btn[b-osgh5lmc9n] {
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-6);
    transition: var(--transition-fast);
}

/* Ver/Editar — excepción acotada de color en íconos de acción de fila
   (§3.3, 3 acciones compactas por fila: ver/editar/activar-desactivar),
   mismos tokens que Censo.razor.css y Usuarios.razor.css. Reemplaza a
   btn-outline-primary/btn-outline-warning, que acá solo se usaban para
   estos dos botones. */
.btn-ver[b-osgh5lmc9n] {
    background-color: transparent;
    border-color: var(--azul-900);
    color: var(--azul-900);
}

.btn-editar[b-osgh5lmc9n] {
    background-color: transparent;
    border-color: var(--amarillo-cgt-900);
    color: var(--amarillo-cgt-900);
}

.btn-ver:hover[b-osgh5lmc9n],
.btn-editar:hover[b-osgh5lmc9n] {
    background-color: var(--color-accion-secundaria-fondo);
    border-color: var(--gris-700);
    color: var(--gris-900);
    transform: translateY(-2px);
}

.btn-outline-secondary[b-osgh5lmc9n] {
    color: var(--text-secondary);
    border-color: var(--gris-500);
}

.btn-outline-secondary:hover[b-osgh5lmc9n] {
    background-color: var(--gris-500);
    border-color: var(--gris-500);
    color: var(--text-inverso);
    transform: translateY(-2px);
}

.btn-outline-success[b-osgh5lmc9n] {
    color: var(--color-exito-texto);
    border-color: var(--color-exito);
}

.btn-outline-success:hover[b-osgh5lmc9n] {
    background-color: var(--color-exito);
    border-color: var(--color-exito);
    transform: translateY(-2px);
}

/* Iconos en contacto */
.table tbody td .bi-telephone[b-osgh5lmc9n],
.table tbody td .bi-envelope[b-osgh5lmc9n] {
    color: var(--color-accion-primaria);
    margin-right: var(--espacio-1);
}

/* Spinner de carga */
.spinner-border[b-osgh5lmc9n] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

.text-center.py-5[b-osgh5lmc9n] {
    padding: var(--espacio-12) 0;
}

.text-center.py-5 i[b-osgh5lmc9n] {
    opacity: 0.3;
}

/* Estado vacío */
.text-center.py-5 .bi-inbox[b-osgh5lmc9n] {
    color: var(--gris-400);
    font-size: var(--icono-2xl);
}

/* Responsive */
@media (max-width: 768px) {
    .card-body[b-osgh5lmc9n] {
        padding: var(--espacio-4);
    }

    .table thead th[b-osgh5lmc9n],
    .table tbody td[b-osgh5lmc9n] {
        padding: var(--espacio-3) var(--espacio-2);
        font-size: var(--texto-xs);
    }

    .btn-group-sm[b-osgh5lmc9n] {
        flex-direction: column;
    }

    h2[b-osgh5lmc9n] {
        font-size: var(--texto-lg);
    }
}

/* Animaciones */
@keyframes fadeIn-b-osgh5lmc9n {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card[b-osgh5lmc9n],
.alert[b-osgh5lmc9n] {
    animation: fadeIn-b-osgh5lmc9n 0.3s ease;
}
/* /Components/Pages/Sindicatos/VerSindicato.razor.rz.scp.css */
/* Ver Sindicato — módulo organizacional
   Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md.
   Este archivo no existía antes de la migración: la página no tenía CSS
   propio y dependía del degradado carbón por defecto de .card-header
   (app.css) para sus 4 tarjetas — hallazgo #5 de AJUSTES-PENDIENTES.md.
   Mismo tratamiento que VerUsuario.razor.css/Financiero/DetalleCruce.razor.css:
   card clara + acento de marca en el borde. */
.card-header[b-dcep97d56f] {
    background: var(--surface-card) !important;
    color: var(--text-heading);
    border: none;
    border-bottom: 1px solid var(--borde-sutil);
    position: relative;
    overflow: hidden;
}

.card-header[b-dcep97d56f]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--menu-activo-borde);
}

.card-header h5[b-dcep97d56f] {
    color: var(--text-heading);
}
/* /Components/Pages/Usuarios/CrearUsuario.razor.rz.scp.css */
/* Crear Usuario — módulo organizacional
   Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md.
   Mismo caso que Usuarios.razor.css: este archivo sobrescribe clases
   globales ya migradas en app.css (.card, .btn-primary, .alert, etc.)
   con el scope de Blazor, que gana en especificidad — se retokeniza acá
   en vez de eliminarse para no cambiar la arquitectura de la página. */

/* Container */
.container[b-rh3dg5x6o0] {
    max-width: 1200px;
    padding-top: var(--espacio-8);
}

/* Header */
h2[b-rh3dg5x6o0] {
    color: var(--text-heading);
    font-weight: var(--peso-semibold);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-4);
}

h2 i[b-rh3dg5x6o0] {
    color: var(--color-accion-primaria);
    font-size: var(--icono-xl);
}

/* Breadcrumb */
.breadcrumb[b-rh3dg5x6o0] {
    background-color: transparent;
    padding: 0;
    margin-bottom: 0;
    font-size: var(--texto-sm);
}

.breadcrumb-item a[b-rh3dg5x6o0] {
    color: var(--color-accion-primaria);
    text-decoration: none;
    transition: var(--transition-normal);
}

.breadcrumb-item a:hover[b-rh3dg5x6o0] {
    color: var(--color-accion-primaria-hover);
    text-decoration: underline;
}

.breadcrumb-item.active[b-rh3dg5x6o0] {
    color: var(--text-muted);
}

/* Card principal */
.card[b-rh3dg5x6o0] {
    border: none;
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    background: var(--surface-card);
    margin-bottom: var(--espacio-8);
}

.card-body[b-rh3dg5x6o0] {
    padding: var(--espacio-8);
}

/* Formularios */
.form-label[b-rh3dg5x6o0] {
    font-weight: var(--peso-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--espacio-2);
    font-size: var(--texto-sm);
}

.form-label[b-rh3dg5x6o0]::after {
    content: none;
}

.form-control[b-rh3dg5x6o0],
.form-select[b-rh3dg5x6o0],
textarea.form-control[b-rh3dg5x6o0] {
    border: 1.5px solid var(--borde-input);
    border-radius: var(--radio-8);
    padding: var(--espacio-3) var(--espacio-4);
    transition: var(--transition-normal);
    font-size: var(--texto-sm);
}

.form-control:focus[b-rh3dg5x6o0],
.form-select:focus[b-rh3dg5x6o0],
textarea.form-control:focus[b-rh3dg5x6o0] {
    border-color: var(--borde-input-foco);
    box-shadow: 0 0 0 3px var(--color-foco-anillo);
}

textarea.form-control[b-rh3dg5x6o0] {
    min-height: 100px;
    resize: vertical;
}

/* Switch personalizado */
.form-check-input[b-rh3dg5x6o0] {
    width: 3rem;
    height: 1.5rem;
    cursor: pointer;
    border: 1.5px solid var(--borde-input);
    background-color: var(--gris-200);
}

.form-check-input:checked[b-rh3dg5x6o0] {
    background-color: var(--color-accion-primaria);
    border-color: var(--color-accion-primaria);
}

.form-check-label[b-rh3dg5x6o0] {
    font-weight: var(--peso-medio);
    color: var(--text-secondary);
    margin-left: var(--espacio-2);
    cursor: pointer;
}

/* Validación */
.validation-message[b-rh3dg5x6o0] {
    color: var(--color-destructivo-texto);
    font-size: var(--texto-sm);
    margin-top: var(--espacio-1);
    display: block;
}

.invalid[b-rh3dg5x6o0] {
    border-color: var(--color-destructivo) !important;
}

/* Alertas — fondo pastel plano, mismo criterio que .alert-success/
   .alert-danger ya migradas en app.css. */
.alert[b-rh3dg5x6o0] {
    border: none;
    border-radius: var(--radio-10);
    padding: var(--espacio-4) var(--espacio-5);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--espacio-6);
}

.alert i[b-rh3dg5x6o0] {
    font-size: var(--texto-lg);
}

.alert-danger[b-rh3dg5x6o0] {
    background: var(--color-destructivo-fondo);
    color: var(--color-destructivo-texto);
}

.alert-success[b-rh3dg5x6o0] {
    background: var(--color-exito-fondo);
    color: var(--color-exito-texto);
}

.btn-close[b-rh3dg5x6o0] {
    margin-left: auto;
}

/* Botones — primario en carbón sólido, sin degradado; genérico en gris
   (regla del sistema: ver §7.1 de SISTEMA-DISENO.md). */
.btn[b-rh3dg5x6o0] {
    padding: var(--espacio-3) var(--espacio-6);
    font-weight: var(--peso-medio);
    border-radius: var(--radio-8);
    transition: var(--transition-normal);
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
}

.btn-primary[b-rh3dg5x6o0] {
    background: var(--color-accion-primaria);
    border: none;
    color: var(--text-inverso);
    box-shadow: none;
}

.btn-primary:hover[b-rh3dg5x6o0] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background: var(--color-accion-primaria-hover);
}

.btn-secondary[b-rh3dg5x6o0] {
    background-color: var(--color-accion-secundaria-fondo);
    border: none;
    color: var(--color-accion-secundaria-texto);
}

.btn-secondary:hover[b-rh3dg5x6o0] {
    background-color: var(--color-accion-secundaria-fondo-hover);
    transform: translateY(-2px);
}

.btn:disabled[b-rh3dg5x6o0] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Botones de acción del formulario */
.d-flex.gap-2[b-rh3dg5x6o0] {
    gap: var(--espacio-4) !important;
    margin-top: var(--espacio-8);
}

/* Spinner */
.spinner-border[b-rh3dg5x6o0] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

.text-center.py-5[b-rh3dg5x6o0] {
    padding: var(--espacio-12) 0;
}

/* Secciones del formulario */
.row.mb-3[b-rh3dg5x6o0] {
    margin-bottom: var(--espacio-6) !important;
}

/* Información adicional */
.text-muted[b-rh3dg5x6o0] {
    color: var(--text-muted) !important;
    font-size: var(--texto-sm);
    margin-top: var(--espacio-1);
}

/* Divisor visual */
hr[b-rh3dg5x6o0] {
    border-top: 2px solid var(--borde-sutil);
    margin: var(--espacio-8) 0;
}

/* Sección de título dentro del form */
h5[b-rh3dg5x6o0] {
    color: var(--text-secondary);
    font-weight: var(--peso-semibold);
    margin-bottom: var(--espacio-4);
    padding-bottom: var(--espacio-2);
    border-bottom: 2px solid var(--borde-sutil);
}

/* Input group (para iconos y prefijos) */
.input-group[b-rh3dg5x6o0] {
    border-radius: var(--radio-8);
    overflow: hidden;
}

.input-group-text[b-rh3dg5x6o0] {
    background-color: var(--gris-50);
    border: 1.5px solid var(--borde-input);
    border-right: none;
    color: var(--color-accion-primaria);
}

.input-group .form-control[b-rh3dg5x6o0] {
    border-left: none;
}

/* Responsive */
@media (max-width: 768px) {
    .container[b-rh3dg5x6o0] {
        padding: var(--espacio-4);
    }

    .card-body[b-rh3dg5x6o0] {
        padding: var(--espacio-5);
    }

    h2[b-rh3dg5x6o0] {
        font-size: var(--texto-lg);
    }

    .btn[b-rh3dg5x6o0] {
        width: 100%;
        justify-content: center;
    }

    .d-flex.gap-2[b-rh3dg5x6o0] {
        flex-direction: column;
    }
}

/* Animaciones */
@keyframes fadeIn-b-rh3dg5x6o0 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card[b-rh3dg5x6o0],
.alert[b-rh3dg5x6o0] {
    animation: fadeIn-b-rh3dg5x6o0 0.3s ease;
}

/* Mejoras para accesibilidad */
.form-control:focus[b-rh3dg5x6o0],
.form-select:focus[b-rh3dg5x6o0] {
    outline: none;
}

/* Estados hover para mejor feedback */
.form-control:hover[b-rh3dg5x6o0],
.form-select:hover[b-rh3dg5x6o0] {
    border-color: var(--color-accion-primaria);
}
/* /Components/Pages/Usuarios/EditarUsuario.razor.rz.scp.css */
/* Editar Usuario — módulo organizacional
   Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md.
   Mismo caso que CrearUsuario.razor.css: sobrescribe clases globales ya
   migradas en app.css con el scope de Blazor — se retokeniza acá en
   vez de eliminarse para no cambiar la arquitectura de la página. */

/* Container */
.container[b-dlg8aq59o4] {
    max-width: 1200px;
    padding-top: var(--espacio-8);
}

/* Header — ícono en amarillo-cgt-900, mismo tono que "editar" en la
   excepción de íconos de acción de fila (§3.3): esta página también es
   una acción de edición, conserva la misma señal de color. El foco de
   los inputs, en cambio, usa los tokens estándar (--borde-input-foco/
   --color-foco-anillo) en vez del ámbar que tenía antes — no hay
   ningún otro formulario del sistema con foco ámbar, y mantenerlo acá
   habría sido una variación sin precedente en vez de una decisión
   consciente. */
h2[b-dlg8aq59o4] {
    color: var(--text-heading);
    font-weight: var(--peso-semibold);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-4);
}

h2 i[b-dlg8aq59o4] {
    color: var(--amarillo-cgt-900);
    font-size: var(--icono-xl);
}

/* Breadcrumb */
.breadcrumb[b-dlg8aq59o4] {
    background-color: transparent;
    padding: 0;
    margin-bottom: 0;
    font-size: var(--texto-sm);
}

.breadcrumb-item a[b-dlg8aq59o4] {
    color: var(--color-accion-primaria);
    text-decoration: none;
    transition: var(--transition-normal);
}

.breadcrumb-item a:hover[b-dlg8aq59o4] {
    color: var(--color-accion-primaria-hover);
    text-decoration: underline;
}

.breadcrumb-item.active[b-dlg8aq59o4] {
    color: var(--text-muted);
}

/* Card principal */
.card[b-dlg8aq59o4] {
    border: none;
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    background: var(--surface-card);
    margin-bottom: var(--espacio-8);
}

.card-body[b-dlg8aq59o4] {
    padding: var(--espacio-8);
}

/* Formularios */
.form-label[b-dlg8aq59o4] {
    font-weight: var(--peso-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--espacio-2);
    font-size: var(--texto-sm);
}

.form-control[b-dlg8aq59o4],
.form-select[b-dlg8aq59o4],
textarea.form-control[b-dlg8aq59o4] {
    border: 1.5px solid var(--borde-input);
    border-radius: var(--radio-8);
    padding: var(--espacio-3) var(--espacio-4);
    transition: var(--transition-normal);
    font-size: var(--texto-sm);
}

.form-control:focus[b-dlg8aq59o4],
.form-select:focus[b-dlg8aq59o4],
textarea.form-control:focus[b-dlg8aq59o4] {
    border-color: var(--borde-input-foco);
    box-shadow: 0 0 0 3px var(--color-foco-anillo);
}

textarea.form-control[b-dlg8aq59o4] {
    min-height: 100px;
    resize: vertical;
}

/* Switch */
.form-check-input[b-dlg8aq59o4] {
    width: 3rem;
    height: 1.5rem;
    cursor: pointer;
    border: 1.5px solid var(--borde-input);
    background-color: var(--gris-200);
}

.form-check-input:checked[b-dlg8aq59o4] {
    background-color: var(--color-accion-primaria);
    border-color: var(--color-accion-primaria);
}

.form-check-label[b-dlg8aq59o4] {
    font-weight: var(--peso-medio);
    color: var(--text-secondary);
    margin-left: var(--espacio-2);
    cursor: pointer;
}

/* Alertas */
.alert[b-dlg8aq59o4] {
    border: none;
    border-radius: var(--radio-10);
    padding: var(--espacio-4) var(--espacio-5);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--espacio-6);
}

.alert i[b-dlg8aq59o4] {
    font-size: var(--texto-lg);
}

.alert-danger[b-dlg8aq59o4] {
    background: var(--color-destructivo-fondo);
    color: var(--color-destructivo-texto);
}

.btn-close[b-dlg8aq59o4] {
    margin-left: auto;
}

/* Botones — primario en carbón sólido, sin degradado (regla fija, no
   varía por contexto de crear/editar). */
.btn[b-dlg8aq59o4] {
    padding: var(--espacio-3) var(--espacio-6);
    font-weight: var(--peso-medio);
    border-radius: var(--radio-8);
    transition: var(--transition-normal);
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
}

.btn-primary[b-dlg8aq59o4] {
    background: var(--color-accion-primaria);
    border: none;
    color: var(--text-inverso);
    box-shadow: none;
}

.btn-primary:hover[b-dlg8aq59o4] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background: var(--color-accion-primaria-hover);
}

.btn-secondary[b-dlg8aq59o4] {
    background-color: var(--color-accion-secundaria-fondo);
    border: none;
    color: var(--color-accion-secundaria-texto);
}

.btn-secondary:hover[b-dlg8aq59o4] {
    background-color: var(--color-accion-secundaria-fondo-hover);
    transform: translateY(-2px);
}

.btn:disabled[b-dlg8aq59o4] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Botones de acción */
.d-flex.gap-2[b-dlg8aq59o4] {
    gap: var(--espacio-4) !important;
    margin-top: var(--espacio-8);
}

/* Spinner */
.spinner-border[b-dlg8aq59o4] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

.text-center.py-5[b-dlg8aq59o4] {
    padding: var(--espacio-12) 0;
}

/* Secciones */
.row.mb-3[b-dlg8aq59o4] {
    margin-bottom: var(--espacio-6) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .container[b-dlg8aq59o4] {
        padding: var(--espacio-4);
    }

    .card-body[b-dlg8aq59o4] {
        padding: var(--espacio-5);
    }

    h2[b-dlg8aq59o4] {
        font-size: var(--texto-lg);
    }

    .btn[b-dlg8aq59o4] {
        width: 100%;
        justify-content: center;
    }

    .d-flex.gap-2[b-dlg8aq59o4] {
        flex-direction: column;
    }
}

/* Animaciones */
@keyframes fadeIn-b-dlg8aq59o4 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card[b-dlg8aq59o4],
.alert[b-dlg8aq59o4] {
    animation: fadeIn-b-dlg8aq59o4 0.3s ease;
}
/* /Components/Pages/Usuarios/Usuarios.razor.rz.scp.css */
/* Gestión de Usuarios — módulo organizacional
   Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md.
   Este archivo sobrescribe clases globales (.card, .btn-primary, .badge,
   .alert, .table, .bg-*) con selectores propios del componente — el
   scope de Blazor les da mayor especificidad que las mismas clases en
   app.css, así que ganan siempre en esta página aunque app.css ya las
   tenga migradas. Se retokenizan acá en vez de eliminarse para no
   cambiar la arquitectura de la página. */

/* Header de la página */
h2[b-yjk9sbc27l] {
    color: var(--text-heading);
    font-weight: var(--peso-semibold);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-2);
}

h2 i[b-yjk9sbc27l] {
    color: var(--color-accion-primaria);
    font-size: var(--icono-xl);
}

.text-muted[b-yjk9sbc27l] {
    color: var(--text-muted) !important;
    font-size: var(--texto-sm);
}

/* Botones principales — primario en carbón sólido, sin degradado
   (regla del sistema: ver Docs/design-system/SISTEMA-DISENO.md §7.1). */
.btn-primary[b-yjk9sbc27l] {
    background: var(--color-accion-primaria);
    border: none;
    padding: var(--espacio-3) var(--espacio-6);
    font-weight: var(--peso-medio);
    border-radius: var(--radio-8);
    box-shadow: none;
    transition: var(--transition-normal);
}

.btn-primary:hover[b-yjk9sbc27l] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background: var(--color-accion-primaria-hover);
}

.btn-primary i[b-yjk9sbc27l] {
    margin-right: var(--espacio-2);
}

/* Cards */
.card[b-yjk9sbc27l] {
    border: none;
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
    background: var(--surface-card);
}

.card:hover[b-yjk9sbc27l] {
    box-shadow: var(--shadow-md);
}

.card-body[b-yjk9sbc27l] {
    padding: var(--espacio-6);
}

/* Formularios y controles */
.form-label[b-yjk9sbc27l] {
    font-weight: var(--peso-medio);
    color: var(--text-secondary);
    margin-bottom: var(--espacio-2);
    font-size: var(--texto-sm);
}

.form-select[b-yjk9sbc27l],
.form-control[b-yjk9sbc27l] {
    border: 1.5px solid var(--borde-input);
    border-radius: var(--radio-8);
    padding: var(--espacio-3) var(--espacio-4);
    transition: var(--transition-normal);
    font-size: var(--texto-sm);
}

.form-select:focus[b-yjk9sbc27l],
.form-control:focus[b-yjk9sbc27l] {
    border-color: var(--borde-input-foco);
    box-shadow: 0 0 0 3px var(--color-foco-anillo);
}

/* Alertas — fondo pastel plano (no degradado), mismo criterio que
   .alert-success/.alert-danger ya migradas en app.css. */
.alert[b-yjk9sbc27l] {
    border: none;
    border-radius: var(--radio-10);
    padding: var(--espacio-4) var(--espacio-5);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    box-shadow: var(--shadow-sm);
}

.alert i[b-yjk9sbc27l] {
    font-size: var(--texto-lg);
}

.alert-success[b-yjk9sbc27l] {
    background: var(--color-exito-fondo);
    color: var(--color-exito-texto);
}

.alert-danger[b-yjk9sbc27l] {
    background: var(--color-destructivo-fondo);
    color: var(--color-destructivo-texto);
}

.btn-close[b-yjk9sbc27l] {
    margin-left: auto;
}

/* Tabla */
.table-responsive[b-yjk9sbc27l] {
    border-radius: var(--radio-8);
    overflow: hidden;
}

.table[b-yjk9sbc27l] {
    margin-bottom: 0;
}

/* Encabezado de tabla — antes degradado de marca-purpura sólido con
   texto blanco; app.css ya resuelve esto en gris claro para el resto
   del sistema (ver ::deep thead th en los módulos migrados). */
.table thead[b-yjk9sbc27l] {
    background: var(--gris-50);
    color: var(--text-secondary);
}

.table thead th[b-yjk9sbc27l] {
    border: none;
    padding: var(--espacio-4);
    font-weight: var(--peso-semibold);
    text-transform: uppercase;
    font-size: var(--texto-xs);
    letter-spacing: var(--interletra-amplia);
}

.table tbody tr[b-yjk9sbc27l] {
    transition: var(--transition-fast);
    border-bottom: 1px solid var(--gris-100);
}

.table tbody tr:hover[b-yjk9sbc27l] {
    background-color: var(--gris-50);
}

.table tbody td[b-yjk9sbc27l] {
    padding: var(--espacio-4);
    vertical-align: middle;
    font-size: var(--texto-sm);
    color: var(--text-secondary);
}

/* Badges — solo patrón pastel (ver §3.4 de SISTEMA-DISENO.md). Los
   colores de TipoUsuario se resuelven en Usuarios.razor (clase
   ObtenerColorTipoUsuario): ver comentario ahí sobre por qué 3 de los
   6 roles terminan en el mismo gris — reportado como tokens faltantes
   en el entregable de esta migración (no hay familia de badges
   categóricos distinta de los badges de estado). */
.badge[b-yjk9sbc27l] {
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-6);
    font-weight: var(--peso-medio);
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
}

/* Grupo de botones de acción */
.btn-group-sm .btn[b-yjk9sbc27l] {
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-6);
    transition: var(--transition-fast);
}

/* Ver/Editar — excepción acotada de color en íconos de acción de fila
   (§3.3 de SISTEMA-DISENO.md, mismo criterio y mismos tokens que
   Censo.razor.css): con 4 acciones compactas por fila (ver, editar,
   restablecer contraseña, activar/desactivar) el color contenido
   acelera el reconocimiento. Reemplaza a btn-outline-primary/
   btn-outline-warning, que acá solo se usaban para estos dos botones
   (nunca en su sentido genérico "primario"/"advertencia" dentro de
   esta página) — renombradas para que el nombre de la clase no
   confunda con el botón primario real de la página. */
.btn-ver[b-yjk9sbc27l] {
    background-color: transparent;
    border-color: var(--azul-900);
    color: var(--azul-900);
}

.btn-editar[b-yjk9sbc27l] {
    background-color: transparent;
    border-color: var(--amarillo-cgt-900);
    color: var(--amarillo-cgt-900);
}

.btn-ver:hover[b-yjk9sbc27l],
.btn-editar:hover[b-yjk9sbc27l] {
    background-color: var(--color-accion-secundaria-fondo);
    border-color: var(--gris-700);
    color: var(--gris-900);
    transform: translateY(-2px);
}

.btn-outline-secondary[b-yjk9sbc27l] {
    color: var(--text-secondary);
    border-color: var(--gris-500);
}

.btn-outline-secondary:hover[b-yjk9sbc27l] {
    background-color: var(--gris-500);
    border-color: var(--gris-500);
    transform: translateY(-2px);
}

.btn-outline-success[b-yjk9sbc27l] {
    color: var(--color-exito-texto);
    border-color: var(--color-exito);
}

.btn-outline-success:hover[b-yjk9sbc27l] {
    background-color: var(--color-exito);
    border-color: var(--color-exito);
    transform: translateY(-2px);
}

/* Spinner de carga — tamaño propio de esta página (más grande que el
   spinner por defecto de app.css, 40px); no hay token de dimensión
   para esto, es un valor estructural, no de color. */
.spinner-border[b-yjk9sbc27l] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

.text-center.py-5[b-yjk9sbc27l] {
    padding: var(--espacio-12) 0;
}

.text-center.py-5 i[b-yjk9sbc27l] {
    opacity: 0.3;
}

/* Estado vacío */
.text-center.py-5 .bi-inbox[b-yjk9sbc27l] {
    color: var(--gris-400);
    font-size: var(--icono-2xl);
}

/* Responsive */
@media (max-width: 768px) {
    .card-body[b-yjk9sbc27l] {
        padding: var(--espacio-4);
    }

    .table thead th[b-yjk9sbc27l],
    .table tbody td[b-yjk9sbc27l] {
        padding: var(--espacio-3) var(--espacio-2);
        font-size: var(--texto-xs);
    }

    .btn-group-sm[b-yjk9sbc27l] {
        flex-direction: column;
    }

    h2[b-yjk9sbc27l] {
        font-size: var(--texto-lg);
    }
}

/* Animaciones */
@keyframes fadeIn-b-yjk9sbc27l {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card[b-yjk9sbc27l],
.alert[b-yjk9sbc27l] {
    animation: fadeIn-b-yjk9sbc27l 0.3s ease;
}
/* /Components/Pages/Usuarios/VerUsuario.razor.rz.scp.css */
/* Ver Usuario — módulo organizacional
   Migrado al sistema de tokens — Docs/design-system/SISTEMA-DISENO.md. */

/* Container */
.container[b-lbyfqu5hh2] {
    max-width: 1200px;
    padding-top: var(--espacio-8);
}

/* Header */
h2[b-lbyfqu5hh2] {
    color: var(--text-heading);
    font-weight: var(--peso-semibold);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-4);
}

h2 i[b-lbyfqu5hh2] {
    color: var(--color-accion-primaria);
    font-size: var(--icono-xl);
}

/* Breadcrumb */
.breadcrumb[b-lbyfqu5hh2] {
    background-color: transparent;
    padding: 0;
    margin-bottom: 0;
    font-size: var(--texto-sm);
}

.breadcrumb-item a[b-lbyfqu5hh2] {
    color: var(--color-accion-primaria);
    text-decoration: none;
    transition: var(--transition-normal);
}

.breadcrumb-item a:hover[b-lbyfqu5hh2] {
    color: var(--color-accion-primaria-hover);
    text-decoration: underline;
}

.breadcrumb-item.active[b-lbyfqu5hh2] {
    color: var(--text-muted);
}

/* Cards */
.card[b-lbyfqu5hh2] {
    border: none;
    border-radius: var(--radio-12);
    box-shadow: var(--shadow-sm);
    background: var(--surface-card);
    margin-bottom: var(--espacio-6);
}

/* Card-header claro con acento de marca en el borde — antes degradado
   sólido con texto blanco en las 5 cards de esta página (hallazgo #5 de
   AJUSTES-PENDIENTES.md). Mismo tratamiento que Home.razor.css
   .welcome-banner y Financiero/DetalleCruce.razor.css: card clara +
   borde izquierdo tricolor de 4px vía ::before (no border-image, ver
   el comentario de DetalleCruce.razor.css para el porqué). */
.card-header[b-lbyfqu5hh2] {
    background: var(--surface-card) !important;
    color: var(--text-heading);
    border: none;
    border-bottom: 1px solid var(--borde-sutil);
    border-radius: var(--radio-12) var(--radio-12) 0 0 !important;
    padding: var(--espacio-4) var(--espacio-6);
    position: relative;
    overflow: hidden;
}

.card-header[b-lbyfqu5hh2]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--menu-activo-borde);
}

.card-header h5[b-lbyfqu5hh2] {
    color: var(--text-heading);
    font-weight: var(--peso-semibold);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

.card-body[b-lbyfqu5hh2] {
    padding: var(--espacio-6);
}

/* Información en filas */
.row.mb-3[b-lbyfqu5hh2] {
    margin-bottom: var(--espacio-6) !important;
    padding-bottom: var(--espacio-4);
    border-bottom: 1px solid var(--gris-100);
}

.row.mb-3:last-child[b-lbyfqu5hh2] {
    border-bottom: none;
    margin-bottom: 0 !important;
}

.row strong[b-lbyfqu5hh2] {
    color: var(--text-secondary);
    font-weight: var(--peso-semibold);
    display: block;
    margin-bottom: var(--espacio-1);
    font-size: var(--texto-sm);
}

.row span:not(.badge)[b-lbyfqu5hh2] {
    color: var(--text-muted);
    font-size: var(--texto-sm);
}

/* Badges — solo patrón pastel (§3.4). Colores de TipoUsuario: ver
   comentario en ObtenerColorTipoUsuario (Usuarios.razor y VerUsuario.razor,
   misma función duplicada en ambos archivos) sobre por qué 3 de los 6
   roles terminan en el mismo gris — tokens faltantes reportados en el
   entregable de esta migración. */
.badge[b-lbyfqu5hh2] {
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-6);
    font-weight: var(--peso-medio);
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: var(--interletra-amplia);
}

/* Botones — Editar es la acción principal de esta pantalla (carbón
   sólido); Restablecer Contraseña es una acción genérica (gris outline,
   regla del sistema). Antes btn-warning/btn-info, dos colores de estado
   sin relación con lo que hacían estos botones. */
.btn[b-lbyfqu5hh2] {
    padding: var(--espacio-3) var(--espacio-6);
    font-weight: var(--peso-medio);
    border-radius: var(--radio-8);
    transition: var(--transition-normal);
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
}

.btn-primary[b-lbyfqu5hh2] {
    background: var(--color-accion-primaria);
    border: none;
    color: var(--text-inverso);
    box-shadow: none;
}

.btn-primary:hover[b-lbyfqu5hh2] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background: var(--color-accion-primaria-hover);
}

.btn-outline-secondary[b-lbyfqu5hh2] {
    background: transparent;
    border: 1.5px solid var(--gris-500);
    color: var(--text-secondary);
}

.btn-outline-secondary:hover[b-lbyfqu5hh2] {
    background-color: var(--color-accion-secundaria-fondo);
    border-color: var(--gris-700);
    transform: translateY(-2px);
}

.btn-secondary[b-lbyfqu5hh2] {
    background-color: var(--color-accion-secundaria-fondo);
    border: none;
    color: var(--color-accion-secundaria-texto);
}

.btn-secondary:hover[b-lbyfqu5hh2] {
    background-color: var(--color-accion-secundaria-fondo-hover);
    transform: translateY(-2px);
}

/* Alertas */
.alert[b-lbyfqu5hh2] {
    border: none;
    border-radius: var(--radio-10);
    padding: var(--espacio-4) var(--espacio-5);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--espacio-6);
}

.alert i[b-lbyfqu5hh2] {
    font-size: var(--texto-lg);
}

.alert-success[b-lbyfqu5hh2] {
    background: var(--color-exito-fondo);
    color: var(--color-exito-texto);
}

.alert-danger[b-lbyfqu5hh2] {
    background: var(--color-destructivo-fondo);
    color: var(--color-destructivo-texto);
}

.btn-close[b-lbyfqu5hh2] {
    margin-left: auto;
}

/* Spinner */
.spinner-border[b-lbyfqu5hh2] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

.text-center.py-5[b-lbyfqu5hh2] {
    padding: var(--espacio-12) 0;
}

/* Enlaces dentro de las cards */
.card-body a[b-lbyfqu5hh2] {
    color: var(--color-accion-primaria);
    text-decoration: none;
    transition: var(--transition-normal);
}

.card-body a:hover[b-lbyfqu5hh2] {
    color: var(--color-accion-primaria-hover);
    text-decoration: underline;
}

/* Iconos dentro del contenido */
.bi[b-lbyfqu5hh2] {
    vertical-align: middle;
}

/* Divisores */
.card-body hr[b-lbyfqu5hh2] {
    border-top: 2px solid var(--borde-sutil);
    margin: var(--espacio-6) 0;
}

/* Listas dentro de las cards */
.card-body ul[b-lbyfqu5hh2] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.card-body ul li[b-lbyfqu5hh2] {
    padding: var(--espacio-2) 0;
    border-bottom: 1px solid var(--gris-100);
}

.card-body ul li:last-child[b-lbyfqu5hh2] {
    border-bottom: none;
}

/* Responsive */
@media (max-width: 768px) {
    .container[b-lbyfqu5hh2] {
        padding: var(--espacio-4);
    }

    .card-body[b-lbyfqu5hh2] {
        padding: var(--espacio-5);
    }

    h2[b-lbyfqu5hh2] {
        font-size: var(--texto-lg);
    }

    .btn[b-lbyfqu5hh2] {
        width: 100%;
        justify-content: center;
        margin-bottom: var(--espacio-2);
    }

    .col-auto[b-lbyfqu5hh2] {
        width: 100%;
    }

    .row.mb-3[b-lbyfqu5hh2] {
        margin-bottom: var(--espacio-4) !important;
    }
}

/* Animaciones */
@keyframes fadeIn-b-lbyfqu5hh2 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card[b-lbyfqu5hh2],
.alert[b-lbyfqu5hh2] {
    animation: fadeIn-b-lbyfqu5hh2 0.3s ease;
}

/* Mejoras visuales para datos importantes */
.card-body .display-4[b-lbyfqu5hh2] {
    color: var(--color-accion-primaria);
    font-weight: var(--peso-bold);
}

.card-body .text-muted[b-lbyfqu5hh2] {
    font-size: var(--texto-sm);
}

/* Grid de información */
.info-grid[b-lbyfqu5hh2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--espacio-6);
}

.info-item[b-lbyfqu5hh2] {
    padding: var(--espacio-4);
    background-color: var(--gris-50);
    border-radius: var(--radio-8);
    border-left: 4px solid var(--color-accion-primaria);
}

.info-item strong[b-lbyfqu5hh2] {
    display: block;
    color: var(--text-secondary);
    margin-bottom: var(--espacio-2);
}

.info-item span[b-lbyfqu5hh2] {
    color: var(--text-muted);
}