@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.7t9tbfaemk.bundle.scp.css';
@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Componentes/Banderines/GeneradorBanderines.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * GeneradorBanderines.razor.css — Modal Diseñador de Banderines
 * ──────────────────────────────────────────────────────────────────────
 * Réplica de FlagCustomizerModal de PatrolsPage.tsx (React).
 * Layout split: preview izquierda (60%) / controles derecha (40%).
 * Mobile: columna vertical (preview arriba, controles abajo).
 * ══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
 * Overlay oscuro con blur
 * ═══════════════════════════════════════════════════════ */
.gbanderin-overlay[b-f3hzuqjea2] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 50;
    animation: gbanderin-fade-in-b-f3hzuqjea2 0.2s ease;
}

@keyframes gbanderin-fade-in-b-f3hzuqjea2 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════
 * Modal contenedor
 * ═══════════════════════════════════════════════════════ */
.gbanderin-modal[b-f3hzuqjea2] {
    position: fixed;
    inset: 1rem;
    z-index: 51;
    background: #F8F5F0;
    border-radius: 1.5rem;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-width: 72rem;
    margin: auto;
    animation: gbanderin-modal-in-b-f3hzuqjea2 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes gbanderin-modal-in-b-f3hzuqjea2 {
    from { opacity: 0; transform: scale(0.95) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@media (min-width: 768px) {
    .gbanderin-modal[b-f3hzuqjea2] {
        inset: 2.5rem;
        flex-direction: row;
    }
}


/* ═══════════════════════════════════════════════════════
 * IZQUIERDA: Preview del banderín
 * ═══════════════════════════════════════════════════════ */
.gbanderin-preview[b-f3hzuqjea2] {
    flex: 1;
    background: #EBE5DA;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    min-height: 220px;
}

@media (min-width: 768px) {
    .gbanderin-preview[b-f3hzuqjea2] { padding: 3rem; }
}

/* Patrón de puntos del fondo */
.gbanderin-preview-dots[b-f3hzuqjea2] {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background-image: radial-gradient(#37474F 1px, transparent 1px);
    background-size: 20px 20px;
}

.gbanderin-preview-inner[b-f3hzuqjea2] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 26rem;
    aspect-ratio: 1.6 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-f3hzuqjea2] .gbanderin-preview-inner .banderin-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.2));
}


/* ═══════════════════════════════════════════════════════
 * DERECHA: Panel de controles
 * ═══════════════════════════════════════════════════════ */
.gbanderin-panel[b-f3hzuqjea2] {
    width: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top: 1px solid #ECE6D8;
}

@media (min-width: 768px) {
    .gbanderin-panel[b-f3hzuqjea2] {
        width: 400px;
        flex-shrink: 0;
        border-top: none;
        border-left: 1px solid #ECE6D8;
    }
}

@media (min-width: 1024px) {
    .gbanderin-panel[b-f3hzuqjea2] { width: 450px; }
}

/* Header del panel (sticky) */
.gbanderin-panel-header[b-f3hzuqjea2] {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #ffffff;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #ECE6D8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.gbanderin-panel-titulo[b-f3hzuqjea2] {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #37474F;
    margin: 0;
}

.gbanderin-cerrar[b-f3hzuqjea2] {
    width: 2rem;
    height: 2rem;
    border: none;
    background: var(--danger, #D32F2F);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(211, 47, 47, 0.25);
}

.gbanderin-cerrar:hover[b-f3hzuqjea2] {
    background: #B71C1C;
    transform: scale(1.1);
}

/* Cuerpo scrollable */
.gbanderin-panel-cuerpo[b-f3hzuqjea2] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Pie del panel (sticky) */
.gbanderin-panel-pie[b-f3hzuqjea2] {
    position: sticky;
    bottom: 0;
    background: rgba(248, 245, 240, 0.95);
    padding: 1.25rem 1.5rem;
    border-top: 1px solid #ECE6D8;
    flex-shrink: 0;
}

.gbanderin-btn-descargar[b-f3hzuqjea2] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--primary, #2E7D32);
    color: #ffffff;
    border: none;
    border-radius: 0.75rem;
    padding: 0.875rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.gbanderin-btn-descargar:hover[b-f3hzuqjea2] {
    background: #1B5E20;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.35);
}


/* ═══════════════════════════════════════════════════════
 * Secciones de control
 * ═══════════════════════════════════════════════════════ */
.gbanderin-seccion[b-f3hzuqjea2] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gbanderin-seccion-titulo[b-f3hzuqjea2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(55, 71, 79, 0.6);
    margin: 0;
}

/* Grid de formas */
.gbanderin-forma-grid[b-f3hzuqjea2] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.gbanderin-forma-btn[b-f3hzuqjea2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem;
    border-radius: 0.75rem;
    border: 2px solid #ECE6D8;
    background: transparent;
    color: rgba(55, 71, 79, 0.5);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.75rem;
    font-weight: 500;
}

.gbanderin-forma-btn:hover:not(.gbanderin-forma-btn--activo)[b-f3hzuqjea2] {
    border-color: rgba(55, 71, 79, 0.2);
}

.gbanderin-forma-btn--activo[b-f3hzuqjea2] {
    border-color: #2E7D32;
    background: rgba(46, 125, 50, 0.05);
    color: #2E7D32;
}

.gbanderin-mini-svg[b-f3hzuqjea2] {
    width: 2.5rem;
    height: 1.5rem;
}

/* Input de texto */
.gbanderin-input[b-f3hzuqjea2] {
    width: 100%;
    border: 1px solid #ECE6D8;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    color: #37474F;
    font-weight: 700;
    letter-spacing: 0.1em;
    background: #F8F5F0;
    font-size: 0.875rem;
    transition: box-shadow 0.2s, border-color 0.2s;
    box-sizing: border-box;
}

.gbanderin-input:focus[b-f3hzuqjea2] {
    outline: none;
    border-color: #2E7D32;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15);
}

.gbanderin-input-nota[b-f3hzuqjea2] {
    font-size: 0.625rem;
    color: rgba(55, 71, 79, 0.4);
    font-style: italic;
    margin: 0;
}

/* Grupos de colores */
.gbanderin-color-grupo[b-f3hzuqjea2] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gbanderin-color-grupo-label[b-f3hzuqjea2] {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(55, 71, 79, 0.5);
}

.gbanderin-swatches[b-f3hzuqjea2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.gbanderin-swatch[b-f3hzuqjea2] {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    padding: 0;
}

.gbanderin-swatch:hover[b-f3hzuqjea2] {
    transform: scale(1.15);
}

.gbanderin-swatch--activo[b-f3hzuqjea2] {
    border-color: #37474F;
    transform: scale(1.15);
}

/* Input de color nativo — oculto, disparado por JS */
.gbanderin-color-input[b-f3hzuqjea2] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    border: none;
    padding: 0;
    overflow: hidden;
}

/* Toggle: Borde y Letras unificados/separados */
.gbanderin-toggle-fila[b-f3hzuqjea2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #ECE6D8;
}

.gbanderin-toggle-label[b-f3hzuqjea2] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    user-select: none;
}

.gbanderin-toggle-track[b-f3hzuqjea2] {
    position: relative;
    width: 2.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.gbanderin-toggle-input[b-f3hzuqjea2] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.gbanderin-toggle-thumb[b-f3hzuqjea2] {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: #CBD5E1;
    transition: background 0.2s;
}

.gbanderin-toggle-thumb[b-f3hzuqjea2]::after {
    content: '';
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.gbanderin-toggle-input:checked + .gbanderin-toggle-thumb[b-f3hzuqjea2] {
    background: #2E7D32;
}

.gbanderin-toggle-input:checked + .gbanderin-toggle-thumb[b-f3hzuqjea2]::after {
    transform: translateX(1rem);
}

.gbanderin-toggle-texto[b-f3hzuqjea2] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #37474F;
}

.gbanderin-toggle-nota[b-f3hzuqjea2] {
    font-size: 0.625rem;
    color: rgba(55, 71, 79, 0.45);
    font-style: italic;
    margin: 0;
    text-align: center;
}

/* Botón de paleta — abre el selector de color personalizado */
.gbanderin-swatch-palette[b-f3hzuqjea2] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f0f0, #d8d8d8);
    border: 2px dashed #9E9E9E;
}

.gbanderin-swatch-palette:hover[b-f3hzuqjea2] {
    transform: scale(1.15);
    border-color: #37474F;
}

.gbanderin-swatch-palette i[b-f3hzuqjea2] {
    font-size: 0.65rem;
    color: white;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7));
    pointer-events: none;
}
/* /Componentes/Banderines/TarjetaPatrulla.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * TarjetaPatrulla.razor.css — Card individual de patrulla
 * ──────────────────────────────────────────────────────────────────────
 * Réplica exacta del componente PatrolCard de PatrolsPage.tsx (React).
 * ══════════════════════════════════════════════════════════════════════ */

.tpatrulla-card[b-2wlknw88r5] {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #ECE6D8;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    height: 100%;
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    cursor: default;
}

.tpatrulla-card:hover[b-2wlknw88r5] {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
    transform: translateY(-4px);
}

.tpatrulla-card:hover .tpatrulla-info[b-2wlknw88r5] {
    border-top-color: #ECE6D8;
}

.tpatrulla-card:hover .tpatrulla-nombre[b-2wlknw88r5] {
    color: #2E7D32;
}

/* Inactiva: opacity + desaturación. Al hacer hover se restaura la visibilidad */
.tpatrulla-card--inactiva[b-2wlknw88r5] {
    opacity: 0.5;
    filter: grayscale(30%);
    transition: opacity 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.tpatrulla-card--inactiva:hover[b-2wlknw88r5] {
    opacity: 1;
    filter: grayscale(0%);
}

/* ── Zona visual del banderín ── */
.tpatrulla-visual[b-2wlknw88r5] {
    position: relative;
    height: 160px;
    flex-shrink: 0;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F5F3EF;
}

.tpatrulla-visual-inner[b-2wlknw88r5] {
    width: 85%;
    height: 85%;
}

/* ── Tooltip de lema (solo banderines rovers) ── */
.tpatrulla-lema-tooltip[b-2wlknw88r5] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.875rem;
    background: rgba(30, 20, 10, 0.72);
    color: #f5f0e8;
    text-align: center;
    font-size: 0.7rem;
    font-style: italic;
    font-family: 'Bitter', Georgia, serif;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    border-radius: 0.75rem 0.75rem 0 0;
    z-index: 1;
}

.tpatrulla-lema-tooltip i[b-2wlknw88r5] {
    font-size: 0.625rem;
    opacity: 0.6;
    font-style: normal;
    flex-shrink: 0;
}

.tpatrulla-card:hover .tpatrulla-lema-tooltip[b-2wlknw88r5] {
    opacity: 1;
}

/* El SVG del banderín ocupa todo el espacio disponible */
[b-2wlknw88r5] .banderin-svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.12));
    transition: transform 0.3s ease;
}

.tpatrulla-card:hover[b-2wlknw88r5]  .banderin-svg {
    transform: scale(1.05);
}

/* ── Info inferior ── */
.tpatrulla-info[b-2wlknw88r5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.25rem 0.75rem 0.75rem;
    text-align: center;
    border-top: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.tpatrulla-nombre[b-2wlknw88r5] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #37474F;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.125rem;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.tpatrulla-label[b-2wlknw88r5] {
    font-size: 0.625rem;
    color: rgba(55, 71, 79, 0.4);
    margin: 0 0 0.375rem;
    font-weight: 500;
    line-height: 1.3;
}

/* Badges de unidades asignadas */
.tpatrulla-unidades[b-2wlknw88r5] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.tpatrulla-unidad-badge[b-2wlknw88r5] {
    font-size: 0.5625rem;
    padding: 0.15rem 0.375rem;
    border-radius: 9999px;
    font-weight: 500;
    background-color: #E8F5E9;
    color: #2E7D32;
    white-space: normal;
    word-break: break-word;
    text-align: center;
}

/* Badge inactiva */
.tpatrulla-badge-inactiva[b-2wlknw88r5] {
    display: inline-block;
    font-size: 0.5625rem;
    padding: 0.15rem 0.375rem;
    border-radius: 9999px;
    font-weight: 600;
    background-color: #ECEFF1;
    color: #78909C;
    margin-top: 0.125rem;
}
/* /Componentes/BH/ActivityModal.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * ActivityModal.razor.css — Modal de creación/edición de actividades
 * ──────────────────────────────────────────────────────────────────────
 * Los estilos base compartidos del modal se encuentran en
 * wwwroot/css/modal-base.css.  Este archivo contiene únicamente los
 * estilos específicos de actividad (prefijo .am-*).
 *
 * Secciones:
 *   1. Grilla de puntajes
 *   2. Fila de ponderación y fecha
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Grilla de puntajes ───────────────────────────────────────────── */
.am-scores-grid[b-appuv0vfu7] {
    display: grid;
    gap: 0.5rem;
}

.am-score-item[b-appuv0vfu7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.am-score-chip[b-appuv0vfu7] {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.125rem;
    flex-shrink: 0;
}

.am-score-name[b-appuv0vfu7] {
    color: rgba(55, 71, 79, 0.50);
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 50px;
    flex-shrink: 0;
}

.am-score-input[b-appuv0vfu7] {
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    padding: 0.375rem 0.5rem;
}

/* ── Fila de ponderación y fecha ──────────────────────────────────── */
.am-row[b-appuv0vfu7] {
    display: flex;
    gap: 0.75rem;
}

.am-col[b-appuv0vfu7] {
    flex: 1;
}

.am-input-center[b-appuv0vfu7] {
    text-align: center;
}

/* ── Responsive móvil: una patrulla por fila ─────────────────────── */
@media (max-width: 480px) {
    .am-scores-grid[b-appuv0vfu7] {
        grid-template-columns: 1fr !important;
    }
    .am-score-name[b-appuv0vfu7] {
        min-width: 80px;
        font-size: 0.75rem;
    }
    .am-score-input[b-appuv0vfu7] {
        font-size: 0.9rem;
        padding: 0.45rem 0.5rem;
    }
}

/* /Componentes/BH/ChampionBanner.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * ChampionBanner.razor.css — Banner del campeón con colores de patrulla
 * ──────────────────────────────────────────────────────────────────────
 * Card horizontal centrado: barras laterales (borderColor), cuerpo
 * (bgColor), trofeo circular, texto con borderColor, corona.
 * Port de ScoreboardPage.tsx → ChampionBanner (~líneas 583-667).
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Contenedor centrado ──────────────────────────────────────────────── */
.champ-center[b-prats35mch] {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
}

/* ── Card ─────────────────────────────────────────────────────────────── */
.champ-card[b-prats35mch] {
    max-width: 440px;
    width: 100%;
    display: flex;
    align-items: stretch;
    border-radius: 0.75rem;
    overflow: hidden;
}

/* ── Barras laterales (izq + der) ─────────────────────────────────────── */
.champ-bar[b-prats35mch] {
    width: 6px;
    flex-shrink: 0;
}

/* ── Cuerpo principal ─────────────────────────────────────────────────── */
.champ-body[b-prats35mch] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
}

/* ── Trofeo circular ──────────────────────────────────────────────────── */
.champ-trophy[b-prats35mch] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.champ-trophy i[b-prats35mch] {
    font-size: 16px;
    line-height: 1;
}

/* ── Texto ─────────────────────────────────────────────────────────────── */
.champ-text[b-prats35mch] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.champ-name[b-prats35mch] {
    margin: 0;
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.25;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.champ-label[b-prats35mch] {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.55rem;
    font-weight: 700;
    opacity: 0.7;
    line-height: 1.35;
}

/* ── Corona decorativa ────────────────────────────────────────────────── */
.champ-crown[b-prats35mch] {
    flex-shrink: 0;
    font-size: 18px;
    opacity: 0.4;
    line-height: 1;
}
/* /Componentes/BH/CloseBhModal.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * CloseBhModal.razor.css — Modal Cerrar BH / Editar Posiciones
 * ──────────────────────────────────────────────────────────────────────
 * Los estilos base compartidos del modal (overlay, card, header, footer,
 * botones) están en wwwroot/css/modal-base.css.
 * Este archivo contiene los estilos específicos del modal (prefijo .cbh-*).
 *
 * Secciones:
 *   1. Header — variante azul + layout interno
 *   2. Body — descripción, lista de patrullas, item, chip, scores
 *   3. Resumen del campeón
 *   4. Footer — layout, hint, warning, botón azul
 * ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
 * 1. HEADER
 * ══════════════════════════════════════════════════════════════════ */

.cbh-header--blue[b-1iphi68wbi] {
    background-color: #1565C0;
}

.cbh-header-content[b-1iphi68wbi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cbh-header-icon[b-1iphi68wbi] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.10);
    flex-shrink: 0;
}

.cbh-header-icon i[b-1iphi68wbi] {
    color: #fff;
    font-size: 0.85rem;
}

.cbh-header-sub[b-1iphi68wbi] {
    color: rgba(255, 255, 255, 0.50);
    font-size: 0.7rem;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
 * 2. BODY — Lista de patrullas
 * ══════════════════════════════════════════════════════════════════ */

.cbh-desc[b-1iphi68wbi] {
    color: rgba(55, 71, 79, 0.60);
    font-size: 0.78rem;
    margin: 0 0 1rem;
}

.cbh-list[b-1iphi68wbi] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* ── Cada patrulla ── */
.cbh-item[b-1iphi68wbi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: #FAFAFA;
    border: 1px solid #E0E0E0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cbh-item--champ[b-1iphi68wbi] {
    background-color: rgba(46, 125, 50, 0.06);
    border: 2px solid rgba(46, 125, 50, 0.30);
}

/* ── Rank badge ── */
.cbh-rank[b-1iphi68wbi] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    background-color: #37474F;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
}

.cbh-rank--champ[b-1iphi68wbi] {
    background-color: #2E7D32;
}

/* ── Color chip + nombre ── */
.cbh-chip[b-1iphi68wbi] {
    flex-shrink: 0;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
}

/* ── Puntaje de tabla (readonly) ── */
.cbh-table-score[b-1iphi68wbi] {
    color: rgba(55, 71, 79, 0.35);
    font-size: 0.68rem;
    font-weight: 500;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* ── Puntaje final (editable) ── */
.cbh-final-score[b-1iphi68wbi] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.cbh-final-label[b-1iphi68wbi] {
    color: rgba(55, 71, 79, 0.40);
    font-size: 0.62rem;
    font-weight: 600;
}

.cbh-final-input[b-1iphi68wbi] {
    width: 4rem;
    text-align: center;
    border-radius: 0.25rem;
    border: 1px solid #E0E0E0;
    background-color: #fff;
    padding: 0.125rem 0.25rem;
    color: #37474F;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    font-weight: 700;
    outline: none;
    transition: border-color 0.15s ease;
}

.cbh-final-input:focus[b-1iphi68wbi] {
    border-color: #2E7D32;
}

/* ── Flechas de reordenamiento ── */
.cbh-arrows[b-1iphi68wbi] {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.cbh-arrow-btn[b-1iphi68wbi] {
    padding: 0.125rem;
    border-radius: 0.25rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #37474F;
    transition: background-color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cbh-arrow-btn:hover:not(:disabled)[b-1iphi68wbi] {
    background-color: rgba(224, 224, 224, 0.60);
}

.cbh-arrow-btn:disabled[b-1iphi68wbi] {
    opacity: 0.2;
    cursor: not-allowed;
}

.cbh-arrow-btn i[b-1iphi68wbi] {
    font-size: 0.7rem;
}

/* ══════════════════════════════════════════════════════════════════
 * 3. RESUMEN DEL CAMPEÓN
 * ══════════════════════════════════════════════════════════════════ */

.cbh-champion-summary[b-1iphi68wbi] {
    margin-top: 1rem;
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: rgba(255, 213, 79, 0.12);
    border: 1px solid rgba(255, 213, 79, 0.30);
}

.cbh-champion-icon[b-1iphi68wbi] {
    color: #F9A825;
    font-size: 0.85rem;
}

.cbh-champion-name[b-1iphi68wbi] {
    color: #37474F;
    font-size: 0.8rem;
    font-weight: 700;
}

.cbh-champion-pts[b-1iphi68wbi] {
    color: rgba(55, 71, 79, 0.40);
    font-size: 0.75rem;
}

/* ══════════════════════════════════════════════════════════════════
 * 4. FOOTER
 * ══════════════════════════════════════════════════════════════════ */

.cbh-footer[b-1iphi68wbi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid #ECE6D8;
    background-color: #FAFAFA;
    gap: 1rem;
}

.cbh-footer-hint[b-1iphi68wbi] {
    color: rgba(55, 71, 79, 0.35);
    font-size: 0.68rem;
    margin: 0;
}

.cbh-footer-warning[b-1iphi68wbi] {
    color: #C62828;
    font-size: 0.72rem;
    font-weight: 600;
    margin: 0;
}

.cbh-footer-buttons[b-1iphi68wbi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ── Botón azul (modo edit) ── */
.cbh-btn--blue[b-1iphi68wbi] {
    background-color: #1565C0;
    color: #fff;
    font-weight: 700;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.cbh-btn--blue:hover[b-1iphi68wbi] {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10);
}

/* ── Responsive: stack en mobile ── */
@media (max-width: 480px) {
    .cbh-footer[b-1iphi68wbi] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .cbh-footer-buttons[b-1iphi68wbi] {
        justify-content: flex-end;
    }

    .cbh-item[b-1iphi68wbi] {
        flex-wrap: wrap;
    }

    .cbh-table-score[b-1iphi68wbi] {
        display: none;
    }
}
/* /Componentes/BH/CreateBhModal.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * CreateBhModal.razor.css — Modal para crear nueva tabla de puntos
 * ──────────────────────────────────────────────────────────────────────
 * Los estilos base compartidos del modal se encuentran en
 * wwwroot/css/modal-base.css.  Este archivo contiene únicamente los
 * estilos específicos de CreateBh (prefijo .cbm-*).
 *
 * Secciones:
 *   1. Layout flex de la card
 *   2. Modal Crear BH — estilos específicos
 *   3. Bloque de selección de patrullas
 *   4. Advertencia de validación
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Layout flex de la card (body con scroll, header/footer fijos) ── */
.modal-card[b-18141mlbom] {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

/* ── flex-shrink helper for header/footer ──────────────────────────── */
.cbm-flex-shrink-0[b-18141mlbom] {
    flex-shrink: 0;
}

/* ── Scrollable body ──────────────────────────────────────────────── */
.cbm-body-scroll[b-18141mlbom] {
    overflow-y: auto;
    flex: 1;
    padding: 1.25rem 1.5rem;
}

/* ══════════════════════════════════════════════════════════════════
 * MODAL CREAR BH — ESTILOS ESPECÍFICOS
 * ══════════════════════════════════════════════════════════════════ */

.cbm-section[b-18141mlbom] {
    margin-bottom: 1.25rem;
}

.cbm-section:last-child[b-18141mlbom] {
    margin-bottom: 0;
}

/* ── Texto descriptivo ────────────────────────────────────────────── */
.cbm-desc[b-18141mlbom] {
    color: rgba(55, 71, 79, 0.50);
    font-size: 0.8rem;
    margin: 0 0 1rem 0;
}

/* ── Fila de inputs N-AA ──────────────────────────────────────────── */
.cbm-inputs[b-18141mlbom] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.cbm-col[b-18141mlbom] {
    flex: 1;
}

.cbm-dash[b-18141mlbom] {
    padding-bottom: 0.625rem;
    color: rgba(55, 71, 79, 0.30);
    font-size: 1.5rem;
    font-weight: 700;
}

.cbm-big-input[b-18141mlbom] {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.625rem 0.75rem;
}

/* ── Pill de previsualización ─────────────────────────────────────── */
.cbm-preview[b-18141mlbom] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background-color: #E8F5E9;
}

.cbm-preview-icon[b-18141mlbom] {
    color: #2E7D32;
    font-size: 0.8rem;
}

.cbm-preview-text[b-18141mlbom] {
    color: #2E7D32;
    font-size: 0.8rem;
    font-weight: 600;
}

.cbm-duplicate-error[b-18141mlbom] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background-color: #FFEBEE;
    color: #C62828;
    font-size: 0.8rem;
    font-weight: 600;
}

.cbm-duplicate-error i[b-18141mlbom] {
    font-size: 0.9rem;
}

/* ══════════════════════════════════════════════════════════════════
 * BLOQUE DE SELECCIÓN DE PATRULLAS
 * ══════════════════════════════════════════════════════════════════ */

/* ── Fila de encabezado (label + conteo) ──────────────────────────── */
.cbm-patrol-header[b-18141mlbom] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.cbm-patrol-count[b-18141mlbom] {
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(55, 71, 79, 0.30);
}

/* ── Texto de ayuda ───────────────────────────────────────────────── */
.cbm-patrol-hint[b-18141mlbom] {
    font-size: 0.72rem;
    color: rgba(55, 71, 79, 0.40);
    margin: 0 0 0.5rem 0;
}

/* ── Contenedor de lista de patrullas ─────────────────────────────── */
.cbm-patrol-list[b-18141mlbom] {
    border: 1px solid #ECE6D8;
    border-radius: 0.75rem;
    overflow: hidden;
}

/* ── Fila de patrulla individual ──────────────────────────────────── */
.cbm-patrol-row[b-18141mlbom] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background-color: #fff;
    transition: background-color 0.15s ease;
}

.cbm-patrol-row--border[b-18141mlbom] {
    border-top: 1px solid rgba(236, 230, 216, 0.60);
}

.cbm-patrol-row--deselected[b-18141mlbom] {
    background-color: rgba(248, 245, 240, 0.60);
}

/* ── Botón checkbox ───────────────────────────────────────────────── */
.cbm-checkbox-btn[b-18141mlbom] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cbm-checkbox[b-18141mlbom] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid #D1CBC0;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cbm-checkbox--checked[b-18141mlbom] {
    border-color: #2E7D32;
    background-color: #2E7D32;
}

.cbm-check-svg[b-18141mlbom] {
    width: 12px;
    height: 12px;
    color: #fff;
}

/* ── Muestra de color ─────────────────────────────────────────────── */
.cbm-swatch[b-18141mlbom] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
}

/* ── Nombre de patrulla ───────────────────────────────────────────── */
.cbm-patrol-name[b-18141mlbom] {
    flex: 1;
    font-size: 0.82rem;
    transition: color 0.15s ease;
}

.cbm-patrol-name--active[b-18141mlbom] {
    color: #37474F;
    font-weight: 600;
}

.cbm-patrol-name--inactive[b-18141mlbom] {
    color: rgba(55, 71, 79, 0.35);
    font-weight: 400;
    text-decoration: line-through;
}

/* ── Badge de posición ────────────────────────────────────────────── */
.cbm-position-badge[b-18141mlbom] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #E8F5E9;
    color: #2E7D32;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Botones de orden (subir / bajar) ─────────────────────────────── */
.cbm-order-btns[b-18141mlbom] {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.cbm-order-btn[b-18141mlbom] {
    background: none;
    border: none;
    padding: 2px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}

.cbm-order-btn:hover:not(:disabled)[b-18141mlbom] {
    background-color: rgba(236, 230, 216, 0.60);
}

.cbm-order-btn:disabled[b-18141mlbom] {
    opacity: 0.20;
    cursor: default;
}

.cbm-order-icon[b-18141mlbom] {
    width: 12px;
    height: 12px;
    font-size: 0.65rem;
    color: rgba(55, 71, 79, 0.40);
}

/* ── Advertencia de validación ────────────────────────────────────── */
.cbm-patrol-warning[b-18141mlbom] {
    color: #C62828;
    font-size: 0.72rem;
    font-weight: 600;
    margin: 0.5rem 0 0 0;
}
/* /Componentes/BH/DeleteConfirmModal.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * DeleteConfirmModal.razor.css — Modal de confirmación de eliminación
 * ──────────────────────────────────────────────────────────────────────
 * Los estilos base compartidos del modal se encuentran en
 * wwwroot/css/modal-base.css.  Este archivo contiene únicamente los
 * estilos específicos de eliminación (prefijo .dm-*).
 *
 * Secciones:
 *   1. Override del body (padding)
 *   2. Modal de eliminación — estilos específicos
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Override del body: mayor padding ─────────────────────────────── */
.modal-body[b-gln2o11fn9] {
    padding: 1.5rem;
}

/* ══════════════════════════════════════════════════════════════════
 * MODAL DE ELIMINACIÓN — ESTILOS ESPECÍFICOS
 * ══════════════════════════════════════════════════════════════════ */

/* ── Fila de encabezado (ícono circular + título) ────────────────── */
.dm-header[b-gln2o11fn9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.dm-icon-circle[b-gln2o11fn9] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFEBEE;
    flex-shrink: 0;
}

.dm-icon[b-gln2o11fn9] {
    color: #C62828;
    font-size: 1rem;
}

.dm-title[b-gln2o11fn9] {
    color: #37474F;
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
}

.dm-subtitle[b-gln2o11fn9] {
    color: rgba(55, 71, 79, 0.50);
    font-size: 0.8rem;
    margin: 0;
}

/* ── Texto de confirmación ────────────────────────────────────────── */
.dm-confirm-text[b-gln2o11fn9] {
    color: rgba(55, 71, 79, 0.70);
    font-size: 0.85rem;
    margin: 0;
}
/* /Componentes/BH/HistorialCompact.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * HistorialCompact.razor.css — Historial de Banderines agrupado por año
 * ──────────────────────────────────────────────────────────────────────
 * Port fiel de ScoreboardPage.tsx → HistorialCompact (lines ~886-1020).
 * Dos filas: selector de año (scroll horizontal, pills redondas) y
 * pills de BH con wrap, transición animada al cambiar de año.
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Root container ───────────────────────────────────────────────────── */
.hc-root[b-agpfu43so2] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #ECE6D8;
}

/* ── Título ───────────────────────────────────────────────────────────── */
.hc-title[b-agpfu43so2] {
    text-align: center;
    color: #37474F;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 0 0.75rem 0;
}

/* ── Row genérico (label + contenido) ─────────────────────────────────── */
.hc-row[b-agpfu43so2] {    display: flex;
    flex-direction: column;
    align-items: center;    margin-bottom: 0.25rem;
}

/* ── Label de fila ────────────────────────────────────────────────────── */
.hc-label[b-agpfu43so2] {
    display: block;
    color: rgba(55, 71, 79, 0.30);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.55rem;
    font-weight: 700;
    margin-bottom: 0.375rem;
}

/* ══════════════════════════════════════════════════════════════════════
 * FILA 1 — Selector de año (scroll horizontal)
 * ══════════════════════════════════════════════════════════════════════ */

.hc-year-scroll[b-agpfu43so2] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem;
    padding-bottom: 0.25rem;
}

/* ── Year pill base ───────────────────────────────────────────────────── */
.hc-year-pill[b-agpfu43so2] {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(55, 71, 79, 0.40);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.hc-year-pill:hover[b-agpfu43so2] {
    color: rgba(55, 71, 79, 0.70);
    background-color: rgba(236, 230, 216, 0.50);
}

/* ── Year pill active ─────────────────────────────────────────────────── */
.hc-year-pill--active[b-agpfu43so2] {
    background-color: #2E7D32;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.10);
}

.hc-year-pill--active:hover[b-agpfu43so2] {
    background-color: #2E7D32;
    color: #fff;
}

/* ── Count badge inside year pill ─────────────────────────────────────── */
.hc-year-count[b-agpfu43so2] {
    margin-left: 0.25rem;
    opacity: 0.50;
    font-size: 0.6rem;
}

/* ══════════════════════════════════════════════════════════════════════
 * FILA 2 — Pills de BH del año seleccionado
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Transición animada al cambiar de año ─────────────────────────────── */
.hc-bh-row[b-agpfu43so2] {
    animation: hc-fade-in-b-agpfu43so2 0.2s ease-out;
}

@keyframes hc-fade-in-b-agpfu43so2 {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Wrap container para las pills ────────────────────────────────────── */
.hc-bh-wrap[b-agpfu43so2] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem;
}

/* ── BH pill base ─────────────────────────────────────────────────────── */
.hc-bh-pill[b-agpfu43so2] {
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #ECE6D8;
    background: #fff;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(55, 71, 79, 0.50);
    text-decoration: none;
    transition: all 0.15s ease;
}

.hc-bh-pill:hover[b-agpfu43so2] {
    color: #37474F;
    border-color: rgba(55, 71, 79, 0.20);
}

/* ── BH pill active ───────────────────────────────────────────────────── */
.hc-bh-pill--active[b-agpfu43so2] {
    background-color: #37474F;
    border-color: #37474F;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.10);
}

.hc-bh-pill--active:hover[b-agpfu43so2] {
    color: #fff;
    border-color: #37474F;
}

/* ── Inner flex for pill content ──────────────────────────────────────── */
.hc-bh-inner[b-agpfu43so2] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* ── Flag icon ────────────────────────────────────────────────────────── */
.hc-bh-flag[b-agpfu43so2] {
    font-size: 0.7rem;
    opacity: 0.25;
}

.hc-bh-flag--active[b-agpfu43so2] {
    opacity: 0.70;
}

/* ── Champion name inside active pill ─────────────────────────────────── */
.hc-bh-champ[b-agpfu43so2] {
    font-size: 0.6rem;
    opacity: 0.50;
    font-weight: 600;
}

/* ── "En curso" sub-pill ──────────────────────────────────────────────── */
.hc-bh-curso[b-agpfu43so2] {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
    font-size: 0.55rem;
    font-weight: 700;
    background-color: #E8F5E9;
    color: #2E7D32;
}

/* ── "En curso" when parent pill is active ─────────────────────────────── */
.hc-bh-curso--active[b-agpfu43so2] {
    background-color: rgba(255, 255, 255, 0.20);
    color: #fff;
}
/* /Componentes/BH/HistoricCupCard.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * HistoricCupCard.razor.css — Card vintage/sepia para copas históricas
 * ──────────────────────────────────────────────────────────────────────
 * Réplica de HistoricCupCard del componente HonorBannerPage.tsx.
 * Card horizontal con filtro vintage, ícono grande, título serif + pill,
 * subtítulo, metadata y flecha chevron animada.
 * ══════════════════════════════════════════════════════════════════════ */

.hcc-card[b-5ti1t8af25] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid #D7CCC8;
    background: #F8F5F0;
    cursor: pointer;
    transition: all 0.3s ease;
    filter: saturate(0.7) sepia(0.15);
}

.hcc-card:hover[b-5ti1t8af25] {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10),
                0  4px  6px -4px rgba(0, 0, 0, 0.10);
    border-color: rgba(141, 110, 99, 0.30);
    transform: translateY(-1px);
}

/* ── Ícono grande ─────────────────────────────────────────────────────── */
.hcc-icon[b-5ti1t8af25] {
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EFEBE9;
    color: #8D6E63;
    font-size: 1.25rem;
}

/* ── Cuerpo (textos) ──────────────────────────────────────────────────── */
.hcc-body[b-5ti1t8af25] {
    flex: 1;
    min-width: 0;
}

.hcc-title-row[b-5ti1t8af25] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}

.hcc-name[b-5ti1t8af25] {
    font-family: var(--font-serif, 'Bitter', 'Georgia', serif);
    color: #5D4037;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
}

.hcc-pill[b-5ti1t8af25] {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #D7CCC8;
    color: #5D4037;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    white-space: nowrap;
}

.hcc-subtitle[b-5ti1t8af25] {
    color: rgba(55, 71, 79, 0.45);
    font-size: 0.75rem;
    margin: 0;
    line-height: 1.4;
}

/* ── Metadata (fecha) ─────────────────────────────────────────────────── */
.hcc-meta[b-5ti1t8af25] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    font-size: 0.625rem;
    color: rgba(55, 71, 79, 0.30);
    font-weight: 500;
}

.hcc-meta i[b-5ti1t8af25] {
    font-size: 0.6875rem;
}

/* ── Flecha derecha ───────────────────────────────────────────────────── */
.hcc-arrow[b-5ti1t8af25] {
    flex-shrink: 0;
    font-size: 1rem;
    color: rgba(141, 110, 99, 0.40);
    transition: transform 0.2s ease;
}

.hcc-card:hover .hcc-arrow[b-5ti1t8af25] {
    transform: translateX(4px);
}

/* ── Stretched link: toda la card es clickeable ───────────────────────── */
.hcc-link[b-5ti1t8af25] {
    position: absolute;
    inset: 0;
    z-index: 5;
    text-decoration: none;
}

/* ── Animación de entrada vía IntersectionObserver ──────────────────────── */
.hcc-card.bh-animate[b-5ti1t8af25] {
    opacity: 0;
    transform: translateY(20px);
}

.hcc-card.bh-animate.visible[b-5ti1t8af25] {
    opacity: 1;
    transform: translateY(0);
    animation: bhCupIn-b-5ti1t8af25 0.4s ease-out;
    animation-delay: var(--anim-delay, 0s);
    animation-fill-mode: backwards;
}

@keyframes bhCupIn-b-5ti1t8af25 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* ── Accesibilidad: focus ring ──────────────────────────────────────────── */
.hcc-card:focus-visible[b-5ti1t8af25] {
    outline: 2px solid #8D6E63;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .hcc-card.bh-animate[b-5ti1t8af25] {
        opacity: 1;
        transform: none;
    }
    .hcc-card.bh-animate.visible[b-5ti1t8af25] {
        animation: none;
    }
}
/* /Componentes/BH/PodioFinal.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * PodioFinal.razor.css — Clasificación final de la competición
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Wrapper general ─────────────────────────────────────────────────── */
.podio-wrapper[b-u0zsgewn6f] {
    margin: 0 auto 1.5rem;
    max-width: 560px;
    width: 100%;
}

/* ── Cabecera ─────────────────────────────────────────────────────── */
.podio-header[b-u0zsgewn6f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #78909C;
    margin-bottom: 0.6rem;
    padding-left: 0.25rem;
}

.podio-header i[b-u0zsgewn6f] {
    font-size: 0.85rem;
    color: #CFB53B;
}

/* ── Lista de filas ──────────────────────────────────────────────────── */
.podio-list[b-u0zsgewn6f] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

/* ── Fila individual ─────────────────────────────────────────────────── */
.podio-row[b-u0zsgewn6f] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: #fff;
    border-radius: 0.5rem;
    padding: 0.55rem 0.85rem 0.55rem 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.07);
    border-left: 4px solid #ccc;
}

/* Fila del ganador levemente destacada */
.podio-row--winner[b-u0zsgewn6f] {
    background: #FFFDE7;
}

/* ── Medalla / posición ──────────────────────────────────────────────── */
.podio-medal[b-u0zsgewn6f] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
}

.podio-medal--gold[b-u0zsgewn6f]   { background: #FFC107; color: #fff; }
.podio-medal--silver[b-u0zsgewn6f] { background: #90A4AE; color: #fff; }
.podio-medal--bronze[b-u0zsgewn6f] { background: #A1887F; color: #fff; }
.podio-medal--other[b-u0zsgewn6f]  { background: #ECEFF1; color: #546E7A; font-weight: 700; font-size: 0.65rem; }

.podio-medal-num[b-u0zsgewn6f] {
    font-size: 0.65rem;
    font-weight: 700;
}

/* ── Punto de color de la patrulla ───────────────────────────────────── */
.podio-color-dot[b-u0zsgewn6f] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Nombre ──────────────────────────────────────────────────────────── */
.podio-name[b-u0zsgewn6f] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.podio-pos-label[b-u0zsgewn6f] {
    display: none; /* visible ya en la medalla */
}

.podio-label-prefix[b-u0zsgewn6f] {
    font-size: 0.7rem;
    color: #90A4AE;
    font-weight: 600;
}

.podio-patrol-name[b-u0zsgewn6f] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #263238;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Puntos ──────────────────────────────────────────────────────────── */
.podio-pts[b-u0zsgewn6f] {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
    flex-shrink: 0;
    font-size: 0.88rem;
    font-weight: 800;
    color: #37474F;
}

.podio-pts-label[b-u0zsgewn6f] {
    font-size: 0.6rem;
    font-weight: 500;
    color: #90A4AE;
    text-transform: uppercase;
}
/* /Componentes/BH/RosarioSection.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * RosarioSection.razor.css — Sección "Rosario Scout" (/BH)
 * ──────────────────────────────────────────────────────────────────────
 * Card blanca con stripe multi-color, layout flex-col → flex-row (lg),
 * leyenda de ramas, metadata, botones, imagen con overlays y label.
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Wrapper ──────────────────────────────────────────────────────────── */
.rosario-wrap[b-dylezambum] {
    max-width: var(--bh-container-max-width, 80rem);
    margin: 0 auto;
    padding: var(--bh-section-gap, 4rem) var(--bh-section-padding, 1rem);
}

/* ── Card principal ───────────────────────────────────────────────────── */
.rosario-card[b-dylezambum] {
    position: relative;
    background: #fff;
    border-radius: 1rem;
    border: 1px solid #ECE6D8;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10),
                0  4px  6px -4px rgba(0, 0, 0, 0.10);
    overflow: hidden;
}

/* ── Stripe multi-color superior ──────────────────────────────────────── */
.rosario-stripe[b-dylezambum] {
    display: flex;
    height: 0.375rem; /* 6px ≈ h-1.5 */
}

.rosario-stripe__band[b-dylezambum] {
    flex: 1;
}

/* ── Layout 2 columnas ────────────────────────────────────────────────── */
.rosario-layout[b-dylezambum] {
    display: flex;
    flex-direction: column;
}

@media (min-width: 1024px) {
    .rosario-layout[b-dylezambum] {
        flex-direction: row;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
 * IZQUIERDA: Contenido
 * ═══════════════════════════════════════════════════════════════════════ */
.rosario-content[b-dylezambum] {
    flex: 1;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 768px) {
    .rosario-content[b-dylezambum] {
        padding: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .rosario-content[b-dylezambum] {
        padding: 3rem;
    }
}

/* ── Fila de título ───────────────────────────────────────────────────── */
.rosario-title-row[b-dylezambum] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.rosario-title-icon[b-dylezambum] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: #E8F5E9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #2E7D32;
    font-size: 1rem;
}

.rosario-title[b-dylezambum] {
    font-family: var(--font-serif, 'Bitter', 'Georgia', serif);
    color: #37474F;
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
    font-weight: 700;
    margin: 0;
}

.rosario-pill[b-dylezambum] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #2E7D32;
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    white-space: nowrap;
}

/* ── Descripción ──────────────────────────────────────────────────────── */
.rosario-desc[b-dylezambum] {
    color: rgba(55, 71, 79, 0.60);
    line-height: 1.625;
    margin: 0 0 0.5rem;
    max-width: 32rem;
}

/* ── Leyenda de ramas ─────────────────────────────────────────────────── */
.rosario-legend[b-dylezambum] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

.rosario-legend__item[b-dylezambum] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.rosario-legend__dot[b-dylezambum] {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.rosario-legend__label[b-dylezambum] {
    font-size: 0.625rem;
    color: rgba(55, 71, 79, 0.40);
    font-weight: 500;
}

/* ── Metadata ─────────────────────────────────────────────────────────── */
.rosario-meta[b-dylezambum] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.75rem;
    font-size: 0.75rem;
    color: rgba(55, 71, 79, 0.40);
    font-weight: 500;
}

.rosario-meta__item[b-dylezambum] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.rosario-meta__item i[b-dylezambum] {
    font-size: 0.8125rem;
}

/* ── Botones de acción ────────────────────────────────────────────────── */
.rosario-actions[b-dylezambum] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (max-width: 480px) {
    .rosario-actions[b-dylezambum] {
        flex-direction: column;
    }
    .rosario-btn[b-dylezambum] {
        width: 100%;
    }
}

.rosario-btn[b-dylezambum] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.rosario-btn__arrow[b-dylezambum] {
    font-size: 0.75rem;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.rosario-btn:hover .rosario-btn__arrow[b-dylezambum] {
    transform: translateX(2px);
}

/* Primario: verde sólido */
.rosario-btn--primary[b-dylezambum] {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10),
                0 2px 4px -2px rgba(0, 0, 0, 0.10);
}

.rosario-btn--primary:hover[b-dylezambum] {
    background: var(--color-primary-dark);
    color: #fff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10),
                0  4px  6px -4px rgba(0, 0, 0, 0.10);
}

/* Secundario: outline verde */
.rosario-btn--outline[b-dylezambum] {
    background: #fff;
    color: var(--color-primary);
    border: 2px solid rgba(46, 125, 50, 0.20);
}

.rosario-btn--outline:hover[b-dylezambum] {
    border-color: rgba(46, 125, 50, 0.40);
    background: #E8F5E9;
}

/* ═══════════════════════════════════════════════════════════════════════
 * DERECHA: Imagen del Rosario (lg: 45 %)
 * ═══════════════════════════════════════════════════════════════════════ */
.rosario-image-wrap[b-dylezambum] {
    position: relative;
}

@media (min-width: 1024px) {
    .rosario-image-wrap[b-dylezambum] {
        width: 45%;
        flex-shrink: 0;
    }
}

/* ── Accent bar vertical multi-color (solo desktop) ───────────────────── */
.rosario-accent-bar[b-dylezambum] {
    display: none;
}

@media (min-width: 1024px) {
    .rosario-accent-bar[b-dylezambum] {
        display: flex;
        flex-direction: column;
        width: 0.25rem;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 10;
    }
}

.rosario-accent-bar__band[b-dylezambum] {
    flex: 1;
}

/* ── Contenedor de imagen ─────────────────────────────────────────────── */
.rosario-image-container[b-dylezambum] {
    position: relative;
    height: 16rem;
    background: #ECE6D8; /* fallback si la imagen no carga */
}

@media (min-width: 768px) {
    .rosario-image-container[b-dylezambum] {
        height: 20rem;
    }
}

@media (min-width: 1024px) {
    .rosario-image-container[b-dylezambum] {
        height: 100%;
        min-height: 380px;
    }
}

.rosario-image[b-dylezambum] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Gradient overlay ─────────────────────────────────────────────────── */
.rosario-image-overlay[b-dylezambum] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.10), transparent, transparent);
    pointer-events: none;
}

@media (min-width: 1024px) {
    .rosario-image-overlay[b-dylezambum] {
        background: linear-gradient(to right, rgba(255, 255, 255, 0.10), transparent, transparent);
    }
}

/* ── Label flotante ───────────────────────────────────────────────────── */
.rosario-image-label[b-dylezambum] {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 0.5rem;
    padding: 0.375rem 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10);
}

.rosario-image-label p[b-dylezambum] {
    font-size: 0.5625rem;
    color: #5D4037;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

/* ── Entrance animation via IntersectionObserver ────────────────────────── */
.rosario-wrap.bh-animate[b-dylezambum] {
    opacity: 0;
    transform: translateY(25px);
}

.rosario-wrap.bh-animate.visible[b-dylezambum] {
    opacity: 1;
    transform: translateY(0);
    animation: bhRosarioIn-b-dylezambum 0.5s ease-out;
    animation-delay: var(--anim-delay, 0s);
    animation-fill-mode: backwards;
}

@keyframes bhRosarioIn-b-dylezambum {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
}

/* ── Accesibilidad ──────────────────────────────────────────────────────── */
.rosario-btn:focus-visible[b-dylezambum] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .rosario-wrap.bh-animate[b-dylezambum] {
        opacity: 1;
        transform: none;
    }
    .rosario-wrap.bh-animate.visible[b-dylezambum] {
        animation: none;
    }
}
/* /Componentes/BH/ScoreTable.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * ScoreTable.razor.css — Tabla de puntajes del Banderín de Honor
 * ──────────────────────────────────────────────────────────────────────
 * Réplica fiel de ScoreboardPage.tsx → ScoreTable (líneas ~290-563).
 * border-collapse, Actividades sticky, filas zebra, encabezados de
 * patrullas con 3 colores, scroll-hint con gradiente y chevron animado,
 * pie de totales.
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Wrapper relativo (para posicionar scroll-hint) ───────────────── */
.st-wrapper[b-hd8sgax4c4] {
    position: relative;
    background: #fff;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10);
    border: 2px solid #E0E0E0;
}

/* ── Container con scroll horizontal ──────────────────────────────── */
.st-scroll[b-hd8sgax4c4] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Base de la tabla ─────────────────────────────────────────────── */
.st-table[b-hd8sgax4c4] {
    width: 100%;
    min-width: 520px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
}

/* ══════════════════════════════════════════════════════════════════
 * HEADER
 * ══════════════════════════════════════════════════════════════════ */

/* ── Celda base del encabezado ─────────────────────────────────────── */
.st-th[b-hd8sgax4c4] {
    padding: 0.5rem 0.375rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Encabezado Actividades (sticky izq, oscuro) ─────────────────── */
.st-th--act[b-hd8sgax4c4] {
    position: sticky;
    left: 0;
    z-index: 20;
    text-align: left;
    min-width: 90px;
    max-width: 130px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    background-color: #37474F;
    color: #fff;
}

/* ── Columna de patrulla ──────────────────────────────────────────── */
/* Los colores bgColor / textColor / borderColor se aplican inline vía style */
.st-th--patrol[b-hd8sgax4c4] {
    text-align: center;
    min-width: 56px;
}

/* ── Fila de posiciones finales (encima de headers de patrulla) ────── */
.st-th-rank[b-hd8sgax4c4] {
    padding: 0.2rem 0.25rem;
    text-align: center;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #37474F;
    opacity: 0.45;
    background-color: #F8F5F0;
    text-transform: uppercase;
    white-space: nowrap;
}

.st-th-rank--empty[b-hd8sgax4c4] {
    background-color: #F8F5F0;
}

.st-th-rank--champ[b-hd8sgax4c4] {
    opacity: 1;
}

/* ── Encabezado Pond. ─────────────────────────────────────────────── */
.st-th--pond[b-hd8sgax4c4] {
    text-align: center;
    min-width: 50px;
    background-color: #37474F;
    color: #fff;
}

/* ── Encabezado Fecha ─────────────────────────────────────────────── */
.st-th--fecha[b-hd8sgax4c4] {
    text-align: right;
    min-width: 64px;
    padding-right: 0.5rem;
    background-color: #37474F;
    color: #fff;
}

/* ── Encabezado Acciones (modo Hormiga) ───────────────────────────── */
.st-th--acciones[b-hd8sgax4c4] {
    text-align: center;
    min-width: 56px;
    background-color: #37474F;
    color: #fff;
    font-size: 0.65rem;
}

/* ══════════════════════════════════════════════════════════════════
 * DATA ROWS
 * ══════════════════════════════════════════════════════════════════ */

/* ── Celda base del cuerpo ─────────────────────────────────────────── */
.st-td[b-hd8sgax4c4] {
    padding: 0.375rem;
    border-bottom: 1px solid rgba(236, 230, 216, 0.5);
}

/* ── Nombre de actividad (sticky izq) ─────────────────────────────── */
.st-td--act[b-hd8sgax4c4] {
    position: sticky;
    left: 0;
    z-index: 5;
    text-align: left;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    max-width: 130px;
    font-size: 0.78rem;
    font-weight: 500;
    color: #37474F;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ── Celdas de puntaje ────────────────────────────────────────────── */
.st-td--score[b-hd8sgax4c4] {
    text-align: center;
}

.st-score[b-hd8sgax4c4] {
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    font-weight: 600;
    color: #37474F;
}

.st-score--neg[b-hd8sgax4c4] {
    color: #C62828;
}

.st-score--zero[b-hd8sgax4c4] {
    color: rgba(55, 71, 79, 0.25);
}

/* ── Ponderación cell ─────────────────────────────────────────────── */
.st-td--pond[b-hd8sgax4c4] {
    text-align: center;
}

.st-pond[b-hd8sgax4c4] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.65rem;
    font-weight: 700;
}

.st-pond--green[b-hd8sgax4c4] {
    background-color: #E8F5E9;
    color: #2E7D32;
}

.st-pond--yellow[b-hd8sgax4c4] {
    background-color: #FFF8E1;
    color: #F9A825;
}

.st-pond--neutral[b-hd8sgax4c4] {
    background-color: #F5F5F5;
    color: rgba(55, 71, 79, 0.40);
}

/* ── Celda de fecha ───────────────────────────────────────────────── */
.st-td--fecha[b-hd8sgax4c4] {
    text-align: right;
    padding-right: 0.5rem;
}

.st-fecha[b-hd8sgax4c4] {
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    color: rgba(55, 71, 79, 0.35);
}

/* ── Celda de acciones (modo Hormiga) ─────────────────────────────── */
.st-td--acciones[b-hd8sgax4c4] {
    text-align: center;
}

.st-actions[b-hd8sgax4c4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.st-act-btn[b-hd8sgax4c4] {
    padding: 0.25rem;
    border-radius: 0.25rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background-color 0.15s ease;
}

.st-act-btn--edit[b-hd8sgax4c4] {
    color: #2E7D32;
}

.st-act-btn--edit:hover[b-hd8sgax4c4] {
    background-color: #E8F5E9;
}

.st-act-btn--del[b-hd8sgax4c4] {
    color: #C62828;
}

.st-act-btn--del:hover[b-hd8sgax4c4] {
    background-color: #FFEBEE;
}

/* ══════════════════════════════════════════════════════════════════
 * TOTALS FOOTER
 * ══════════════════════════════════════════════════════════════════ */

.st-total-row[b-hd8sgax4c4] {
    background-color: #37474F;
}

/* ── Celda base del pie ───────────────────────────────────────────── */
.st-tf[b-hd8sgax4c4] {
    padding: 0.5rem 0.375rem;
}

/* ── Label "Total" (sticky izq) ───────────────────────────────────── */
.st-tf--label[b-hd8sgax4c4] {
    position: sticky;
    left: 0;
    z-index: 10;
    background-color: #37474F;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: left;
    padding-left: 0.5rem;
}

/* ── Total por patrulla ───────────────────────────────────────────── */
.st-tf--total[b-hd8sgax4c4] {
    text-align: center;
}

.st-total-num[b-hd8sgax4c4] {
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
}

.st-total-num--winner[b-hd8sgax4c4] {
    font-size: 1rem;
    font-weight: 900;
    color: #FFD54F;
}

/* ── Ícono de corona ──────────────────────────────────────────────── */
.st-crown[b-hd8sgax4c4] {
    color: #FFD54F;
    margin-left: 0.375rem;
    font-size: 0.8rem;
    vertical-align: -1px;
}

/* ══════════════════════════════════════════════════════════════════
 * SCROLL HINT (gradient + animated chevron)
 * ══════════════════════════════════════════════════════════════════ */

.st-scroll-hint[b-hd8sgax4c4] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 3rem;
    pointer-events: none;
    z-index: 20;
    background: linear-gradient(to right, transparent, rgba(248, 245, 240, 0.95));
}

.st-scroll-hint-icon[b-hd8sgax4c4] {
    position: absolute;
    top: 50%;
    right: 0.375rem;
    transform: translateY(-50%);
    color: rgba(55, 71, 79, 0.20);
    font-size: 1rem;
    animation: st-chevron-bounce-b-hd8sgax4c4 1.5s ease-in-out infinite;
}

@keyframes st-chevron-bounce-b-hd8sgax4c4 {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50%      { transform: translateY(-50%) translateX(4px); }
}

/* ══════════════════════════════════════════════════════════════════
 * LEYENDA DE PONDERACIÓN
 * ══════════════════════════════════════════════════════════════════ */

.st-pond-legend[b-hd8sgax4c4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.st-pond-legend-label[b-hd8sgax4c4] {
    color: rgba(55, 71, 79, 0.30);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.6rem;
    font-weight: 700;
}

.st-pond-legend-item[b-hd8sgax4c4] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.st-pond-legend-text[b-hd8sgax4c4] {
    color: rgba(55, 71, 79, 0.30);
    font-size: 0.7rem;
}

/* ══════════════════════════════════════════════════════════════════
 * DESKTOP OVERRIDES (≥ 640px)
 * ══════════════════════════════════════════════════════════════════ */

/* ── Swipe hint banner (solo móvil) ───────────────────────────────── */
.st-swipe-hint[b-hd8sgax4c4] {
    display: none;
}

@media (max-width: 767px) {
    .st-swipe-hint[b-hd8sgax4c4] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
        border-top: 1px solid #A5D6A7;
        color: #2E7D32;
        font-size: 0.75rem;
        font-weight: 600;
        cursor: pointer;
        animation: st-swipe-hint-enter-b-hd8sgax4c4 0.4s ease-out;
    }
}

.st-swipe-hint-icon[b-hd8sgax4c4] {
    font-size: 1rem;
    animation: st-swipe-gesture-b-hd8sgax4c4 1.8s ease-in-out infinite;
}

@keyframes st-swipe-gesture-b-hd8sgax4c4 {
    0%, 100% { transform: translateX(0); }
    30%      { transform: translateX(8px); }
    60%      { transform: translateX(-2px); }
}

@keyframes st-swipe-hint-enter-b-hd8sgax4c4 {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.st-swipe-hint-text[b-hd8sgax4c4] {
    flex: 1;
}

.st-swipe-hint-close[b-hd8sgax4c4] {
    background: none;
    border: none;
    color: #2E7D32;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.st-swipe-hint-close:hover[b-hd8sgax4c4] {
    opacity: 1;
}

/* ── Pantallas muy pequeñas: reducir fuente de headers ─────────────── */
@media (max-width: 400px) {
    .st-th--patrol[b-hd8sgax4c4] {
        font-size: 0.55rem;
        min-width: 44px;
        padding: 0.375rem 0.25rem;
        letter-spacing: 0.04em;
    }

    .st-th--act[b-hd8sgax4c4] {
        font-size: 0.6rem;
        min-width: 72px;
        padding-left: 0.375rem;
        padding-right: 0.375rem;
    }

    .st-td--act[b-hd8sgax4c4] {
        font-size: 0.7rem;
    }

    .st-score[b-hd8sgax4c4] {
        font-size: 0.75rem;
    }
}

@media (min-width: 640px) {
    .st-th[b-hd8sgax4c4] {
        padding: 0.75rem;
    }

    .st-th--act[b-hd8sgax4c4] {
        min-width: 200px;
        max-width: none;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .st-th--patrol[b-hd8sgax4c4] {
        min-width: 90px;
    }

    .st-th--pond[b-hd8sgax4c4] {
        min-width: 70px;
    }

    .st-th--fecha[b-hd8sgax4c4] {
        min-width: 80px;
        padding-right: 1rem;
    }

    .st-th--acciones[b-hd8sgax4c4] {
        min-width: 70px;
    }

    .st-td[b-hd8sgax4c4] {
        padding: 0.5rem 0.75rem;
    }

    .st-td--act[b-hd8sgax4c4] {
        max-width: none;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .st-td--fecha[b-hd8sgax4c4] {
        padding-right: 1rem;
    }

    .st-tf[b-hd8sgax4c4] {
        padding: 0.75rem;
    }

    .st-tf--label[b-hd8sgax4c4] {
        padding-left: 1rem;
    }
}
/* /Componentes/BH/StatsBanner.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * StatsBanner.razor.css — Banner de Estadísticas (/BH)
 * ──────────────────────────────────────────────────────────────────────
 * Card oscuro #37474F con textura de puntos, banderines SVG decorativos,
 * icono + título serif, y botón blanco con flecha animada.
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Wrapper con padding responsive ───────────────────────────────────── */
.stats-banner-wrap[b-4w4ik0td6k] {
    padding: 0 var(--bh-section-padding, 1rem);
}

/* ── Card principal ───────────────────────────────────────────────────── */
.stats-banner[b-4w4ik0td6k] {
    position: relative;
    max-width: var(--bh-container-max-width, 80rem);
    margin: 0 auto;
    background-color: #37474F;
    border-radius: 1rem;
    overflow: hidden;
}

/* ── Textura de puntos ────────────────────────────────────────────────── */
.stats-banner__dots[b-4w4ik0td6k] {
    position: absolute;
    inset: 0;
    opacity: 0.06;
    background-image: radial-gradient(#fff 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
}

/* ── Banderines SVG decorativos ───────────────────────────────────────── */
.stats-banner__pennants[b-4w4ik0td6k] {
    position: absolute;
    right: 1.5rem;
    bottom: 0;
    width: 9rem;
    height: auto;
    opacity: 0.05;
    pointer-events: none;
}

/* ── Contenido ────────────────────────────────────────────────────────── */
.stats-banner__body[b-4w4ik0td6k] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.5rem 2rem;
}

@media (min-width: 640px) {
    .stats-banner__body[b-4w4ik0td6k] {
        flex-direction: row;
    }
}

@media (min-width: 768px) {
    .stats-banner__body[b-4w4ik0td6k] {
        padding: 2rem 3rem;
    }
}

/* ── Info (icono + textos) ────────────────────────────────────────────── */
.stats-banner__info[b-4w4ik0td6k] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stats-banner__icon[b-4w4ik0td6k] {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.80);
    font-size: 1.25rem;
}

.stats-banner__title[b-4w4ik0td6k] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.stats-banner__subtitle[b-4w4ik0td6k] {
    color: rgba(255, 255, 255, 0.40);
    font-size: 0.75rem;
    margin: 0.125rem 0 0;
    line-height: 1.4;
}

/* ── Botón ─────────────────────────────────────────────────────────────── */
.stats-banner__btn[b-4w4ik0td6k] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    color: #37474F;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10),
                0  4px  6px -4px rgba(0, 0, 0, 0.10);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.stats-banner__btn:hover[b-4w4ik0td6k] {
    background: #F8F5F0;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.10),
                0  8px 10px -6px rgba(0, 0, 0, 0.10);
    color: #37474F;
}

.stats-banner__chevron[b-4w4ik0td6k] {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.stats-banner__btn:hover .stats-banner__chevron[b-4w4ik0td6k] {
    transform: translateX(4px);
}

/* ── Entrance animation via IntersectionObserver ────────────────────────── */
.stats-banner-wrap.bh-animate[b-4w4ik0td6k] {
    opacity: 0;
    transform: translateY(20px);
}

.stats-banner-wrap.bh-animate.visible[b-4w4ik0td6k] {
    opacity: 1;
    transform: translateY(0);
    animation: bhBannerIn-b-4w4ik0td6k 0.5s ease-out;
    animation-delay: var(--anim-delay, 0s);
    animation-fill-mode: backwards;
}

@keyframes bhBannerIn-b-4w4ik0td6k {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* ── Accesibilidad ──────────────────────────────────────────────────────── */
.stats-banner__btn:focus-visible[b-4w4ik0td6k] {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .stats-banner-wrap.bh-animate[b-4w4ik0td6k] {
        opacity: 1;
        transform: none;
    }
    .stats-banner-wrap.bh-animate.visible[b-4w4ik0td6k] {
        animation: none;
    }
}
/* /Componentes/BH/UnitCard.razor.rz.scp.css */
/* ==========================================================================
   UnitCard.razor.css — Tarjeta de unidad con banderín SVG
   ==========================================================================
   CSS Isolation de Blazor: aplica exclusivamente a UnitCard.razor.

   Estructura visual:
   ┌─────────────────────────────┐
   │ [Badge "BH Vigente"]       │  ← absolute, solo activas
   │  ┌───────────────────────┐ │
   │  │  Pennant zone         │ │  ← fondo gradiente + textura puntos
   │  │    ▷ SVG Banderín     │ │  ← rota -2° en hover
   │  └───────────────────────┘ │
   │  Type label (tiny upper)   │
   │  Nombre (serif)            │
   │  Descripción (opcional)    │
   │  Años (opcional)           │
   │  ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ │  ← barra color (4px)
   └─────────────────────────────┘
   ========================================================================== */

/* ── Card base ─────────────────────────────────────────────────────────── */
.bh-unit-card[b-4417n19sw3] {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 1rem;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
}

.bh-unit-card:hover[b-4417n19sw3] {
    transform: translateY(-6px);
}

/* ── Variante activa (verde) ──────────────────────────────────────────── */
.bh-unit-card--active[b-4417n19sw3] {
    border: 1px solid rgba(46, 125, 50, 0.30);
    box-shadow:
        0 10px 15px -3px rgba(46, 125, 50, 0.10),
        0 4px 6px -4px rgba(46, 125, 50, 0.10),
        0 0 0 1px rgba(46, 125, 50, 0.10); /* ring-1 */
}

/* ── Variante inactiva (crema) ────────────────────────────────────────── */
.bh-unit-card--inactive[b-4417n19sw3] {
    border: 1px solid #ECE6D8;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.bh-unit-card--inactive:hover[b-4417n19sw3] {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.10),
                0 8px 10px -6px rgba(0, 0, 0, 0.04);
}

/* ── Badge "BH Vigente" ───────────────────────────────────────────────── */
.bh-card-badge[b-4417n19sw3] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background-color: #2E7D32;
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10);
}

.bh-card-badge i[b-4417n19sw3] {
    font-size: 0.75rem;
}

/* ── Zona del banderín SVG ────────────────────────────────────────────── */
.bh-card-pennant-zone[b-4417n19sw3] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
}

.bh-unit-card--active .bh-card-pennant-zone[b-4417n19sw3] {
    background: linear-gradient(135deg,
        rgba(46, 125, 50, 0.05),
        #E8F5E9,
        rgba(200, 230, 201, 0.30));
}

.bh-unit-card--inactive .bh-card-pennant-zone[b-4417n19sw3] {
    background: linear-gradient(135deg, #F8F5F0, rgba(235, 229, 218, 0.50));
}

/* Textura de puntos radiales */
.bh-card-texture[b-4417n19sw3] {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: radial-gradient(#37474F 0.8px, transparent 0.8px);
    background-size: 16px 16px;
    pointer-events: none;
}

/* Wrapper del SVG: rota -2° en hover */
.bh-pennant-wrap[b-4417n19sw3] {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.bh-unit-card:hover .bh-pennant-wrap[b-4417n19sw3] {
    transform: rotate(-2deg);
}

/* ── Contenido: tipo, nombre, descripción, años ──────────────────────── */
.bh-card-content[b-4417n19sw3] {
    flex: 1;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
}

/* Type label: tiny uppercase */
.bh-card-type[b-4417n19sw3] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.25rem;
}

.bh-unit-card--active .bh-card-type[b-4417n19sw3] {
    color: #2E7D32;
}

.bh-unit-card--inactive .bh-card-type[b-4417n19sw3] {
    color: rgba(55, 71, 79, 0.40);
}

/* Nombre en serif */
.bh-card-name[b-4417n19sw3] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.bh-unit-card--active .bh-card-name[b-4417n19sw3] {
    color: #2E7D32;
}

.bh-unit-card--inactive .bh-card-name[b-4417n19sw3] {
    color: #37474F;
}

/* Descripción */
.bh-card-desc[b-4417n19sw3] {
    color: rgba(55, 71, 79, 0.50);
    font-size: 0.75rem;
    line-height: 1.625;
    margin: 0 0 0.75rem 0;
    flex: 1;
}

/* Años con ícono Calendar */
.bh-card-years[b-4417n19sw3] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.625rem;
    color: rgba(55, 71, 79, 0.35);
    font-weight: 500;
}

.bh-card-years i[b-4417n19sw3] {
    font-size: 0.75rem;
}

/* ── Barra inferior de color (4px) ────────────────────────────────────── */
.bh-card-bar[b-4417n19sw3] {
    height: 4px;
    width: 100%;
    flex-shrink: 0;
}

.bh-unit-card--active .bh-card-bar[b-4417n19sw3] {
    background-color: #2E7D32;
}

.bh-unit-card--inactive .bh-card-bar[b-4417n19sw3] {
    background-color: #ECE6D8;
}

/* ── Stretched link: toda la card es clickeable ───────────────────────── */
.bh-card-link[b-4417n19sw3] {
    position: absolute;
    inset: 0;
    z-index: 5;
    text-decoration: none;
}

/* ── Entrance animation via IntersectionObserver ────────────────────────── */
.bh-unit-card.bh-animate[b-4417n19sw3] {
    opacity: 0;
    transform: translateY(30px);
}

.bh-unit-card.bh-animate.visible[b-4417n19sw3] {
    opacity: 1;
    transform: translateY(0);
    animation: bhCardIn-b-4417n19sw3 0.5s ease-out;
    animation-delay: var(--anim-delay, 0s);
    animation-fill-mode: backwards;
}

@keyframes bhCardIn-b-4417n19sw3 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
}

/* ── Accesibilidad: focus ring ──────────────────────────────────────────── */
.bh-card-link:focus-visible[b-4417n19sw3] {
    outline: 2px solid #2E7D32;
    outline-offset: 2px;
    border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .bh-unit-card.bh-animate[b-4417n19sw3] {
        opacity: 1;
        transform: none;
    }
    .bh-unit-card.bh-animate.visible[b-4417n19sw3] {
        animation: none;
    }
}
/* /Componentes/Configuracion/AccesosRapidos.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   AccesosRapidos.razor.css — Barra de favoritos horizontal
   ═══════════════════════════════════════════════════════════════════ */

.ar[b-fer2f1y46o] {
    margin-bottom: 1.5rem;
}

/* ── Encabezado ─────────────────────────────────────────────────── */
.ar__header[b-fer2f1y46o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.ar__header-icono[b-fer2f1y46o] {
    color: #f9a825;
    font-size: 1rem;
}

.ar__header-titulo[b-fer2f1y46o] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #424242;
    margin: 0;
}

.ar__header-contador[b-fer2f1y46o] {
    font-size: 0.75rem;
    color: #9e9e9e;
}

/* ── Grid de accesos (wrap automático) ─────────────────────────── */
.ar__scroll[b-fer2f1y46o] {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Mínimo 3 siempre en mobile */
    gap: 0.5rem;
    padding: 0.4rem 0.4rem 0 0.1rem;
}

@media (min-width: 576px) {
    .ar__scroll[b-fer2f1y46o] {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 0.625rem;
    }
}

/* ── Tarjeta compacta ───────────────────────────────────────────── */
.ar__tarjeta[b-fer2f1y46o] {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 0.25rem; /* Reducido en mobile */
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: transform 200ms, box-shadow 200ms;
}

.ar__tarjeta:hover[b-fer2f1y46o] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ── Botón quitar ───────────────────────────────────────────────── */
.ar__tarjeta-quitar[b-fer2f1y46o] {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #bdbdbd;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    opacity: 0;
    transition: opacity 200ms, background 200ms, color 200ms;
}

.ar__tarjeta:hover .ar__tarjeta-quitar[b-fer2f1y46o] {
    opacity: 1;
}

.ar__tarjeta-quitar:hover[b-fer2f1y46o] {
    background: #ffebee;
    color: #d32f2f;
}

/* ── Ícono ──────────────────────────────────────────────────────── */
.ar__tarjeta-icono[b-fer2f1y46o] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* ── Label ──────────────────────────────────────────────────────── */
.ar__tarjeta-label[b-fer2f1y46o] {
    font-size: 0.7rem; /* Más chico en mobile */
    font-weight: 500;
    color: #424242;
    text-align: center;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

@media (min-width: 576px) {
    .ar__tarjeta[b-fer2f1y46o] {
        padding: 0.75rem 0.5rem;
    }
    .ar__tarjeta-label[b-fer2f1y46o] {
        font-size: 0.75rem;
        line-height: 1.3;
    }
}

/* ── Badge de pendientes ────────────────────────────────────────── */
.ar__badge[b-fer2f1y46o] {
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    background: #d32f2f;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 2;
    pointer-events: none;
}

/* ── Separador ──────────────────────────────────────────────────── */
.ar__separador[b-fer2f1y46o] {
    border: none;
    border-top: 1px dashed #e0e0e0;
    margin: 1rem 0 0;
}


/* /Componentes/Configuracion/SeccionCategoria.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   SeccionCategoria.razor.css — Sección colapsable
   ═══════════════════════════════════════════════════════════════════ */

.sc[b-u3pzkwpw4p] {
    border-radius: 0.75rem;
}

/* ── Encabezado ─────────────────────────────────────────────────── */
.sc__header[b-u3pzkwpw4p] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.sc__header:hover .sc__chevron[b-u3pzkwpw4p] {
    color: #424242;
}

.sc__header-left[b-u3pzkwpw4p] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.sc__icono-caja[b-u3pzkwpw4p] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.sc__titulo[b-u3pzkwpw4p] {
    font-size: 1rem;
    font-weight: 700;
    color: #212121;
    margin: 0;
    white-space: nowrap;
}

.sc__contador[b-u3pzkwpw4p] {
    font-size: 0.75rem;
    color: #9e9e9e;
    white-space: nowrap;
}

.sc__header-right[b-u3pzkwpw4p] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 2rem;
}

.sc__linea[b-u3pzkwpw4p] {
    flex: 1;
    height: 1px;
    min-width: 1rem;
}

.sc__chevron[b-u3pzkwpw4p] {
    color: #bdbdbd;
    font-size: 0.75rem;
    transition: color 200ms, transform 200ms;
    flex-shrink: 0;
}

/* ── Grid de tarjetas (colapsable) ──────────────────────────────── */
.sc__grid-wrapper[b-u3pzkwpw4p] {
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 300ms ease-in-out, opacity 300ms ease-in-out;
    opacity: 1;
}

.sc__grid-wrapper--colapsado[b-u3pzkwpw4p] {
    max-height: 0;
    opacity: 0;
}

.sc__grid[b-u3pzkwpw4p] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 0.5rem 0.5rem 0.5rem 0.25rem;
    padding-top: 1.5rem;
}

@media (min-width: 640px) {
    .sc__grid[b-u3pzkwpw4p] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .sc__grid[b-u3pzkwpw4p] {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* /Componentes/Configuracion/TarjetaConfig.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   TarjetaConfig.razor.css — Tarjeta individual de configuración
   ═══════════════════════════════════════════════════════════════════ */

.tc[b-eifde4gikp] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: transform 200ms, box-shadow 200ms, border-color 200ms;
}

.tc--activa:hover[b-eifde4gikp] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border-color: #bdbdbd;
}

.tc--deshabilitada[b-eifde4gikp] {
    opacity: 0.5;
    cursor: default;
}

.tc--deshabilitada:hover[b-eifde4gikp] {
    transform: none;
    box-shadow: none;
}

/* Tooltip "En construcción" — aparece en hover sobre la tarjeta deshabilitada */
.tc__tooltip[b-eifde4gikp] {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1e293b;
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.3rem 0.625rem;
    border-radius: 0.375rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms, transform 150ms;
    z-index: 20;
}

.tc__tooltip[b-eifde4gikp]::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #1e293b;
}

.tc--deshabilitada:hover .tc__tooltip[b-eifde4gikp] {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Botón favorito ─────────────────────────────────────────────── */
.tc__fav[b-eifde4gikp] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #bdbdbd;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: color 200ms, background 200ms;
}

.tc__fav--activo[b-eifde4gikp] {
    opacity: 1;
}

.tc__fav:hover[b-eifde4gikp] {
    background: #fff8e1;
    color: #f9a825;
}

.tc__fav--activo[b-eifde4gikp] {
    color: #f9a825;
}

/* ── Ícono ──────────────────────────────────────────────────────── */
.tc__icono-caja[b-eifde4gikp] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tc__icono[b-eifde4gikp] {
    font-size: 1.1rem;
}

/* ── Contenido ──────────────────────────────────────────────────── */
.tc__contenido[b-eifde4gikp] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
    padding-right: 1.75rem;
}

.tc__etiqueta[b-eifde4gikp] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #212121;
    line-height: 1.3;
}

.tc__desc[b-eifde4gikp] {
    font-size: 0.75rem;
    color: #757575;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Highlight de búsqueda ──────────────────────────────────────── */
[b-eifde4gikp] .tc__mark {
    background: #fff9c4;
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

/* ── Chevron ────────────────────────────────────────────────────── */
.tc__chevron[b-eifde4gikp] {
    color: #bdbdbd;
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: transform 200ms, color 200ms;
}

.tc--activa:hover .tc__chevron[b-eifde4gikp] {
    color: #757575;
    transform: translateX(2px);
}

/* ── Badge de notificación ──────────────────────────────────────── */
.tc__badge[b-eifde4gikp] {
    position: absolute;
    top: -0.375rem;
    right: -0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 1rem;
    background: #ef4444;
    color: white;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    border: 2px solid white;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    pointer-events: none;
}
/* /Componentes/Dirigentes/LeaderCard.razor.rz.scp.css */
/* ==================================================================
   LeaderCard.razor.css — Estilos aislados para LeaderCard
   ==================================================================
   Prefijo: lc-  (leader-card)
   Port de los estilos inline/Tailwind de LeaderCard en LeadersPage.tsx.
   ================================================================== */

/* ── Contenedor principal ── */
.lc-card[b-iutyo5yq7e] {
    position: relative;
    background: #fff;
    border-radius: 1rem;          /* rounded-2xl */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1),
                0 2px 4px -2px rgb(0 0 0 / .1);   /* shadow-md */
    overflow: visible;             /* para que el badge no se corte */
    transition: box-shadow .3s ease;
}

.lc-card:hover[b-iutyo5yq7e] {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1),
                0 8px 10px -6px rgb(0 0 0 / .1);   /* shadow-xl */
}

/* ── Animación de entrada (fade-up) ── */
.lc-card--animate[b-iutyo5yq7e] {
    opacity: 0;
    animation: lcFadeUp-b-iutyo5yq7e .5s ease forwards;
}

@keyframes lcFadeUp-b-iutyo5yq7e {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Badge jefe de sección ── */
.lc-badge[b-iutyo5yq7e] {
    position: absolute;
    top: -0.75rem;               /* -top-3 */
    right: -0.75rem;             /* -right-3 */
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;               /* gap-1.5 */
    padding: 0.375rem 0.75rem;   /* px-3 py-1.5 */
    border-radius: 9999px;       /* rounded-full */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1),
                0 4px 6px -4px rgb(0 0 0 / .1);  /* shadow-lg */
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    line-height: 1;
}

/* ── Zona de foto ── */
.lc-photo-wrap[b-iutyo5yq7e] {
    padding: .75rem .75rem 0;  /* px-3 pt-3 */
}

.lc-photo[b-iutyo5yq7e] {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;          /* rounded-[12px] */
    object-fit: cover;
    display: block;
}

/* Placeholder (sin foto) */
.lc-placeholder[b-iutyo5yq7e] {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Capa de puntos */
.lc-dots[b-iutyo5yq7e] {
    position: absolute;
    inset: 0;
    background-size: 16px 16px;
    opacity: 0.04;
    pointer-events: none;
}

/* Iconos centrados en placeholder */
.lc-placeholder-icons[b-iutyo5yq7e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    z-index: 1;
}

/* ── Zona de texto ── */
.lc-text[b-iutyo5yq7e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;                  /* gap-2 */
    padding: 1rem 1rem 1rem;      /* px-4 pt-4 pb-4 */
}

/* Nombre scout */
.lc-scout-name[b-iutyo5yq7e] {
    font-size: 15px;
    font-weight: 700;
    color: #1F2937;
    line-height: 1.3;
}
.lc-scout-name--empty[b-iutyo5yq7e] {
    color: #9CA3AF;
}

/* Nombre real */
.lc-real-name[b-iutyo5yq7e] {
    font-size: 13px;
    font-style: italic;
    color: #6B7280;
    line-height: 1.3;
}
.lc-real-name--empty[b-iutyo5yq7e] {
    color: #D1D5DB;
}

/* Role tag (pill) */
.lc-role[b-iutyo5yq7e] {
    display: inline-block;
    padding: 0.25rem 0.75rem;    /* px-3 py-1 */
    border-radius: 9999px;       /* rounded-full */
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
/* /Componentes/Dirigentes/LevelDivider.razor.rz.scp.css */
/* ==================================================================
   LevelDivider.razor.css — Estilos aislados para LevelDivider
   ==================================================================
   Prefijo: ld-  (level-divider)
   Separador decorativo con líneas gradiente crema y chevron.
   ================================================================== */

.ld-wrap[b-k4zhpbfsgy] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;           /* py-2 */
}

.ld-inner[b-k4zhpbfsgy] {
    width: 100%;
    max-width: 28rem;            /* max-w-md */
    display: flex;
    align-items: center;
    gap: 0.75rem;                /* gap-3 */
}

.ld-line[b-k4zhpbfsgy] {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #D7CEC7, transparent);
}
/* /Componentes/Dirigentes/LevelSection.razor.rz.scp.css */
/* ==================================================================
   LevelSection.razor.css — Estilos aislados para LevelSection
   ==================================================================
   Prefijo: ls-  (level-section)
   Sección completa con header, jefe de sección y unidades.
   ================================================================== */

/* ── Contenedor ── */
.ls-section[b-pcoq5jx3q1] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* Animación fade-in */
    opacity: 0;
    animation: lsFadeIn-b-pcoq5jx3q1 .6s ease forwards;
}

@keyframes lsFadeIn-b-pcoq5jx3q1 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Header de sección ── */
.ls-header[b-pcoq5jx3q1] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;                /* space-y-3 */
}

/* Líneas + shield */
.ls-divider-row[b-pcoq5jx3q1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 200px;
    width: 100%;
    margin: 0 auto;
}

.ls-line[b-pcoq5jx3q1] {
    flex: 1;
    height: 1px;
}

.ls-shield[b-pcoq5jx3q1] {
    flex-shrink: 0;
}

/* Título */
.ls-title[b-pcoq5jx3q1] {
    font-family: var(--font-serif, Georgia, 'Times New Roman', serif);
    font-size: clamp(1.125rem, 3vw, 1.5rem);   /* text-xl sm:text-2xl */
    font-weight: 700;
    color: #1F2937;
    margin: 0;
    line-height: 1.3;
}

/* Barra de acento */
.ls-accent-bar[b-pcoq5jx3q1] {
    width: 2.5rem;               /* w-10 */
    height: 0.25rem;             /* h-1 */
    border-radius: 9999px;
    margin: 0 auto;
}

/* ── Unidades ── */
.ls-units[b-pcoq5jx3q1] {
    display: flex;
    flex-direction: column;
    gap: 2rem;                   /* space-y-8 */
}
/* /Componentes/Dirigentes/SkeletonCard.razor.rz.scp.css */
/* ==================================================================
   SkeletonCard.razor.css — Estilos aislados para SkeletonCard
   ==================================================================
   Prefijo: sk-  (skeleton)
   Placeholder animado que imita la forma de LeaderCard.
   ================================================================== */

/* ── Contenedor ── */
.sk-card[b-4kox55ijlx] {
    background: #fff;
    border-radius: 1rem;       /* rounded-2xl */
    border: 1px solid #F3F4F6; /* border-gray-100 */
    padding: .75rem;           /* p-3 */
    animation: skPulse-b-4kox55ijlx 1.5s ease-in-out infinite;
}

/* ── Zona foto ── */
.sk-photo[b-4kox55ijlx] {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;       /* rounded-[12px] */
    background: #E5E7EB;       /* bg-gray-200 */
}

/* ── Zona texto ── */
.sk-text[b-4kox55ijlx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;               /* space-y-2 */
    padding-top: 1rem;         /* pt-4 */
    padding-bottom: 0.5rem;    /* pb-2 */
}

/* Barras genéricas */
.sk-bar[b-4kox55ijlx] {
    border-radius: 0.25rem;    /* rounded */
}

/* Barra nombre scout */
.sk-bar--name[b-4kox55ijlx] {
    height: 1rem;              /* h-4 */
    width: 6rem;               /* w-24 */
    background: #E5E7EB;       /* bg-gray-200 */
}

/* Barra nombre real */
.sk-bar--real[b-4kox55ijlx] {
    height: .75rem;            /* h-3 */
    width: 5rem;               /* w-20 */
    background: #F3F4F6;       /* bg-gray-100 */
}

/* Barra role */
.sk-bar--role[b-4kox55ijlx] {
    height: 1.25rem;           /* h-5 */
    width: 4rem;               /* w-16 */
    background: #F3F4F6;       /* bg-gray-100 */
    border-radius: 9999px;     /* rounded-full */
}

/* ── Animación pulse ── */
@keyframes skPulse-b-4kox55ijlx {
    0%, 100% { opacity: 1; }
    50%      { opacity: .5; }
}
/* /Componentes/Dirigentes/TopRowSectionCard.razor.rz.scp.css */
/* ==================================================================
   TopRowSectionCard.razor.css — Estilos aislados
   ==================================================================
   Prefijo: tr-  (top-row)
   Columna de la fila superior con header decorativo,
   card principal centrada y fila de sub-leaders.
   ================================================================== */

/* ── Contenedor de la sección ── */
.tr-section[b-0un3btskon] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    /* Animación fade-in + slide-up */
    opacity: 0;
    animation: trFadeUp-b-0un3btskon .6s ease forwards;
}

@keyframes trFadeUp-b-0un3btskon {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Header decorativo ── */
.tr-header[b-0un3btskon] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;               /* space-y-2.5 */
}

/* Líneas + shield centrado */
.tr-divider-row[b-0un3btskon] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 180px;
    width: 100%;
    margin: 0 auto;
}

.tr-line[b-0un3btskon] {
    flex: 1;
    height: 1px;
}

.tr-shield[b-0un3btskon] {
    flex-shrink: 0;
}

/* Título */
.tr-title[b-0un3btskon] {
    font-family: var(--font-serif, 'Bitter', Georgia, serif);
    font-size: clamp(1rem, 2.5vw, 1.25rem);  /* text-lg sm:text-xl */
    font-weight: 700;
    color: #1F2937;
    margin: 0;
    line-height: 1.3;
}

/* Barra de acento */
.tr-accent-bar[b-0un3btskon] {
    width: 2rem;                  /* w-8 */
    height: 3px;                  /* h-[3px] */
    border-radius: 9999px;
    margin: 0 auto;
}

/* ── Card principal centrada ── */
.tr-main-card-wrap[b-0un3btskon] {
    display: flex;
    justify-content: center;
}

.tr-main-card[b-0un3btskon] {
    width: 100%;
    max-width: 220px;
}

/* ── Fila de sub-leaders ── */
.tr-sub-row[b-0un3btskon] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.tr-sub-card[b-0un3btskon] {
    width: 190px;
}
/* /Componentes/Dirigentes/UnitGroupCard.razor.rz.scp.css */
/* ==================================================================
   UnitGroupCard.razor.css — Estilos aislados para UnitGroupCard
   ==================================================================
   Prefijo: ug-  (unit-group)
   Grupo de dirigentes pertenecientes a una misma unidad.
   ================================================================== */

.ug-group[b-ap31gttprt] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

/* ── Header: círculo + nombre ── */
.ug-header[b-ap31gttprt] {
    display: flex;
    align-items: center;
    gap: 0.625rem;               /* gap-2.5 */
}

.ug-dot[b-ap31gttprt] {
    width: 0.75rem;              /* w-3 */
    height: 0.75rem;             /* h-3 */
    border-radius: 9999px;
    flex-shrink: 0;
}

.ug-name[b-ap31gttprt] {
    font-family: var(--font-serif, 'Bitter', Georgia, serif);
    font-size: 15px;
    font-weight: 700;
    color: #374151;
    margin: 0;
    line-height: 1.3;
}

/* ── Grid de cards ── */
.ug-grid[b-ap31gttprt] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;                   /* gap-4 */
    justify-content: center;
}

.ug-card-wrap[b-ap31gttprt] {
    width: 210px;
    flex-shrink: 0;
}
/* /Componentes/Home/AboutSection.razor.rz.scp.css */
/* ==========================================================================
   AboutSection.razor.css — Sección Nosotros
   ==========================================================================
   CSS Isolation de Blazor: aplica exclusivamente a AboutSection.razor.

   Clave del bento-grid: .collage-tall con grid-row: 1/3 ocupa dos filas.
   !important en .about-container: sobrescribe max-width de Bootstrap
   (misma especificidad de clase, gana el que aparece después en el bundle).
   ========================================================================== */

.about-section[b-vvcm1rw8ek] {
    padding: 1.5rem 1rem 4rem;
    background-color: #F9F7F2;
}

@media (min-width: 768px) {
    .about-section[b-vvcm1rw8ek] {
        padding: 2rem 1.5rem 6rem;
    }
}

@media (min-width: 1024px) {
    .about-section[b-vvcm1rw8ek] {
        padding: 2rem 2rem 6rem;
    }
}

.about-container[b-vvcm1rw8ek] {
    max-width: 80rem !important;
}

@media (min-width: 1600px) {
    .about-container[b-vvcm1rw8ek] {
        max-width: 90rem !important;
    }
}

/* ── Layout principal: 1 col → 2 col en lg ──
   align-items: center centra verticalmente cuando el texto es más corto que el collage. */
.about-grid[b-vvcm1rw8ek] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 992px) {
    .about-grid[b-vvcm1rw8ek] {
        grid-template-columns: 1fr 1fr;
        gap: 5rem;
    }
}

/* ===========================================================================
   BENTO-GRID DE FOTOS
   ===========================================================================
   El bento-grid combina imágenes de diferente tamaño formando un collage
   asimétrico. La clave técnica es CSS Grid con filas y columnas explícitas
   más `grid-row: 1 / 3` para el span vertical.

   Estructura del grid 2×2:
   ┌──────────┬──────────┐
   │          │ top-right │
   │  tall    ├─────┬─────┤
   │          │mini │mini │
   └──────────┴─────┴─────┘
   =========================================================================== */
.photo-collage[b-vvcm1rw8ek] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .photo-collage[b-vvcm1rw8ek] {
        gap: 1rem;
    }
}

/* Foto alta: ocupa filas 1 y 2 de la columna izquierda (grid-row: 1/3).
   overflow: hidden requerido para que el border-radius se aplique a la imagen. */
.collage-tall[b-vvcm1rw8ek] {
    grid-column: 1;
    grid-row: 1 / 3;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}

.collage-tall img[b-vvcm1rw8ek] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 220px;
    display: block;
}

@media (min-width: 768px) {
    .collage-tall img[b-vvcm1rw8ek] {
        min-height: 460px;
    }
}

/* Foto superior derecha */
.collage-top-right[b-vvcm1rw8ek] {
    grid-column: 2;
    grid-row: 1;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}

.collage-top-right img[b-vvcm1rw8ek] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 100px;
    display: block;
}

@media (min-width: 768px) {
    .collage-top-right img[b-vvcm1rw8ek] {
        min-height: 220px;
    }
}

/* Mini-grid inferior derecha: dos fotos en una misma fila */
.collage-bottom-right[b-vvcm1rw8ek] {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .collage-bottom-right[b-vvcm1rw8ek] {
        gap: 1rem;
    }
}

.collage-mini[b-vvcm1rw8ek] {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}

.collage-mini img[b-vvcm1rw8ek] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 80px;
    display: block;
}

@media (min-width: 768px) {
    .collage-mini img[b-vvcm1rw8ek] {
        min-height: 220px;
    }
}

/* ==========================================================================
   TEXTO
   ========================================================================== */
.about-text[b-vvcm1rw8ek] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Eyebrow label: mayúsculas con tracking amplio y color verde institucional. */
.about-eyebrow[b-vvcm1rw8ek] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #2E7D32;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    justify-content: center;
}

@media (min-width: 992px) {
    .about-eyebrow[b-vvcm1rw8ek] {
        justify-content: flex-start;
    }
}

/* Título: fuente serif para contraste tipográfico, escalado fluid con clamp. */
.about-title[b-vvcm1rw8ek] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 700;
    color: #37474F;
    line-height: 1.2;
    margin: 0;
    text-align: center;
}

@media (min-width: 992px) {
    .about-title[b-vvcm1rw8ek] {
        text-align: left;
    }
}

/* Span italic verde: display: block separa la segunda frase del título en su propia línea. */
.about-title-accent[b-vvcm1rw8ek] {
    display: block;
    font-style: italic;
    color: #2E7D32;
}

/* Párrafos: color atenuado para menor jerarquía visual respecto al título. */
.about-body[b-vvcm1rw8ek] {
    font-size: 1.125rem;
    color: rgba(55, 71, 79, 0.75);
    line-height: 1.625;
    margin: 0;
    text-align: center;
}

@media (min-width: 992px) {
    .about-body[b-vvcm1rw8ek] {
        text-align: left;
    }
}

.about-cta-wrap[b-vvcm1rw8ek] {
    padding-top: 0.5rem;
    text-align: center;
}

@media (min-width: 992px) {
    .about-cta-wrap[b-vvcm1rw8ek] {
        text-align: left;
    }
}

/* Botón verde: hover combina darken (#1B5E20) + translateY(-2px).
   transition solo en background-color y transform para evitar animar propiedades no deseadas. */
.about-btn[b-vvcm1rw8ek] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #2E7D32;
    color: white;
    padding: 0.875rem 2rem;
    border-radius: 1rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.about-btn:hover[b-vvcm1rw8ek] {
    background-color: #1B5E20;
    transform: translateY(-2px);
    color: white;
    text-decoration: none;
}
/* /Componentes/Home/BirthdayWidget.razor.rz.scp.css */
/* ==========================================================================
   BirthdayWidget.razor.css — Widget de Cumpleaños v2
   ==========================================================================
   Rediseño 2026: tarjeta centrada con gradiente dorado, borde arcoíris,
   confetti animado CSS y sparkles que parpadean.
   ========================================================================== */

/* ── Sección ─────────────────────────────────────────────────────────────── */
.birthday-section[b-8xnbzzizoj] {
    padding: 2rem 1rem 1rem;
    background-color: #F9F7F2;
}

@media (min-width: 768px) {
    .birthday-section[b-8xnbzzizoj] {
        padding: 2.5rem 1.5rem 1.5rem;
    }
}

/* ── Contenedor: max-w-5xl centrado ─────────────────────────────────────── */
.birthday-container[b-8xnbzzizoj] {
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1600px) {
    .birthday-container[b-8xnbzzizoj] {
        max-width: 80rem;
    }
}

/* ── Tarjeta principal ───────────────────────────────────────────────────── */
.birthday-card[b-8xnbzzizoj] {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    text-align: center;
    padding: 1.25rem 1.25rem 1.5rem;
    background: linear-gradient(135deg, #FFF9E6 0%, #FFF3CD 50%, #FFEAA7 100%);
    border: 2px solid #D4A843;
    box-shadow: 0 4px 16px rgba(212, 168, 67, 0.12);
    animation: birthday-fadein-b-8xnbzzizoj 0.45s ease both;
}

@media (min-width: 576px) {
    .birthday-card[b-8xnbzzizoj] {
        padding: 1.25rem 2rem 1.5rem;
    }
}

/* ── Barra arcoíris superior ─────────────────────────────────────────────── */
.birthday-rainbow-bar[b-8xnbzzizoj] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FF6B6B, #FFE66D, #4ECDC4, #45B7D1, #DDA0DD, #FF6B6B);
}

/* ── Capa de confetti ────────────────────────────────────────────────────── */
.birthday-confetti-layer[b-8xnbzzizoj] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Pieza de confetti: cae, oscila y gira — sway y rotation únicos por elemento */
.bday-cp[b-8xnbzzizoj] {
    position: absolute;
    top: -8px;
    animation: bday-fall-b-8xnbzzizoj ease-in infinite;
}

@keyframes bday-fall-b-8xnbzzizoj {
    0%   {
        transform: translateY(-10px) translateX(0px) rotate(0deg);
        opacity: 0;
    }
    8%   { opacity: 0.8; }
    50%  {
        transform: translateY(130px) translateX(var(--sw1, 0px)) rotate(var(--rot1, 360deg));
        opacity: 0.8;
    }
    80%  { opacity: 0.8; }
    100% {
        transform: translateY(260px) translateX(var(--sw2, 0px)) rotate(var(--rot2, 720deg));
        opacity: 0;
    }
}

/* ── Capa de sparkles ────────────────────────────────────────────────────── */
.birthday-sparkles-layer[b-8xnbzzizoj] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bday-sparkle[b-8xnbzzizoj] {
    position: absolute;
    color: #FACC15;
    animation: bday-sparkle-b-8xnbzzizoj 3s ease-in-out infinite;
}

@keyframes bday-sparkle-b-8xnbzzizoj {
    0%   { opacity: 0; transform: scale(0); }
    25%  { opacity: 0.5; transform: scale(0.8); }
    50%  { opacity: 0.2; transform: scale(0.4); }
    75%  { opacity: 0.5; transform: scale(0.8); }
    100% { opacity: 0; transform: scale(0); }
}

/* ── Contenido central ───────────────────────────────────────────────────── */
.birthday-content[b-8xnbzzizoj] {
    position: relative;
    z-index: 10;
}

/* ── Fila de iconos: 🎉 [Cake] 🎉 ────────────────────────────────────────── */
.birthday-icon-row[b-8xnbzzizoj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Emojis de fiesta oscilantes */
.birthday-party-left[b-8xnbzzizoj] {
    font-size: 1.125rem;
    display: inline-block;
    animation: bday-rock-left-b-8xnbzzizoj 1.8s ease-in-out infinite;
}

.birthday-party-right[b-8xnbzzizoj] {
    font-size: 1.125rem;
    display: inline-block;
    animation: bday-rock-right-b-8xnbzzizoj 1.8s ease-in-out infinite;
}

@keyframes bday-rock-left-b-8xnbzzizoj  { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg);  } }
@keyframes bday-rock-right-b-8xnbzzizoj { 0%,100% { transform: rotate(8deg);  } 50% { transform: rotate(-8deg); } }

/* Círculo dorado con el ícono de torta */
.birthday-cake-circle[b-8xnbzzizoj] {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #D4A843, #F0D68A);
    box-shadow: 0 2px 8px rgba(212, 168, 67, 0.3);
    animation: bday-pulse-scale-b-8xnbzzizoj 2s ease-in-out infinite;
}

@keyframes bday-pulse-scale-b-8xnbzzizoj { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* Aro pulsante alrededor del círculo */
.birthday-cake-pulse[b-8xnbzzizoj] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid #D4A843;
    animation: bday-ring-pulse-b-8xnbzzizoj 2s ease-out infinite;
}

@keyframes bday-ring-pulse-b-8xnbzzizoj {
    0%   { transform: scale(1);   opacity: 0.5; }
    100% { transform: scale(1.6); opacity: 0; }
}

.birthday-cake-icon[b-8xnbzzizoj] {
    position: relative;
    z-index: 1;
}

/* ── Eyebrow ─────────────────────────────────────────────────────────────── */
.birthday-eyebrow[b-8xnbzzizoj] {
    display: block;
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: #B8860B;
    margin-bottom: 0.25rem;
}

/* ── Headline ────────────────────────────────────────────────────────────── */
.birthday-headline[b-8xnbzzizoj] {
    font-size: 1rem;
    font-weight: 700;
    color: #37474F;
    line-height: 1.5;
    margin: 0 0 0.25rem;
}

@media (min-width: 576px) {
    .birthday-headline[b-8xnbzzizoj] { font-size: 1.125rem; }
}

/* ── Subtítulo ───────────────────────────────────────────────────────────── */
.birthday-subtitle[b-8xnbzzizoj] {
    font-size: 0.875rem;
    color: #37474F;
    line-height: 1.5;
    margin: 0 0 0.5rem;
}

@media (min-width: 576px) {
    .birthday-subtitle[b-8xnbzzizoj] { font-size: 0.9375rem; }
}

/* ── Bloque de nombres ───────────────────────────────────────────────────── */
.birthday-names[b-8xnbzzizoj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}

/* Fila de cada nombre: fade-in con delay escalonado */
.birthday-name-row[b-8xnbzzizoj] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    animation: birthday-fadein-b-8xnbzzizoj 0.4s ease both;
}

.birthday-cake-emoji[b-8xnbzzizoj] {
    font-size: 1rem;
    display: inline-block;
    animation: bday-pulse-scale-b-8xnbzzizoj 1.5s ease-in-out infinite;
}

/* Nombre: serif cursiva verde #2E7D32 */
.birthday-name-text[b-8xnbzzizoj] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 1.125rem;
    color: #2E7D32;
}

@media (min-width: 576px) {
    .birthday-name-text[b-8xnbzzizoj] { font-size: 1.25rem; }
}

/* ── Animación de aparición ──────────────────────────────────────────────── */
@keyframes birthday-fadein-b-8xnbzzizoj {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* /Componentes/Home/CompeticionesSection.razor.rz.scp.css */
/* ==========================================================================
   CompeticionesSection.razor.css — Sección G: Competiciones
   ==========================================================================
   CSS Isolation de Blazor: aplica exclusivamente a CompeticionesSection.razor.

   flex:1 en .comp-card-body empuja .comp-stripe-bar al borde inferior.
   Modificadores BEM (-\-banderin / -\-rosario / -\-red / -\-slate) diferencian
   las dos tarjetas sin duplicar bloques de reglas.
   .comp-stripe-bar: 5 segmentos flex:1 con background inline, uno por rama.
   El contenedor está fuera de .comp-card-body para llegar a ambos bordes.

   .comp-scoreboards + .comp-scoreboard: mini-scoreboards con líder actual,
   clickeables individualmente hacia el scoreboard completo.
   ========================================================================== */

/* ── Sección contenedora ──────────────────────────────────────────────────── */
.competiciones-section[b-c28lrgg678] {
    background-color: rgba(236, 230, 216, 0.40);
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 768px) {
    .competiciones-section[b-c28lrgg678] {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

/* ── Contenedor interno centrado ──────────────────────────────────────────── */
.competiciones-container[b-c28lrgg678] {

    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .competiciones-container[b-c28lrgg678] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .competiciones-container[b-c28lrgg678] {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1600px) {
    .competiciones-container[b-c28lrgg678] {
        max-width: 90rem;
    }
}

/* ── Encabezado centrado ──────────────────────────────────────────────────── */
.competiciones-header[b-c28lrgg678] {
    text-align: center;
    margin-bottom: 3.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Eyebrow: "Tradiciones" con ícono trofeo */
.competiciones-eyebrow[b-c28lrgg678] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #2E7D32;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 700;
}

/* Título principal "Competiciones" */
.competiciones-title[b-c28lrgg678] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: clamp(2.25rem, 5vw, 3rem);
    font-weight: 700;
    color: #37474F;
    margin: 0;
}

/* Subtítulo suave */
.competiciones-subtitle[b-c28lrgg678] {
    color: rgba(55, 71, 79, 0.60);
    font-size: 1.125rem;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
}

/* ── Grid de 2 columnas ───────────────────────────────────────────────────── */
.competiciones-grid[b-c28lrgg678] {

    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .competiciones-grid[b-c28lrgg678] {
        grid-template-columns: 1fr 1fr;
        align-items: stretch; /* Cards igualan altura entre sí */
    }
}

/* ── Tarjeta base ─────────────────────────────────────────────────────────── */
.comp-card[b-c28lrgg678] {

    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.comp-card:hover[b-c28lrgg678] {
    box-shadow: 0 20px 25px rgba(0,0,0,0.10), 0 10px 10px rgba(0,0,0,0.04);
    transform: translateY(-4px);
}

/* Variante borde rojo — Banderín de Honor */
.comp-card--banderin[b-c28lrgg678] {
    border: 4px solid #D32F2F;
}

/* Variante borde gris — Rosario Scout */
.comp-card--rosario[b-c28lrgg678] {
    border: 4px solid #E0E0E0;
}

/* Banderín: label muestra nombre de unidad, no necesita uppercase */
.comp-card--banderin .comp-sb-label[b-c28lrgg678] {
    text-transform: none;
}

/* Rosario: centrar contenido verticalmente cuando se estira para igualar Banderín */
.comp-card--rosario .comp-card-body[b-c28lrgg678] {
    justify-content: center;
}

/* ── Cuerpo interno de la tarjeta ──
   Ahora es un <a> que actúa como link principal.
   `flex: 1` empuja scoreboards y la franja al fondo de la tarjeta. */
.comp-card-body[b-c28lrgg678] {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex: 1;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.comp-card-body:hover[b-c28lrgg678] {
    text-decoration: none;
    color: inherit;
}

@media (min-width: 768px) {
    .comp-card-body[b-c28lrgg678] {
        padding: 2.25rem; /* md:p-9 */
    }
}

/* ── Fila superior en móvil: apila título arriba, foto abajo ─────────────── */
.comp-card-top-row[b-c28lrgg678] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
}

@media (min-width: 480px) {
    .comp-card-top-row[b-c28lrgg678] {
        flex-direction: row;
        align-items: center;
        gap: 1.25rem;
    }
}

@media (min-width: 768px) {
    .comp-card-top-row[b-c28lrgg678] {
        gap: 1.5rem;
    }
}

/* Grupo ícono + título (lado izquierdo ~60%) */
.comp-card-title-group[b-c28lrgg678] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

/* ── Íconos cuadrados 3rem × 3rem ─────────────────────────────────────────── */
.comp-icon-wrap[b-c28lrgg678] {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
}

/* Variante dorada (Banderín) */
.comp-icon-wrap--gold[b-c28lrgg678] {
    background-color: #FFF8E1;
    color: #D4A843;
}

/* Variante gris azulado (Rosario Scout) */
.comp-icon-wrap--slate[b-c28lrgg678] {
    background-color: #ECEFF1;
    color: #455A64;
}

/* ── Títulos de tarjeta ───────────────────────────────────────────────────── */
.comp-card-title[b-c28lrgg678] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: 700;
    margin: 0;
    transition: opacity 0.2s ease;
}

.comp-card:hover .comp-card-title[b-c28lrgg678] {
    opacity: 0.80;
}

/* Variante verde (Banderín) */
.comp-card-title--green[b-c28lrgg678] {
    color: #2E7D32;
}

/* Variante gris oscuro (Rosario Scout) */
.comp-card-title--slate[b-c28lrgg678] {
    color: #37474F;
}

/* ── Foto stack: dos fotos superpuestas tipo polaroid ─────────────────────── */
.comp-foto-stack[b-c28lrgg678] {
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 16 / 7;
    border-radius: 0.75rem;
    position: relative;
    overflow: hidden;
    background-color: #FDECEA;
}

@media (min-width: 480px) {
    .comp-foto-stack[b-c28lrgg678] {
        width: 38%;
        aspect-ratio: 4 / 3;
    }
}

.comp-foto-stack-img[b-c28lrgg678] {
    position: absolute;
    width: 58%;
    height: 65%;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 3px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.comp-foto-stack-img--back[b-c28lrgg678] {
    top: 4%;
    left: 4%;
    transform: rotate(-4deg);
    z-index: 1;
}

.comp-foto-stack-img--front[b-c28lrgg678] {
    bottom: 4%;
    right: 4%;
    transform: rotate(3deg);
    z-index: 2;
}

/* ── Foto placeholder: ancho completo en móvil, 38% en sm+ ───────────────── */
.comp-foto-placeholder[b-c28lrgg678] {
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 16 / 7;
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

@media (min-width: 480px) {
    .comp-foto-placeholder[b-c28lrgg678] {
        width: 38%;
        aspect-ratio: 4 / 3;
    }
}

/* Variante rojo suave (Banderín) */
.comp-foto-placeholder--red[b-c28lrgg678] {
    background-color: #FDECEA;
    overflow: hidden;
}

/* Variante gris suave (Rosario Scout) */
.comp-foto-placeholder--slate[b-c28lrgg678] {
    background-color: #ECEFF1;
    overflow: hidden;
}

/* Imagen real dentro del placeholder: ocupa todo el espacio manteniendo proporción. */
.comp-foto-img[b-c28lrgg678] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.75rem;
    border: 4px solid #E0E0E0;
}

/* Borde rojo para la imagen dentro de la tarjeta Banderín */
.comp-card--banderin .comp-foto-img[b-c28lrgg678] {
    border-color: #D32F2F;
}

/* Ícono dentro del placeholder */
.comp-foto-icon[b-c28lrgg678] {
    font-size: 2rem;
}

.comp-foto-icon--red[b-c28lrgg678] {
    color: #D32F2F;
}

.comp-foto-icon--slate[b-c28lrgg678] {
    color: #455A64;
}

/* Etiqueta "FOTO" pequeña: mayúsculas con letter-spacing y opacidad reducida. */
.comp-foto-label[b-c28lrgg678] {
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.comp-foto-label--red[b-c28lrgg678] {
    color: rgba(211, 47, 47, 0.60);
}

.comp-foto-label--slate[b-c28lrgg678] {
    color: rgba(69, 90, 100, 0.60);
}

/* ── Descripción de la tarjeta ────────────────────────────────────────────── */
.comp-card-desc[b-c28lrgg678] {
    color: rgba(55, 71, 79, 0.70);
    font-size: 0.9375rem;
    line-height: 1.625;
    margin: 0;
}

/* ── CTA "Conocer más": hover sobre la tarjeta aumenta el gap (0.5→0.75rem),
   produciendo que la flecha se separe del texto visualmente. */
.comp-cta[b-c28lrgg678] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    transition: gap 0.2s ease;
}

.comp-card:hover .comp-cta[b-c28lrgg678] {
    gap: 0.75rem;
}

/* Variante rojo (Banderín de Honor) */
.comp-cta--red[b-c28lrgg678] {
    color: #D32F2F;
}

/* Variante gris azulado (Rosario Scout) */
.comp-cta--slate[b-c28lrgg678] {
    color: #455A64;
}

/* Flecha del CTA */
.comp-cta-arrow[b-c28lrgg678] {
    font-size: 0.875rem;
    transition: transform 0.2s ease;
}

/* ── Franja multicolor: 5 segmentos flex:1. Colores inline en el componente. */
.comp-stripe-bar[b-c28lrgg678] {
    display: flex;
    width: 100%;
    height: 10px;
    flex-shrink: 0;
}

.comp-stripe-segment[b-c28lrgg678] {
    flex: 1;
}

/* ── Párrafo secundario (Rosario context) ─────────────────────────────────── */
.comp-card-desc--secondary[b-c28lrgg678] {
    color: rgba(55, 71, 79, 0.50);
    font-size: 0.875rem;
    line-height: 1.625;
}

/* ══════════════════════════════════════════════════════════════════════════
   AJUSTES POR CANTIDAD DE BH ACTIVOS — iguala alturas Banderín ↔ Rosario
   ══════════════════════════════════════════════════════════════════════════
   Clase dinámica `comp-grid--bh-N` aplicada al grid según banderinLeaders.Count.
   Solo aplican en desktop (768px+) donde las cards están lado a lado.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 0 o 1 BH: Rosario pierde el párrafo secundario y reduce gaps ── */
@media (min-width: 768px) {
    .comp-grid--bh-0 .comp-card--rosario .comp-card-desc--secondary[b-c28lrgg678],
    .comp-grid--bh-1 .comp-card--rosario .comp-card-desc--secondary[b-c28lrgg678] {
        display: none;
    }

    /* Compensa la franja multicolor del Rosario (10px) para alinear scoreboards */
    .comp-grid--bh-1 .comp-card--banderin[b-c28lrgg678] {
        padding-bottom: 10px;
    }
}

/* ── 3-4 BH: ocultar tipo de competencia, solo mostrar nombre de unidad ── */
.comp-grid--bh-3 .comp-card--banderin .comp-sb-unit[b-c28lrgg678],
.comp-grid--bh-4 .comp-card--banderin .comp-sb-unit[b-c28lrgg678] {
    display: none;
}

/* ── 3-4 BH: permitir wrap del nombre de unidad en el header ── */
.comp-grid--bh-3 .comp-card--banderin .comp-sb-label[b-c28lrgg678],
.comp-grid--bh-4 .comp-card--banderin .comp-sb-label[b-c28lrgg678] {
    white-space: normal;
    line-height: 1.3;
    flex-shrink: 1;
    min-width: 0;
}

/* ── 2 BH: Rosario agranda foto y texto secundario al mismo tamaño del principal ── */
@media (min-width: 768px) {
    .comp-grid--bh-2 .comp-card--rosario .comp-card-body[b-c28lrgg678] {
        gap: 1.125rem;
    }

    .comp-grid--bh-2 .comp-card--rosario .comp-card-desc--secondary[b-c28lrgg678] {
        font-size: 0.9375rem;
        line-height: 1.625;
        color: rgba(55, 71, 79, 0.70);
    }

    .comp-grid--bh-2 .comp-card--rosario .comp-foto-placeholder[b-c28lrgg678] {
        aspect-ratio: 3 / 2;
    }
}

/* ── 3+ BH: Rosario agranda foto y texto secundario, compacta padding ── */
@media (min-width: 768px) {
    .comp-grid--bh-3 .comp-card--rosario .comp-card-body[b-c28lrgg678],
    .comp-grid--bh-4 .comp-card--rosario .comp-card-body[b-c28lrgg678] {
        gap: 1rem;
        padding: 1.5rem;
    }

    .comp-grid--bh-3 .comp-card--rosario .comp-card-desc[b-c28lrgg678],
    .comp-grid--bh-4 .comp-card--rosario .comp-card-desc[b-c28lrgg678] {
        font-size: 0.9375rem;
        line-height: 1.625;
    }

    .comp-grid--bh-3 .comp-card--rosario .comp-card-desc--secondary[b-c28lrgg678],
    .comp-grid--bh-4 .comp-card--rosario .comp-card-desc--secondary[b-c28lrgg678] {
        font-size: 0.9375rem;
        line-height: 1.625;
        color: rgba(55, 71, 79, 0.70);
    }

    .comp-grid--bh-3 .comp-card--rosario .comp-foto-placeholder[b-c28lrgg678],
    .comp-grid--bh-4 .comp-card--rosario .comp-foto-placeholder[b-c28lrgg678] {
        aspect-ratio: 3 / 2;
    }

    .comp-grid--bh-3 .comp-card--rosario .comp-card-footer[b-c28lrgg678],
    .comp-grid--bh-4 .comp-card--rosario .comp-card-footer[b-c28lrgg678] {
        padding-bottom: 1rem;
    }
}

/* ── Footer con CTA centrado ──────────────────────────────────────────────── */
.comp-card-footer[b-c28lrgg678] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.75rem 1.5rem;
}

@media (min-width: 768px) {
    .comp-card-footer[b-c28lrgg678] {
        padding: 0 2.25rem 1.5rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   MINI SCOREBOARDS — Líder actual de cada competencia
   ══════════════════════════════════════════════════════════════════════════ */

/* Contenedor de scoreboards: margen lateral alineado con el body */
.comp-scoreboards[b-c28lrgg678] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0 1.75rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .comp-scoreboards[b-c28lrgg678] {
        padding: 0 2.25rem;
    }
}

/* ── Multi-column scoreboards: 3+ items ───────────────────────────────────
   - 3 BH: primera fila 2 cols, último ítem ancho completo
   - 4 BH: grilla 2×2 compacta
   Solo en pantallas anchas donde cada card tiene ~500px+ de contenido.
   ──────────────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
    .comp-scoreboards--multi[b-c28lrgg678] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    /* Si cantidad impar, último ítem ocupa ancho completo */
    .comp-scoreboards--multi .comp-scoreboard:last-child:nth-child(odd)[b-c28lrgg678] {
        grid-column: 1 / -1;
    }

    /* Compactar scoreboards en modo multi-columna */
    .comp-scoreboards--multi .comp-sb-header[b-c28lrgg678] {
        padding: 0.25rem 0.75rem;
    }

    .comp-scoreboards--multi .comp-sb-body[b-c28lrgg678] {
        padding: 0.5rem 0.75rem;
    }

    .comp-scoreboards--multi .comp-sb-unit[b-c28lrgg678] {
        display: none; /* Ocultar nombre de unidad para ahorrar espacio */
    }

    .comp-scoreboards--multi .comp-sb-score[b-c28lrgg678] {
        font-size: 0.875rem;
    }
}

/* Scoreboard individual: clickeable, con micro-interacciones */
.comp-scoreboard[b-c28lrgg678] {
    display: block;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid #ECEFF1;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    cursor: pointer;
}

.comp-scoreboard:hover[b-c28lrgg678] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: scale(1.01);
    text-decoration: none;
    color: inherit;
}

.comp-scoreboard:active[b-c28lrgg678] {
    transform: scale(0.99);
}

/* ── Header bar del scoreboard ── */
.comp-sb-header[b-c28lrgg678] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 1rem;
    gap: 0.5rem;
}

.comp-sb-header-left[b-c28lrgg678] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
}

.comp-sb-flag-icon[b-c28lrgg678] {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.comp-sb-label[b-c28lrgg678] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-shrink: 0;
    white-space: nowrap;
}

.comp-sb-unit[b-c28lrgg678] {
    font-size: 0.625rem;
    font-weight: 500;
    color: rgba(55, 71, 79, 0.40);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badge "En curso": pill compacto */
.comp-sb-badge[b-c28lrgg678] {
    font-size: 0.5625rem;
    font-weight: 700;
    color: #fff;
    padding: 0.125rem 0.5rem;
    border-radius: 50rem;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Body del scoreboard: líder + puntaje ── */
.comp-sb-body[b-c28lrgg678] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
}

/* ── Body: sin puntajes ── */
.comp-sb-body--empty[b-c28lrgg678] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
}

.comp-sb-empty-icon[b-c28lrgg678] {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.comp-sb-empty-icon i[b-c28lrgg678] {
    font-size: 0.875rem;
}

.comp-sb-empty-text[b-c28lrgg678] {
    font-size: 0.75rem;
    font-style: italic;
    font-weight: 600;
    color: #37474F;
    opacity: 0.4;
}

/* ── Body: empate ── */
.comp-sb-body--tie[b-c28lrgg678] {
    padding: 0.625rem 1rem;
}

.comp-sb-tie-header[b-c28lrgg678] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.comp-sb-tie-label[b-c28lrgg678] {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    opacity: 0.6;
}

.comp-sb-tie-list[b-c28lrgg678] {
    padding-left: 2.25rem; /* 36px, alinea debajo del nombre */
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.comp-sb-tie-row[b-c28lrgg678] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comp-sb-tie-dot[b-c28lrgg678] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.comp-sb-tie-name[b-c28lrgg678] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #37474F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Crown icon wrap (gold) */
.comp-sb-crown-wrap[b-c28lrgg678] {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    background-color: #FFF8E1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.comp-sb-crown-icon[b-c28lrgg678] {
    font-size: 0.8rem;
    color: #D4A843;
}

/* Líder info (nombre inline) */
.comp-sb-leader-info[b-c28lrgg678] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

/* Líder info (nombre + subtexto apilados) — Rosario */
.comp-sb-leader-detail[b-c28lrgg678] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.comp-sb-leader-row[b-c28lrgg678] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comp-sb-subtext[b-c28lrgg678] {
    font-size: 0.75rem;
    color: #78909C;
}

/* Dot de color de patrulla */
.comp-sb-patrol-dot[b-c28lrgg678] {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Nombre de patrulla */
.comp-sb-patrol-name[b-c28lrgg678] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #37474F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Score + pts */
.comp-sb-score[b-c28lrgg678] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: 0.9375rem;
    font-weight: 700;
    flex-shrink: 0;
}

.comp-sb-score--lg[b-c28lrgg678] {
    font-size: 1.125rem;
}

.comp-sb-pts[b-c28lrgg678] {
    font-size: 0.5625rem;
    font-weight: 600;
    color: #78909C;
    flex-shrink: 0;
}

/* ── Responsive ajustes para mini-scoreboards ── */
@media (max-width: 479px) {
    .comp-sb-unit[b-c28lrgg678] {
        display: none; /* Ocultar nombre de unidad en móvil estrecho */
    }

    .comp-sb-header[b-c28lrgg678] {
        padding: 0.375rem 0.75rem;
    }

    .comp-sb-body[b-c28lrgg678] {
        padding: 0.5rem 0.75rem;
    }

    .comp-sb-body--empty[b-c28lrgg678] {
        padding: 0.5rem 0.75rem;
    }

    .comp-sb-body--tie[b-c28lrgg678] {
        padding: 0.5rem 0.75rem;
    }
}
/* /Componentes/Home/HeroSection.razor.rz.scp.css */
/* ==========================================================================
   HeroSection.razor.css — Estilos del Banner Principal
   ==========================================================================
   CSS Isolation de Blazor: aplica exclusivamente a HeroSection.razor.
   Organizado en capas: contenedor, imagen de fondo, overlay, cuerpo,
   badge, título, subtítulo, botones CTA y animaciones de entrada.

   Valores clave:
   - min-height 85vh | overlay: rgba(0,0,0,0.50→0.80)
   - Acento: #FBC02D | Verde primario: #2E7D32
   - Título: serif clamp(3rem, 8vw, 6rem), line-height 0.95
   ========================================================================== */

/* ── Contenedor principal ──
   position: relative ancla los hijos absolute. overflow: hidden evita
   que la imagen sobresalga en navegadores con transformaciones de escala. */
.hero-section[b-8yofz5tpm3] {
    position: relative;
    min-height: 85vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Imagen de fondo: posición absoluta full-cover ──
   inset:0 cubre el contenedor completo. object-position: top prioriza
   la zona superior de la foto (rostros, elementos de interés visual). */
.hero-bg-img[b-8yofz5tpm3] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/* ── Overlay de oscuridad ──
   El gradiente cumple dos funciones: garantiza legibilidad del texto blanco
   y en el extremo inferior (0.80) genera fusión visual con la StatsBar verde
   que se solapa 120px hacia arriba mediante margin-top: -120px. */
.hero-overlay[b-8yofz5tpm3] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.50) 0%,
        rgba(0, 0, 0, 0.45) 50%,
        rgba(0, 0, 0, 0.65) 85%,
        rgba(0, 0, 0, 0.80) 100%
    );
}

/* ── Cuerpo del hero ──
   z-index: 10 lo ubica por encima del overlay. padding-bottom: 10rem
   evita que el contenido quede oculto bajo la StatsBar solapada. */
.hero-body[b-8yofz5tpm3] {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 7rem 1rem 10rem;
    min-height: 85vh;
    width: 100%;
}

/* ── Badge superior (efecto glass) ──
   rgba(255,255,255,0.10) + backdrop-filter: blur(12px) + borde 20% producen
   el efecto de vidrio esmerilado. El prefijo -webkit- es necesario para Safari/iOS. */
.hero-badge[b-8yofz5tpm3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: rgba(255, 255, 255, 0.10);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 9999px;
    padding: 0.625rem 1.25rem;
    margin-bottom: 2rem;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.90);
}

.hero-badge-icon[b-8yofz5tpm3] {
    color: #FBC02D;                  /* Amarillo scout */
    font-size: 1rem;
}

/* ── Título principal ──
   clamp(3rem, 8vw, 6rem): escala fluida entre mínimo 3rem y máximo 6rem.
   line-height: 0.95 aprieta el interlineado para el impacto visual propio de
   títulos de una o dos palabras por línea,
    nunca en párrafos de texto continuo. */
.hero-title[b-8yofz5tpm3] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    max-width: 900px;
    color: rgba(255, 255, 255, 0.80);
}

/* Span amarillo + itálico: "una familia scout" */
.hero-title-accent[b-8yofz5tpm3] {
    color: #FBC02D;
    font-style: italic;
}

/* ── Subtítulo ──
   rgba(255,255,255,0.80) reduce el peso visual respecto al título,
   estableciendo jerarquía sin salir de la paleta de blancos. */
.hero-subtitle[b-8yofz5tpm3] {
    font-size: clamp(1.0625rem, 2.5vw, 1.25rem);
    color: rgba(255, 255, 255);
    max-width: 42rem;
    margin: 0 auto 3rem;
    line-height: 1.625;
}

/* ── Contenedor de botones ──
   Mobile-first: columna apilada en móvil, fila horizontal en sm+. */
.hero-actions[b-8yofz5tpm3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

@media (min-width: 576px) {
    .hero-actions[b-8yofz5tpm3] {
        flex-direction: row;
    }
}

/* ── Botón primario (verde) ──
   scale(1.03) en hover y scale(0.98) en active reproducen retroalimentación
   visual sin afectar el flujo del documento (usa transform, no width/padding). */
.hero-btn-primary[b-8yofz5tpm3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #2E7D32;
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 1rem;
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 25px 50px -12px rgba(27, 67, 50, 0.30);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.hero-btn-primary:hover[b-8yofz5tpm3] {
    background-color: #1B5E20;
    transform: scale(1.03);
    color: white;
    text-decoration: none;
}

.hero-btn-primary:active[b-8yofz5tpm3] {
    transform: scale(0.98);
}

/* ── Botón secundario (glass) ──
   Mismo efecto glass que el badge. Es deliberadamente menos prominente que el
   primario para establecer jerarquía: acción principal vs. acción alternativa. */
.hero-btn-secondary[b-8yofz5tpm3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: rgba(255, 255, 255, 0.90);
    padding: 1rem 2.5rem;
    border-radius: 1rem;
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.hero-btn-secondary:hover[b-8yofz5tpm3] {
    background-color: rgba(255, 255, 255, 0.20);
    color: white;
    text-decoration: none;
}

/* ==========================================================================
   ANIMACIONES DE ENTRADA
   ==========================================================================
   fadeDown (badge) y fadeUp (resto) producen convergencia visual desde arriba
   y desde abajo. animation-fill-mode: both evita el parpadeo cuando hay delay.
   Delays escalonados: badge 0s → título 0.15s → subtítulo 0.35s → botones 0.50s.
*/
@keyframes fadeDown-b-8yofz5tpm3 {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp-b-8yofz5tpm3 {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-down[b-8yofz5tpm3] {
    animation: fadeDown-b-8yofz5tpm3 0.6s ease-out both;
}

.animate-fade-up[b-8yofz5tpm3] {
    animation: fadeUp-b-8yofz5tpm3 0.7s ease-out both;
}

/* Delays de aparición escalonada:
   badge: 0s | título: 0.15s | subtítulo: 0.35s | botones: 0.50s */
.delay-1[b-8yofz5tpm3] { animation-delay: 0.15s; }
.delay-2[b-8yofz5tpm3] { animation-delay: 0.35s; }
.delay-3[b-8yofz5tpm3] { animation-delay: 0.50s; }

/* ── Botones circulares de redes sociales (glass) ──
   Mismo efecto glass que el badge y el botón secundario. */
.hero-social-link[b-8yofz5tpm3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: rgba(255, 255, 255, 0.90);
    font-size: 1.25rem;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.hero-social-link:hover[b-8yofz5tpm3] {
    background-color: rgba(255, 255, 255, 0.25);
    color: white;
    transform: scale(1.10);
    text-decoration: none;
}

/* ── Fila de redes sociales ──
   Siempre en fila horizontal, independientemente del flex-direction del padre. */
.hero-social-row[b-8yofz5tpm3] {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
}

/* ── Mobile: banner más compacto y botones más angostos ──
   En pantallas < 576px: reducimos el hero de 85vh a 70vh para mostrar
   más imagen de fondo, y achicamos los botones para que no ocupen tanto ancho. */
@media (max-width: 575px) {
    .hero-section[b-8yofz5tpm3] {
        min-height: 70vh;
    }
    .hero-body[b-8yofz5tpm3] {
        min-height: 70vh;
        padding: 5rem 1rem 8rem;
    }
    .hero-btn-primary[b-8yofz5tpm3] {
        padding: 0.875rem 1.75rem;
        font-size: 1rem;
    }
    .hero-btn-secondary[b-8yofz5tpm3] {
        padding: 0.875rem 1.75rem;
        font-size: 1rem;
    }
}
/* /Componentes/Home/RamasSection.razor.rz.scp.css */
/* ==========================================================================
   RamasSection.razor.css — Sección de Ramas
   ==========================================================================
   CSS Isolation de Blazor: aplica exclusivamente a RamasSection.razor.

   Los colores de borde, ícono y badge se definen inline en el markup.
   El hover del nombre usa selector descendiente: .rama-card:hover .rama-name.
   .rama-card-top-border: div de 4px con overflow:hidden en .rama-card
   para que respete el border-radius superior.
   !important en .ramas-container: mismo motivo que en .about-container.
   ========================================================================== */

.ramas-section[b-4z6jrzpt8i] {
    padding: 4rem 1rem 4rem;
    background-color: #F9F7F2;
}

@media (min-width: 768px) {
    .ramas-section[b-4z6jrzpt8i] {
        padding: 6rem 1.5rem 6rem;
    }
}

@media (min-width: 1024px) {
    .ramas-section[b-4z6jrzpt8i] {
        padding: 6rem 2rem 6rem;
    }
}

.ramas-container[b-4z6jrzpt8i] {
    max-width: 80rem !important;
}

@media (min-width: 1600px) {
    .ramas-container[b-4z6jrzpt8i] {
        max-width: 90rem !important;
    }
}

/* ── Encabezado ── */
.ramas-header[b-4z6jrzpt8i] {
    text-align: center;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

/* Eyebrow: mayúsculas con tracking amplio y color verde institucional. */
.ramas-eyebrow[b-4z6jrzpt8i] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #2E7D32;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Título: fuente serif para contraste tipográfico con el eyebrow sans-serif. */
.ramas-title[b-4z6jrzpt8i] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 700;
    color: #37474F;
    margin: 0;
}

/* Subtítulo: tono atenuado al 60% de opacidad. */
.ramas-subtitle[b-4z6jrzpt8i] {
    color: rgba(55, 71, 79, 0.60);
    font-size: 1.125rem;
    max-width: 42rem;
    margin: 0;
    line-height: 1.5;
}

/* ── Grid de tarjetas: Flexbox con centrado para que filas incompletas queden en el medio ── */
.ramas-grid[b-4z6jrzpt8i] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
}

/* Tarjeta por defecto en móvil (< 700px) */
.rama-card[b-4z6jrzpt8i] {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    border: 1px solid #ECE6D8;
    text-decoration: none;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    cursor: pointer;
}

/* De 700px a 1199px: 2 por fila centradas */
@media (min-width: 700px) {
    .rama-card[b-4z6jrzpt8i] {
        width: calc(50% - 0.75rem);
        max-width: 500px;
    }
}

/* 1200px o más: vuelve a 3 por fila */
@media (min-width: 1200px) {
    .rama-card[b-4z6jrzpt8i] {
        width: calc(33.333% - 0.9rem);
        max-width: none;
    }
}

.rama-card:hover[b-4z6jrzpt8i] {
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    transform: translateY(-4px);
    text-decoration: none;
}

/* Borde de color superior 4px. El color se asigna como style inline por rama. */
.rama-card-top-border[b-4z6jrzpt8i] {
    height: 4px;
    width: 100%;
}

/* Contenido interno: padding 1.5rem, flex horizontal con gap 1rem. */
.rama-card-body[b-4z6jrzpt8i] {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Contenedor de la imagen del símbolo: cuadrado fijo,
   borde sólido del color de la rama. */
.rama-icon-wrap[b-4z6jrzpt8i] {
    width: 110px;
    height: 110px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid var(--rama-color, #5D4037);
    padding: 0;
    background: transparent;
    overflow: hidden;
}

/* Imagen del símbolo de rama: el lado más corto llena el cuadrado,
   el sobrante se recorta. */
.rama-simbolo[b-4z6jrzpt8i] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rama-info[b-4z6jrzpt8i] {
    flex: 1;
    min-width: 0;
}

/* Fila con nombre + badge */
.rama-info-header[b-4z6jrzpt8i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}

/* Nombre: hover con selector .rama-card:hover .rama-name cambia al verde institucional. */
.rama-name[b-4z6jrzpt8i] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #37474F;
    margin: 0;
    transition: color 0.2s ease;
}

.rama-card:hover .rama-name[b-4z6jrzpt8i] {
    color: #2E7D32;
}

/* Variante stacked: nombre arriba, badge abajo (para Rondas donde el nombre es largo). */
.rama-info-header--stacked[b-4z6jrzpt8i] {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

/* Badge de edad: white-space: nowrap evita que el rango se rompa en dos líneas. */
/* ── Contenedor de badges (edad + sexo en la misma línea) ── */
.rama-badges[b-4z6jrzpt8i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.rama-age-badge[b-4z6jrzpt8i] {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    white-space: nowrap;
}

.rama-sex-badge[b-4z6jrzpt8i] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #607D8B;
    white-space: nowrap;
}

/* ── CTA inferior ── */
.ramas-cta[b-4z6jrzpt8i] {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

.ramas-cta-btn[b-4z6jrzpt8i] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background-color: #2E7D32;
    color: white;
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: 9999px;
    text-decoration: none;
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 4px 14px rgba(46, 125, 50, 0.35);
}

.ramas-cta-btn:hover[b-4z6jrzpt8i] {
    background-color: #1B5E20;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46, 125, 50, 0.45);
    text-decoration: none;
    color: white;
}

.ramas-cta-btn:active[b-4z6jrzpt8i] {
    transform: translateY(0);
}

/* Lema: tono muy atenuado para no competir visualmente con el nombre. */
.rama-motto[b-4z6jrzpt8i] {
    font-size: 0.875rem;
    color: rgba(55, 71, 79, 0.55);
    margin: 0;
}
/* /Componentes/Home/StatsBar.razor.rz.scp.css */
/* ==========================================================================
   StatsBar.razor.css — Barra de Estadísticas Verde
   ==========================================================================
   CSS Isolation de Blazor: aplica exclusivamente a StatsBar.razor.
   Organizado en seis bloques: wrapper con solapamiento, fades de transición,
   barra verde, números, separador, pills y animación de entrada.

   Valores clave:
   - margin-top -120px (solapamiento con hero) | z-index 20
   - Fade-top 80px: transparent → #2E7D32 | Fade-bottom 32px: #2E7D32 → #F9F7F2
   - Números: serif, clamp(2.25rem, 4vw, 3rem) | Labels: 13px bold uppercse
   ========================================================================== */

/* ── Wrapper: contiene fade-top + barra + fade-bottom.
   margin-top -120px produce el solapamiento visual con el hero.
   z-index 20 + position relative son necesarios para que el solapamiento funcione. */
.stats-bar-wrapper[b-ei3k5wdd79] {
    position: relative;
    z-index: 20;
    margin-top: -120px;
}

/* ── Fusión superior: transparent → verde ──
   4 paradas producen una mezcla más orgánica que con solo 2. Si cambia
   el hero, este gradiente debe ajustarse en consecuencia. */
.stats-fade-top[b-ei3k5wdd79] {
    height: 80px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(46, 125, 50, 0.35) 35%,
        rgba(46, 125, 50, 0.75) 65%,
        #2E7D32 100%
    );
}

/* ── Barra verde sólida ──
   overflow: hidden evita desbordes de hijos. */
.stats-green-bar[b-ei3k5wdd79] {
    background-color: #2E7D32;
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Patrón de puntos sutil sobre el fondo verde. */
.stats-green-bar[b-ei3k5wdd79]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}

/* ── Contenedor interior: ancho máximo, centrado y padding interior. */
.stats-inner[b-ei3k5wdd79] {
    position: relative;
    max-width: 64rem;
    margin: 0 auto;
    padding: 1rem 1.5rem 2.5rem;
}

@media (min-width: 768px) {
    .stats-inner[b-ei3k5wdd79] {
        padding: 1.5rem 2.5rem 3rem;
    }
}

@media (min-width: 1600px) {
    .stats-inner[b-ei3k5wdd79] {
        max-width: 80rem;
    }
}

/* ── Fila de números grandes: SIEMPRE 3 columnas (antes 1→3 en sm). */
.stats-numbers-row[b-ei3k5wdd79] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.75rem;
    justify-items: center;
}

@media (min-width: 576px) {
    .stats-numbers-row[b-ei3k5wdd79] {
        gap: 1rem;
    }
}

/* Contenedor de cada estadística: columna centrada. */
.stat-item[b-ei3k5wdd79] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ── Ícono de estadística: w-5 mobile → sm:w-6 ── */
.stat-icon[b-ei3k5wdd79] {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
    color: rgba(255, 255, 255, 0.50);
    display: block;
    text-align: center;
}

@media (min-width: 576px) {
    .stat-icon[b-ei3k5wdd79] {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
}

/* Número grande: text-2xl → sm:text-4xl → md:text-5xl, blanco puro. */
.stat-value[b-ei3k5wdd79] {
    display: block;
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.125rem;
    color: #FFFFFF;
}

@media (min-width: 576px) {
    .stat-value[b-ei3k5wdd79] {
        font-size: 2.25rem;
        margin-bottom: 0.25rem;
    }
}

@media (min-width: 768px) {
    .stat-value[b-ei3k5wdd79] {
        font-size: 3rem;
    }
}

/* Label: 10px mobile → sm:13px, tracking 0.10em → sm:0.14em, blanco 65%. */
.stat-label[b-ei3k5wdd79] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.65);
}

@media (min-width: 576px) {
    .stat-label[b-ei3k5wdd79] {
        font-size: 13px;
        letter-spacing: 0.14em;
    }
}

/* ── Separador: blanco al 15% de opacidad sobre el fondo verde. */
.stats-divider[b-ei3k5wdd79] {
    height: 1px;
    max-width: 24rem;
    margin: 0 auto 1.5rem;
    background-color: rgba(255, 255, 255, 0.15);
}

/* ── Headline "Hoy en SanPa somos:" — italic, text-lg → sm:text-xl, mb-5 ── */
.stats-headline[b-ei3k5wdd79] {
    text-align: center;
    margin: 0 0 1.25rem;
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: 1.125rem;
    font-style: italic;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.04em;
}

@media (min-width: 576px) {
    .stats-headline[b-ei3k5wdd79] {
        font-size: 1.25rem;
    }
}

/* ── Fila de pills: flex-wrap para móvil, centradas horizontalmente. */
.stats-pills-row[b-ei3k5wdd79] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
}

/* Pill: cápsula (border-radius 9999px). Fondo y shadow se definen inline en el componente. */
.stats-pill[b-ei3k5wdd79] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    padding: 0.375rem 0.875rem;
    font-size: 13px;
    font-weight: 700;
}

/* ── Fusión inferior: verde → crema (#F9F7F2). Si cambia el fondo siguiente, actualizar aquí. */
.stats-fade-bottom[b-ei3k5wdd79] {
    height: 32px;
    background: linear-gradient(to bottom, #2E7D32 0%, #F9F7F2 100%);
}

/* ── Animación de entrada al hacer scroll ──
   animation-fill-mode: both evita parpadeo cuando hay delay.
   NOTA: se ejecuta al cargar, no al entrar en el viewport. Para scroll-triggered
   real se necesita IntersectionObserver + IJSRuntime. */
.animate-fade-in-viewport[b-ei3k5wdd79] {
    animation: statsFadeIn-b-ei3k5wdd79 0.55s ease-out both;
}

@keyframes statsFadeIn-b-ei3k5wdd79 {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Botón toggle mobile: solo visible en < 768px ── */
.stats-toggle-mobile[b-ei3k5wdd79] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 auto 1rem;
    padding: 0.5rem 1.25rem;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 9999px;
    color: #FFFFFF;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.stats-toggle-mobile:hover[b-ei3k5wdd79] {
    background-color: rgba(255, 255, 255, 0.25);
}

.stats-toggle-mobile i[b-ei3k5wdd79] {
    font-size: 0.6875rem;
    transition: transform 0.3s ease;
}

/* En desktop el botón no se muestra y la sección siempre es visible */
@media (min-width: 768px) {
    .stats-toggle-mobile[b-ei3k5wdd79] {
        display: none;
    }
}

/* ── Sección colapsable: headline + pills ── */
.stats-detail-section[b-ei3k5wdd79] {
    display: none;
}

@media (min-width: 768px) {
    .stats-detail-section[b-ei3k5wdd79] {
        display: block;
    }
}

/* Cuando se activa el toggle en mobile */
.stats-detail-visible[b-ei3k5wdd79] {
    display: block;
    animation: detailSlideDown-b-ei3k5wdd79 0.3s ease-out;
}

@keyframes detailSlideDown-b-ei3k5wdd79 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Skeleton loading — Placeholders animados mientras cargan los datos
   ========================================================================== */

/* Base compartida: fondo semitransparente blanco con pulso suave. */
.skeleton[b-ei3k5wdd79] {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 0.5rem;
    animation: skeletonPulse-b-ei3k5wdd79 1.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .skeleton[b-ei3k5wdd79] {
        animation: none;
    }
}

/* Ícono circular placeholder */
.skeleton-icon[b-ei3k5wdd79] {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    margin: 0 auto 0.375rem;
}

/* Número grande placeholder */
.skeleton-number[b-ei3k5wdd79] {
    width: 3.5rem;
    height: 2rem;
    margin: 0 auto 0.25rem;
    border-radius: 0.375rem;
}

@media (min-width: 576px) {
    .skeleton-number[b-ei3k5wdd79] {
        width: 5rem;
        height: 2.75rem;
    }
}

/* Label placeholder */
.skeleton-label[b-ei3k5wdd79] {
    width: 4.5rem;
    height: 0.75rem;
    margin: 0 auto;
    border-radius: 0.25rem;
}

/* Pill placeholder */
.skeleton-pill[b-ei3k5wdd79] {
    width: 7rem;
    height: 2rem;
    border-radius: 9999px;
}

@keyframes skeletonPulse-b-ei3k5wdd79 {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.8;
    }
}
/* /Componentes/Shared/EncabezadoSubPagina.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   EncabezadoSubPagina.razor.css
   Port de ConfigSubPageHeader.tsx — Encabezado verde scout para sub-páginas.
   Prefijo: esp-header-
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Contenedor principal ── */
.esp-header[b-pw842kn9ua] {
    background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 55%, #388E3C 100%);
    color: white;
}

.esp-header__contenedor[b-pw842kn9ua] {
    max-width: 72rem;
    margin: 0 auto;
    padding: 2rem 1rem;
}

@media (min-width: 640px) {
    .esp-header__contenedor[b-pw842kn9ua] {
        padding: 2.5rem 1rem;
    }
}

/* ── Bloque animado ── */
.esp-header__animado[b-pw842kn9ua] {
    animation: espHeaderFadeDown-b-pw842kn9ua 0.4s ease both;
}

@keyframes espHeaderFadeDown-b-pw842kn9ua {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .esp-header__animado[b-pw842kn9ua] {
        animation: none;
    }
}

/* ── Botón volver ── */
.esp-header__volver[b-pw842kn9ua] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    text-decoration: none;
    margin-bottom: 1rem;
    transition: color 0.2s ease;
}

.esp-header__volver:hover[b-pw842kn9ua] {
    color: white;
}

.esp-header__volver-flecha[b-pw842kn9ua] {
    transition: transform 0.2s ease;
}

.esp-header__volver:hover .esp-header__volver-flecha[b-pw842kn9ua] {
    transform: translateX(-2px);
}

/* ── Fila ícono + título ── */
.esp-header__fila[b-pw842kn9ua] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

/* ── Caja de ícono ── */
.esp-header__icono-caja[b-pw842kn9ua] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background-color: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.esp-header__icono[b-pw842kn9ua] {
    font-size: 1.0625rem;
    color: white;
}

/* ── Textos ── */
.esp-header__titulo[b-pw842kn9ua] {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin: 0;
    line-height: 1.3;
}

@media (min-width: 640px) {
    .esp-header__titulo[b-pw842kn9ua] {
        font-size: 1.5rem;
    }
}

.esp-header__subtitulo[b-pw842kn9ua] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.125rem 0 0 0;
}

/* ── Slot extra (badges, stats) ── */
.esp-header__extra[b-pw842kn9ua] {
    margin-top: 1rem;
}
/* /Componentes/Shared/FadeHeroBanner.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * FadeHeroBanner.razor.css — Banner hero reutilizable
 * ──────────────────────────────────────────────────────────────────────
 * Port de FadeHeroBanner.tsx. Imagen de fondo con overlay oscuro y
 * degradado inferior que se funde con #F9F7F2 (crema).
 * ══════════════════════════════════════════════════════════════════════ */

.fade-hero[b-1cuakewcf7] {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* ── Imagen de fondo ──────────────────────────────────────────────────── */
.fade-hero__img[b-1cuakewcf7] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.75);
}

/* ── Overlay oscuro (contraste texto) ─────────────────────────────────── */
.fade-hero__overlay[b-1cuakewcf7] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.40) 60%,
        rgba(0, 0, 0, 0.30) 100%
    );
}

/* ── Degradado inferior "fade to cream" ───────────────────────────────── */
.fade-hero__fade[b-1cuakewcf7] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(
        to top,
        var(--background, #F9F7F2) 0%,
        rgba(249, 247, 242, 0.85) 30%,
        rgba(249, 247, 242, 0) 100%
    );
}

/* ── Contenido centrado ───────────────────────────────────────────────── */
.fade-hero__content[b-1cuakewcf7] {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1rem;
    animation: fadeHeroIn-b-1cuakewcf7 0.55s ease-out both;
}

@keyframes fadeHeroIn-b-1cuakewcf7 {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (min-width: 640px) {
    .fade-hero__content[b-1cuakewcf7] { padding: 0 1.5rem; }
}

@media (min-width: 1024px) {
    .fade-hero__content[b-1cuakewcf7] { padding: 0 2rem; }
}

/* ── Título ────────────────────────────────────────────────────────────── */
.fade-hero__title[b-1cuakewcf7] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

/* ── Subtítulo ─────────────────────────────────────────────────────────── */
.fade-hero__subtitle[b-1cuakewcf7] {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: rgba(255, 255, 255, 0.85);
    max-width: 42rem;
    line-height: 1.625;
    margin: 0;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}

/* ── Slot extra (CTA, pills, etc.) ────────────────────────────────────── */
.fade-hero__extra[b-1cuakewcf7] {
    margin-top: 1.5rem;
    width: 100%;
    animation: fadeHeroExtra-b-1cuakewcf7 0.4s ease-out 0.2s both;
}

@keyframes fadeHeroExtra-b-1cuakewcf7 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* /Componentes/Shared/PaginaNoEncontrada.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   PaginaNoEncontrada.razor.css — Estilos de la página 404
   Replica el diseño de pagina_muestra/NotFoundPage.tsx en CSS puro.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Contenedor principal ── */
.not-found-container[b-ex0tgbciny] {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
}

/* ── Contenido central ── */
.not-found-content[b-ex0tgbciny] {
    position: relative;
    z-index: 10;
    max-width: 560px;
    width: 100%;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   HOJAS CAYENDO — Decoración animada de fondo
   ═══════════════════════════════════════════════════════════════════ */

.hoja-cayendo[b-ex0tgbciny] {
    position: absolute;
    top: -30px;
    pointer-events: none;
    z-index: 0;
    animation: caer-b-ex0tgbciny linear infinite;
}

.hoja-1[b-ex0tgbciny] { left: 10%;  animation-duration: 6s;   animation-delay: 0s; }
.hoja-2[b-ex0tgbciny] { left: 25%;  animation-duration: 7s;   animation-delay: 1.2s; }
.hoja-3[b-ex0tgbciny] { left: 45%;  animation-duration: 5.5s; animation-delay: 0.5s; }
.hoja-4[b-ex0tgbciny] { left: 65%;  animation-duration: 6.5s; animation-delay: 2s; }
.hoja-5[b-ex0tgbciny] { left: 80%;  animation-duration: 7.5s; animation-delay: 0.8s; }
.hoja-6[b-ex0tgbciny] { left: 90%;  animation-duration: 5s;   animation-delay: 1.5s; }

@keyframes caer-b-ex0tgbciny {
    0% {
        transform: translateY(-30px) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    50% {
        transform: translateY(45vh) translateX(30px) rotate(120deg);
        opacity: 0.8;
    }
    75% {
        transform: translateY(70vh) translateX(-20px) rotate(200deg);
        opacity: 0.6;
    }
    100% {
        transform: translateY(100vh) translateX(10px) rotate(300deg);
        opacity: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   BRÚJULA SVG — Ilustración y aguja animada
   ═══════════════════════════════════════════════════════════════════ */

.brujula-container[b-ex0tgbciny] {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto;
}

.brujula-svg[b-ex0tgbciny] {
    max-width: 100%;
    height: auto;
}

.brujula-aguja[b-ex0tgbciny] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: girar-aguja-b-ex0tgbciny 8s ease-in-out infinite;
}

@keyframes girar-aguja-b-ex0tgbciny {
    0%   { transform: rotate(0deg); }
    14%  { transform: rotate(45deg); }
    28%  { transform: rotate(-30deg); }
    42%  { transform: rotate(60deg); }
    57%  { transform: rotate(-15deg); }
    71%  { transform: rotate(25deg); }
    100% { transform: rotate(0deg); }
}

/* ═══════════════════════════════════════════════════════════════════
   TEXTO — Código de error, título, descripción
   ═══════════════════════════════════════════════════════════════════ */

.error-code[b-ex0tgbciny] {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--primary, #2E7D32);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.not-found-title[b-ex0tgbciny] {
    margin: 0 0 0.75rem;
    font-family: 'Bitter', serif;
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: var(--title, #263238);
}

.not-found-desc[b-ex0tgbciny] {
    margin: 0 0 2rem;
    color: var(--body, #607D8B);
    line-height: 1.7;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.95rem;
}

.not-found-desc-hint[b-ex0tgbciny] {
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════════
   BOTONES — Primario y secundarios
   ═══════════════════════════════════════════════════════════════════ */

.not-found-primary-action[b-ex0tgbciny] {
    margin-bottom: 1.5rem;
}

.btn-primary-404[b-ex0tgbciny] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--primary, #2E7D32);
    color: #fff;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background-color 0.2s ease;
}

.btn-primary-404:hover[b-ex0tgbciny] {
    background-color: var(--primary-dark, #1B5E20);
    color: #fff;
    text-decoration: none;
}

.not-found-secondary-links[b-ex0tgbciny] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.btn-secondary-404[b-ex0tgbciny] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    color: var(--primary, #2E7D32);
    text-decoration: none;
    border: 1.5px solid #C8E6C9;
    border-radius: 8px;
    background-color: transparent;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.btn-secondary-404:hover[b-ex0tgbciny] {
    background-color: #E8F5E9;
    color: var(--primary, #2E7D32);
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER HINT — Brújula + nombre del grupo
   ═══════════════════════════════════════════════════════════════════ */

.not-found-footer-hint[b-ex0tgbciny] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
    color: #B0BEC5;
    font-size: 0.85rem;
}

/* ═══════════════════════════════════════════════════════════════════
   ACCESIBILIDAD — Reducción de movimiento
   ═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .hoja-cayendo[b-ex0tgbciny] {
        animation: none;
        display: none;
    }

    .brujula-aguja[b-ex0tgbciny] {
        animation: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Ajustes para mobile
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .not-found-container[b-ex0tgbciny] {
        padding: 1.5rem 1rem;
        min-height: 60vh;
    }

    .brujula-container[b-ex0tgbciny] {
        width: 160px;
        height: 160px;
    }

    .not-found-secondary-links[b-ex0tgbciny] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .btn-secondary-404[b-ex0tgbciny] {
        width: 100%;
        justify-content: center;
    }
}
/* /Componentes/Shared/UnderConstruccion.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * UnderConstruccion.razor.css — Página de sección en construcción
 * ──────────────────────────────────────────────────────────────────────
 * Replica visual de UnderConstructionView.tsx (pagina_muestra)
 *
 * Layout original React:
 *   • Torre SVG  → viewBox 320×300, max-width 100%, centrada
 *   • Animales   → position absolute, left/right 5%, tamaño natural
 *   • Contenido  → max-w-lg (32rem), z-10, centrado
 *   • Fondo      → #FAFAF9 + dot-pattern 0.03 opacidad
 *
 * Breakpoints (Blazor-specific — el original no tiene):
 *   ≥ 1200px : animales visibles, ~280px
 *   ≥ 1024px : animales visibles, ~200px
 *   < 1024px : animales ocultos (pantalla chica = saturan)
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Contenedor raíz ─────────────────────────────────────────────── */
.uc-root[b-xvt9oyb8uu] {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem;
    background-color: #FAFAF9;
    overflow: hidden;
}

/* ── Patrón de puntos ────────────────────────────────────────────── */
.uc-dot-bg[b-xvt9oyb8uu] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.03;
    background-image: radial-gradient(#37474F 0.6px, transparent 0.6px);
    background-size: 24px 24px;
    z-index: 0;
}

/* ── Animales flotantes ──────────────────────────────────────────── */
.uc-animals[b-xvt9oyb8uu] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
    /* Ocultos por defecto; se muestran en pantallas grandes */
    display: none;
}

.uc-animal[b-xvt9oyb8uu] {
    position: absolute;
}

.uc-animal img[b-xvt9oyb8uu] {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    animation: uc-fadein-b-xvt9oyb8uu 0.8s ease forwards;
}

/* Leopard: izquierda — arriba */
.uc-animal--leopard[b-xvt9oyb8uu] {
    left: 5%;
    top: 30%;
    width: 580px;
}
.uc-animal--leopard img[b-xvt9oyb8uu] {
    animation-delay: 1.0s;
    animation-name: uc-fadein-left-b-xvt9oyb8uu, uc-float-fast-b-xvt9oyb8uu;
    animation-duration: 0.8s, 5.5s;
    animation-fill-mode: forwards, none;
    animation-iteration-count: 1, infinite;
    animation-timing-function: ease, ease-in-out;
}

/* Stingray: izquierda — abajo (debajo de leopard) */
.uc-animal--stingray[b-xvt9oyb8uu] {
    left: 9%;
    top: 1%;
    width: 580px;
}
.uc-animal--stingray img[b-xvt9oyb8uu] {
    animation-delay: 1.2s;
    animation-name: uc-fadein-left-b-xvt9oyb8uu, uc-float-slow-b-xvt9oyb8uu;
    animation-duration: 0.8s, 7s;
    animation-fill-mode: forwards, none;
    animation-iteration-count: 1, infinite;
    animation-timing-function: ease, ease-in-out;
}

/* Margay: derecha — arriba (vértice superior del triángulo) */
.uc-animal--margay[b-xvt9oyb8uu] {
    right: 7%;
    top: 8%;
    width: 200px;
}
.uc-animal--margay img[b-xvt9oyb8uu] {
    animation-delay: 1.4s;
    animation-name: uc-fadein-right-b-xvt9oyb8uu, uc-float-fast-b-xvt9oyb8uu;
    animation-duration: 0.8s, 6s;
    animation-fill-mode: forwards, none;
    animation-iteration-count: 1, infinite;
    animation-timing-function: ease, ease-in-out;
}

/* Tanuki: derecha — abajo izquierda del triángulo */
.uc-animal--tanuki[b-xvt9oyb8uu] {
    right: 20%;
    top: 30%;
    width: 210px;
}
.uc-animal--tanuki img[b-xvt9oyb8uu] {
    animation-delay: 1.6s;
    animation-name: uc-fadein-right-b-xvt9oyb8uu, uc-float-slow-b-xvt9oyb8uu;
    animation-duration: 0.8s, 7.5s;
    animation-fill-mode: forwards, none;
    animation-iteration-count: 1, infinite;
    animation-timing-function: ease, ease-in-out;
}

/* Coati: derecha — abajo derecha del triángulo */
.uc-animal--coati[b-xvt9oyb8uu] {
    right: 6%;
    top: 45%;
    width: 2000px;
}
.uc-animal--coati img[b-xvt9oyb8uu] {
    animation-delay: 1.8s;
    animation-name: uc-fadein-right-b-xvt9oyb8uu, uc-float-fast-b-xvt9oyb8uu;
    animation-duration: 0.8s, 6.5s;
    animation-fill-mode: forwards, none;
    animation-iteration-count: 1, infinite;
    animation-timing-function: ease, ease-in-out;
}

/* Desktop (≥1024px): mostrar animales */
@media (min-width: 1024px) {
    .uc-animals[b-xvt9oyb8uu] {
        display: block;
    }
}

/* Large desktop (≥1200px): animales más grandes */
@media (min-width: 1200px) {
    .uc-animal--leopard[b-xvt9oyb8uu]  { width: 480px; }
    .uc-animal--stingray[b-xvt9oyb8uu] { width: 440px; }
    .uc-animal--margay[b-xvt9oyb8uu]   { width: 240px; }
    .uc-animal--tanuki[b-xvt9oyb8uu]   { width: 240px; }
    .uc-animal--coati[b-xvt9oyb8uu]    { width: 240px; }
}

/* Extra-large (≥1600px): tamaño completo */
@media (min-width: 1600px) {
    .uc-animal--leopard[b-xvt9oyb8uu]  { width: 580px; }
    .uc-animal--stingray[b-xvt9oyb8uu] { width: 540px; }
    .uc-animal--margay[b-xvt9oyb8uu]   { width: 290px; }
    .uc-animal--tanuki[b-xvt9oyb8uu]   { width: 290px; }
    .uc-animal--coati[b-xvt9oyb8uu]    { width: 290px; }
}

/* ── Contenido central ───────────────────────────────────────────── */
.uc-content[b-xvt9oyb8uu] {
    position: relative;
    z-index: 2;
    max-width: 32rem;           /* max-w-lg en Tailwind = 512px */
    width: 100%;
    text-align: center;
}

/* ── Torre SVG ───────────────────────────────────────────────────── */
.uc-tower-wrap[b-xvt9oyb8uu] {
    animation: uc-slidein-b-xvt9oyb8uu 0.6s ease 0.15s both;
}

.uc-tower-svg[b-xvt9oyb8uu] {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 440px;
    height: auto;
}

/* ── Texto ───────────────────────────────────────────────────────── */
.uc-title[b-xvt9oyb8uu] {
    font-family: 'Bitter', Georgia, serif;
    font-size: clamp(1.4rem, 4vw, 2rem);
    color: #37474F;
    margin: 2rem 0 1rem;        /* React: mt-8 mb-4 */
    animation: uc-slidein-b-xvt9oyb8uu 0.5s ease 0.4s both;
}

.uc-subtitle[b-xvt9oyb8uu] {
    font-size: 0.95rem;
    line-height: 1.65;
    color: rgba(55, 74, 79, 0.5);
    max-width: 28rem;           /* React: max-w-md = 28rem */
    margin: 0 auto 2.5rem;     /* React: mb-10 */
    animation: uc-slidein-b-xvt9oyb8uu 0.5s ease 0.55s both;
}

/* ── Divisor ─────────────────────────────────────────────────────── */
.uc-divider[b-xvt9oyb8uu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 2rem;        /* React: mb-8 */
    animation: uc-scalein-b-xvt9oyb8uu 0.4s ease 0.65s both;
}

.uc-divider__line[b-xvt9oyb8uu] {
    width: 2rem;                /* React: w-8 */
    height: 1px;                /* React: h-px */
    background-color: rgba(46, 125, 50, 0.2);
}

.uc-divider__dot[b-xvt9oyb8uu] {
    width: 0.5rem;              /* React: w-2 */
    height: 0.5rem;             /* React: h-2 */
    border-radius: 50%;
    background-color: rgba(46, 125, 50, 0.15);
}

/* ── Botón volver ────────────────────────────────────────────────── */
.uc-back-btn[b-xvt9oyb8uu] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;              /* React: gap-2.5 */
    background-color: #2E7D32;
    color: #fff;
    border: none;
    border-radius: 0.75rem;    /* React: rounded-xl = 0.75rem */
    padding: 0.875rem 1.75rem; /* React: py-3.5 px-7 */
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(46, 125, 50, 0.25);
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.15s;
    animation: uc-slidein-b-xvt9oyb8uu 0.4s ease 0.75s both;
}

.uc-back-btn:hover[b-xvt9oyb8uu] {
    background-color: #1B5E20;
    box-shadow: 0 6px 20px rgba(46, 125, 50, 0.35);
    transform: scale(1.03);    /* React: whileHover scale 1.03 */
    color: #fff;
    text-decoration: none;
}

.uc-back-btn:active[b-xvt9oyb8uu] {
    transform: scale(0.97);    /* React: whileTap scale 0.97 */
}

/* ── Footer label ────────────────────────────────────────────────── */
.uc-footer-label[b-xvt9oyb8uu] {
    margin-top: 2rem;           /* React: mt-8 */
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(55, 74, 79, 0.2);
    animation: uc-fadein-b-xvt9oyb8uu 0.3s ease 1.0s both;
}

/* ════════════════════════════════════════════════════════════════════
 * ANIMACIONES
 * ════════════════════════════════════════════════════════════════════ */

@keyframes uc-fadein-b-xvt9oyb8uu {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes uc-slidein-b-xvt9oyb8uu {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes uc-scalein-b-xvt9oyb8uu {
    from { opacity: 0; transform: scaleX(0); }
    to   { opacity: 1; transform: scaleX(1); }
}

@keyframes uc-fadein-left-b-xvt9oyb8uu {
    from { opacity: 0; transform: translateX(-30px) scale(0.9); }
    to   { opacity: 1; transform: translateX(0)    scale(1);   }
}

@keyframes uc-fadein-right-b-xvt9oyb8uu {
    from { opacity: 0; transform: translateX(30px) scale(0.9); }
    to   { opacity: 1; transform: translateX(0)    scale(1);   }
}

@keyframes uc-float-slow-b-xvt9oyb8uu {
    0%, 100% { transform: translateY(0)   rotate(0deg); }
    25%       { transform: translateY(-10px) rotate(-2deg); }
    75%       { transform: translateY(-4px)  rotate(2deg); }
}

@keyframes uc-float-fast-b-xvt9oyb8uu {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-7px); }
}
/* /Pages/Autorizacion/Login.razor.rz.scp.css */
/*
    Login.razor.css — Los estilos de esta página están en wwwroot/css/auth.css
    (compartidos con Recuperar.razor y Registro.razor).
    Los estilos del banner de verificación son exclusivos de Login.
*/

/* ── Banner de cuenta no verificada ─────────────────────────── */
.login-verificacion-banner[b-1b4n70v4yk] {
    display: flex;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    background: #FFF8E1;
    border: 1.5px solid #FFE082;
    border-radius: 0.75rem;
    margin-bottom: 1.25rem;
    animation: lpFadeUp-b-1b4n70v4yk 0.35s ease-out both;
}

.login-verificacion-icono[b-1b4n70v4yk] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 0.125rem;
    font-size: 1.25rem;
    color: #F9A825;
}

.login-verificacion-contenido[b-1b4n70v4yk] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.login-verificacion-titulo[b-1b4n70v4yk] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #5D4037;
    margin: 0;
    line-height: 1.3;
}

.login-verificacion-texto[b-1b4n70v4yk] {
    font-size: 0.8125rem;
    color: #795548;
    margin: 0;
    line-height: 1.5;
}

.login-verificacion-btn[b-1b4n70v4yk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #FFFFFF;
    background: #F9A825;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.18s, box-shadow 0.18s;
    font-family: inherit;
    align-self: flex-start;
}

.login-verificacion-btn:hover:not(:disabled)[b-1b4n70v4yk] {
    background: #F57F17;
    box-shadow: 0 2px 8px rgba(249, 168, 37, 0.35);
}

.login-verificacion-btn:disabled[b-1b4n70v4yk] {
    opacity: 0.7;
    cursor: not-allowed;
}

/*
    Login.razor.css — Los estilos de esta página están en wwwroot/css/auth.css.
    =============================================================================
    He replicado el diseño split-screen de LoginPage.tsx:
    • Columna izquierda (≥ 992px): imagen de fondo con overlay verde.
    • Columna derecha: formulario centrado sobre fondo crema (#F9F7F2).
    • Inputs con ícono prefijo, sin sombra excesiva, border-radius 12px.
    • Botón primario verde de ancho completo.
    =============================================================================
*/

/* ── Contenedor raíz: pantalla dividida ─────────────────────── */
.lp-root[b-1b4n70v4yk] {
    display: flex;
    min-height: 100vh;
    background: #F9F7F2;
}

/* ── Columna izquierda: imagen ──────────────────────────────── */
.lp-image-col[b-1b4n70v4yk] {
    display: none; /* oculto en móvil */
    position: relative;
    overflow: hidden;
}

@media (min-width: 992px) {
    .lp-image-col[b-1b4n70v4yk] {
        display: flex;
        width: 50%;
        flex-direction: column;
    }
}

.lp-image-bg[b-1b4n70v4yk] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay verde degradado (verde oscuro → verde medio → gris pizarra) */
.lp-image-overlay[b-1b4n70v4yk] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(27, 94, 32, 0.82) 0%,
        rgba(46, 125, 50, 0.62) 55%,
        rgba(55, 71, 79, 0.72) 100%
    );
}

/* Texto flotante en la parte inferior de la imagen */
.lp-image-content[b-1b4n70v4yk] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: 3rem;
}

.lp-image-badge[b-1b4n70v4yk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #A5D6A7;
    margin-bottom: 1rem;
}

.lp-badge-icon[b-1b4n70v4yk] {
    font-size: 0.875rem;
}

.lp-image-title[b-1b4n70v4yk] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 0.875rem;
    line-height: 1.2;
}

.lp-image-desc[b-1b4n70v4yk] {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.62);
    max-width: 26rem;
    margin: 0;
}

/* ── Columna derecha: formulario ────────────────────────────── */
.lp-form-col[b-1b4n70v4yk] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    background: #F9F7F2;
}

.lp-form-wrap[b-1b4n70v4yk] {
    width: 100%;
    max-width: 26rem;
    animation: lpFadeUp-b-1b4n70v4yk 0.5s ease-out both;
}

@keyframes lpFadeUp-b-1b4n70v4yk {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Branding móvil (oculto en desktop) ─────────────────────── */
.lp-mobile-brand[b-1b4n70v4yk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #3E7B27;
    margin-bottom: 1.5rem;
}

@media (min-width: 992px) {
    .lp-mobile-brand[b-1b4n70v4yk] {
        display: none;
    }
}

/* ── Título y subtítulo ─────────────────────────────────────── */
.lp-title[b-1b4n70v4yk] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: clamp(1.6rem, 4vw, 2rem);
    font-weight: 700;
    color: #1A1A1A;
    margin: 0 0 0.375rem;
    line-height: 1.2;
}

.lp-subtitle[b-1b4n70v4yk] {
    font-size: 0.875rem;
    color: #888;
    margin: 0 0 2rem;
    line-height: 1.5;
}

/* ── Formulario ─────────────────────────────────────────────── */
.lp-form[b-1b4n70v4yk] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Campo individual ───────────────────────────────────────── */
.lp-field[b-1b4n70v4yk] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.lp-label[b-1b4n70v4yk] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #2a2a2a;
}

/* Wrapper del input + ícono */
.lp-input-wrap[b-1b4n70v4yk] {
    position: relative;
    display: flex;
    align-items: center;
}

.lp-input-icon[b-1b4n70v4yk] {
    position: absolute;
    left: 0.875rem;
    color: #A0A0A0;
    font-size: 0.8125rem;
    pointer-events: none;
    z-index: 1;
}

.lp-input[b-1b4n70v4yk] {
    width: 100%;
    padding: 0.6875rem 1rem 0.6875rem 2.5rem;
    font-size: 0.9rem;
    color: #1a1a1a;
    background: #F0EFEB;
    border: 1.5px solid #DEDBD6;
    border-radius: 0.75rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

/* Input de contraseña: espacio extra a la derecha para el ojo */
.lp-input--password[b-1b4n70v4yk] {
    padding-right: 2.75rem;
}

.lp-input:focus[b-1b4n70v4yk] {
    border-color: #3E7B27;
    box-shadow: 0 0 0 3px rgba(62, 123, 39, 0.12);
    background: #FFFFFF;
}

.lp-input[b-1b4n70v4yk]::placeholder {
    color: #BCBAB5;
}

/* Botón toggle ojo */
.lp-eye-btn[b-1b4n70v4yk] {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    padding: 0.25rem;
    color: #A0A0A0;
    cursor: pointer;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}

.lp-eye-btn:hover[b-1b4n70v4yk] {
    color: #555;
    background: rgba(0, 0, 0, 0.05);
}

/* ── Mensaje de validación ──────────────────────────────────── */
.lp-validation[b-1b4n70v4yk] {
    font-size: 0.75rem !important;
    color: #C62828 !important;
    margin: 0;
    line-height: 1.4;
}

/* ── Botón de submit ────────────────────────────────────────── */
.lp-submit-btn[b-1b4n70v4yk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.8125rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #FFFFFF;
    background: #3E7B27;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    margin-top: 0.5rem;
    transition: background 0.18s, transform 0.12s, box-shadow 0.18s;
    font-family: inherit;
}

.lp-submit-btn:hover[b-1b4n70v4yk] {
    background: #2E5D1C;
    box-shadow: 0 4px 16px rgba(62, 123, 39, 0.28);
}

.lp-submit-btn:active[b-1b4n70v4yk] {
    transform: scale(0.98);
}

/* ── Enlaces auxiliares ─────────────────────────────────────── */
.lp-links[b-1b4n70v4yk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.lp-link[b-1b4n70v4yk] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #1565C0;
    text-decoration: none;
    transition: opacity 0.15s, text-decoration 0.15s;
}

.lp-link:hover[b-1b4n70v4yk] {
    text-decoration: underline;
    opacity: 0.85;
}

.lp-link--muted[b-1b4n70v4yk] {
    color: #888;
}

.lp-link--muted:hover[b-1b4n70v4yk] {
    color: #555;
}
/* /Pages/BH/Index.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * Index.razor.css — Página "Banderín de Honor" (/BH)
 * ──────────────────────────────────────────────────────────────────────
 * CSS Isolation de Blazor: aplica exclusivamente a Pages/BH/Index.razor.
 * Contiene: layout de página, hero, secciones con accent-bar, grid de
 * UnitCards (1 → 2 → 3 → 6 columnas) y sección de Copas Históricas.
 *
 * Secciones:
 *   0. Página contenedora y sistema de spacing
 *   1. Sección con max-width centrado
 *   2. Header de sección (barra de acento + título)
 *   3. Grid de UnitCards
 *   4. Copas Históricas
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Página contenedora + spacing system ───────────────────────────────── */
.bh-page[b-6j2f429u9j] {
    --bh-section-gap: 4rem;
    --bh-section-padding: 1rem;
    --bh-container-max-width: 80rem;

    background-color: var(--background, #F9F7F2);
    min-height: 100vh;
}

@media (min-width: 640px) {
    .bh-page[b-6j2f429u9j] {
        --bh-section-padding: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .bh-page[b-6j2f429u9j] {
        --bh-section-padding: 2rem;
    }
}

@media (max-width: 767px) {
    .bh-page[b-6j2f429u9j] {
        --bh-section-gap: 2.5rem;
    }
}

/* ── Sección con max-width centrado ───────────────────────────────────── */
.bh-section[b-6j2f429u9j] {
    max-width: var(--bh-container-max-width, 80rem);
    margin: 0 auto;
    padding: var(--bh-section-gap, 4rem) var(--bh-section-padding, 1rem);
}

/* ── Header de sección: barra de acento + título ──────────────────────── */
.bh-section-header[b-6j2f429u9j] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

/* Barra vertical verde (w-1.5 h-8 rounded-full) */
.bh-section-accent[b-6j2f429u9j] {
    width: 0.375rem;
    height: 2rem;
    border-radius: 9999px;
    background-color: #2E7D32;
    flex-shrink: 0;
}

.bh-section-title[b-6j2f429u9j] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    color: #37474F;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

/* Descripción de sección */
.bh-section-desc[b-6j2f429u9j] {
    color: rgba(55, 71, 79, 0.50);
    font-size: 0.875rem;
    max-width: 42rem;
    margin: 0 0 2.5rem 1.625rem;
    padding-left: 0.125rem;
    line-height: 1.625;
}

/* ── Grid de UnitCards ─────────────────────────────────────────────────── */
.bh-units-grid[b-6j2f429u9j] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .bh-units-grid[b-6j2f429u9j] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .bh-units-grid[b-6j2f429u9j] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .bh-units-grid[b-6j2f429u9j] {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
 * Sección 5: Copas Históricas
 * ═══════════════════════════════════════════════════════════════════════ */
.bh-cups-section[b-6j2f429u9j] {
    max-width: var(--bh-container-max-width, 80rem);
    margin: 0 auto;
    padding: var(--bh-section-gap, 4rem) var(--bh-section-padding, 1rem);
    padding-top: 0;
}

/* Barra de acento marrón (café scout, w-1.5 h-8) */
.bh-cups-accent[b-6j2f429u9j] {
    width: 0.375rem;
    height: 2rem;
    border-radius: 9999px;
    background-color: #8D6E63;
    flex-shrink: 0;
}

.bh-cups-title[b-6j2f429u9j] {
    font-family: var(--font-serif, 'Bitter', 'Georgia', serif);
    color: #37474F;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
}

.bh-cups-desc[b-6j2f429u9j] {
    color: rgba(55, 71, 79, 0.40);
    font-size: 0.875rem;
    max-width: 36rem;
    margin: 0 0 2rem 1.625rem;
    padding-left: 0.125rem;
    line-height: 1.625;
}

/* Grid de HistoricCupCards (1 → 2 columnas en md+) */
.bh-cups-grid[b-6j2f429u9j] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .bh-cups-grid[b-6j2f429u9j] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Pages/BH/Visualizar.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * Visualizar.razor.css — Scoreboard / Banderín de Honor
 * ──────────────────────────────────────────────────────────────────────
 * Réplica del layout de ScoreboardPage.tsx: barra superior, título,
 * fila de información, tabla de puntajes, historial y formulario CRUD.
 *
 * Secciones:
 *   0. Fondo de página y contenedor centrado
 *   1. Barra superior (botón Volver)
 *   2. Navegación anterior / siguiente BH
 *   3. Heading (título + unidad)
 *   4. Loading y estado de error
 *   5. Toolbar Hormiga
 *   6. Info del BH seleccionado
 *   7. CTA Estadísticas Históricas
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Fondo de página ──────────────────────────────────────────────────── */
.sb-page[b-3go37pw8bq] {
    min-height: 100vh;
    background-color: #F8F5F0;
    overflow-x: hidden;
}

/* ── Container centrado ───────────────────────────────────────────────── */
.sb-container[b-3go37pw8bq] {
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .sb-container[b-3go37pw8bq] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .sb-container[b-3go37pw8bq] {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* ── Top bar: botón Volver ────────────────────────────────────────────── */
.sb-topbar[b-3go37pw8bq] {
    padding-top: 1.25rem;
    padding-bottom: 0.5rem;
}

.sb-back-btn[b-3go37pw8bq] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(55, 71, 79, 0.50);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0;
    transition: color 0.2s ease;
}

.sb-back-btn:hover[b-3go37pw8bq] {
    color: #2E7D32;
}

.sb-back-btn i[b-3go37pw8bq] {
    font-size: 0.9rem;
}

/* ── Navegación anterior / siguiente BH ──────────────────────────────── */
.sb-nav[b-3go37pw8bq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.sb-nav-btn[b-3go37pw8bq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid rgba(55, 71, 79, 0.2);
    border-radius: 0.5rem;
    cursor: pointer;
    color: rgba(55, 71, 79, 0.65);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.4rem 0.875rem;
    transition: all 0.2s ease;
}

.sb-nav-btn:hover[b-3go37pw8bq] {
    color: #2E7D32;
    border-color: rgba(46, 125, 50, 0.35);
    background-color: rgba(46, 125, 50, 0.05);
}

.sb-nav-btn i[b-3go37pw8bq] {
    font-size: 0.75rem;
}

.sb-nav-label[b-3go37pw8bq] {
    line-height: 1;
}

/* ── Heading con icono + título + nombre de unidad ───────────────── */
.sb-heading[b-3go37pw8bq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem 1rem 0.75rem;
    border-radius: 0.75rem;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.sb-heading--clickable[b-3go37pw8bq] {
    cursor: pointer;
}

.sb-heading--clickable:hover[b-3go37pw8bq] {
    background-color: rgba(46, 125, 50, 0.04);
    box-shadow: 0 1px 6px rgba(46, 125, 50, 0.10);
}

.sb-heading--clickable:active[b-3go37pw8bq] {
    background-color: rgba(46, 125, 50, 0.08);
}

.sb-heading-icon[b-3go37pw8bq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    background: linear-gradient(135deg, #1B5E20, #2E7D32);
    color: #fff;
    border-radius: 0.625rem;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    box-shadow: 0 2px 8px rgba(46,125,50,0.25);
}

.sb-title[b-3go37pw8bq] {
    text-align: center;
    color: #263238;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
}

.sb-heading-unit[b-3go37pw8bq] {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(55, 71, 79, 0.6);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.sb-heading-line[b-3go37pw8bq] {
    width: 3.5rem;
    height: 3px;
    background: linear-gradient(90deg, #2E7D32, #66BB6A);
    border-radius: 2px;
    margin-top: 0.375rem;
}

/* ── Loading ──────────────────────────────────────────────────────────── */
.sb-loading[b-3go37pw8bq] {
    text-align: center;
    padding: 3rem 0;
}

.sb-loading-text[b-3go37pw8bq] {
    margin-top: 0.75rem;
    color: rgba(55, 71, 79, 0.50);
    font-size: 0.85rem;
    font-weight: 500;
}

/* ── Error state (ruta inválida / no encontrado) ─────────────────────── */
.sb-error-state[b-3go37pw8bq] {
    text-align: center;
    padding: 4rem 1.5rem;
    max-width: 480px;
    margin: 0 auto;
}

.sb-error-icon[b-3go37pw8bq] {
    font-size: 3rem;
    color: #d32f2f;
    margin-bottom: 1rem;
}

.sb-error-title[b-3go37pw8bq] {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: #37474F;
    margin-bottom: 0.5rem;
}

.sb-error-message[b-3go37pw8bq] {
    font-size: 0.95rem;
    color: rgba(55, 71, 79, 0.7);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.sb-error-btn[b-3go37pw8bq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: #2E7D32;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.sb-error-btn:hover[b-3go37pw8bq] {
    background: #1B5E20;
}

/* ── Toolbar Hormiga ──────────────────────────────────────────────────── */
.sb-hormiga-toolbar[b-3go37pw8bq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.sb-hormiga-btn[b-3go37pw8bq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    transition: all 0.2s ease;
}

.sb-hormiga-btn--primary[b-3go37pw8bq] {
    background-color: #2E7D32;
    color: #fff;
}

.sb-hormiga-btn--primary:hover[b-3go37pw8bq] {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10);
}

.sb-hormiga-btn--outline[b-3go37pw8bq] {
    background-color: rgba(46, 125, 50, 0.05);
    color: #2E7D32;
    border: 2px solid #2E7D32;
}

.sb-hormiga-btn--outline:hover[b-3go37pw8bq] {
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.08);
}

.sb-hormiga-badge[b-3go37pw8bq] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    background-color: rgba(46, 125, 50, 0.08);
    color: #2E7D32;
}

.sb-hormiga-badge i[b-3go37pw8bq] {
    font-size: 0.7rem;
}

.sb-hormiga-badge span[b-3go37pw8bq] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── Info del BH seleccionado ─────────────────────────────────────────── */
.sb-info[b-3go37pw8bq] {
    margin-bottom: 0.75rem;
}

.sb-info-row[b-3go37pw8bq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.sb-info-unit[b-3go37pw8bq] {
    color: rgba(55, 71, 79, 0.40);
    font-size: 0.8rem;
    font-weight: 500;
}

.sb-info-sep[b-3go37pw8bq] {
    color: #ECE6D8;
    font-size: 0.9rem;
}

.sb-info-year[b-3go37pw8bq] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: rgba(55, 71, 79, 0.40);
    font-size: 0.75rem;
    font-weight: 500;
}

.sb-info-year i[b-3go37pw8bq] {
    font-size: 0.7rem;
}

.sb-info-meta[b-3go37pw8bq] {
    color: rgba(55, 71, 79, 0.35);
    font-size: 0.75rem;
    font-weight: 500;
}

.sb-info-badge[b-3go37pw8bq] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    background-color: #E8F5E9;
    color: #2E7D32;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sb-info-badge i[b-3go37pw8bq] {
    font-size: 0.65rem;
}

.sb-info-badge--closed[b-3go37pw8bq] {
    background-color: #ECEFF1;
    color: #546E7A;
}

/* ── CTA Estadísticas Históricas ─────────────────────────────────────────────── */
.sb-stats-cta[b-3go37pw8bq] {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.sb-stats-link[b-3go37pw8bq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #2E7D32;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.sb-stats-link:hover[b-3go37pw8bq] {
    color: #1B5E20;
}

.sb-stats-chevron[b-3go37pw8bq] {
    font-size: 0.75rem;
    opacity: 0.50;
    transition: transform 0.2s ease;
}

.sb-stats-link:hover .sb-stats-chevron[b-3go37pw8bq] {
    transform: translateX(2px);
}

/* ── Botones de acción debajo de la tabla ─────────────────────────────── */
.sb-below-table-actions[b-3go37pw8bq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 1.5rem 0;
    flex-wrap: wrap;
}

.sb-action-btn[b-3go37pw8bq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 2px solid;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    background: transparent;
    transition: all 0.2s ease;
}

.sb-action-btn--red[b-3go37pw8bq] {
    color: #C62828;
    border-color: #C62828;
    background-color: rgba(198, 40, 40, 0.04);
}

.sb-action-btn--red:hover[b-3go37pw8bq] {
    box-shadow: 0 2px 4px -1px rgba(198, 40, 40, 0.20);
    background-color: rgba(198, 40, 40, 0.08);
}

.sb-action-btn--blue[b-3go37pw8bq] {
    color: #1565C0;
    border-color: #1565C0;
    background-color: rgba(21, 101, 192, 0.04);
}

.sb-action-btn--blue:hover[b-3go37pw8bq] {
    box-shadow: 0 2px 4px -1px rgba(21, 101, 192, 0.20);
    background-color: rgba(21, 101, 192, 0.08);
}


/* /Pages/Biblioteca/Categoria.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Biblioteca/Categoria.razor.css — Estilos página de categoría
   ═══════════════════════════════════════════════════════════════ */

/* ────────────────── PÁGINA ────────────────── */
.bcat-page[b-dc1bgp9m8c] {
    background: #FAFAF9;
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
}

.bcat-container[b-dc1bgp9m8c] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
}

/* ────────────────── HEADER CON PATRÓN TOPO ────────────────── */
.bcat-header[b-dc1bgp9m8c] {
    position: relative;
    background: linear-gradient(135deg, #2E4A1E 0%, #1B3A10 60%, #4A3728 100%);
    padding: 2rem 1.5rem 2.5rem;
    overflow: hidden;
    color: #fff;
}

.bcat-topo[b-dc1bgp9m8c] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.bcat-header-content[b-dc1bgp9m8c] {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}

/* ────────────────── TÍTULO / ÍCONO ────────────────── */
.bcat-header-row[b-dc1bgp9m8c] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.bcat-cat-icon-wrap[b-dc1bgp9m8c] {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bcat-cat-icon[b-dc1bgp9m8c] {
    font-size: 1.4rem;
    color: #fff;
}

.bcat-title[b-dc1bgp9m8c] {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}

.bcat-subtitle[b-dc1bgp9m8c] {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.75);
    margin: 0.2rem 0 0;
}

/* ────────────────── LOADING / ERROR ────────────────── */
.bcat-loading[b-dc1bgp9m8c], .bcat-error[b-dc1bgp9m8c] {
    text-align: center;
    padding: 4rem 1rem;
    color: #666;
}

.bcat-spinner[b-dc1bgp9m8c] {
    width: 36px;
    height: 36px;
    border: 4px solid #E0E0E0;
    border-top-color: #2E7D32;
    border-radius: 50%;
    animation: bcat-spin-b-dc1bgp9m8c 0.7s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes bcat-spin-b-dc1bgp9m8c { to { transform: rotate(360deg); } }

.bcat-btn-retry[b-dc1bgp9m8c] {
    background: #2E7D32;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1.5rem;
    cursor: pointer;
    margin-top: 1rem;
    font-weight: 600;
    transition: background 0.15s;
}

.bcat-btn-retry:hover[b-dc1bgp9m8c] { background: #1B5E20; }

/* ────────────────── BUSCADOR ────────────────── */
.bcat-search-row[b-dc1bgp9m8c] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 0 0.5rem;
    flex-wrap: wrap;
}

.bcat-search-wrap[b-dc1bgp9m8c] {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.bcat-search-icon[b-dc1bgp9m8c] {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
}

.bcat-search-input[b-dc1bgp9m8c] {
    width: 100%;
    padding: 0.6rem 2.5rem 0.6rem 2.5rem;
    border-radius: 8px;
    border: 1.5px solid #D1D5DB;
    background: #fff;
    font-size: 0.9rem;
    color: #1a1a1a;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.bcat-search-input:focus[b-dc1bgp9m8c] { border-color: #2E7D32; box-shadow: 0 0 0 3px rgba(46,125,50,0.1); }

.bcat-search-clear[b-dc1bgp9m8c] {
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.2rem;
}

.bcat-count-badge[b-dc1bgp9m8c] {
    background: #F3F4F6;
    color: #374151;
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid #E5E7EB;
}

/* ────────────────── FILTRO A-Z ────────────────── */
.bcat-az-bar[b-dc1bgp9m8c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.75rem 0 1rem;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 1rem;
}

.bcat-az-btn[b-dc1bgp9m8c] {
    min-width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1.5px solid #DDD7CD;
    background: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    color: #5A4A38;
    padding: 0 4px;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.bcat-az-btn:hover:not(.bcat-az-disabled)[b-dc1bgp9m8c] {
    background: #2E7D32;
    border-color: #2E7D32;
    color: #fff;
}

.bcat-az-active[b-dc1bgp9m8c] {
    background: #2E7D32 !important;
    border-color: #2E7D32 !important;
    color: #fff !important;
}

.bcat-az-disabled[b-dc1bgp9m8c] {
    opacity: 0.3;
    cursor: default;
}

/* ────────────────── LISTA ARCHIVOS ────────────────── */
/* Contenedor externo de la lista (tarjeta blanca con borde) */
.bcat-file-list-wrap[b-dc1bgp9m8c] {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.bcat-file-list[b-dc1bgp9m8c] {
    display: flex;
    flex-direction: column;
}

.bcat-file-row[b-dc1bgp9m8c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #fff;
    border-bottom: 1px solid #F3F4F6;
    padding: 0.85rem 1.25rem;
    transition: background 0.12s;
}

.bcat-file-row:last-child[b-dc1bgp9m8c] { border-bottom: none; }

.bcat-file-row:hover[b-dc1bgp9m8c] { background: rgba(46,125,50,0.03); }

.bcat-file-row--odd[b-dc1bgp9m8c] { background: #F9FAFB; }
.bcat-file-row--odd:hover[b-dc1bgp9m8c] { background: rgba(46,125,50,0.05); }

/* ────────────────── FILAS DE ARCHIVO — icóno en contenedor coloreado ────────────────── */
.bcat-file-left[b-dc1bgp9m8c] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.bcat-file-icon-wrap[b-dc1bgp9m8c] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bcat-icon-pdf-wrap[b-dc1bgp9m8c]  { background: rgba(220,38,38,0.08); }
.bcat-icon-link-wrap[b-dc1bgp9m8c] { background: rgba(37,99,235,0.08); }

.bcat-file-icon[b-dc1bgp9m8c] { font-size: 0.9rem; flex-shrink: 0; }
.bcat-icon-pdf[b-dc1bgp9m8c]  { color: #DC2626; }
.bcat-icon-link[b-dc1bgp9m8c] { color: #2563EB; }

.bcat-file-info[b-dc1bgp9m8c] {
    min-width: 0;
    flex: 1;
}

.bcat-file-titulo[b-dc1bgp9m8c] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bcat-file-meta-row[b-dc1bgp9m8c] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.15rem;
    flex-wrap: wrap;
}

/* Badge de idioma — usa inline style para colores dinámicos del idioma */
.bcat-lang-badge[b-dc1bgp9m8c] {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.bcat-meta[b-dc1bgp9m8c] {
    font-size: 0.73rem;
    color: #6B7280;
}

/* Botones de acción estilo React — solo .Ä btn base, no el wrapper */
.bcat-file-actions[b-dc1bgp9m8c] {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
    align-items: center;
}

.bcat-btn[b-dc1bgp9m8c] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 6px;
    padding: 0.35rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    white-space: nowrap;
}

.bcat-btn:hover[b-dc1bgp9m8c] { opacity: 0.88; }

.bcat-btn-preview[b-dc1bgp9m8c] {
    background: transparent;
    color: rgba(55,71,79,0.55);
    border: 1px solid #E5E7EB;
}

.bcat-btn-preview:hover[b-dc1bgp9m8c] {
    border-color: rgba(55,71,79,0.25);
    color: rgba(55,71,79,0.85);
}

.bcat-btn-download[b-dc1bgp9m8c] {
    background: #2E7D32;
    color: #fff;
    border: 1px solid #2E7D32;
    box-shadow: 0 1px 4px rgba(46,125,50,0.15);
}

.bcat-btn-download:hover[b-dc1bgp9m8c] { background: #256928; }

.bcat-no-disponible[b-dc1bgp9m8c] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: rgba(55,71,79,0.45);
    font-style: italic;
    white-space: nowrap;
}

.bcat-btn-visit[b-dc1bgp9m8c] {
    background: #1565C0;
    color: #fff;
    border: 1px solid #1565C0;
    box-shadow: 0 1px 4px rgba(21,101,192,0.15);
}

.bcat-btn-visit:hover[b-dc1bgp9m8c] { background: #0D47A1; }

/* ────────────────── MODAL VISTA PREVIA ────────────────── */
.bcat-modal-backdrop[b-dc1bgp9m8c] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(4px);
    animation: bcat-fadeIn-b-dc1bgp9m8c 0.2s ease;
}

@keyframes bcat-fadeIn-b-dc1bgp9m8c { from { opacity: 0; } to { opacity: 1; } }

.bcat-modal[b-dc1bgp9m8c] {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
    max-width: 900px;
    max-height: 96vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0,0,0,0.3);
    animation: bcat-slideUp-b-dc1bgp9m8c 0.25s cubic-bezier(0.22,1,0.36,1);
}

@keyframes bcat-slideUp-b-dc1bgp9m8c { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

.bcat-modal-header[b-dc1bgp9m8c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #F3F4F6;
    gap: 1rem;
}

.bcat-modal-title[b-dc1bgp9m8c] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #37474F;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    margin: 0;
}

.bcat-modal-close[b-dc1bgp9m8c] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    background: #f9fafb;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: #6B7280;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.bcat-modal-close:hover[b-dc1bgp9m8c] { background: #F3F4F6; color: #374151; }

.bcat-modal-body[b-dc1bgp9m8c] {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 300px;
}

.bcat-modal-iframe[b-dc1bgp9m8c] {
    width: 100%;
    height: 85vh;
    border: none;
    display: block;
}

.bcat-modal-nopreview[b-dc1bgp9m8c] {
    padding: 3rem 2rem;
    text-align: center;
    color: rgba(55,71,79,0.5);
    font-size: 0.88rem;
}

.bcat-modal-open-link[b-dc1bgp9m8c] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    padding: 0.5rem 1.2rem;
    background: #2E7D32;
    color: #fff;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background 0.15s;
}

.bcat-modal-open-link:hover[b-dc1bgp9m8c] { background: #256928; }

.bcat-empty[b-dc1bgp9m8c] {
    text-align: center;
    padding: 3rem 1rem;
    color: #9E8E7E;
}

.bcat-empty-icon[b-dc1bgp9m8c] {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

/* ────────────────── PAGINACIÓN ────────────────── */
.bcat-pagination[b-dc1bgp9m8c] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    padding: 1.5rem 0 0.5rem;
    flex-wrap: wrap;
}

.bcat-page-btn[b-dc1bgp9m8c] {
    min-width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1.5px solid #E5E7EB;
    background: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    padding: 0 8px;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.bcat-page-btn:hover:not(:disabled)[b-dc1bgp9m8c] {
    background: #2E7D32;
    border-color: #2E7D32;
    color: #fff;
}

.bcat-page-btn:disabled[b-dc1bgp9m8c] {
    opacity: 0.3;
    cursor: default;
}

.bcat-page-active[b-dc1bgp9m8c] {
    background: #2E7D32 !important;
    border-color: #2E7D32 !important;
    color: #fff !important;
}

.bcat-page-ellipsis[b-dc1bgp9m8c] {
    font-size: 1rem;
    color: #9E8E7E;
    padding: 0 0.2rem;
}

/* ────────────────── VOLVER ────────────────── */
.bcat-back-row[b-dc1bgp9m8c] {
    padding-top: 1.5rem;
    display: flex;
}

.bcat-back-btn[b-dc1bgp9m8c] {
    background: transparent;
    border: 1.5px solid #D1D5DB;
    border-radius: 8px;
    padding: 0.4rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 0.15s, border-color 0.15s;
}

.bcat-back-btn:hover[b-dc1bgp9m8c] {
    background: #F3F4F6;
    border-color: #9CA3AF;
}

/* ────────────────── RESPONSIVE ────────────────── */
@media (max-width: 600px) {
    .bcat-file-row[b-dc1bgp9m8c] {
        flex-direction: column;
        align-items: flex-start;
    }
    .bcat-file-left[b-dc1bgp9m8c] {
        width: 100%;
        min-width: 0;
    }
    .bcat-file-actions[b-dc1bgp9m8c] {
        width: 100%;
        justify-content: flex-start;
    }
    .bcat-az-btn[b-dc1bgp9m8c] {
        min-width: 24px;
        height: 24px;
        font-size: 0.65rem;
    }
    .bcat-title[b-dc1bgp9m8c] { font-size: 1.4rem; }
}
/* /Pages/Biblioteca/Index.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Biblioteca/Index.razor.css — Estilos Biblioteca Digital Hub
   Portable: sin dependencias externas salvo Font Awesome (íconos).
   ═══════════════════════════════════════════════════════════════ */

/* ────────────────── PÁGINA ────────────────── */
.bib-page[b-eqbcqkpu78] {
    background: #FAFAF9;
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
    color: #37474F;
}

.bib-container[b-eqbcqkpu78] {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ────────────────── HERO ────────────────── */
.bib-hero[b-eqbcqkpu78] {
    position: relative;
    height: 520px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bib-hero-img[b-eqbcqkpu78] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.bib-hero-overlay[b-eqbcqkpu78] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.48) 55%, rgba(0,0,0,0.30) 100%);
}

.bib-hero-fade[b-eqbcqkpu78] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 140px;
    background: linear-gradient(to bottom, transparent, #FAFAF9);
}

.bib-hero-content[b-eqbcqkpu78] {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding: 2rem 1.5rem;
    width: 100%;
    max-width: 1360px;
}

.bib-hero-title[b-eqbcqkpu78] {
    font-size: clamp(2.2rem, 5.5vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 24px rgba(0,0,0,0.4);
    margin: 0 0 0.5rem;
    font-family: 'Bitter', Georgia, serif;
    color: #fff;
}

.bib-hero-subtitle[b-eqbcqkpu78] {
    font-size: 1.35rem;
    color: rgba(255,255,255,0.92);
    margin: 0 0 1.8rem;
    font-style: italic;
    font-family: 'Bitter', Georgia, serif;
    letter-spacing: 0.03em;
    text-shadow: 0 1px 12px rgba(0,0,0,0.3);
}

/* ────────────────── BUSCADOR ────────────────── */
.bib-search-wrap[b-eqbcqkpu78] {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.3);
    padding: 18px 24px 18px 44px;
    max-width: 1200px;
    margin: 0 auto;
    transition: box-shadow 0.2s;
    gap: 0.75rem;
}

.bib-search-wrap:focus-within[b-eqbcqkpu78] {
    box-shadow: 0 8px 40px rgba(0,0,0,0.3), 0 0 0 2px rgba(255,255,255,0.4);
}

.bib-search-icon[b-eqbcqkpu78] {
    color: rgba(55,71,79,0.35);
    font-size: 1.25rem;
    margin-right: 1.1rem;
    flex-shrink: 0;
}

.bib-search-input[b-eqbcqkpu78] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1.2rem;
    color: #37474F;
    outline: none;
    box-sizing: border-box;
    min-width: 0;
}

.bib-search-input:placeholder[b-eqbcqkpu78] { color: rgba(55,71,79,0.35); }

.bib-search-btn[b-eqbcqkpu78] {
    flex-shrink: 0;
    background: #2E7D32;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.6rem 1.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bib-search-btn:hover:not(:disabled)[b-eqbcqkpu78] { background: #1B5E20; }
.bib-search-btn:disabled[b-eqbcqkpu78] { opacity: 0.55; cursor: not-allowed; }

.bib-search-spinner[b-eqbcqkpu78] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bib-spin-b-eqbcqkpu78 0.7s linear infinite;
}

@keyframes bib-spin-b-eqbcqkpu78 {
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .bib-search-wrap[b-eqbcqkpu78] { padding: 14px 16px; gap: 0.5rem; }
    .bib-search-input[b-eqbcqkpu78] { font-size: 1rem; }
    .bib-search-btn[b-eqbcqkpu78] { padding: 0.55rem 1rem; font-size: 0.85rem; }
}

/* ────────────────── AVISO ────────────────── */
.bib-notice[b-eqbcqkpu78] {
    background: #F3F4F6;
    border-bottom: 1px solid #E5E7EB;
    padding: 0.7rem 0;
    font-size: 0.81rem;
    color: #37474F;
}

.bib-notice .bib-container[b-eqbcqkpu78] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 500;
}

.bib-notice i[b-eqbcqkpu78] { color: #2E7D32; flex-shrink: 0; }

/* ────────────────── RESULTADOS ────────────────── */
.bib-results-section[b-eqbcqkpu78] { padding: 2.5rem 0; }

.bib-results-title[b-eqbcqkpu78] {
    font-size: 0.68rem;
    color: #2E7D32;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;
    margin: 0 0 1.5rem;
}

.bib-results-back[b-eqbcqkpu78] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.25rem;
    background: none;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 0.45rem 1rem;
    font-size: 0.82rem;
    color: rgba(55,71,79,0.65);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.bib-results-back:hover[b-eqbcqkpu78] { border-color: #2E7D32; color: #2E7D32; }

.bib-no-results[b-eqbcqkpu78] {
    text-align: center;
    padding: 5rem 1rem;
    color: rgba(55,71,79,0.35);
    font-size: 0.88rem;
    font-weight: 500;
}

.bib-results-list[b-eqbcqkpu78] {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.bib-result-row[b-eqbcqkpu78] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
    min-height: 52px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
    border-bottom: 1px solid #F3F4F6;
}

.bib-result-row:last-child[b-eqbcqkpu78] { border-bottom: none; }
.bib-result-row:hover[b-eqbcqkpu78] { background: rgba(46,125,50,0.03); }
.bib-result-row:nth-child(even)[b-eqbcqkpu78] { background: #F9FAFB; }
.bib-result-row:nth-child(even):hover[b-eqbcqkpu78] { background: rgba(46,125,50,0.03); }

.bib-icon-pdf[b-eqbcqkpu78] { color: #DC2626; }
.bib-icon-link[b-eqbcqkpu78] { color: #2563EB; }

.bib-result-titulo[b-eqbcqkpu78] {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 600;
    color: #37474F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bib-lang-badge[b-eqbcqkpu78] {
    border-radius: 999px;
    padding: 0.08rem 0.55rem;
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    background: #FEF3C7;
    color: #92400E;
}

.bib-result-meta[b-eqbcqkpu78] {
    font-size: 0.72rem;
    color: rgba(55,71,79,0.25);
    white-space: nowrap;
}

/* ────────────────── LOADING / ERROR ────────────────── */
.bib-loading[b-eqbcqkpu78], .bib-error[b-eqbcqkpu78] {
    text-align: center;
    padding: 4rem 1rem;
    color: #666;
}

.bib-spinner[b-eqbcqkpu78] {
    width: 44px;
    height: 44px;
    border: 4px solid #E0E0E0;
    border-top-color: #2E7D32;
    border-radius: 50%;
    animation: bib-spin-b-eqbcqkpu78 0.75s linear infinite;
    margin: 0 auto 1.25rem;
}

@keyframes bib-spin-b-eqbcqkpu78 { to { transform: rotate(360deg); } }

.bib-retry-btn[b-eqbcqkpu78] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #2E7D32;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.4rem;
    cursor: pointer;
    margin-top: 1.25rem;
    font-weight: 600;
    font-size: 0.85rem;
    transition: background 0.15s;
}

.bib-retry-btn:hover[b-eqbcqkpu78] { background: #256928; }

/* ────────────────── GRUPO 1 — BANDA DOCUMENTOS ────────────────── */
.bib-band-section[b-eqbcqkpu78] {
    background: #F0EDE6;
    padding: 3rem 0 2.5rem;
}

.bib-band-title[b-eqbcqkpu78] {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #37474F;
    letter-spacing: -0.01em;
    margin: 0 0 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bib-band-title i[b-eqbcqkpu78] { color: #2E7D32; font-size: 1.1rem; }

.bib-band-subtitle[b-eqbcqkpu78] {
    font-size: 0.79rem;
    color: rgba(55,71,79,0.5);
    margin: 0 0 1.5rem;
}

/* ────────────────── CHIP — CARD STYLE (como FolderChip React) ────────────────── */
.bib-chip[b-eqbcqkpu78] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(55,71,79,0.75);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: box-shadow 0.2s, color 0.2s;
    min-height: 52px;
}

.bib-chip:hover[b-eqbcqkpu78] {
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    color: #37474F;
    border-color: #D1D5DB;
}

.bib-chip:hover .bib-chip-icon-wrap[b-eqbcqkpu78] {
    background: rgba(55,71,79,0.09);
}

.bib-chip-icon-wrap[b-eqbcqkpu78] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(55,71,79,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}

.bib-chip--band .bib-chip-icon-wrap[b-eqbcqkpu78] { background: rgba(55,71,79,0.07); }
.bib-chip--band:hover .bib-chip-icon-wrap[b-eqbcqkpu78] { background: rgba(55,71,79,0.11); }

.bib-chip-icon[b-eqbcqkpu78] {
    font-size: 0.85rem;
    color: rgba(55,71,79,0.55);
}

.bib-chip-name[b-eqbcqkpu78] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bib-chip-count[b-eqbcqkpu78] {
    background: rgba(55,71,79,0.08);
    color: rgba(55,71,79,0.45);
    border-radius: 999px;
    padding: 0.06rem 0.45rem;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Flecha externa de la chip — aparece en hover */
.bib-chip-ext[b-eqbcqkpu78] {
    font-size: 0.6rem;
    opacity: 0.14;
    flex-shrink: 0;
    transition: opacity 0.2s, transform 0.2s;
}

.bib-chip:hover .bib-chip-ext[b-eqbcqkpu78] {
    opacity: 0.38;
    transform: translate(2px, -2px);
}

/* ────────────────── CHIPS GRID (4-col como React) ────────────────── */
.bib-chips[b-eqbcqkpu78], .bib-band-chips[b-eqbcqkpu78] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

@media (max-width: 1100px) {
    .bib-chips[b-eqbcqkpu78], .bib-band-chips[b-eqbcqkpu78] { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 760px) {
    .bib-chips[b-eqbcqkpu78], .bib-band-chips[b-eqbcqkpu78] { grid-template-columns: repeat(2,1fr); gap: 1rem; }
}
@media (max-width: 480px) {
    .bib-chips[b-eqbcqkpu78], .bib-band-chips[b-eqbcqkpu78] { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* ────────────────── GRUPOS 2-5 (secciones libres como React) ────────────────── */
.bib-groups-grid[b-eqbcqkpu78] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.bib-group[b-eqbcqkpu78] {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 2.5rem 0 2rem;
    border-bottom: 1px solid rgba(224,224,224,0.7);
}

.bib-group:last-child[b-eqbcqkpu78] { border-bottom: none; }

.bib-group-title[b-eqbcqkpu78] {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #37474F;
    letter-spacing: -0.01em;
    margin: 0 0 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bib-group--verde   .bib-group-title i[b-eqbcqkpu78] { color: #2E7D32; }
.bib-group--azul    .bib-group-title i[b-eqbcqkpu78] { color: #1565C0; }
.bib-group--naranja .bib-group-title i[b-eqbcqkpu78] { color: #E65100; }
.bib-group--gris    .bib-group-title i[b-eqbcqkpu78] { color: #546E7A; }
.bib-group--violeta .bib-group-title i[b-eqbcqkpu78] { color: #6A1B9A; }
.bib-group--rosa    .bib-group-title i[b-eqbcqkpu78] { color: #AD1457; }

/* ────────────────── DIVISOR ────────────────── */
.bib-divider[b-eqbcqkpu78] { padding: 3rem 0; }

.bib-divider .bib-container[b-eqbcqkpu78] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.bib-hr[b-eqbcqkpu78] {
    flex: 1;
    border: none;
    border-top: 2px solid #E0E0E0;
    border-radius: 999px;
    margin: 0;
}

.bib-divider-text[b-eqbcqkpu78] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #9E8E7E;
    white-space: nowrap;
    margin: 0;
    font-weight: 600;
}

/* ─── INTRO Biblioteca Interactiva ─── */
.bib-thematic-intro[b-eqbcqkpu78] {
    padding: 0 0 2.5rem;
    text-align: center;
}

.bib-section-label[b-eqbcqkpu78] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.69rem;
    color: #2E7D32;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;
    margin: 0 0 1.25rem;
}

.bib-section-label[b-eqbcqkpu78]::before,
.bib-section-label[b-eqbcqkpu78]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(46,125,50,0.15);
    border-radius: 999px;
}

.bib-thematic-intro-title-row[b-eqbcqkpu78] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.bib-interactiva-center[b-eqbcqkpu78] {
    justify-content: center;
}

.bib-thematic-intro-icon[b-eqbcqkpu78] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(46,125,50,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bib-thematic-intro-icon i[b-eqbcqkpu78] { color: #2E7D32; font-size: 1.2rem; }

.bib-thematic-intro-h2[b-eqbcqkpu78] {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #37474F;
    letter-spacing: -0.01em;
    margin: 0;
}

/* ── Estilo llamativo para Biblioteca Interactiva ── */
.bib-interactiva-icon[b-eqbcqkpu78] {
    background: linear-gradient(135deg, rgba(46,125,50,0.12), rgba(27,94,32,0.18));
    box-shadow: 0 0 12px rgba(46,125,50,0.15);
}

.bib-interactiva-h2[b-eqbcqkpu78] {
    font-size: 2rem;
    background: linear-gradient(135deg, #1B5E20, #2E7D32, #43A047);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bib-interactiva-spark[b-eqbcqkpu78] {
    -webkit-text-fill-color: #43A047;
    font-size: 0.7em;
    vertical-align: middle;
    animation: bib-sparkle-b-eqbcqkpu78 2.5s ease-in-out infinite;
}

@keyframes bib-sparkle-b-eqbcqkpu78 {
    0%, 100% { opacity: 0.4; transform: scale(0.85); }
    50%      { opacity: 1;   transform: scale(1.15); }
}

.bib-thematic-intro-sub[b-eqbcqkpu78] {
    font-size: 0.81rem;
    color: rgba(55,71,79,0.45);
    line-height: 1.6;
    margin: 0;
    text-align: center;
}

/* ────────────────── SECCIONES TEMÁTICAS (banda full-width como React) ────────────────── */
.bib-thematic-grid[b-eqbcqkpu78] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-bottom: 3rem;
}

.bib-thematic-card[b-eqbcqkpu78] {
    border-radius: 16px;
    overflow: visible;
    border: none;
}

.bib-thematic-card-inner[b-eqbcqkpu78] {
    padding: 2.5rem 2.5rem 2.5rem 2.5rem;
    display: flex;
    align-items: center;
    gap: 3rem;
}

.bib-thematic-left[b-eqbcqkpu78] {
    flex-shrink: 0;
    width: 340px;
    min-width: 0;
}

@media (max-width: 860px) {
    .bib-thematic-card-inner[b-eqbcqkpu78] { flex-direction: column; gap: 1.5rem; padding: 1.75rem 1.5rem; }
    .bib-thematic-left[b-eqbcqkpu78] { width: 100%; }
}

.bib-thematic-icon-row[b-eqbcqkpu78] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.bib-thematic-icon-wrap[b-eqbcqkpu78] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bib-thematic-title[b-eqbcqkpu78] {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}

.bib-thematic-desc[b-eqbcqkpu78] {
    font-size: 0.81rem;
    line-height: 1.6;
    margin: 0.35rem 0 0;
    max-width: 280px;
}

.bib-thematic-links[b-eqbcqkpu78] {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
    align-content: flex-start;
}

/* Botón temático — blanco con borde de color, icono interno */
.bib-thematic-btn[b-eqbcqkpu78] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 12px;
    padding: 0.85rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, transform 0.12s, box-shadow 0.18s, opacity 0.18s;
    white-space: nowrap;
    border: 1px solid transparent;
    text-decoration: none;
    background: #FFFFFF;
    opacity: 0.5;
    position: relative;
}

/* Tooltip "En construcción" */
.bib-thematic-btn[b-eqbcqkpu78]::after {
    content: "En construcción";
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(25,25,25,0.85);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s;
    letter-spacing: 0.01em;
}

.bib-thematic-btn:hover[b-eqbcqkpu78] {
    background: var(--hover-bg, #F3F4F6) !important;
    transform: scale(1.025);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    opacity: 1;
}

.bib-thematic-btn:hover[b-eqbcqkpu78]::after {
    opacity: 1;
}

/* Aviso de sección en construcción (bajo título Biblioteca Interactiva) */
.bib-wip-notice[b-eqbcqkpu78] {
    display: flex;
    width: fit-content;
    margin: 0.75rem auto 0;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #92400E;
    background: #FEF3C7;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    padding: 0.45rem 0.9rem;
}

.bib-thematic-btn-icon[b-eqbcqkpu78] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}

.bib-thematic-btn-arrow[b-eqbcqkpu78] {
    margin-left: auto;
    opacity: 0.35;
    font-size: 0.6rem;
    transition: opacity 0.18s, transform 0.18s;
    flex-shrink: 0;
}

.bib-thematic-btn:hover .bib-thematic-btn-arrow[b-eqbcqkpu78] {
    opacity: 0.75;
    transform: translateX(2px);
}
/* /Pages/Calendario/Index.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   Pages/Calendario/Index.razor.css — Estilos de la página Calendario
   ══════════════════════════════════════════════════════════════ */

/* ── Hero Banner (mismo estilo que /noticias) ───────────────── */
.cal-hero[b-tr1iivl7ly] {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

/* Imagen: cubre todo con brillo reducido al 75% */
.cal-hero-img[b-tr1iivl7ly] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.75);
}

/* Overlay oscuro para contraste del texto */
.cal-hero-overlay[b-tr1iivl7ly] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.25) 0%,
        rgba(0,0,0,0.40) 60%,
        rgba(0,0,0,0.30) 100%
    );
}

/* Degradado inferior que funde el hero con el fondo crema #F9F7F2 */
.cal-hero-fade-bottom[b-tr1iivl7ly] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(
        to top,
        #F9F7F2 0%,
        rgba(249,247,242,0.85) 30%,
        rgba(249,247,242,0) 100%
    );
}

.cal-hero-body[b-tr1iivl7ly] {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0 1rem;
    text-align: center;
    animation: calHeroIn-b-tr1iivl7ly 0.55s ease-out both;
}

@keyframes calHeroIn-b-tr1iivl7ly {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cal-hero-title[b-tr1iivl7ly] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
    text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}

.cal-hero-subtitle[b-tr1iivl7ly] {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 12px rgba(0,0,0,0.25);
    max-width: 36rem;
    line-height: 1.6;
    margin: 0;
    animation: calHeroIn-b-tr1iivl7ly 0.5s 0.1s ease-out both;
}

.cal-hero-pills[b-tr1iivl7ly] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.5rem;
    animation: calHeroIn-b-tr1iivl7ly 0.5s 0.18s ease-out both;
}

.cal-hero-pill[b-tr1iivl7ly] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    padding: 0.375rem 0.875rem;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* ── Contenedor principal ───────────────────────────────────── */
.cal-content[b-tr1iivl7ly] {
    max-width: 64rem;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

@media (min-width: 640px) {
    .cal-content[b-tr1iivl7ly] {
        padding: 2.5rem 1.5rem 4rem;
    }
}

@media (min-width: 1024px) {
    .cal-content[b-tr1iivl7ly] {
        padding: 3rem 2rem 5rem;
    }
}

@media (min-width: 1600px) {
    .cal-content[b-tr1iivl7ly] {
        max-width: 80rem;
    }
}

/* ── Estado de carga ────────────────────────────────────────── */
.cal-loading[b-tr1iivl7ly] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 5rem 1rem;
    color: #666;
    font-size: 0.9375rem;
}

/* ── Próximo evento ─────────────────────────────────────────── */
.cal-proximo-card[b-tr1iivl7ly] {
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 2rem;
    padding: 1.25rem 1.375rem;
    transition: box-shadow 0.2s;
}

.cal-proximo-card:hover[b-tr1iivl7ly] {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.cal-proximo-inner[b-tr1iivl7ly] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.cal-proximo-left[b-tr1iivl7ly] {
    flex: 1;
    min-width: 0;
}

.cal-proximo-label[b-tr1iivl7ly] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 0.375rem;
}

.cal-proximo-titulo[b-tr1iivl7ly] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.3rem;
    line-height: 1.3;
}

.cal-proximo-meta[b-tr1iivl7ly] {
    font-size: 0.8125rem;
    color: #5a5a5a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cal-proximo-ubicacion[b-tr1iivl7ly] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.cal-proximo-days[b-tr1iivl7ly] {
    text-align: right;
    flex-shrink: 0;
}

.cal-days-badge[b-tr1iivl7ly] {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
}

.cal-days-num[b-tr1iivl7ly] {
    display: block;
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 1;
}

.cal-days-label[b-tr1iivl7ly] {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #888;
    margin-top: 0.125rem;
}

.cal-proximo-ramas[b-tr1iivl7ly] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.875rem;
}

.cal-rama-badge[b-tr1iivl7ly] {
    font-size: 0.625rem;
    font-weight: 600;
    color: #fff;
    padding: 0.25rem 0.5625rem;
    border-radius: 999px;
}

/* ── Filtros ────────────────────────────────────────────────── */
.cal-filtros-wrap[b-tr1iivl7ly] {
    margin-bottom: 1.75rem;
}

.cal-filtros-actions[b-tr1iivl7ly] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.cal-btn-filtrar[b-tr1iivl7ly] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #222;
    background: #fff;
    border: 1px solid #DEDEDE;
    border-radius: 0.75rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.cal-btn-filtrar:hover[b-tr1iivl7ly] {
    background: #f7f7f5;
    border-color: #C8C8C8;
}

.cal-btn-limpiar[b-tr1iivl7ly] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #3E7B27;
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

.cal-btn-limpiar:hover[b-tr1iivl7ly] {
    opacity: 0.75;
}

.cal-filtros-panel[b-tr1iivl7ly] {
    margin-top: 0.75rem;
    background: #fff;
    border: 1px solid #E2E2E2;
    border-radius: 0.875rem;
    padding: 1rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cal-filtro-grupo[b-tr1iivl7ly] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cal-filtro-label[b-tr1iivl7ly] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #888;
    margin: 0;
}

.cal-filtro-chips[b-tr1iivl7ly] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.cal-chip[b-tr1iivl7ly] {
    font-size: 0.75rem;
    font-weight: 600;
    background: #fff;
    border: 1px solid #DEDEDE;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1.5;
}

.cal-chip:hover[b-tr1iivl7ly] {
    filter: brightness(0.96);
}

/* ── Timeline ───────────────────────────────────────────────── */
.cal-timeline[b-tr1iivl7ly] {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}

.cal-mes-header[b-tr1iivl7ly] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.cal-mes-nombre[b-tr1iivl7ly] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
}

.cal-mes-actual[b-tr1iivl7ly] {
    color: #3E7B27;
}

.cal-mes-sep[b-tr1iivl7ly] {
    flex: 1;
    height: 1px;
    background: #E4E4E4;
}

.cal-mes-count[b-tr1iivl7ly] {
    font-size: 0.6875rem;
    font-weight: 600;
    background: #F4F4F2;
    color: #888;
    padding: 0.2rem 0.625rem;
    border-radius: 999px;
    white-space: nowrap;
}

.cal-mes-count-actual[b-tr1iivl7ly] {
    background: #E8F5E9;
    color: #3E7B27;
}

/* ── Filas de evento (timeline) ─────────────────────────────── */
.cal-eventos-list[b-tr1iivl7ly] {
    display: flex;
    flex-direction: column;
}

.cal-evento-row[b-tr1iivl7ly] {
    display: flex;
    gap: 0.875rem;
    align-items: stretch;
}

.cal-tl-punto-col[b-tr1iivl7ly] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1rem;
    flex-shrink: 0;
    width: 16px;
}

.cal-tl-dot[b-tr1iivl7ly] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    flex-shrink: 0;
}

.cal-tl-check[b-tr1iivl7ly] {
    font-size: 0.875rem;
    color: #A5D6A7;
}

.cal-tl-line[b-tr1iivl7ly] {
    width: 1px;
    flex: 1;
    min-height: 1.5rem;
    background: #E0E0E0;
    margin-top: 4px;
}

.cal-tl-line-pasada[b-tr1iivl7ly] {
    background: #EEEEEE;
}

/* ── Card de cada evento ────────────────────────────────────── */
.cal-evento-card[b-tr1iivl7ly] {
    flex: 1;
    background: #FFFFFF;
    border: 1px solid #EDECEA;
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    margin-bottom: 0.625rem;
    transition: box-shadow 0.18s;
}

.cal-evento-card:hover[b-tr1iivl7ly] {
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.07);
}

.cal-evento-pasado[b-tr1iivl7ly] {
    background: #FAFAF8;
    border-color: #E8E8E8;
}

.cal-evento-pasado:hover[b-tr1iivl7ly] {
    box-shadow: none;
}

.cal-evento-head[b-tr1iivl7ly] {
    margin-bottom: 0.5rem;
}

.cal-evento-badges[b-tr1iivl7ly] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.375rem;
}

.cal-cat-badge[b-tr1iivl7ly] {
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.2rem 0.5625rem;
    border-radius: 999px;
}

.cal-realizado-badge[b-tr1iivl7ly] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.5625rem;
    font-weight: 600;
    background: #E8F5E9;
    color: #66BB6A;
    border: 1px solid #C8E6C9;
    padding: 0.2rem 0.4375rem;
    border-radius: 999px;
}

.cal-evento-titulo[b-tr1iivl7ly] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.35;
}

.cal-evento-titulo-pasado[b-tr1iivl7ly] {
    color: #9E9E9E;
}

.cal-evento-meta[b-tr1iivl7ly] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 1rem;
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 0.375rem;
}

.cal-evento-meta-pasado[b-tr1iivl7ly] {
    color: #BDBDBD;
}

.cal-evento-fecha[b-tr1iivl7ly],
.cal-evento-ubicacion[b-tr1iivl7ly] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.cal-evento-desc[b-tr1iivl7ly] {
    font-size: 0.75rem;
    color: #5a5a5a;
    margin: 0.25rem 0 0.5rem;
    line-height: 1.55;
}

.cal-evento-desc-pasado[b-tr1iivl7ly] {
    color: #BDBDBD;
}

.cal-evento-ramas[b-tr1iivl7ly] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.375rem;
}

.cal-rama-badge-sm[b-tr1iivl7ly] {
    font-size: 0.5625rem;
    font-weight: 600;
    padding: 0.2rem 0.4375rem;
    border-radius: 999px;
}

/* ── Estado vacío ───────────────────────────────────────────── */
.cal-empty[b-tr1iivl7ly] {
    text-align: center;
    padding: 5rem 1rem;
}

.cal-empty-icon[b-tr1iivl7ly] {
    font-size: 3rem;
    color: #BDBDBD;
    display: block;
    margin-bottom: 0.875rem;
}

.cal-empty-titulo[b-tr1iivl7ly] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 0.375rem;
}

.cal-empty-sub[b-tr1iivl7ly] {
    font-size: 0.875rem;
    color: #888;
    margin: 0;
}

/* ── Tablet / Desktop ───────────────────────────────────────── */
@media (min-width: 768px) {
    .cal-proximo-titulo[b-tr1iivl7ly] {
        font-size: 1.25rem;
    }

    .cal-evento-titulo[b-tr1iivl7ly] {
        font-size: 0.9375rem;
    }

    .cal-evento-card[b-tr1iivl7ly] {
        padding: 1rem 1.25rem;
    }

    .cal-proximo-card[b-tr1iivl7ly] {
        padding: 1.375rem 1.625rem;
    }
}
/* /Pages/Campamentos/Index.razor.rz.scp.css */
/*
 * Campamentos/Index.razor.css — Historial de Campamentos
 * ════════════════════════════════════════════════════════════════
 * Prefijo: camp- (campamentos page)
 *
 * Paleta:
 *   Verde principal    #2E7D32
 *   Verde oscuro       #1B5E20
 *   Crema bg           #F9F7F2
 *   Crema borde        #ECE6D8
 *   Texto              #37474F
 *   Texto suave        #546E7A
 */


/* ════════════════════════════════════════════
   ANIMACIÓN DE ENTRADA
   ════════════════════════════════════════════ */

@keyframes camp-fadeIn-b-4dhig3catk {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ════════════════════════════════════════════
   LAYOUT GENERAL
   ════════════════════════════════════════════ */

.camp-page[b-4dhig3catk] {
    min-height: 100vh;
    background-color: #F9F7F2;
    animation: camp-fadeIn-b-4dhig3catk 0.6s ease both;
}

.camp-main[b-4dhig3catk] {
    padding-bottom: 3rem;
}

.camp-container[b-4dhig3catk] {
    max-width: 48rem;
    margin: 0 auto;
    padding: 2rem 1rem 2rem 1.75rem;
    position: relative;
}

@media (min-width: 640px) {
    .camp-container[b-4dhig3catk] {
        padding: 2.5rem 1.5rem 2.5rem 2.25rem;
    }
}

@media (min-width: 1024px) {
    .camp-container[b-4dhig3catk] {
        padding: 3rem 2rem 3rem 2.75rem;
    }
}


/* ════════════════════════════════════════════
   LÍNEA VERTICAL DE TIMELINE
   ════════════════════════════════════════════ */

.camp-timeline-line[b-4dhig3catk] {
    position: absolute;
    left: calc(1.75rem + 3px);
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(
        to bottom,
        rgba(46, 125, 50, 0.30),
        rgba(46, 125, 50, 0.15),
        transparent
    );
    z-index: 0;
}

@media (min-width: 640px) {
    .camp-timeline-line[b-4dhig3catk] { left: calc(2.25rem + 3px); }
}

@media (min-width: 1024px) {
    .camp-timeline-line[b-4dhig3catk] { left: calc(2.75rem + 3px); }
}


/* ════════════════════════════════════════════
   GRUPO DE DÉCADA
   ════════════════════════════════════════════ */

.camp-decade-group[b-4dhig3catk] {
    margin-bottom: 1.5rem;
}


/* ════════════════════════════════════════════
   HEADER DE DÉCADA
   ════════════════════════════════════════════ */

.camp-decade-header[b-4dhig3catk] {
    position: sticky;
    top: 4.5rem;           /* Deja espacio para la barra de navegación */
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
    margin-left: -0.125rem;
}

.camp-decade-pill[b-4dhig3catk] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background-color: #2E7D32;
    color: #ffffff;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    box-shadow: 0 1px 4px rgba(46, 125, 50, 0.25);
    white-space: nowrap;
}

.camp-decade-count[b-4dhig3catk] {
    color: rgba(255, 255, 255, 0.50);
    font-size: 0.5625rem;
}

.camp-decade-line[b-4dhig3catk] {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(46, 125, 50, 0.18), transparent);
}


/* ════════════════════════════════════════════
   LISTA DE CAMPAMENTOS
   ════════════════════════════════════════════ */

.camp-items-list[b-4dhig3catk] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}


/* ════════════════════════════════════════════
   ITEM (dot + tarjeta)
   ════════════════════════════════════════════ */

.camp-item[b-4dhig3catk] {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 1;
}

.camp-item__dot[b-4dhig3catk] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    border: 1.5px solid #2E7D32;
    background-color: #ffffff;
    z-index: 10;
    flex-shrink: 0;
    transition: background-color 0.15s;
}

.camp-item:hover .camp-item__dot[b-4dhig3catk] {
    background-color: #2E7D32;
}


/* ════════════════════════════════════════════
   TARJETA DEL CAMPAMENTO
   ════════════════════════════════════════════ */

.camp-card[b-4dhig3catk] {
    margin-left: 1.5rem;
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid #ECE6D8;
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background-color: #ffffff;
    transition: box-shadow 0.15s;
}

.camp-item--odd .camp-card[b-4dhig3catk] {
    background-color: #FDFCF9;
}

.camp-card:hover[b-4dhig3catk] {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}


/* ── Columna 1: Fecha ── */
.camp-card__fecha[b-4dhig3catk] {
    width: 5rem;
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #2E7D32;
    letter-spacing: 0.04em;
}

@media (min-width: 640px) {
    .camp-card__fecha[b-4dhig3catk] { width: 6rem; }
}


/* ── Columna 2: Info ── */
.camp-card__info[b-4dhig3catk] {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.camp-card__ubicacion-row[b-4dhig3catk] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.camp-card__ubicacion[b-4dhig3catk] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #37474F;
}

.camp-card__camping[b-4dhig3catk] {
    font-size: 0.6875rem;
    color: rgba(55, 71, 79, 0.45);
    margin: 0;
}


/* ════════════════════════════════════════════
   BADGES
   ════════════════════════════════════════════ */

.camp-badge[b-4dhig3catk] {
    flex-shrink: 0;
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.0625rem 0.375rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.camp-badge--rover[b-4dhig3catk] {
    background-color: #FEF2F2;
    border-color: #FECACA;
    color: #991B1B;
}

.camp-badge--jamboree[b-4dhig3catk] {
    background-color: #EFF6FF;
    border-color: #BFDBFE;
    color: #1E40AF;
}

.camp-badge--historico[b-4dhig3catk] {
    background-color: #FFFBEB;
    border-color: #FDE68A;
    color: #92400E;
}

.camp-badge--nacional[b-4dhig3catk] {
    background-color: #F0FDF4;
    border-color: #BBF7D0;
    color: #166534;
}

.camp-badge--default[b-4dhig3catk] {
    background-color: #F3F4F6;
    border-color: #E5E7EB;
    color: #374151;
}


/* ════════════════════════════════════════════
   BOTÓN ÁLBUM DE FOTOS
   ════════════════════════════════════════════ */

.camp-card__album-btn[b-4dhig3catk] {
    flex-shrink: 0;
    margin-left: 0.5rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(46, 125, 50, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(46, 125, 50, 0.6);
    text-decoration: none;
    font-size: 0.6875rem;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.camp-card__album-btn:hover[b-4dhig3catk] {
    background-color: #2E7D32;
    color: #ffffff;
    border-color: #2E7D32;
}


/* ════════════════════════════════════════════
   TERMINAL — punto de origen + texto
   ════════════════════════════════════════════ */

.camp-origin[b-4dhig3catk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: -0.0625rem;
    padding-top: 0.5rem;
}

.camp-origin__dot[b-4dhig3catk] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #2E7D32;
    box-shadow: 0 1px 3px rgba(46, 125, 50, 0.25);
    flex-shrink: 0;
}

.camp-origin__text[b-4dhig3catk] {
    font-size: 0.6875rem;
    color: rgba(55, 71, 79, 0.35);
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
    margin: 0;
}


/* ════════════════════════════════════════════
   ESTADÍSTICAS DEL HERO
   ════════════════════════════════════════════ */

.camp-stats-row[b-4dhig3catk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 0.25rem;
}

@media (min-width: 640px) {
    .camp-stats-row[b-4dhig3catk] { gap: 3.5rem; }
}

.camp-stat[b-4dhig3catk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}

.camp-stat__icon-wrap[b-4dhig3catk] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background-color: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
}

.camp-stat__icon[b-4dhig3catk] {
    font-size: 1.25rem;
    color: #A5D6A7;
}

.camp-stat__value[b-4dhig3catk] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}

@media (min-width: 640px) {
    .camp-stat__value[b-4dhig3catk] { font-size: 1.875rem; }
}

.camp-stat__label[b-4dhig3catk] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.50);
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

.camp-stats-divider[b-4dhig3catk] {
    width: 1px;
    height: 3.5rem;
    background-color: rgba(255, 255, 255, 0.10);
}


/* ════════════════════════════════════════════
   CITA FOOTER
   ════════════════════════════════════════════ */

.camp-quote-footer[b-4dhig3catk] {
    padding-bottom: 4rem;
    text-align: center;
}

.camp-quote-text[b-4dhig3catk] {
    font-size: 0.6875rem;
    color: rgba(55, 71, 79, 0.30);
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
    margin: 0;
}


/* ════════════════════════════════════════════
   BOTÓN SCROLL AL INICIO
   ════════════════════════════════════════════ */

.camp-scroll-top[b-4dhig3catk] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 50;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: #2E7D32;
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.35);
    transition: background-color 0.2s, transform 0.2s;
}

.camp-scroll-top:hover[b-4dhig3catk] {
    background-color: #1B5E20;
    transform: translateY(-2px);
}

.camp-scroll-top:focus-visible[b-4dhig3catk] {
    outline: 2px solid #2E7D32;
    outline-offset: 3px;
}
/* /Pages/Cargos/Index.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * Cargos/Index.razor.css — Sistema de Cargos
 * ──────────────────────────────────────────────────────────────────────
 * Página editorial pública. Mundo visual: cálido, Bitter, crema.
 * Prefijo: cg- (cargos)
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Contenedor principal ─────────────────────────────────────────── */
.cg-content[b-f2vbfqutin] {
    max-width: 50rem; /* 800px como en la referencia */
    margin: 0 auto;
    padding: 2rem 1rem 5rem;
}

@media (min-width: 640px) {
    .cg-content[b-f2vbfqutin] {
        padding: 2.5rem 1.5rem 5rem;
    }
}

@media (min-width: 1024px) {
    .cg-content[b-f2vbfqutin] {
        padding: 3rem 2rem 5rem;
    }
}

/* ── Espacio entre secciones ──────────────────────────────────────── */
.cg-sections[b-f2vbfqutin] {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

/* ── Bloque de sección (header + card) ────────────────────────────── */
.cg-block[b-f2vbfqutin] {
    animation: cgFadeUp-b-f2vbfqutin 0.45s ease-out both;
}

.cg-block:nth-child(1)[b-f2vbfqutin] { animation-delay: 0s; }
.cg-block:nth-child(2)[b-f2vbfqutin] { animation-delay: 0.06s; }
.cg-block:nth-child(3)[b-f2vbfqutin] { animation-delay: 0.12s; }
.cg-block:nth-child(4)[b-f2vbfqutin] { animation-delay: 0.18s; }
.cg-block:nth-child(5)[b-f2vbfqutin] { animation-delay: 0.24s; }
.cg-block:nth-child(6)[b-f2vbfqutin] { animation-delay: 0.30s; }

/* ── Header de sección (icono + título) ───────────────────────────── */
.cg-block__header[b-f2vbfqutin] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
}

.cg-block__icon[b-f2vbfqutin] {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.cg-block__title[b-f2vbfqutin] {
    font-family: var(--font-serif, 'Bitter', serif);
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

@media (min-width: 640px) {
    .cg-block__title[b-f2vbfqutin] {
        font-size: 1.25rem;
    }
}

/* ── Card contenedor ──────────────────────────────────────────────── */
.cg-card[b-f2vbfqutin] {
    background-color: var(--card, #ffffff);
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    border: 1px solid #F0EDE8;
    border-left-width: 4px;
    border-left-style: solid;
}

/* ── Fila de cargo ────────────────────────────────────────────────── */
.cg-row[b-f2vbfqutin] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #F0EDE8;
}

@media (min-width: 640px) {
    .cg-row[b-f2vbfqutin] {
        gap: 1rem;
        padding: 0.875rem 1.25rem;
    }
}

.cg-row--last[b-f2vbfqutin] {
    border-bottom: none;
}

/* ── Dot indicador de cargo ───────────────────────────────────────── */
.cg-dot[b-f2vbfqutin] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Texto del cargo ──────────────────────────────────────────────── */
.cg-row__text[b-f2vbfqutin] {
    flex: 1;
    min-width: 0;
}

.cg-row__titulo[b-f2vbfqutin] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #2D3436;
    margin: 0;
    line-height: 1.4;
}

@media (min-width: 640px) {
    .cg-row__titulo[b-f2vbfqutin] {
        font-size: 0.875rem;
    }
}

.cg-row__desc[b-f2vbfqutin] {
    font-size: 0.75rem;
    color: var(--muted-foreground, #78909C);
    margin: 0.125rem 0 0;
    line-height: 1.5;
}

/* ── Placeholder de insignia ──────────────────────────────────────── */
.cg-insignia[b-f2vbfqutin] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1.5px dashed;
    font-size: 0.75rem;
}

@media (min-width: 640px) {
    .cg-insignia[b-f2vbfqutin] {
        width: 3rem;
        height: 3rem;
    }
}

/* ── Badge de contexto (Patrullas) ────────────────────────────────── */
.cg-context-badge[b-f2vbfqutin] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #F5F5F5;
    border-bottom: 1px solid #F0EDE8;
}

@media (min-width: 640px) {
    .cg-context-badge[b-f2vbfqutin] {
        padding: 0.5rem 1.25rem;
    }
}

.cg-context-badge i[b-f2vbfqutin] {
    font-size: 0.625rem;
    color: #9E9E9E;
}

.cg-context-badge span[b-f2vbfqutin] {
    font-size: 0.6875rem;
    color: var(--muted-foreground, #78909C);
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ── Subgrupo (label) ─────────────────────────────────────────────── */
.cg-subgroup[b-f2vbfqutin] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid;
}

@media (min-width: 640px) {
    .cg-subgroup[b-f2vbfqutin] {
        padding: 0.625rem 1.25rem;
    }
}

.cg-subgroup__dot[b-f2vbfqutin] {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
}

.cg-subgroup__label[b-f2vbfqutin] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

/* ── Nota de pie de sección ───────────────────────────────────────── */
.cg-footer-note[b-f2vbfqutin] {
    padding: 0.75rem 1rem;
    background-color: #FAFAFA;
    border-top: 1px solid #F0EDE8;
}

@media (min-width: 640px) {
    .cg-footer-note[b-f2vbfqutin] {
        padding: 0.75rem 1.25rem;
    }
}

.cg-footer-note p[b-f2vbfqutin] {
    font-size: 0.6875rem;
    color: #9E9E9E;
    font-style: italic;
    line-height: 1.5;
    margin: 0;
}

@media (min-width: 640px) {
    .cg-footer-note p[b-f2vbfqutin] {
        font-size: 0.75rem;
    }
}

/* ── Marca final decorativa ───────────────────────────────────────── */
.cg-end-marker[b-f2vbfqutin] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 3.5rem;
    animation: cgFadeUp-b-f2vbfqutin 0.5s ease-out both;
    animation-delay: 0.4s;
}

.cg-end-marker__line[b-f2vbfqutin] {
    width: 2rem;
    height: 1px;
    background-color: #D7CCC8;
}

.cg-end-marker__icon[b-f2vbfqutin] {
    font-size: 0.875rem;
    color: #A1887F;
}

.cg-end-marker__text[b-f2vbfqutin] {
    text-align: center;
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #A1887F;
    font-weight: 600;
    animation: cgFadeUp-b-f2vbfqutin 0.5s ease-out both;
    animation-delay: 0.45s;
}

/* ── Animación ────────────────────────────────────────────────────── */
@keyframes cgFadeUp-b-f2vbfqutin {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Pages/Condecoraciones/Condecoraciones.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════
   CONDECORACIONES — Página pública de condecoraciones y distinciones
   ══════════════════════════════════════════════════════════════════ */

/* ── ANIMACIONES ─────────────────────────────────────────────────── */

@keyframes condFadeUp-b-nekt7ebfkp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cond-anim-up[b-nekt7ebfkp] {
    animation: condFadeUp-b-nekt7ebfkp 0.55s ease both;
}

.cond-anim-up--d1[b-nekt7ebfkp] {
    animation-delay: 0.12s;
}

.cond-anim-up--d2[b-nekt7ebfkp] {
    animation-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {
    .cond-anim-up[b-nekt7ebfkp],
    .cond-anim-up--d1[b-nekt7ebfkp],
    .cond-anim-up--d2[b-nekt7ebfkp] {
        animation: none;
    }
}

/* ── PÁGINA ──────────────────────────────────────────────────────── */

.cond-page[b-nekt7ebfkp] {
    background-color: #F9F7F2;
    min-height: 100vh;
    padding-bottom: 2rem;
}

.cond-contenedor[b-nekt7ebfkp] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

@media (min-width: 640px) {
    .cond-contenedor[b-nekt7ebfkp] {
        padding: 0 2rem;
    }
}

/* ── BREADCRUMB ──────────────────────────────────────────────────── */

.cond-breadcrumb[b-nekt7ebfkp] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding-top: 1.5rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    color: rgba(55, 71, 79, 0.4);
    font-family: var(--font-sans, 'Inter', sans-serif);
}

.cond-breadcrumb__sep[b-nekt7ebfkp] {
    font-size: 0.5rem;
    opacity: 0.5;
}

.cond-breadcrumb__item--activo[b-nekt7ebfkp] {
    color: rgba(55, 71, 79, 0.7);
}

/* ── INTRODUCCIÓN ────────────────────────────────────────────────── */

.cond-intro[b-nekt7ebfkp] {
    padding-top: 2.5rem;
    padding-bottom: 2rem;
}

.cond-badge[b-nekt7ebfkp] {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #2E7D32;
    background-color: rgba(46, 125, 50, 0.08);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    margin-bottom: 1rem;
    font-family: var(--font-sans, 'Inter', sans-serif);
    user-select: none;
}

.cond-intro__texto[b-nekt7ebfkp] {
    max-width: 820px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.9375rem;
    line-height: 1.85;
    color: rgba(55, 71, 79, 0.7);
    font-family: var(--font-sans, 'Inter', sans-serif);
}

.cond-intro__texto em[b-nekt7ebfkp] {
    font-style: italic;
    color: rgba(55, 71, 79, 0.85);
}

/* ── DIVISOR ─────────────────────────────────────────────────────── */

.cond-divisor[b-nekt7ebfkp] {
    height: 1px;
    background-color: rgba(55, 71, 79, 0.08);
    margin: 1.5rem 0;
}

/* ── SECCIONES ───────────────────────────────────────────────────── */

.cond-secciones[b-nekt7ebfkp] {
    padding-top: 2.5rem;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0; /* Los divisores entre secciones se renderizan desde Razor */
}

.cond-seccion__header[b-nekt7ebfkp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.cond-seccion__icono[b-nekt7ebfkp] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background-color: rgba(46, 125, 50, 0.08);
    color: #2E7D32;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.cond-seccion__titulo[b-nekt7ebfkp] {
    font-family: var(--font-serif, 'Bitter', Georgia, serif);
    font-size: clamp(1.2rem, 3vw, 1.45rem);
    font-weight: 700;
    color: #37474F;
    margin: 0;
}

.cond-seccion__desc[b-nekt7ebfkp] {
    font-size: 0.875rem;
    color: rgba(55, 71, 79, 0.45);
    line-height: 1.6;
    /* 2.5rem icon + 0.75rem gap ≈ padding-left de 3.25rem para alinear con el título */
    padding-left: 3.25rem;
    margin: 0 0 1.5rem;
    font-family: var(--font-sans, 'Inter', sans-serif);
}

/* ── GRID DE TARJETAS ────────────────────────────────────────────── */

.cond-grid[b-nekt7ebfkp] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .cond-grid[b-nekt7ebfkp] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cond-grid--una-col[b-nekt7ebfkp] {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .cond-grid--una-col[b-nekt7ebfkp] {
        grid-template-columns: 1fr;
    }
}


/* ── TARJETA ESTÁNDAR ────────────────────────────────────────────── */

.cond-card[b-nekt7ebfkp] {
    background-color: #FFFFFF;
    border-radius: 1rem;
    border: 1px solid rgba(55, 71, 79, 0.08);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    transition: box-shadow 0.3s ease;
}

.cond-card:hover[b-nekt7ebfkp] {
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1);
}

.cond-card__img-wrap[b-nekt7ebfkp] {
    width: 100px;
    flex-shrink: 0;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FAFAFA;
}

.cond-card__img[b-nekt7ebfkp] {
    width: 100%;
    max-height: 160px;
    object-fit: contain;
    border-radius: 0.375rem;
}

.cond-card__body[b-nekt7ebfkp] {
    flex: 1;
    padding: 1.25rem 1.25rem 1.25rem 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.cond-card__titulo[b-nekt7ebfkp] {
    font-family: var(--font-serif, 'Bitter', Georgia, serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: #37474F;
    margin: 0 0 0.375rem;
    line-height: 1.3;
}

.cond-card__subtitulo[b-nekt7ebfkp] {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.6875rem;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(55, 71, 79, 0.4);
    margin: 0 0 0.625rem;
}

.cond-card__desc[b-nekt7ebfkp] {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.8125rem;
    color: rgba(55, 71, 79, 0.6);
    line-height: 1.65;
    margin: 0 0 0.75rem;
}

.cond-card__nota[b-nekt7ebfkp] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin-top: auto;
}

.cond-card__nota-dot[b-nekt7ebfkp] {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 9999px;
    background-color: rgba(55, 71, 79, 0.15);
    flex-shrink: 0;
    margin-top: 0.4rem;
}

.cond-card__nota span:last-child[b-nekt7ebfkp] {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.6875rem;
    color: rgba(55, 71, 79, 0.3);
    line-height: 1.5;
}

/* ── TARJETA IMAGEN ANCHA (Virgen del Tesoro) ────────────────────── */
/* La insignia es una imagen landscape, se adapta con layout vertical */

.cond-card--ancha[b-nekt7ebfkp] {
    flex-direction: column;
}

.cond-card-ancha__img-wrap[b-nekt7ebfkp] {
    width: 100%;
    height: 180px;
    background-color: #FAFAFA;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow: hidden;
}

.cond-card-ancha__img[b-nekt7ebfkp] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0.375rem;
}

/* ── SECCIÓN DESCARGA DE PDF ─────────────────────────────────────── */

.cond-pdf-wrap[b-nekt7ebfkp] {
    padding-top: 3rem;
    padding-bottom: 2rem;
}

/* Tarjeta principal */
.cond-book-card[b-nekt7ebfkp] {
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid #E0DBD1;
    background-color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease;
}

.cond-book-card:hover[b-nekt7ebfkp] {
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.10);
}

@media (min-width: 640px) {
    .cond-book-card[b-nekt7ebfkp] {
        flex-direction: row;
    }
}

/* Panel izquierdo — fondo verde degradado */
.cond-book-cover-panel[b-nekt7ebfkp] {
    flex-shrink: 0;
    width: 100%;
    min-height: 14rem;
    position: relative;
    background: linear-gradient(135deg, #1B5E20, #2E7D32);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

@media (min-width: 640px) {
    .cond-book-cover-panel[b-nekt7ebfkp] {
        width: 280px;
        min-height: unset;
    }
}

/* Portada del libro */
.cond-book-cover-img[b-nekt7ebfkp] {
    position: relative;
    z-index: 1;
    width: 140px;
    border-radius: 0.375rem;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.25);
    display: block;
}

/* Círculos decorativos del panel */
.cond-book-deco[b-nekt7ebfkp] {
    position: absolute;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.cond-book-deco--tr[b-nekt7ebfkp] { top: 1rem; right: 1rem; width: 5rem; height: 5rem; }
.cond-book-deco--bl[b-nekt7ebfkp] { bottom: 1.5rem; left: 1rem; width: 3.5rem; height: 3.5rem; }

/* Panel derecho — contenido */
.cond-book-content[b-nekt7ebfkp] {
    flex: 1;
    padding: 1.5rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Etiqueta "Documento Oficial" */
.cond-book-tag[b-nekt7ebfkp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #2E7D32;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 1rem;
}

.cond-book-tag-ico[b-nekt7ebfkp] { font-size: 0.875rem; }

/* Título */
.cond-book-title[b-nekt7ebfkp] {
    font-family: Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #37474F;
    line-height: 1.25;
    margin: 0 0 0.75rem;
}

/* Descripción */
.cond-book-desc[b-nekt7ebfkp] {
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(55, 71, 79, 0.60);
    margin: 0 0 1.5rem;
}

/* Fila de botones */
.cond-book-btns[b-nekt7ebfkp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Botón primario (Descargar) */
.cond-book-btn[b-nekt7ebfkp] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    background-color: #2E7D32;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 12px rgba(27, 94, 32, 0.15);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.cond-book-btn:hover[b-nekt7ebfkp] {
    background-color: #1B5E20;
    box-shadow: 0 6px 20px rgba(27, 94, 32, 0.22);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}

/* Botón secundario (Previsualizar) */
.cond-book-btn--secondary[b-nekt7ebfkp] {
    background-color: transparent;
    color: #2E7D32;
    border: 1.5px solid #2E7D32;
    box-shadow: none;
}

.cond-book-btn--secondary:hover[b-nekt7ebfkp] {
    background-color: rgba(46, 125, 50, 0.06);
    box-shadow: none;
    color: #1B5E20;
    border-color: #1B5E20;
    transform: none;
}

/* ── BOTÓN VOLVER ────────────────────────────────────────────────── */

.cond-volver-wrap[b-nekt7ebfkp] {
    padding-bottom: 4rem;
}

.cond-btn-volver[b-nekt7ebfkp] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    background-color: rgba(55, 71, 79, 0.08);
    color: rgba(55, 71, 79, 0.6);
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.9rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cond-btn-volver:hover[b-nekt7ebfkp] {
    background-color: rgba(55, 71, 79, 0.12);
    color: rgba(55, 71, 79, 0.8);
}

/* ── MODAL DE VISTA PREVIA ───────────────────────────────────────── */

.cond-modal-backdrop[b-nekt7ebfkp] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.cond-modal[b-nekt7ebfkp] {
    background: #FFFFFF;
    border-radius: 0.75rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 860px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cond-modal-header[b-nekt7ebfkp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(55, 71, 79, 0.1);
    flex-shrink: 0;
}

.cond-modal-title[b-nekt7ebfkp] {
    font-family: var(--font-serif, 'Bitter', Georgia, serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: #37474F;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cond-modal-close[b-nekt7ebfkp] {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    border: none;
    background: transparent;
    color: rgba(55, 71, 79, 0.5);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cond-modal-close:hover[b-nekt7ebfkp] {
    background-color: rgba(55, 71, 79, 0.08);
    color: rgba(55, 71, 79, 0.8);
}

.cond-modal-body[b-nekt7ebfkp] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cond-modal-iframe[b-nekt7ebfkp] {
    width: 100%;
    flex: 1;
    min-height: 520px;
    border: none;
    display: block;
}

@media (max-width: 639px) {
    .cond-modal-iframe[b-nekt7ebfkp] {
        min-height: 340px;
    }
}
/* /Pages/Configuracion/Album/Alta.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   Alta.razor.css — Estilos del formulario de alta/edición de álbumes
   ════════════════════════════════════════════════════════════════
   Prefijo: cap- (Create Album Page) para evitar colisiones.

   Estructura:
     1. Contenedor de página y animación
     2. Card principal
     3. Cuerpo del formulario (campos, labels, inputs, contador)
     4. Campo de URL con ícono
     5. Foto de portada (zona de carga, preview, spinner)
     6. Período — grilla mes + año
     7. Footer de acciones (Volver + Borrador + Enviar)
     8. Mensajes de validación
     9. Responsive
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   1. CONTENEDOR DE PÁGINA Y ANIMACIÓN
   ════════════════════════════════════════════════════════════════ */

.cap-page[b-zlmgcc9mam] {
    min-height: 100vh;
    background-color: #F5F5F5;
    animation: capFadeIn-b-zlmgcc9mam .4s ease both;
}

.cap-spacer[b-zlmgcc9mam] {
    height: 1.5rem;
}

@media (min-width: 640px) {
    .cap-spacer[b-zlmgcc9mam] { height: 2.5rem; }
}

@keyframes capFadeIn-b-zlmgcc9mam {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ════════════════════════════════════════════════════════════════
   2. CARD PRINCIPAL
   ════════════════════════════════════════════════════════════════ */

.cap-card-outer[b-zlmgcc9mam] {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

@media (min-width: 640px) {
    .cap-card-outer[b-zlmgcc9mam] { padding: 0 1.5rem 4rem; }
}

.cap-card[b-zlmgcc9mam] {
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid #E8E4DD;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    overflow: hidden;
}


/* ════════════════════════════════════════════════════════════════
   3. CUERPO DEL FORMULARIO
   ════════════════════════════════════════════════════════════════ */

.cap-form-body[b-zlmgcc9mam] {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding: 2rem 1.5rem;
}

@media (min-width: 640px) {
    .cap-form-body[b-zlmgcc9mam] { padding: 2rem 2.5rem; }
}

.cap-field[b-zlmgcc9mam] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.cap-field-header[b-zlmgcc9mam] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cap-header-actions[b-zlmgcc9mam] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cap-label[b-zlmgcc9mam] {
    font-size: .875rem;
    font-weight: 600;
    color: #37474F;
    margin: 0;
}

.cap-required[b-zlmgcc9mam] {
    color: #D32F2F;
}

/* Contador de caracteres */
.cap-char-counter[b-zlmgcc9mam] {
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    user-select: none;
    color: rgba(55,71,79,.35);
    font-weight: 400;
    transition: color .15s, font-weight .15s;
}

.cap-char-counter.cap-char-near[b-zlmgcc9mam] {
    color: #D32F2F;
    font-weight: 600;
}

/* Input base */
.cap-input[b-zlmgcc9mam] {
    width: 100%;
    background: #FAFAF7;
    border: 1px solid #E0DBD1;
    border-radius: .75rem;
    padding: .75rem 1rem;
    font-size: .95rem;
    color: #37474F;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}

.cap-input[b-zlmgcc9mam]::placeholder {
    color: rgba(55,71,79,.30);
}

.cap-input:focus[b-zlmgcc9mam] {
    border-color: rgba(46,125,50,.40);
    box-shadow: 0 0 0 3px rgba(46,125,50,.14);
}

/* Input corto para el campo Año */
.cap-input-short[b-zlmgcc9mam] {
    max-width: 140px;
}

/* Hint descriptivo debajo de un campo */
.cap-hint[b-zlmgcc9mam] {
    font-size: .78rem;
    color: #78909C;
    line-height: 1.4;
}


/* ════════════════════════════════════════════════════════════════
   4. CAMPO DE URL CON ÍCONO
   ════════════════════════════════════════════════════════════════ */

.cap-url-wrapper[b-zlmgcc9mam] {
    position: relative;
}

.cap-url-icon[b-zlmgcc9mam] {
    position: absolute;
    left: .875rem;
    top: 50%;
    transform: translateY(-50%);
    color: #78909C;
    font-size: .875rem;
    pointer-events: none;
}

.cap-url-input[b-zlmgcc9mam] {
    padding-left: 2.5rem;
}


/* ════════════════════════════════════════════════════════════════
   5. FOTO DE PORTADA
   ════════════════════════════════════════════════════════════════ */

/* Zona de drop/clic para seleccionar imagen */
.cap-portada-zona[b-zlmgcc9mam] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem 1.5rem;
    border: 2px dashed #D0C9BC;
    border-radius: .75rem;
    background: #FAFAF7;
    cursor: pointer;
    text-align: center;
    transition: border-color .2s, background .2s;
}

.cap-portada-zona:hover[b-zlmgcc9mam] {
    border-color: rgba(46,125,50,.45);
    background: #F2F8F2;
}

.cap-portada-icon[b-zlmgcc9mam] {
    font-size: 2rem;
    color: #B0BEC5;
}

.cap-portada-texto[b-zlmgcc9mam] {
    font-size: .875rem;
    font-weight: 600;
    color: #37474F;
}

.cap-portada-subtexto[b-zlmgcc9mam] {
    font-size: .75rem;
    color: #90A4AE;
}

/* Ocultar el input nativo pero mantenerlo funcional */
[b-zlmgcc9mam] .cap-portada-input-oculto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

/* Vista previa cuando ya hay imagen */
.cap-portada-preview[b-zlmgcc9mam] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
}

.cap-portada-img[b-zlmgcc9mam] {
    width: 100%;
    max-width: 320px;
    max-height: 200px;
    object-fit: cover;
    border-radius: .625rem;
    border: 1px solid #E0DBD1;
}

/* Botón para cambiar la imagen ya subida */
.cap-btn-cambiar-portada[b-zlmgcc9mam] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    background: none;
    border: none;
    color: #2E7D32;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    padding: .25rem 0;
    font-family: inherit;
    transition: color .15s;
}

.cap-btn-cambiar-portada:hover[b-zlmgcc9mam] {
    color: #1B5E20;
    text-decoration: underline;
}

/* Estado de carga: spinner + texto */
.cap-portada-cargando[b-zlmgcc9mam] {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: 1rem;
    font-size: .875rem;
    color: #78909C;
    background: #FAFAF7;
    border: 1px solid #E0DBD1;
    border-radius: .75rem;
}


/* ════════════════════════════════════════════════════════════════
   6. PERÍODO (MES + AÑO EN GRILLA)
   ════════════════════════════════════════════════════════════════ */

.cap-periodo-grid[b-zlmgcc9mam] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 400px) {
    .cap-periodo-grid[b-zlmgcc9mam] {
        grid-template-columns: 1fr;
    }
}

/* Select de mes */
.cap-select[b-zlmgcc9mam] {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2378909C' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}


/* ════════════════════════════════════════════════════════════════
   7. FOOTER DE ACCIONES
   ════════════════════════════════════════════════════════════════ */

.cap-form-footer[b-zlmgcc9mam] {
    display: flex;
    flex-direction: column-reverse;
    gap: .75rem;
    padding-top: 1rem;
    border-top: 1px solid #F0EDE6;
}

@media (min-width: 640px) {
    .cap-form-footer[b-zlmgcc9mam] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.cap-footer-actions[b-zlmgcc9mam] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

@media (min-width: 480px) {
    .cap-footer-actions[b-zlmgcc9mam] {
        flex-direction: row;
        gap: .75rem;
    }
}

/* Botón Volver */
.cap-btn-back[b-zlmgcc9mam] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1.25rem;
    border-radius: .5rem;
    background: transparent;
    color: #78909C !important;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: background .15s, color .15s;
}

.cap-btn-back:hover[b-zlmgcc9mam] {
    background: #F5F5F5;
    color: #37474F !important;
}

/* Botón Guardar como Borrador */
.cap-btn-draft[b-zlmgcc9mam] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    padding: .625rem 1.25rem;
    border-radius: .5rem;
    background: #ECEFF1;
    color: #37474F;
    border: 1px solid #CFD8DC;
    font-size: .85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}

.cap-btn-draft:hover[b-zlmgcc9mam] {
    background: #CFD8DC;
    border-color: #B0BEC5;
}

.cap-btn-draft:disabled[b-zlmgcc9mam] {
    opacity: .6;
    cursor: not-allowed;
}

/* Botón Enviar a Revisión (submit principal) */
.cap-btn-submit[b-zlmgcc9mam] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    padding: .625rem 1.5rem;
    border-radius: .5rem;
    background: #2E7D32;
    color: #ffffff;
    border: none;
    font-size: .85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}

.cap-btn-submit:hover[b-zlmgcc9mam] {
    background: #1B5E20;
}

.cap-btn-submit:disabled[b-zlmgcc9mam] {
    opacity: .6;
    cursor: not-allowed;
}


/* ════════════════════════════════════════════════════════════════
   8. MENSAJES DE VALIDACIÓN
   ════════════════════════════════════════════════════════════════ */

[b-zlmgcc9mam] .validation-message {
    color: #D32F2F;
    font-size: .78rem;
    font-weight: 500;
    margin-top: .125rem;
}


/* ════════════════════════════════════════════════════════════════
   9. RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .cap-card-outer[b-zlmgcc9mam] {
        padding: 0 .5rem 3rem;
    }

    .cap-form-body[b-zlmgcc9mam] {
        padding: 1.25rem 1rem;
        gap: 1.25rem;
    }

    .cap-input[b-zlmgcc9mam] {
        font-size: .9rem;
        padding: .625rem .875rem;
    }

    .cap-btn-submit[b-zlmgcc9mam],
    .cap-btn-draft[b-zlmgcc9mam] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Configuracion/Album/Borradores.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   Borradores.razor.css — Estilos de la página de borradores de álbumes
   ════════════════════════════════════════════════════════════════
   Prefijo: adp- (Album Drafts Page) para evitar colisiones.

   Estructura:
     1. Página y wrapper
     2. Toolbar (búsqueda + conteo)
     3. Tabla de escritorio
     4. Badges de estado
     5. Botones de acción
     6. Tarjetas móvil
     7. Estado vacío
     8. Paginación
     9. Leyenda de acciones
    10. Spinner de carga
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   1. PÁGINA Y WRAPPER
   ════════════════════════════════════════════════════════════════ */

.adp-page[b-jajsy7v4k9] {
    min-height: 100vh;
    background-color: #F5F5F5;
    animation: adpFadeIn-b-jajsy7v4k9 .4s ease both;
}

.adp-outer[b-jajsy7v4k9] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

@media (min-width: 640px) {
    .adp-outer[b-jajsy7v4k9] { padding: 1.5rem 1.5rem 4rem; }
}

@keyframes adpFadeIn-b-jajsy7v4k9 {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0);    }
}


/* ════════════════════════════════════════════════════════════════
   2. TOOLBAR
   ════════════════════════════════════════════════════════════════ */

.adp-toolbar[b-jajsy7v4k9] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
    .adp-toolbar[b-jajsy7v4k9] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* Píldora de conteo */
.adp-count-pill[b-jajsy7v4k9] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem 1rem;
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: .5rem;
    font-size: .85rem;
}

.adp-count-icon[b-jajsy7v4k9] {
    color: #1565C0;
    font-size: .85rem;
}

.adp-count-num[b-jajsy7v4k9] {
    color: #263238;
    font-weight: 700;
}

.adp-count-label[b-jajsy7v4k9] {
    color: #78909C;
}

/* Input de búsqueda */
.adp-search-wrapper[b-jajsy7v4k9] {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
}

@media (min-width: 640px) {
    .adp-search-wrapper[b-jajsy7v4k9] { width: 21rem; }
}

.adp-search-icon[b-jajsy7v4k9] {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #78909C;
    font-size: .875rem;
    pointer-events: none;
}

.adp-search-input[b-jajsy7v4k9] {
    flex: 1;
    min-width: 0;
    padding: .625rem 1rem .625rem 2.25rem;
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: .5rem;
    font-size: .85rem;
    color: #37474F;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
}

.adp-search-input[b-jajsy7v4k9]::placeholder { color: rgba(55,71,79,.35); }

.adp-search-input:focus[b-jajsy7v4k9] {
    border-color: rgba(46,125,50,.40);
    box-shadow: 0 0 0 3px rgba(46,125,50,.14);
}

.adp-search-btn[b-jajsy7v4k9] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: 0 .875rem;
    height: 36px;
    background: var(--primary, #2E7D32);
    color: #fff;
    border: none;
    border-radius: .5rem;
    font-size: .84rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}

.adp-search-btn:hover[b-jajsy7v4k9]  { background: #1B5E20; }
.adp-search-btn:active[b-jajsy7v4k9] { transform: scale(.97); }


/* ════════════════════════════════════════════════════════════════
   3. TABLA DE ESCRITORIO
   ════════════════════════════════════════════════════════════════ */

.adp-table-card[b-jajsy7v4k9] {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
    margin-bottom: 1.25rem;
}

.adp-table[b-jajsy7v4k9] {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.adp-thead-row[b-jajsy7v4k9] {
    background-color: #FAFAFA;
    border-bottom: 1px solid #E0E0E0;
}

.adp-th[b-jajsy7v4k9] {
    padding: .875rem 1.25rem;
    text-align: left;
    color: #78909C;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    border: none;
}

.adp-th-date[b-jajsy7v4k9]    { width: 140px; }
.adp-th-year[b-jajsy7v4k9]    { width: 70px; }
.adp-th-author[b-jajsy7v4k9]  { width: 160px; }
.adp-th-state[b-jajsy7v4k9]   { width: 110px; }
.adp-th-actions[b-jajsy7v4k9] { width: 150px; text-align: right; }

.adp-tr[b-jajsy7v4k9] {
    border-bottom: 1px solid #F0F0F0;
    transition: background-color .1s;
}

.adp-tr:last-child[b-jajsy7v4k9] { border-bottom: none; }
.adp-tr:hover[b-jajsy7v4k9] { background-color: #FAFAFA; }

.adp-td[b-jajsy7v4k9] {
    padding: 1rem 1.25rem;
    border: none;
    vertical-align: middle;
}

.adp-td-actions[b-jajsy7v4k9] { text-align: right; }

.adp-title-cell[b-jajsy7v4k9] {
    color: #263238;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.4;
}

.adp-muted-cell[b-jajsy7v4k9] {
    color: #78909C;
    font-size: .85rem;
}


/* ════════════════════════════════════════════════════════════════
   4. BADGE DE ESTADO
   ════════════════════════════════════════════════════════════════ */

.adp-badge-draft[b-jajsy7v4k9] {
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: 9999px;
    background-color: #E3F2FD;
    color: #1565C0;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.adp-badge-sm[b-jajsy7v4k9] {
    padding: .1rem .5rem;
    font-size: .7rem;
    flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════════
   5. BOTONES DE ACCIÓN
   ════════════════════════════════════════════════════════════════ */

.adp-actions[b-jajsy7v4k9] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
}

.adp-action-btn[b-jajsy7v4k9] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .5rem;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0625rem;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-decoration: none !important;
    line-height: 1;
    padding: 0;
}

.adp-action-edit[b-jajsy7v4k9] { color: #F9A825; }
.adp-action-edit:hover[b-jajsy7v4k9] {
    background-color: #FFF8E1;
    color: #F9A825 !important;
}

.adp-action-delete[b-jajsy7v4k9] { color: #D32F2F; }
.adp-action-delete:hover[b-jajsy7v4k9] { background-color: #FFEBEE; }

.adp-action-publish[b-jajsy7v4k9] { color: #2E7D32; }
.adp-action-publish:hover[b-jajsy7v4k9] { background-color: #E8F5E9; }


/* ════════════════════════════════════════════════════════════════
   6. TARJETAS MÓVILES
   ════════════════════════════════════════════════════════════════ */

.adp-mobile-list[b-jajsy7v4k9] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.adp-mobile-card[b-jajsy7v4k9] {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    transition: box-shadow .15s;
}

.adp-mobile-card:hover[b-jajsy7v4k9] {
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.adp-mobile-header[b-jajsy7v4k9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}

.adp-mobile-meta[b-jajsy7v4k9] {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .8rem;
    color: #78909C;
}

.adp-meta-dot[b-jajsy7v4k9] {
    color: #B0BEC5;
    font-size: .7rem;
}

.adp-mobile-actions[b-jajsy7v4k9] {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding-top: .25rem;
    border-top: 1px solid #F0F0F0;
}


/* ════════════════════════════════════════════════════════════════
   7. ESTADO VACÍO
   ════════════════════════════════════════════════════════════════ */

.adp-empty[b-jajsy7v4k9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 1.5rem;
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: 1rem;
}

.adp-empty-icon-box[b-jajsy7v4k9] {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: #E8F5E9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.adp-empty-icon[b-jajsy7v4k9] {
    font-size: 1.75rem;
    color: #2E7D32;
}

.adp-empty-title[b-jajsy7v4k9] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #263238;
    margin: 0 0 .5rem;
}

.adp-empty-text[b-jajsy7v4k9] {
    font-size: .875rem;
    color: #78909C;
    max-width: 28rem;
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

.adp-btn-create[b-jajsy7v4k9] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1.25rem;
    border-radius: .5rem;
    background-color: #2E7D32;
    color: #ffffff !important;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: background .15s;
    white-space: nowrap;
}

.adp-btn-create:hover[b-jajsy7v4k9] {
    background-color: #1B5E20;
    color: #ffffff !important;
}


/* ════════════════════════════════════════════════════════════════
   8. PAGINACIÓN
   ════════════════════════════════════════════════════════════════ */

.adp-pagination[b-jajsy7v4k9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding: 1.5rem 0 .5rem;
}

.adp-pg-btn[b-jajsy7v4k9] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    border: 1px solid #E0E0E0;
    background: #ffffff;
    color: #37474F;
    font-size: .84rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.adp-pg-btn:hover:not(:disabled)[b-jajsy7v4k9] {
    background: #FAFAFA;
    border-color: #BDBDBD;
}

.adp-pg-disabled[b-jajsy7v4k9] {
    opacity: .4;
    cursor: not-allowed;
}

.adp-pg-btn-text[b-jajsy7v4k9] {
    display: none;
}

@media (min-width: 640px) {
    .adp-pg-btn-text[b-jajsy7v4k9] { display: inline; }
}

.adp-pg-numbers[b-jajsy7v4k9] {
    display: flex;
    align-items: center;
    gap: .125rem;
}

.adp-pg-num[b-jajsy7v4k9] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .5rem;
    border: 1px solid transparent;
    background: transparent;
    color: #546E7A;
    font-size: .84rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, color .12s, border-color .12s;
}

.adp-pg-num:hover:not(.adp-pg-num-active)[b-jajsy7v4k9] {
    background: #F5F5F5;
    border-color: #E0E0E0;
}

.adp-pg-num-active[b-jajsy7v4k9] {
    background: #2E7D32;
    color: #ffffff;
    border-color: #2E7D32;
    font-weight: 700;
    cursor: default;
}

.adp-pg-ellipsis[b-jajsy7v4k9] {
    width: 2.25rem;
    text-align: center;
    color: #78909C;
    font-size: .9rem;
    user-select: none;
}

.adp-pg-info[b-jajsy7v4k9] {
    text-align: center;
    font-size: .8rem;
    color: #78909C;
    margin: .25rem 0 0;
}


/* ════════════════════════════════════════════════════════════════
   9. LEYENDA DE ACCIONES
   ════════════════════════════════════════════════════════════════ */

.adp-legend[b-jajsy7v4k9] {
    margin-top: 1.5rem;
    border-top: 1px solid #E0E0E0;
    padding-top: 1rem;
}

.adp-legend-title[b-jajsy7v4k9] {
    font-size: .78rem;
    font-weight: 700;
    color: #78909C;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 .75rem;
}

.adp-legend-items[b-jajsy7v4k9] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.adp-legend-item[b-jajsy7v4k9] {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .8rem;
    color: #546E7A;
}

.adp-legend-edit[b-jajsy7v4k9]    { color: #F9A825; }
.adp-legend-delete[b-jajsy7v4k9]  { color: #D32F2F; }
.adp-legend-publish[b-jajsy7v4k9] { color: #2E7D32; }


/* ════════════════════════════════════════════════════════════════
   10. SPINNER DE CARGA
   ════════════════════════════════════════════════════════════════ */

.adp-loading[b-jajsy7v4k9] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
}

.adp-spinner[b-jajsy7v4k9] {
    width: 2.5rem;
    height: 2.5rem;
    color: #2E7D32;
}
/* /Pages/Configuracion/Album/Panel.razor.rz.scp.css */
/*
 * Panel.razor.css — Panel de administración de álbumes de fotos
 * Prefijo: amp- (Album Management Page)
 *
 * Paleta:
 *   Fondo de página   #F5F5F5
 *   Superficie card   #FFFFFF
 *   Título            #263238
 *   Cuerpo            #37474F
 *   Secundario        #78909C
 *   Borde             #E0E0E0
 *   Borde suave       #F0F0F0
 *   Verde scout       #2E7D32 / #1B5E20
 *   Ámbar             #F57F17 / #FFF8E1
 *   Rojo              #D32F2F / #FFEBEE
 *   Azul borrador     #1565C0 / #E3F2FD
 */


/* ═══════════════════════════════════════════════════════════════
   PÁGINA
   ═══════════════════════════════════════════════════════════════ */

.amp-page[b-7zw3w172i5] {
    min-height: 100vh;
    background-color: #F5F5F5;
    animation: ampFadeIn-b-7zw3w172i5 .4s ease both;
}

.amp-outer[b-7zw3w172i5] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

@media (min-width: 640px) {
    .amp-outer[b-7zw3w172i5] { padding: 1.5rem 1.5rem 4rem; }
}

@keyframes ampFadeIn-b-7zw3w172i5 {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0);    }
}


/* ═══════════════════════════════════════════════════════════════
   TOOLBAR: TABS + BUSCADOR
   ═══════════════════════════════════════════════════════════════ */

.amp-toolbar[b-7zw3w172i5] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
    .amp-toolbar[b-7zw3w172i5] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}


/* ═══════════════════════════════════════════════════════════════
   TABLA DE ESCRITORIO
   ═══════════════════════════════════════════════════════════════ */

.amp-table-card[b-7zw3w172i5] {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
    margin-bottom: 1.25rem;
}

.amp-table[b-7zw3w172i5] {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.amp-thead-row[b-7zw3w172i5] {
    background-color: #FAFAFA;
    border-bottom: 1px solid #E0E0E0;
}

.amp-th[b-7zw3w172i5] {
    padding: .875rem 1.25rem;
    text-align: left;
    color: #78909C;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    border: none;
}

.amp-th-date[b-7zw3w172i5]    { width: 120px; }
.amp-th-year[b-7zw3w172i5]    { width: 70px; }
.amp-th-author[b-7zw3w172i5]  { width: 160px; }
.amp-th-state[b-7zw3w172i5]   { width: 110px; }
.amp-th-actions[b-7zw3w172i5] { width: 180px; text-align: right; }

.amp-tr[b-7zw3w172i5] {
    border-bottom: 1px solid #F0F0F0;
    transition: background-color .1s;
}

.amp-tr:last-child[b-7zw3w172i5] { border-bottom: none; }
.amp-tr:hover[b-7zw3w172i5]      { background-color: #FAFAFA; }

.amp-td[b-7zw3w172i5] {
    padding: 1rem 1.25rem;
    border: none;
    vertical-align: middle;
}

.amp-td-actions[b-7zw3w172i5] { text-align: right; }

.amp-title-cell[b-7zw3w172i5] {
    color: #263238;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.4;
}

.amp-muted-cell[b-7zw3w172i5] {
    color: #78909C;
    font-size: .85rem;
}


/* ═══════════════════════════════════════════════════════════════
   BADGES DE ESTADO
   ═══════════════════════════════════════════════════════════════ */

.amp-badge[b-7zw3w172i5] {
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.amp-badge-sm[b-7zw3w172i5] {
    padding: .1rem .5rem;
    font-size: .7rem;
    flex-shrink: 0;
}

.amp-badge-borrador[b-7zw3w172i5]   { background-color: #E3F2FD; color: #1565C0; }
.amp-badge-pendiente[b-7zw3w172i5]  { background-color: #FFF8E1; color: #F57F17; }
.amp-badge-autorizado[b-7zw3w172i5] { background-color: #E8F5E9; color: #2E7D32; }
.amp-badge-eliminado[b-7zw3w172i5]  { background-color: #FFEBEE; color: #D32F2F; }


/* ═══════════════════════════════════════════════════════════════
   BOTONES DE ACCIÓN
   ═══════════════════════════════════════════════════════════════ */

.amp-actions[b-7zw3w172i5] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
}

.amp-action-btn[b-7zw3w172i5] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .5rem;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0625rem;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-decoration: none !important;
    line-height: 1;
    padding: 0;
}

.amp-action-preview[b-7zw3w172i5] { color: #546E7A; }
.amp-action-preview:hover[b-7zw3w172i5] {
    background-color: #ECEFF1;
    color: #546E7A !important;
}

.amp-action-edit[b-7zw3w172i5] { color: #F9A825; }
.amp-action-edit:hover[b-7zw3w172i5] {
    background-color: #FFF8E1;
    color: #F9A825 !important;
}

.amp-action-delete[b-7zw3w172i5] { color: #D32F2F; }
.amp-action-delete:hover[b-7zw3w172i5] { background-color: #FFEBEE; }

.amp-action-authorize[b-7zw3w172i5] { color: #2E7D32; }
.amp-action-authorize:hover[b-7zw3w172i5] { background-color: #E8F5E9; }


/* ═══════════════════════════════════════════════════════════════
   TARJETAS MÓVILES
   ═══════════════════════════════════════════════════════════════ */

.amp-mobile-list[b-7zw3w172i5] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.amp-mobile-card[b-7zw3w172i5] {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: .75rem;
    padding: 1rem;
}

.amp-mobile-header[b-7zw3w172i5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}

.amp-mobile-meta[b-7zw3w172i5] {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #78909C;
    font-size: .8rem;
    margin-bottom: .75rem;
    flex-wrap: wrap;
}

.amp-meta-dot[b-7zw3w172i5] { opacity: .4; }

.amp-mobile-actions[b-7zw3w172i5] {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding-top: .75rem;
    border-top: 1px solid #F0F0F0;
}


/* ═══════════════════════════════════════════════════════════════
   PAGINACIÓN
   ═══════════════════════════════════════════════════════════════ */

.amp-pagination[b-7zw3w172i5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .75rem 0 .25rem;
}

.amp-pg-numbers[b-7zw3w172i5] {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: wrap;
}

.amp-pg-btn[b-7zw3w172i5] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border-radius: .375rem;
    border: 1px solid #E0E0E0;
    background: #ffffff;
    color: #37474F;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}

.amp-pg-btn:hover:not(:disabled)[b-7zw3w172i5] {
    background: #F5F5F5;
    border-color: #BDBDBD;
}

.amp-pg-btn.amp-pg-disabled[b-7zw3w172i5],
.amp-pg-btn:disabled[b-7zw3w172i5] {
    opacity: .4;
    cursor: not-allowed;
}

@media (max-width: 360px) {
    .amp-pg-btn-text[b-7zw3w172i5] { display: none; }
}

.amp-pg-num[b-7zw3w172i5] {
    min-width: 2rem;
    height: 2rem;
    border-radius: .375rem;
    border: 1px solid #E0E0E0;
    background: #ffffff;
    color: #37474F;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    padding: 0 .4rem;
}

.amp-pg-num:hover[b-7zw3w172i5] {
    background: #F5F5F5;
    border-color: #BDBDBD;
}

.amp-pg-num.amp-pg-num-active[b-7zw3w172i5] {
    background: #2E7D32;
    color: #ffffff;
    border-color: #2E7D32;
    font-weight: 700;
    pointer-events: none;
}

.amp-pg-ellipsis[b-7zw3w172i5] {
    color: #90A4AE;
    font-size: .9rem;
    padding: 0 .2rem;
    user-select: none;
}

.amp-pg-info[b-7zw3w172i5] {
    text-align: center;
    color: #90A4AE;
    font-size: .78rem;
    margin: .25rem 0 .75rem;
}


/* ═══════════════════════════════════════════════════════════════
   LEYENDA DE ACCIONES
   ═══════════════════════════════════════════════════════════════ */

.amp-legend[b-7zw3w172i5] {
    background: #ffffff;
    border: 1px solid #F0F0F0;
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    margin-top: 2rem;
}

.amp-legend-title[b-7zw3w172i5] {
    color: #78909C;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 .75rem;
}

.amp-legend-items[b-7zw3w172i5] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
}

.amp-legend-item[b-7zw3w172i5] {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #37474F;
    font-size: .82rem;
}

.amp-legend-preview[b-7zw3w172i5]   { color: #546E7A; font-size: .9375rem; }
.amp-legend-edit[b-7zw3w172i5]      { color: #F9A825; font-size: .9375rem; }
.amp-legend-delete[b-7zw3w172i5]    { color: #D32F2F; font-size: .9375rem; }
.amp-legend-authorize[b-7zw3w172i5] { color: #2E7D32; font-size: .9375rem; }


/* ═══════════════════════════════════════════════════════════════
   SPINNER DE CARGA
   ═══════════════════════════════════════════════════════════════ */

.amp-loading[b-7zw3w172i5] {
    display: flex;
    justify-content: center;
    padding: 5rem 0;
}

.amp-spinner[b-7zw3w172i5] {
    color: #2E7D32;
    width: 2.5rem;
    height: 2.5rem;
}
/* /Pages/Configuracion/Asistencia/Alta.razor.rz.scp.css */
/* ==========================================================================
   Alta.razor.css — Estilos de la pantalla de carga de asistencia
   ==========================================================================
   Este archivo define los estilos del componente Alta.razor con aislamiento
   de CSS de Blazor: las reglas se aplican únicamente a los elementos
   renderizados por Alta.razor y no afectan al resto de la aplicación.

   Prefijo: asa-  (Asistencia Alta)
   Paleta:  #F5F5F5 bg / #FFFFFF card / #263238 título / #37474F cuerpo
            #78909C muted / #E0E0E0 borde / #2E7D32 verde / #D32F2F rojo
   Breakpoint responsive: 640 px

   Decisiones de diseño relevantes:
   · El toggle .asa-toggle tiene tres variantes visuales (.asa-toggle-empty,
     .asa-toggle-present, .asa-toggle-absent) que se aplican dinámicamente
     desde el code-behind mediante ClaseToggle().
   · En desktop (≥ 641px) las filas usan padding reducido (.32rem) para que
     listas largas sean más densas y cómodas de revisar de un vistazo.
   · En móvil (≤ 640px) el botón Guardar ocupa el ancho completo para
     facilitar el toque con el pulgar.
   ========================================================================== */

/* ─── Animación de entrada ───────────────────────────────────────────────── */
@keyframes asaFade-b-fql72qkqbr {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Página / contenedor externo ───────────────────────────────────────── */
.asa-page[b-fql72qkqbr] {
    min-height: 100vh;
    background: #F5F5F5;
    animation: asaFade-b-fql72qkqbr .4s ease both;
}

.asa-outer[b-fql72qkqbr] {
    max-width: 700px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

/* ─── Botón Volver ──────────────────────────────────────────────────────── */
.asa-back-btn[b-fql72qkqbr] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: 1.25rem;
    font-size: .82rem;
    font-weight: 600;
    color: #37474F;
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: .5rem;
    padding: .35rem .8rem;
    transition: background .2s, color .2s;
}

.asa-back-btn:hover[b-fql72qkqbr] {
    background: #F0F4F0;
    color: #2E7D32;
    text-decoration: none;
}

.asa-back-icon[b-fql72qkqbr] {
    font-size: 1rem;
    line-height: 1;
}

/* ─── Encabezado ────────────────────────────────────────────────────────── */
.asa-page-header[b-fql72qkqbr] {
    margin-bottom: 1.1rem;
}

.asa-page-title[b-fql72qkqbr] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #263238;
    margin: 0 0 .2rem;
}

.asa-page-date[b-fql72qkqbr] {
    font-size: .88rem;
    color: #78909C;
    margin: 0;
}

.asa-page-date strong[b-fql72qkqbr] {
    color: #37474F;
}

/* ─── Estado de carga ───────────────────────────────────────────────────── */
.asa-loading[b-fql72qkqbr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 3rem 1rem;
}

.asa-spinner[b-fql72qkqbr] {
    width: 36px;
    height: 36px;
    border: 3px solid #E0E0E0;
    border-top-color: #2E7D32;
    border-radius: 50%;
    animation: asaSpin-b-fql72qkqbr .8s linear infinite;
}

@keyframes asaSpin-b-fql72qkqbr {
    to { transform: rotate(360deg); }
}

.asa-loading-text[b-fql72qkqbr] {
    font-size: .85rem;
    color: #78909C;
}

/* ─── Estado vacío ──────────────────────────────────────────────────────── */
.asa-empty[b-fql72qkqbr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 3.5rem 1rem;
    color: #78909C;
}

.asa-empty-icon[b-fql72qkqbr] {
    font-size: 2.8rem;
    line-height: 1;
}

.asa-empty-text[b-fql72qkqbr] {
    font-size: .9rem;
    margin: 0;
}

/* ─── Barra de resumen ──────────────────────────────────────────────────── */
.asa-summary-bar[b-fql72qkqbr] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: .75rem;
    padding: .65rem 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.asa-summary-item[b-fql72qkqbr] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: #78909C;
}

.asa-summary-item strong[b-fql72qkqbr] {
    color: #37474F;
    font-weight: 700;
}

/* Punto de color según estado */
.asa-summary-dot[b-fql72qkqbr] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.asa-summary-present .asa-summary-dot[b-fql72qkqbr] { background: #2E7D32; }
.asa-summary-absent  .asa-summary-dot[b-fql72qkqbr] { background: #D32F2F; }
.asa-summary-unmarked .asa-summary-dot[b-fql72qkqbr] { background: #B0BEC5; }

/* ─── Tarjeta de lista ──────────────────────────────────────────────────── */
.asa-list-card[b-fql72qkqbr] {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
    margin-bottom: 1.25rem;
}

/* ─── Fila de un scout ──────────────────────────────────────────────────── */
.asa-list-row[b-fql72qkqbr] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem 1rem;
    border-bottom: 1px solid #F5F5F5;
    transition: background .12s;
}

/* Desktop: filas más compactas */
@media (min-width: 641px) {
    .asa-list-row[b-fql72qkqbr] {
        padding: .32rem 1rem;
        gap: .55rem;
    }
}

.asa-list-row:last-child[b-fql72qkqbr] {
    border-bottom: none;
}

.asa-list-row:hover[b-fql72qkqbr] {
    background: #F8FBF8;
}

.asa-row-num[b-fql72qkqbr] {
    min-width: 26px;
    font-size: .72rem;
    font-weight: 700;
    color: #B0BEC5;
    text-align: right;
    flex-shrink: 0;
}

.asa-row-name[b-fql72qkqbr] {
    flex: 1;
    font-size: .88rem;
    font-weight: 600;
    color: #37474F;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Toggle de 3 estados ───────────────────────────────────────────────── */
.asa-toggle[b-fql72qkqbr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: .45rem;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
    border: 1.5px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, transform .1s;
    outline: none;
}

.asa-toggle:active[b-fql72qkqbr] {
    transform: scale(.92);
}

/* Sin marcar */
.asa-toggle-empty[b-fql72qkqbr] {
    background: #FFFFFF;
    border-color: #D8D8D8;
    color: #B0BEC5;
}

.asa-toggle-empty:hover[b-fql72qkqbr] {
    border-color: #2E7D32;
    color: #2E7D32;
}

/* Presente */
.asa-toggle-present[b-fql72qkqbr] {
    background: #2E7D32;
    border-color: transparent;
    color: #FFFFFF;
}

.asa-toggle-present:hover[b-fql72qkqbr] {
    background: #256327;
}

/* Ausente */
.asa-toggle-absent[b-fql72qkqbr] {
    background: #D32F2F;
    border-color: transparent;
    color: #FFFFFF;
}

.asa-toggle-absent:hover[b-fql72qkqbr] {
    background: #B71C1C;
}

/* ─── Acciones ──────────────────────────────────────────────────────────── */
.asa-actions[b-fql72qkqbr] {
    display: flex;
    justify-content: flex-end;
}

/* Botón Guardar */
.asa-save-btn[b-fql72qkqbr] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #2E7D32;
    color: #FFFFFF;
    border: none;
    border-radius: .6rem;
    padding: .6rem 1.4rem;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, box-shadow .2s;
    box-shadow: 0 2px 8px rgba(46,125,50,.25);
}

.asa-save-btn:hover:not(:disabled)[b-fql72qkqbr] {
    background: #256327;
    box-shadow: 0 4px 12px rgba(46,125,50,.35);
}

.asa-save-btn:disabled[b-fql72qkqbr] {
    opacity: .65;
    cursor: not-allowed;
}

/* Spinner dentro del botón Guardar */
.asa-save-spinner[b-fql72qkqbr] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: asaSpin-b-fql72qkqbr .7s linear infinite;
    flex-shrink: 0;
}

/* ─── Responsive ≤ 640px ────────────────────────────────────────────────── */
@media (max-width: 640px) {

    .asa-outer[b-fql72qkqbr] {
        padding: 1rem .75rem 3rem;
    }

    .asa-page-title[b-fql72qkqbr] {
        font-size: 1.2rem;
    }

    .asa-list-row[b-fql72qkqbr] {
        padding: .55rem .75rem;
        gap: .5rem;
    }

    .asa-row-name[b-fql72qkqbr] {
        font-size: .83rem;
    }

    .asa-toggle[b-fql72qkqbr] {
        width: 30px;
        height: 30px;
        font-size: .72rem;
    }

    .asa-summary-bar[b-fql72qkqbr] {
        gap: .4rem 1rem;
        padding: .55rem .75rem;
    }

    .asa-actions[b-fql72qkqbr] {
        justify-content: stretch;
    }

    .asa-save-btn[b-fql72qkqbr] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Configuracion/Asistencia/Panel.razor.rz.scp.css */
/* ==========================================================================
   Panel.razor.css — Estilos del panel de control de asistencia
   ==========================================================================
   Este archivo define los estilos del componente Panel.razor con aislamiento
   de CSS de Blazor: las reglas se aplican únicamente a los elementos
   renderizados por Panel.razor y no afectan al resto de la aplicación.

   Prefijo: asp-  (Asistencia Panel)
   Paleta:  #F5F5F5 bg / #FFFFFF card / #263238 título / #37474F cuerpo
            #78909C muted / #E0E0E0 borde / #2E7D32 verde / #D32F2F rojo
   Breakpoint responsive: 640 px

   Decisiones de diseño relevantes:
   · asp-table-wrap usa overflow:clip para recortar el border-radius sin crear
     un scroll context, preservando el comportamiento de position:sticky
     del thead y la scrollbar horizontal de asp-table-scroll.
   · asp-thead-sticky usa position:sticky + top:0 para pegarse al viewport
     al hacer scroll vertical de página (no existe overflow-y intermedio).
   · Las columnas sticky-left (nombre) y sticky-right (flecha) usan z-index
     escalonados para que se solapen correctamente al hacer scroll horizontal.
   · asp-sticky-bar-outer tiene display:none porque el navegador ya expone
     la scrollbar nativa de asp-table-scroll; el elemento HTML se mantiene
     para que el JS de sincronización no lance errores al buscarlo por ID.
   ========================================================================== */

/* ─── Animación de entrada ───────────────────────────────────────────────── */
@keyframes aspFade-b-8mtrexhuq8 {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Página / contenedor externo ───────────────────────────────────────── */
.asp-page[b-8mtrexhuq8] {
    min-height: 100vh;
    background: #F5F5F5;
    animation: aspFade-b-8mtrexhuq8 .4s ease both;
}

.asp-outer[b-8mtrexhuq8] {
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

/* ─── Botón Volver ──────────────────────────────────────────────────────── */
.asp-back-btn[b-8mtrexhuq8] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: 1.25rem;
    font-size: .82rem;
    font-weight: 600;
    color: #37474F;
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: .5rem;
    padding: .35rem .8rem;
    transition: background .2s, color .2s;
}

.asp-back-btn:hover[b-8mtrexhuq8] {
    background: #F0F4F0;
    color: #2E7D32;
    text-decoration: none;
}

.asp-back-icon[b-8mtrexhuq8] {
    font-size: 1rem;
    line-height: 1;
}

/* ─── Encabezado de página ──────────────────────────────────────────────── */
.asp-page-header[b-8mtrexhuq8] {
    margin-bottom: 1.25rem;
}

.asp-page-title[b-8mtrexhuq8] {
    font-size: 1.55rem;
    font-weight: 700;
    color: #263238;
    margin: 0 0 .25rem;
}

.asp-page-subtitle[b-8mtrexhuq8] {
    font-size: .88rem;
    color: #78909C;
    margin: 0;
}

/* ─── Tarjeta de filtros ────────────────────────────────────────────────── */
.asp-filter-card[b-8mtrexhuq8] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    align-items: flex-end;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: .75rem;
    padding: .85rem 1.1rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.asp-filter-group[b-8mtrexhuq8] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.asp-filter-label[b-8mtrexhuq8] {
    font-size: .72rem;
    font-weight: 600;
    color: #78909C;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── CHECKBOX FILTRO ───────────────────────────────────────── */

.asp-filter-check[b-8mtrexhuq8] {
    min-width: 140px;
}

.asp-checkbox-container[b-8mtrexhuq8] {
    height: 38px;
    display: flex;
    align-items: center;
}

.asp-checkbox-label[b-8mtrexhuq8] {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0px;
}

.asp-checkbox[b-8mtrexhuq8] {
    width: 1.1rem;
    height: 1.1rem;
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid #E0E0E0;
    border-radius: 0.375rem;
    background: #ffffff;
    cursor: pointer;
    position: relative;
    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    margin: 0;
}

.asp-checkbox:checked[b-8mtrexhuq8] {
    background-color: #2E7D32;
    border-color: #2E7D32;
}

/* Icono del check con Font Awesome */
.asp-checkbox:checked[b-8mtrexhuq8]::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: white;
    font-size: 0.6rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.asp-checkbox:focus[b-8mtrexhuq8] {
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12);
    border-color: #2E7D32;
}

.asp-checkbox-text[b-8mtrexhuq8] {
    color: #37474F;
    font-size: .82rem;
    font-weight: 500;
    transition: color 0.2s;
}

.asp-checkbox:hover[b-8mtrexhuq8] {
    border-color: #2E7D32;
}

.asp-checkbox:checked + .asp-checkbox-text[b-8mtrexhuq8] {
    color: #2E7D32;
    font-weight: 600;
}

/* ─── Select estilizado ─────────────────────────────────────────────────── */
.asp-select[b-8mtrexhuq8] {
    appearance: none;
    background: #F5F5F5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2378909C' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .7rem center;
    border: 1px solid #E0E0E0;
    border-radius: .5rem;
    padding: .42rem 2rem .42rem .75rem;
    font-size: .85rem;
    color: #37474F;
    cursor: pointer;
    transition: border-color .2s;
    min-width: 140px;
}

.asp-select:focus[b-8mtrexhuq8] {
    outline: none;
    border-color: #2E7D32;
    box-shadow: 0 0 0 3px rgba(46,125,50,.12);
}

/* ─── Estado de carga ───────────────────────────────────────────────────── */
.asp-loading[b-8mtrexhuq8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 3rem 1rem;
}

.asp-spinner[b-8mtrexhuq8] {
    width: 36px;
    height: 36px;
    border: 3px solid #E0E0E0;
    border-top-color: #2E7D32;
    border-radius: 50%;
    animation: aspSpin-b-8mtrexhuq8 .8s linear infinite;
}

@keyframes aspSpin-b-8mtrexhuq8 {
    to { transform: rotate(360deg); }
}

.asp-loading-text[b-8mtrexhuq8] {
    font-size: .85rem;
    color: #78909C;
}

/* ─── Estado vacío ──────────────────────────────────────────────────────── */
.asp-empty[b-8mtrexhuq8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.asp-empty-icon[b-8mtrexhuq8] {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 1.25rem;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.20));
    opacity: 0.35;
}

.asp-empty-title[b-8mtrexhuq8] {
    color: #263238;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    letter-spacing: -.01em;
}

.asp-empty-text[b-8mtrexhuq8] {
    color: #78909C;
    font-size: .875rem;
    margin: 0;
    max-width: 320px;
}

/* ─── Contenedor de tabla ───────────────────────────────────────────────── */
.asp-table-wrap[b-8mtrexhuq8] {
    border-radius: 1rem;
    /* overflow:clip recorta el border-radius pero NO crea un scroll container,
       lo que permite que position:sticky del thead y la scrollbar inferior
       funcionen correctamente respecto al scroll de página. */
    overflow: clip;
    border: 1px solid #E0E0E0;
    background: #F4F4F4;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
    margin-bottom: 0;
}

.asp-table-scroll[b-8mtrexhuq8] {
    overflow-x: auto;
    /* overflow-y: clip para que el navegador no fuerce overflow-y a 'auto'
       implícitamente, lo que crearía un scroll context y romperseía el sticky
       del thead respecto al scroll de página. */
    overflow-y: clip;
    -webkit-overflow-scrolling: touch;
}

.asp-table[b-8mtrexhuq8] {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}

/* ─── Cabeceras ─────────────────────────────────────────────────────────── */

/* thead sticky: se pega al tope del contenedor de scroll de la tabla. */
.asp-thead-sticky[b-8mtrexhuq8] {
    position: sticky;
    top: 0;
    z-index: 25;
}

/* Todos los th del thead necesitan background para tapar el contenido que pasa por debajo */
.asp-thead-sticky th[b-8mtrexhuq8] {
    background: #FAFAFA;
}

/* Columna sticky-left: Scout (N° + nombre) — z-index mayor que thead para solapar otras celdas */
.asp-th-name[b-8mtrexhuq8] {
    position: sticky;
    left: 0;
    z-index: 30;
    width: 260px;
    min-width: 260px;
    background: #FAFAFA;
    border-right: 2px solid #E0E0E0;
    border-bottom: 2px solid #E0E0E0;
    padding: 8px 10px 8px 12px;
    font-size: .78rem;
    font-weight: 700;
    color: #263238;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    box-shadow: 2px 0 6px rgba(0,0,0,.04);
}

/* Botón toggle de columna nombre — solo visible en móvil (oculto en desktop) */
.asp-name-toggle-btn[b-8mtrexhuq8] {
    display: none;   /* se activa solo en @media ≤640px */
}

/* Wrapper interno: display:flex solo sobre el div, no sobre el th
   (aplicar flex directamente en un <th> saca a la celda del flujo de tabla) */
.asp-th-name-inner[b-8mtrexhuq8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .25rem;
    width: 100%;
}

/* El texto puede colapsar, la flecha no */
.asp-th-name-text[b-8mtrexhuq8] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Botones de flecha en cabecera ─────────────────────────────────────── */
.asp-inline-arrow[b-8mtrexhuq8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: .3rem;
    background: rgba(46,125,50,.12);
    border: none;
    color: #2E7D32;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
    padding: 0;
}

.asp-inline-arrow:hover[b-8mtrexhuq8] {
    background: #2E7D32;
    color: #FFFFFF;
}

/* ─── Columna sticky-right: contiene la flecha derecha ──────────────────── */
.asp-th-arrow-right[b-8mtrexhuq8] {
    position: sticky;
    right: 0;
    z-index: 20;
    width: 36px;
    min-width: 36px;
    background: linear-gradient(to left, #FAFAFA 40%, rgba(250,250,250,0));
    border-bottom: 2px solid #E0E0E0;
    padding: 4px;
    text-align: center;
    vertical-align: middle;
}

.asp-td-arrow-right[b-8mtrexhuq8] {
    position: sticky;
    right: 0;
    z-index: 5;
    width: 36px;
    min-width: 36px;
    padding: 0;
    background: inherit; /* hereda zebra de la fila */
}

/* Columnas de fecha */
.asp-th-date[b-8mtrexhuq8] {
    width: 46px;
    min-width: 46px;
    max-width: 46px;
    background: #FAFAFA;
    border-bottom: 2px solid #E0E0E0;
    border-left: 1px solid #EFEFEF;
    padding: 6px 2px;
    text-align: center;
    vertical-align: middle;
}

/* Columnas fantasma */
.asp-th-ghost[b-8mtrexhuq8] {
    width: 46px;
    min-width: 46px;
    background: #FAFAFA;
    border-bottom: 2px solid #EBEBEB;
    border-left: 1px solid #EBEBEB;
}

/* ─── Enlace de fecha ───────────────────────────────────────────────────── */
.asp-date-link[b-8mtrexhuq8] {
    display: block;
    color: #1565C0;
    font-size: .68rem;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.2;
    padding: 2px 0;
    transition: color .15s;
}

.asp-date-link:hover[b-8mtrexhuq8] {
    color: #0D47A1;
    text-decoration: underline;
}

/* ─── Filas ─────────────────────────────────────────────────────────────── */
.asp-row-even[b-8mtrexhuq8] { background: #FFFFFF; }
.asp-row-odd[b-8mtrexhuq8]  { background: #FAFCFA; }

.asp-row-even:hover[b-8mtrexhuq8],
.asp-row-odd:hover[b-8mtrexhuq8] {
    background: #F0F7F0;
}

/* ─── Celda sticky: Scout ───────────────────────────────────────────────── */
.asp-td-name[b-8mtrexhuq8] {
    position: sticky;
    left: 0;
    z-index: 10;
    width: 260px;
    min-width: 260px;
    border-right: 1px solid #F0F0F0;
    padding: 5px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: inherit; /* hereda color de zebra */
    box-shadow: 2px 0 4px rgba(0,0,0,.04);
}

.asp-row-num[b-8mtrexhuq8] {
    display: inline-block;
    min-width: 22px;
    font-size: .72rem;
    font-weight: 700;
    color: #78909C;
    margin-right: .5rem;
}

.asp-row-scout[b-8mtrexhuq8] {
    font-size: .80rem;
    font-weight: 600;
    color: #37474F;
}

/* ─── Celda de asistencia ───────────────────────────────────────────────── */
.asp-td-date[b-8mtrexhuq8] {
    width: 46px;
    min-width: 46px;
    text-align: center;
    padding: 4px 0;
    border-left: 1px solid #F0EFF0;
    vertical-align: middle;
}

/* ─── Celdas fantasma ───────────────────────────────────────────────────── */
.asp-td-ghost[b-8mtrexhuq8] {
    width: 46px;
    min-width: 46px;
    text-align: center;
    padding: 4px 0;
    border-left: 1px solid #EBEBEB;
    vertical-align: middle;
}

.asp-ghost-dot[b-8mtrexhuq8] {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #D0D0D0;
    opacity: .35;
}

/* ─── Badges de asistencia ──────────────────────────────────────────────── */
.asp-badge[b-8mtrexhuq8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: .375rem;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
}

/* Sin marcar */
.asp-badge-empty[b-8mtrexhuq8] {
    background: #FFFFFF;
    border: 1.5px solid #E0E0E0;
    color: #B0BEC5;
}

/* Presente */
.asp-badge-present[b-8mtrexhuq8] {
    background: #2E7D32;
    border: 1.5px solid transparent;
    color: #FFFFFF;
}

/* Ausente */
.asp-badge-absent[b-8mtrexhuq8] {
    background: #D32F2F;
    border: 1.5px solid transparent;
    color: #FFFFFF;
}

/* Asistencia de otra unidad: mismo color pero con transparencia */
.asp-badge-present.asp-badge-foreign[b-8mtrexhuq8] {
    background: rgba(46, 125, 50, 0.20);
    border: 1.5px solid rgba(46, 125, 50, 0.30);
    color: #2E7D32;
}

.asp-badge-absent.asp-badge-foreign[b-8mtrexhuq8] {
    background: rgba(211, 47, 47, 0.20);
    border: 1.5px solid rgba(211, 47, 47, 0.30);
    color: #D32F2F;
}

/* Versión pequeña para la leyenda */
.asp-badge-sm[b-8mtrexhuq8] {
    width: 20px;
    height: 20px;
    font-size: .65rem;
}

/* ─── Tarjeta leyenda + guía ────────────────────────────────────────────── */
.asp-legend-card[b-8mtrexhuq8] {
    margin-top: .5rem;
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    border-radius: .75rem;
    padding: .85rem 1rem;
}

/* ─── Leyenda de badges ─────────────────────────────────────────────────── */
.asp-legend[b-8mtrexhuq8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem 1.25rem;
    padding-bottom: .6rem;
}

.asp-legend-item[b-8mtrexhuq8] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.asp-legend-label[b-8mtrexhuq8] {
    font-size: .78rem;
    color: #78909C;
}

/* ─── Guía de uso ───────────────────────────────────────────────────────── */
.asp-guide[b-8mtrexhuq8] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    border-top: 1px solid #F0F0F0;
    padding-top: .6rem;
    margin-top: .1rem;
}

.asp-guide-item[b-8mtrexhuq8] {
    font-size: .75rem;
    color: #78909C;
    line-height: 1.45;
}

/* ─── Responsive ≤ 640px ────────────────────────────────────────────────── */
@media (max-width: 640px) {

    .asp-outer[b-8mtrexhuq8] {
        padding: 1rem .75rem 3rem;
    }

    .asp-page-title[b-8mtrexhuq8] {
        font-size: 1.2rem;
    }

    /* Filtros: cada grupo ocupa fila completa en móvil */
    .asp-filter-card[b-8mtrexhuq8] {
        gap: .5rem .75rem;
        padding: .7rem .85rem;
        flex-direction: column;
        align-items: flex-start;
    }

    /* Selects y sus grupos ocupan todo el ancho disponible */
    .asp-filter-group[b-8mtrexhuq8] {
        width: 100%;
    }

    .asp-select[b-8mtrexhuq8] {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Columnas de flecha derecha más angosta → se ocultan, regla al final */

    /* Fecha un poco más angosta */
    .asp-th-date[b-8mtrexhuq8],
    .asp-td-date[b-8mtrexhuq8],
    .asp-th-ghost[b-8mtrexhuq8],
    .asp-td-ghost[b-8mtrexhuq8] {
        width: 38px;
        min-width: 38px;
        max-width: 38px;
    }

    .asp-date-link[b-8mtrexhuq8] {
        font-size: .62rem;
    }

    .asp-badge[b-8mtrexhuq8] {
        width: 22px;
        height: 22px;
        font-size: .65rem;
    }

    /* Ocultar texto de botones en móvil */
    .asp-btn-add-date-text[b-8mtrexhuq8],
    .asp-btn-edit-date-text[b-8mtrexhuq8] {
        display: none;
    }

    /* En móvil el scroll táctil es suficiente: ocultar flechas y su columna */
    .asp-inline-arrow[b-8mtrexhuq8] {
        display: none;
    }

    .asp-th-arrow-right[b-8mtrexhuq8],
    .asp-td-arrow-right[b-8mtrexhuq8] {
        display: none;
    }

    /* Columna nombre: colapsada por defecto en móvil (más espacio para fechas) */
    .asp-th-name[b-8mtrexhuq8],
    .asp-td-name[b-8mtrexhuq8] {
        width: 100px;
        min-width: 100px;
    }

    /* Toggle visible en móvil */
    .asp-name-toggle-btn[b-8mtrexhuq8] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        border-radius: .25rem;
        background: rgba(46,125,50,.1);
        border: none;
        color: #2E7D32;
        font-size: .9rem;
        cursor: pointer;
        padding: 0;
        transition: background .15s;
    }

    .asp-name-toggle-btn:hover[b-8mtrexhuq8] {
        background: #2E7D32;
        color: #FFFFFF;
    }

    /* Estado expandido: columna de nombre más ancha */
    .asp-names-wide .asp-th-name[b-8mtrexhuq8],
    .asp-names-wide .asp-td-name[b-8mtrexhuq8] {
        width: 200px;
        min-width: 200px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Estilos complementarios del panel
   Botones CTA del filtro, pills de mes, scrollbars, indicadores ghost
   y el proxy de scrollbar sticky inferior.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Botones en barra de filtros ───────────────────────────────────────── */
.asp-btn-add-date[b-8mtrexhuq8] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 36px;
    padding: 0 .9rem;
    border-radius: .5rem;
    font-size: .82rem;
    font-weight: 600;
    color: #FFFFFF;
    background: #2E7D32;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s;
}

.asp-btn-add-date:hover[b-8mtrexhuq8] {
    background: #1B5E20;
    color: #FFFFFF;
    text-decoration: none;
}

.asp-btn-edit-date[b-8mtrexhuq8] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 36px;
    padding: 0 .9rem;
    border-radius: .5rem;
    font-size: .82rem;
    font-weight: 600;
    color: #1565C0;
    background: #FFFFFF;
    border: 1.5px solid #E0E0E0;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}

.asp-btn-edit-date:hover[b-8mtrexhuq8] {
    background: #E3F2FD;
    border-color: #90CAF9;
    color: #1565C0;
    text-decoration: none;
}

/* ─── Pills de navegación por mes ───────────────────────────────────────── */
.asp-month-nav[b-8mtrexhuq8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .5rem;
    margin-bottom: .65rem;
}

.asp-month-nav-label[b-8mtrexhuq8] {
    font-size: .68rem;
    font-weight: 700;
    color: #78909C;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-right: .2rem;
    flex-shrink: 0;
}

.asp-month-pill[b-8mtrexhuq8] {
    padding: .3rem .75rem;
    border-radius: .5rem;
    font-size: .76rem;
    font-weight: 500;
    color: #37474F;
    background: #FFFFFF;
    border: 1.5px solid #E0E0E0;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

.asp-month-pill:hover[b-8mtrexhuq8] {
    background: #F0F4F0;
    border-color: #A5D6A7;
    color: #2E7D32;
}

.asp-month-pill-active[b-8mtrexhuq8] {
    background: #2E7D32 !important;
    color: #FFFFFF !important;
    border-color: #2E7D32 !important;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(46,125,50,.25);
}

/* ─── Scrollbars del contenedor de tabla ────────────────────────────────── */
/* Scrollbars delgados y discretos; la scrollbar sticky inferior duplica la *
   horizontal en el viewport para acceso rápido sin bajar hasta el fondo.   */
.asp-table-scroll[b-8mtrexhuq8] {
    scrollbar-width: thin;
    scrollbar-color: #C8C8C8 transparent;
}

.asp-table-scroll[b-8mtrexhuq8]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.asp-table-scroll[b-8mtrexhuq8]::-webkit-scrollbar-thumb {
    background: #C8C8C8;
    border-radius: 3px;
}

.asp-table-scroll[b-8mtrexhuq8]::-webkit-scrollbar-thumb:hover {
    background: #9E9E9E;
}

.asp-table-scroll[b-8mtrexhuq8]::-webkit-scrollbar-track {
    background: transparent;
}

/* ─── Punto de opacidad en cabeceras ghost ──────────────────────────────── */
.asp-ghost-dot-head[b-8mtrexhuq8] {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #D5D5D5;
}

/* ─── Texto interno de celda sticky Nombre, Apellido ─────────────────────── */
.asp-td-name-inner[b-8mtrexhuq8] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .78rem;
    color: #263238;
    font-weight: 500;
}

.asp-td-name-inner strong[b-8mtrexhuq8] {
    font-weight: 700;
}

/* ─── Scrollbar sticky inferior ─────────────────────────────────────────── */
/* Oculta: con overflow-y:auto + max-height en asp-table-scroll el navegador *
   ya muestra un scrollbar horizontal nativo al pie de la tabla visible.     *
   Mantener el HTML para no romper el JS de sincronización.                   */
.asp-sticky-bar-outer[b-8mtrexhuq8] {
    display: none;
}
/* /Pages/Configuracion/Biblioteca/EditarBiblioteca.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   EditarBiblioteca.razor.css — Estilos del formulario de edición
   ════════════════════════════════════════════════════════════════
   Reutiliza el prefijo cap- (Create Album Page) para mantener
   consistencia visual con SubirBiblioteca.razor y agrega bib-
   para elementos propios de la biblioteca (tags, dropdown).
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   1. CONTENEDOR DE PÁGINA Y ANIMACIÓN
   ════════════════════════════════════════════════════════════════ */

.cap-page[b-zocd529l62] {
    min-height: 100vh;
    background-color: #F5F5F5;
    animation: capFadeIn-b-zocd529l62 .4s ease both;
}

.cap-spacer[b-zocd529l62] {
    height: 1.5rem;
}

@media (min-width: 640px) {
    .cap-spacer[b-zocd529l62] { height: 2.5rem; }
}

@keyframes capFadeIn-b-zocd529l62 {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ════════════════════════════════════════════════════════════════
   2. CARD PRINCIPAL
   ════════════════════════════════════════════════════════════════ */

.cap-card-outer[b-zocd529l62] {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

@media (min-width: 640px) {
    .cap-card-outer[b-zocd529l62] { padding: 0 1.5rem 4rem; }
}

.cap-card[b-zocd529l62] {
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid #E8E4DD;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    overflow: hidden;
}


/* ════════════════════════════════════════════════════════════════
   3. CUERPO DEL FORMULARIO
   ════════════════════════════════════════════════════════════════ */

.cap-form-body[b-zocd529l62] {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding: 2rem 1.5rem;
}

@media (min-width: 640px) {
    .cap-form-body[b-zocd529l62] { padding: 2rem 2.5rem; }
}

.cap-field[b-zocd529l62] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.cap-field-header[b-zocd529l62] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cap-label[b-zocd529l62] {
    font-size: .875rem;
    font-weight: 600;
    color: #37474F;
    margin: 0;
}

.cap-required[b-zocd529l62] {
    color: #D32F2F;
}

.cap-char-counter[b-zocd529l62] {
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    user-select: none;
    color: rgba(55,71,79,.35);
    font-weight: 400;
    transition: color .15s, font-weight .15s;
}

.cap-char-counter.cap-char-near[b-zocd529l62] {
    color: #D32F2F;
    font-weight: 600;
}

.cap-input[b-zocd529l62] {
    width: 100%;
    background: #FAFAF7;
    border: 1px solid #E0DBD1;
    border-radius: .75rem;
    padding: .75rem 1rem;
    font-size: .95rem;
    color: #37474F;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}

.cap-input[b-zocd529l62]::placeholder {
    color: rgba(55,71,79,.30);
}

.cap-input:focus[b-zocd529l62] {
    border-color: rgba(46,125,50,.40);
    box-shadow: 0 0 0 3px rgba(46,125,50,.14);
}

.cap-hint[b-zocd529l62] {
    font-size: .78rem;
    color: #78909C;
    line-height: 1.4;
}


/* ════════════════════════════════════════════════════════════════
   4. TAG INPUT DE AUTORES (bib-tags-*)
   ════════════════════════════════════════════════════════════════ */

.bib-tags-container[b-zocd529l62] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    background: #FAFAF7;
    border: 1px solid #E0DBD1;
    border-radius: .75rem;
    min-height: 2.75rem;
    transition: border-color .2s, box-shadow .2s;
}

.bib-tags-container:focus-within[b-zocd529l62] {
    border-color: rgba(46,125,50,.40);
    box-shadow: 0 0 0 3px rgba(46,125,50,.14);
}

.bib-tag[b-zocd529l62] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .625rem;
    background: #E8F5E9;
    color: #2E7D32;
    border-radius: 2rem;
    font-size: .8rem;
    font-weight: 500;
    white-space: nowrap;
}

.bib-tag-remove[b-zocd529l62] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #2E7D32;
    cursor: pointer;
    padding: 0;
    font-size: .65rem;
    opacity: .6;
    transition: opacity .15s;
}

.bib-tag-remove:hover[b-zocd529l62] {
    opacity: 1;
}

.bib-tag-input[b-zocd529l62] {
    flex: 1;
    min-width: 120px;
    border: none;
    background: transparent;
    outline: none;
    font-size: .9rem;
    color: #37474F;
    font-family: inherit;
    padding: .25rem 0;
}

.bib-tag-input[b-zocd529l62]::placeholder {
    color: rgba(55,71,79,.30);
}


/* ════════════════════════════════════════════════════════════════
   5. SUGERENCIAS DE AUTORES (bib-sugerencias-*)
   ════════════════════════════════════════════════════════════════ */

.bib-sugerencias[b-zocd529l62] {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-top: .25rem;
}

.bib-sugerencia-item[b-zocd529l62] {
    padding: .25rem .75rem;
    background: #F5F5F5;
    border: 1px solid #E0DBD1;
    border-radius: 2rem;
    font-size: .78rem;
    color: #546E7A;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, border-color .15s;
}

.bib-sugerencia-item:hover[b-zocd529l62] {
    background: #E8F5E9;
    border-color: #A5D6A7;
    color: #2E7D32;
}


/* ════════════════════════════════════════════════════════════════
   6. DROPDOWN DE CATEGORÍAS (bib-cat-*)
   ════════════════════════════════════════════════════════════════ */

.bib-cat-wrapper[b-zocd529l62] {
    position: relative;
}

/* ── Botón trigger ── */
.bib-cat-trigger[b-zocd529l62] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .75rem 1rem;
    background: #FAFAF7;
    border: 1px solid #E0DBD1;
    border-radius: .75rem;
    font-size: .875rem;
    color: #37474F;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}

.bib-cat-trigger:hover[b-zocd529l62] {
    border-color: #A5D6A7;
}

.bib-cat-trigger:focus[b-zocd529l62] {
    border-color: rgba(46,125,50,.40);
    box-shadow: 0 0 0 3px rgba(46,125,50,.14);
    outline: none;
}

.bib-cat-trigger-text[b-zocd529l62] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bib-cat-trigger-placeholder[b-zocd529l62] {
    color: rgba(55,71,79,.30);
}

.bib-cat-chevron[b-zocd529l62] {
    font-size: .65rem;
    color: #90A4AE;
    transition: transform .2s ease;
    flex-shrink: 0;
    margin-left: .5rem;
}

.bib-cat-chevron--abierto[b-zocd529l62] {
    transform: rotate(180deg);
}

/* ── Tags de categorías seleccionadas ── */
.bib-cat-tags[b-zocd529l62] {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-top: .5rem;
}

.bib-cat-tag[b-zocd529l62] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .625rem;
    background: #E8F5E9;
    color: #2E7D32;
    border-radius: 2rem;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.bib-cat-tag-remove[b-zocd529l62] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    background: none;
    border: none;
    color: #2E7D32;
    cursor: pointer;
    padding: 0;
    font-size: .55rem;
    opacity: .6;
    border-radius: 50%;
    transition: opacity .15s, background .15s;
}

.bib-cat-tag-remove:hover[b-zocd529l62] {
    opacity: 1;
    background: rgba(46,125,50,.15);
}

/* ── Dropdown panel ── */
.bib-cat-dropdown[b-zocd529l62] {
    position: absolute;
    z-index: 50;
    width: 100%;
    margin-top: .375rem;
    background: #ffffff;
    border: 1px solid #E0DBD1;
    border-radius: .75rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    overflow: hidden;
    animation: catDropdownIn-b-zocd529l62 .15s ease both;
}

@keyframes catDropdownIn-b-zocd529l62 {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Buscador interno ── */
.bib-cat-search-box[b-zocd529l62] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem .75rem;
    border-bottom: 1px solid #F0EDE6;
    background: #FAFAFA;
}

.bib-cat-search-icon[b-zocd529l62] {
    font-size: .75rem;
    color: #90A4AE;
    flex-shrink: 0;
}

.bib-cat-search-input[b-zocd529l62] {
    flex: 1;
    border: 1px solid #E8E4DD;
    border-radius: .5rem;
    padding: .5rem .75rem;
    font-size: .8rem;
    color: #37474F;
    background: #ffffff;
    outline: none;
    font-family: inherit;
    transition: border-color .15s;
}

.bib-cat-search-input[b-zocd529l62]::placeholder {
    color: rgba(55,71,79,.30);
}

.bib-cat-close-btn[b-zocd529l62] {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #90A4AE;
    font-size: .85rem;
    padding: .25rem;
    border-radius: .25rem;
    transition: color .15s, background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bib-cat-close-btn:hover[b-zocd529l62] {
    color: #37474F;
    background: rgba(0,0,0,.05);
}

.bib-cat-search-input:focus[b-zocd529l62] {
    border-color: rgba(46,125,50,.35);
}

/* ── Lista de opciones ── */
.bib-cat-list[b-zocd529l62] {
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #E0DBD1 transparent;
}

.bib-cat-option[b-zocd529l62] {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .625rem 1rem;
    border: none;
    background: transparent;
    font-size: .82rem;
    color: #37474F;
    cursor: pointer;
    font-family: inherit;
    font-weight: 400;
    text-align: left;
    transition: background .1s;
}

.bib-cat-option:hover[b-zocd529l62] {
    background: #F5F5F5;
}

.bib-cat-option--activa[b-zocd529l62] {
    background: #E8F5E9;
    color: #2E7D32;
    font-weight: 600;
}

.bib-cat-option--activa:hover[b-zocd529l62] {
    background: #C8E6C9;
}

/* ── Checkbox visual ── */
.bib-cat-checkbox[b-zocd529l62] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid #CFD8DC;
    border-radius: .25rem;
    flex-shrink: 0;
    transition: all .15s;
    font-size: .6rem;
    color: transparent;
}

.bib-cat-checkbox--checked[b-zocd529l62] {
    background: #2E7D32;
    border-color: #2E7D32;
    color: #ffffff;
}

/* ── Estado vacío ── */
.bib-cat-empty[b-zocd529l62] {
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: .82rem;
    color: #90A4AE;
    margin: 0;
}


/* ════════════════════════════════════════════════════════════════
   7. GRILLA DE METADATOS (idioma + año + páginas)
   ════════════════════════════════════════════════════════════════ */

.bib-meta-grid[b-zocd529l62] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 560px) {
    .bib-meta-grid[b-zocd529l62] {
        grid-template-columns: 1fr;
    }
}


/* ════════════════════════════════════════════════════════════════
   8. ESTADO DE CARGA
   ════════════════════════════════════════════════════════════════ */

.bib-cargando[b-zocd529l62] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 3rem 2rem;
    font-size: .9rem;
    color: #78909C;
}


/* ════════════════════════════════════════════════════════════════
   SECCIÓN: ARCHIVO ACTUAL (PREVIEW)
   ════════════════════════════════════════════════════════════════ */

.ebib-file-section[b-zocd529l62] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.25rem;
    background: #FAFAFA;
    border: 1px solid #E0E0E0;
    border-radius: .75rem;
    margin-top: .5rem;
}

.ebib-file-label[b-zocd529l62] {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #78909C;
}

.ebib-file-info[b-zocd529l62] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.ebib-file-icon[b-zocd529l62] {
    color: #B0BEC5;
    font-size: 1rem;
}

.ebib-file-name[b-zocd529l62] {
    font-size: .88rem;
    font-weight: 600;
    color: #263238;
    word-break: break-all;
}

.ebib-file-badge[b-zocd529l62] {
    display: inline-block;
    font-size: .625rem;
    font-weight: 600;
    padding: .125rem .5rem;
    border-radius: 9999px;
    background: #ECEFF1;
    color: #455A64;
    text-transform: uppercase;
}

.ebib-file-link[b-zocd529l62] {
    font-size: .8rem;
    color: #1565C0;
    text-decoration: none;
    margin-left: auto;
    white-space: nowrap;
}

.ebib-file-link:hover[b-zocd529l62] {
    text-decoration: underline;
}

.ebib-preview-frame[b-zocd529l62] {
    border: 1px solid #E0E0E0;
    border-radius: .5rem;
    overflow: hidden;
    background: #ffffff;
}

.ebib-preview-iframe[b-zocd529l62] {
    width: 100%;
    height: 400px;
    border: none;
    display: block;
}

.ebib-preview-fallback[b-zocd529l62] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem;
    color: #B0BEC5;
    font-size: .85rem;
}

.ebib-fallback-icon[b-zocd529l62] {
    font-size: 1.5rem;
}

@media (max-width: 640px) {
    .ebib-preview-iframe[b-zocd529l62] {
        height: 280px;
    }

    .ebib-file-link[b-zocd529l62] {
        margin-left: 0;
    }
}


/* ════════════════════════════════════════════════════════════════
   8b. REEMPLAZO DE ARCHIVO
   ════════════════════════════════════════════════════════════════ */

.ebib-replace-section[b-zocd529l62] {
    margin-top: .75rem;
}

.ebib-replace-toggle[b-zocd529l62] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .5rem 1rem;
    border: 1px dashed #E0E0E0;
    border-radius: .5rem;
    background: transparent;
    color: #2E7D32;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
}

.ebib-replace-toggle:hover[b-zocd529l62] {
    background: #F5F5F5;
    border-color: #2E7D32;
}

.ebib-replace-body[b-zocd529l62] {
    margin-top: .75rem;
    padding: 1rem;
    border: 1px solid #E0E0E0;
    border-radius: .5rem;
    background: #FAFAFA;
}

.ebib-file-input-wrap[b-zocd529l62] {
    overflow: hidden;
    max-width: 100%;
}

[b-zocd529l62] .ebib-file-input-wrap input {
    max-width: 100%;
}

.ebib-replace-preview[b-zocd529l62] {
    margin-top: .75rem;
}

.ebib-replace-btn[b-zocd529l62] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .75rem;
    padding: .625rem 1.25rem;
    border: none;
    border-radius: .5rem;
    background: #2E7D32;
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}

.ebib-replace-btn:hover:not(:disabled)[b-zocd529l62] {
    background: #256029;
}

.ebib-replace-btn:disabled[b-zocd529l62] {
    opacity: .65;
    cursor: not-allowed;
}


/* ════════════════════════════════════════════════════════════════
   9. FOOTER DE ACCIONES
   ════════════════════════════════════════════════════════════════ */

.cap-form-footer[b-zocd529l62] {
    display: flex;
    flex-direction: column-reverse;
    gap: .75rem;
    padding-top: 1rem;
    border-top: 1px solid #F0EDE6;
}

@media (min-width: 640px) {
    .cap-form-footer[b-zocd529l62] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.cap-btn-back[b-zocd529l62] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1.25rem;
    border-radius: .5rem;
    background: transparent;
    color: #78909C !important;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: background .15s, color .15s;
}

.cap-btn-back:hover[b-zocd529l62] {
    background: #F5F5F5;
    color: #37474F !important;
}

.cap-btn-submit[b-zocd529l62] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    padding: .625rem 1.5rem;
    border-radius: .5rem;
    background: #2E7D32;
    color: #ffffff;
    border: none;
    font-size: .85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}

.cap-btn-submit:hover[b-zocd529l62] {
    background: #1B5E20;
}

.cap-btn-submit:disabled[b-zocd529l62] {
    opacity: .6;
    cursor: not-allowed;
}


/* ════════════════════════════════════════════════════════════════
   10. RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .cap-card-outer[b-zocd529l62] {
        padding: 0 .5rem 3rem;
    }

    .cap-form-body[b-zocd529l62] {
        padding: 1.25rem 1rem;
        gap: 1.25rem;
    }

    .cap-input[b-zocd529l62] {
        font-size: .9rem;
        padding: .625rem .875rem;
    }

    .cap-btn-submit[b-zocd529l62] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Configuracion/Biblioteca/PanelBiblioteca.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   PanelBiblioteca.razor.css — Estilos del panel de gestión
   ════════════════════════════════════════════════════════════════
   Prefijo: pbib- (Panel Biblioteca) para evitar colisiones.

   Estructura:
     1. Contenedor de página
     2. Tarjetas de stats
     3. Toolbar (tabs + search)
     4. Indicador de búsqueda
     5. Tabla escritorio
     6. Tarjetas móvil
     7. Botones de acción
     8. Estado vacío / cargando
     9. Responsive
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   1. CONTENEDOR DE PÁGINA
   ════════════════════════════════════════════════════════════════ */

.pbib-page[b-3cfj4a414m] {
    min-height: 100vh;
    background-color: #F5F5F5;
    animation: pbibFadeIn-b-3cfj4a414m .4s ease both;
}

.pbib-outer[b-3cfj4a414m] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

@media (min-width: 640px) {
    .pbib-outer[b-3cfj4a414m] { padding: 2rem 1.5rem 4rem; }
}

@keyframes pbibFadeIn-b-3cfj4a414m {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ════════════════════════════════════════════════════════════════
   2. TARJETAS DE STATS
   ════════════════════════════════════════════════════════════════ */

.pbib-stats[b-3cfj4a414m] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
    margin-bottom: 1.25rem;
    animation: pbibFadeIn-b-3cfj4a414m .35s ease both;
    animation-delay: .05s;
}

.pbib-stat-card[b-3cfj4a414m] {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.pbib-stat-num[b-3cfj4a414m] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.pbib-stat-num--total[b-3cfj4a414m]     { color: #263238; }
.pbib-stat-num--pendientes[b-3cfj4a414m] { color: #F57F17; }
.pbib-stat-num--aprobadas[b-3cfj4a414m]  { color: #2E7D32; }
.pbib-stat-num--rechazadas[b-3cfj4a414m] { color: #D32F2F; }

.pbib-stat-label[b-3cfj4a414m] {
    font-size: .78rem;
    color: #78909C;
    font-weight: 500;
}


/* ════════════════════════════════════════════════════════════════
   3. TOOLBAR (TABS + SEARCH)
   ════════════════════════════════════════════════════════════════ */

.pbib-tabs-row[b-3cfj4a414m] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    animation: pbibFadeIn-b-3cfj4a414m .35s ease both;
    animation-delay: .1s;
}

.pbib-tabs[b-3cfj4a414m] {
    display: flex;
    gap: .25rem;
    background: #ECEFF1;
    border-radius: .75rem;
    padding: 4px;
    flex-shrink: 0;
}

.pbib-tab[b-3cfj4a414m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    padding: .5rem 1rem;
    border: none;
    border-radius: .625rem;
    background: transparent;
    color: #78909C;
    font-size: .85rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.pbib-tab:hover[b-3cfj4a414m] {
    color: #37474F;
}

.pbib-tab--activa[b-3cfj4a414m] {
    background: #ffffff;
    color: #263238;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.pbib-tab--activa:hover[b-3cfj4a414m] {
    background: #ffffff;
    color: #263238;
}

.pbib-tab-badge[b-3cfj4a414m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 .375rem;
    border-radius: 10px;
    background: #CFD8DC;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    color: #546E7A;
}

.pbib-tab-badge--pendientes[b-3cfj4a414m] {
    background: #FFF8E1;
    color: #F57F17;
}

.pbib-tab-badge--aprobadas[b-3cfj4a414m] {
    background: #E8F5E9;
    color: #2E7D32;
}

.pbib-tab-badge--rechazadas[b-3cfj4a414m] {
    background: #FFEBEE;
    color: #D32F2F;
}

/* Search */
.pbib-search-wrap[b-3cfj4a414m] {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 340px;
    margin-left: auto;
}

.pbib-search-icon[b-3cfj4a414m] {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #78909C;
    font-size: .8rem;
    pointer-events: none;
}

.pbib-search-input[b-3cfj4a414m] {
    width: 100%;
    padding: .5rem .75rem .5rem 2.25rem;
    border: 1px solid #E0E0E0;
    border-radius: .5rem;
    font-size: .85rem;
    font-family: inherit;
    color: #263238;
    background: #ffffff;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}

.pbib-search-input[b-3cfj4a414m]::placeholder {
    color: #B0BEC5;
}

.pbib-search-input:focus[b-3cfj4a414m] {
    border-color: #2E7D32;
    box-shadow: 0 0 0 3px rgba(46,125,50,.1);
}


/* ════════════════════════════════════════════════════════════════
   4. INDICADOR DE BÚSQUEDA
   ════════════════════════════════════════════════════════════════ */

.pbib-search-indicator[b-3cfj4a414m] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    margin-bottom: 1rem;
    font-size: .8rem;
    color: #78909C;
    background: #ECEFF1;
    border-radius: .375rem;
}


/* ════════════════════════════════════════════════════════════════
   5. TABLA ESCRITORIO
   ════════════════════════════════════════════════════════════════ */

.pbib-table-card[b-3cfj4a414m] {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
    animation: pbibFadeIn-b-3cfj4a414m .35s ease both;
    animation-delay: .15s;
}

.pbib-table[b-3cfj4a414m] {
    width: 100%;
    border-collapse: collapse;
}

.pbib-thead-row[b-3cfj4a414m] {
    background: #FAFAFA;
    border-bottom: 1px solid #E0E0E0;
}

.pbib-th[b-3cfj4a414m] {
    padding: .75rem .75rem;
    font-size: .72rem;
    font-weight: 700;
    color: #78909C;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-align: left;
}

.pbib-th-first[b-3cfj4a414m] {
    padding-left: 1rem;
}

.pbib-th-actions[b-3cfj4a414m] {
    text-align: right;
    width: 140px;
}

.pbib-tr[b-3cfj4a414m] {
    border-bottom: 1px solid #F0F0F0;
    transition: background .1s;
}

.pbib-tr:last-child[b-3cfj4a414m] {
    border-bottom: none;
}

.pbib-tr:hover[b-3cfj4a414m] {
    background: #FAFAFA;
}

.pbib-td[b-3cfj4a414m] {
    padding: .875rem .75rem;
    font-size: .875rem;
    color: #37474F;
    vertical-align: middle;
}

.pbib-td-first[b-3cfj4a414m] {
    padding-left: 1rem;
}

.pbib-td-actions[b-3cfj4a414m] {
    text-align: right;
}

.pbib-title-cell[b-3cfj4a414m] {
    font-weight: 600;
    font-size: .88rem;
    color: #263238;
    line-height: 1.3;
    margin: 0 0 .125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
}

.pbib-authors-cell[b-3cfj4a414m] {
    font-size: .75rem;
    color: #78909C;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
}

.pbib-meta-cell[b-3cfj4a414m] {
    color: #78909C;
    font-size: .82rem;
}

/* Badges de categoría */
.pbib-cat-badges[b-3cfj4a414m] {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: center;
}

.pbib-cat-badge[b-3cfj4a414m] {
    display: inline-block;
    font-size: .625rem;
    font-weight: 600;
    padding: .125rem .5rem;
    border-radius: 9999px;
    background: #ECEFF1;
    color: #455A64;
    white-space: nowrap;
}

.pbib-cat-more[b-3cfj4a414m] {
    font-size: .625rem;
    font-weight: 500;
    color: #78909C;
    padding: .125rem .375rem;
}

/* Badges de idioma */
.pbib-lang-badge[b-3cfj4a414m] {
    display: inline-block;
    font-size: .625rem;
    font-weight: 600;
    padding: .125rem .5rem;
    border-radius: 9999px;
    white-space: nowrap;
}

.pbib-lang--es[b-3cfj4a414m] { background: #FEF3C7; color: #92400E; }
.pbib-lang--en[b-3cfj4a414m] { background: #DBEAFE; color: #1E40AF; }
.pbib-lang--pt[b-3cfj4a414m] { background: #DCFCE7; color: #166534; }
.pbib-lang--fr[b-3cfj4a414m] { background: #EDE9FE; color: #7C3AED; }
.pbib-lang--it[b-3cfj4a414m] { background: #FEE2E2; color: #B91C1C; }
.pbib-lang--other[b-3cfj4a414m] { background: #E5E7EB; color: #37474F; }

/* Badges de estado */
.pbib-status-badge[b-3cfj4a414m] {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    padding: .2rem .625rem;
    border-radius: 9999px;
    white-space: nowrap;
}

.pbib-status--pendiente[b-3cfj4a414m] { background: #FFF8E1; color: #BF360C; }
.pbib-status--aprobada[b-3cfj4a414m]  { background: #E8F5E9; color: #2E7D32; }
.pbib-status--rechazada[b-3cfj4a414m] { background: #FFEBEE; color: #D32F2F; }


/* ════════════════════════════════════════════════════════════════
   6. TARJETAS MÓVIL
   ════════════════════════════════════════════════════════════════ */

.pbib-mobile-list[b-3cfj4a414m] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    animation: pbibFadeIn-b-3cfj4a414m .35s ease both;
    animation-delay: .15s;
}

.pbib-mobile-card[b-3cfj4a414m] {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: .75rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.pbib-mobile-header[b-3cfj4a414m] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}

.pbib-mobile-title[b-3cfj4a414m] {
    font-weight: 600;
    font-size: .9rem;
    color: #263238;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pbib-mobile-authors[b-3cfj4a414m] {
    font-size: .78rem;
    color: #78909C;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pbib-mobile-meta[b-3cfj4a414m] {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .78rem;
    color: #78909C;
}

.pbib-mobile-sep[b-3cfj4a414m] {
    color: #B0BEC5;
}

.pbib-mobile-actions[b-3cfj4a414m] {
    display: flex;
    align-items: center;
    gap: .125rem;
    padding-top: .75rem;
    margin-top: .25rem;
    border-top: 1px solid #F0F0F0;
}


/* ════════════════════════════════════════════════════════════════
   7. BOTONES DE ACCIÓN
   ════════════════════════════════════════════════════════════════ */

.pbib-actions[b-3cfj4a414m] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .125rem;
}

.pbib-action-btn[b-3cfj4a414m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: .5rem;
    font-size: .8rem;
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
    background: transparent;
    color: #78909C;
}

.pbib-action-view[b-3cfj4a414m] { color: #1565C0; }
.pbib-action-view:hover[b-3cfj4a414m] { background: #E3F2FD; }

.pbib-action-approve[b-3cfj4a414m] { color: #2E7D32; }
.pbib-action-approve:hover[b-3cfj4a414m] { background: #E8F5E9; }

.pbib-action-reject[b-3cfj4a414m] { color: #D32F2F; }
.pbib-action-reject:hover[b-3cfj4a414m] { background: #FFEBEE; }

.pbib-action-restore[b-3cfj4a414m] { color: #1565C0; }
.pbib-action-restore:hover[b-3cfj4a414m] { background: #E3F2FD; }

.pbib-action-edit[b-3cfj4a414m] { color: #F9A825; }
.pbib-action-edit:hover[b-3cfj4a414m] { background: #FFF8E1; }




/* ════════════════════════════════════════════════════════════════
   8. ESTADO VACÍO / CARGANDO
   ════════════════════════════════════════════════════════════════ */

.pbib-loading[b-3cfj4a414m] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

.pbib-spinner[b-3cfj4a414m] {
    color: #2E7D32;
}

.pbib-empty[b-3cfj4a414m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.pbib-empty-icon-box[b-3cfj4a414m] {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: #B0BEC5;
}

.pbib-empty-title[b-3cfj4a414m] {
    color: #78909C;
    font-size: .9rem;
    margin: 0;
}

.pbib-empty-desc[b-3cfj4a414m] {
    color: #B0BEC5;
    font-size: .8rem;
    margin: .25rem 0 0;
}


/* ════════════════════════════════════════════════════════════════
   9. RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .pbib-stats[b-3cfj4a414m] {
        grid-template-columns: repeat(2, 1fr);
    }

    .pbib-tabs-row[b-3cfj4a414m] {
        flex-direction: column;
        align-items: stretch;
    }

    .pbib-search-wrap[b-3cfj4a414m] {
        max-width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .pbib-outer[b-3cfj4a414m] {
        padding: 1rem .5rem 3rem;
    }

    .pbib-tabs[b-3cfj4a414m] {
        flex-direction: column;
    }

    .pbib-tab[b-3cfj4a414m] {
        justify-content: flex-start;
        padding: .75rem 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pbib-page[b-3cfj4a414m],
    .pbib-stats[b-3cfj4a414m],
    .pbib-tabs-row[b-3cfj4a414m],
    .pbib-table-card[b-3cfj4a414m],
    .pbib-mobile-list[b-3cfj4a414m] {
        animation: none;
    }
}


/* ════════════════════════════════════════════════════════════════
   10. BOTÓN GESTIONAR CATEGORÍAS (hero)
   ════════════════════════════════════════════════════════════════ */

.pbib-btn-categorias[b-3cfj4a414m] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem 1rem;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .35);
    border-radius: .5rem;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}

.pbib-btn-categorias:hover[b-3cfj4a414m] {
    background: rgba(255, 255, 255, .25);
    border-color: rgba(255, 255, 255, .6);
}


/* ════════════════════════════════════════════════════════════════
   11. MODAL — GESTIÓN DE CATEGORÍAS
   ════════════════════════════════════════════════════════════════ */

.pbib-modal-backdrop[b-3cfj4a414m] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: pbibFadeIn-b-3cfj4a414m .2s ease both;
}

.pbib-modal[b-3cfj4a414m] {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    background: #ffffff;
    border-radius: 1.125rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
    border: 1px solid #E8E0D0;
    display: flex;
    flex-direction: column;
    animation: pbibModalIn-b-3cfj4a414m .25s ease both;
}

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

/* ── Header ── */

.pbib-modal-header[b-3cfj4a414m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--primary, #2E7D32);
    border-radius: 1.125rem 1.125rem 0 0;
}

.pbib-modal-header-left[b-3cfj4a414m] {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.pbib-modal-header-icon[b-3cfj4a414m] {
    color: #fff;
    font-size: 1rem;
}

.pbib-modal-titulo[b-3cfj4a414m] {
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0;
}

.pbib-modal-close[b-3cfj4a414m] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, .7);
    font-size: 1rem;
    cursor: pointer;
    padding: .25rem;
    border-radius: .375rem;
    transition: background .15s;
}

.pbib-modal-close:hover[b-3cfj4a414m] {
    background: rgba(255, 255, 255, .2);
}

/* ── Body (scrollable) ── */

.pbib-modal-body[b-3cfj4a414m] {
    overflow-y: auto;
    padding: 1rem 1.25rem;
    flex: 1;
}

/* ── Formulario nueva categoría ── */

.pbib-cat-form[b-3cfj4a414m] {
    background: #FAF8F5;
    border: 1px solid #E8E0D0;
    border-radius: .75rem;
    padding: .875rem 1rem;
    margin-bottom: 1.25rem;
}

.pbib-cat-form-title[b-3cfj4a414m] {
    font-size: .75rem;
    font-weight: 700;
    color: #8D6E63;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 .625rem;
}

.pbib-cat-form-row[b-3cfj4a414m] {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.pbib-cat-input[b-3cfj4a414m] {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 1.5px solid #E8E0D0;
    border-radius: .5rem;
    padding: .5rem .75rem;
    font-size: .8rem;
    color: #263238;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}

.pbib-cat-input:focus[b-3cfj4a414m] {
    outline: none;
    border-color: #2E7D32;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, .15);
}

.pbib-cat-select[b-3cfj4a414m] {
    width: 180px;
    appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%238D6E63'/%3E%3C/svg%3E") no-repeat right .6rem center / .6rem;
    border: 1.5px solid #E8E0D0;
    border-radius: .5rem;
    padding: .5rem 2rem .5rem .75rem;
    font-size: .75rem;
    color: #263238;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s;
}

.pbib-cat-select:focus[b-3cfj4a414m] {
    outline: none;
    border-color: #2E7D32;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, .15);
}

.pbib-cat-btn-crear[b-3cfj4a414m] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: #2E7D32;
    color: #fff;
    border: none;
    border-radius: .5rem;
    font-size: .85rem;
    cursor: pointer;
    transition: background .15s, opacity .15s;
}

.pbib-cat-btn-crear:hover:not(:disabled)[b-3cfj4a414m] {
    background: #1B5E20;
}

.pbib-cat-btn-crear:disabled[b-3cfj4a414m] {
    opacity: .45;
    cursor: not-allowed;
}

/* ── Loading ── */

.pbib-cat-loading[b-3cfj4a414m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem;
    color: #8D6E63;
    font-size: .8rem;
}

/* ── Sección agrupada ── */

.pbib-cat-seccion[b-3cfj4a414m] {
    margin-bottom: 1rem;
}

.pbib-cat-seccion-header[b-3cfj4a414m] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem 0;
    border-bottom: 1px solid #E8E0D0;
    margin-bottom: .375rem;
}

.pbib-cat-seccion-icon[b-3cfj4a414m] {
    font-size: .8rem;
}

.pbib-cat-seccion-titulo[b-3cfj4a414m] {
    font-size: .75rem;
    font-weight: 700;
    color: #546E7A;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pbib-cat-seccion-count[b-3cfj4a414m] {
    margin-left: auto;
    font-size: .65rem;
    font-weight: 700;
    color: #90A4AE;
    background: #ECEFF1;
    padding: .125rem .5rem;
    border-radius: 9999px;
}

/* ── Ítem de categoría ── */

.pbib-cat-lista[b-3cfj4a414m] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.pbib-cat-item[b-3cfj4a414m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .375rem .625rem;
    border-radius: .375rem;
    transition: background .1s;
}

.pbib-cat-item:hover[b-3cfj4a414m] {
    background: #FAF8F5;
}

.pbib-cat-item--inactiva[b-3cfj4a414m] {
    opacity: .5;
}

.pbib-cat-item--inactiva .pbib-cat-nombre[b-3cfj4a414m] {
    text-decoration: line-through;
    color: #90A4AE;
}

.pbib-cat-nombre[b-3cfj4a414m] {
    font-size: .8rem;
    color: #263238;
    font-weight: 500;
}

.pbib-cat-acciones[b-3cfj4a414m] {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.pbib-cat-action-btn[b-3cfj4a414m] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: .375rem;
    color: #90A4AE;
    font-size: .7rem;
    cursor: pointer;
    transition: all .15s;
}

.pbib-cat-action-btn:hover[b-3cfj4a414m] {
    background: #ECEFF1;
    color: #546E7A;
}

.pbib-cat-toggle--activa:hover[b-3cfj4a414m] {
    color: #D32F2F;
    background: #FFEBEE;
}

.pbib-cat-toggle--inactiva:hover[b-3cfj4a414m] {
    color: #2E7D32;
    background: #E8F5E9;
}

/* ── Edición inline ── */

.pbib-cat-edit-row[b-3cfj4a414m] {
    display: flex;
    align-items: center;
    gap: .375rem;
    width: 100%;
}

.pbib-cat-edit-input[b-3cfj4a414m] {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 1.5px solid #1565C0;
    border-radius: .375rem;
    padding: .375rem .5rem;
    font-size: .8rem;
    color: #263238;
    font-family: inherit;
}

.pbib-cat-edit-input:focus[b-3cfj4a414m] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(21, 101, 192, .2);
}

.pbib-cat-edit-select[b-3cfj4a414m] {
    width: 70px;
    appearance: none;
    background: #fff;
    border: 1.5px solid #1565C0;
    border-radius: .375rem;
    padding: .375rem .25rem;
    font-size: .7rem;
    color: #263238;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
}

.pbib-cat-edit-btn[b-3cfj4a414m] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: .375rem;
    font-size: .7rem;
    cursor: pointer;
    transition: background .15s;
}

.pbib-cat-edit-save[b-3cfj4a414m] {
    background: #E8F5E9;
    color: #2E7D32;
}

.pbib-cat-edit-save:hover:not(:disabled)[b-3cfj4a414m] {
    background: #C8E6C9;
}

.pbib-cat-edit-save:disabled[b-3cfj4a414m] {
    opacity: .4;
    cursor: not-allowed;
}

.pbib-cat-edit-cancel[b-3cfj4a414m] {
    background: #FFEBEE;
    color: #D32F2F;
}

.pbib-cat-edit-cancel:hover[b-3cfj4a414m] {
    background: #FFCDD2;
}

/* ── Footer ── */

.pbib-modal-footer[b-3cfj4a414m] {
    display: flex;
    justify-content: flex-end;
    padding: .75rem 1.25rem;
    border-top: 1px solid #E8E0D0;
}

.pbib-modal-btn-cerrar[b-3cfj4a414m] {
    padding: .5rem 1.25rem;
    background: #ECEFF1;
    color: #546E7A;
    border: none;
    border-radius: .5rem;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

.pbib-modal-btn-cerrar:hover[b-3cfj4a414m] {
    background: #CFD8DC;
}

/* ── Responsive modal ── */

@media (max-width: 640px) {
    .pbib-modal[b-3cfj4a414m] {
        max-width: 100%;
        max-height: 90vh;
        border-radius: .75rem;
    }

    .pbib-modal-header[b-3cfj4a414m] {
        border-radius: .75rem .75rem 0 0;
    }

    .pbib-cat-form-row[b-3cfj4a414m] {
        flex-wrap: wrap;
    }

    .pbib-cat-select[b-3cfj4a414m] {
        width: 100%;
    }

    .pbib-cat-input[b-3cfj4a414m] {
        width: 100%;
    }

    .pbib-cat-edit-row[b-3cfj4a414m] {
        flex-wrap: wrap;
    }

    .pbib-cat-edit-input[b-3cfj4a414m] {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pbib-modal[b-3cfj4a414m],
    .pbib-modal-backdrop[b-3cfj4a414m] {
        animation: none;
    }
}
/* /Pages/Configuracion/Biblioteca/SubirBiblioteca.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   SubirBiblioteca.razor.css — Estilos del formulario de subida
   ════════════════════════════════════════════════════════════════
   Reutiliza el prefijo cap- (Create Album Page) para mantener
   consistencia visual con Alta.razor y agrega bib- para elementos
   propios de la biblioteca (tags, chips, preview de archivo).
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   1. CONTENEDOR DE PÁGINA Y ANIMACIÓN
   ════════════════════════════════════════════════════════════════ */

.cap-page[b-hiaqtibyz2] {
    min-height: 100vh;
    background-color: #F5F5F5;
    animation: capFadeIn-b-hiaqtibyz2 .4s ease both;
}

.cap-spacer[b-hiaqtibyz2] {
    height: 1.5rem;
}

@media (min-width: 640px) {
    .cap-spacer[b-hiaqtibyz2] { height: 2.5rem; }
}

@keyframes capFadeIn-b-hiaqtibyz2 {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ════════════════════════════════════════════════════════════════
   2. CARD PRINCIPAL
   ════════════════════════════════════════════════════════════════ */

.cap-card-outer[b-hiaqtibyz2] {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

@media (min-width: 640px) {
    .cap-card-outer[b-hiaqtibyz2] { padding: 0 1.5rem 4rem; }
}

.cap-card[b-hiaqtibyz2] {
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid #E8E4DD;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    overflow: hidden;
}


/* ════════════════════════════════════════════════════════════════
   3. CUERPO DEL FORMULARIO
   ════════════════════════════════════════════════════════════════ */

.cap-form-body[b-hiaqtibyz2] {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding: 2rem 1.5rem;
}

@media (min-width: 640px) {
    .cap-form-body[b-hiaqtibyz2] { padding: 2rem 2.5rem; }
}

.cap-field[b-hiaqtibyz2] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.cap-field-header[b-hiaqtibyz2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cap-label[b-hiaqtibyz2] {
    font-size: .875rem;
    font-weight: 600;
    color: #37474F;
    margin: 0;
}

.cap-required[b-hiaqtibyz2] {
    color: #D32F2F;
}

.cap-char-counter[b-hiaqtibyz2] {
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    user-select: none;
    color: rgba(55,71,79,.35);
    font-weight: 400;
    transition: color .15s, font-weight .15s;
}

.cap-char-counter.cap-char-near[b-hiaqtibyz2] {
    color: #D32F2F;
    font-weight: 600;
}

.cap-input[b-hiaqtibyz2] {
    width: 100%;
    background: #FAFAF7;
    border: 1px solid #E0DBD1;
    border-radius: .75rem;
    padding: .75rem 1rem;
    font-size: .95rem;
    color: #37474F;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}

.cap-input[b-hiaqtibyz2]::placeholder {
    color: rgba(55,71,79,.30);
}

.cap-input:focus[b-hiaqtibyz2] {
    border-color: rgba(46,125,50,.40);
    box-shadow: 0 0 0 3px rgba(46,125,50,.14);
}

.cap-hint[b-hiaqtibyz2] {
    font-size: .78rem;
    color: #78909C;
    line-height: 1.4;
}


/* ════════════════════════════════════════════════════════════════
   4. ZONA DE CARGA DE ARCHIVO (reutiliza cap-portada-*)
   ════════════════════════════════════════════════════════════════ */

.cap-portada-zona[b-hiaqtibyz2] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem 1.5rem;
    border: 2px dashed #D0C9BC;
    border-radius: .75rem;
    background: #FAFAF7;
    cursor: pointer;
    text-align: center;
    transition: border-color .2s, background .2s;
    overflow: hidden;
}

.cap-portada-zona:hover[b-hiaqtibyz2] {
    border-color: rgba(46,125,50,.45);
    background: #F2F8F2;
}

.cap-portada-icon[b-hiaqtibyz2] {
    font-size: 2rem;
    color: #B0BEC5;
}

.cap-portada-texto[b-hiaqtibyz2] {
    font-size: .875rem;
    font-weight: 600;
    color: #37474F;
}

.cap-portada-subtexto[b-hiaqtibyz2] {
    font-size: .75rem;
    color: #90A4AE;
}

.cap-portada-input-oculto[b-hiaqtibyz2] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}


/* ════════════════════════════════════════════════════════════════
   5. TAG INPUT DE AUTORES (bib-tags-*)
   ════════════════════════════════════════════════════════════════ */

.bib-tags-container[b-hiaqtibyz2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    background: #FAFAF7;
    border: 1px solid #E0DBD1;
    border-radius: .75rem;
    min-height: 2.75rem;
    transition: border-color .2s, box-shadow .2s;
}

.bib-tags-container:focus-within[b-hiaqtibyz2] {
    border-color: rgba(46,125,50,.40);
    box-shadow: 0 0 0 3px rgba(46,125,50,.14);
}

.bib-tag[b-hiaqtibyz2] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .625rem;
    background: #E8F5E9;
    color: #2E7D32;
    border-radius: 2rem;
    font-size: .8rem;
    font-weight: 500;
    white-space: nowrap;
}

.bib-tag-remove[b-hiaqtibyz2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #2E7D32;
    cursor: pointer;
    padding: 0;
    font-size: .65rem;
    opacity: .6;
    transition: opacity .15s;
}

.bib-tag-remove:hover[b-hiaqtibyz2] {
    opacity: 1;
}

.bib-tag-input[b-hiaqtibyz2] {
    flex: 1;
    min-width: 120px;
    border: none;
    background: transparent;
    outline: none;
    font-size: .9rem;
    color: #37474F;
    font-family: inherit;
    padding: .25rem 0;
}

.bib-tag-input[b-hiaqtibyz2]::placeholder {
    color: rgba(55,71,79,.30);
}


/* ════════════════════════════════════════════════════════════════
   6. SUGERENCIAS DE AUTORES (bib-sugerencias-*)
   ════════════════════════════════════════════════════════════════ */

.bib-sugerencias[b-hiaqtibyz2] {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-top: .25rem;
}

.bib-sugerencia-item[b-hiaqtibyz2] {
    padding: .25rem .75rem;
    background: #F5F5F5;
    border: 1px solid #E0DBD1;
    border-radius: 2rem;
    font-size: .78rem;
    color: #546E7A;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, border-color .15s;
}

.bib-sugerencia-item:hover[b-hiaqtibyz2] {
    background: #E8F5E9;
    border-color: #A5D6A7;
    color: #2E7D32;
}


/* ════════════════════════════════════════════════════════════════
   7. DROPDOWN DE CATEGORÍAS (bib-cat-*)
   ════════════════════════════════════════════════════════════════ */

.bib-cat-wrapper[b-hiaqtibyz2] {
    position: relative;
}

/* ── Botón trigger ── */
.bib-cat-trigger[b-hiaqtibyz2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .75rem 1rem;
    background: #FAFAF7;
    border: 1px solid #E0DBD1;
    border-radius: .75rem;
    font-size: .875rem;
    color: #37474F;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}

.bib-cat-trigger:hover[b-hiaqtibyz2] {
    border-color: #A5D6A7;
}

.bib-cat-trigger:focus[b-hiaqtibyz2] {
    border-color: rgba(46,125,50,.40);
    box-shadow: 0 0 0 3px rgba(46,125,50,.14);
    outline: none;
}

.bib-cat-trigger-text[b-hiaqtibyz2] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bib-cat-trigger-placeholder[b-hiaqtibyz2] {
    color: rgba(55,71,79,.30);
}

.bib-cat-chevron[b-hiaqtibyz2] {
    font-size: .65rem;
    color: #90A4AE;
    transition: transform .2s ease;
    flex-shrink: 0;
    margin-left: .5rem;
}

.bib-cat-chevron--abierto[b-hiaqtibyz2] {
    transform: rotate(180deg);
}

/* ── Tags de categorías seleccionadas ── */
.bib-cat-tags[b-hiaqtibyz2] {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-top: .5rem;
}

.bib-cat-tag[b-hiaqtibyz2] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .625rem;
    background: #E8F5E9;
    color: #2E7D32;
    border-radius: 2rem;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.bib-cat-tag-remove[b-hiaqtibyz2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    background: none;
    border: none;
    color: #2E7D32;
    cursor: pointer;
    padding: 0;
    font-size: .55rem;
    opacity: .6;
    border-radius: 50%;
    transition: opacity .15s, background .15s;
}

.bib-cat-tag-remove:hover[b-hiaqtibyz2] {
    opacity: 1;
    background: rgba(46,125,50,.15);
}

/* ── Dropdown panel ── */
.bib-cat-dropdown[b-hiaqtibyz2] {
    position: absolute;
    z-index: 50;
    width: 100%;
    margin-top: .375rem;
    background: #ffffff;
    border: 1px solid #E0DBD1;
    border-radius: .75rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    overflow: hidden;
    animation: catDropdownIn-b-hiaqtibyz2 .15s ease both;
}

@keyframes catDropdownIn-b-hiaqtibyz2 {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Buscador interno ── */
.bib-cat-search-box[b-hiaqtibyz2] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem .75rem;
    border-bottom: 1px solid #F0EDE6;
    background: #FAFAFA;
}

.bib-cat-search-icon[b-hiaqtibyz2] {
    font-size: .75rem;
    color: #90A4AE;
    flex-shrink: 0;
}

.bib-cat-search-input[b-hiaqtibyz2] {
    flex: 1;
    border: 1px solid #E8E4DD;
    border-radius: .5rem;
    padding: .5rem .75rem;
    font-size: .8rem;
    color: #37474F;
    background: #ffffff;
    outline: none;
    font-family: inherit;
    transition: border-color .15s;
}

.bib-cat-search-input[b-hiaqtibyz2]::placeholder {
    color: rgba(55,71,79,.30);
}

.bib-cat-close-btn[b-hiaqtibyz2] {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #90A4AE;
    font-size: .85rem;
    padding: .25rem;
    border-radius: .25rem;
    transition: color .15s, background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bib-cat-close-btn:hover[b-hiaqtibyz2] {
    color: #37474F;
    background: rgba(0,0,0,.05);
}

.bib-cat-search-input:focus[b-hiaqtibyz2] {
    border-color: rgba(46,125,50,.35);
}

/* ── Lista de opciones ── */
.bib-cat-list[b-hiaqtibyz2] {
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #E0DBD1 transparent;
}

.bib-cat-option[b-hiaqtibyz2] {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .625rem 1rem;
    border: none;
    background: transparent;
    font-size: .82rem;
    color: #37474F;
    cursor: pointer;
    font-family: inherit;
    font-weight: 400;
    text-align: left;
    transition: background .1s;
}

.bib-cat-option:hover[b-hiaqtibyz2] {
    background: #F5F5F5;
}

.bib-cat-option--activa[b-hiaqtibyz2] {
    background: #E8F5E9;
    color: #2E7D32;
    font-weight: 600;
}

.bib-cat-option--activa:hover[b-hiaqtibyz2] {
    background: #C8E6C9;
}

/* ── Checkbox visual ── */
.bib-cat-checkbox[b-hiaqtibyz2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid #CFD8DC;
    border-radius: .25rem;
    flex-shrink: 0;
    transition: all .15s;
    font-size: .6rem;
    color: transparent;
}

.bib-cat-checkbox--checked[b-hiaqtibyz2] {
    background: #2E7D32;
    border-color: #2E7D32;
    color: #ffffff;
}

/* ── Estado vacío ── */
.bib-cat-empty[b-hiaqtibyz2] {
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: .82rem;
    color: #90A4AE;
    margin: 0;
}


/* ════════════════════════════════════════════════════════════════
   8. GRILLA DE METADATOS (idioma + año + páginas)
   ════════════════════════════════════════════════════════════════ */

.bib-meta-grid[b-hiaqtibyz2] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 560px) {
    .bib-meta-grid[b-hiaqtibyz2] {
        grid-template-columns: 1fr;
    }
}


/* ════════════════════════════════════════════════════════════════
   9. PREVIEW DE ARCHIVO SELECCIONADO (bib-archivo-*)
   ════════════════════════════════════════════════════════════════ */

.bib-archivo-preview[b-hiaqtibyz2] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #FAFAF7;
    border: 1px solid #E0DBD1;
    border-radius: .75rem;
}

.bib-archivo-icono[b-hiaqtibyz2] {
    font-size: 1.75rem;
    color: #78909C;
    flex-shrink: 0;
}

.bib-archivo-info[b-hiaqtibyz2] {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
    flex: 1;
}

.bib-archivo-nombre[b-hiaqtibyz2] {
    font-size: .875rem;
    font-weight: 600;
    color: #37474F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bib-archivo-size[b-hiaqtibyz2] {
    font-size: .75rem;
    color: #90A4AE;
}

.bib-archivo-quitar[b-hiaqtibyz2] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    background: none;
    border: none;
    color: #D32F2F;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color .15s;
}

.bib-archivo-quitar:hover[b-hiaqtibyz2] {
    color: #B71C1C;
    text-decoration: underline;
}


/* ════════════════════════════════════════════════════════════════
   PREVIEW INLINE DE ARCHIVO
   ════════════════════════════════════════════════════════════════ */

.sbib-preview-frame[b-hiaqtibyz2] {
    border: 1px solid #E0E0E0;
    border-radius: .5rem;
    overflow: hidden;
    background: #ffffff;
    margin-top: .5rem;
}

.sbib-preview-iframe[b-hiaqtibyz2] {
    width: 100%;
    height: 400px;
    border: none;
    display: block;
}

.sbib-preview-fallback[b-hiaqtibyz2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem;
    margin-top: .5rem;
    color: #B0BEC5;
    font-size: .85rem;
    background: #FAFAFA;
    border: 1px solid #E0E0E0;
    border-radius: .5rem;
}

.sbib-fallback-icon[b-hiaqtibyz2] {
    font-size: 1.5rem;
}

@media (max-width: 640px) {
    .sbib-preview-iframe[b-hiaqtibyz2] {
        height: 280px;
    }
}


/* ════════════════════════════════════════════════════════════════
   10. ESTADO DE CARGA
   ════════════════════════════════════════════════════════════════ */

.bib-cargando[b-hiaqtibyz2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 3rem 2rem;
    font-size: .9rem;
    color: #78909C;
}


/* ════════════════════════════════════════════════════════════════
   11. FOOTER DE ACCIONES
   ════════════════════════════════════════════════════════════════ */

.cap-form-footer[b-hiaqtibyz2] {
    display: flex;
    flex-direction: column-reverse;
    gap: .75rem;
    padding-top: 1rem;
    border-top: 1px solid #F0EDE6;
}

@media (min-width: 640px) {
    .cap-form-footer[b-hiaqtibyz2] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.cap-btn-back[b-hiaqtibyz2] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1.25rem;
    border-radius: .5rem;
    background: transparent;
    color: #78909C !important;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: background .15s, color .15s;
}

.cap-btn-back:hover[b-hiaqtibyz2] {
    background: #F5F5F5;
    color: #37474F !important;
}

.cap-btn-submit[b-hiaqtibyz2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    padding: .625rem 1.5rem;
    border-radius: .5rem;
    background: #2E7D32;
    color: #ffffff;
    border: none;
    font-size: .85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}

.cap-btn-submit:hover[b-hiaqtibyz2] {
    background: #1B5E20;
}

.cap-btn-submit:disabled[b-hiaqtibyz2] {
    opacity: .6;
    cursor: not-allowed;
}


/* ════════════════════════════════════════════════════════════════
   12. RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .cap-card-outer[b-hiaqtibyz2] {
        padding: 0 .5rem 3rem;
    }

    .cap-form-body[b-hiaqtibyz2] {
        padding: 1.25rem 1rem;
        gap: 1.25rem;
    }

    .cap-input[b-hiaqtibyz2] {
        font-size: .9rem;
        padding: .625rem .875rem;
    }

    .cap-btn-submit[b-hiaqtibyz2] {
        width: 100%;
        justify-content: center;
    }

    .bib-archivo-preview[b-hiaqtibyz2] {
        flex-direction: column;
        text-align: center;
    }

    .bib-archivo-info[b-hiaqtibyz2] {
        align-items: center;
    }
}
/* /Pages/Configuracion/Comentarios/Panel.razor.rz.scp.css */
/*
 * Panel.razor.css — Moderación de Comentarios
 * Prefijo: cmp- (Comment Moderation Page)
 *
 * Paleta:
 *   Fondo de página   #F5F5F5
 *   Superficie card   #FFFFFF
 *   Encabezado        #FAFAFA
 *   Título            #263238
 *   Cuerpo            #37474F
 *   Secundario        #78909C
 *   Borde             #E0E0E0
 *   Borde suave       #F0F0F0
 *   Tabs              #ECEFF1
 *   Verde scout       #2E7D32
 *   Ámbar             #F57F17 / #FFF8E1
 *   Rojo              #D32F2F / #FFEBEE
 *   Azul (noticia)    #1565C0 / #E3F2FD
 */


/* PÁGINA */

/* Fondo gris claro de toda la vista con padding vertical superior e inferior */
.cmp-page[b-lfh6bp34xq] {
    background: #F5F5F5;
    min-height: 100vh;
    padding: 32px 0 64px;
}

/* Ancho máximo centrado con padding lateral homogéneo */
.cmp-outer[b-lfh6bp34xq] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}


/* BOTÓN VOLVER */

/* Enlace discreto en gris azulado con hover suave; no requiere !important
   porque no hay regla global que sobreescriba color en este componente */
.cmp-back-btn[b-lfh6bp34xq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #546E7A;
    text-decoration: none;
    margin-bottom: 20px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}

.cmp-back-btn:hover[b-lfh6bp34xq] {
    background: #ECEFF1;
    color: #263238;
}


/* CABECERA */

/* Separación inferior antes del toolbar */
.cmp-page-header[b-lfh6bp34xq] { margin-bottom: 24px; }

/* Título principal de la sección en Bitter o serif de respaldo */
.cmp-page-title[b-lfh6bp34xq] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #263238;
    margin: 0 0 6px;
    line-height: 1.2;
}

/* Subtítulo descriptivo en gris secundario */
.cmp-page-sub[b-lfh6bp34xq] {
    font-size: 0.88rem;
    color: #78909C;
    margin: 0;
}


/* TOOLBAR: TABS + BUSCADOR */

/* Fila que contiene las pestañas a la izquierda y el buscador a la derecha;
   envuelve en pantallas angostas gracias a flex-wrap */
.cmp-toolbar[b-lfh6bp34xq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}


/* TABS PILL */

/* Contenedor de pastillas sobre fondo gris claro con padding interno */
.cmp-tabs-bar[b-lfh6bp34xq] {
    display: inline-flex;
    align-items: center;
    background: #ECEFF1;
    border-radius: 10px;
    padding: 4px;
    gap: 2px;
}

/* Base de cada pestaña: fondo transparente y texto apagado */
.cmp-tab[b-lfh6bp34xq] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: transparent;
    border: none;
    border-radius: 7px;
    font-size: 0.84rem;
    font-weight: 500;
    color: #546E7A;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

/* Hover en pestaña inactiva: fondo blanco translúcido */
.cmp-tab:hover:not(.cmp-tab-active)[b-lfh6bp34xq] {
    background: rgba(255, 255, 255, 0.7);
    color: #263238;
}

/* Pestaña activa: fondo blanco sólido, texto principal y sombra leve */
.cmp-tab-active[b-lfh6bp34xq] {
    background: #FFFFFF;
    color: #263238;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}


/* PILL CONTEO */

/* Píldora numérica que muestra la cantidad de comentarios por estado;
   en reposo queda en gris neutro y se colorea cuando su tab está activo */
.cmp-tab-pill[b-lfh6bp34xq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(120, 144, 156, 0.15);
    color: #546E7A;
    transition: background 0.15s, color 0.15s;
}

/* Color del conteo cuando el tab Pendiente está activo */
.cmp-tab-active .cmp-tab-pill.cmp-tab-pill-pendiente[b-lfh6bp34xq],
.cmp-tab-pill.cmp-tab-pill-pendiente.cmp-tab-pill-on[b-lfh6bp34xq] {
    background: #FFF8E1;
    color: #F57F17;
}

/* Color del conteo cuando el tab Aceptado está activo */
.cmp-tab-active .cmp-tab-pill.cmp-tab-pill-aceptado[b-lfh6bp34xq],
.cmp-tab-pill.cmp-tab-pill-aceptado.cmp-tab-pill-on[b-lfh6bp34xq] {
    background: #E8F5E9;
    color: #2E7D32;
}

/* Color del conteo cuando el tab Rechazado está activo */
.cmp-tab-active .cmp-tab-pill.cmp-tab-pill-rechazado[b-lfh6bp34xq],
.cmp-tab-pill.cmp-tab-pill-rechazado.cmp-tab-pill-on[b-lfh6bp34xq] {
    background: #FFEBEE;
    color: #D32F2F;
}


/* BUSCADOR */

/* Wrapper: flex para alinear input + botón en una fila */
.cmp-search-wrapper[b-lfh6bp34xq] {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 220px;
}

/* Lupa posicionada a la izquierda, sin interceptar clics del mouse */
.cmp-search-icon[b-lfh6bp34xq] {
    position: absolute;
    left: 12px;
    color: #78909C;
    pointer-events: none;
}

/* Input con indentación izquierda para no tapar el ícono */
.cmp-search-input[b-lfh6bp34xq] {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 14px 0 36px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    font-size: 0.84rem;
    color: #37474F;
    background: #FFFFFF;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.cmp-search-input[b-lfh6bp34xq]::placeholder { color: #BDBDBD; }

/* Foco con anillo gris azulado institucional */
.cmp-search-input:focus[b-lfh6bp34xq] {
    border-color: #90A4AE;
    box-shadow: 0 0 0 3px rgba(144, 164, 174, 0.18);
}

/* Botón Buscar: mismo alto que el input, verde institucional */
.cmp-search-btn[b-lfh6bp34xq] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: 0 .875rem;
    height: 36px;
    background: var(--primary, #2E7D32);
    color: #fff;
    border: none;
    border-radius: .5rem;
    font-size: .84rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}

.cmp-search-btn:hover[b-lfh6bp34xq]  { background: #1B5E20; }
.cmp-search-btn:active[b-lfh6bp34xq] { transform: scale(.97); }


/* SPINNER */

/* Centrado verticalmente mientras la API responde */
.cmp-loading[b-lfh6bp34xq] {
    display: flex;
    justify-content: center;
    padding: 56px 0;
}


/* ESTADO VACÍO */

/* Card blanca con mensaje cuando no hay comentarios en el tab activo */
.cmp-empty[b-lfh6bp34xq] {
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #E0E0E0;
    padding: 56px 24px;
    text-align: center;
}

/* Círculo con ícono decorativo, sobre fondo #F5F5F5 */
.cmp-empty-icon-wrap[b-lfh6bp34xq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    background: #F5F5F5;
    border-radius: 50%;
    margin-bottom: 16px;
}

.cmp-empty-title[b-lfh6bp34xq] {
    font-size: 1rem;
    font-weight: 600;
    color: #263238;
    margin: 0 0 8px;
}

.cmp-empty-sub[b-lfh6bp34xq] {
    font-size: 0.86rem;
    color: #78909C;
    margin: 0;
}


/* TABLA DESKTOP */

/* Card blanca que contiene la tabla con bordes redondeados */
.cmp-table-card[b-lfh6bp34xq] {
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #E0E0E0;
    overflow: hidden;
}

/* Scroll horizontal en pantallas estrechas sin perder el border-radius */
.cmp-table-scroll[b-lfh6bp34xq] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cmp-table[b-lfh6bp34xq] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    table-layout: auto;
}

/* Encabezado con fondo #FAFAFA y borde inferior separador */
.cmp-thead-row[b-lfh6bp34xq] {
    background: #FAFAFA;
    border-bottom: 1px solid #E0E0E0;
}

/* Celdas de encabezado en uppercase diminuto y gris secundario */
.cmp-th[b-lfh6bp34xq] {
    padding: 11px 16px;
    font-size: 0.76rem;
    font-weight: 600;
    color: #78909C;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-align: left;
}

/* Celda de acciones alineada a la derecha */
.cmp-th-actions[b-lfh6bp34xq] { text-align: right; }

/* Columna Noticia: visible solo en pantallas >= 992px para no saturar */
.cmp-th-noticia[b-lfh6bp34xq],
.cmp-td-noticia[b-lfh6bp34xq] {
    display: none;
}

@media (min-width: 992px) {
    .cmp-th-noticia[b-lfh6bp34xq],
    .cmp-td-noticia[b-lfh6bp34xq] {
        display: table-cell;
    }
}


/* FILAS */

/* Borde inferior suave entre filas y hover #FAFAFA */
.cmp-tr[b-lfh6bp34xq] {
    border-bottom: 1px solid #F0F0F0;
    transition: background 0.12s;
}

.cmp-tr:last-child[b-lfh6bp34xq] { border-bottom: none; }
.cmp-tr:hover[b-lfh6bp34xq] { background: #FAFAFA; }

.cmp-td[b-lfh6bp34xq] {
    padding: 12px 16px;
    color: #37474F;
    vertical-align: middle;
}

/* Celda de acciones alineada a la derecha */
.cmp-td-actions[b-lfh6bp34xq] { text-align: right; }


/* USUARIO / AVATAR */

/* Celda en flex para alinear avatar circular y nombre del usuario */
.cmp-user-cell[b-lfh6bp34xq] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Círculo generado a partir de las iniciales del usuario */
.cmp-avatar[b-lfh6bp34xq] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #546E7A, #37474F);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

/* Nombre truncado con ellipsis para no romper el layout en nombres largos */
.cmp-username[b-lfh6bp34xq] {
    font-size: 0.84rem;
    font-weight: 500;
    color: #37474F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}


/* FECHA */

.cmp-fecha[b-lfh6bp34xq] {
    font-size: 0.82rem;
    color: #78909C;
    white-space: nowrap;
}

/* Hora en línea propia debajo de la fecha */
.cmp-fecha-block[b-lfh6bp34xq] {
    display: block;
    margin-top: 2px;
}


/* NOTICIA */

/* Contenedor flex para título de noticia + botón ir */
.cmp-noticia-cell[b-lfh6bp34xq] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

/* Chip azul con el título de la noticia asociada al comentario;
   permite salto de línea para leer el título completo */
.cmp-noticia-link[b-lfh6bp34xq] {
    display: inline-block;
    max-width: 220px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #1565C0;
    background: #E3F2FD;
    padding: 3px 8px;
    border-radius: 4px;
    word-break: break-word;
    white-space: normal;
    line-height: 1.35;
}

/* Botón para ir a la noticia */
.cmp-noticia-go[b-lfh6bp34xq] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    background: #E3F2FD;
    color: #1565C0;
    font-size: 0.72rem;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    margin-top: 1px;
}

.cmp-noticia-go:hover[b-lfh6bp34xq] {
    background: #1565C0;
    color: #FFFFFF;
}


/* COMENTARIO EXPANDIBLE */

.cmp-comment-wrap[b-lfh6bp34xq] { line-height: 1.5; }

.cmp-comment-text[b-lfh6bp34xq] {
    font-size: 0.84rem;
    color: #37474F;
    margin: 0;
    word-break: break-word;
}

/* Estado colapsado: máximo 3 líneas visible con clamp de WebKit */
.cmp-comment-collapsed[b-lfh6bp34xq] {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Estado expandido: texto completo sin restricción de altura */
.cmp-comment-expanded[b-lfh6bp34xq] {
    display: block;
    overflow: visible;
}

/* Botón "Ver más / Ver menos" en azul institucional sin fondo */
.cmp-expand-btn[b-lfh6bp34xq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 2px 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: #1565C0;
    cursor: pointer;
    margin-top: 4px;
    transition: opacity 0.12s;
}

.cmp-expand-btn:hover[b-lfh6bp34xq] { opacity: 0.75; }


/* BADGES DE ESTADO */

/* Píldora redondeada para indicar visualmente el estado del comentario */
.cmp-badge[b-lfh6bp34xq] {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.cmp-badge-pendiente[b-lfh6bp34xq] { background: #FFF8E1; color: #F57F17; }
.cmp-badge-aceptado[b-lfh6bp34xq]  { background: #E8F5E9; color: #2E7D32; }
.cmp-badge-rechazado[b-lfh6bp34xq] { background: #FFEBEE; color: #D32F2F; }


/* BOTONES DE ACCIÓN */

/* Grupo de botones alineados a la derecha de cada fila */
.cmp-action-btns[b-lfh6bp34xq] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

/* Botón cuadrado de 34×34 con ícono centrado y micro-animación al hacer clic */
.cmp-action-btn[b-lfh6bp34xq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    flex-shrink: 0;
}

.cmp-action-btn:hover[b-lfh6bp34xq]  { opacity: 0.82; transform: scale(1.06); }
.cmp-action-btn:active[b-lfh6bp34xq] { transform: scale(0.96); }

/* Aceptar: relleno verde */
.cmp-action-solid-green[b-lfh6bp34xq] { background: #2E7D32; color: #FFFFFF; }

/* Rechazar: relleno rojo */
.cmp-action-solid-red[b-lfh6bp34xq]   { background: #D32F2F; color: #FFFFFF; }

/* Ver detalle: borde gris con fondo blanco */
.cmp-action-outline-grey[b-lfh6bp34xq] {
    background: #FFFFFF;
    color: #546E7A;
    border: 1.5px solid #B0BEC5;
}
.cmp-action-outline-grey:hover[b-lfh6bp34xq] { background: #ECEFF1; }


/* TARJETAS MÓVILES */

/* Lista de tarjetas apiladas visible en pantallas pequeñas */
.cmp-mobile-list[b-lfh6bp34xq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Superficie blanca con borde para cada comentario */
.cmp-card[b-lfh6bp34xq] {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    padding: 14px 16px;
}

/* Fila superior: usuario a la izquierda, badge a la derecha */
.cmp-card-header[b-lfh6bp34xq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 8px;
}

/* Chip de noticia antes del texto del comentario */
.cmp-card-noticia[b-lfh6bp34xq] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 10px;
}

/* Acciones al pie de la tarjeta, separadas por un borde superior */
.cmp-card-actions[b-lfh6bp34xq] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #F0F0F0;
}


/* LEYENDA */

/* Card discreta al pie que documenta qué hace cada botón de acción */
.cmp-legend[b-lfh6bp34xq] {
    margin-top: 24px;
    padding: 16px 20px;
    background: #FAFAFA;
    border: 1px solid #E0E0E0;
    border-radius: 10px;
}

.cmp-legend-title[b-lfh6bp34xq] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #78909C;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 12px;
}

/* Ítems en fila que puede envolver en pantallas angostas */
.cmp-legend-items[b-lfh6bp34xq] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.cmp-legend-item[b-lfh6bp34xq] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Cuadrado de 24×24 que replica visualmente el botón de acción */
.cmp-legend-icon[b-lfh6bp34xq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    flex-shrink: 0;
}

.cmp-legend-label[b-lfh6bp34xq] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #37474F;
}

.cmp-legend-note[b-lfh6bp34xq] {
    font-size: 0.78rem;
    color: #78909C;
}
/* /Pages/Configuracion/Cuenta/Cuenta.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   Cuenta.razor.css — Estilos scoped para la página de gestión de cuenta.
   Prefijo: ct- (cuenta)
   Usa tokens del design system (--color-*, --scout-*)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Layout de página ── */

.ct-pagina[b-37sy3bties] {
    min-height: 50vh;
    background: var(--scout-bg-primary, #F8F5F0);
    padding-bottom: 3rem;
}

.ct-contenido[b-37sy3bties] {
    max-width: 56rem;
    margin: 0 auto;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Badges del hero ── */

.ct-badges[b-37sy3bties] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.ct-badge[b-37sy3bties] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
}

.ct-badge--rol[b-37sy3bties] {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    color: white;
}

.ct-badge--acceso[b-37sy3bties] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    color: rgba(255, 255, 255, 0.8);
}

/* ── Estado de carga ── */

.ct-cargando[b-37sy3bties] {
    text-align: center;
    padding: 4rem 1rem;
}

.ct-cargando-icono[b-37sy3bties] {
    font-size: 1.5rem;
    color: var(--scout-text-secondary, #546E7A);
    margin-bottom: 0.75rem;
}

.ct-cargando-texto[b-37sy3bties] {
    font-size: 0.875rem;
    color: var(--scout-text-secondary, #546E7A);
}

/* ── Error de carga ── */

.ct-error-carga[b-37sy3bties] {
    text-align: center;
    padding: 4rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--scout-text-secondary, #546E7A);
}

.ct-error-carga i[b-37sy3bties] {
    font-size: 2rem;
    color: var(--color-danger, #D32F2F);
}

.ct-error-carga p[b-37sy3bties] {
    font-size: 0.875rem;
}

/* ── Tarjetas (cards) ── */

.ct-tarjeta[b-37sy3bties] {
    background: white;
    border-radius: 0.75rem;
    border: 1px solid #E5E7EB;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.ct-tarjeta-header[b-37sy3bties] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #F3F4F6;
}

.ct-tarjeta-icono[b-37sy3bties] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.875rem;
}

.ct-tarjeta-icono--perfil[b-37sy3bties] {
    background: var(--color-success-light, #E8F5E9);
    color: var(--scout-green-light, #1B5E20);
}

.ct-tarjeta-icono--seguridad[b-37sy3bties] {
    background: var(--color-warning-light, #FFF8E1);
    color: #E65100;
}

.ct-tarjeta-icono--logout[b-37sy3bties] {
    background: var(--color-danger-light, #FFEBEE);
    color: var(--color-danger, #D32F2F);
}

.ct-tarjeta-titulo[b-37sy3bties] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--scout-text-primary, #37474F);
    margin: 0;
    line-height: 1.3;
}

.ct-tarjeta-desc[b-37sy3bties] {
    font-size: 0.75rem;
    color: var(--scout-text-secondary, #546E7A);
    margin: 0;
    opacity: 0.7;
}

.ct-tarjeta-body[b-37sy3bties] {
    padding: 1.25rem 1.5rem;
}

/* ── Perfil: Layout avatar + campos ── */

.ct-perfil-layout[b-37sy3bties] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ct-avatar-columna[b-37sy3bties] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.ct-avatar[b-37sy3bties] {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: var(--color-primary, #2E7D32);
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.25);
}

.ct-perfil-campos[b-37sy3bties] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Campos de formulario ── */

.ct-campo-grupo[b-37sy3bties] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.ct-label[b-37sy3bties] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--scout-text-secondary, #546E7A);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ct-input-wrapper[b-37sy3bties] {
    position: relative;
    display: flex;
    align-items: center;
}

.ct-input-icono[b-37sy3bties] {
    position: absolute;
    left: 0.75rem;
    font-size: 0.875rem;
    color: var(--scout-text-secondary, #546E7A);
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}

.ct-input[b-37sy3bties] {
    width: 100%;
    padding: 0.625rem 0.75rem 0.625rem 2.5rem;
    font-size: 0.875rem;
    border: 1px solid #D1D5DB;
    border-radius: 0.5rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    color: var(--scout-text-primary, #37474F);
    background: white;
    font-family: inherit;
}

.ct-input--con-toggle[b-37sy3bties] {
    padding-right: 2.75rem;
}

.ct-input:focus[b-37sy3bties] {
    border-color: var(--color-primary, #2E7D32);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12);
}

.ct-input[b-37sy3bties]::placeholder {
    color: #9CA3AF;
}

.ct-toggle-pass[b-37sy3bties] {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--scout-text-secondary, #546E7A);
    opacity: 0.5;
    padding: 0.25rem;
    font-size: 0.875rem;
    transition: opacity 0.2s;
    z-index: 1;
}

.ct-toggle-pass:hover[b-37sy3bties] {
    opacity: 0.8;
}

.ct-campo-error[b-37sy3bties] {
    font-size: 0.75rem;
    color: var(--color-danger, #D32F2F);
    margin: 0;
}

/* ── Modo lectura ── */

.ct-lectura-campos[b-37sy3bties] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ct-lectura-campo[b-37sy3bties] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ct-lectura-label[b-37sy3bties] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--scout-text-secondary, #546E7A);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    opacity: 0.7;
}

.ct-lectura-valor[b-37sy3bties] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--scout-text-primary, #37474F);
    margin: 0;
}

/* ── Botones ── */

.ct-botones[b-37sy3bties] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.25rem;
    flex-wrap: wrap;
}

.ct-btn-wrapper[b-37sy3bties] {
    display: inline-flex;
}

.ct-btn[b-37sy3bties] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s;
    font-family: inherit;
    line-height: 1.5;
}

.ct-btn:disabled[b-37sy3bties] {
    opacity: 0.55;
    cursor: not-allowed;
}

.ct-btn--primario[b-37sy3bties] {
    background: var(--scout-green-light, #1B5E20);
    color: white;
}

.ct-btn--primario:hover:not(:disabled)[b-37sy3bties] {
    background: var(--scout-green-dark, #1B3022);
}

.ct-btn--secundario[b-37sy3bties] {
    background: #F3F4F6;
    color: var(--scout-text-secondary, #546E7A);
}

.ct-btn--secundario:hover:not(:disabled)[b-37sy3bties] {
    background: #E5E7EB;
}

.ct-btn--editar[b-37sy3bties] {
    margin-top: 0.75rem;
}

.ct-btn--seguridad[b-37sy3bties] {
    background: #E65100;
    color: white;
}

.ct-btn--seguridad:hover:not(:disabled)[b-37sy3bties] {
    background: #BF360C;
}

.ct-btn--peligro[b-37sy3bties] {
    background: var(--color-danger, #D32F2F);
    color: white;
    flex-shrink: 0;
}

.ct-btn--peligro:hover:not(:disabled)[b-37sy3bties] {
    background: var(--scout-red-dark, #B71C1C);
}

/* ── Cambio de contraseña: form ── */

.ct-clave-form[b-37sy3bties] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 28rem;
}

/* ── Indicador de coincidencia ── */

.ct-match[b-37sy3bties] {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.375rem;
}

.ct-match--ok[b-37sy3bties] {
    color: var(--color-success, #2E7D32);
}

.ct-match--error[b-37sy3bties] {
    color: var(--color-danger, #D32F2F);
}

/* ── Error box ── */

.ct-error-box[b-37sy3bties] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-danger-light, #FFEBEE);
    border: 1px solid #FFCDD2;
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
}

.ct-error-box i[b-37sy3bties] {
    color: var(--color-danger, #D32F2F);
    flex-shrink: 0;
    font-size: 0.875rem;
}

.ct-error-box p[b-37sy3bties] {
    font-size: 0.75rem;
    color: #C62828;
    margin: 0;
}

/* ── Resumen de contraseña (modo colapsado) ── */

.ct-clave-resumen[b-37sy3bties] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.ct-clave-resumen-label[b-37sy3bties] {
    font-size: 0.875rem;
    color: var(--scout-text-primary, #37474F);
    margin: 0;
}

.ct-clave-resumen-dots[b-37sy3bties] {
    font-size: 0.875rem;
    color: var(--scout-text-secondary, #546E7A);
    font-family: monospace;
    margin: 0.125rem 0 0;
    opacity: 0.6;
}

/* ── Logout ── */

.ct-logout-contenido[b-37sy3bties] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ct-logout-texto[b-37sy3bties] {
    font-size: 0.875rem;
    color: var(--scout-text-secondary, #546E7A);
    margin: 0;
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 640px) {
    .ct-contenido[b-37sy3bties] {
        padding: 1.5rem;
    }

    .ct-perfil-layout[b-37sy3bties] {
        flex-direction: row;
        gap: 1.5rem;
    }

    .ct-avatar-columna[b-37sy3bties] {
        align-items: flex-start;
    }

    .ct-tarjeta-header[b-37sy3bties] {
        padding: 1rem 1.5rem;
    }

    .ct-tarjeta-body[b-37sy3bties] {
        padding: 1.25rem 1.5rem;
    }

    .ct-logout-contenido[b-37sy3bties] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@media (min-width: 768px) {
    .ct-contenido[b-37sy3bties] {
        padding: 2rem;
    }
}
/* /Pages/Configuracion/Dirigentes/Panel.razor.rz.scp.css */
/*
 * Panel.razor.css — Panel de gestión de dirigentes
 * Prefijo: dmp- (Dirigentes Management Page)
 *
 * Paleta base (idéntica al panel de Usuarios para mantener consistencia):
 *   Fondo de página   #F5F5F5
 *   Superficie card   #FFFFFF
 *   Encabezado tabla  #FAFAFA
 *   Título            #263238
 *   Cuerpo            #37474F
 *   Secundario        #78909C
 *   Borde             #E0E0E0
 *   Borde suave       #F0F0F0
 *
 * Secciones:
 *   Jefatura   #9E9E9E (gris claro)
 *   Menor      #795548 + #FBC02D (marrón + amarillo)
 *   Scout      #2E7D32 (verde)
 *   Mayor      #0288D1 + #C62828 (celeste + rojo)
 */


/* ═══════════════════════════════════════════════════════
   PÁGINA
   ═══════════════════════════════════════════════════════ */

.dmp-page[b-b2q0b1nbr6] {
    min-height: 100vh;
    background-color: #F5F5F5;
    animation: dmpFadeIn-b-b2q0b1nbr6 .4s ease both;
}

.dmp-outer[b-b2q0b1nbr6] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

@media (min-width: 640px) {
    .dmp-outer[b-b2q0b1nbr6] { padding: 1.5rem 1.5rem 4rem; }
}

@keyframes dmpFadeIn-b-b2q0b1nbr6 {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0);    }
}


/* ═══════════════════════════════════════════════════════
   ESTADO DE CARGA
   ═══════════════════════════════════════════════════════ */

.dmp-loading-container[b-b2q0b1nbr6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 6rem 1rem;
    animation: dmpFadeIn-b-b2q0b1nbr6 .4s ease both;
}

.dmp-loading-spinner[b-b2q0b1nbr6] {
    font-size: 2rem;
    color: #2E7D32;
}

.dmp-loading-text[b-b2q0b1nbr6] {
    font-size: 0.9375rem;
    color: #78909C;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════
   TOOLBAR: TABS + BUSCADOR
   ═══════════════════════════════════════════════════════ */

.dmp-toolbar[b-b2q0b1nbr6] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
    .dmp-toolbar[b-b2q0b1nbr6] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}


/* ═══════════════════════════════════════════════════════
   SPINNER DE CARGA
   ═══════════════════════════════════════════════════════ */

.dmp-loading[b-b2q0b1nbr6] {
    display: flex;
    justify-content: center;
    padding: 5rem 0;
}

.dmp-spinner[b-b2q0b1nbr6] {
    color: #2E7D32;
    font-size: 2.5rem;
}


/* ═══════════════════════════════════════════════════════
   TABLA DE ESCRITORIO
   ═══════════════════════════════════════════════════════ */

.dmp-table-card[b-b2q0b1nbr6] {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
    margin-bottom: 1.25rem;
}

.dmp-table[b-b2q0b1nbr6] {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.dmp-thead-row[b-b2q0b1nbr6] {
    background-color: #FAFAFA;
    border-bottom: 1px solid #E0E0E0;
}

.dmp-th[b-b2q0b1nbr6] {
    padding: .875rem 1.25rem;
    text-align: left;
    color: #78909C;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    border: none;
}

/* Cargo y Unidad: ocultos en móvil */
.dmp-th-cargo[b-b2q0b1nbr6],
.dmp-th-unidad[b-b2q0b1nbr6] { display: none; }

@media (min-width: 640px) {
    .dmp-th-cargo[b-b2q0b1nbr6]  { display: table-cell; width: 200px; }
    .dmp-th-unidad[b-b2q0b1nbr6] { display: table-cell; width: 220px; }
}

.dmp-th-right[b-b2q0b1nbr6] { text-align: right; }

.dmp-tr[b-b2q0b1nbr6] {
    border-bottom: 1px solid #F0F0F0;
    transition: background-color .1s;
}

.dmp-tr:last-child[b-b2q0b1nbr6] { border-bottom: none; }
.dmp-tr:hover[b-b2q0b1nbr6]      { background-color: #FAFAFA; }

.dmp-td[b-b2q0b1nbr6] {
    padding: 1rem 1.25rem;
    border: none;
    vertical-align: middle;
}

.dmp-td-cargo[b-b2q0b1nbr6],
.dmp-td-unidad[b-b2q0b1nbr6] { display: none; }

@media (min-width: 640px) {
    .dmp-td-cargo[b-b2q0b1nbr6]  { display: table-cell; }
    .dmp-td-unidad[b-b2q0b1nbr6] { display: table-cell; }
}

.dmp-td-right[b-b2q0b1nbr6] { text-align: right; }


/* ═══════════════════════════════════════════════════════
   CELDA DE DIRIGENTE (tabla)
   ═══════════════════════════════════════════════════════ */

.dmp-user-cell[b-b2q0b1nbr6] {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.dmp-user-info[b-b2q0b1nbr6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dmp-user-name[b-b2q0b1nbr6] {
    color: #263238;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.4;
}

.dmp-user-realname[b-b2q0b1nbr6] {
    color: #78909C;
    font-size: .75rem;
    line-height: 1.3;
}

/* Avatar circular con iniciales, coloreado según sección */
.dmp-avatar[b-b2q0b1nbr6] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    user-select: none;
}

.dmp-avatar-jefatura[b-b2q0b1nbr6] { background: #F5F5F5; color: #757575; border: 1.5px solid #BDBDBD; }
.dmp-avatar-menor[b-b2q0b1nbr6]    { background: #EFEBE9; color: #795548; border: 1.5px solid #BCAAA4; }
.dmp-avatar-scout[b-b2q0b1nbr6]    { background: #E8F5E9; color: #2E7D32; border: 1.5px solid #A5D6A7; }
.dmp-avatar-mayor[b-b2q0b1nbr6]    { background: #E1F5FE; color: #0277BD; border: 1.5px solid #0288D1; }
.dmp-avatar-otros[b-b2q0b1nbr6]    { background: #ECEFF1; color: #546E7A; border: 1.5px solid #B0BEC5; }

/* Avatar con foto */
.dmp-avatar-img[b-b2q0b1nbr6] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    border: 1.5px solid #E0E0E0;
}

.dmp-muted[b-b2q0b1nbr6] { color: #78909C; font-size: .85rem; }


/* ═══════════════════════════════════════════════════════
   BADGES DE CARGO (por sección)
   ═══════════════════════════════════════════════════════ */

.dmp-badge[b-b2q0b1nbr6] {
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.dmp-badge-jefatura[b-b2q0b1nbr6] { background: #F5F5F5; color: #757575; }
.dmp-badge-menor[b-b2q0b1nbr6]    { background: #EFEBE9; color: #795548; }
.dmp-badge-scout[b-b2q0b1nbr6]    { background: #E8F5E9; color: #2E7D32; }
.dmp-badge-mayor[b-b2q0b1nbr6]    { background: #E1F5FE; color: #0277BD; }
.dmp-badge-otros[b-b2q0b1nbr6]    { background: #ECEFF1; color: #546E7A; }


/* ═══════════════════════════════════════════════════════
   BOTONES DE ACCIÓN (tabla desktop)
   ═══════════════════════════════════════════════════════ */

.dmp-actions[b-b2q0b1nbr6] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
}

.dmp-action-btn[b-b2q0b1nbr6] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .5rem;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #546E7A;
    cursor: pointer;
    transition: background .15s, color .15s;
    padding: 0;
}

.dmp-action-btn:hover[b-b2q0b1nbr6] {
    background-color: #ECEFF1;
    color: #2E7D32;
}

.dmp-action-btn-danger:hover[b-b2q0b1nbr6] {
    background-color: #FFEBEE;
    color: #C62828;
}


/* ═══════════════════════════════════════════════════════
   VISIBILIDAD DESKTOP / MÓVIL
   ═══════════════════════════════════════════════════════ */

.dmp-desktop-only[b-b2q0b1nbr6] { display: none; }

@media (min-width: 640px) {
    .dmp-desktop-only[b-b2q0b1nbr6] { display: block; }
}

.dmp-mobile-only[b-b2q0b1nbr6] { display: flex; }

@media (min-width: 640px) {
    .dmp-mobile-only[b-b2q0b1nbr6] { display: none; }
}


/* ═══════════════════════════════════════════════════════
   TARJETAS MÓVILES
   ═══════════════════════════════════════════════════════ */

.dmp-mobile-list[b-b2q0b1nbr6] {
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.dmp-mobile-card[b-b2q0b1nbr6] {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: .75rem;
    padding: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.dmp-card-info[b-b2q0b1nbr6] {
    margin-bottom: .75rem;
}

.dmp-card-name[b-b2q0b1nbr6] {
    display: block;
    color: #263238;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.4;
}

.dmp-card-cargo[b-b2q0b1nbr6] {
    display: block;
    color: #78909C;
    font-size: .78rem;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dmp-card-footer[b-b2q0b1nbr6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: .75rem;
    border-top: 1px solid #F0F0F0;
}

.dmp-card-actions[b-b2q0b1nbr6] {
    display: flex;
    align-items: center;
    gap: .375rem;
}

.dmp-mobile-edit-btn[b-b2q0b1nbr6] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .375rem .75rem;
    border-radius: .5rem;
    border: none;
    background: #E8F5E9;
    color: #2E7D32;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
}

.dmp-mobile-edit-btn:hover[b-b2q0b1nbr6] { background: #C8E6C9; }

.dmp-mobile-del-btn[b-b2q0b1nbr6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    border: none;
    background: #FFEBEE;
    color: #C62828;
    font-size: .8rem;
    cursor: pointer;
    transition: background .15s;
    padding: 0;
}

.dmp-mobile-del-btn:hover[b-b2q0b1nbr6] { background: #FFCDD2; }


/* ═══════════════════════════════════════════════════════
   LEYENDA DE SECCIONES
   ═══════════════════════════════════════════════════════ */

.dmp-legend[b-b2q0b1nbr6] {
    background: #ffffff;
    border: 1px solid #F0F0F0;
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    margin-top: 2rem;
}

.dmp-legend-title[b-b2q0b1nbr6] {
    color: #78909C;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 .75rem;
}

.dmp-legend-items[b-b2q0b1nbr6] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
}

.dmp-legend-item[b-b2q0b1nbr6] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
}

.dmp-legend-dot[b-b2q0b1nbr6] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dmp-legend-label[b-b2q0b1nbr6] { color: #263238; font-weight: 600; }
.dmp-legend-desc[b-b2q0b1nbr6]  { color: #78909C; }


/* ═══════════════════════════════════════════════════════
   TOGGLE DE VISIBILIDAD PÚBLICA
   ═══════════════════════════════════════════════════════ */

.dmp-toggle-card[b-b2q0b1nbr6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: .875rem;
    border: 1.5px solid;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.dmp-toggle-visible[b-b2q0b1nbr6] {
    background-color: #E8F5E9;
    border-color: #A5D6A7;
}

.dmp-toggle-hidden[b-b2q0b1nbr6] {
    background-color: #FFF3E0;
    border-color: #FFCC80;
}

.dmp-toggle-info[b-b2q0b1nbr6] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.dmp-toggle-icon[b-b2q0b1nbr6] {
    font-size: 1.1rem;
    margin-top: .1rem;
    flex-shrink: 0;
}

.dmp-toggle-visible .dmp-toggle-icon[b-b2q0b1nbr6] { color: #2E7D32; }
.dmp-toggle-hidden  .dmp-toggle-icon[b-b2q0b1nbr6] { color: #E65100; }

.dmp-toggle-title[b-b2q0b1nbr6] {
    color: #1F2937;
    font-weight: 700;
    font-size: .875rem;
    margin: 0 0 .2rem;
}

.dmp-toggle-desc[b-b2q0b1nbr6] {
    color: #546E7A;
    font-size: .78rem;
    margin: 0;
    line-height: 1.4;
}

.dmp-toggle-btn[b-b2q0b1nbr6] {
    flex-shrink: 0;
    padding: .5rem 1.1rem;
    border-radius: .625rem;
    border: 1.5px solid;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s;
    font-family: inherit;
}

.dmp-toggle-btn:disabled[b-b2q0b1nbr6] { opacity: .65; cursor: not-allowed; }

.dmp-toggle-btn-disable[b-b2q0b1nbr6] {
    background: #FFF;
    border-color: #EF9A9A;
    color: #C62828;
}

.dmp-toggle-btn-enable[b-b2q0b1nbr6] {
    background: #FFF;
    border-color: #A5D6A7;
    color: #2E7D32;
}

.dmp-toggle-btn-disable:not(:disabled):hover[b-b2q0b1nbr6] { background: #FFEBEE; }
.dmp-toggle-btn-enable:not(:disabled):hover[b-b2q0b1nbr6]  { background: #E8F5E9; }


/* ═══════════════════════════════════════════════════════
   SECCIÓN BLOCK (contenedor de Jefatura, Menor, Scout, Mayor)
   ═══════════════════════════════════════════════════════ */

.dmp-section-block[b-b2q0b1nbr6] {
    background: #ffffff;
    border-radius: 1rem;
    overflow: hidden;
    border: 1.5px solid #E0E0E0;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
    margin-bottom: 1.25rem;
}

.dmp-section-block-jefatura[b-b2q0b1nbr6] { border-color: #9E9E9E22; }

.dmp-section-block-header[b-b2q0b1nbr6] {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .875rem 1.25rem;
    border-bottom: 1.5px solid #E0E0E0;
}

.dmp-section-block-icon[b-b2q0b1nbr6] {
    font-size: .95rem;
    flex-shrink: 0;
}

/* Color gris para el icono corona de Jefatura */
.dmp-section-block-jefatura .dmp-section-block-icon[b-b2q0b1nbr6] { color: #9E9E9E; }

.dmp-section-block-title[b-b2q0b1nbr6] {
    color: #1F2937;
    font-size: .9rem;
    font-weight: 700;
    margin: 0;
}

.dmp-section-dual-dot[b-b2q0b1nbr6] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: auto;
}

.dmp-section-block-body[b-b2q0b1nbr6] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dmp-section-divider[b-b2q0b1nbr6] {
    height: 1px;
    background-color: #F0E0E8;
    margin: .25rem 0;
}


/* ═══════════════════════════════════════════════════════
   SLOT (sub-sección dentro de un bloque)
   ═══════════════════════════════════════════════════════ */

.dmp-slot[b-b2q0b1nbr6] {}

.dmp-slot-header[b-b2q0b1nbr6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .625rem;
    flex-wrap: wrap;
}

.dmp-slot-header-left[b-b2q0b1nbr6] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.dmp-slot-header-right[b-b2q0b1nbr6] {
    display: flex;
    align-items: center;
    gap: .375rem;
}

.dmp-slot-dot[b-b2q0b1nbr6] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.dmp-slot-title[b-b2q0b1nbr6] {
    color: #374151;
    font-size: .85rem;
    font-weight: 700;
}

.dmp-slot-count[b-b2q0b1nbr6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .1rem .5rem;
    border-radius: 9999px;
    background: #F5F5F5;
    color: #78909C;
    font-size: .72rem;
    font-weight: 600;
}

.dmp-slot-btn[b-b2q0b1nbr6] {
    display: inline-flex;
    align-items: center;
    padding: .3rem .75rem;
    border-radius: .5rem;
    border: 1px solid;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
}

.dmp-slot-btn-primary[b-b2q0b1nbr6] {
    color: #2E7D32;
    border-color: transparent;
    background: transparent;
}

.dmp-slot-btn-primary:hover[b-b2q0b1nbr6] { background: #E8F5E9; }

.dmp-slot-btn-cei[b-b2q0b1nbr6] {
    color: #F9A825;
    border-color: #FFE082;
    background: transparent;
}

.dmp-slot-btn-cei:hover[b-b2q0b1nbr6] { background: #FFF8E1; }

.dmp-slot-btn-apoyo[b-b2q0b1nbr6] {
    color: #607D8B;
    border-color: #CFD8DC;
    background: transparent;
}

.dmp-slot-btn-apoyo:hover[b-b2q0b1nbr6] { background: #ECEFF1; }

.dmp-leader-list[b-b2q0b1nbr6] {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.dmp-empty-slot[b-b2q0b1nbr6] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    border-radius: .75rem;
    background: #FAFAFA;
    border: 1.5px dashed #E0E0E0;
    color: #BDBDBD;
    font-size: .78rem;
}


/* ═══════════════════════════════════════════════════════
   FILA DE DIRIGENTE (leader row)
   ═══════════════════════════════════════════════════════ */

.dmp-leader-row[b-b2q0b1nbr6] {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .75rem;
    border-radius: .625rem;
    background: #FAFAFA;
    border: 1px solid #F0F0F0;
    transition: background .1s;
}

.dmp-leader-row:hover[b-b2q0b1nbr6] { background: #F5F5F5; }
.dmp-leader-row:hover .dmp-leader-actions[b-b2q0b1nbr6] { opacity: 1; }

.dmp-leader-bar[b-b2q0b1nbr6] {
    width: 3px;
    height: 32px;
    border-radius: 4px;
    flex-shrink: 0;
}

.dmp-leader-info[b-b2q0b1nbr6] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

.dmp-leader-name[b-b2q0b1nbr6] {
    color: #1F2937;
    font-weight: 600;
    font-size: .875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dmp-leader-realname[b-b2q0b1nbr6] {
    color: #9E9E9E;
    font-size: .75rem;
    font-style: italic;
}

.dmp-leader-badge[b-b2q0b1nbr6] {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: 9999px;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
}

.dmp-leader-actions[b-b2q0b1nbr6] {
    display: flex;
    align-items: center;
    gap: .2rem;
    opacity: 0;
    transition: opacity .1s;
    flex-shrink: 0;
}

/* En mobile, siempre visible */
@media (max-width: 639px) {
    .dmp-leader-actions[b-b2q0b1nbr6] { opacity: 1; }
}

.dmp-leader-action-btn[b-b2q0b1nbr6] {
    width: 2rem;
    height: 2rem;
    border-radius: .4rem;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    color: #78909C;
    cursor: pointer;
    transition: background .15s, color .15s;
    padding: 0;
}

.dmp-leader-action-btn:hover[b-b2q0b1nbr6] {
    background: #ECEFF1;
    color: #2E7D32;
}

.dmp-leader-action-btn-danger:hover[b-b2q0b1nbr6] {
    background: #FFEBEE;
    color: #C62828;
}


/* ═══════════════════════════════════════════════════════
   CEI BANNER
   ═══════════════════════════════════════════════════════ */

.dmp-cei-banner[b-b2q0b1nbr6] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem 1rem;
    border-radius: .75rem;
    background: #FFF8E1;
    border: 1px solid #FFE082;
}

.dmp-cei-banner-icon[b-b2q0b1nbr6] {
    color: #F9A825;
    font-size: 1rem;
    margin-top: .1rem;
    flex-shrink: 0;
}

.dmp-cei-banner-title[b-b2q0b1nbr6] {
    color: #E65100;
    font-size: .85rem;
    font-weight: 700;
    margin: 0 0 .2rem;
}

.dmp-cei-banner-desc[b-b2q0b1nbr6] {
    color: #BF360C;
    font-size: .75rem;
    margin: 0;
    line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════
   CHIEF SLOT (jefe de sección)
   ═══════════════════════════════════════════════════════ */

.dmp-chief-slot[b-b2q0b1nbr6] {
    background: #FAFAFA;
    border: 1px solid #F0F0F0;
    border-radius: .75rem;
    padding: 1rem;
}

.dmp-chief-slot-header[b-b2q0b1nbr6] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}

.dmp-chief-crown[b-b2q0b1nbr6] {
    font-size: .85rem;
}

.dmp-chief-slot-title[b-b2q0b1nbr6] {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.dmp-chief-display[b-b2q0b1nbr6] {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .75rem;
    background: #FFF;
    border: 1px solid #E0E0E0;
    border-radius: .625rem;
}

.dmp-chief-bar[b-b2q0b1nbr6] {
    width: 3px;
    height: 32px;
    border-radius: 4px;
    flex-shrink: 0;
}

.dmp-chief-info[b-b2q0b1nbr6] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
}

.dmp-chief-quitar-btn[b-b2q0b1nbr6] {
    flex-shrink: 0;
    padding: .3rem .75rem;
    border-radius: .5rem;
    border: 1px solid #FFCDD2;
    background: transparent;
    color: #C62828;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
}

.dmp-chief-quitar-btn:hover[b-b2q0b1nbr6] { background: #FFEBEE; }

.dmp-chief-selector-hint[b-b2q0b1nbr6] {
    padding: .625rem .75rem;
    border-radius: .5rem;
    background: #FFF8E1;
    border: 1px solid #FFE082;
    color: #BF360C;
    font-size: .75rem;
    line-height: 1.4;
    margin-bottom: .5rem;
}

.dmp-chief-selector[b-b2q0b1nbr6] {
    position: relative;
}

.dmp-chief-select[b-b2q0b1nbr6] {
    width: 100%;
    appearance: none;
    background: #FAF8F5;
    border: 1.5px solid #E8E0D0;
    border-radius: .5rem;
    padding: .625rem 2rem .625rem .75rem;
    font-size: .85rem;
    color: #263238;
    cursor: pointer;
    font-family: inherit;
}

.dmp-chief-select:focus[b-b2q0b1nbr6] {
    outline: none;
    border-color: #2E7D32;
    box-shadow: 0 0 0 3px rgba(46,125,50,.15);
}

.dmp-chief-chevron[b-b2q0b1nbr6] {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: .75rem;
}


/* ═══════════════════════════════════════════════════════
   INFO DE APOYO
   ═══════════════════════════════════════════════════════ */

.dmp-apoyo-info[b-b2q0b1nbr6] {
    padding: .75rem 1rem;
    background: #ECEFF1;
    border: 1px solid #CFD8DC;
    border-radius: .625rem;
    color: #546E7A;
    font-size: .78rem;
    line-height: 1.5;
}

.dmp-apoyo-add-row[b-b2q0b1nbr6] {
    display: flex;
    justify-content: flex-end;
    margin-top: .5rem;
}


/* ═══════════════════════════════════════════════════════
   NOTA INFORMATIVA AL PIE
   ═══════════════════════════════════════════════════════ */

.dmp-note[b-b2q0b1nbr6] {
    text-align: center;
    color: #BDBDBD;
    font-size: .75rem;
    line-height: 1.7;
    padding: 2rem 0 1rem;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════
   MODAL — AGREGAR / EDITAR
   ═══════════════════════════════════════════════════════ */

.dmp-modal-backdrop[b-b2q0b1nbr6] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,.5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: dmpFadeIn-b-b2q0b1nbr6 .2s ease both;
}

.dmp-modal[b-b2q0b1nbr6] {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border-radius: 1.125rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
    border: 1px solid #E8E0D0;
    animation: dmpModalIn-b-b2q0b1nbr6 .25s ease both;
}

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

.dmp-modal-header[b-b2q0b1nbr6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-radius: 1.125rem 1.125rem 0 0;
    overflow: hidden;
}

.dmp-modal-header-left[b-b2q0b1nbr6] {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.dmp-modal-header-icon[b-b2q0b1nbr6] {
    color: #fff;
    font-size: 1rem;
}

.dmp-modal-titulo[b-b2q0b1nbr6] {
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0;
}

.dmp-modal-close[b-b2q0b1nbr6] {
    background: transparent;
    border: none;
    color: rgba(255,255,255,.7);
    font-size: 1rem;
    cursor: pointer;
    padding: .25rem;
    border-radius: .375rem;
    transition: background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dmp-modal-close:hover[b-b2q0b1nbr6] { background: rgba(255,255,255,.2); }

.dmp-modal-context[b-b2q0b1nbr6] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin: .75rem 1.25rem .25rem;
    padding: .3rem .875rem;
    border-radius: 9999px;
    border: 1px solid;
    font-size: .72rem;
    font-weight: 600;
}

.dmp-modal-form[b-b2q0b1nbr6] {
    padding: 1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .875rem;
}

.dmp-modal-field[b-b2q0b1nbr6] {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    position: relative;
}

.dmp-modal-label[b-b2q0b1nbr6] {
    color: #8D6E63;
    font-size: .75rem;
    font-weight: 700;
}

.dmp-modal-label-opt[b-b2q0b1nbr6] {
    color: #BDBDBD;
    font-weight: 400;
    font-size: .7rem;
    margin-left: .25rem;
}

.dmp-modal-input[b-b2q0b1nbr6] {
    width: 100%;
    background: #FAF8F5;
    border: 1.5px solid #E8E0D0;
    border-radius: .5rem;
    padding: .625rem .75rem;
    font-size: .875rem;
    color: #263238;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}

.dmp-modal-input:focus[b-b2q0b1nbr6] {
    outline: none;
    border-color: #2E7D32;
    box-shadow: 0 0 0 3px rgba(46,125,50,.15);
}

.dmp-modal-select-wrapper[b-b2q0b1nbr6] {
    position: relative;
}

.dmp-modal-select[b-b2q0b1nbr6] {
    width: 100%;
    appearance: none;
    background: #FAF8F5;
    border: 1.5px solid #E8E0D0;
    border-radius: .5rem;
    padding: .625rem 2.25rem .625rem .75rem;
    font-size: .875rem;
    color: #263238;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.dmp-modal-select:focus[b-b2q0b1nbr6] {
    outline: none;
    border-color: #2E7D32;
    box-shadow: 0 0 0 3px rgba(46,125,50,.15);
}

.dmp-modal-select-arrow[b-b2q0b1nbr6] {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: .75rem;
    color: #8D6E63;
}

.dmp-modal-footer[b-b2q0b1nbr6] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    padding-top: .375rem;
}

.dmp-modal-btn-cancel[b-b2q0b1nbr6] {
    padding: .5rem 1rem;
    border-radius: .5rem;
    border: none;
    background: transparent;
    color: #5D4037;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s;
}

.dmp-modal-btn-cancel:hover[b-b2q0b1nbr6] { background: #F5F5F5; }

.dmp-modal-btn-save[b-b2q0b1nbr6] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem 1.25rem;
    border-radius: .5rem;
    border: none;
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: opacity .15s;
}

.dmp-modal-btn-save:disabled[b-b2q0b1nbr6] { opacity: .65; cursor: not-allowed; }
.dmp-modal-btn-save:not(:disabled):hover[b-b2q0b1nbr6] { opacity: .88; }


/* ═══════════════════════════════════════════════════════
   BUSCADOR DE SCOUTS EN MODAL
   ═══════════════════════════════════════════════════════ */

.dmp-scout-search-wrapper[b-b2q0b1nbr6] {
    position: relative;
}

.dmp-scout-search-icon[b-b2q0b1nbr6] {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9E9E9E;
    font-size: .8rem;
    pointer-events: none;
}

.dmp-scout-search-input[b-b2q0b1nbr6] {
    width: 100%;
    background: #FAF8F5;
    border: 1.5px solid #E8E0D0;
    border-radius: .5rem;
    padding: .625rem .75rem .625rem 2.25rem;
    font-size: .875rem;
    color: #263238;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}

.dmp-scout-search-input[b-b2q0b1nbr6]::placeholder { color: #BDBDBD; }

.dmp-scout-search-input:focus[b-b2q0b1nbr6] {
    outline: none;
    border-color: #2E7D32;
    box-shadow: 0 0 0 3px rgba(46,125,50,.15);
}

.dmp-scout-dropdown[b-b2q0b1nbr6] {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #E8E0D0;
    border-radius: .625rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    max-height: 12rem;
    overflow-y: auto;
}

.dmp-scout-option[b-b2q0b1nbr6] {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: .625rem .875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .625rem;
    transition: background .1s;
    font-family: inherit;
}

.dmp-scout-option:hover[b-b2q0b1nbr6] { background: #F5F5F5; }

.dmp-scout-option-icon[b-b2q0b1nbr6] {
    color: #9E9E9E;
    font-size: .875rem;
    flex-shrink: 0;
}

.dmp-scout-option-name[b-b2q0b1nbr6] {
    color: #1F2937;
    font-size: .875rem;
    font-weight: 600;
}

.dmp-scout-option-totem[b-b2q0b1nbr6] {
    display: block;
    color: #795548;
    font-size: .75rem;
    font-weight: 500;
    margin-top: .1rem;
}

.dmp-scout-no-results[b-b2q0b1nbr6] {
    color: #BDBDBD;
    font-size: .78rem;
    text-align: center;
    padding: .875rem;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════
   MINI-CARD DEL SCOUT SELECCIONADO (modal)
   ═══════════════════════════════════════════════════════ */

.dmp-scout-card[b-b2q0b1nbr6] {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    background: #F8F5F0;
    border: 1px solid #E8E0D0;
    border-radius: .75rem;
    padding: .875rem;
}

.dmp-scout-card-foto-col[b-b2q0b1nbr6] {
    flex-shrink: 0;
}

.dmp-scout-card-img[b-b2q0b1nbr6] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #E8E0D0;
    display: block;
}

.dmp-scout-card-avatar[b-b2q0b1nbr6] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #EDE7E0;
    border: 2px dashed #C8B9A8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A1887F;
    font-size: 1.5rem;
}

.dmp-scout-card-data[b-b2q0b1nbr6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.dmp-scout-card-nombre[b-b2q0b1nbr6] {
    color: #1F2937;
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dmp-scout-card-totem[b-b2q0b1nbr6] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: #795548;
    font-size: .78rem;
    font-weight: 600;
    font-style: italic;
}

/* ── Upload de foto en el modal ──────────────────────── */

.dmp-foto-upload[b-b2q0b1nbr6] {
    margin-top: .375rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.dmp-foto-input[b-b2q0b1nbr6] {
    font-size: .78rem;
    font-family: inherit;
    color: #5D4037;
}

.dmp-foto-hint[b-b2q0b1nbr6] {
    font-size: .72rem;
    color: #A1887F;
}

.dmp-foto-uploading[b-b2q0b1nbr6] {
    color: #2E7D32;
}

.dmp-foto-error[b-b2q0b1nbr6] {
    font-size: .72rem;
    color: #C62828;
    font-weight: 600;
}
/* /Pages/Configuracion/Fichas.razor.rz.scp.css */
/* ==========================================================================
   Fichas.razor.css — Estilos del Panel de Fichas de Documentación
   ==========================================================================
   CSS Isolation: aplica únicamente a Fichas.razor (Blazor scoped CSS).

   Zonas:
   A — Hero gradiente (fic-hero)
   B — Barra de filtros (fic-filter-card)
   C — Tabla desktop con columnas congeladas sticky
   D — Estado vacío y footer de tabla
   E — Cards mobile (mobile-scout-card)
   F — Modal de edición (fic-modal)
   G — Breakpoints responsivos

   Convención de colores:
   --scout-green-primary : #2E7D32
   --scout-green-dark    : #1B5E20
   --scout-green-pale    : #E8F5E9
   --border              : #E5E7EB
   --text-meta           : #78909C
   ========================================================================== */

/* ── A. Hero / Header Gradiente ────────────────────────────────────── */
.fic-hero[b-b07l3gk6xa] {
    background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 60%, #388E3C 100%);
    padding: 2.5rem 2rem 2rem;
}

.fic-hero-content[b-b07l3gk6xa] {
    max-width: 1360px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .fic-hero-content[b-b07l3gk6xa] {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

.fic-hero-title[b-b07l3gk6xa] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
    margin: 0;
}

.fic-hero-subtitle[b-b07l3gk6xa] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0.25rem 0 0;
}

.fic-hero-stats[b-b07l3gk6xa] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.fic-stat-badge[b-b07l3gk6xa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
    border-radius: 0.75rem;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ── B. Cuerpo principal ───────────────────────────────────────────── */
.fic-page-body[b-b07l3gk6xa] {
    max-width: 1360px;
    margin: 1.5rem auto 3rem;
    padding: 0 1rem 0;
}

@media (min-width: 640px) {
    .fic-page-body[b-b07l3gk6xa] { padding: 0 1.5rem 0; }
}

@media (min-width: 1024px) {
    .fic-page-body[b-b07l3gk6xa] { padding: 0 2.5rem 0; }
}

/* ── B1. Barra de Filtros ──────────────────────────────────────────── */
.fic-filter-card[b-b07l3gk6xa] {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.fic-filter-left[b-b07l3gk6xa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fic-filter-icon[b-b07l3gk6xa] {
    color: #2E7D32;
    font-size: 0.9rem;
}

.fic-filter-label[b-b07l3gk6xa] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #78909C;
    letter-spacing: 0.08em;
}

.fic-filter-controls[b-b07l3gk6xa] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    flex: 1;
}

.fic-filter-group[b-b07l3gk6xa] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 200px;
}

.fic-filter-vaciar[b-b07l3gk6xa] {
    min-width: auto;
    margin-left: auto;
    justify-content: flex-end;
}

.fic-btn-vaciar[b-b07l3gk6xa] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #C62828;
    background: #FFEBEE;
    border: 1.5px solid #EF9A9A;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.fic-btn-vaciar:hover[b-b07l3gk6xa] {
    background: #FFCDD2;
    border-color: #E57373;
}

.fic-btn-vaciar:disabled[b-b07l3gk6xa] {
    opacity: 0.6;
    cursor: not-allowed;
}

.fic-label[b-b07l3gk6xa] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #78909C;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── Checkbox filtro ──────────────────────────────────────────────── */
.fic-filter-check[b-b07l3gk6xa] {
    min-width: 140px;
}

.fic-checkbox-container[b-b07l3gk6xa] {
    height: 38px;
    display: flex;
    align-items: center;
}

.fic-checkbox-label[b-b07l3gk6xa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0px;
}

.fic-checkbox[b-b07l3gk6xa] {
    width: 1.1rem;
    height: 1.1rem;
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid #E5E7EB;
    border-radius: 0.375rem;
    background: #ffffff;
    cursor: pointer;
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    margin: 0;
}

.fic-checkbox:checked[b-b07l3gk6xa] {
    background-color: #2E7D32;
    border-color: #2E7D32;
}

.fic-checkbox:checked[b-b07l3gk6xa]::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: white;
    font-size: 0.6rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.fic-checkbox:focus[b-b07l3gk6xa] {
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12);
    border-color: #2E7D32;
}

.fic-checkbox-text[b-b07l3gk6xa] {
    color: #37474F;
    font-size: 0.82rem;
    font-weight: 500;
    transition: color 0.2s;
}

.fic-checkbox:hover[b-b07l3gk6xa] {
    border-color: #2E7D32;
}

.fic-checkbox:checked + .fic-checkbox-text[b-b07l3gk6xa] {
    color: #2E7D32;
    font-weight: 600;
}

.fic-select-wrapper[b-b07l3gk6xa] {
    position: relative;
    display: flex;
    align-items: center;
}

.fic-select-icon[b-b07l3gk6xa] {
    position: absolute;
    left: 0.75rem;
    color: #2E7D32;
    font-size: 0.8rem;
    pointer-events: none;
    z-index: 1;
}

.fic-select[b-b07l3gk6xa] {
    width: 100%;
    padding: 0.625rem 1rem 0.625rem 2.25rem;
    border: 1.5px solid #E5E7EB;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #37474F;
    background: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: none;
    cursor: pointer;
}

.fic-select:hover[b-b07l3gk6xa] {
    border-color: #2E7D32;
}

.fic-select:focus[b-b07l3gk6xa] {
    outline: none;
    border-color: #2E7D32;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12);
}

/* ── Loading ───────────────────────────────────────────────────────── */
.fic-loading[b-b07l3gk6xa] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
}

.fic-loading-text[b-b07l3gk6xa] {
    color: #78909C;
    font-size: 0.9rem;
}

/* ── C. Tabla Desktop ──────────────────────────────────────────────── */
.fic-table-card[b-b07l3gk6xa] {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 1rem;
    overflow: clip;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}

.fic-table-scroll[b-b07l3gk6xa] {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #C8E6C9 transparent;
}

.fic-table-scroll[b-b07l3gk6xa]::-webkit-scrollbar {
    height: 8px;
}

.fic-table-scroll[b-b07l3gk6xa]::-webkit-scrollbar-track {
    background: transparent;
}

.fic-table-scroll[b-b07l3gk6xa]::-webkit-scrollbar-thumb {
    background-color: #C8E6C9;
    border-radius: 4px;
}

.fic-table[b-b07l3gk6xa] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1100px;
    font-family: var(--font-sans, 'Inter', sans-serif);
}

/* ── Encabezado sticky ─────────────────────────────────────────────── */
.fic-table thead[b-b07l3gk6xa] {
    position: sticky;
    top: 0;
    z-index: 25;
}

.fic-table thead tr[b-b07l3gk6xa] {
    background: #FAFAFA;
    border-bottom: 2px solid #E5E7EB;
}

.fic-table thead th[b-b07l3gk6xa] {
    padding: 0.5rem 0.5rem;
    text-align: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: #78909C;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
    background: #FAFAFA;
    vertical-align: middle;
}

/* ── Columnas congeladas ───────────────────────────────────────────── */
.col-frozen[b-b07l3gk6xa] {
    position: sticky;
    z-index: 10;
    background-color: #ffffff;
}

.col-num[b-b07l3gk6xa] {
    left: 0;
    min-width: 46px;
    width: 46px;
    border-right: 1px solid #F0F0F0;
}

.col-nombre[b-b07l3gk6xa] {
    left: 46px;
    min-width: 120px;
    width: 120px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-apellido[b-b07l3gk6xa] {
    left: 166px;
    min-width: 120px;
    width: 120px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 4px 0 10px -2px rgba(0, 0, 0, 0.10);
}

.fic-table thead .col-frozen[b-b07l3gk6xa] {
    z-index: 30;
    background-color: #FAFAFA;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .col-num[b-b07l3gk6xa]      { min-width: 40px; width: 40px; }
    .col-nombre[b-b07l3gk6xa]   { left: 40px;  min-width: 90px; width: 90px;  max-width: 90px; }
    .col-apellido[b-b07l3gk6xa] { left: 130px; min-width: 90px; width: 90px;  max-width: 90px; }
}

/* ── Columnas de check ─────────────────────────────────────────────── */
.col-check[b-b07l3gk6xa] {
    min-width: 64px;
    max-width: 80px;
    text-align: center;
    vertical-align: middle;
    padding: 0.5rem 0.25rem;
}

/* ── Columna observaciones ─────────────────────────────────────────── */
.col-obs[b-b07l3gk6xa] {
    min-width: 160px;
    max-width: 220px;
    text-align: center;
    vertical-align: middle;
    padding: 0.5rem;
}

.fic-obs-text[b-b07l3gk6xa] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.78rem;
    color: #546E7A;
    line-height: 1.35;
}

.col-actions[b-b07l3gk6xa] {
    width: 58px;
    min-width: 58px;
    text-align: center;
    vertical-align: middle;
}

/* ── Iconos check/no en tabla ──────────────────────────────────────── */
[b-b07l3gk6xa] .fic-check-ok {
    color: #2E7D32;
    font-size: 0.85rem;
    background: #E8F5E9;
    border-radius: 50%;
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[b-b07l3gk6xa] .fic-check-no {
    color: #C62828;
    font-size: 0.75rem;
    background: #FFEBEE;
    border-radius: 50%;
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[b-b07l3gk6xa] .fic-check-pendiente {
    color: #E65100;
    font-size: 0.8rem;
    background: #FFF3E0;
    border-radius: 50%;
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[b-b07l3gk6xa] .fic-check-null {
    color: #90A4AE;
    font-size: 0.75rem;
    background: #F5F5F5;
    border-radius: 50%;
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Filas del cuerpo ──────────────────────────────────────────────── */
.fic-table tbody tr[b-b07l3gk6xa] {
    border-bottom: 1px solid #F0F0F0;
    transition: background-color 0.12s ease;
}

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

.fic-table tbody tr:hover[b-b07l3gk6xa] {
    background-color: #F9FAFB;
}

.fic-table tbody tr:hover .col-frozen[b-b07l3gk6xa] {
    background-color: #F9FAFB;
}

.fic-table tbody td[b-b07l3gk6xa] {
    padding: 0.625rem 0.5rem;
    font-size: 0.82rem;
    color: #37474F;
    vertical-align: middle;
}

/* ── Badge numérico ────────────────────────────────────────────────── */
.num-badge[b-b07l3gk6xa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 0.5rem;
    background: #E8F5E9;
    color: #2E7D32;
    font-weight: 700;
    font-size: 0.72rem;
    border: none;
    cursor: default;
}

/* ── Botón editar ──────────────────────────────────────────────────── */
.scout-edit-btn[b-b07l3gk6xa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1.5px solid #E5E7EB;
    border-radius: 0.625rem;
    background: #ffffff;
    color: #546E7A;
    cursor: pointer;
    transition: all 0.15s ease;
}

.scout-edit-btn:hover[b-b07l3gk6xa] {
    background: #E8F5E9;
    color: #2E7D32;
    border-color: #2E7D32;
}

/* ── Empty state ───────────────────────────────────────────────────── */
.fic-empty-state[b-b07l3gk6xa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    color: #78909C;
}

.fic-empty-icon[b-b07l3gk6xa] {
    font-size: 2.5rem;
    color: #C8E6C9;
    margin-bottom: 1rem;
}

.fic-empty-title[b-b07l3gk6xa] {
    font-size: 1rem;
    font-weight: 600;
    color: #546E7A;
    margin: 0 0 0.5rem;
}

.fic-empty-text[b-b07l3gk6xa] {
    font-size: 0.85rem;
    color: #78909C;
    margin: 0;
}

/* ── Footer de tabla ───────────────────────────────────────────────── */
.fic-table-footer[b-b07l3gk6xa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #F0F0F0;
    font-size: 0.78rem;
    color: #78909C;
}

/* ── E. Cards Mobile ───────────────────────────────────────────────── */
.mobile-scout-card[b-b07l3gk6xa] {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
    margin-bottom: 0.75rem;
    display: flex;
}

.mobile-card-accent[b-b07l3gk6xa] {
    width: 4px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #2E7D32, #66BB6A);
}

.mobile-card-body[b-b07l3gk6xa] {
    flex: 1;
    padding: 1rem;
    min-width: 0;
}

.mobile-card-info[b-b07l3gk6xa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    min-width: 0;
}

.mobile-card-name[b-b07l3gk6xa] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #37474F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.mobile-card-footer[b-b07l3gk6xa] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #E5E7EB;
}

.mobile-edit-btn[b-b07l3gk6xa] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.75rem;
    background: #E8F5E9;
    color: #2E7D32;
    border: 1px solid #C8E6C9;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.mobile-edit-btn:hover[b-b07l3gk6xa] {
    background: #C8E6C9;
}

.mobile-card-docs[b-b07l3gk6xa] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mobile-docs-count[b-b07l3gk6xa] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #78909C;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mobile-docs-grid[b-b07l3gk6xa] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.mobile-doc-item[b-b07l3gk6xa] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
}

.doc-ok[b-b07l3gk6xa] {
    background: #E8F5E9;
    color: #2E7D32;
}

.doc-missing[b-b07l3gk6xa] {
    background: #FAFAFA;
    color: #B0BEC5;
    border: 1px dashed #CFD8DC;
}

.doc-pendiente[b-b07l3gk6xa] {
    background: #FFF3E0;
    color: #E65100;
}

.mobile-obs[b-b07l3gk6xa] {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: #546E7A;
    line-height: 1.35;
    padding: 0.5rem;
    background: #FAFAFA;
    border-radius: 0.5rem;
    border-left: 3px solid #C8E6C9;
}

/* ── F. Modal de Edición ───────────────────────────────────────────── */
.fic-modal-backdrop[b-b07l3gk6xa] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    z-index: 999;
}

.fic-modal[b-b07l3gk6xa] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 560px);
    max-height: 90vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 1.25rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.fic-modal-header[b-b07l3gk6xa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #E5E7EB;
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
    border-radius: 1.25rem 1.25rem 0 0;
}

.fic-modal-title[b-b07l3gk6xa] {
    color: #1B5E20;
    font-size: 1rem;
    font-weight: 600;
}

.fic-modal-close[b-b07l3gk6xa] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.6);
    color: #546E7A;
    cursor: pointer;
    transition: all 0.15s;
}

.fic-modal-close:hover[b-b07l3gk6xa] {
    background: rgba(255, 255, 255, 0.9);
    color: #1B5E20;
}

.fic-modal-body[b-b07l3gk6xa] {
    padding: 1.5rem;
}

/* ── Grid de checks en modal ───────────────────────────────────────── */
.fic-form-grid[b-b07l3gk6xa] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem 0.75rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 480px) {
    .fic-form-grid[b-b07l3gk6xa] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.fic-form-select-item[b-b07l3gk6xa] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.35rem;
}

.fic-form-select-item .fic-label[b-b07l3gk6xa] {
    font-size: 0.78rem;
    color: #546E7A;
    font-weight: 600;
}

.fic-select-estado[b-b07l3gk6xa] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    color: #37474F;
    background: #FAFAFA;
    border: 1.5px solid #E5E7EB;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
    appearance: auto;
}

.fic-select-estado:hover[b-b07l3gk6xa] {
    border-color: #C8E6C9;
    background: #F1F8F1;
}

.fic-select-estado:focus[b-b07l3gk6xa] {
    outline: none;
    border-color: #2E7D32;
    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.15);
}

/* ── Colores condicionales del select según estado ─────────────────── */
.fic-select-estado.estado-V[b-b07l3gk6xa] {
    background: #E8F5E9;
    border-color: #A5D6A7;
    color: #2E7D32;
    font-weight: 600;
}

.fic-select-estado.estado-F[b-b07l3gk6xa] {
    background: #FFEBEE;
    border-color: #EF9A9A;
    color: #C62828;
    font-weight: 600;
}

.fic-select-estado.estado-P[b-b07l3gk6xa] {
    background: #FFF3E0;
    border-color: #FFCC80;
    color: #E65100;
    font-weight: 600;
}

.fic-select-estado option[b-b07l3gk6xa] {
    background: #ffffff;
    color: #37474F;
    font-weight: 400;
}

/* ── Observaciones en modal ────────────────────────────────────────── */
.fic-form-obs[b-b07l3gk6xa] {
    margin-bottom: 1.25rem;
}

.fic-form-obs .fic-label[b-b07l3gk6xa] {
    display: block;
    margin-bottom: 0.375rem;
}

.fic-textarea[b-b07l3gk6xa] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1.5px solid #E5E7EB;
    border-radius: 0.75rem;
    font-size: 0.85rem;
    font-family: var(--font-sans, 'Inter', sans-serif);
    color: #37474F;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.fic-textarea:focus[b-b07l3gk6xa] {
    outline: none;
    border-color: #2E7D32;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12);
}

/* ── Botones del modal ─────────────────────────────────────────────── */
.fic-form-footer[b-b07l3gk6xa] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.fic-btn-save[b-b07l3gk6xa] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%);
    color: #ffffff;
    border: none;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(46, 125, 50, 0.3);
}

.fic-btn-save:hover:not(:disabled)[b-b07l3gk6xa] {
    background: linear-gradient(135deg, #1B5E20 0%, #1B3022 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(46, 125, 50, 0.4);
}

.fic-btn-save:active[b-b07l3gk6xa] {
    transform: translateY(0);
}

.fic-btn-save:disabled[b-b07l3gk6xa] {
    opacity: 0.7;
    cursor: not-allowed;
}

.fic-btn-cancel[b-b07l3gk6xa] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    background: #ffffff;
    color: #546E7A;
    border: 1.5px solid #E5E7EB;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.fic-btn-cancel:hover[b-b07l3gk6xa] {
    background: #F9FAFB;
    border-color: #CFD8DC;
}

/* ── G. Volver link (reutilizo clase admin-hero-back de asistencia) ── */
[b-b07l3gk6xa] .admin-hero-back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 0.5rem;
    transition: color 0.15s;
}

[b-b07l3gk6xa] .admin-hero-back:hover {
    color: #ffffff;
}

/* ── Responsivo: Mobile-first fixes ────────────────────────────────── */
@media (max-width: 640px) {
    .fic-hero[b-b07l3gk6xa] { padding: 1.5rem 1rem 1.25rem; }
    .fic-filter-card[b-b07l3gk6xa] { padding: 1rem; }
    .fic-filter-group[b-b07l3gk6xa] { min-width: 100%; }
    .fic-form-footer[b-b07l3gk6xa] {
        flex-direction: column;
    }
    .fic-form-footer button[b-b07l3gk6xa] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Configuracion/Index.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   Configuracion/Index.razor.css — Layout, header, buscador, estados
   ═══════════════════════════════════════════════════════════════════ */

/* ── Header ─────────────────────────────────────────────────────── */
.cfg-header[b-27vpoc7xhg] {
    background: linear-gradient(135deg, var(--primary-dark, #1B5E20), var(--primary, #2E7D32), #388E3C);
    padding: 2.5rem 1rem 3.5rem;
}

.cfg-header__contenedor[b-27vpoc7xhg] {
    max-width: 64rem;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.cfg-header__icono-caja[b-27vpoc7xhg] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cfg-header__icono[b-27vpoc7xhg] {
    font-size: 1.5rem;
    color: white;
}

.cfg-header__titulo[b-27vpoc7xhg] {
    font-family: 'Bitter', serif;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.cfg-header__meta[b-27vpoc7xhg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.cfg-header__badge-rol[b-27vpoc7xhg] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid;
    line-height: 1.4;
}

.cfg-header__contador[b-27vpoc7xhg] {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
}

/* ── Contenido principal ────────────────────────────────────────── */
.cfg-contenido[b-27vpoc7xhg] {
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

/* ── Buscador ───────────────────────────────────────────────────── */
.cfg-buscador-wrapper[b-27vpoc7xhg] {
    margin-top: -1.5rem;
    margin-bottom: 1.5rem;
}

.cfg-buscador[b-27vpoc7xhg] {
    position: relative;
    display: flex;
    align-items: center;
}

.cfg-buscador__icono[b-27vpoc7xhg] {
    position: absolute;
    left: 1rem;
    color: #9e9e9e;
    font-size: 1rem;
    pointer-events: none;
}

.cfg-buscador__input[b-27vpoc7xhg] {
    width: 100%;
    padding: 1rem 3rem 1rem 3rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.75rem;
    font-size: 1rem;
    background: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: border-color 200ms, box-shadow 200ms;
    outline: none;
}

.cfg-buscador__input:focus[b-27vpoc7xhg] {
    border-color: var(--primary, #2E7D32);
    box-shadow: 0 4px 20px rgba(46, 125, 50, 0.15);
}

.cfg-buscador__input[b-27vpoc7xhg]::placeholder {
    color: #bdbdbd;
}

.cfg-buscador__limpiar[b-27vpoc7xhg] {
    position: absolute;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: none;
    background: #f5f5f5;
    color: #757575;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms, color 200ms;
}

.cfg-buscador__limpiar:hover[b-27vpoc7xhg] {
    background: #e0e0e0;
    color: #424242;
}

.cfg-buscador__resultados[b-27vpoc7xhg] {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: #757575;
    padding-left: 0.25rem;
}

/* ── Grid de categorías ─────────────────────────────────────────── */
.cfg-categorias[b-27vpoc7xhg] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Botón expandir/colapsar todo ───────────────────────────────── */
.cfg-toggle-todo[b-27vpoc7xhg] {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.cfg-toggle-todo__btn[b-27vpoc7xhg] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    background: white;
    color: #616161;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 200ms, border-color 200ms, color 200ms;
}

.cfg-toggle-todo__btn:hover[b-27vpoc7xhg] {
    background: #f5f5f5;
    border-color: #bdbdbd;
    color: #424242;
}

/* ── Estado vacío ───────────────────────────────────────────────── */
.cfg-vacio[b-27vpoc7xhg] {
    text-align: center;
    padding: 4rem 1rem;
}

.cfg-vacio__icono[b-27vpoc7xhg] {
    font-size: 3rem;
    color: #bdbdbd;
    margin-bottom: 1rem;
}

.cfg-vacio__titulo[b-27vpoc7xhg] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #424242;
    margin: 0 0 0.5rem;
}

.cfg-vacio__desc[b-27vpoc7xhg] {
    color: #757575;
    font-size: 0.9rem;
    margin: 0 0 1.5rem;
}

.cfg-vacio__btn[b-27vpoc7xhg] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.5rem;
    border: 1px solid var(--primary, #2E7D32);
    border-radius: 0.5rem;
    background: transparent;
    color: var(--primary, #2E7D32);
    font-weight: 500;
    cursor: pointer;
    transition: background 200ms, color 200ms;
}

.cfg-vacio__btn:hover[b-27vpoc7xhg] {
    background: var(--primary, #2E7D32);
    color: white;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (min-width: 640px) {
    .cfg-header[b-27vpoc7xhg] {
        padding: 3rem 1.5rem 4rem;
    }

    .cfg-header__icono-caja[b-27vpoc7xhg] {
        width: 4rem;
        height: 4rem;
    }

    .cfg-header__icono[b-27vpoc7xhg] {
        font-size: 1.75rem;
    }

    .cfg-contenido[b-27vpoc7xhg] {
        padding: 0 1.5rem 3rem;
    }

    .cfg-buscador-wrapper[b-27vpoc7xhg] {
        margin-top: -1.75rem;
    }
}

@media (min-width: 1024px) {
    .cfg-header[b-27vpoc7xhg] {
        padding: 3.5rem 2rem 4.5rem;
    }

    .cfg-contenido[b-27vpoc7xhg] {
        padding: 0 2rem 3rem;
    }
}

/* ── Aviso de favoritos ─────────────────────────────────────────── */
.cfg-aviso-fav[b-27vpoc7xhg] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    color: #1E40AF;
    line-height: 1.45;
    margin-bottom: 0.5rem;
}

.cfg-aviso-fav__icono[b-27vpoc7xhg] {
    flex-shrink: 0;
    color: #F59E0B;
    font-size: 0.9rem;
    margin-top: 0.1rem;
}
/* /Pages/Configuracion/Mensajes/Panel.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   Panel.razor.css — Panel de moderación del libro de mensajes
   Prefijo: mpa- (mensajes-panel-admin)
   ══════════════════════════════════════════════════════════════ */

/* ── Contenedor global ── */
.mpa-page[b-dr2k3s1ggt] {
    background: var(--surface);
    min-height: 100vh;
    padding-bottom: 3rem;
}

.mpa-outer[b-dr2k3s1ggt] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 2rem;
}

/* ════════════════════════════════════════════════════════════════
   TOOLBAR: tabs + buscador
   ════════════════════════════════════════════════════════════════ */
.mpa-toolbar[b-dr2k3s1ggt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

/* Barra de tabs: estilo admin unificado (rectangular, igual que Noticias/Panel) */
.mpa-tabs-bar[b-dr2k3s1ggt] {
    display: flex;
    gap: 0.375rem;
    background: #ECEFF1;
    border-radius: 0.75rem;
    padding: 0.25rem;
    flex-wrap: wrap;
}

.mpa-tab[b-dr2k3s1ggt] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.mpa-tab:hover[b-dr2k3s1ggt] {
    background: rgba(0,0,0,0.05);
    color: var(--text);
}

.mpa-tab-active[b-dr2k3s1ggt] {
    background: white;
    color: var(--text, #37474F);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Pills de contadores */
.mpa-tab-pill[b-dr2k3s1ggt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.35rem;
    border-radius: 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    background: rgba(0,0,0,0.08);
    color: inherit;
}

.mpa-tab-pill-on[b-dr2k3s1ggt] {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.mpa-tab-pill-pendiente[b-dr2k3s1ggt] { background: #FFF9C4; color: #F57F17; }
.mpa-tab-pill-aprobado[b-dr2k3s1ggt]  { background: #E8F5E9; color: #2E7D32; }
.mpa-tab-pill-rechazado[b-dr2k3s1ggt] { background: #FFEBEE; color: #B71C1C; }

/* Buscador: flex para alinear input + botón en una fila */
.mpa-search-wrap[b-dr2k3s1ggt] {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
}

@media (min-width: 640px) {
    .mpa-search-wrap[b-dr2k3s1ggt] {
        width: 21rem;
    }
}

.mpa-search-icon[b-dr2k3s1ggt] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.mpa-search-input[b-dr2k3s1ggt] {
    flex: 1;
    min-width: 0;
    padding: 0.625rem 1rem 0.625rem 2.25rem;
    border: 1px solid #E0E0E0;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    background: var(--background);
    color: var(--text);
    transition: border-color 0.2s;
    outline: none;
}

.mpa-search-input:focus[b-dr2k3s1ggt] {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.12);
}

/* Botón Buscar: mismo alto que el input, verde institucional */
.mpa-search-btn[b-dr2k3s1ggt] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: 0 .875rem;
    height: 36px;
    background: var(--primary, #2E7D32);
    color: #fff;
    border: none;
    border-radius: .5rem;
    font-size: .84rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}

.mpa-search-btn:hover[b-dr2k3s1ggt]  { background: #1B5E20; }
.mpa-search-btn:active[b-dr2k3s1ggt] { transform: scale(.97); }

/* ════════════════════════════════════════════════════════════════
   ESTADOS VACÍO / CARGANDO
   ════════════════════════════════════════════════════════════════ */
.mpa-loading[b-dr2k3s1ggt] {
    display: flex;
    justify-content: center;
    padding: 5rem 0;
}

.mpa-empty[b-dr2k3s1ggt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 1rem;
    text-align: center;
}

.mpa-empty-icon[b-dr2k3s1ggt] {
    font-size: 2.5rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.mpa-empty-title[b-dr2k3s1ggt] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.35rem;
}

.mpa-empty-sub[b-dr2k3s1ggt] {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════════════
   TABLA DESKTOP
   ════════════════════════════════════════════════════════════════ */
.mpa-table-card[b-dr2k3s1ggt] {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
}

.mpa-table-scroll[b-dr2k3s1ggt] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mpa-table[b-dr2k3s1ggt] {
    width: 100%;
    border-collapse: collapse;
}

.mpa-thead-row[b-dr2k3s1ggt] {
    background: #FAFAFA;
    border-bottom: 1px solid #E0E0E0;
}

.mpa-th[b-dr2k3s1ggt] {
    padding: 0.75rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #78909C;
    text-align: left;
    white-space: nowrap;
}

.mpa-th-actions[b-dr2k3s1ggt] {
    text-align: center;
}

.mpa-tr[b-dr2k3s1ggt] {
    border-bottom: 1px solid #F0F0F0;
    transition: background-color 100ms;
}

.mpa-tr:hover[b-dr2k3s1ggt] {
    background: #FAFAFA;
}

.mpa-tr:last-child[b-dr2k3s1ggt] {
    border-bottom: none;
}

.mpa-td[b-dr2k3s1ggt] {
    padding: 1rem 1rem;
    font-size: 0.875rem;
    color: var(--text);
    vertical-align: middle;
}

.mpa-td-actions[b-dr2k3s1ggt] {
    text-align: center;
    vertical-align: middle;
}

/* Fila de respuesta inline (sin hover, visual diferenciado) */
.mpa-tr-reply[b-dr2k3s1ggt] {
    background: #F1F8E9;
    border-bottom: 1px solid #C8E6C9;
}

.mpa-td-reply[b-dr2k3s1ggt] {
    padding: 0;
}

/* ── Celda usuario ── */
.mpa-user-cell[b-dr2k3s1ggt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mpa-avatar[b-dr2k3s1ggt] {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.mpa-avatar-sanpa[b-dr2k3s1ggt] {
    background: linear-gradient(135deg, #2E7D32, #43A047);
}

.mpa-avatar-otro[b-dr2k3s1ggt] {
    background: linear-gradient(135deg, #78909C, #90A4AE);
}

.mpa-nombre[b-dr2k3s1ggt] {
    font-weight: 600;
    font-size: 0.88rem;
    color: #263238;
    text-transform: capitalize;
    display: block;
}

/* Fecha */
.mpa-fecha[b-dr2k3s1ggt] {
    font-size: 0.82rem;
    color: #78909C;
    white-space: nowrap;
}

.mpa-fecha-block[b-dr2k3s1ggt] {
    display: block;
    font-size: 0.75rem;
}

/* Lugar / País */
.mpa-lugar[b-dr2k3s1ggt] {
    display: block;
    font-size: 0.875rem;
    color: var(--text);
    text-transform: capitalize;
}

.mpa-pais[b-dr2k3s1ggt] {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

/* Grupo */
.mpa-grupo[b-dr2k3s1ggt] {
    font-size: 0.82rem;
    color: var(--text);
}

.mpa-grupo-sanpa[b-dr2k3s1ggt] {
    color: #2E7D32;
    font-weight: 600;
}

/* Mensaje expandible */
.mpa-msg-wrap[b-dr2k3s1ggt] {
    width: 100%;
}

.mpa-msg-text[b-dr2k3s1ggt] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.mpa-msg-collapsed[b-dr2k3s1ggt] {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mpa-msg-expanded[b-dr2k3s1ggt] {
    overflow: visible;
    display: block;
}

.mpa-expand-btn[b-dr2k3s1ggt] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.3rem;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 0.78rem;
    color: var(--primary);
    cursor: pointer;
    font-weight: 500;
}

.mpa-expand-btn:hover[b-dr2k3s1ggt] {
    text-decoration: underline;
}

/* ── Badges de estado ── */
.mpa-badge[b-dr2k3s1ggt] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.mpa-badge-pendiente[b-dr2k3s1ggt] {
    background: #FFF9C4;
    color: #F57F17;
}

.mpa-badge-aprobado[b-dr2k3s1ggt] {
    background: #E8F5E9;
    color: #2E7D32;
}

.mpa-badge-rechazado[b-dr2k3s1ggt] {
    background: #FFEBEE;
    color: #B71C1C;
}

/* ── Botones de acción ── */
.mpa-action-btns[b-dr2k3s1ggt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.mpa-action-btn[b-dr2k3s1ggt] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.55rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
    white-space: nowrap;
}

.mpa-action-btn:disabled[b-dr2k3s1ggt] {
    opacity: 0.55;
    cursor: not-allowed;
}

.mpa-btn-green[b-dr2k3s1ggt] {
    background: #2E7D32;
    color: white;
    border-color: #2E7D32;
}

.mpa-btn-green:hover:not(:disabled)[b-dr2k3s1ggt] {
    background: #1B5E20;
    border-color: #1B5E20;
}

.mpa-btn-red[b-dr2k3s1ggt] {
    background: #D32F2F;
    color: white;
    border-color: #D32F2F;
}

.mpa-btn-red:hover:not(:disabled)[b-dr2k3s1ggt] {
    background: #B71C1C;
    border-color: #B71C1C;
}

.mpa-btn-outline-green[b-dr2k3s1ggt] {
    background: transparent;
    color: #2E7D32;
    border-color: #2E7D32;
}

.mpa-btn-outline-green:hover:not(:disabled)[b-dr2k3s1ggt] {
    background: #E8F5E9;
}

.mpa-btn-outline-grey[b-dr2k3s1ggt] {
    background: transparent;
    color: #546E7A;
    border-color: #546E7A;
}

.mpa-btn-outline-grey:hover:not(:disabled)[b-dr2k3s1ggt] {
    background: #ECEFF1;
}

/* ════════════════════════════════════════════════════════════════
   RESPUESTA INLINE (desktop dentro del tr, mobile dentro del card)
   ════════════════════════════════════════════════════════════════ */
.mpa-reply-inline[b-dr2k3s1ggt] {
    padding: 1rem 1.25rem;
    background: #F1F8E9;
    border-top: 1px solid #C8E6C9;
    border-radius: 0 0 10px 10px;
}

.mpa-reply-inline-header[b-dr2k3s1ggt] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #2E7D32;
    margin-bottom: 0.6rem;
}

.mpa-reply-textarea[b-dr2k3s1ggt] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #A5D6A7;
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--text);
    background: white;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
}

.mpa-reply-textarea:focus[b-dr2k3s1ggt] {
    border-color: #2E7D32;
    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.1);
}

.mpa-reply-inline-footer[b-dr2k3s1ggt] {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.mpa-btn-cancelar[b-dr2k3s1ggt] {
    padding: 0.4rem 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: white;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.mpa-btn-cancelar:hover[b-dr2k3s1ggt] {
    background: var(--surface);
}

.mpa-btn-publicar[b-dr2k3s1ggt] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1.1rem;
    border: none;
    border-radius: 6px;
    background: #2E7D32;
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}

.mpa-btn-publicar:hover:not(:disabled)[b-dr2k3s1ggt] {
    background: #1B5E20;
}

.mpa-btn-publicar:disabled[b-dr2k3s1ggt] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Spinner dentro del botón Publicar */
.mpa-spinner[b-dr2k3s1ggt] {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: mpa-spin-b-dr2k3s1ggt 0.6s linear infinite;
}

@keyframes mpa-spin-b-dr2k3s1ggt {
    to { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════════════════════════
   TARJETAS MOBILE
   ════════════════════════════════════════════════════════════════ */
.mpa-mobile-list[b-dr2k3s1ggt] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.mpa-card[b-dr2k3s1ggt] {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: 0.75rem;
    overflow: hidden;
}

.mpa-card-header[b-dr2k3s1ggt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 0.85rem 0.5rem;
    flex-wrap: wrap;
}

.mpa-card-meta[b-dr2k3s1ggt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 0.85rem 0.5rem;
}

.mpa-meta-item[b-dr2k3s1ggt] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.mpa-meta-sanpa[b-dr2k3s1ggt] {
    color: #2E7D32;
    font-weight: 600;
}

.mpa-card .mpa-msg-wrap[b-dr2k3s1ggt] {
    padding: 0 0.85rem 0.75rem;
}

/* Respuesta del grupo en tarjeta mobile */
.mpa-card-reply[b-dr2k3s1ggt] {
    margin: 0 0.85rem 0.75rem;
    background: #F1F8E9;
    border: 1px solid #C5E1A5;
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
}

.mpa-card-reply-header[b-dr2k3s1ggt] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #2E7D32;
    margin-bottom: 0.3rem;
}

.mpa-card-reply-fecha[b-dr2k3s1ggt] {
    margin-left: auto;
    color: #558B2F;
    font-size: 0.73rem;
}

.mpa-card-reply-text[b-dr2k3s1ggt] {
    font-size: 0.85rem;
    color: #1B5E20;
    margin: 0;
    line-height: 1.5;
}

.mpa-card-actions[b-dr2k3s1ggt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 0.85rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.mpa-card .mpa-reply-inline[b-dr2k3s1ggt] {
    border-radius: 0;
    border-top: 1px solid #C8E6C9;
}

/* ════════════════════════════════════════════════════════════════
   LEYENDA
   ════════════════════════════════════════════════════════════════ */
.mpa-legend[b-dr2k3s1ggt] {
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.mpa-legend-title[b-dr2k3s1ggt] {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.mpa-legend-items[b-dr2k3s1ggt] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.mpa-legend-item[b-dr2k3s1ggt] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
}

.mpa-legend-icon[b-dr2k3s1ggt] {
    font-size: 0.9375rem;
    flex-shrink: 0;
}

.mpa-legend-approve[b-dr2k3s1ggt] { color: #2E7D32; }
.mpa-legend-reject[b-dr2k3s1ggt]  { color: #D32F2F; }
.mpa-legend-reply[b-dr2k3s1ggt]   { color: #1565C0; }
.mpa-legend-restore[b-dr2k3s1ggt] { color: #546E7A; }

.mpa-legend-label[b-dr2k3s1ggt] {
    font-weight: 600;
    color: var(--text);
}

.mpa-legend-note[b-dr2k3s1ggt] {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* ── Columnas IP / Mail (solo admin, no visibles en el público) ── */
.mpa-ip-text[b-dr2k3s1ggt] {
    display: block;
    font-size: 0.8rem;
    font-family: monospace;
    color: var(--text);
    word-break: break-all;
}

.mpa-ip-usuario[b-dr2k3s1ggt] {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}

.mpa-mail-text[b-dr2k3s1ggt] {
    font-size: 0.8rem;
    color: var(--text);
    word-break: break-all;
}

/* ════════════════════════════════════════════════════════════════
   COLUMNAS DE PRIVACIDAD (toggle IP / Mail)
   ════════════════════════════════════════════════════════════════ */

/* Encabezado de columna privada */
.mpa-th-privacy[b-dr2k3s1ggt] {
    position: relative;
}

/* Columna colapsada: ancho fijo, centrada, clickeable entero */
.mpa-th-privacy-collapsed[b-dr2k3s1ggt] {
    width: 52px !important;
    min-width: 52px !important;
    text-align: center;
    cursor: pointer;
}

/* Celda de datos de privacidad */
.mpa-td-privacy[b-dr2k3s1ggt] {
}

.mpa-td-privacy-collapsed[b-dr2k3s1ggt] {
    width: 52px !important;
    min-width: 52px !important;
    text-align: center;
}

/* Botón ojo en el encabezado (invisible, el th entero es clickeable) */
.mpa-col-toggle[b-dr2k3s1ggt] {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    vertical-align: middle;
    color: #78909C;
    transition: color 0.15s;
}

.mpa-col-toggle:hover[b-dr2k3s1ggt] {
    color: #546E7A;
}

/* Ícono del ojo */
.mpa-th-lock[b-dr2k3s1ggt] {
    font-size: 0.75rem;
}

/* Label abreviado cuando la columna está colapsada */
.mpa-col-hidden-label[b-dr2k3s1ggt] {
    display: block;
    font-size: 0.58rem;
    color: #B0BEC5;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Texto enmascarado en las celdas colapsadas */
.mpa-masked-col[b-dr2k3s1ggt] {
    font-family: monospace;
    color: #B0BEC5;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
}

/* ════════════════════════════════════════════════════════════════
   COLUMNA AUTOR FUSIONADA (nombre + ubicación + grupo)
   ════════════════════════════════════════════════════════════════ */

/* Segunda línea: bandera + ubicación + badge grupo — todo inline */
.mpa-autor-line2[b-dr2k3s1ggt] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.125rem;
}

.mpa-autor-meta[b-dr2k3s1ggt] {
    font-size: 0.6875rem;
    color: #78909C;
    white-space: nowrap;
}

/* Badge de grupo scout */
.mpa-grupo-badge[b-dr2k3s1ggt] {
    display: inline-block;
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
    font-weight: 600;
    white-space: nowrap;
}

.mpa-grupo-badge-sanpa[b-dr2k3s1ggt] {
    background: #E8F5E9;
    color: #2E7D32;
}

.mpa-grupo-badge-otro[b-dr2k3s1ggt] {
    background: #F5F5F5;
    color: #9E9E9E;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .mpa-toolbar[b-dr2k3s1ggt] {
        flex-direction: column;
        align-items: stretch;
    }

    .mpa-legend-items[b-dr2k3s1ggt] {
        gap: 0.6rem 1rem;
    }

    .mpa-legend-note[b-dr2k3s1ggt] {
        display: none;
    }

    /* En mobile, botones de acción solo muestran ícono */
    .mpa-card-actions .mpa-action-btn span[b-dr2k3s1ggt] {
        display: none;
    }

    .mpa-card-actions .mpa-action-btn[b-dr2k3s1ggt] {
        padding: 0.45rem;
        border-radius: 50%;
    }

    /* Paginación mobile */
    .mpa-pag-label[b-dr2k3s1ggt] {
        display: none;
    }
}

/* ════════════════════════════════════════════════════════════════
   PAGINACIÓN
   ════════════════════════════════════════════════════════════════ */
.mpa-pagination[b-dr2k3s1ggt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.mpa-pag-numbers[b-dr2k3s1ggt] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.mpa-pag-btn[b-dr2k3s1ggt] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid #E0E0E0;
    border-radius: 0.375rem;
    background: #ffffff;
    color: #546E7A;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.mpa-pag-btn:hover:not(:disabled)[b-dr2k3s1ggt] {
    background: #F5F5F5;
    border-color: #BDBDBD;
}

.mpa-pag-btn:disabled[b-dr2k3s1ggt] {
    opacity: 0.4;
    cursor: not-allowed;
}

.mpa-pag-num[b-dr2k3s1ggt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.375rem;
    border: 1px solid #E0E0E0;
    border-radius: 0.375rem;
    background: #ffffff;
    color: #546E7A;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.mpa-pag-num:hover:not(.mpa-pag-active)[b-dr2k3s1ggt] {
    background: #F5F5F5;
    border-color: #BDBDBD;
}

.mpa-pag-active[b-dr2k3s1ggt] {
    background: #2E7D32 !important;
    color: #ffffff !important;
    border-color: #2E7D32 !important;
    font-weight: 600 !important;
}

.mpa-pag-label[b-dr2k3s1ggt] {
    display: none;
}

@media (min-width: 768px) {
    .mpa-pag-label[b-dr2k3s1ggt] {
        display: inline;
    }
}

.mpa-pag-dots[b-dr2k3s1ggt] {
    padding: 0 0.25rem;
    font-size: 0.85rem;
    color: #BDBDBD;
    user-select: none;
}

.mpa-pag-info[b-dr2k3s1ggt] {
    text-align: center;
    width: 100%;
    font-size: 0.78rem;
    color: #78909C;
    margin-top: 0.5rem;
}
/* /Pages/Configuracion/Noticias/Alta.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   Alta.razor.css — Estilos del formulario de alta/edición de noticias
   ════════════════════════════════════════════════════════════════
   Todos los selectores usan el prefijo "cnp-" (Create News Page)
   para evitar colisiones con clases globales de Bootstrap o app.css.

   Por ser un archivo .razor.css, Blazor aplica scoping automático:
   compila cada regla como .cnp-clase[b-xxxx], donde [b-xxxx] es un
   atributo único del componente. La excepción son las reglas con
   ::deep, que penetran el scoping y alcanzan elementos renderizados
   por componentes Blazor hijos (InputDate, EditForm, Quill).

   Estructura del archivo:
     1. Contenedor de página y animación de entrada
     2. Card principal (outer + card + header)
     3. Cuerpo del formulario (field, label, input, contador)
     4. Input de fecha con calendario personalizado
     5. Editor Quill (toolbar + área de texto)
     6. Sección de imágenes (input row, lista, thumbnail, badge, estado vacío)
     7. Footer de acciones (Volver + Crear/Guardar)
     8. Mensajes de validación
     9. Responsive mobile (≤480px)
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   1. CONTENEDOR DE PÁGINA Y ANIMACIÓN
   ════════════════════════════════════════════════════════════════ */

/* Fondo gris neutro que emula el contexto de la referencia React.
   La animación cnpFadeIn suaviza la aparición de la card al navigar. */
.cnp-page[b-l0fic3zjrc] {
    min-height: 100vh;
    background-color: #F5F5F5;
    animation: cnpFadeIn-b-l0fic3zjrc .4s ease both;
}

/* Espaciador superior que separa la card de la barra de navegación */
.cnp-spacer[b-l0fic3zjrc] {
    height: 1.5rem; /* 24px en móvil */
}

@media (min-width: 640px) {
    .cnp-spacer[b-l0fic3zjrc] { height: 2.5rem; } /* 40px en escritorio */
}

/* Animación de entrada: la card sube 16px con fade.
   La misma animación se reutiliza en cada fila de imagen al agregarla. */
@keyframes cnpFadeIn-b-l0fic3zjrc {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ════════════════════════════════════════════════════════════════
   2. CARD PRINCIPAL
   ════════════════════════════════════════════════════════════════ */

/* Wrapper que limita el ancho máximo y centra horizontalmente la card.
   El padding-bottom de 4rem evita que el botón quede pegado al pie. */
.cnp-card-outer[b-l0fic3zjrc] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

@media (min-width: 640px) {
    .cnp-card-outer[b-l0fic3zjrc] { padding: 0 1.5rem 4rem; }
}

/* Superficie blanca con borde sutil, bordes redondeados y sombra difusa.
   overflow:hidden recorta los bordes del editor Quill dentro de la card. */
.cnp-card[b-l0fic3zjrc] {
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid #E8E4DD;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    overflow: hidden;
}

/* Cabecera de la card con título y subtítulo.
   El borde inferior separa visualmente el encabezado del formulario. */
.cnp-card-header[b-l0fic3zjrc] {
    padding: 2rem 1.5rem 1.5rem;
    border-bottom: 1px solid #F0EDE6;
}

@media (min-width: 640px) {
    .cnp-card-header[b-l0fic3zjrc] { padding: 2.5rem 2.5rem 1.5rem; }
}

/* Título en tipografía serif Bitter, coherente con el resto del sistema */
.cnp-card-title[b-l0fic3zjrc] {
    font-size: 1.75rem;
    font-weight: 700;
    font-family: 'Bitter', Georgia, serif;
    color: #37474F;
    margin: 0 0 .375rem;
    line-height: 1.2;
}

/* Subtítulo descriptivo en gris semitransparente */
.cnp-card-subtitle[b-l0fic3zjrc] {
    font-size: .95rem;
    color: rgba(55,71,79,.5);
    margin: 0;
}


/* ════════════════════════════════════════════════════════════════
   3. CUERPO DEL FORMULARIO — CAMPOS, LABELS E INPUTS
   ════════════════════════════════════════════════════════════════ */

/* Contenedor flex vertical con separación uniforme entre campos.
   NOTA: la clase va en un <div> dentro de <EditForm>, no en el propio
   <EditForm>, porque el <form> renderizado por ese componente Blazor
   no hereda el atributo de scoping [b-xxxx]. */
.cnp-form-body[b-l0fic3zjrc] {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding: 2rem 1.5rem;
}

@media (min-width: 640px) {
    .cnp-form-body[b-l0fic3zjrc] { padding: 2rem 2.5rem; }
}

/* Cada campo es un bloque flex vertical con separación entre label e input */
.cnp-field[b-l0fic3zjrc] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Fila que contiene el label y el contador de caracteres en extremos opuestos */
.cnp-field-header[b-l0fic3zjrc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Agrupa el botón de emoji + contador de chars en el extremo derecho del header */
.cnp-header-actions[b-l0fic3zjrc] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Label en negrita, color principal del sistema */
.cnp-label[b-l0fic3zjrc] {
    font-size: .875rem;
    font-weight: 600;
    color: #37474F;
    margin: 0;
}

/* ── Contador de caracteres ──
   Usa tabular-nums para evitar saltos de ancho al cambiar los dígitos.
   El estado cnp-char-near (≥90% del límite) señala al usuario que está
   por alcanzar el máximo, cambiando a rojo con transición suave. */
.cnp-char-counter[b-l0fic3zjrc] {
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    user-select: none;
    color: rgba(55,71,79,.35);
    font-weight: 400;
    transition: color .15s, font-weight .15s;
}

.cnp-char-counter.cnp-char-near[b-l0fic3zjrc] {
    color: #D32F2F;
    font-weight: 600;
}

/* ── Input base ──
   Fondo cálido #FAFAF7, borde suave y bordes redondeados en estilo pill.
   Al recibir foco se aplica un anillo verde semitransparente consistente
   con la paleta scout del design system. */
.cnp-input[b-l0fic3zjrc] {
    width: 100%;
    background: #FAFAF7;
    border: 1px solid #E0DBD1;
    border-radius: .75rem;
    padding: .75rem 1rem;
    font-size: .95rem;
    color: #37474F;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}

.cnp-input[b-l0fic3zjrc]::placeholder {
    color: rgba(55,71,79,.30);
}

.cnp-input:focus[b-l0fic3zjrc] {
    border-color: rgba(46,125,50,.40);
    box-shadow: 0 0 0 3px rgba(46,125,50,.14);
}

/* El textarea hereda el estilo base de cnp-input; se deshabilita el resize
   para mantener la proporción del layout. */
.cnp-textarea[b-l0fic3zjrc] {
    resize: none;
    line-height: 1.6;
}


/* ════════════════════════════════════════════════════════════════
   4. CAMPO DE FECHA CON CALENDARIO PERSONALIZADO
   ════════════════════════════════════════════════════════════════ */

/* Wrapper relativo para poder posicionar el ícono sobre el input */
.cnp-date-wrapper[b-l0fic3zjrc] {
    position: relative;
}

/* Regla de scoping normal (para cuando el input recibe [b-xxxx]) */
.cnp-date-input[b-l0fic3zjrc] {
    padding-right: 2.75rem;
    appearance: none;
    -webkit-appearance: none;
    color-scheme: light;
}

/* ::deep alcanza el <input type="date"> renderizado por el componente
   Blazor <InputDate>, que no recibe el atributo [b-xxxx] de scoping.
   Sin ::deep esta regla nunca llegaría a ese elemento. */
[b-l0fic3zjrc] .cnp-date-input {
    width: 100%;
    background: #FAFAF7;
    border: 1px solid #E0DBD1;
    border-radius: .75rem;
    padding: .75rem 1rem;
    padding-right: 2.75rem;
    font-size: .95rem;
    color: #37474F;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    color-scheme: light;
}

[b-l0fic3zjrc] .cnp-date-input:focus {
    border-color: rgba(46,125,50,.40);
    box-shadow: 0 0 0 3px rgba(46,125,50,.14);
}

/* Hacemos el indicador de calendario nativo transparente pero clickeable.
   Visualmente se usa el ícono FontAwesome (.cnp-date-icon); al clickear
   en su área se abre el date picker nativo del navegador. */
[b-l0fic3zjrc] .cnp-date-input::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 2.75rem;
    height: 100%;
    cursor: pointer;
    z-index: 2;
}

[b-l0fic3zjrc] .cnp-date-input::-webkit-inner-spin-button {
    display: none;
}

/* Ícono decorativo de calendario posicionado en el extremo derecho del input.
   pointer-events: none deja que el click pase al calendar-picker-indicator
   transparente que está debajo, abriendo el date picker nativo. */
.cnp-date-icon[b-l0fic3zjrc] {
    position: absolute;
    right: .875rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(55,71,79,.35);
    pointer-events: none;
    font-size: .95rem;
    line-height: 1;
    z-index: 1;
}

/* Asterisco de campo obligatorio */
.cnp-required[b-l0fic3zjrc] {
    color: #D32F2F;
    margin-left: .2rem;
}

/* Botón auxiliar que completa la fecha con la del día de hoy */
.cnp-hoy-btn[b-l0fic3zjrc] {
    align-self: flex-start;
    background: none;
    border: 1px solid rgba(46,125,50,.35);
    border-radius: .5rem;
    color: #2E7D32;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 500;
    padding: .3rem .75rem;
    transition: background .15s, border-color .15s;
    font-family: inherit;
}

.cnp-hoy-btn:hover[b-l0fic3zjrc] {
    background: rgba(46,125,50,.06);
    border-color: rgba(46,125,50,.65);
}


/* ════════════════════════════════════════════════════════════════
   5. EDITOR QUILL
   ════════════════════════════════════════════════════════════════ */

/* ::deep es necesario porque Quill inyecta su DOM directamente en el div
   vacío de la página; ese DOM no tiene el atributo de scoping de Blazor. */

/* Contenedor del editor con borde y transición de foco igual al de los inputs */
[b-l0fic3zjrc] .cnp-quill-wrapper {
    border: 1px solid #E0DBD1;
    border-radius: .75rem;
    overflow: visible;
    background: #ffffff;
    transition: border-color .2s, box-shadow .2s;
}

/* Cuando cualquier elemento del editor tiene foco, se activa el anillo verde */
[b-l0fic3zjrc] .cnp-quill-wrapper:focus-within {
    border-color: rgba(46,125,50,.40);
    box-shadow: 0 0 0 3px rgba(46,125,50,.14);
}

/* Barra de herramientas con fondo cálido, sin borde propio (lo maneja el wrapper) */
[b-l0fic3zjrc] .cnp-quill-wrapper .ql-toolbar {
    border: none;
    border-bottom: 1px solid #E0DBD1;
    background: #F5F3EF;
    border-radius: .75rem .75rem 0 0;
    padding: .375rem .75rem;
}

/* Botones e íconos de la toolbar en gris neutro; al pasar el cursor se resaltan */
[b-l0fic3zjrc] .cnp-quill-wrapper .ql-toolbar button,
[b-l0fic3zjrc] .cnp-quill-wrapper .ql-picker-label {
    color: rgba(55,71,79,.60);
    border-radius: 6px;
    transition: background .15s, color .15s;
}

[b-l0fic3zjrc] .cnp-quill-wrapper .ql-toolbar button:hover,
[b-l0fic3zjrc] .cnp-quill-wrapper .ql-picker-label:hover {
    background: rgba(55,71,79,.10);
    color: #37474F;
}

/* Contenedor del texto: sin borde propio, altura mínima generosa
   para que el editor no colapso al estar vacío */
[b-l0fic3zjrc] .cnp-quill-wrapper .ql-container {
    border: none;
    font-family: inherit;
    font-size: .95rem;
    min-height: 400px;
    border-radius: 0 0 .75rem .75rem;
    overflow: hidden;
}

/* Área de texto editable con interlineado amplio para buena legibilidad */
[b-l0fic3zjrc] .cnp-quill-wrapper .ql-editor {
    min-height: 400px;
    max-height: none;
    line-height: 1.7;
    color: #37474F;
    padding: 1rem;
}

/* Placeholder personalizado que reemplaza el de Quill.
   font-style: normal evita la cursiva por defecto de Quill. */
[b-l0fic3zjrc] .cnp-quill-wrapper .ql-editor.ql-blank::before {
    color: rgba(55,71,79,.30);
    font-style: normal;
    content: 'Escribí el contenido completo de la noticia...';
}


/* ════════════════════════════════════════════════════════════════
   6. SECCIÓN DE IMÁGENES
   ════════════════════════════════════════════════════════════════ */

/* ── Fila de entrada de URL ── */

/* Input URL + botón Agregar en la misma fila, con gap */
.cnp-img-input-row[b-l0fic3zjrc] {
    display: flex;
    gap: .75rem;
    align-items: center;
}

/* El input ocupa todo el espacio sobrante de la fila */
.cnp-img-url-input[b-l0fic3zjrc] {
    flex: 1;
}

/* Botón de agregar imagen en azul grisáceo (BlueGrey 400 de la referencia React) */
.cnp-btn-add[b-l0fic3zjrc] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    background: #78909C;
    color: #ffffff;
    font-weight: 600;
    font-size: .9rem;
    padding: .75rem 1.25rem;
    border-radius: .75rem;
    border: none;
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
}

.cnp-btn-add:hover[b-l0fic3zjrc] {
    background: #607D8B;
}

/* Texto de ayuda debajo del input, en gris suave */
.cnp-img-hint[b-l0fic3zjrc] {
    display: block;
    margin-top: .25rem;
    color: rgba(55,71,79,.50);
    font-size: .8rem;
    line-height: 1.4;
}

/* ── Encabezado de la lista de imágenes ── */

.cnp-img-list-header[b-l0fic3zjrc] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 600;
    color: #37474F;
    margin-top: .5rem;
}

.cnp-img-list-header i[b-l0fic3zjrc] {
    color: rgba(55,71,79,.40);
}

/* ── Lista de imágenes ── */

/* Contenedor vertical con separación entre filas */
.cnp-img-list[b-l0fic3zjrc] {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

/* Cada fila de imagen: thumbnail | info URL | botón eliminar.
   Hereda la misma animación de entrada que la card principal. */
.cnp-img-row[b-l0fic3zjrc] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #ffffff;
    border: 1px solid #E8E4DD;
    border-radius: .75rem;
    padding: .75rem;
    animation: cnpFadeIn-b-l0fic3zjrc .25s ease both;
}

@media (min-width: 640px) {
    .cnp-img-row[b-l0fic3zjrc] { padding: 1rem; }
}

/* ── Thumbnail de imagen ── */

/* Cuadrado de tamaño fijo con recorte por overflow para el object-fit.
   position:relative permite superponer el badge "PORTADA". */
.cnp-img-thumb[b-l0fic3zjrc] {
    position: relative;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: .5rem;
    overflow: hidden;
    background: #F0EDE6;
    border: 1px solid #E0DBD1;
}

@media (min-width: 640px) {
    .cnp-img-thumb[b-l0fic3zjrc] { width: 96px; height: 96px; }
}

/* La imagen rellena el cuadrado sin deformarse */
.cnp-img-preview[b-l0fic3zjrc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Placeholder de error: oculto por defecto; el atributo onerror del <img>
   lo activa con display:flex cuando la URL falla al cargar. */
.cnp-img-error[b-l0fic3zjrc] {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: rgba(55,71,79,.20);
    font-size: 1.5rem;
}

/* ── Badge de portada ──
   Solo la primera imagen lleva esta etiqueta dorada superpuesta.
   El z-index implícito (por estar al final del DOM del thumb) la coloca encima. */
.cnp-cover-badge[b-l0fic3zjrc] {
    position: absolute;
    top: .375rem;
    left: .375rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .375rem;
    background: #FFF8E1;
    color: #F9A825;
    border: 1px solid #FFE082;
    border-radius: .25rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.3;
}

.cnp-star-icon[b-l0fic3zjrc] {
    font-size: 9px;
}

/* ── Información de URL ── */

/* Bloque que muestra la URL; min-width:0 permite que text-overflow
   funcione correctamente dentro de flex. */
.cnp-img-info[b-l0fic3zjrc] {
    flex: 1;
    min-width: 0;
}

.cnp-img-url-label[b-l0fic3zjrc] {
    margin: 0 0 .125rem;
    font-size: .875rem;
    font-weight: 600;
    color: #37474F;
}

/* URL truncada con ellipsis para URLs largas de Drive */
.cnp-img-url-text[b-l0fic3zjrc] {
    margin: 0;
    font-size: .875rem;
    color: rgba(55,71,79,.50);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Botón Eliminar ── */

/* Rojo de acción, tamaño compacto.
   En móvil solo muestra el ícono; en escritorio también el texto "Eliminar". */
.cnp-btn-delete[b-l0fic3zjrc] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    background: #D32F2F;
    color: #ffffff;
    font-weight: 600;
    font-size: .875rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    border: none;
    cursor: pointer;
    transition: background .2s;
}

.cnp-btn-delete:hover[b-l0fic3zjrc] {
    background: #B71C1C;
}

/* El texto "Eliminar" se oculta en móvil y aparece en pantallas medianas */
.cnp-btn-delete-text[b-l0fic3zjrc] {
    display: none;
}

@media (min-width: 640px) {
    .cnp-btn-delete-text[b-l0fic3zjrc] { display: inline; }
}

/* ── Estado vacío ──
   Se muestra cuando la lista de imágenes está vacía.
   Borde punteado coherente con el diseño de referencia React. */
.cnp-img-empty[b-l0fic3zjrc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px dashed #E0DBD1;
    border-radius: .75rem;
    padding: 2.5rem 1rem;
    margin-top: .5rem;
}

.cnp-img-empty-icon[b-l0fic3zjrc] {
    font-size: 2.5rem;
    color: rgba(55,71,79,.15);
    margin-bottom: .75rem;
}

.cnp-img-empty-text[b-l0fic3zjrc] {
    margin: 0 0 .25rem;
    font-size: .875rem;
    font-weight: 500;
    color: rgba(55,71,79,.35);
}

.cnp-img-empty-hint[b-l0fic3zjrc] {
    margin: 0;
    font-size: .75rem;
    color: rgba(55,71,79,.25);
}


/* ════════════════════════════════════════════════════════════════
   7. FOOTER DE ACCIONES
   ════════════════════════════════════════════════════════════════ */

/* En móvil los botones se apilan verticalmente con el submit arriba
   (column-reverse). En escritorio se alinean a la derecha en fila. */
.cnp-form-footer[b-l0fic3zjrc] {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: .75rem;
    padding-top: 1.5rem;
    border-top: 1px solid #F0EDE6;
}

@media (min-width: 640px) {
    .cnp-form-footer[b-l0fic3zjrc] {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }
}

/* ── Botón Volver ──
   Es un <a>, por lo que se necesita !important para anular la regla global
   "a { color: var(--color-primary) }" definida en app.css que tiñe todos los
   enlaces del sitio de verde scout. */
.cnp-btn-back[b-l0fic3zjrc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1.5rem;
    border-radius: .75rem;
    border: 1px solid #E0DBD1;
    color: rgba(55,71,79,.60) !important;
    font-weight: 600;
    font-size: .95rem;
    background: transparent;
    text-decoration: none !important;
    transition: background .2s, color .2s;
    cursor: pointer;
    white-space: nowrap;
}

.cnp-btn-back:hover[b-l0fic3zjrc] {
    background: #F0EDE6;
    color: #37474F !important;
    text-decoration: none !important;
}

/* ── Botón Crear / Guardar ──
   Verde primario scout con sombra y efecto de elevación al pasar el cursor,
   consistente con el botón principal del sistema de diseño. */
.cnp-btn-submit[b-l0fic3zjrc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 2rem;
    border-radius: .75rem;
    border: none;
    background: #2E7D32;
    color: #ffffff;
    font-weight: 700;
    font-size: .95rem;
    box-shadow: 0 4px 12px rgba(27,94,32,.20);
    cursor: pointer;
    transition: background .2s, transform .15s, box-shadow .15s;
    white-space: nowrap;
}

.cnp-btn-submit:hover[b-l0fic3zjrc] {
    background: #1B5E20;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(27,94,32,.25);
}

.cnp-btn-submit:active[b-l0fic3zjrc] {
    transform: translateY(0);
}


/* ════════════════════════════════════════════════════════════════
   8. MENSAJES DE VALIDACIÓN
   ════════════════════════════════════════════════════════════════ */

/* ::deep porque <ValidationMessage> es un componente Blazor; su <span>
   renderizado no porta el atributo de scoping [b-xxxx]. */
[b-l0fic3zjrc] .validation-message {
    font-size: .8rem;
    color: #D32F2F;
    margin-top: .125rem;
}


/* ════════════════════════════════════════════════════════════════
   9. RESPONSIVE MOBILE (≤480px)
   ════════════════════════════════════════════════════════════════ */

/* En pantallas muy chicas, el input de URL y el botón Agregar
   se apilan en columna para evitar que el botón quede demasiado pequeño. */
@media (max-width: 480px) {
    .cnp-img-input-row[b-l0fic3zjrc] {
        flex-direction: column;
        align-items: stretch;
    }

    .cnp-btn-add[b-l0fic3zjrc] {
        justify-content: center;
    }
}
/* /Pages/Configuracion/Noticias/Borradores.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   Borradores.razor.css — Estilos de la página de gestión de borradores
   ════════════════════════════════════════════════════════════════
   Prefijo: ndp- (News Drafts Page) para evitar colisiones con
   Bootstrap o clases globales del sistema.

   Paleta extraída del componente React de referencia (NewsDraftsPage.tsx):
     Fondo de página    #F5F5F5
     Superficie card    #FFFFFF
     Texto título       #263238
     Texto cuerpo       #37474F
     Texto secundario   #78909C
     Borde              #E0E0E0
     Borde suave        #F0F0F0
     Verde scout        #2E7D32 / #1B5E20
     Badge borrador     #E3F2FD (bg) / #1565C0 (texto)
     Rojo eliminar      #D32F2F / #FFEBEE (hover bg)
     Amarillo editar    #F9A825 / #FFF8E1 (hover bg)
     Gris preview       #546E7A / #ECEFF1 (hover bg)
     Verde publicar     #2E7D32 / #E8F5E9 (hover bg)

   Estructura del archivo:
     1. Página y wrapper externo
     2. Botón Volver
     3. Encabezado + botón Crear Nueva
     4. Barra de búsqueda + píldora de conteo
     5. Tabla de escritorio
     6. Badges de estado
     7. Botones de acción (iconos)
     8. Tarjetas de móvil
     9. Estado vacío (Empty State)
    10. Leyenda de acciones
    11. Spinner de carga
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   1. PÁGINA Y WRAPPER
   ════════════════════════════════════════════════════════════════ */

/* Fondo gris neutro idéntico al de la referencia React (#F5F5F5).
   La animación suaviza la aparición al navegar hacia esta ruta. */
.ndp-page[b-i7l4gklt0j] {
    min-height: 100vh;
    background-color: #F5F5F5;
    animation: ndpFadeIn-b-i7l4gklt0j .4s ease both;
}

/* Max-width 1100px centrado, con padding lateral y espaciado inferior.
   Coincide con "max-w-[1100px]" del Tailwind de la referencia. */
.ndp-outer[b-i7l4gklt0j] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

@media (min-width: 640px) {
    .ndp-outer[b-i7l4gklt0j] { padding: 1.5rem 1.5rem 4rem; }
}

/* Animación de entrada: sube 14px con fade */
@keyframes ndpFadeIn-b-i7l4gklt0j {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0);    }
}


/* ════════════════════════════════════════════════════════════════
   2. BOTÓN VOLVER
   ════════════════════════════════════════════════════════════════ */

/* Enlace discreto en gris secundario con hover leve en blanco.
   Apariencia de botón–link: sin subrayado, con ícono fa-arrow-left. */
.ndp-btn-back[b-i7l4gklt0j] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    color: #78909C !important;
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: background .15s, color .15s;
    margin-bottom: 1rem;
}

.ndp-btn-back:hover[b-i7l4gklt0j] {
    background-color: #ffffff;
    color: #37474F !important;
}


/* ════════════════════════════════════════════════════════════════
   3. ENCABEZADO DE PÁGINA + BOTÓN CREAR
   ════════════════════════════════════════════════════════════════ */

/* Fila que distribuye título (izquierda) y botón Crear (derecha).
   En móvil se apila en columna para que el botón no se comprima. */
.ndp-page-header[b-i7l4gklt0j] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    .ndp-page-header[b-i7l4gklt0j] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
    }
}

/* Bloque izquierdo: título + subtítulo */
.ndp-page-title-block[b-i7l4gklt0j] { flex: 1; min-width: 0; }

/* Título en serif Bitter, clamp para fluidez entre 1.6rem y 2rem */
.ndp-page-title[b-i7l4gklt0j] {
    font-family: 'Bitter', Georgia, serif;
    font-size: clamp(1.6rem, 3.5vw, 2rem);
    font-weight: 700;
    color: #263238;
    margin: 0 0 .25rem;
    line-height: 1.2;
}

.ndp-page-subtitle[b-i7l4gklt0j] {
    color: #78909C;
    font-size: .9rem;
    margin: 0;
}

/* Botón "Crear Nueva Noticia" — verde scout, usado también en el empty state */
.ndp-btn-create[b-i7l4gklt0j] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1.25rem;
    border-radius: .5rem;
    background-color: #2E7D32;
    color: #ffffff !important;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: background .15s;
    white-space: nowrap;
    align-self: flex-start;
}

@media (min-width: 640px) {
    .ndp-btn-create[b-i7l4gklt0j] { align-self: auto; }
}

.ndp-btn-create:hover[b-i7l4gklt0j] {
    background-color: #1B5E20;
    color: #ffffff !important;
}


/* ════════════════════════════════════════════════════════════════
   4. BARRA DE BÚSQUEDA + PÍLDORA DE CONTEO
   ════════════════════════════════════════════════════════════════ */

/* Fila que pone la píldora a la izquierda y el buscador a la derecha.
   En móvil se apilan en columna */
.ndp-toolbar[b-i7l4gklt0j] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
    .ndp-toolbar[b-i7l4gklt0j] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* Píldora: fondo blanco, borde, ícono azul + número en negrita + etiqueta */
.ndp-count-pill[b-i7l4gklt0j] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem 1rem;
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: .5rem;
    font-size: .85rem;
}

/* Ícono dentro de la píldora: color del badge de borrador */
.ndp-count-icon[b-i7l4gklt0j] {
    color: #1565C0;
    font-size: .85rem;
}

.ndp-count-num[b-i7l4gklt0j] {
    color: #263238;
    font-weight: 700;
}

.ndp-count-label[b-i7l4gklt0j] {
    color: #78909C;
}

/* ── Input de búsqueda ── */

/* Wrapper: flex para alinear input + botón en una fila */
.ndp-search-wrapper[b-i7l4gklt0j] {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
}

@media (min-width: 640px) {
    .ndp-search-wrapper[b-i7l4gklt0j] { width: 21rem; }
}

/* Lupa posicionada en el centro vertical izquierdo */
.ndp-search-icon[b-i7l4gklt0j] {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #78909C;
    font-size: .875rem;
    pointer-events: none;
}

/* Input con padding izquierdo extra para no tapar el ícono */
.ndp-search-input[b-i7l4gklt0j] {
    flex: 1;
    min-width: 0;
    padding: .625rem 1rem .625rem 2.25rem;
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: .5rem;
    font-size: .85rem;
    color: #37474F;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
}

.ndp-search-input[b-i7l4gklt0j]::placeholder { color: rgba(55,71,79,.35); }

.ndp-search-input:focus[b-i7l4gklt0j] {
    border-color: rgba(46,125,50,.40);
    box-shadow: 0 0 0 3px rgba(46,125,50,.14);
}

/* Botón Buscar: mismo alto que el input, verde institucional */
.ndp-search-btn[b-i7l4gklt0j] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: 0 .875rem;
    height: 36px;
    background: var(--primary, #2E7D32);
    color: #fff;
    border: none;
    border-radius: .5rem;
    font-size: .84rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}

.ndp-search-btn:hover[b-i7l4gklt0j]  { background: #1B5E20; }
.ndp-search-btn:active[b-i7l4gklt0j] { transform: scale(.97); }


/* ════════════════════════════════════════════════════════════════
   5. TABLA DE ESCRITORIO
   ════════════════════════════════════════════════════════════════ */

/* Card blanca que envuelve la tabla (oculta en móvil mediante Bootstrap d-none d-sm-block) */
.ndp-table-card[b-i7l4gklt0j] {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
    margin-bottom: 1.25rem;
}

/* La tabla ocupa todo el ancho de la card; sin bordes propios (los maneja la card) */
.ndp-table[b-i7l4gklt0j] {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

/* Fila de encabezado: fondo #FAFAFA, borde inferior, sin colores de Bootstrap */
.ndp-thead-row[b-i7l4gklt0j] {
    background-color: #FAFAFA;
    border-bottom: 1px solid #E0E0E0;
}

/* Encabezados de columna: mayúsculas diminutas en gris secondario */
.ndp-th[b-i7l4gklt0j] {
    padding: .875rem 1.25rem;
    text-align: left;
    color: #78909C;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    border: none;
}

/* Ancho fijo para columnas acotadas */
.ndp-th-date[b-i7l4gklt0j]    { width: 140px; }
.ndp-th-author[b-i7l4gklt0j]  { width: 160px; }
.ndp-th-state[b-i7l4gklt0j]   { width: 110px; }
.ndp-th-actions[b-i7l4gklt0j] { width: 190px; text-align: right; }

/* Filas del cuerpo: separación por borde inferior suave */
.ndp-tr[b-i7l4gklt0j] {
    border-bottom: 1px solid #F0F0F0;
    transition: background-color .1s;
}

.ndp-tr:last-child[b-i7l4gklt0j] { border-bottom: none; }

/* Hover con fondo muy suave #FAFAFA idéntico al React onMouseEnter */
.ndp-tr:hover[b-i7l4gklt0j] { background-color: #FAFAFA; }

/* Celdas del cuerpo con mismo padding que los th */
.ndp-td[b-i7l4gklt0j] {
    padding: 1rem 1.25rem;
    border: none;
    vertical-align: middle;
}

/* Celda de acciones alineada a la derecha */
.ndp-td-actions[b-i7l4gklt0j] { text-align: right; }

/* Texto de título de noticia: negrita, color oscuro, legible a .9rem */
.ndp-title-cell[b-i7l4gklt0j] {
    color: #263238;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.4;
}

/* Fecha y autor: gris secundario, tamaño menor */
.ndp-muted-cell[b-i7l4gklt0j] {
    color: #78909C;
    font-size: .85rem;
}


/* ════════════════════════════════════════════════════════════════
   6. BADGE DE ESTADO "BORRADOR"
   ════════════════════════════════════════════════════════════════ */

/* Badge azul redondeado (pill).
   Colores extraídos de draftBadgeBg / draftBadgeColor del React. */
.ndp-badge-draft[b-i7l4gklt0j] {
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: 9999px;
    background-color: #E3F2FD;
    color: #1565C0;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* Variante más pequeña para las tarjetas mobile */
.ndp-badge-sm[b-i7l4gklt0j] {
    padding: .1rem .5rem;
    font-size: .7rem;
    flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════════
   7. BOTONES DE ACCIÓN (ÍCONOS)
   ════════════════════════════════════════════════════════════════ */

/* Grupo de botones alineados al extremo derecho */
.ndp-actions[b-i7l4gklt0j] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
}

/* Base de cada botón de acción: cuadrado 36×36, redondeado, fondo transparente.
   El color varía por modificador. El hover añade el fondo de color suave. */
.ndp-action-btn[b-i7l4gklt0j] {
    width: 2.25rem;   /* 36px */
    height: 2.25rem;
    border-radius: .5rem;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0625rem;  /* 17px = Icon size={17} de React */
    cursor: pointer;
    transition: background .15s, color .15s;
    text-decoration: none !important;
    line-height: 1;
    padding: 0;
}

/* Previsualizar: gris BlueGrey #546E7A / hover #ECEFF1 */
.ndp-action-preview[b-i7l4gklt0j] { color: #546E7A; }
.ndp-action-preview:hover[b-i7l4gklt0j] {
    background-color: #ECEFF1;
    color: #546E7A !important;
}

/* Editar: amarillo #F9A825 / hover #FFF8E1 */
.ndp-action-edit[b-i7l4gklt0j] { color: #F9A825; }
.ndp-action-edit:hover[b-i7l4gklt0j] {
    background-color: #FFF8E1;
    color: #F9A825 !important;
}

/* Eliminar: rojo #D32F2F / hover #FFEBEE */
.ndp-action-delete[b-i7l4gklt0j] { color: #D32F2F; }
.ndp-action-delete:hover[b-i7l4gklt0j] { background-color: #FFEBEE; }

/* Publicar: verde scout #2E7D32 / hover #E8F5E9 */
.ndp-action-publish[b-i7l4gklt0j] { color: #2E7D32; }
.ndp-action-publish:hover[b-i7l4gklt0j] { background-color: #E8F5E9; }


/* ════════════════════════════════════════════════════════════════
   8. TARJETAS MÓVILES
   ════════════════════════════════════════════════════════════════ */

/* Contenedor de la lista de tarjetas (oculto en sm+ por Bootstrap d-sm-none) */
.ndp-mobile-list[b-i7l4gklt0j] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

/* Cada tarjeta: superficie blanca con borde y bordes redondeados */
.ndp-mobile-card[b-i7l4gklt0j] {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: .75rem;
    padding: 1rem;
}

/* Fila superior: título + badge en extremos opuestos */
.ndp-mobile-header[b-i7l4gklt0j] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}

/* Metadatos en una fila con separador bullet */
.ndp-mobile-meta[b-i7l4gklt0j] {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #78909C;
    font-size: .8rem;
    margin-bottom: .75rem;
    flex-wrap: wrap;
}

/* El punto separador se renderiza semitransparente */
.ndp-meta-dot[b-i7l4gklt0j] { opacity: .4; }

/* Fila de acciones en la tarjeta: borde superior separador */
.ndp-mobile-actions[b-i7l4gklt0j] {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding-top: .75rem;
    border-top: 1px solid #F0F0F0;
}


/* ════════════════════════════════════════════════════════════════
   9. ESTADO VACÍO (EMPTY STATE)
   ════════════════════════════════════════════════════════════════ */

/* Surface blanca centrada con relleno generoso, replicando el EmptyState
   del React. Se muestra cuando lista está vacía o la búsqueda no da resultados. */
.ndp-empty[b-i7l4gklt0j] {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: 1rem;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
    padding: 5rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.25rem;
}

/* Cuadrado redondeado con fondo gris claro que contiene el ícono */
.ndp-empty-icon-box[b-i7l4gklt0j] {
    width: 5rem;
    height: 5rem;
    border-radius: .875rem;
    background-color: #ECEFF1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

/* Ícono grande gris muy suave (#E0E0E0 del border del diseño React) */
.ndp-empty-icon[b-i7l4gklt0j] {
    font-size: 2.25rem;
    color: #E0E0E0;
}

.ndp-empty-title[b-i7l4gklt0j] {
    color: #263238;
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 .5rem;
}

.ndp-empty-text[b-i7l4gklt0j] {
    color: #78909C;
    font-size: .88rem;
    line-height: 1.5;
    max-width: 28rem;
    margin: 0 0 1.5rem;
}


/* ════════════════════════════════════════════════════════════════
   10. LEYENDA DE ACCIONES
   ════════════════════════════════════════════════════════════════ */

/* Card blanca discreta que explica qué hace cada ícono.
   Solo visible cuando la lista tiene al menos un ítem. */
.ndp-legend[b-i7l4gklt0j] {
    background: #ffffff;
    border: 1px solid #F0F0F0;
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    margin-top: 2rem;
}

/* Etiqueta "LEYENDA DE ACCIONES" en gris minúsculo uppercase */
.ndp-legend-title[b-i7l4gklt0j] {
    color: #78909C;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 .75rem;
}

/* Ítems de leyenda en fila que puede envolver en múltiples líneas */
.ndp-legend-items[b-i7l4gklt0j] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
}

/* Cada ítem: ícono coloreado + etiqueta de texto */
.ndp-legend-item[b-i7l4gklt0j] {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #37474F;
    font-size: .82rem;
}

/* Colores de los íconos de leyenda, idénticos a los botones de acción */
.ndp-legend-preview[b-i7l4gklt0j] { color: #546E7A; font-size: .9375rem; }
.ndp-legend-edit[b-i7l4gklt0j]    { color: #F9A825; font-size: .9375rem; }
.ndp-legend-delete[b-i7l4gklt0j]  { color: #D32F2F; font-size: .9375rem; }
.ndp-legend-publish[b-i7l4gklt0j] { color: #2E7D32; font-size: .9375rem; }


/* ════════════════════════════════════════════════════════════════
   12. PAGINACIÓN
   ════════════════════════════════════════════════════════════════ */

.ndp-pagination[b-i7l4gklt0j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .75rem 0 .25rem;
}

.ndp-pg-numbers[b-i7l4gklt0j] {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: wrap;
}

.ndp-pg-btn[b-i7l4gklt0j] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border-radius: .375rem;
    border: 1px solid #E0E0E0;
    background: #ffffff;
    color: #37474F;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.ndp-pg-btn:hover:not(:disabled)[b-i7l4gklt0j] {
    background: #F5F5F5;
    border-color: #BDBDBD;
}
.ndp-pg-btn.ndp-pg-disabled[b-i7l4gklt0j],
.ndp-pg-btn:disabled[b-i7l4gklt0j] {
    opacity: .4;
    cursor: not-allowed;
}
@media (max-width: 360px) {
    .ndp-pg-btn-text[b-i7l4gklt0j] { display: none; }
}

.ndp-pg-num[b-i7l4gklt0j] {
    min-width: 2rem;
    height: 2rem;
    border-radius: .375rem;
    border: 1px solid #E0E0E0;
    background: #ffffff;
    color: #37474F;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    padding: 0 .4rem;
}
.ndp-pg-num:hover[b-i7l4gklt0j] {
    background: #F5F5F5;
    border-color: #BDBDBD;
}
.ndp-pg-num.ndp-pg-num-active[b-i7l4gklt0j] {
    background: #2E7D32;
    color: #ffffff;
    border-color: #2E7D32;
    font-weight: 700;
    pointer-events: none;
}

.ndp-pg-ellipsis[b-i7l4gklt0j] {
    color: #90A4AE;
    font-size: .9rem;
    padding: 0 .2rem;
    user-select: none;
}

.ndp-pg-info[b-i7l4gklt0j] {
    text-align: center;
    color: #90A4AE;
    font-size: .78rem;
    margin: .25rem 0 .75rem;
}


/* ════════════════════════════════════════════════════════════════
   11. SPINNER DE CARGA
   ════════════════════════════════════════════════════════════════ */

/* Centro el spinner verticalmente cuando la API aún no respondió */
.ndp-loading[b-i7l4gklt0j] {
    display: flex;
    justify-content: center;
    padding: 5rem 0;
}

/* Color del spinner: verde scout */
.ndp-spinner[b-i7l4gklt0j] {
    color: #2E7D32;
    width: 2.5rem;
    height: 2.5rem;
}
/* /Pages/Configuracion/Noticias/Panel.razor.rz.scp.css */
/*
 * Panel.razor.css — Panel de administración de noticias
 * Prefijo: nmp- (News Management Page)
 *
 * Paleta:
 *   Fondo de página   #F5F5F5
 *   Superficie card   #FFFFFF
 *   Título            #263238
 *   Cuerpo            #37474F
 *   Secundario        #78909C
 *   Borde             #E0E0E0
 *   Borde suave       #F0F0F0
 *   Tabs              #ECEFF1
 *   Verde scout       #2E7D32 / #1B5E20
 *   Ámbar             #F57F17 / #FFF8E1
 *   Rojo              #D32F2F / #FFEBEE
 *   Azul borrador     #1565C0 / #E3F2FD
 */


/* PÁGINA */

.nmp-page[b-nl62c7p2pq] {
    min-height: 100vh;
    background-color: #F5F5F5;
    animation: nmpFadeIn-b-nl62c7p2pq .4s ease both;
}

/* Ancho máximo centrado con padding lateral y espaciado inferior */
.nmp-outer[b-nl62c7p2pq] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

@media (min-width: 640px) {
    .nmp-outer[b-nl62c7p2pq] { padding: 1.5rem 1.5rem 4rem; }
}

/* Entrada suave de la página completa */
@keyframes nmpFadeIn-b-nl62c7p2pq {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0);    }
}


/* BOTÓN VOLVER */

/* Override sobre la regla global de enlaces para mantener el color discreto */
.nmp-btn-back[b-nl62c7p2pq] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    color: #78909C !important;
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: background .15s, color .15s;
    margin-bottom: 1rem;
}

.nmp-btn-back:hover[b-nl62c7p2pq] {
    background-color: #ffffff;
    color: #37474F !important;
}


/* ENCABEZADO + BOTÓN CREAR */

/* Fila título / botón: apilada en móvil, horizontal en pantallas medianas */
.nmp-page-header[b-nl62c7p2pq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    .nmp-page-header[b-nl62c7p2pq] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
    }
}

.nmp-page-title-block[b-nl62c7p2pq] { flex: 1; min-width: 0; }

/* Título en Bitter serif con tamaño fluido entre 1.6rem y 2rem */
.nmp-page-title[b-nl62c7p2pq] {
    font-family: 'Bitter', Georgia, serif;
    font-size: clamp(1.6rem, 3.5vw, 2rem);
    font-weight: 700;
    color: #263238;
    margin: 0 0 .25rem;
    line-height: 1.2;
}

.nmp-page-subtitle[b-nl62c7p2pq] {
    color: #78909C;
    font-size: .9rem;
    margin: 0;
}

/* Botón verde institucional para crear una nueva noticia */
.nmp-btn-create[b-nl62c7p2pq] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1.25rem;
    border-radius: .5rem;
    background-color: #2E7D32;
    color: #ffffff !important;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .15s;
    align-self: flex-start;
}

@media (min-width: 640px) {
    .nmp-btn-create[b-nl62c7p2pq] { align-self: auto; }
}

.nmp-btn-create:hover[b-nl62c7p2pq] {
    background-color: #1B5E20;
    color: #ffffff !important;
}


/* TOOLBAR: TABS + BUSCADOR */

/* Fila que contiene los tabs a la izquierda y el buscador a la derecha */
.nmp-toolbar[b-nl62c7p2pq] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
    .nmp-toolbar[b-nl62c7p2pq] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* Contenedor de pestañas sobre fondo gris claro */
.nmp-tabs-bar[b-nl62c7p2pq] {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    padding: .25rem;
    background-color: #ECEFF1;
    border-radius: .75rem;
}

/* Base de cada pestaña: fondo transparente y texto gris secundario */
.nmp-tab[b-nl62c7p2pq] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem 1rem;
    border-radius: .5rem;
    border: none;
    background: transparent;
    color: #78909C;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s, color .2s, box-shadow .2s;
    white-space: nowrap;
}

/* Pestaña activa: fondo blanco, texto principal, sombra leve */
.nmp-tab-active[b-nl62c7p2pq] {
    background-color: #ffffff;
    color: #263238;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* Píldora que muestra la cantidad de ítems del tab activo */
.nmp-tab-pill[b-nl62c7p2pq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 9999px;
    font-size: .7rem;
    font-weight: 700;
}

/* Píldora de tab inactivo: invisible pero mantiene el espacio */
.nmp-tab-pill-inactive[b-nl62c7p2pq] {
    background: rgba(120,144,156,.15);
    color: transparent;
    min-width: 22px;
}

/* Color de la píldora activa según el estado del tab */
.nmp-tab-pill-borrador[b-nl62c7p2pq]   { background: #E3F2FD; color: #1565C0; }
.nmp-tab-pill-pendiente[b-nl62c7p2pq]  { background: #FFF8E1; color: #F57F17; }
.nmp-tab-pill-autorizada[b-nl62c7p2pq] { background: #E8F5E9; color: #2E7D32; }
.nmp-tab-pill-eliminada[b-nl62c7p2pq]  { background: #FFEBEE; color: #D32F2F; }


/* BUSCADOR */

/* Wrapper: flex para alinear input + botón en una fila */
.nmp-search-wrapper[b-nl62c7p2pq] {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
}

@media (min-width: 640px) {
    .nmp-search-wrapper[b-nl62c7p2pq] { width: 21rem; }
}

/* Ícono de lupa superpuesto, sin interceptar eventos del mouse */
.nmp-search-icon[b-nl62c7p2pq] {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #78909C;
    font-size: .875rem;
    pointer-events: none;
}

/* Input con indentación izquierda para no tapar la lupa */
.nmp-search-input[b-nl62c7p2pq] {
    flex: 1;
    min-width: 0;
    padding: .625rem 1rem .625rem 2.25rem;
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: .5rem;
    font-size: .85rem;
    color: #37474F;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
}

.nmp-search-input[b-nl62c7p2pq]::placeholder { color: rgba(55,71,79,.35); }

/* Foco con anillo verde institucional */
.nmp-search-input:focus[b-nl62c7p2pq] {
    border-color: rgba(46,125,50,.40);
    box-shadow: 0 0 0 3px rgba(46,125,50,.14);
}

/* Botón Buscar: mismo alto que el input, verde institucional */
.nmp-search-btn[b-nl62c7p2pq] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: 0 .875rem;
    height: 36px;
    background: var(--primary, #2E7D32);
    color: #fff;
    border: none;
    border-radius: .5rem;
    font-size: .84rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}

.nmp-search-btn:hover[b-nl62c7p2pq]  { background: #1B5E20; }
.nmp-search-btn:active[b-nl62c7p2pq] { transform: scale(.97); }


/* TABLA DE ESCRITORIO */

/* Card blanca que envuelve la tabla, oculta en pantallas pequeñas */
.nmp-table-card[b-nl62c7p2pq] {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
    margin-bottom: 1.25rem;
}

.nmp-table[b-nl62c7p2pq] {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

/* Encabezado con fondo #FAFAFA y borde inferior separador */
.nmp-thead-row[b-nl62c7p2pq] {
    background-color: #FAFAFA;
    border-bottom: 1px solid #E0E0E0;
}

/* Celdas de encabezado en uppercase diminuto y gris secundario */
.nmp-th[b-nl62c7p2pq] {
    padding: .875rem 1.25rem;
    text-align: left;
    color: #78909C;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    border: none;
}

.nmp-th-date[b-nl62c7p2pq]    { width: 120px; }
.nmp-th-author[b-nl62c7p2pq]  { width: 160px; }
.nmp-th-state[b-nl62c7p2pq]   { width: 110px; }
.nmp-th-actions[b-nl62c7p2pq] { width: 180px; text-align: right; }

/* Filas con borde inferior suave y hover #FAFAFA */
.nmp-tr[b-nl62c7p2pq] {
    border-bottom: 1px solid #F0F0F0;
    transition: background-color .1s;
}

.nmp-tr:last-child[b-nl62c7p2pq] { border-bottom: none; }
.nmp-tr:hover[b-nl62c7p2pq]      { background-color: #FAFAFA; }

/* Celdas con mismo padding que el encabezado */
.nmp-td[b-nl62c7p2pq] {
    padding: 1rem 1.25rem;
    border: none;
    vertical-align: middle;
}

/* Celda de acciones alineada a la derecha */
.nmp-td-actions[b-nl62c7p2pq] { text-align: right; }

/* Título de la noticia destacado en negrita y color de texto principal */
.nmp-title-cell[b-nl62c7p2pq] {
    color: #263238;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.4;
}

/* Metadatos secundarios: fecha y autor */
.nmp-muted-cell[b-nl62c7p2pq] {
    color: #78909C;
    font-size: .85rem;
}


/* BADGES DE ESTADO */

/* Pill redondeado para indicar visualmente el estado de cada noticia */
.nmp-badge[b-nl62c7p2pq] {
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* Versión compacta usada en las tarjetas móviles */
.nmp-badge-sm[b-nl62c7p2pq] {
    padding: .1rem .5rem;
    font-size: .7rem;
    flex-shrink: 0;
}

/* Color del badge según el estado de la noticia */
.nmp-badge-borrador[b-nl62c7p2pq]   { background-color: #E3F2FD; color: #1565C0; }
.nmp-badge-pendiente[b-nl62c7p2pq]  { background-color: #FFF8E1; color: #F57F17; }
.nmp-badge-autorizada[b-nl62c7p2pq] { background-color: #E8F5E9; color: #2E7D32; }
.nmp-badge-eliminada[b-nl62c7p2pq]  { background-color: #FFEBEE; color: #D32F2F; }


/* BOTONES DE ACCIÓN */

/* Grupo de íconos alineados a la derecha de cada fila */
.nmp-actions[b-nl62c7p2pq] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
}

/* Botón cuadrado de 36×36 con fondo transparente y transición de color */
.nmp-action-btn[b-nl62c7p2pq] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .5rem;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0625rem;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-decoration: none !important;
    line-height: 1;
    padding: 0;
}

/* Previsualizar en gris azulado */
.nmp-action-preview[b-nl62c7p2pq] { color: #546E7A; }
.nmp-action-preview:hover[b-nl62c7p2pq] {
    background-color: #ECEFF1;
    color: #546E7A !important;
}

/* Editar en ámbar */
.nmp-action-edit[b-nl62c7p2pq] { color: #F9A825; }
.nmp-action-edit:hover[b-nl62c7p2pq] {
    background-color: #FFF8E1;
    color: #F9A825 !important;
}

/* Eliminar en rojo */
.nmp-action-delete[b-nl62c7p2pq] { color: #D32F2F; }
.nmp-action-delete:hover[b-nl62c7p2pq] { background-color: #FFEBEE; }

/* Autorizar en verde institucional, solo visible en noticias pendientes */
.nmp-action-authorize[b-nl62c7p2pq] { color: #2E7D32; }
.nmp-action-authorize:hover[b-nl62c7p2pq] { background-color: #E8F5E9; }


/* TARJETAS MÓVILES */

/* Lista de tarjetas apiladas, visible solo en pantallas pequeñas */
.nmp-mobile-list[b-nl62c7p2pq] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

/* Superficie blanca con borde para cada noticia */
.nmp-mobile-card[b-nl62c7p2pq] {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: .75rem;
    padding: 1rem;
}

/* Fila superior: título a la izquierda, badge a la derecha */
.nmp-mobile-header[b-nl62c7p2pq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}

/* Metadatos en línea: fecha · autor */
.nmp-mobile-meta[b-nl62c7p2pq] {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #78909C;
    font-size: .8rem;
    margin-bottom: .75rem;
    flex-wrap: wrap;
}

.nmp-meta-dot[b-nl62c7p2pq] { opacity: .4; }

/* Acciones al pie de la tarjeta, separadas del contenido por un borde */
.nmp-mobile-actions[b-nl62c7p2pq] {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding-top: .75rem;
    border-top: 1px solid #F0F0F0;
}


/* ESTADO VACÍO */

/* Contenedor de la tabla cuando no hay resultados, en escritorio */
.nmp-empty-table[b-nl62c7p2pq] {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: 1rem;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.nmp-empty-inner[b-nl62c7p2pq] {
    padding: 4rem 1.5rem;
    text-align: center;
}

/* Equivalente para las tarjetas en pantallas pequeñas */
.nmp-mobile-empty[b-nl62c7p2pq] {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: .75rem;
    padding: 3.5rem 1.5rem;
    text-align: center;
    margin-bottom: 1.25rem;
}

/* Ícono decorativo muy suave para no competir con el mensaje */
.nmp-empty-icon[b-nl62c7p2pq] {
    font-size: 2.25rem;
    color: #E0E0E0;
    display: block;
    margin: 0 auto .75rem;
}

.nmp-empty-title[b-nl62c7p2pq] {
    color: #78909C;
    font-size: .9rem;
    font-weight: 500;
    margin: 0 0 .25rem;
}

.nmp-empty-hint[b-nl62c7p2pq] {
    color: #78909C;
    font-size: .8rem;
    margin: 0;
}


/* PAGINACIÓN */

/* Fila con botones de navegación y números de página */
.nmp-pagination[b-nl62c7p2pq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .75rem 0 .25rem;
}

/* Grupo de números de página que puede envolver en pantallas pequeñas */
.nmp-pg-numbers[b-nl62c7p2pq] {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: wrap;
}

/* Botones "Anterior" / "Siguiente" con ícono y texto */
.nmp-pg-btn[b-nl62c7p2pq] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border-radius: .375rem;
    border: 1px solid #E0E0E0;
    background: #ffffff;
    color: #37474F;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.nmp-pg-btn:hover:not(:disabled)[b-nl62c7p2pq] {
    background: #F5F5F5;
    border-color: #BDBDBD;
}
.nmp-pg-btn.nmp-pg-disabled[b-nl62c7p2pq],
.nmp-pg-btn:disabled[b-nl62c7p2pq] {
    opacity: .4;
    cursor: not-allowed;
}
/* En pantallas muy pequeñas se oculta el texto y queda solo el ícono */
@media (max-width: 360px) {
    .nmp-pg-btn-text[b-nl62c7p2pq] { display: none; }
}

/* Botón numérico individual */
.nmp-pg-num[b-nl62c7p2pq] {
    min-width: 2rem;
    height: 2rem;
    border-radius: .375rem;
    border: 1px solid #E0E0E0;
    background: #ffffff;
    color: #37474F;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    padding: 0 .4rem;
}
.nmp-pg-num:hover[b-nl62c7p2pq] {
    background: #F5F5F5;
    border-color: #BDBDBD;
}
/* Página activa resaltada con el verde institucional */
.nmp-pg-num.nmp-pg-num-active[b-nl62c7p2pq] {
    background: #2E7D32;
    color: #ffffff;
    border-color: #2E7D32;
    font-weight: 700;
    pointer-events: none;
}

/* Puntos suspensivos entre grupos de páginas no adyacentes */
.nmp-pg-ellipsis[b-nl62c7p2pq] {
    color: #90A4AE;
    font-size: .9rem;
    padding: 0 .2rem;
    user-select: none;
}

/* Etiqueta: "Página X de Y · N noticias" */
.nmp-pg-info[b-nl62c7p2pq] {
    text-align: center;
    color: #90A4AE;
    font-size: .78rem;
    margin: .25rem 0 .75rem;
}


/* LEYENDA DE ACCIONES */

/* Card discreta al pie que documenta qué hace cada botón de la tabla */
.nmp-legend[b-nl62c7p2pq] {
    background: #ffffff;
    border: 1px solid #F0F0F0;
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    margin-top: 2rem;
}

.nmp-legend-title[b-nl62c7p2pq] {
    color: #78909C;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 .75rem;
}

/* Ítems en fila que puede envolver en pantallas angostas */
.nmp-legend-items[b-nl62c7p2pq] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
}

.nmp-legend-item[b-nl62c7p2pq] {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #37474F;
    font-size: .82rem;
}

/* Colores de los íconos coinciden con los botones de acción de la tabla */
.nmp-legend-preview[b-nl62c7p2pq]   { color: #546E7A; font-size: .9375rem; }
.nmp-legend-edit[b-nl62c7p2pq]      { color: #F9A825; font-size: .9375rem; }
.nmp-legend-delete[b-nl62c7p2pq]    { color: #D32F2F; font-size: .9375rem; }
.nmp-legend-authorize[b-nl62c7p2pq] { color: #2E7D32; font-size: .9375rem; }


/* SPINNER DE CARGA */

/* Centrado verticalmente mientras la API responde */
.nmp-loading[b-nl62c7p2pq] {
    display: flex;
    justify-content: center;
    padding: 5rem 0;
}

/* Verde institucional para mantener coherencia visual */
.nmp-spinner[b-nl62c7p2pq] {
    color: #2E7D32;
    width: 2.5rem;
    height: 2.5rem;
}
/* /Pages/Configuracion/Noticias/Previsualizar.razor.rz.scp.css */
/* ==========================================================================
   Noticias/Previsualizar.razor.css — Estilos de la previsualización de borrador
   ==========================================================================
   CSS Isolation (scoped) — aplica exclusivamente a Pages/Noticias/Previsualizar.razor.
   Prefijo pvz- (Preview) en todas las clases para evitar colisiones.
   Clonado de Visualizar.razor.css (vz-) con los siguientes añadidos:
     · Banner de previsualización (pvz-preview-banner, pvz-close-btn)
     · Badge de estado Borrador (pvz-draft-badge)
     · Chip "Simulados" y aviso mock en la sección de comentarios

   Paleta (idéntica a Visualizar):
     bg         #F5F5F5   fondo de página
     card       #FFFFFF   tarjeta artículo
     title      #1B5E20   título
     body       #37474F   texto del cuerpo
     meta       #78909C   metadatos
     accent     #2E7D32   verde principal
     amber      #F57F17   banner preview (ámbar oscuro)
     amberBg    #FFF8E1   fondo banner preview
     border     #E0E0E0   bordes

   Secciones:
     A. Página
     B. Spinner
     C. Banner de previsualización
     D. Tarjeta artículo + padding
     E. Header (título, copete, meta-row, badge borrador)
     F. Carrusel: imagen, flechas, badge, dots, thumbnails
     G. Cuerpo de la noticia
     H. Comentarios simulados: encabezado, aviso, lista
     I. Lightbox
     J. Responsive móvil
   ========================================================================== */

[b-u8oeqxz1hv] main {
    overflow: visible !important;
    height: auto !important;
}


/* ── A. PÁGINA ────────────────────────────────────────────────────────────── */
.pvz-page[b-u8oeqxz1hv] {
    background-color: #F5F5F5;
    min-height: 100vh;
    padding-bottom: 4rem;
    animation: pvzFadeIn-b-u8oeqxz1hv 0.5s ease-out both;
}

@keyframes pvzFadeIn-b-u8oeqxz1hv {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ── B. SPINNER ───────────────────────────────────────────────────────────── */
.pvz-loading[b-u8oeqxz1hv] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.pvz-loading .spinner-border[b-u8oeqxz1hv] {
    width: 3rem;
    height: 3rem;
    border-width: 0.25rem;
}


/* ── C. BANNER DE PREVISUALIZACIÓN ───────────────────────────────────────── */
/*
   Barra full-width tono ámbar (#FFF8E1 / #F57F17) que informa al editor
   que está viendo una vista previa y no el artículo publicado.
   Izquierda: ícono + texto de estado | Derecha: botón "Cerrar Previsualización".
*/
.pvz-preview-banner[b-u8oeqxz1hv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background-color: #FFF8E1;
    border-bottom: 2px solid #FFE082;
    /* Entrada con slide-down para llamar la atención */
    animation: pvzBannerIn-b-u8oeqxz1hv 0.4s ease-out both;
}

@keyframes pvzBannerIn-b-u8oeqxz1hv {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Lado izquierdo: ícono + etiquetas de texto */
.pvz-pb-left[b-u8oeqxz1hv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pvz-pb-icon[b-u8oeqxz1hv] {
    color: #F57F17;
    flex-shrink: 0;
}

/* "MODO PREVISUALIZACIÓN" — mayúsculas, negrita, color ámbar oscuro */
.pvz-pb-label[b-u8oeqxz1hv] {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #E65100;
}

.pvz-pb-sep[b-u8oeqxz1hv] {
    color: #FFB300;
    font-weight: 300;
}

/* Subtítulo: "Esta noticia aún no es pública" */
.pvz-pb-sub[b-u8oeqxz1hv] {
    font-size: 0.82rem;
    color: #795548;
}

/* Botón "Cerrar Previsualización": texto oscuro sobre ámbar más saturado */
.pvz-close-btn[b-u8oeqxz1hv] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    background-color: #FFB300;
    color: #3E2723;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
    flex-shrink: 0;
}

.pvz-close-btn:hover[b-u8oeqxz1hv] {
    background-color: #FFA000;
    color: #3E2723;
    text-decoration: none;
}


/* ── D. TARJETA ARTÍCULO ─────────────────────────────────────────────────── */
.pvz-article[b-u8oeqxz1hv] {
    max-width: 900px;
    margin: 1.5rem auto 4rem;
    background-color: #FFFFFF;
    border-radius: 1rem;
    border: 1px solid #E0E0E0;
    /* Borde izquierdo ámbar marca la tarjeta como pendiente */
    border-left: 4px solid #FFB300;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
    overflow: hidden;
}

.pvz-inner[b-u8oeqxz1hv] {
    padding: 2rem 1.5rem;
}

@media (min-width: 640px) {
    .pvz-inner[b-u8oeqxz1hv] { padding: 3rem; }
}

@media (min-width: 900px) {
    .pvz-inner[b-u8oeqxz1hv] { padding: 4rem; }
}


/* ── E. HEADER ────────────────────────────────────────────────────────────── */
.pvz-header[b-u8oeqxz1hv] { margin-bottom: 2.5rem; }

.pvz-title[b-u8oeqxz1hv] {
    font-family: var(--font-serif, 'Bitter', 'Georgia', serif);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: #1B5E20;
    line-height: 1.2;
    text-align: center;
    margin: 0 0 1.25rem;
}

.pvz-copete[b-u8oeqxz1hv] {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #37474F;
    opacity: 0.75;
    margin: 0 0 1.5rem;
}

.pvz-meta-row[b-u8oeqxz1hv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.pvz-meta[b-u8oeqxz1hv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #78909C;
}

.pvz-meta-dot[b-u8oeqxz1hv] { opacity: 0.4; }

/* Badge de estado "Borrador": fondo ámbar claro, texto ámbar oscuro */
.pvz-draft-badge[b-u8oeqxz1hv] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    background-color: #FFF8E1;
    color: #E65100;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid #FFE082;
}


/* ── F. CARRUSEL ──────────────────────────────────────────────────────────── */
.pvz-carousel-wrap[b-u8oeqxz1hv] { margin-bottom: 3rem; }

.pvz-carousel[b-u8oeqxz1hv] {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    max-height: 32rem;
    background-color: #E0E0E0;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.10);
}

.pvz-carousel-img[b-u8oeqxz1hv] {
    width: 100%;
    max-height: 32rem;
    object-fit: contain;
    display: block;
    animation: pvzImgFade-b-u8oeqxz1hv 0.35s ease-in-out both;
}

/* El <video> comparte los mismos estilos base que <img> (sin zoom, ya tiene controles). */
video.pvz-carousel-img[b-u8oeqxz1hv] {
    cursor: default;
    background: #000;
}

@keyframes pvzImgFade-b-u8oeqxz1hv {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pvz-car-edge[b-u8oeqxz1hv] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5rem;
    pointer-events: none;
    z-index: 1;
}

.pvz-car-edge-l[b-u8oeqxz1hv] { left: 0;  background: linear-gradient(90deg,  rgba(0,0,0,0.15) 0%, transparent 100%); }
.pvz-car-edge-r[b-u8oeqxz1hv] { right: 0; background: linear-gradient(270deg, rgba(0,0,0,0.15) 0%, transparent 100%); }

.pvz-car-btn[b-u8oeqxz1hv] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    border: none;
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.20);
    color: #37474F;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pvz-car-btn:hover[b-u8oeqxz1hv]           { transform: translateY(-50%) scale(1.10); box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
.pvz-car-btn:active[b-u8oeqxz1hv]          { transform: translateY(-50%) scale(0.92); }
.pvz-car-prev[b-u8oeqxz1hv] { left:  1rem; }
.pvz-car-next[b-u8oeqxz1hv] { right: 1rem; }

.pvz-car-badge[b-u8oeqxz1hv] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pvz-car-badge span[b-u8oeqxz1hv] {
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.pvz-car-dots[b-u8oeqxz1hv] {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 9999px;
    background-color: rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pvz-dot[b-u8oeqxz1hv] {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.45);
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.pvz-dot-active[b-u8oeqxz1hv] {
    width: 28px;
    background-color: #FFFFFF;
}

.pvz-thumb-strip[b-u8oeqxz1hv] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.pvz-thumb[b-u8oeqxz1hv] {
    width: 56px;
    height: 38px;
    border-radius: 8px;
    border: 2.5px solid transparent;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
    opacity: 0.5;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.pvz-thumb img[b-u8oeqxz1hv] { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Ícono de video en miniatura (reemplaza al <img> cuando el adjunto es un video). */
.vz-thumb-video-icon[b-u8oeqxz1hv] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a2e;
    color: #ffffff;
    font-size: 1.1rem;
}

.pvz-thumb-active[b-u8oeqxz1hv] { border-color: #2E7D32; opacity: 1; }
.pvz-thumb:hover:not(.pvz-thumb-active)[b-u8oeqxz1hv] { opacity: 0.75; }


/* ── G. CUERPO DE LA NOTICIA ─────────────────────────────────────────────── */
/* Visible siempre (sin AuthorizeView): el editor ve su propio borrador completo. */
.pvz-body[b-u8oeqxz1hv] {
    margin-bottom: 4rem;
    font-family: var(--font-serif, 'Bitter', 'Georgia', serif);
    font-size: 1.05rem;
    line-height: 1.7;
    color: #37474F;
}

.pvz-body p[b-u8oeqxz1hv]       { margin-bottom: 1.5rem; }
.pvz-body ul[b-u8oeqxz1hv],
.pvz-body ol[b-u8oeqxz1hv]      { padding-left: 1.5rem; margin-bottom: 1.5rem; }
.pvz-body li[b-u8oeqxz1hv]      { margin-bottom: 0.5rem; line-height: 1.6; }
.pvz-body strong[b-u8oeqxz1hv]  { font-weight: 700; color: #263238; }
.pvz-body em[b-u8oeqxz1hv]      { font-style: italic; }


/* ── H. COMENTARIOS SIMULADOS ────────────────────────────────────────────── */

/* Encabezado: ícono + título + chip "Simulados" */
.pvz-comments-hdr[b-u8oeqxz1hv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.pvz-comments-title[b-u8oeqxz1hv] {
    font-family: var(--font-serif, 'Bitter', 'Georgia', serif);
    font-size: 1.35rem;
    font-weight: 700;
    color: #263238;
    margin: 0;
}

/* Chip "Simulados": pastilla gris-azulada que identifica los datos de prueba */
.pvz-mock-chip[b-u8oeqxz1hv] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    background-color: #ECEFF1;
    color: #546E7A;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid #CFD8DC;
}

.pvz-comments-divider[b-u8oeqxz1hv] {
    height: 1px;
    background-color: #E0E0E0;
    margin-bottom: 1.25rem;
}

/*
   Aviso contextual: rectángulo sutil que distingue los comentarios mock
   de los comentarios reales que se mostrarán al publicar.
*/
.pvz-mock-notice[b-u8oeqxz1hv] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: #ECEFF1;
    border-radius: 0.625rem;
    border-left: 3px solid #90A4AE;
    color: #546E7A;
    font-size: 0.82rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.pvz-mock-notice svg[b-u8oeqxz1hv] { flex-shrink: 0; margin-top: 1px; }

/* Lista de comentarios: columna con separación de 1.5rem */
.pvz-comment-list[b-u8oeqxz1hv] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Ítem: avatar a la izquierda + cuerpo a la derecha */
.pvz-comment-item[b-u8oeqxz1hv] {
    display: flex;
    gap: 1rem;
}

/* Avatar con inicial: círculo 40×40, fondo degradado verde */
.pvz-ci-avatar[b-u8oeqxz1hv] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
    border: 1px solid #E0E0E0;
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
}

.pvz-ci-body[b-u8oeqxz1hv] { flex: 1; min-width: 0; }

.pvz-ci-meta[b-u8oeqxz1hv] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.pvz-ci-name[b-u8oeqxz1hv] { font-size: 0.9rem;  font-weight: 600; color: #263238; }
.pvz-ci-date[b-u8oeqxz1hv] { font-size: 0.78rem; color: #78909C; }

.pvz-ci-text[b-u8oeqxz1hv] {
    font-size: 0.9rem;
    line-height: 1.55;
    color: #37474F;
    margin: 0;
}


/* ── I. LIGHTBOX ─────────────────────────────────────────────────────────── */
.pvz-carousel-img-zoom[b-u8oeqxz1hv] { cursor: zoom-in; }

.pvz-lightbox[b-u8oeqxz1hv] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    cursor: zoom-out;
    animation: pvzLbIn-b-u8oeqxz1hv 0.22s ease-out both;
}

@keyframes pvzLbIn-b-u8oeqxz1hv {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pvz-lb-content[b-u8oeqxz1hv] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    cursor: default;
    animation: pvzLbImgIn-b-u8oeqxz1hv 0.25s ease-out both;
}

@keyframes pvzLbImgIn-b-u8oeqxz1hv {
    from { transform: scale(0.93); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.pvz-lb-img[b-u8oeqxz1hv] {
    max-width:  90vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0.75rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.pvz-lb-close[b-u8oeqxz1hv] {
    position: absolute;
    top: -3rem;
    right: -0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    border: none;
    background-color: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
    z-index: 1;
    backdrop-filter: blur(4px);
}

.pvz-lb-close:hover[b-u8oeqxz1hv] { background-color: rgba(255,255,255,0.22); transform: scale(1.08); }

.pvz-lb-arr[b-u8oeqxz1hv] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    border: none;
    background-color: rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background-color 0.15s ease, transform 0.15s ease;
    z-index: 1;
}

.pvz-lb-arr:hover[b-u8oeqxz1hv]  { background-color: rgba(255,255,255,0.28); }
.pvz-lb-arr:active[b-u8oeqxz1hv] { transform: translateY(-50%) scale(0.92); }
.pvz-lb-arr-l[b-u8oeqxz1hv] { left:  -4rem; }
.pvz-lb-arr-r[b-u8oeqxz1hv] { right: -4rem; }

.pvz-lb-counter[b-u8oeqxz1hv] {
    position: absolute;
    bottom: -2.25rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
    pointer-events: none;
}


/* ── J. RESPONSIVE MÓVIL ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .pvz-title[b-u8oeqxz1hv]       { font-size: 1.5rem; }
    .pvz-carousel[b-u8oeqxz1hv]    { aspect-ratio: 4 / 3; }
    .pvz-inner[b-u8oeqxz1hv]       { padding: 1.25rem 1rem; }
    .pvz-car-btn[b-u8oeqxz1hv]     { width: 2.25rem; height: 2.25rem; }
    .pvz-thumb-strip[b-u8oeqxz1hv] { gap: 0.375rem; }
    .pvz-thumb[b-u8oeqxz1hv]       { width: 44px; height: 30px; }
    .pvz-lb-arr-l[b-u8oeqxz1hv]    { left:  0.25rem; }
    .pvz-lb-arr-r[b-u8oeqxz1hv]    { right: 0.25rem; }
    .pvz-lb-img[b-u8oeqxz1hv]      { max-width: 98vw; max-height: 80vh; }
    .pvz-lb-close[b-u8oeqxz1hv]    { top: -2.5rem; right: 0; }
}}
/* /Pages/Configuracion/Progresion/Panel.razor.rz.scp.css */
/* ==========================================================================
   Panel.razor.css — Estilos del Panel de Progresiones
   ==========================================================================
   CSS Isolation: aplica únicamente a Panel.razor (Blazor scoped CSS).
   No comparto clases con otros componentes para evitar conflictos de scope.

   Zonas cubiertos:
   A — Hero gradiente (prog-hero)
   B — Barra de filtros (prog-filter-card)
   C — Botón CTA principal (prog-cta-btn)
   D — Tabla desktop con columnas congeladas sticky
   E — Estado vacío y footer de tabla
   F — Cards mobile (mobile-scout-card)
   G — Breakpoints responsivos

   Convención de colores:
   --scout-green-primary : #2E7D32
   --scout-green-dark    : #1B5E20
   --scout-green-pale    : #E8F5E9
   --border              : #E5E7EB
   --text-meta           : #78909C
   ========================================================================== */

/* Fix para Blazor CSS isolation (evita que se trague la primera regla) */
.dummy-rule-isolation-fix[b-vipbv4urvy] { display: none; }

/* ── A. Hero / Header Gradiente ─────────────────────────────────────────────────── */
.prog-hero[b-vipbv4urvy] {
    background-color: #1B5E20;
    background-image: linear-gradient(135deg, #1B5E20 0%, #2E7D32 60%, #388E3C 100%);
    padding: 2.5rem 2rem 2rem;
}

.prog-hero-content[b-vipbv4urvy] {
    max-width: 1360px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .prog-hero-content[b-vipbv4urvy] {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

.prog-hero-title[b-vipbv4urvy] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
    margin: 0;
}

.prog-hero-subtitle[b-vipbv4urvy] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0.25rem 0 0;
}

.prog-hero-stats[b-vipbv4urvy] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.prog-stat-badge[b-vipbv4urvy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
    border-radius: 0.75rem;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ── B. Cuerpo principal (prog-page-body) ───────────────────────────────── */
.prog-page-body[b-vipbv4urvy] {
    max-width: 1360px;
    margin: 1.5rem auto 3rem;
    padding: 0 1rem 0;
}

@media (min-width: 640px) {
    .prog-page-body[b-vipbv4urvy] {
        padding: 0 1.5rem 0;
    }
}

@media (min-width: 1024px) {
    .prog-page-body[b-vipbv4urvy] {
        padding: 0 2.5rem 0;
    }
}

/* ── B1. Barra de Filtros (prog-filter-card) ───────────────────────────── */
.prog-filter-card[b-vipbv4urvy] {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.prog-filter-left[b-vipbv4urvy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.prog-filter-icon[b-vipbv4urvy] {
    color: #2E7D32;
    font-size: 0.9rem;
}

.prog-filter-label[b-vipbv4urvy] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #78909C;
    letter-spacing: 0.08em;
}

.prog-filter-controls[b-vipbv4urvy] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    flex: 1;
}

.prog-filter-group[b-vipbv4urvy] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 200px;
}

.prog-label[b-vipbv4urvy] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #78909C;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── CHECKBOX FILTRO ───────────────────────────────────────── */

.prog-filter-check[b-vipbv4urvy] {
    min-width: 140px;
}

.prog-checkbox-container[b-vipbv4urvy] {
    height: 38px;
    display: flex;
    align-items: center;
}

.prog-checkbox-label[b-vipbv4urvy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0px;
}

.prog-checkbox[b-vipbv4urvy] {
    width: 1.1rem;
    height: 1.1rem;
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid #E5E7EB;
    border-radius: 0.375rem;
    background: #ffffff;
    cursor: pointer;
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    margin: 0;
}

.prog-checkbox:checked[b-vipbv4urvy] {
    background-color: #2E7D32;
    border-color: #2E7D32;
}

/* Icono del check con Font Awesome */
.prog-checkbox:checked[b-vipbv4urvy]::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: white;
    font-size: 0.6rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.prog-checkbox:focus[b-vipbv4urvy] {
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12);
    border-color: #2E7D32;
}

.prog-checkbox-text[b-vipbv4urvy] {
    color: #37474F;
    font-size: 0.82rem;
    font-weight: 500;
    transition: color 0.2s;
}

.prog-checkbox:hover[b-vipbv4urvy] {
    border-color: #2E7D32;
}

.prog-checkbox:checked + .prog-checkbox-text[b-vipbv4urvy] {
    color: #2E7D32;
    font-weight: 600;
}

.prog-select-wrapper[b-vipbv4urvy] {
    position: relative;
    display: flex;
    align-items: center;
}

.prog-select-icon[b-vipbv4urvy] {
    position: absolute;
    left: 0.75rem;
    color: #2E7D32;
    font-size: 0.8rem;
    pointer-events: none;
    z-index: 1;
}

.prog-select[b-vipbv4urvy] {
    width: 100%;
    padding: 0.625rem 1rem 0.625rem 2.25rem;
    border: 1.5px solid #E5E7EB;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #37474F;
    background: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: none;
    cursor: pointer;
}

.prog-select:hover[b-vipbv4urvy] {
    border-color: #2E7D32;
}

.prog-select:focus[b-vipbv4urvy] {
    outline: none;
    border-color: #2E7D32;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12);
}

.prog-filter-actions[b-vipbv4urvy] {
    margin-left: auto;
}

/* ── C. Botón CTA Principal (compartido entre Panel y Alta) ───────────────── */
.prog-cta-btn[b-vipbv4urvy] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%);
    color: #ffffff !important;
    border: none;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-sans, 'Inter', sans-serif);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(46, 125, 50, 0.3);
    white-space: nowrap;
}

.prog-cta-btn:hover[b-vipbv4urvy] {
    background: linear-gradient(135deg, #1B5E20 0%, #1B3022 100%);
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(46, 125, 50, 0.4);
    text-decoration: none;
}

.prog-cta-btn:active[b-vipbv4urvy] {
    transform: translateY(0);
}

/* ── Loading State ── */
.prog-loading[b-vipbv4urvy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
}

.prog-loading-text[b-vipbv4urvy] {
    color: #78909C;
    font-size: 0.9rem;
}

/* ── D. Tabla Principal (prog-table-card) ────────────────────────────────── */
/* overflow: clip (NO hidden) permite sticky interior sin romper el scroll */
.prog-table-card[b-vipbv4urvy] {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 1rem;
    /* overflow: clip permite sticky interior sin crear contenedor de scroll */
    overflow: clip;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}

.prog-table-scroll[b-vipbv4urvy] {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #C8E6C9 transparent;
}

.prog-table-scroll[b-vipbv4urvy]::-webkit-scrollbar {
    height: 8px;
}

.prog-table-scroll[b-vipbv4urvy]::-webkit-scrollbar-track {
    background: transparent;
}

.prog-table-scroll[b-vipbv4urvy]::-webkit-scrollbar-thumb {
    background-color: #C8E6C9;
    border-radius: 4px;
}

.prog-table[b-vipbv4urvy] {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
    font-family: var(--font-sans, 'Inter', sans-serif);
}

/* ── D1. Visibilidad por dispositivo ─────────────────────────────────────── */
/* Uso Bootstrap d-none/d-md-block en el HTML, no estas clases directamente.
   Las conservo para referencia de documentación del sistema. */
.prog-desktop-only[b-vipbv4urvy] { display: block; }
.prog-mobile-only[b-vipbv4urvy]  { display: none;  }

@media (max-width: 767px) {
    .prog-desktop-only[b-vipbv4urvy] { display: none;  }
    .prog-mobile-only[b-vipbv4urvy]  { display: block; }
}

/* ── D2. Encabezado de Tabla — sticky top (único thead visible al scrollear) ── */
.prog-table thead[b-vipbv4urvy] {
    position: sticky;
    top: 0;
    z-index: 25;
}

.prog-table thead tr[b-vipbv4urvy] {
    background: #FAFAFA;
    border-bottom: 2px solid #E5E7EB;
}

.prog-table thead th[b-vipbv4urvy] {
    padding: 0.5rem 0.5rem;
    text-align: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: #78909C;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
    background: #FAFAFA;
    vertical-align: middle;
}

/* ── D3. Columnas Congeladas (sticky left) ───────────────────────────────── */
/* background-color explícito (no inherit) para que no sean transparentes
   al desplazar la tabla horizontalmente. */
.col-frozen[b-vipbv4urvy] {
    position: sticky;
    z-index: 10;
    background-color: #ffffff;
}

.col-num[b-vipbv4urvy] {
    left: 0;
    min-width: 46px;
    width: 46px;
    border-right: 1px solid #F0F0F0;
}

.col-nombre[b-vipbv4urvy] {
    left: 46px;
    min-width: 120px;
    width: 120px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-apellido[b-vipbv4urvy] {
    left: 166px;
    min-width: 120px;
    width: 120px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 4px 0 10px -2px rgba(0, 0, 0, 0.10);
}

/* En el thead, las frozen cols van encima del thead sticky */
.prog-table thead .col-frozen[b-vipbv4urvy] {
    z-index: 30;
    background-color: #FAFAFA;
}

/* Pantallas medianas: columnas frozen más angostas (768px–1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .col-num[b-vipbv4urvy]    { min-width: 40px; width: 40px; }
    .col-nombre[b-vipbv4urvy] { left: 40px;  min-width: 90px; width: 90px;  max-width: 90px; }
    .col-apellido[b-vipbv4urvy] { left: 130px; min-width: 90px; width: 90px; max-width: 90px; }
}

/* ── D4. Columnas de Etapa — más angostas, texto en dos líneas ──────────── */
.col-stage[b-vipbv4urvy] {
    min-width: 64px;
    max-width: 80px;
    text-align: center;
    color: #2E7D32;
    font-weight: 700;
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}

.col-actions[b-vipbv4urvy] {
    width: 58px;
    min-width: 58px;
    text-align: center;
}

/* ── D4b. Columna Pase de Unidad ─────────────────────────────────────────── */
.col-pase[b-vipbv4urvy] {
    min-width: 72px;
    width: 80px;
    text-align: center;
    white-space: nowrap;
}

/* Badge con la fecha de pase */
.pase-badge[b-vipbv4urvy] {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    background: #EEF2FF;
    color: #3730A3;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Pase en menos de 6 meses (urgente) — naranja intenso */
.pase-badge-amber[b-vipbv4urvy] {
    background: #FB923C;
    color: #FFFFFF;
}

/* Pase entre 6 y 12 meses — amarillo saturado */
.pase-badge-yellow[b-vipbv4urvy] {
    background: #FEF08A;
    color: #713F12;
}

/* Pase en más de 12 meses */
.pase-badge-green[b-vipbv4urvy] {
    background: #DCFCE7;
    color: #166534;
}

/* ── D5. Filas del cuerpo de la tabla ────────────────────────────────────── */
.prog-table tbody tr[b-vipbv4urvy] {
    border-bottom: 1px solid #F0F0F0;
    transition: background-color 0.12s ease;
}

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

.prog-table tbody tr:hover[b-vipbv4urvy] {
    background-color: #F9FAFB;
}

/* Al hacer hover, las celdas frozen también deben cambiar de color */
.prog-table tbody tr:hover td.col-frozen[b-vipbv4urvy] {
    background-color: #F9FAFB !important;
}

.prog-table tbody td[b-vipbv4urvy] {
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    color: #37474F;
    vertical-align: middle;
    /* Fondo explícito para que sticky no sea transparente */
    background-color: #ffffff;
}

/* ── D6. Badge de Número de Fila — también funciona como enlace de edición ── */
.num-badge[b-vipbv4urvy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: #E8F5E9;
    color: #2E7D32;
    border-radius: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s, transform 0.15s;
}

a.num-badge:hover[b-vipbv4urvy],
a .num-badge:hover[b-vipbv4urvy] {
    background: #2E7D32;
    color: #ffffff;
    transform: scale(1.1);
    cursor: pointer;
}

/* ── D7. Chips de etapa obtenida / pendiente ────────────────────────────── */
.stage-cell-earned[b-vipbv4urvy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.625rem;
    background: #E8F5E9;
    color: #2E7D32;
    border-radius: 0.375rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
/* Proyección: fecha entre paréntesis, aún no realizada */
.stage-cell-projected[b-vipbv4urvy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.625rem;
    background: transparent;
    color: #90A4AE;
    border: 1.5px dashed #B0BEC5;
    border-radius: 0.375rem;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0.82;
}
.stage-cell-skipped[b-vipbv4urvy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.625rem;
    background: #ECEFF1;
    color: #78909C;
    border-radius: 0.375rem;
    font-size: 0.76rem;
    font-weight: 700;
}

.stage-empty[b-vipbv4urvy] {
    color: #D0D0D0;
    font-size: 0.9rem;
}

/* ── D8. Botón Editar por Fila (icono lápiz) ──────────────────────────── */
.scout-edit-btn[b-vipbv4urvy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    border: 1px solid #E5E7EB;
    color: #78909C;
    background: transparent;
    text-decoration: none;
    transition: all 0.15s ease;
    font-size: 0.8rem;
}

.scout-edit-btn:hover[b-vipbv4urvy] {
    background: #E8F5E9;
    border-color: #C8E6C9;
    color: #2E7D32;
    text-decoration: none;
}

/* ── E. Estado Vacío (sin scouts para los filtros seleccionados) ─────────── */
.prog-empty-state[b-vipbv4urvy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.prog-empty-icon[b-vipbv4urvy] {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 1.25rem;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.20));
    opacity: 0.35;
}

.prog-empty-title[b-vipbv4urvy] {
    color: #263238;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    letter-spacing: -.01em;
}

.prog-empty-text[b-vipbv4urvy] {
    color: #78909C;
    font-size: .875rem;
    margin: 0;
    max-width: 320px;
}

/* ── E1. Footer de la Tabla ───────────────────────────────────────────────── */
.prog-table-footer[b-vipbv4urvy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background: #FAFAFA;
    border-top: 1px solid #F0F0F0;
    font-size: 0.75rem;
    color: #78909C;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.prog-table-hint[b-vipbv4urvy] {
    font-style: italic;
}

/* ── E2. Leyenda de referencia visual ───────────────────────────────────── */
.prog-legend[b-vipbv4urvy] {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex-wrap: wrap;
}

.prog-legend-item[b-vipbv4urvy] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: #78909C;
    white-space: nowrap;
}

/* Muestra el badge/chip a escala reducida dentro de la leyenda */
.prog-legend-sample[b-vipbv4urvy] {
    font-size: 0.65rem !important;
    padding: 0.1rem 0.35rem !important;
    pointer-events: none;
}

.prog-legend-hint[b-vipbv4urvy] {
    font-style: italic;
}

/* ── G. Responsive Mobile (max 768px) ─────────────────────────────────── */
@media (max-width: 768px) {
    .prog-hero[b-vipbv4urvy] {
        padding: 1.5rem 1rem 2rem;
    }

    .prog-filter-card[b-vipbv4urvy] {
        flex-direction: column;
        align-items: stretch;
    }

    .prog-filter-controls[b-vipbv4urvy] {
        flex-direction: column;
    }

    .prog-filter-group[b-vipbv4urvy] {
        min-width: 0;
    }

    .prog-filter-actions[b-vipbv4urvy] {
        margin-left: 0;
    }

    .prog-cta-btn[b-vipbv4urvy] {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   F. MOBILE SCOUT CARDS — Sección D del diseño responsive.
   Cada tarjeta reemplaza una fila de la tabla en pantallas pequeñas.
   Muestro: badge N° + nombre, progresión actual y barra segmentada.
   ========================================================================== */

.prog-mobile-only[b-vipbv4urvy] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mobile-scout-card[b-vipbv4urvy] {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 0.875rem;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.mobile-card-accent[b-vipbv4urvy] {
    height: 3px;
    background: #2E7D32;
}

.mobile-card-body[b-vipbv4urvy] {
    padding: 1rem 1.125rem;
}

/* ── F1. Tarjeta individual de scout ─────────────────────────────────────── */
.mobile-card-header[b-vipbv4urvy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}

.mobile-card-identity[b-vipbv4urvy] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex: 1;
    min-width: 0;
}

.mobile-card-name[b-vipbv4urvy] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1B2A1E;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-edit-btn[b-vipbv4urvy] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.875rem;
    background: #E8F5E9;
    color: #2E7D32;
    border: 1px solid #C8E6C9;
    border-radius: 0.625rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.mobile-edit-btn:hover[b-vipbv4urvy] {
    background: #2E7D32;
    color: #ffffff;
    border-color: #2E7D32;
    text-decoration: none;
}

/* ── F2. Caja de progresión actual ──────────────────────────────────────── */
.mobile-card-stage-box[b-vipbv4urvy] {
    background: #F9FAFB;
    border: 1px solid #F0F0F0;
    border-radius: 0.625rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.75rem;
}

/* Fila interna: progresión actual a la izquierda + pase a la derecha */
.mobile-card-stage-row[b-vipbv4urvy] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Info de pase en mobile (columna derecha) */
.mobile-pase-info[b-vipbv4urvy] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
}

.mobile-card-stage-label[b-vipbv4urvy] {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    color: #78909C;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.mobile-card-stage-value[b-vipbv4urvy] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1B2A1E;
}

.mobile-card-stage-value i[b-vipbv4urvy] {
    color: #2E7D32;
}

/* ── F3. Barra de progreso segmentada (un segmento por etapa) ───────────── */
.mobile-progress-bar[b-vipbv4urvy] {
    display: flex;
    gap: 3px;
    margin-bottom: 0.375rem;
}

.prog-seg[b-vipbv4urvy] {
    flex: 1;
    height: 8px;
    border-radius: 99px;
    background: #ECEFF1;
    transition: background-color 0.2s;
}

.prog-seg-earned[b-vipbv4urvy] {
    background: #2E7D32;
}

/* Segmento proyectado: aún no realizado */
.prog-seg-projected[b-vipbv4urvy] {
    background: transparent;
    border: 1.5px dashed #B0BEC5;
}

.mobile-progress-labels[b-vipbv4urvy] {
    display: flex;
    justify-content: space-between;
    font-size: 0.62rem;
    color: #78909C;
}

/* ==========================================================================
   MODAL ALTA DE PROGRESIONES
   Estilos del popup que reemplaza la página Alta.razor.
   ========================================================================== */

/* ── Backdrop oscuro que cubre el panel ─────────────────────────────────── */
.prog-modal-backdrop[b-vipbv4urvy] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
    backdrop-filter: blur(2px);
}

/* ── Contenedor del modal ────────────────────────────────────────────────── */
.prog-modal[b-vipbv4urvy] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    width: min(96vw, 860px);
    max-height: 90vh;
    background: #ffffff;
    border-radius: 1.25rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Header del modal ────────────────────────────────────────────────────── */
.prog-modal-header[b-vipbv4urvy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 60%, #388E3C 100%);
    flex-shrink: 0;
}

.prog-modal-title[b-vipbv4urvy] {
    font-family: var(--font-heading, 'Bitter', serif);
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    font-weight: 700;
    color: #ffffff;
}

.prog-modal-title strong[b-vipbv4urvy] {
    color: #ffffff;
}

.prog-modal-close[b-vipbv4urvy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.prog-modal-close:hover[b-vipbv4urvy] {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.7);
}

/* ── Body del modal (scrolleable) ───────────────────────────────────────── */
.prog-modal-body[b-vipbv4urvy] {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1;
}

/* ── Grilla interna: 1 col mobile / 2 col md+ ────────────────────────────── */
.alta-form-grid[b-vipbv4urvy] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 560px) {
    .alta-form-grid[b-vipbv4urvy] {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Tarjeta de sección (alta-card) ─────────────────────────────────────── */
.alta-card[b-vipbv4urvy] {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.alta-card-header[b-vipbv4urvy] {
    display: flex;
    align-items: center;
    padding: 0.875rem 1.25rem;
    background: #FAFAFA;
    border-bottom: 1px solid #E5E7EB;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1B2A1E;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.alta-card-header i[b-vipbv4urvy] {
    color: #2E7D32;
}

.alta-card-body[b-vipbv4urvy] {
    padding: 1.25rem;
}

/* ── Loading / estado vacío ──────────────────────────────────────────────── */
.alta-loading[b-vipbv4urvy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem;
    color: #78909C;
    font-size: 0.875rem;
    justify-content: center;
}

.alta-empty[b-vipbv4urvy] {
    text-align: center;
    padding: 2rem;
    color: #78909C;
}

.alta-empty-icon[b-vipbv4urvy] {
    font-size: 2rem;
    color: #D0D0D0;
    display: block;
    margin-bottom: 0.5rem;
}

.alta-empty p[b-vipbv4urvy] {
    font-size: 0.875rem;
    margin: 0;
}

/* ── Lista de etapas registradas (panel izquierdo) ───────────────────────── */
.alta-stage-list[b-vipbv4urvy] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.alta-stage-item[b-vipbv4urvy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #FAFAFA;
    border: 1px solid #F0F0F0;
    border-radius: 0.75rem;
    transition: border-color 0.15s;
}

.alta-stage-item:hover[b-vipbv4urvy] {
    border-color: #C8E6C9;
}

.alta-stage-dot[b-vipbv4urvy] {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: #2E7D32;
    flex-shrink: 0;
}

.alta-stage-info[b-vipbv4urvy] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.alta-stage-name[b-vipbv4urvy] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1B2A1E;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alta-stage-date-input[b-vipbv4urvy] {
    width: 100%;
    padding: 0.3rem 0.5rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    color: #37474F;
    background: #ffffff;
    transition: border-color 0.15s;
}

.alta-stage-date-input:focus[b-vipbv4urvy] {
    outline: none;
    border-color: #2E7D32;
    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.1);
}

.alta-stage-actions[b-vipbv4urvy] {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.alta-action-btn[b-vipbv4urvy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.15s ease;
    background: transparent;
    color: #78909C;
}

.alta-action-save:hover[b-vipbv4urvy] {
    background: #E8F5E9;
    color: #2E7D32;
}

.alta-action-delete:hover[b-vipbv4urvy] {
    background: #FFEBEE;
    color: #D32F2F;
}

/* ── Formulario de nueva progresión (panel derecho) ──────────────────────── */
.alta-form[b-vipbv4urvy] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.alta-form-group[b-vipbv4urvy] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.alta-label[b-vipbv4urvy] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #78909C;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.alta-select-wrapper[b-vipbv4urvy] {
    position: relative;
}

.alta-select[b-vipbv4urvy] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1.5px solid #E5E7EB;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #37474F;
    background: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: none;
    cursor: pointer;
}

.alta-select:hover[b-vipbv4urvy] {
    border-color: #2E7D32;
}

.alta-select:focus[b-vipbv4urvy] {
    outline: none;
    border-color: #2E7D32;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12);
}

.alta-input[b-vipbv4urvy] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1.5px solid #E5E7EB;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    color: #37474F;
    background: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.alta-input:hover[b-vipbv4urvy] {
    border-color: #2E7D32;
}

.alta-input:focus[b-vipbv4urvy] {
    outline: none;
    border-color: #2E7D32;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12);
}

.alta-input[b-vipbv4urvy]::placeholder {
    color: #B0BEC5;
}

/* Aviso informativo debajo de un campo */
.alta-hint[b-vipbv4urvy] {
    margin-top: 0.45rem;
    padding: 0.5rem 0.75rem;
    background: #E3F2FD;
    border-left: 3px solid #1565C0;
    border-radius: 0 0.5rem 0.5rem 0;
    font-size: 0.78rem;
    color: #37474F;
    line-height: 1.45;
}

.alta-hint code[b-vipbv4urvy] {
    background: rgba(21, 101, 192, 0.12);
    color: #1565C0;
    padding: 0 3px;
    border-radius: 3px;
    font-size: 0.78rem;
}

/* ── Footer del formulario: guardar + cancelar ───────────────────────────── */
.alta-form-footer[b-vipbv4urvy] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid #F0F0F0;
}

.alta-cancel-btn[b-vipbv4urvy] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.625rem 1rem;
    background: transparent;
    color: #546E7A;
    border: 1.5px solid #E5E7EB;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
}

.alta-cancel-btn:hover[b-vipbv4urvy] {
    background: #F3F4F6;
    color: #37474F;
    text-decoration: none;
}

/* ── Responsivo mobile ───────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .prog-modal[b-vipbv4urvy] {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        max-height: 92vh;
        border-radius: 1.25rem 1.25rem 0 0;
    }

    .alta-form-footer[b-vipbv4urvy] {
        flex-direction: column;
    }

    .prog-cta-btn[b-vipbv4urvy],
    .alta-cancel-btn[b-vipbv4urvy] {
        width: 100%;
        justify-content: center;
    }
}

/* /Pages/Configuracion/Scouts/Alta.razor.rz.scp.css */
/* ==========================================================================
   Alta.razor.css — Estilos del formulario de alta de scouts
   ==========================================================================
   CSS Isolation: aplica exclusivamente a Alta.razor (Blazor scoped CSS).
   Prefijo de clases: snp- (Scout New Page).

   Paleta compartida con Panel.razor.css:
     Fondo        #F5F5F5  |  Superficie  #FFFFFF  |  Acento    #2E7D32
     Título       #263238  |  Cuerpo      #37474F  |  Muted     #78909C
     Error        #D32F2F  |  Borde       #E0E0E0

   Estructura de secciones:
     PÁGINA            — contenedor raíz y animación de entrada
     TOP ROW           — botón de retorno al panel
     ENCABEZADO        — ícono + título + subtítulo
     TARJETA FORMULARIO — card con los campos agrupados en bloques
     CAMPOS            — inputs, selects, hints y mensajes de error
     BARRA DE ACCIONES — pie fijo con botones cancelar y guardar
     RESPONSIVE        — ajustes para pantallas pequeñas
   ========================================================================== */


/* ── PÁGINA ────────────────────────────────────────────────── */

.snp-page[b-bw00qs6b0t] {
    min-height: 100vh;
    background-color: #F5F5F5;
    animation: snpFade-b-bw00qs6b0t .4s ease both;
}

.snp-outer[b-bw00qs6b0t] {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

@media (min-width: 640px) {
    .snp-outer[b-bw00qs6b0t] { padding: 1.5rem 1.5rem 4rem; }
}

@keyframes snpFade-b-bw00qs6b0t {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0);    }
}


/* ── TOP ROW ───────────────────────────────────────────────── */

.snp-top-row[b-bw00qs6b0t] { margin-bottom: 1.25rem; }

.snp-btn-back[b-bw00qs6b0t] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    border: none;
    background: transparent;
    color: #78909C;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, color .15s;
}

.snp-btn-back:hover[b-bw00qs6b0t] {
    background: #ffffff;
    color: #37474F;
}


/* ── ENCABEZADO ────────────────────────────────────────────── */

.snp-page-header[b-bw00qs6b0t] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.snp-header-icon[b-bw00qs6b0t] {
    width: 48px;
    height: 48px;
    border-radius: .75rem;
    background: #E8F5E9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2E7D32;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.snp-page-title[b-bw00qs6b0t] {
    font-family: 'Bitter', Georgia, serif;
    font-size: clamp(1.35rem, 3vw, 1.65rem);
    font-weight: 700;
    color: #263238;
    margin: 0 0 .2rem;
    line-height: 1.2;
}

.snp-page-subtitle[b-bw00qs6b0t] {
    color: #78909C;
    font-size: .84rem;
    margin: 0;
}


/* ── TARJETA DEL FORMULARIO ────────────────────────────────── */

.snp-form-card[b-bw00qs6b0t] {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: .875rem;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}


/* ── ETIQUETA DE SECCIÓN ───────────────────────────────────── */

.snp-section-label[b-bw00qs6b0t] {
    color: #78909C;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding-bottom: .625rem;
    border-bottom: 1px solid #F0F0F0;
}

.snp-section-mt[b-bw00qs6b0t] { margin-top: .5rem; }

.snp-optional[b-bw00qs6b0t] {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    font-size: .7rem;
}


/* ── GRID DE FORMULARIO ────────────────────────────────────── */

.snp-form-grid[b-bw00qs6b0t] { display: grid; gap: 1rem; }
.snp-grid-2[b-bw00qs6b0t]    { grid-template-columns: 1fr 1fr; }
.snp-grid-3[b-bw00qs6b0t]    { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 560px) {
    .snp-grid-2[b-bw00qs6b0t], .snp-grid-3[b-bw00qs6b0t] { grid-template-columns: 1fr; }
}


/* ── CAMPO ─────────────────────────────────────────────────── */

.snp-field[b-bw00qs6b0t] {
    display: flex;
    flex-direction: column;
}

.snp-field-half[b-bw00qs6b0t] { max-width: 380px; }

.snp-field-label[b-bw00qs6b0t] {
    color: #455A64;
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: .5rem;
    letter-spacing: .02em;
}

.snp-required[b-bw00qs6b0t] { color: #D32F2F; margin-left: 2px; }

.snp-input[b-bw00qs6b0t] {
    width: 100%;
    height: 44px;
    padding: 0 .875rem;
    border: 1.5px solid #D5D5D5;
    border-radius: .5rem;
    background: #ffffff;
    color: #263238;
    font-size: .9rem;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
}

.snp-input:focus[b-bw00qs6b0t] {
    border-color: #2E7D32;
    box-shadow: 0 0 0 3px rgba(46,125,50,.14);
}

.snp-input[b-bw00qs6b0t]::placeholder { color: #BDBDBD; }

.snp-input-mono[b-bw00qs6b0t] { font-family: monospace; }

.snp-input-error[b-bw00qs6b0t] {
    border-color: #D32F2F !important;
    box-shadow: none !important;
}

.snp-error-msg[b-bw00qs6b0t] {
    color: #D32F2F;
    font-size: .73rem;
    margin-top: 4px;
}

.snp-hint[b-bw00qs6b0t] {
    color: #9E9E9E;
    font-size: .71rem;
    margin-top: 4px;
}


/* ── SELECT ────────────────────────────────────────────────── */

.snp-select-wrap[b-bw00qs6b0t] { position: relative; }

.snp-select[b-bw00qs6b0t] {
    width: 100%;
    height: 44px;
    appearance: none;
    -webkit-appearance: none;
    padding: 0 2.25rem 0 .875rem;
    background: #ffffff;
    border: 1.5px solid #D5D5D5;
    border-radius: .5rem;
    color: #263238;
    font-size: .9rem;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}

.snp-select:focus[b-bw00qs6b0t] {
    border-color: #2E7D32;
    box-shadow: 0 0 0 3px rgba(46,125,50,.14);
}

.snp-chevron[b-bw00qs6b0t] {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #78909C;
    font-size: .75rem;
    pointer-events: none;
}


/* ── BARRA DE ACCIONES ─────────────────────────────────────── */

.snp-actions-bar[b-bw00qs6b0t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: .875rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.snp-required-note[b-bw00qs6b0t] {
    color: #9E9E9E;
    font-size: .75rem;
    margin: 0;
}

.snp-actions-right[b-bw00qs6b0t] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
}

.snp-btn-cancel[b-bw00qs6b0t] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .625rem 1.25rem;
    border-radius: .5rem;
    border: 1.5px solid #D5D5D5;
    background: #F5F5F5;
    color: #78909C;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, border-color .15s;
}

.snp-btn-cancel:hover[b-bw00qs6b0t] { background: #EEEEEE; border-color: #BDBDBD; }

.snp-btn-submit[b-bw00qs6b0t] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .625rem 1.5rem;
    border-radius: .5rem;
    border: none;
    background: #2E7D32;
    color: #ffffff;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s;
    box-shadow: 0 2px 8px rgba(46,125,50,.25);
}

.snp-btn-submit:hover:not(:disabled)[b-bw00qs6b0t] { background: #256427; }

.snp-btn-submit:disabled[b-bw00qs6b0t] {
    background: #A5D6A7;
    cursor: not-allowed;
    box-shadow: none;
}
/* /Pages/Configuracion/Scouts/Panel.razor.rz.scp.css */
/* ==========================================================================
   Panel.razor.css — Estilos del panel de gestión de scouts
   ==========================================================================
   CSS Isolation: aplica exclusivamente a Panel.razor (Blazor scoped CSS).
   Prefijo de clases: smp- (Scout Management Page).

   Paleta:
     Fondo           #F5F5F5  |  Superficie   #FFFFFF  |  Header tab.  #FAFAFA
     Título          #263238  |  Cuerpo       #37474F  |  Muted        #78909C
     Borde           #E0E0E0  |  Borde suave  #F0F0F0
     Acento          #2E7D32  |  Acento osc.  #1B5E20  |  Rojo         #D32F2F
     Overlay         rgba(0,0,0,0.45)
     Zebra par       #FFFFFF  |  Zebra impar  #FAFCFA  |  Inactiva     #F9F9F9

   Estructura de secciones:
     PÁGINA                — contenedor raíz y animación de entrada
     BOTÓN VOLVER          — enlace de retorno al inicio
     ENCABEZADO            — título y subtítulo de la pantalla
     BARRA DE FILTROS      — selectores, buscador y botón nuevo
     BADGE RESUMEN         — píldora de contador de resultados
     TABLA                 — tabla sticky con scroll horizontal
     LEYENDA               — referencia visual de acciones
     RESPONSIVE VISIBILITY — clases desktop-only / mobile-only
     TARJETAS MOBILE       — layout de tarjetas para < 640px
     ESTADO VACÍO          — mensaje con flor de lis cuando no hay datos
     MODALES               — backdrop, modal, formulario y acciones
     BOTTOM-SHEET MOBILE   — modales adaptativos en pantallas pequeñas
   ========================================================================== */


/* ── PÁGINA ────────────────────────────────────────────────── */

.smp-page[b-v0mkrsi5f7] {
    min-height: 100vh;
    background-color: #F5F5F5;
    animation: smpFadeIn-b-v0mkrsi5f7 .4s ease both;
}

.smp-outer[b-v0mkrsi5f7] {
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

@media (min-width: 640px) {
    .smp-outer[b-v0mkrsi5f7] { padding: 1.5rem 1.5rem 4rem; }
}

@keyframes smpFadeIn-b-v0mkrsi5f7 {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0);    }
}


/* ── BOTÓN VOLVER ──────────────────────────────────────────── */

.smp-btn-back[b-v0mkrsi5f7] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    color: #78909C;
    font-size: .82rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s;
    margin-bottom: 1rem;
}

.smp-btn-back:hover[b-v0mkrsi5f7] {
    background-color: #ffffff;
    color: #37474F;
}


/* ── ENCABEZADO ────────────────────────────────────────────── */

.smp-page-header[b-v0mkrsi5f7] { margin-bottom: 1.25rem; }

.smp-page-title[b-v0mkrsi5f7] {
    font-family: 'Bitter', Georgia, serif;
    font-size: clamp(1.5rem, 3vw, 1.85rem);
    font-weight: 700;
    color: #263238;
    margin: 0 0 .25rem;
    line-height: 1.2;
}

.smp-page-subtitle[b-v0mkrsi5f7] {
    color: #78909C;
    font-size: .85rem;
    margin: 0;
}


/* ── BARRA DE FILTROS ──────────────────────────────────────── */

.smp-filters-card[b-v0mkrsi5f7] {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: .75rem;
    padding: .75rem 1rem;
    margin-bottom: .875rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.smp-filters-row[b-v0mkrsi5f7] {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    flex-wrap: wrap;
}

.smp-filter-group[b-v0mkrsi5f7] {
    display: flex;
    flex-direction: column;
    min-width: 110px;
}

.smp-filter-wide[b-v0mkrsi5f7]  { min-width: 160px; flex: 1; max-width: 280px; }
.smp-filter-search[b-v0mkrsi5f7]{ min-width: 180px; flex: 2; }
.smp-filter-action[b-v0mkrsi5f7]{ min-width: auto; }

.smp-filter-label[b-v0mkrsi5f7] {
    color: #78909C;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: .375rem;
}

.smp-label-hidden[b-v0mkrsi5f7] { visibility: hidden; }

/* ── CHECKBOX FILTRO ───────────────────────────────────────── */

.smp-filter-check[b-v0mkrsi5f7] {
    min-width: 160px;
    justify-content: flex-end; /* Para que quede alineado abajo si la fila es alta */
}

.smp-checkbox-container[b-v0mkrsi5f7] {
    height: 38px;
    display: flex;
    align-items: center;
}

.smp-checkbox-label[b-v0mkrsi5f7] {
    display: flex;
    align-items: center;
    gap: .625rem;
    cursor: pointer;
    user-select: none;
    padding: 2px 0;
}

.smp-checkbox[b-v0mkrsi5f7] {
    width: 1.15rem;
    height: 1.15rem;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid #E0E0E0;
    border-radius: .35rem;
    background: #ffffff;
    cursor: pointer;
    position: relative;
    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    margin: 0;
}

.smp-checkbox:checked[b-v0mkrsi5f7] {
    background-color: #2E7D32;
    border-color: #2E7D32;
}

/* Icono del check con Font Awesome */
.smp-checkbox:checked[b-v0mkrsi5f7]::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: white;
    font-size: .65rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.smp-checkbox:focus[b-v0mkrsi5f7] {
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15);
    border-color: #2E7D32;
}

.smp-checkbox-text[b-v0mkrsi5f7] {
    color: #455A64;
    font-size: .78rem;
    font-weight: 500;
    transition: color .2s;
}

.smp-checkbox:hover[b-v0mkrsi5f7] {
    border-color: #2E7D32;
}

.smp-checkbox:checked + .smp-checkbox-text[b-v0mkrsi5f7] {
    color: #2E7D32;
    font-weight: 600;
}


/* ── SELECT ────────────────────────────────────────────────── */

.smp-select-wrap[b-v0mkrsi5f7] {
    position: relative;
}

.smp-select[b-v0mkrsi5f7] {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    padding: .5rem 2rem .5rem .75rem;
    background: #ffffff;
    border: 1.5px solid #E0E0E0;
    border-radius: .5rem;
    color: #263238;
    font-size: .8rem;
    font-weight: 500;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.smp-select:focus[b-v0mkrsi5f7] {
    border-color: #2E7D32;
    box-shadow: 0 0 0 3px rgba(46,125,50,.14);
}

.smp-select-modal[b-v0mkrsi5f7] {
    padding: .625rem 2.25rem .625rem .875rem;
    border-radius: .75rem;
    font-size: .88rem;
}

.smp-select-chevron[b-v0mkrsi5f7] {
    position: absolute;
    right: .625rem;
    top: 50%;
    transform: translateY(-50%);
    color: #78909C;
    font-size: .75rem;
    pointer-events: none;
}


/* ── BUSCADOR ──────────────────────────────────────────────── */

.smp-search-wrap[b-v0mkrsi5f7] { position: relative; }

.smp-search-icon[b-v0mkrsi5f7] {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #78909C;
    font-size: .8rem;
    pointer-events: none;
}

.smp-search-input[b-v0mkrsi5f7] {
    width: 100%;
    padding: .5rem 1rem .5rem 2.25rem;
    background: #ffffff;
    border: 1.5px solid #E0E0E0;
    border-radius: .5rem;
    color: #263238;
    font-size: .8rem;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

.smp-search-input:focus[b-v0mkrsi5f7] {
    border-color: #2E7D32;
    box-shadow: 0 0 0 3px rgba(46,125,50,.14);
}

.smp-search-input[b-v0mkrsi5f7]::placeholder { color: rgba(55,71,79,.35); }


/* ── BOTÓN NUEVO SCOUT ─────────────────────────────────────── */

.smp-btn-new[b-v0mkrsi5f7] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .875rem;
    background: #2E7D32;
    color: #ffffff;
    border: none;
    border-radius: .5rem;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
    height: 36px;
    white-space: nowrap;
}

.smp-btn-new:hover[b-v0mkrsi5f7] { background: #1B5E20; }


/* ── BADGE RESUMEN ─────────────────────────────────────────── */

.smp-summary-bar[b-v0mkrsi5f7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}

.smp-summary-badge[b-v0mkrsi5f7] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .625rem;
    border-radius: .375rem;
    font-size: .74rem;
    font-weight: 700;
}

.smp-badge-active[b-v0mkrsi5f7]  { background: #E8F5E9; border: 1px solid #A5D6A7; color: #2E7D32; }
.smp-badge-neutral[b-v0mkrsi5f7] { background: #F5F5F5; border: 1px solid #E0E0E0; color: #78909C; }

.smp-dot-active[b-v0mkrsi5f7] {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #2E7D32;
    flex-shrink: 0;
}


/* ── SPINNER ───────────────────────────────────────────────── */

.smp-loading[b-v0mkrsi5f7] {
    display: flex;
    justify-content: center;
    padding: 5rem 0;
}

.smp-spinner[b-v0mkrsi5f7] { color: #2E7D32; font-size: 2.5rem; }


/* ── TABLA ─────────────────────────────────────────────────── */

.smp-table-wrapper[b-v0mkrsi5f7] {
    border-radius: .875rem;
    border: 1px solid #E0E0E0;
    background: #FAFAFA;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
    /* overflow:clip recorta el border-radius sin crear un scroll context,
       preservando el sticky del thead respecto al scroll de página. */
    overflow: clip;
    margin-bottom: 1rem;
}

.smp-table-scroll[b-v0mkrsi5f7] {
    overflow-x: auto;
    /* overflow-y:clip declarado explícitamente para evitar que el navegador
       lo fuerce a 'auto' al detectar overflow-x:auto, lo que crearía un
       scroll context que rompería el position:sticky del thead. */
    overflow-y: clip;
    position: relative;
}

.smp-table[b-v0mkrsi5f7] {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem;
    min-width: 960px;
}

/* Cabecera sticky: top:0 porque el scroll ancestor del thead es
   smp-table-scroll (tiene overflow-x:auto). El thead se pega al tope
   de ese contenedor, no al viewport. */
.smp-thead-sticky[b-v0mkrsi5f7] {
    position: sticky;
    top: 0;
    z-index: 25;
}

/* Fondo explícito en cada th para tapar el contenido que pasa por debajo */
.smp-thead-sticky th[b-v0mkrsi5f7] {
    background: #FAFAFA;
}

/* Celdas sticky-left/right del thead: z-index mayor para que solapen
   correctamente las sticky del tbody al hacer scroll horizontal */
.smp-thead-sticky .smp-sticky-left[b-v0mkrsi5f7],
.smp-thead-sticky .smp-sticky-right[b-v0mkrsi5f7] {
    z-index: 35;
    background: #FAFAFA;
}

/* Cabecera */
.smp-thead-row[b-v0mkrsi5f7] { background-color: #FAFAFA; }

.smp-th[b-v0mkrsi5f7] {
    padding: .625rem .625rem;
    text-align: left;
    color: #78909C;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 2px solid #E0E0E0;
    border-right: none;
}

.smp-th-id[b-v0mkrsi5f7]      { width: 44px; min-width: 44px; }
.smp-th-center[b-v0mkrsi5f7]  { text-align: center; }
.smp-th-privacy[b-v0mkrsi5f7] { color: #E65100; border-left: 1px dashed #CFD8DC; }
.smp-td-privacy[b-v0mkrsi5f7] { border-left: 1px dashed #CFD8DC; }

/* Columna colapsada (oculta): encabezado y celda estrechos */
.smp-th-privacy-collapsed[b-v0mkrsi5f7] {
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    text-align: center;
    padding: .375rem .25rem;
}

.smp-td-privacy-collapsed[b-v0mkrsi5f7] {
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    text-align: center;
    padding: .375rem .25rem;
}

/* Botón toggle (ojo) dentro del encabezado */
.smp-col-toggle[b-v0mkrsi5f7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #78909C;
    font-size: .72rem;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: .25rem;
    transition: background .12s, color .12s;
    vertical-align: middle;
    margin-right: 2px;
}

.smp-col-toggle:hover[b-v0mkrsi5f7] { background: #ECEFF1; color: #2E7D32; }

/* Etiqueta abreviada en columna colapsada */
.smp-col-hidden-label[b-v0mkrsi5f7] {
    display: block;
    font-size: .58rem;
    color: #B0BEC5;
    font-weight: 600;
    letter-spacing: .04em;
    margin-top: 1px;
}

/* Texto enmascarado (•••) en columna colapsada */
.smp-masked-col[b-v0mkrsi5f7] {
    color: #B0BEC5;
    font-size: .7rem;
    letter-spacing: .08em;
}

.smp-th-lock[b-v0mkrsi5f7] {
    font-size: .62rem;
    opacity: .7;
    vertical-align: middle;
    margin-right: 2px;
}


/* ── Flechas de navegación horizontal en el thead ──────────── */

/* Wrapper del encabezado de Acciones: alinea texto + flecha */
.smp-th-actions-inner[b-v0mkrsi5f7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    width: 100%;
}

/* Botón de flecha (izquierda / derecha) */
.smp-inline-arrow[b-v0mkrsi5f7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: .3rem;
    background: rgba(46, 125, 50, .12);
    border: none;
    color: #2E7D32;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
    padding: 0;
}

.smp-inline-arrow:hover[b-v0mkrsi5f7] {
    background: #2E7D32;
    color: #ffffff;
}

/* Columnas sticky izquierda */
.smp-sticky-left[b-v0mkrsi5f7]    { position: sticky; z-index: 10; background: inherit; }
.smp-sticky-id[b-v0mkrsi5f7]      { left: 0; width: 44px; border-right: none; }
.smp-sticky-nombre[b-v0mkrsi5f7]  { left: 44px; width: 140px; min-width: 140px; }
.smp-sticky-apellido[b-v0mkrsi5f7] {
    left: 184px;
    width: 160px;
    min-width: 160px;
    border-right: 2px solid #E0E0E0;
}

/* Columnas compactas (DNI, Natalicio, Unidad) */
.smp-th-compact[b-v0mkrsi5f7] { width: 95px; min-width: 80px; max-width: 110px; }
.smp-th-narrow[b-v0mkrsi5f7]  { width: 50px; min-width: 44px; max-width: 60px; }

/* Columna sticky derecha */
.smp-sticky-right[b-v0mkrsi5f7] {
    position: sticky;
    right: 0;
    z-index: 10;
    background: inherit;
    border-left: 2px solid #E0E0E0;
    width: 148px;
    min-width: 148px;
}

/* Filas */
.smp-tr[b-v0mkrsi5f7] {
    border-bottom: 1px solid #F0F0F0;
    transition: background-color .1s;
}

.smp-tr:nth-child(odd)[b-v0mkrsi5f7]  { background-color: #FAFCFA; }
.smp-tr:nth-child(even)[b-v0mkrsi5f7] { background-color: #FFFFFF; }
.smp-tr:last-child[b-v0mkrsi5f7]      { border-bottom: none; }
.smp-tr:hover[b-v0mkrsi5f7]           { background-color: #F1F8E9 !important; }

.smp-tr-inactive[b-v0mkrsi5f7]        { opacity: .75; }
.smp-tr-inactive:hover[b-v0mkrsi5f7]  { background-color: #F5F5F5 !important; }

.smp-td[b-v0mkrsi5f7] {
    padding: .375rem .625rem;
    border: none;
    vertical-align: middle;
    color: #37474F;
}

.smp-td-id[b-v0mkrsi5f7]     { color: #78909C; font-size: .72rem; font-weight: 500; }
.smp-td-mono[b-v0mkrsi5f7]   { font-family: monospace; font-size: .76rem; }
.smp-td-center[b-v0mkrsi5f7] { text-align: center; }

.smp-age-badge[b-v0mkrsi5f7] {
    display: inline-block;
    padding: .1rem .4rem;
    border-radius: 999px;
    background: #ECEFF1;
    color: #546E7A;
    font-size: .67rem;
    font-weight: 600;
    vertical-align: middle;
    white-space: nowrap;
}

.smp-natalicio-cell[b-v0mkrsi5f7] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}
.smp-td-empty[b-v0mkrsi5f7]  { text-align: center; padding: 0; color: #78909C; font-size: .9rem; }

.smp-id-text[b-v0mkrsi5f7]       { color: #78909C; font-size: .72rem; font-weight: 500; }
.smp-name-text[b-v0mkrsi5f7]     { color: #263238; font-weight: 600; font-size: .78rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smp-apellido-text[b-v0mkrsi5f7] { color: #263238; font-weight: 700; font-size: .78rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smp-text-inactive[b-v0mkrsi5f7] { color: #B0BEC5; }


/* ── PILL DE UNIDAD ────────────────────────────────────────── */

.smp-unit-pill[b-v0mkrsi5f7] {
    display: inline-block;
    padding: .2rem .5rem;
    border-radius: 9999px;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ── CELDA DE PRIVACIDAD ───────────────────────────────────── */

.smp-privacy-cell[b-v0mkrsi5f7] {
    display: flex;
    align-items: center;
    gap: .375rem;
    min-width: 0;
}

.smp-privacy-text[b-v0mkrsi5f7] {
    font-size: .76rem;
    color: #37474F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.smp-masked[b-v0mkrsi5f7] {
    color: #B0BEC5;
    font-family: monospace;
    letter-spacing: .1em;
}

.smp-eye-btn[b-v0mkrsi5f7] {
    flex-shrink: 0;
    width: 20px; height: 20px;
    border-radius: .25rem;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #78909C;
    font-size: .7rem;
    cursor: pointer;
    transition: background .12s, color .12s;
    padding: 0;
}

.smp-eye-btn:hover[b-v0mkrsi5f7] { background: #ECEFF1; color: #2E7D32; }


/* ── BOTONES DE ACCIÓN ─────────────────────────────────────── */

.smp-actions-cell[b-v0mkrsi5f7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
}

.smp-action-btn[b-v0mkrsi5f7] {
    width: 28px; height: 28px;
    border-radius: .375rem;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    cursor: pointer;
    transition: background .12s;
    padding: 0;
    flex-shrink: 0;
}

.smp-btn-edit[b-v0mkrsi5f7]       { background: #E3F2FD; color: #1565C0; }
.smp-btn-edit:hover[b-v0mkrsi5f7] { background: #BBDEFB; }

.smp-btn-migrate[b-v0mkrsi5f7]       { background: #EDE7F6; color: #5E35B1; }
.smp-btn-migrate:hover[b-v0mkrsi5f7] { background: #D1C4E9; }

.smp-btn-deactivate[b-v0mkrsi5f7]       { background: #FFEBEE; color: #D32F2F; }
.smp-btn-deactivate:hover[b-v0mkrsi5f7] { background: #FFCDD2; }

.smp-btn-activate[b-v0mkrsi5f7]       { background: #E8F5E9; color: #2E7D32; }
.smp-btn-activate:hover[b-v0mkrsi5f7] { background: #C8E6C9; }

.smp-btn-nombres[b-v0mkrsi5f7]       { background: #FFF8E1; color: #F57F17; }
.smp-btn-nombres:hover[b-v0mkrsi5f7] { background: #FFECB3; }


/* ── LEYENDA ───────────────────────────────────────────────── */

.smp-legend[b-v0mkrsi5f7] {
    background: #ffffff;
    border: 1px solid #F0F0F0;
    border-radius: .75rem;
    padding: .875rem 1.25rem;
    margin-top: 1rem;
}

.smp-legend-title[b-v0mkrsi5f7] {
    color: #78909C;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 .625rem;
}

.smp-legend-items[b-v0mkrsi5f7] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
}

.smp-legend-item[b-v0mkrsi5f7] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .76rem;
}

.smp-legend-icon[b-v0mkrsi5f7] {
    width: 20px; height: 20px;
    border-radius: .25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    flex-shrink: 0;
}

.smp-icon-edit[b-v0mkrsi5f7]       { background: #E3F2FD; color: #1565C0; }
.smp-icon-nombres[b-v0mkrsi5f7]    { background: #FFF8E1; color: #F57F17; }
.smp-icon-migrate[b-v0mkrsi5f7]    { background: #EDE7F6; color: #5E35B1; }
.smp-icon-deactivate[b-v0mkrsi5f7] { background: #FFEBEE; color: #D32F2F; }
.smp-icon-activate[b-v0mkrsi5f7]   { background: #E8F5E9; color: #2E7D32; }

.smp-legend-text[b-v0mkrsi5f7] { color: #78909C; }


/* ── MODAL — BACKDROP ──────────────────────────────────────── */

.smp-backdrop[b-v0mkrsi5f7] {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0,0,0,.45);
    animation: smpFadeIn-b-v0mkrsi5f7 .2s ease both;
}


/* ── MODAL — TARJETA ───────────────────────────────────────── */

.smp-modal[b-v0mkrsi5f7] {
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.20);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: smpSlideIn-b-v0mkrsi5f7 .25s ease-out both;
}

.smp-modal-sm[b-v0mkrsi5f7] { max-width: 480px; }

@keyframes smpSlideIn-b-v0mkrsi5f7 {
    from { opacity: 0; transform: translateY(20px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

.smp-modal-accent-bar[b-v0mkrsi5f7] {
    height: 4px;
    background: linear-gradient(90deg, #2E7D32, #43A047);
    flex-shrink: 0;
}


/* ── MODAL — ENCABEZADO ────────────────────────────────────── */

.smp-modal-header[b-v0mkrsi5f7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1.5rem;
    border-bottom: 1px solid #F0F0F0;
    flex-shrink: 0;
}

.smp-modal-header-left[b-v0mkrsi5f7] {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.smp-modal-icon[b-v0mkrsi5f7] {
    width: 40px; height: 40px;
    border-radius: .625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.smp-icon-create-mode[b-v0mkrsi5f7] { background: #E8F5E9; color: #2E7D32; }
.smp-icon-edit-mode[b-v0mkrsi5f7]   { background: #E3F2FD; color: #1565C0; }
.smp-icon-migrate-mode[b-v0mkrsi5f7]{ background: #EDE7F6; color: #5E35B1; }

.smp-modal-title[b-v0mkrsi5f7] {
    color: #263238;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 .15rem;
}

.smp-modal-subtitle[b-v0mkrsi5f7] {
    color: #78909C;
    font-size: .75rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 340px;
}

.smp-modal-close[b-v0mkrsi5f7] {
    width: 2.25rem; height: 2.25rem;
    border-radius: .5rem;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #78909C;
    font-size: 1rem;
    cursor: pointer;
    transition: background .15s, color .15s;
    padding: 0;
    flex-shrink: 0;
}

.smp-modal-close:hover[b-v0mkrsi5f7] { background: #ECEFF1; color: #263238; }


/* ── MODAL — CUERPO ────────────────────────────────────────── */

.smp-modal-body[b-v0mkrsi5f7] {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.smp-form-grid[b-v0mkrsi5f7] {
    display: grid;
    gap: 1rem;
}

.smp-grid-2[b-v0mkrsi5f7] { grid-template-columns: 1fr 1fr; }
.smp-grid-3[b-v0mkrsi5f7] { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 520px) {
    .smp-grid-2[b-v0mkrsi5f7],
    .smp-grid-3[b-v0mkrsi5f7] { grid-template-columns: 1fr; }
}

.smp-field[b-v0mkrsi5f7] {
    display: flex;
    flex-direction: column;
}

.smp-field-label[b-v0mkrsi5f7] {
    color: #455A64;
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: .5rem;
    letter-spacing: .02em;
}

.smp-required[b-v0mkrsi5f7] { color: #D32F2F; margin-left: 2px; }

.smp-input[b-v0mkrsi5f7] {
    width: 100%;
    height: 42px;
    padding: 0 .875rem;
    border: 1.5px solid #D5D5D5;
    border-radius: .5rem;
    background: #ffffff;
    color: #263238;
    font-size: .88rem;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
}

.smp-input:focus[b-v0mkrsi5f7] {
    border-color: #2E7D32;
    box-shadow: 0 0 0 3px rgba(46,125,50,.14);
}

.smp-input[b-v0mkrsi5f7]::placeholder { color: #9E9E9E; }

.smp-input-mono[b-v0mkrsi5f7] { font-family: monospace; }

.smp-input-error[b-v0mkrsi5f7] {
    border-color: #D32F2F !important;
    box-shadow: none !important;
}

.smp-error-msg[b-v0mkrsi5f7] {
    color: #D32F2F;
    font-size: .72rem;
    margin-top: 3px;
}

.smp-field-hint[b-v0mkrsi5f7] {
    color: #9E9E9E;
    font-size: .7rem;
    margin-top: 3px;
}

.smp-readonly-field[b-v0mkrsi5f7] {
    padding: .625rem .875rem;
    background: #ECEFF1;
    border-radius: .5rem;
    color: #78909C;
    font-size: .85rem;
    font-weight: 500;
}


/* ── MODAL — ADVERTENCIA (migrar) ──────────────────────────── */

.smp-warning-box[b-v0mkrsi5f7] {
    display: flex;
    gap: .875rem;
    padding: 1rem;
    background: #FFF8E1;
    border: 1px solid #FFE082;
    border-radius: .75rem;
}

.smp-warning-icon[b-v0mkrsi5f7] { color: #F57F17; font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }

.smp-warning-title[b-v0mkrsi5f7] {
    color: #E65100;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 .25rem;
}

.smp-warning-body[b-v0mkrsi5f7] {
    color: #BF360C;
    font-size: .78rem;
    line-height: 1.5;
    margin: 0;
}


/* ── MODAL — PIE ───────────────────────────────────────────── */

.smp-modal-footer[b-v0mkrsi5f7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .875rem 1.5rem;
    border-top: 1px solid #F0F0F0;
    background: #FAFAFA;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: .5rem;
}

.smp-required-note[b-v0mkrsi5f7] {
    color: #9E9E9E;
    font-size: .75rem;
    margin: 0;
}

.smp-modal-actions[b-v0mkrsi5f7] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
}

.smp-btn-cancel[b-v0mkrsi5f7] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .625rem 1.25rem;
    border-radius: .5rem;
    border: 1.5px solid #D5D5D5;
    background: #F5F5F5;
    color: #78909C;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    font-family: inherit;
}

.smp-btn-cancel:hover[b-v0mkrsi5f7] { background: #EEEEEE; border-color: #BDBDBD; }

.smp-btn-submit[b-v0mkrsi5f7] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .625rem 1.25rem;
    border-radius: .5rem;
    border: none;
    background: #2E7D32;
    color: #ffffff;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
    box-shadow: 0 2px 6px rgba(46,125,50,.25);
}

.smp-btn-submit:hover[b-v0mkrsi5f7] { background: #256427; }

.smp-btn-migrate-confirm[b-v0mkrsi5f7] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .625rem 1.25rem;
    border-radius: .5rem;
    border: none;
    background: #5E35B1;
    color: #ffffff;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
}

.smp-btn-migrate-confirm:hover:not(:disabled)[b-v0mkrsi5f7] { background: #4527A0; }

.smp-btn-migrate-confirm:disabled[b-v0mkrsi5f7] {
    background: #B39DDB;
    cursor: not-allowed;
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE / DESKTOP VISIBILITY
   ════════════════════════════════════════════════════════════ */

/* Visible solo en escritorio (≥ 640 px) */
.smp-desktop-only[b-v0mkrsi5f7] { display: none; }

/* Visible solo en mobile (< 640 px) */
.smp-mobile-only[b-v0mkrsi5f7]  { display: flex; }

@media (min-width: 640px) {
    .smp-desktop-only[b-v0mkrsi5f7] { display: flex;  }
    .smp-mobile-only[b-v0mkrsi5f7]  { display: none;  }
}

/* Texto del botón "Nuevo" en mobile muy estrecho */
.smp-btn-new-label[b-v0mkrsi5f7] { display: inline; }


/* ── SEGUNDA FILA DEL FILTRO ───────────────────────────────── */

.smp-filters-row2[b-v0mkrsi5f7] {
    margin-top: .625rem;
}


/* ── TABLA: oculta en mobile, visible en escritorio ─────────── */

.smp-desktop-table[b-v0mkrsi5f7] { display: none; }

@media (min-width: 640px) {
    .smp-desktop-table[b-v0mkrsi5f7] { display: block; }
}


/* ════════════════════════════════════════════════════════════
   TARJETAS MOBILE
   ════════════════════════════════════════════════════════════ */

/* Contenedor de tarjetas — visible solo en mobile */
.smp-cards-list[b-v0mkrsi5f7] { display: flex; flex-direction: column; gap: .75rem; }

@media (min-width: 640px) {
    .smp-cards-list[b-v0mkrsi5f7] { display: none; }
}

/* Tarjeta individual */
.smp-scout-card[b-v0mkrsi5f7] {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: .75rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    overflow: hidden;
    transition: opacity .15s;
}

.smp-card-inactive[b-v0mkrsi5f7] { opacity: .8; }

/* Encabezado de tarjeta */
.smp-card-header[b-v0mkrsi5f7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    padding: .875rem 1rem .625rem;
}

.smp-card-header-left[b-v0mkrsi5f7] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.smp-card-name[b-v0mkrsi5f7] {
    color: #263238;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.25;
}

.smp-card-dni[b-v0mkrsi5f7] {
    color: #78909C;
    font-size: .74rem;
    font-family: monospace;
    margin-top: 2px;
}

/* Badge de estado */
.smp-status-badge[b-v0mkrsi5f7] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: 9999px;
    font-size: .7rem;
    font-weight: 700;
    flex-shrink: 0;
    white-space: nowrap;
}

.smp-badge-on[b-v0mkrsi5f7]  { background: #E8F5E9; color: #2E7D32; border: 1px solid #A5D6A7; }
.smp-badge-off[b-v0mkrsi5f7] { background: #FFEBEE; color: #D32F2F; border: 1px solid #FFCDD2; }

.smp-status-dot[b-v0mkrsi5f7] {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Pill de unidad dentro de la tarjeta */
.smp-card-unit-row[b-v0mkrsi5f7] {
    padding: 0 1rem .75rem;
}

/* Grilla de datos (Natalicio / Sexo / ID) */
.smp-card-grid[b-v0mkrsi5f7] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    margin: 0 1rem .75rem;
    border-radius: .5rem;
    overflow: hidden;
    background: #F0F0F0;
}

.smp-card-grid-cell[b-v0mkrsi5f7] {
    padding: .5rem .625rem;
    background: #FAFCFA;
    display: flex;
    flex-direction: column;
}

.smp-card-grid-label[b-v0mkrsi5f7] {
    color: #78909C;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.smp-card-grid-value[b-v0mkrsi5f7] {
    color: #37474F;
    font-size: .76rem;
    font-weight: 500;
    margin-top: 2px;
}

/* Sección de datos sensibles */
.smp-card-privacy[b-v0mkrsi5f7] {
    padding: 0 1rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.smp-card-privacy-title[b-v0mkrsi5f7] {
    color: #E65100;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0 0 .2rem;
}

.smp-card-privacy-row[b-v0mkrsi5f7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.smp-card-privacy-label[b-v0mkrsi5f7] {
    color: #78909C;
    font-size: .74rem;
    font-weight: 600;
    flex-shrink: 0;
    min-width: 62px;
}

/* Barra de acciones de la tarjeta */
.smp-card-actions[b-v0mkrsi5f7] {
    display: flex;
    gap: .375rem;
    padding: .625rem 1rem;
    border-top: 1px solid #F0F0F0;
    background: #FAFAFA;
}

.smp-card-action-btn[b-v0mkrsi5f7] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .5rem .375rem;
    border-radius: .5rem;
    border: none;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s;
}

.smp-card-action-btn i[b-v0mkrsi5f7] { font-size: .7rem; }

.smp-card-edit[b-v0mkrsi5f7]       { background: #E3F2FD; color: #1565C0; }
.smp-card-edit:hover[b-v0mkrsi5f7] { background: #BBDEFB; }

.smp-card-nombres[b-v0mkrsi5f7]       { background: #FFF8E1; color: #F57F17; }
.smp-card-nombres:hover[b-v0mkrsi5f7] { background: #FFECB3; }

.smp-card-migrate[b-v0mkrsi5f7]       { background: #EDE7F6; color: #5E35B1; }
.smp-card-migrate:hover[b-v0mkrsi5f7] { background: #D1C4E9; }

.smp-card-deactivate[b-v0mkrsi5f7]       { background: #FFEBEE; color: #D32F2F; }
.smp-card-deactivate:hover[b-v0mkrsi5f7] { background: #FFCDD2; }

.smp-card-activate[b-v0mkrsi5f7]       { background: #E8F5E9; color: #2E7D32; }
.smp-card-activate:hover[b-v0mkrsi5f7] { background: #C8E6C9; }

/* ── ESTADO VACÍO (desktop + mobile) ─────────────────────── */
.smp-empty-state[b-v0mkrsi5f7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.smp-empty-icon[b-v0mkrsi5f7] {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 1.25rem;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.20));
    opacity: 0.35;
}

.smp-empty-title[b-v0mkrsi5f7] {
    color: #263238;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    letter-spacing: -.01em;
}

.smp-empty-text[b-v0mkrsi5f7] {
    color: #78909C;
    font-size: .875rem;
    margin: 0;
    max-width: 320px;
}

/* Pie de tarjetas: contador + botón cargar más */
.smp-cards-footer[b-v0mkrsi5f7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .625rem;
    padding: .5rem 0 .25rem;
}

.smp-cards-count[b-v0mkrsi5f7] {
    color: #78909C;
    font-size: .75rem;
    font-weight: 500;
}

.smp-cards-load-more[b-v0mkrsi5f7] {
    width: 100%;
    padding: .75rem 1rem;
    border-radius: .75rem;
    border: 1.5px solid #2E7D32;
    background: #FFFFFF;
    color: #2E7D32;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s;
}

.smp-cards-load-more:hover[b-v0mkrsi5f7] { background: #F1F8E9; }


/* ════════════════════════════════════════════════════════════
   MODALES — BOTTOM-SHEET EN MOBILE
   ════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {
    .smp-backdrop[b-v0mkrsi5f7] {
        align-items: flex-end;
        padding: 0;
    }

    .smp-modal[b-v0mkrsi5f7] {
        border-radius: 1.25rem 1.25rem 0 0;
        max-height: 88vh;
        max-width: 100%;
    }

    .smp-modal-sm[b-v0mkrsi5f7] {
        max-width: 100%;
    }

    /* Pie del modal: botones apilados en mobile */
    .smp-modal-actions[b-v0mkrsi5f7] {
        flex-direction: column-reverse;
        width: 100%;
        margin-left: 0;
    }

    .smp-btn-cancel[b-v0mkrsi5f7],
    .smp-btn-submit[b-v0mkrsi5f7],
    .smp-btn-migrate-confirm[b-v0mkrsi5f7] {
        width: 100%;
        justify-content: center;
        padding-top: .75rem;
        padding-bottom: .75rem;
    }
}


/* ════════════════════════════════════════════════════════════
   LEYENDA — items full-width en mobile
   ════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {
    .smp-legend-item[b-v0mkrsi5f7] {
        width: 100%;
    }
}


/* ════════════════════════════════════════════════════════════
   MODAL HISTORIAL DE NOMBRES
   ════════════════════════════════════════════════════════════ */

.smp-modal-nombres[b-v0mkrsi5f7] { max-width: 640px; }

.smp-accent-nombres[b-v0mkrsi5f7] { background: #F57F17; }

.smp-icon-nombres-mode[b-v0mkrsi5f7] { background: #FFF8E1; color: #F57F17; }

/* ── Sección agregar nombre (fondo gris claro, con borde inferior) ── */
.smp-nombres-add-section[b-v0mkrsi5f7] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #F0F0F0;
    background: #FAFAFA;
    flex-shrink: 0;
}

.smp-nombres-section-label[b-v0mkrsi5f7] {
    color: #78909C;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0 0 .75rem;
}

/* Fila 2: nombre + fecha + botón */
.smp-nombres-row2[b-v0mkrsi5f7] {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .75rem;
}

.smp-nombres-field-nombre[b-v0mkrsi5f7] { flex: 1 1 160px; min-width: 120px; }
.smp-nombres-field-fecha[b-v0mkrsi5f7]  { flex: 0 0 140px; }

/* Botón Guardar en el formulario */
.smp-nombres-add-btn[b-v0mkrsi5f7] {
    flex-shrink: 0;
    padding: .5rem 1.125rem;
    border-radius: .5rem;
    border: none;
    background: #2E7D32;
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
    margin-bottom: 1px;
}

.smp-nombres-add-btn:hover:not(:disabled)[b-v0mkrsi5f7] { background: #256427; }

.smp-nombres-add-btn-disabled[b-v0mkrsi5f7],
.smp-nombres-add-btn:disabled[b-v0mkrsi5f7] {
    background: #A5D6A7;
    cursor: not-allowed;
}

/* ── Sección listado (scrollable) ─────────────────────────── */
.smp-nombres-list-section[b-v0mkrsi5f7] {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    max-height: 320px;
    display: flex;
    flex-direction: column;
}

.smp-nombres-list-label[b-v0mkrsi5f7] {
    padding: .875rem 1.5rem .375rem;
    margin: 0;
}

.smp-nombres-loading[b-v0mkrsi5f7],
.smp-nombres-empty[b-v0mkrsi5f7] {
    color: #78909C;
    font-size: .85rem;
    padding: 1.25rem 1.5rem;
}

/* ── Tabla de nombres ─────────────────────────────────────── */
.smp-nombres-table[b-v0mkrsi5f7] {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem;
}

.smp-nombres-thead-row[b-v0mkrsi5f7] { background: #FAFAFA; }

.smp-nombres-th[b-v0mkrsi5f7] {
    text-align: left;
    padding: .5rem 1rem;
    color: #78909C;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid #F0F0F0;
}

.smp-nombres-tr-even[b-v0mkrsi5f7] { background: #FFFFFF; }
.smp-nombres-tr-odd[b-v0mkrsi5f7]  { background: #F7F8F7; }

.smp-nombres-td[b-v0mkrsi5f7] {
    padding: .5rem 1rem;
    color: #546E7A;
}

.smp-nombres-td-tipo[b-v0mkrsi5f7]  { font-weight: 600; color: #263238; }
.smp-nombres-td-fecha[b-v0mkrsi5f7] { color: #78909C; }
.smp-nombres-td-del[b-v0mkrsi5f7]   { width: 40px; text-align: center; }

/* Botón eliminar en tabla */
.smp-nombres-del-btn[b-v0mkrsi5f7] {
    width: 28px;
    height: 28px;
    border-radius: .375rem;
    border: none;
    background: transparent;
    color: #D32F2F;
    font-size: .74rem;
    cursor: pointer;
    transition: background .12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.smp-nombres-del-btn:hover[b-v0mkrsi5f7] { background: #FFEBEE; }

/* ── Pie del modal: botón Cerrar full-width en mobile ─────── */
.smp-nombres-footer .smp-modal-actions[b-v0mkrsi5f7] { width: 100%; }
.smp-nombres-footer .smp-btn-submit[b-v0mkrsi5f7]    { flex: 1; justify-content: center; }

@media (min-width: 576px) {
    .smp-nombres-footer .smp-modal-actions[b-v0mkrsi5f7] { width: auto; }
    .smp-nombres-footer .smp-btn-submit[b-v0mkrsi5f7]    { flex: none; }
}
/* /Pages/Configuracion/Seguro.razor.rz.scp.css */
/*
    Seguro.razor.css — Estilos de la página de seguro del grupo
    ============================================================
    Prefijo: seg-
    Máximo ancho de contenido: 1100px

    Dos zonas:
      · Hero (admin-hero simplificado, con fondo sólido var(--primary))
      · Cuerpo (tarjetas que contienen info, filtros y tabla)
*/

/* ═══════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════════ */

.seg-hero[b-o44hk35yyp] {
    background: linear-gradient(135deg, var(--primary-dark, #1B5E20) 0%, var(--primary, #2E7D32) 100%);
    padding: 2rem 1rem;
    color: white;
}

.seg-hero-content[b-o44hk35yyp] {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.seg-hero-back[b-o44hk35yyp] {
    display: inline-block;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    text-decoration: none;
    margin-bottom: 0.5rem;
    transition: color 0.15s;
}

    .seg-hero-back:hover[b-o44hk35yyp] {
        color: white;
    }

.seg-hero-title[b-o44hk35yyp] {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin: 0;
    font-family: 'Inter', sans-serif;
    color: white !important;
}

.seg-hero-subtitle[b-o44hk35yyp] {
    margin: 0.3rem 0 0;
    font-size: 0.95rem;
    opacity: 0.85;
    color: white;
}

.seg-hero-badge[b-o44hk35yyp] {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2rem;
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
    white-space: nowrap;
    color: white;
}

/* ═══════════════════════════════════════════════════════════════
   CUERPO
═══════════════════════════════════════════════════════════════ */

.seg-page[b-o44hk35yyp] {
    background: var(--surface);
    min-height: calc(100vh - 140px);
    padding: 2rem 1rem;
}

.seg-outer[b-o44hk35yyp] {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   BARRA DE ACCIÓN SUPERIOR
═══════════════════════════════════════════════════════════════ */

.seg-action-bar[b-o44hk35yyp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════
   BOTONES
═══════════════════════════════════════════════════════════════ */

.seg-btn[b-o44hk35yyp] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
    white-space: nowrap;
}

    .seg-btn:disabled[b-o44hk35yyp],
    .seg-btn.seg-btn-loading[b-o44hk35yyp] {
        opacity: 0.65;
        cursor: not-allowed;
    }

.seg-btn-ghost[b-o44hk35yyp] {
    background: transparent;
    border-color: var(--border);
    color: var(--text-primary);
}

    .seg-btn-ghost:hover[b-o44hk35yyp] {
        background: var(--hover-bg, rgba(0,0,0,0.05));
    }

.seg-btn-edit[b-o44hk35yyp] {
    background: transparent;
    border-color: var(--color-primary, #2E7D32);
    color: var(--color-primary, #2E7D32);
}

    .seg-btn-edit:hover[b-o44hk35yyp] {
        background: var(--color-primary, #2E7D32);
        color: white;
    }

.seg-btn-save[b-o44hk35yyp] {
    background: var(--color-primary, #2E7D32);
    color: white;
}

    .seg-btn-save:hover:not(:disabled)[b-o44hk35yyp] {
        background: var(--color-primary-dark, #1B5E20);
        opacity: 0.9;
    }

.seg-btn-excel[b-o44hk35yyp] {
    background: #1D6F42;
    color: white;
    border-color: #1D6F42;
}

    .seg-btn-excel:hover:not(:disabled)[b-o44hk35yyp] {
        background: #155534;
    }

.seg-btn-acomp[b-o44hk35yyp] {
    background: var(--accent, #F57C00);
    color: white;
}

    .seg-btn-acomp:hover[b-o44hk35yyp] {
        opacity: 0.85;
    }

.seg-btn-remove[b-o44hk35yyp] {
    background: transparent;
    border: none;
    color: var(--danger, #e53935);
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    transition: color 0.15s;
}

    .seg-btn-remove:hover[b-o44hk35yyp] {
        color: #b71c1c;
    }

/* ═══════════════════════════════════════════════════════════════
   TARJETAS
═══════════════════════════════════════════════════════════════ */

.seg-card[b-o44hk35yyp] {
    background: var(--card-bg, white);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
    border: 1px solid var(--border, #e0e0e0);
}

.seg-card-header[b-o44hk35yyp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.seg-card-title[b-o44hk35yyp] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   TARJETA INFO DEL SEGURO
═══════════════════════════════════════════════════════════════ */

.seg-info-actions[b-o44hk35yyp] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.seg-loading-info[b-o44hk35yyp] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 1rem 0;
}

.seg-info-grid[b-o44hk35yyp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.seg-info-col[b-o44hk35yyp] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.seg-info-col-title[b-o44hk35yyp] {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border, #e0e0e0);
}

.seg-info-col-title--mt[b-o44hk35yyp] {
    margin-top: 0.5rem;
}

.seg-info-field[b-o44hk35yyp] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.seg-field-label[b-o44hk35yyp] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.seg-field-value[b-o44hk35yyp] {
    font-size: 0.9rem;
    color: var(--text-primary);
    min-height: 1.5rem;
}

.seg-field-input[b-o44hk35yyp] {
    font-size: 0.875rem;
    padding: 0.375rem 0.65rem;
    border: 1px solid var(--border, #ccc);
    border-radius: 0.375rem;
    background: var(--input-bg, white);
    color: var(--text-primary);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s;
    font-family: 'Inter', sans-serif;
}

    .seg-field-input:focus[b-o44hk35yyp] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
    }

/* ═══════════════════════════════════════════════════════════════
   TARJETA FILTROS
═══════════════════════════════════════════════════════════════ */

.seg-filters-card[b-o44hk35yyp] {
    padding: 1rem 1.5rem;
}

.seg-filters-row[b-o44hk35yyp] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.seg-filters-select-wrap[b-o44hk35yyp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.seg-filters-label[b-o44hk35yyp] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.seg-filters-select[b-o44hk35yyp] {
    font-size: 0.875rem;
    padding: 0.4rem 2rem 0.4rem 0.75rem;
    border: 1px solid var(--border, #ccc);
    border-radius: 0.375rem;
    background-color: var(--input-bg, white);
    color: var(--text-primary);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    min-width: 180px;
    transition: border-color 0.15s;
}

    .seg-filters-select:focus[b-o44hk35yyp] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
    }

.seg-filters-summary[b-o44hk35yyp] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════
   BADGES
═══════════════════════════════════════════════════════════════ */

.seg-badge[b-o44hk35yyp] {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 2rem;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.seg-summary-badge[b-o44hk35yyp] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border-radius: 2rem;
    font-size: 0.78rem;
    font-weight: 500;
}

.seg-badge-scout[b-o44hk35yyp],
.seg-summary-badge.seg-badge-scout[b-o44hk35yyp] {
    background: #e8f5e9;
    color: #2E7D32;
}

.seg-badge-dirigente[b-o44hk35yyp],
.seg-summary-badge.seg-badge-dirigente[b-o44hk35yyp] {
    background: #e3f2fd;
    color: #1565C0;
}

.seg-badge-extra[b-o44hk35yyp],
.seg-summary-badge.seg-badge-extra[b-o44hk35yyp] {
    background: #fff3e0;
    color: #E65100;
}

/* ═══════════════════════════════════════════════════════════════
   TARJETA TABLA
═══════════════════════════════════════════════════════════════ */

.seg-table-header[b-o44hk35yyp] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.seg-table-title[b-o44hk35yyp] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.seg-table-subtitle[b-o44hk35yyp] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0.2rem 0 0;
}

.seg-loading-table[b-o44hk35yyp] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 2rem 0;
    text-align: center;
}

.seg-empty[b-o44hk35yyp] {
    text-align: center;
    padding: 3rem 0;
    color: var(--text-secondary);
}

    .seg-empty i[b-o44hk35yyp] {
        font-size: 2.5rem;
        display: block;
        margin-bottom: 0.75rem;
        opacity: 0.4;
    }

    .seg-empty p[b-o44hk35yyp] {
        margin: 0;
        font-size: 0.9rem;
    }

.seg-table-scroll[b-o44hk35yyp] {
    overflow-x: auto;
}

.seg-table[b-o44hk35yyp] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.seg-th[b-o44hk35yyp] {
    padding: 0.65rem 0.75rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: white;
    white-space: nowrap;
}

.seg-th-num[b-o44hk35yyp] {
    width: 3rem;
    text-align: center;
}

.seg-th-action[b-o44hk35yyp] {
    width: 2.5rem;
}

.seg-tr[b-o44hk35yyp] {
    border-bottom: 1px solid var(--border, #e0e0e0);
    transition: background 0.1s;
}

    .seg-tr:hover[b-o44hk35yyp] {
        background: var(--hover-bg, rgba(0,0,0,0.03));
    }

.seg-tr-par[b-o44hk35yyp] {
    background: var(--card-bg, white);
}

.seg-tr-impar[b-o44hk35yyp] {
    background: var(--surface, #f9f9f9);
}

.seg-td[b-o44hk35yyp] {
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
}

.seg-td-num[b-o44hk35yyp] {
    text-align: center;
    color: var(--text-secondary);
    font-weight: 500;
}

.seg-td-nombre[b-o44hk35yyp] {
    font-weight: 500;
    color: var(--text-primary);
}

.seg-td-action[b-o44hk35yyp] {
    text-align: center;
}

.seg-tfoot[b-o44hk35yyp] {
    background: var(--surface);
}

.seg-tfoot-td[b-o44hk35yyp] {
    padding: 0.6rem 0.75rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   MODAL BUSCADOR DE ACOMPAÑANTES
═══════════════════════════════════════════════════════════════ */

.seg-modal-overlay[b-o44hk35yyp] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.seg-modal[b-o44hk35yyp] {
    background: var(--card-bg, white);
    border-radius: 0.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    width: 100%;
    max-width: 440px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.seg-modal-header[b-o44hk35yyp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border, #e0e0e0);
}

.seg-modal-title[b-o44hk35yyp] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.seg-modal-close[b-o44hk35yyp] {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

    .seg-modal-close:hover[b-o44hk35yyp] {
        background: var(--hover-bg, rgba(0,0,0,0.06));
    }

.seg-modal-desc[b-o44hk35yyp] {
    padding: 0.75rem 1.25rem 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

.seg-modal-search[b-o44hk35yyp] {
    position: relative;
    padding: 0.75rem 1.25rem;
}

.seg-modal-search-icon[b-o44hk35yyp] {
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.seg-modal-input[b-o44hk35yyp] {
    width: 100%;
    padding: 0.45rem 0.75rem 0.45rem 2rem;
    border: 1px solid var(--border, #ccc);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    background: var(--input-bg, white);
}

    .seg-modal-input:focus[b-o44hk35yyp] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
    }

.seg-modal-results[b-o44hk35yyp] {
    overflow-y: auto;
    flex: 1;
    border-top: 1px solid var(--border, #e0e0e0);
}

.seg-modal-result[b-o44hk35yyp] {
    padding: 0.65rem 1.25rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    transition: background 0.1s;
}

    .seg-modal-result:hover[b-o44hk35yyp] {
        background: var(--hover-bg, rgba(0,0,0,0.04));
    }

.seg-modal-unidad[b-o44hk35yyp] {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.seg-modal-empty[b-o44hk35yyp] {
    padding: 1.5rem 1.25rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: center;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   NOTA INFORMATIVA
═══════════════════════════════════════════════════════════════ */

.seg-nota[b-o44hk35yyp] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    background: var(--card-bg, white);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    align-items: flex-start;
}

.seg-nota-icon[b-o44hk35yyp] {
    color: var(--primary);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */

@media (min-width: 640px) {
    .seg-page[b-o44hk35yyp] {
        padding: 2.5rem 1.5rem;
    }
}

@media (min-width: 1024px) {
    .seg-page[b-o44hk35yyp] {
        padding: 3rem 2rem;
    }
}

/* En mobile: info-grid colapsa a una columna */
@media (max-width: 640px) {
    .seg-info-grid[b-o44hk35yyp] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .seg-hero-content[b-o44hk35yyp] {
        flex-direction: column;
        align-items: flex-start;
    }

    .seg-action-bar[b-o44hk35yyp] {
        flex-direction: column;
        align-items: stretch;
    }

    .seg-btn[b-o44hk35yyp] {
        justify-content: center;
    }

    /* Oculto la columna de volver en mobile (ya está en la action bar) */
    .seg-hero-back[b-o44hk35yyp] {
        display: none;
    }
}
/* /Pages/Configuracion/Usuarios/Panel.razor.rz.scp.css */
/*
 * Panel.razor.css — Panel de gestión de usuarios
 * Prefijo: ump- (User Management Page)
 *
 * Paleta:
 *   Fondo de página   #F5F5F5
 *   Superficie card   #FFFFFF
 *   Encabezado        #FAFAFA
 *   Título            #263238
 *   Cuerpo            #37474F
 *   Secundario        #78909C
 *   Borde             #E0E0E0
 *   Borde suave       #F0F0F0
 *   Tabs              #ECEFF1
 *   Overlay           rgba(0,0,0,0.45)
 *
 *   Scout         #E8F5E9 / #2E7D32 / borde #A5D6A7
 *   Dirigente     #E3F2FD / #1565C0 / borde #90CAF9
 *   Hormiga       #FFF8E1 / #F57F17 / borde #FFE082
 *   Administrador #FFEBEE / #C62828 / borde #EF9A9A
 */


/* PÁGINA */

.ump-page[b-pjjls12m0c] {
    min-height: 100vh;
    background-color: #F5F5F5;
    animation: umpFadeIn-b-pjjls12m0c .4s ease both;
}

/* Ancho máximo centrado con padding lateral y espaciado inferior */
.ump-outer[b-pjjls12m0c] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

@media (min-width: 640px) {
    .ump-outer[b-pjjls12m0c] { padding: 1.5rem 1.5rem 4rem; }
}

/* Entrada suave de la página completa */
@keyframes umpFadeIn-b-pjjls12m0c {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0);    }
}


/* BOTÓN VOLVER */

/* Sin !important: no hay regla global de enlaces que interfiera aquí */
.ump-btn-back[b-pjjls12m0c] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    color: #78909C;
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s;
    margin-bottom: 1rem;
}

.ump-btn-back:hover[b-pjjls12m0c] {
    background-color: #ffffff;
    color: #37474F;
}


/* ENCABEZADO */

.ump-page-header[b-pjjls12m0c] { margin-bottom: 2rem; }

/* Título en Bitter serif con tamaño fluido entre 1.6rem y 2rem */
.ump-page-title[b-pjjls12m0c] {
    font-family: 'Bitter', Georgia, serif;
    font-size: clamp(1.6rem, 3.5vw, 2rem);
    font-weight: 700;
    color: #263238;
    margin: 0 0 .25rem;
    line-height: 1.2;
}

.ump-page-subtitle[b-pjjls12m0c] {
    color: #78909C;
    font-size: .9rem;
    margin: 0;
}


/* TOOLBAR: TABS + BUSCADOR */

/* Fila apilada en móvil, horizontal en sm+ */
.ump-toolbar[b-pjjls12m0c] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
    .ump-toolbar[b-pjjls12m0c] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* Contenedor de pestañas sobre fondo gris claro */
.ump-tabs-bar[b-pjjls12m0c] {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    padding: .25rem;
    background-color: #ECEFF1;
    border-radius: .75rem;
}

/* Base de cada pestaña */
.ump-tab[b-pjjls12m0c] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem .875rem;
    border-radius: .5rem;
    border: none;
    background: transparent;
    color: #78909C;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s, color .2s, box-shadow .2s;
    white-space: nowrap;
}

/* Pestaña activa: fondo blanco, sombra leve */
.ump-tab-active[b-pjjls12m0c] {
    background-color: #ffffff;
    color: #263238;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* Píldora numérica base: gris neutro */
.ump-tab-pill[b-pjjls12m0c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 9999px;
    font-size: .7rem;
    font-weight: 700;
    background: rgba(120,144,156,.15);
    color: #78909C;
    transition: background .15s, color .15s;
}

/* Píldora coloreada cuando su tab está activo */
.ump-pill-on.ump-pill-scout[b-pjjls12m0c]         { background: #E8F5E9; color: #2E7D32; }
.ump-pill-on.ump-pill-dirigente[b-pjjls12m0c]     { background: #E3F2FD; color: #1565C0; }
.ump-pill-on.ump-pill-hormiga[b-pjjls12m0c]       { background: #FFF8E1; color: #F57F17; }
.ump-pill-on.ump-pill-administrador[b-pjjls12m0c] { background: #FFEBEE; color: #C62828; }


/* BUSCADOR */

/* Wrapper relativo para superponer el ícono de lupa */
.ump-search-wrapper[b-pjjls12m0c] {
    position: relative;
    width: 100%;
}

@media (min-width: 640px) {
    .ump-search-wrapper[b-pjjls12m0c] { width: 16rem; }
}

/* Lupa sin interceptar clics del mouse */
.ump-search-icon[b-pjjls12m0c] {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #78909C;
    font-size: .875rem;
    pointer-events: none;
}

/* Input con indentación izquierda para no tapar la lupa */
.ump-search-input[b-pjjls12m0c] {
    width: 100%;
    padding: .625rem 1rem .625rem 2.25rem;
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: .5rem;
    font-size: .85rem;
    color: #37474F;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
}

.ump-search-input[b-pjjls12m0c]::placeholder { color: rgba(55,71,79,.35); }

/* Foco con anillo verde institucional */
.ump-search-input:focus[b-pjjls12m0c] {
    border-color: rgba(46,125,50,.40);
    box-shadow: 0 0 0 3px rgba(46,125,50,.14);
}


/* SPINNER DE CARGA */

.ump-loading[b-pjjls12m0c] {
    display: flex;
    justify-content: center;
    padding: 5rem 0;
}

.ump-spinner[b-pjjls12m0c] {
    color: #2E7D32;
    font-size: 2.5rem;
}


/* ESTADO VACÍO */

/* Card blanca con mensaje centrado cuando no hay usuarios */
.ump-empty[b-pjjls12m0c] {
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid #E0E0E0;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
    padding: 5rem 1.5rem;
    text-align: center;
}

/* Cuadrado redondeado con ícono de usuarios */
.ump-empty-icon-wrap[b-pjjls12m0c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: #ECEFF1;
    border-radius: .875rem;
    margin: 0 auto 1.25rem;
}

.ump-empty-title[b-pjjls12m0c] {
    color: #263238;
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 .5rem;
}

.ump-empty-sub[b-pjjls12m0c] {
    color: #78909C;
    font-size: .88rem;
    margin: 0;
    line-height: 1.5;
    max-width: 24rem;
    margin-inline: auto;
}


/* TABLA DE ESCRITORIO */

/* Card blanca que envuelve la tabla */
.ump-table-card[b-pjjls12m0c] {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
    margin-bottom: 1.25rem;
}

.ump-table[b-pjjls12m0c] {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

/* Encabezado con fondo #FAFAFA y borde inferior separador */
.ump-thead-row[b-pjjls12m0c] {
    background-color: #FAFAFA;
    border-bottom: 1px solid #E0E0E0;
}

/* Celdas de encabezado en uppercase diminuto */
.ump-th[b-pjjls12m0c] {
    padding: .875rem 1.25rem;
    text-align: left;
    color: #78909C;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    border: none;
}

/* Columna correo: oculta en móvil, visible en sm+ */
.ump-th-email[b-pjjls12m0c] { display: none; }

@media (min-width: 640px) {
    .ump-th-email[b-pjjls12m0c] { display: table-cell; width: 240px; }
}

/* Acciones alineadas a la derecha */
.ump-th-right[b-pjjls12m0c] { text-align: right; }

/* Filas con borde inferior suave y hover #FAFAFA */
.ump-tr[b-pjjls12m0c] {
    border-bottom: 1px solid #F0F0F0;
    transition: background-color .1s;
}

.ump-tr:last-child[b-pjjls12m0c] { border-bottom: none; }
.ump-tr:hover[b-pjjls12m0c]      { background-color: #FAFAFA; }

.ump-td[b-pjjls12m0c] {
    padding: 1rem 1.25rem;
    border: none;
    vertical-align: middle;
}

/* Celda de correo: oculta en móvil, visible en sm+ */
.ump-td-email[b-pjjls12m0c] { display: none; }

@media (min-width: 640px) {
    .ump-td-email[b-pjjls12m0c] { display: table-cell; }
}

/* Celda de acciones alineada a la derecha */
.ump-td-right[b-pjjls12m0c] { text-align: right; }

/* Flex para alinear avatar circular y nombre en la tabla */
.ump-user-cell[b-pjjls12m0c] {
    display: flex;
    align-items: center;
    gap: .75rem;
}

/* Avatar circular con iniciales del usuario; coloreado según el rol */
.ump-avatar[b-pjjls12m0c] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    user-select: none;
}

/* Color del avatar según el rol */
.ump-avatar-scout[b-pjjls12m0c]         { background: #E8F5E9; color: #2E7D32; border: 1.5px solid #A5D6A7; }
.ump-avatar-dirigente[b-pjjls12m0c]     { background: #E3F2FD; color: #1565C0; border: 1.5px solid #90CAF9; }
.ump-avatar-hormiga[b-pjjls12m0c]       { background: #FFF8E1; color: #F57F17; border: 1.5px solid #FFE082; }
.ump-avatar-administrador[b-pjjls12m0c] { background: #FFEBEE; color: #C62828; border: 1.5px solid #EF9A9A; }

/* Nombre del usuario en negrita y color principal */
.ump-user-name[b-pjjls12m0c] {
    color: #263238;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.4;
}

/* Texto secundario (correo, subtítulos) */
.ump-muted[b-pjjls12m0c] { color: #78909C; font-size: .85rem; }


/* BADGES DE ROL */

/* Píldora redondeada para indicar visualmente el rol del usuario */
.ump-badge[b-pjjls12m0c] {
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.ump-badge-scout[b-pjjls12m0c]         { background: #E8F5E9; color: #2E7D32; }
.ump-badge-dirigente[b-pjjls12m0c]     { background: #E3F2FD; color: #1565C0; }
.ump-badge-hormiga[b-pjjls12m0c]       { background: #FFF8E1; color: #F57F17; }
.ump-badge-administrador[b-pjjls12m0c] { background: #FFEBEE; color: #C62828; }


/* BOTÓN DE ACCIÓN (tabla desktop) */

/* Cuadrado 36×36, fondo transparente, ícono gris */
.ump-action-btn[b-pjjls12m0c] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .5rem;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #546E7A;
    cursor: pointer;
    transition: background .15s, color .15s;
    padding: 0;
}

.ump-action-btn:hover[b-pjjls12m0c] {
    background-color: #ECEFF1;
    color: #2E7D32;
}

/* Grupo de acciones alineado a la derecha */
.ump-actions[b-pjjls12m0c] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}


/* VISIBILIDAD DESKTOP / MÓVIL */

/* Tabla: oculta en móvil, visible en sm+ */
.ump-desktop-only[b-pjjls12m0c] { display: none; }

@media (min-width: 640px) {
    .ump-desktop-only[b-pjjls12m0c] { display: block; }
}

/* Tarjetas: visibles en móvil, ocultas en sm+ */
.ump-mobile-only[b-pjjls12m0c] { display: flex; }

@media (min-width: 640px) {
    .ump-mobile-only[b-pjjls12m0c] { display: none; }
}


/* TARJETAS MÓVILES */

/*
 * Estructura de cada tarjeta (igual que el React original):
 *   ┌────────────────────────────────┐
 *   │ Nombre                         │
 *   │ email@ejemplo.com (gris)       │
 *   ├────────────────────────────────┤
 *   │ [Scout badge]    [Editar btn]  │
 *   └────────────────────────────────┘
 * Sin avatar en móvil.
 */

/* Lista apilada verticalmente */
.ump-mobile-list[b-pjjls12m0c] {
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

/* Superficie blanca con borde para cada usuario */
.ump-mobile-card[b-pjjls12m0c] {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: .75rem;
    padding: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

/* Bloque superior: nombre y email apilados */
.ump-card-info[b-pjjls12m0c] {
    margin-bottom: .75rem;
}

/* Nombre del usuario: bloque en negrita */
.ump-card-name[b-pjjls12m0c] {
    display: block;
    color: #263238;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.4;
}

/* Email: bloque gris pequeño con truncate */
.ump-card-email[b-pjjls12m0c] {
    display: block;
    color: #78909C;
    font-size: .78rem;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fila inferior: badge a la izquierda, botón a la derecha */
.ump-card-footer[b-pjjls12m0c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: .75rem;
    border-top: 1px solid #F0F0F0;
}

/* Botón "Editar" en verde claro (igual que el React: #E8F5E9 / #2E7D32) */
.ump-mobile-edit-btn[b-pjjls12m0c] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .375rem .75rem;
    border-radius: .5rem;
    border: none;
    background: #E8F5E9;
    color: #2E7D32;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
}

.ump-mobile-edit-btn:hover[b-pjjls12m0c] { background: #C8E6C9; }


/* LEYENDA DE ROLES */

/* Card discreta al pie que documenta los roles del sistema */
.ump-legend[b-pjjls12m0c] {
    background: #ffffff;
    border: 1px solid #F0F0F0;
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    margin-top: 2rem;
}

.ump-legend-title[b-pjjls12m0c] {
    color: #78909C;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 .75rem;
}

/* Ítems en fila que puede envolver en pantallas angostas */
.ump-legend-items[b-pjjls12m0c] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
}

.ump-legend-item[b-pjjls12m0c] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
}

/* Punto de color circular de 12×12 px */
.ump-legend-dot[b-pjjls12m0c] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ump-dot-scout[b-pjjls12m0c]         { background-color: #2E7D32; }
.ump-dot-dirigente[b-pjjls12m0c]     { background-color: #1565C0; }
.ump-dot-hormiga[b-pjjls12m0c]       { background-color: #F57F17; }
.ump-dot-administrador[b-pjjls12m0c] { background-color: #C62828; }

.ump-legend-label[b-pjjls12m0c] { color: #263238; font-weight: 600; }
.ump-legend-desc[b-pjjls12m0c]  { color: #78909C; }


/* MODAL DE EDICIÓN */

/*
 * En móvil: el modal aparece desde el fondo de la pantalla (bottom sheet).
 *   - backdrop centra horizontal + alinea al fondo verticalmente
 *   - tarjeta con bordes redondeados solo arriba (rounded-t-2xl)
 *   - max-height: 90vh con scroll interno por si el contenido es largo
 *
 * En sm+: modal centrado clásico con rounded-2xl completo y max-width: 500px.
 */

/* Fondo oscuro semitransparente que cubre toda la pantalla */
.ump-modal-backdrop[b-pjjls12m0c] {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-end;       /* bottom sheet en móvil */
    justify-content: center;
    background: rgba(0,0,0,.45);
    animation: umpFadeIn-b-pjjls12m0c .2s ease both;
}

@media (min-width: 640px) {
    .ump-modal-backdrop[b-pjjls12m0c] {
        align-items: center;     /* centrado vertical en desktop */
        padding: 1rem;
    }
}

/* Tarjeta del modal */
.ump-modal-card[b-pjjls12m0c] {
    width: 100%;
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(0,0,0,.20);
    overflow: hidden;
    animation: umpSlideUp-b-pjjls12m0c .25s ease-out both;
    /* Bordes redondeados solo arriba en móvil (bottom sheet) */
    border-radius: 1.25rem 1.25rem 0 0;
    max-height: 90vh;
    overflow-y: auto;
}

@media (min-width: 640px) {
    .ump-modal-card[b-pjjls12m0c] {
        max-width: 500px;
        border-radius: 1rem;     /* completamente redondeado en desktop */
        animation: umpSlideIn-b-pjjls12m0c .25s ease-out both;
        max-height: none;
        overflow-y: visible;
    }
}

/* Animación bottom sheet: sube desde abajo */
@keyframes umpSlideUp-b-pjjls12m0c {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Animación desktop: aparece y sube levemente */
@keyframes umpSlideIn-b-pjjls12m0c {
    from { opacity: 0; transform: translateY(20px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* Encabezado del modal con borde inferior */
.ump-modal-header[b-pjjls12m0c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1.25rem;
    border-bottom: 1px solid #F0F0F0;
}

@media (min-width: 640px) {
    .ump-modal-header[b-pjjls12m0c] { padding: 1.25rem 1.5rem; }
}

/* Grupo ícono + título */
.ump-modal-title-group[b-pjjls12m0c] {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.ump-modal-title-text[b-pjjls12m0c] { min-width: 0; }

/* Cuadrado redondeado con el ícono de lápiz en verde */
.ump-modal-icon[b-pjjls12m0c] {
    width: 36px;
    height: 36px;
    border-radius: .625rem;
    background: #E8F5E9;
    color: #2E7D32;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .ump-modal-icon[b-pjjls12m0c] { width: 40px; height: 40px; font-size: 1.125rem; }
}

.ump-modal-title[b-pjjls12m0c] {
    color: #263238;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 .15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ump-modal-sub[b-pjjls12m0c] {
    color: #78909C;
    font-size: .75rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botón X para cerrar */
.ump-modal-close[b-pjjls12m0c] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .5rem;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #78909C;
    font-size: 1rem;
    cursor: pointer;
    transition: background .15s, color .15s;
    padding: 0;
    flex-shrink: 0;
}

.ump-modal-close:hover[b-pjjls12m0c] {
    background: #ECEFF1;
    color: #263238;
}

/* Cuerpo del modal con campos apilados */
.ump-modal-body[b-pjjls12m0c] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 640px) {
    .ump-modal-body[b-pjjls12m0c] { padding: 1.5rem; gap: 1.25rem; }
}

/* Campo de formulario: etiqueta + input */
.ump-field[b-pjjls12m0c] { display: flex; flex-direction: column; }

.ump-field-label[b-pjjls12m0c] {
    color: #37474F;
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

/* Input editable del modal */
.ump-field-input[b-pjjls12m0c] {
    width: 100%;
    padding: .625rem .875rem;
    border: 1.5px solid #E0E0E0;
    border-radius: .75rem;
    background: #ffffff;
    color: #263238;
    font-size: .9rem;
    font-weight: 500;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

@media (min-width: 640px) {
    .ump-field-input[b-pjjls12m0c] { padding: .75rem 1rem; }
}

.ump-field-input:focus[b-pjjls12m0c] {
    border-color: #2E7D32;
    box-shadow: 0 0 0 3px rgba(46,125,50,.14);
}

.ump-field-input[b-pjjls12m0c]::placeholder { color: rgba(55,71,79,.35); }

/* Contenedor relativo del select para posicionar el chevron */
.ump-select-wrapper[b-pjjls12m0c] {
    position: relative;
    border: 1.5px solid #E0E0E0;
    border-radius: .75rem;
    background: #ffffff;
    transition: border-color .15s, box-shadow .15s;
}

.ump-select-wrapper:focus-within[b-pjjls12m0c] {
    border-color: #2E7D32;
    box-shadow: 0 0 0 3px rgba(46,125,50,.14);
}

/* Borde coloreado según el rol actualmente seleccionado */
.ump-select-scout[b-pjjls12m0c]         { border-color: #A5D6A7; }
.ump-select-dirigente[b-pjjls12m0c]     { border-color: #90CAF9; }
.ump-select-hormiga[b-pjjls12m0c]       { border-color: #FFE082; }
.ump-select-administrador[b-pjjls12m0c] { border-color: #EF9A9A; }

/* Select nativo con apariencia eliminada */
.ump-modal-select[b-pjjls12m0c] {
    width: 100%;
    padding: .625rem 2.5rem .625rem .875rem;
    background: transparent;
    border: none;
    border-radius: .75rem;
    color: #263238;
    font-size: .9rem;
    font-weight: 500;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}

@media (min-width: 640px) {
    .ump-modal-select[b-pjjls12m0c] { padding: .75rem 2.5rem .75rem 1rem; }
}

/* Chevron decorativo sin interceptar clics */
.ump-select-arrow[b-pjjls12m0c] {
    position: absolute;
    right: .875rem;
    top: 50%;
    transform: translateY(-50%);
    color: #78909C;
    font-size: .875rem;
    pointer-events: none;
}

/*
 * Pie del modal:
 *   - Móvil: los botones ocupan todo el ancho, Guardar arriba (columna-inversa)
 *   - Desktop: botones en fila a la derecha con tamaño natural
 */
.ump-modal-footer[b-pjjls12m0c] {
    display: flex;
    flex-direction: column-reverse;
    gap: .5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid #F0F0F0;
    background: #FAFAFA;
}

@media (min-width: 640px) {
    .ump-modal-footer[b-pjjls12m0c] {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: .75rem;
        padding: 1rem 1.5rem;
    }
}

/* Botón Cancelar: texto gris sin fondo */
.ump-btn-cancel[b-pjjls12m0c] {
    padding: .75rem 1.25rem;
    border-radius: .5rem;
    border: none;
    background: transparent;
    color: #78909C;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
    font-family: inherit;
    text-align: center;
}

@media (min-width: 640px) {
    .ump-btn-cancel[b-pjjls12m0c] { padding: .625rem 1.25rem; }
}

.ump-btn-cancel:hover[b-pjjls12m0c] {
    background: #ECEFF1;
    color: #37474F;
}

/* Botón Guardar: verde institucional con ícono de check */
.ump-btn-save[b-pjjls12m0c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .75rem 1.25rem;
    border-radius: .5rem;
    border: none;
    background: #2E7D32;
    color: #ffffff;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
}

@media (min-width: 640px) {
    .ump-btn-save[b-pjjls12m0c] { padding: .625rem 1.25rem; }
}

.ump-btn-save:hover[b-pjjls12m0c] { background: #1B5E20; }
/* /Pages/Contacto/Index.razor.rz.scp.css */
/*
 * Contacto.razor.css — FAQ y Contacto
 * ════════════════════════════════════════════════════════════
 * Prefijo: ct- (contact page)
 *
 * Paleta:
 *   Fondo          var(--background, #F9F7F2)
 *   Superficie     #FFFFFF
 *   Título         #37474F
 *   Body 70        rgba(55,71,79,0.70)
 *   Body 65        rgba(55,71,79,0.65)
 *   Label 40       rgba(55,71,79,0.40)
 *   Borde          #E0E0E0   (4px solid en todas las cards)
 *   Separador      #ECE6D8
 *   Verde          #2E7D32
 *   Verde hover    #1B5E20
 *   Azul           #1565C0
 *   Rojo           #D32F2F
 *   Input bg       rgba(248,245,240,0.60)
 *   Input border   #E5E7EB
 */


/* ════════════════════════════════════════════════════════════
   2. QUICK INFO CARDS — superpuestas al hero
   ════════════════════════════════════════════════════════════ */

.ct-info-section[b-d1hl8xlssc] {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
    margin-top: -2.5rem;        /* -mt-10 */
    position: relative;
    z-index: 30;
    margin-bottom: 5rem;
}

@media (min-width: 640px) {
    .ct-info-section[b-d1hl8xlssc] { padding: 0 1.5rem; }
}

.ct-info-grid[b-d1hl8xlssc] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .ct-info-grid[b-d1hl8xlssc] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Card */
.ct-info-card[b-d1hl8xlssc] {
    background: #FFFFFF;
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    border: 4px solid #E0E0E0;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: ctFadeUp-b-d1hl8xlssc 0.45s ease-out both;
}

.ct-info-card:hover[b-d1hl8xlssc] {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.06);
}

/* Icono */
.ct-info-icon[b-d1hl8xlssc] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    transition: transform 0.2s ease;
}

.ct-info-card:hover .ct-info-icon[b-d1hl8xlssc] {
    transform: scale(1.05);
}

.ct-info-icon i[b-d1hl8xlssc] {
    font-size: 1.5rem;
}

/* Texto */
.ct-info-title[b-d1hl8xlssc] {
    font-family: var(--font-serif, 'Bitter', 'Georgia', serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: #37474F;
    margin: 0 0 0.75rem;
}

.ct-info-text[b-d1hl8xlssc] {
    color: rgba(55, 71, 79, 0.65);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.6;
    margin: 0;
}


/* ════════════════════════════════════════════════════════════
   3. FAQ ACCORDION
   ════════════════════════════════════════════════════════════ */

.ct-faq-section[b-d1hl8xlssc] {
    max-width: 48rem;       /* max-w-3xl */
    margin: 0 auto 6rem;
    padding: 0 1rem;
}

@media (min-width: 640px) {
    .ct-faq-section[b-d1hl8xlssc] { padding: 0 1.5rem; }
}

/* Header */
.ct-faq-header[b-d1hl8xlssc] {
    text-align: center;
    margin-bottom: 3rem;
    animation: ctFadeUp-b-d1hl8xlssc 0.45s ease-out both;
}

.ct-faq-heading[b-d1hl8xlssc] {
    font-family: var(--font-serif, 'Bitter', 'Georgia', serif);
    font-size: 2.25rem;
    font-weight: 700;
    color: #37474F;
    margin: 0;
}

@media (min-width: 768px) {
    .ct-faq-heading[b-d1hl8xlssc] { font-size: 3rem; }
}

/* Barra decorativa verde */
.ct-faq-bar[b-d1hl8xlssc] {
    width: 5rem;
    height: 0.375rem;
    background: #2E7D32;
    border-radius: 9999px;
    margin: 1.25rem auto 0;
}

/* Card contenedora */
.ct-faq-card[b-d1hl8xlssc] {
    background: #FFFFFF;
    border-radius: 1rem;
    padding: 2rem;
    border: 4px solid #E0E0E0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    animation: ctFadeUp-b-d1hl8xlssc 0.45s ease-out both;
}

@media (min-width: 768px) {
    .ct-faq-card[b-d1hl8xlssc] { padding: 3rem; }
}

/* Item */
.ct-faq-item[b-d1hl8xlssc] {
    border-bottom: 1px solid #ECE6D8;
}

.ct-faq-item--last[b-d1hl8xlssc] {
    border-bottom: none;
}

/* Botón pregunta */
.ct-faq-btn[b-d1hl8xlssc] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 1rem;
    transition: color 0.2s ease;
}

.ct-faq-btn:hover .ct-faq-question[b-d1hl8xlssc] {
    color: #2E7D32;
}

.ct-faq-question[b-d1hl8xlssc] {
    font-family: var(--font-serif, 'Bitter', 'Georgia', serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: #37474F;
    transition: color 0.2s ease;
}

/* Chevron */
.ct-faq-chevron[b-d1hl8xlssc] {
    flex-shrink: 0;
    font-size: 1.25rem;
    color: rgba(55, 71, 79, 0.4);
    transition: transform 0.3s ease, color 0.3s ease;
}

.ct-faq-chevron--open[b-d1hl8xlssc] {
    transform: rotate(180deg);
    color: #2E7D32;
}

/* Respuesta expandible */
.ct-faq-answer[b-d1hl8xlssc] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.ct-faq-answer--open[b-d1hl8xlssc] {
    max-height: 40rem;
    padding-bottom: 2rem;
}

.ct-faq-answer-inner[b-d1hl8xlssc] {
    color: rgba(55, 71, 79, 0.70);
    font-size: 1.125rem;
    line-height: 1.6;
}

.ct-faq-answer-inner p[b-d1hl8xlssc] {
    margin: 0;
}


/* ════════════════════════════════════════════════════════════
   4. CONTACT SPLIT — Mapa+Info izq, Formulario der
   ════════════════════════════════════════════════════════════ */

.ct-contact-section[b-d1hl8xlssc] {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem 5rem;
}

@media (min-width: 640px) {
    .ct-contact-section[b-d1hl8xlssc] { padding: 0 1.5rem 5rem; }
}

.ct-contact-grid[b-d1hl8xlssc] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .ct-contact-grid[b-d1hl8xlssc] {
        grid-template-columns: 1fr 1fr;
        gap: 3.5rem;
    }
}

/* ── Columna izquierda ──────────────────────────────────────── */
.ct-contact-left[b-d1hl8xlssc] {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

/* Mapa */
.ct-map-wrap[b-d1hl8xlssc] {
    border-radius: 0.75rem;
    overflow: hidden;
    border: 4px solid #E0E0E0;
    animation: ctFadeUp-b-d1hl8xlssc 0.45s ease-out both;
}

.ct-map-inner[b-d1hl8xlssc] {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #E8E4DD;
}

.ct-map-iframe[b-d1hl8xlssc] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(15%) contrast(95%);
}

.ct-map-fallback[b-d1hl8xlssc] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: rgba(55, 71, 79, 0.25);
}

.ct-map-fallback i[b-d1hl8xlssc] {
    font-size: 2.75rem;
    margin-bottom: 0.75rem;
}

.ct-map-fallback p[b-d1hl8xlssc] {
    font-weight: 600;
    margin: 0;
}

/* Datos de contacto */
.ct-details[b-d1hl8xlssc] {
    padding: 0 0.25rem;
    animation: ctFadeUp-b-d1hl8xlssc 0.45s ease-out 0.08s both;
}

.ct-details-title[b-d1hl8xlssc] {
    font-family: var(--font-serif, 'Bitter', 'Georgia', serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: #37474F;
    margin: 0 0 1.5rem;
}

.ct-details-list[b-d1hl8xlssc] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ct-detail-item[b-d1hl8xlssc] {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.05rem;
    color: rgba(55, 71, 79, 0.75);
}

.ct-detail-icon[b-d1hl8xlssc] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ct-detail-icon i[b-d1hl8xlssc] {
    font-size: 1.25rem;
}

.ct-detail-text[b-d1hl8xlssc] {
    line-height: 1.4;
}

/* Botón WhatsApp */
.ct-whatsapp[b-d1hl8xlssc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    margin-top: 1.5rem;
    padding: 1rem;
    border: 2px solid #2E7D32;
    border-radius: 0.75rem;
    background: transparent;
    color: #2E7D32;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.ct-whatsapp:hover[b-d1hl8xlssc] {
    background: #2E7D32;
    color: #FFFFFF;
    text-decoration: none;
}

.ct-whatsapp-icon[b-d1hl8xlssc] {
    font-size: 1.5rem;
    transition: transform 0.2s ease;
}

.ct-whatsapp:hover .ct-whatsapp-icon[b-d1hl8xlssc] {
    transform: scale(1.1);
}

/* ── Columna derecha: Formulario ────────────────────────────── */
.ct-form-card[b-d1hl8xlssc] {
    background: #FFFFFF;
    padding: 2rem;
    border-radius: 0.75rem;
    border: 4px solid #E0E0E0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    animation: ctFadeUp-b-d1hl8xlssc 0.45s ease-out 0.06s both;
}

@media (min-width: 768px) {
    .ct-form-card[b-d1hl8xlssc] { padding: 2.5rem; }
}

.ct-form-title[b-d1hl8xlssc] {
    font-family: var(--font-serif, 'Bitter', 'Georgia', serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: #37474F;
    margin: 0 0 1.75rem;
}

.ct-form-fields[b-d1hl8xlssc] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Fila nombre + email */
.ct-form-row[b-d1hl8xlssc] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .ct-form-row[b-d1hl8xlssc] {
        grid-template-columns: 1fr 1fr;
    }
}

/* Campo individual */
.ct-field[b-d1hl8xlssc] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* Label */
.ct-label[b-d1hl8xlssc] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(55, 71, 79, 0.4);
    margin-left: 0.25rem;
}

/* Input / Select / Textarea */
.ct-input[b-d1hl8xlssc],
[b-d1hl8xlssc] .ct-input {
    width: 100%;
    background: rgba(248, 245, 240, 0.60);
    border: 1px solid #E5E7EB;
    border-radius: 0.75rem;
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
    color: #37474F;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.ct-input:focus[b-d1hl8xlssc],
[b-d1hl8xlssc] .ct-input:focus {
    outline: none;
    border-color: rgba(46, 125, 50, 0.3);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12);
}

.ct-select[b-d1hl8xlssc],
[b-d1hl8xlssc] .ct-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2337474F' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}

.ct-textarea[b-d1hl8xlssc],
[b-d1hl8xlssc] .ct-textarea {
    resize: none;
}

/* Fila inferior del campo Mensaje: ValidationMessage a la izquierda, contador a la derecha */
.ct-field-footer[b-d1hl8xlssc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 1.25rem;
}

.ct-char-counter[b-d1hl8xlssc] {
    font-size: 0.8125rem;
    color: #78909C;
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}

.ct-char-near-limit[b-d1hl8xlssc] {
    color: #D32F2F;
    font-weight: 600;
}

/* Validation messages */
[b-d1hl8xlssc] .validation-message {
    color: #D32F2F;
    font-size: 0.8125rem;
    margin-top: 0.25rem;
    margin-left: 0.25rem;
}

/* Honeypot anti-bots: invisible para humanos, visible para bots */
.ct-site-field[b-d1hl8xlssc] {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    height: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Botón Submit */
.ct-submit[b-d1hl8xlssc] {
    width: 100%;
    background: #2E7D32;
    color: #FFFFFF;
    border: none;
    border-radius: 0.75rem;
    padding: 1rem;
    font-weight: 700;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(27, 94, 32, 0.15);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    margin-top: 0.5rem;
}

.ct-submit:hover:not(:disabled)[b-d1hl8xlssc] {
    background: #1B5E20;
    transform: scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(27, 94, 32, 0.18);
}

.ct-submit:active:not(:disabled)[b-d1hl8xlssc] {
    transform: scale(0.97);
}

.ct-submit:disabled[b-d1hl8xlssc] {
    opacity: 0.6;
    cursor: not-allowed;
}


/* ════════════════════════════════════════════════════════════
   ANIMACIONES
   ════════════════════════════════════════════════════════════ */

@keyframes ctFadeUp-b-d1hl8xlssc {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ct-info-card[b-d1hl8xlssc],
    .ct-faq-header[b-d1hl8xlssc],
    .ct-faq-card[b-d1hl8xlssc],
    .ct-map-wrap[b-d1hl8xlssc],
    .ct-details[b-d1hl8xlssc],
    .ct-form-card[b-d1hl8xlssc] {
        animation: none;
    }
}
/* /Pages/Dirigentes/Index.razor.rz.scp.css */
/* ==================================================================
   Dirigentes.razor.css — Estilos aislados para /dirigentes
   ==================================================================
   Prefijo: dir-  (dirigentes page)
   Contenedores glass, grids, estados loading/error, footer note.
   ================================================================== */

/* ═══════════════════════════════════════════════════════
 * 1. HERO BANNER — Imagen full-width con fade
 * ═══════════════════════════════════════════════════════ */
.dir-hero[b-8mh1p6lpx0] {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.dir-hero-img[b-8mh1p6lpx0] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.75);
}

.dir-hero-tint[b-8mh1p6lpx0] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.40) 60%,
        rgba(0, 0, 0, 0.30) 100%
    );
}

.dir-hero-fade[b-8mh1p6lpx0] {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 40%;
    background: linear-gradient(
        to top,
        #F9F7F2 0%,
        rgba(249, 247, 242, 0.85) 30%,
        rgba(249, 247, 242, 0) 100%
    );
}

.dir-hero-content[b-8mh1p6lpx0] {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1rem;
}

.dir-hero-title[b-8mh1p6lpx0] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.dir-hero-subtitle[b-8mh1p6lpx0] {
    font-size: 1.125rem;
    max-width: 42rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
    margin: 0;
}

@media (min-width: 640px) {
    .dir-hero-title[b-8mh1p6lpx0] { font-size: 3rem; }
    .dir-hero-subtitle[b-8mh1p6lpx0] { font-size: 1.25rem; }
}
@media (min-width: 768px) {
    .dir-hero-title[b-8mh1p6lpx0] { font-size: 3.75rem; }
}
@media (min-width: 1024px) {
    .dir-hero-title[b-8mh1p6lpx0] { font-size: 4.5rem; }
}

/* ── Contenedor glass reutilizable ── */
.dir-glass[b-8mh1p6lpx0] {
    background: rgba(255, 255, 255, .5);       /* bg-white/50 */
    backdrop-filter: blur(12px);                /* backdrop-blur-sm */
    -webkit-backdrop-filter: blur(12px);
    border-radius: 1.5rem;                      /* rounded-3xl */
    border: 1px solid rgba(255, 255, 255, .7);  /* border-white/70 */
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1),
                0 1px 2px -1px rgb(0 0 0 / .1); /* shadow-sm */
    padding: 1.5rem;                            /* p-6 */
}

@media (min-width: 640px) {
    .dir-glass[b-8mh1p6lpx0] { padding: 2rem; }               /* sm:p-8 */
}
@media (min-width: 1024px) {
    .dir-glass[b-8mh1p6lpx0] { padding: 2.5rem; }             /* lg:p-10 */
}

/* ── Sección de contenido principal ── */
.dir-content[b-8mh1p6lpx0] {
    max-width: 72rem;                           /* max-w-6xl */
    margin: 0 auto;
    padding: 0 1rem 6rem;                       /* px-4 pb-24 */
    display: flex;
    flex-direction: column;
    gap: 1rem;                                  /* space-y-4 */
}

@media (min-width: 640px) {
    .dir-content[b-8mh1p6lpx0] { padding-left: 1.5rem; padding-right: 1.5rem; } /* sm:px-6 */
}

/* ── Grid de la fila superior: 1fr | 2fr ── */
.dir-top-grid[b-8mh1p6lpx0] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;                                  /* gap-8 */
}

@media (min-width: 768px) {
    .dir-top-grid[b-8mh1p6lpx0] {
        grid-template-columns: 1.5fr 2.5fr;    /* Capellán más grande, Jefatura proporcionada */
        gap: 2rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Estado Loading — Skeletons
   ═══════════════════════════════════════════════════════════════ */
.dir-skeleton-section[b-8mh1p6lpx0] {
    max-width: 72rem;
    margin: 0 auto;
    padding: 3rem 1rem;                         /* px-4 py-12 */
}

@media (min-width: 640px) {
    .dir-skeleton-section[b-8mh1p6lpx0] { padding-left: 1.5rem; padding-right: 1.5rem; }
}

.dir-skeleton-grid[b-8mh1p6lpx0] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);      /* grid-cols-2 */
    gap: 1rem;
}

@media (min-width: 640px) {
    .dir-skeleton-grid[b-8mh1p6lpx0] { grid-template-columns: repeat(3, 1fr); }  /* sm:grid-cols-3 */
}
@media (min-width: 1024px) {
    .dir-skeleton-grid[b-8mh1p6lpx0] { grid-template-columns: repeat(4, 1fr); }  /* lg:grid-cols-4 */
}

/* ═══════════════════════════════════════════════════════════════
   Estado Error
   ═══════════════════════════════════════════════════════════════ */
.dir-error-section[b-8mh1p6lpx0] {
    max-width: 36rem;                           /* max-w-xl */
    margin: 0 auto;
    padding: 5rem 1rem;                         /* px-4 py-20 */
    text-align: center;
}

@media (min-width: 640px) {
    .dir-error-section[b-8mh1p6lpx0] { padding-left: 1.5rem; padding-right: 1.5rem; }
}

.dir-error-card[b-8mh1p6lpx0] {
    background: #fff;
    border-radius: 1rem;                        /* rounded-2xl */
    border: 1px solid #FEE2E2;                  /* border-red-100 */
    padding: 2rem;                              /* p-8 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;                                  /* space-y-4 */
}

@media (min-width: 640px) {
    .dir-error-card[b-8mh1p6lpx0] { padding: 3rem; }          /* sm:p-12 */
}

.dir-error-icon[b-8mh1p6lpx0] {
    margin: 0 auto;
}

.dir-error-title[b-8mh1p6lpx0] {
    font-family: var(--font-serif, 'Bitter', Georgia, serif);
    font-size: 1.125rem;                        /* text-lg */
    font-weight: 700;
    color: #1F2937;
    margin: 0;
}

.dir-error-text[b-8mh1p6lpx0] {
    font-size: .875rem;                         /* text-sm */
    color: #6B7280;
    margin: 0;
    line-height: 1.5;
}

.dir-retry-btn[b-8mh1p6lpx0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;                  /* px-5 py-2.5 */
    border-radius: 9999px;                      /* rounded-full */
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    background-color: #2E7D32;
    border: none;
    cursor: pointer;
    transition: background-color .2s ease;
}

.dir-retry-btn:hover[b-8mh1p6lpx0] {
    background-color: #1B5E20;
}

/* ═══════════════════════════════════════════════════════════════
   Estado Vacío — Próximamente (animado)
   ═══════════════════════════════════════════════════════════════ */
.dir-proximamente-section[b-8mh1p6lpx0] {
    max-width: 40rem;
    margin: 0 auto;
    padding: 5rem 1rem 6rem;
    text-align: center;
}

@media (min-width: 640px) {
    .dir-proximamente-section[b-8mh1p6lpx0] { padding-left: 1.5rem; padding-right: 1.5rem; }
}

.dir-proximamente-card[b-8mh1p6lpx0] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(255, 248, 240, 0.9) 50%,
        rgba(255, 255, 255, 0.85) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(230, 81, 0, 0.12);
    border-radius: 1.5rem;
    padding: 3rem 2rem 2.5rem;
    box-shadow:
        0 4px 24px rgba(230, 81, 0, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    animation: dirProxFadeIn-b-8mh1p6lpx0 0.6s ease both;
}

@keyframes dirProxFadeIn-b-8mh1p6lpx0 {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Elementos decorativos flotantes */
.dir-proximamente-deco[b-8mh1p6lpx0] {
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
    pointer-events: none;
}

.dir-proximamente-deco-1[b-8mh1p6lpx0] {
    width: 180px;
    height: 180px;
    background: #E65100;
    top: -60px;
    right: -40px;
    animation: dirProxFloat-b-8mh1p6lpx0 6s ease-in-out infinite;
}

.dir-proximamente-deco-2[b-8mh1p6lpx0] {
    width: 120px;
    height: 120px;
    background: #2E7D32;
    bottom: -40px;
    left: -30px;
    animation: dirProxFloat-b-8mh1p6lpx0 8s ease-in-out infinite reverse;
}

@keyframes dirProxFloat-b-8mh1p6lpx0 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(8px, -10px); }
}

/* Badge central con pulso */
.dir-proximamente-badge[b-8mh1p6lpx0] {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #E65100;
    box-shadow: 0 0 0 0 rgba(230, 81, 0, 0.2);
    animation: dirProxPulse-b-8mh1p6lpx0 3s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes dirProxPulse-b-8mh1p6lpx0 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(230, 81, 0, 0.2); }
    50%      { box-shadow: 0 0 0 16px rgba(230, 81, 0, 0); }
}

.dir-proximamente-title[b-8mh1p6lpx0] {
    font-family: var(--font-serif, 'Bitter', Georgia, serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: #1F2937;
    margin: 0;
    line-height: 1.3;
}

.dir-proximamente-desc[b-8mh1p6lpx0] {
    font-size: 1rem;
    color: #6B7280;
    line-height: 1.75;
    margin: 0;
    max-width: 30rem;
}

/* Separador con ícono de fogón */
.dir-proximamente-divider[b-8mh1p6lpx0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 16rem;
    color: #D4A373;
    font-size: 0.875rem;
}

.dir-proximamente-divider[b-8mh1p6lpx0]::before,
.dir-proximamente-divider[b-8mh1p6lpx0]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #D4A373, transparent);
}

/* Hint inferior con reloj */
.dir-proximamente-hint[b-8mh1p6lpx0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #9CA3AF;
    margin: 0;
    letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════
   Footer Note
   ═══════════════════════════════════════════════════════════════ */
.dir-footer-note[b-8mh1p6lpx0] {
    max-width: 48rem;                           /* max-w-3xl */
    margin: 0 auto;
    padding: 0 1rem 5rem;                       /* px-4 pb-20 */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;                               /* space-y-3 */
}

@media (min-width: 640px) {
    .dir-footer-note[b-8mh1p6lpx0] { padding-left: 1.5rem; padding-right: 1.5rem; }
}

.dir-footer-line[b-8mh1p6lpx0] {
    width: 3rem;                                /* w-12 */
    height: 1px;
    background-color: #D7CEC7;
    margin: 0 auto;
}

.dir-footer-text[b-8mh1p6lpx0] {
    font-size: .75rem;                          /* text-xs */
    color: #9CA3AF;
    line-height: 1.7;
    margin: 0;
}
/* /Pages/Especialidades/Caracteristicas.razor.rz.scp.css */
/*
    Caracteristicas.razor.css — Estilos de /especialidades/caracteristicas
    =====================================================================
    Prefijo: ecr- (Especialidades CaRacterísticas)
    Se construye en múltiples prompts. Este archivo contiene los estilos base.
*/

/* =======================================================================
   CONTENEDOR PRINCIPAL
   ======================================================================= */

.ecr-pagina[b-i3ti8cgeyl] {
    background-color: var(--background);
    min-height: 100vh;
}

/* =======================================================================
   ARTÍCULO EDITORIAL
   max-width 64rem base (80rem en pantallas grandes), centrado, padding responsive
   Referencia: mismo patrón que /Calendario (.cal-content)
   ======================================================================= */

.ecr-articulo[b-i3ti8cgeyl] {
    max-width: 64rem;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

@media (min-width: 640px) {
    .ecr-articulo[b-i3ti8cgeyl] {
        padding: 2.5rem 1.5rem 4rem;
    }
}

@media (min-width: 1024px) {
    .ecr-articulo[b-i3ti8cgeyl] {
        padding: 3rem 2rem 5rem;
    }
}

@media (min-width: 1600px) {
    .ecr-articulo[b-i3ti8cgeyl] {
        max-width: 80rem;
    }
}

/* =======================================================================
   SECCIÓN — animación de entrada
   ======================================================================= */

.ecr-seccion[b-i3ti8cgeyl] {
    animation: ecrFadeUp-b-i3ti8cgeyl 0.45s ease both;
}

@keyframes ecrFadeUp-b-i3ti8cgeyl {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ecr-seccion[b-i3ti8cgeyl] {
        animation: none;
    }
}

/* =======================================================================
   BADGE DE SECCIÓN
   Pill verde pequeño — "Sección A", "Sección B", etc.
   ======================================================================= */

.ecr-badge[b-i3ti8cgeyl] {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #2E7D32;
    background-color: rgba(46, 125, 50, 0.08);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    margin-bottom: 1rem;
    user-select: none;
}

/* =======================================================================
   TÍTULOS EDITORIALES
   ======================================================================= */

/* Título principal de sección — Bitter serif */
.ecr-titulo[b-i3ti8cgeyl] {
    font-family: 'Bitter', Georgia, serif;
    font-size: clamp(1.3rem, 3vw, 1.55rem);
    color: var(--title);
    line-height: 1.25;
    margin-bottom: 1rem;
}

/* Sub-título (h3) dentro de sección */
.ecr-subtitulo[b-i3ti8cgeyl] {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.1rem;
    color: var(--title);
    margin-bottom: 0.75rem;
}

/* Fila: caja de ícono + título h2 alineados */
.ecr-titulo-con-icono[b-i3ti8cgeyl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* Caja de ícono cuadrada junto al título */
.ecr-icono-caja[b-i3ti8cgeyl] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ecr-icono-caja i[b-i3ti8cgeyl] {
    font-size: 1.125rem;
}

/* Variantes de color para la caja de ícono */
.ecr-icono-caja--verde[b-i3ti8cgeyl] {
    background-color: rgba(46, 125, 50, 0.08);
    color: #2E7D32;
}

.ecr-icono-caja--purpura[b-i3ti8cgeyl] {
    background-color: rgba(142, 36, 170, 0.08);
    color: #8E24AA;
}

.ecr-icono-caja--ambar[b-i3ti8cgeyl] {
    background-color: #FFF8E1;
    color: #F57F17;
}

/* =======================================================================
   TEXTO EDITORIAL
   ======================================================================= */

.ecr-texto-editorial[b-i3ti8cgeyl] {
    font-size: 0.94rem;
    line-height: 1.85;
    color: rgba(55, 71, 79, 0.65);
    margin-bottom: 2rem;
    max-width: 860px;  /* Legibilidad en pantallas anchas */
}

.ecr-texto-editorial p + p[b-i3ti8cgeyl] {
    margin-top: 1rem;
}

.ecr-texto-editorial em[b-i3ti8cgeyl] {
    font-style: italic;
}

.ecr-texto-editorial strong[b-i3ti8cgeyl] {
    font-weight: 600;
    color: rgba(55, 71, 79, 0.80);
}

/* =======================================================================
   DIVISOR
   ======================================================================= */

.ecr-divisor[b-i3ti8cgeyl] {
    height: 1px;
    background-color: rgba(55, 71, 79, 0.08);
    margin: 3rem 0;
}

/* =======================================================================
   CAPTION — texto italic pequeño al pie de secciones
   ======================================================================= */

.ecr-caption[b-i3ti8cgeyl] {
    font-size: 0.75rem;
    color: rgba(55, 71, 79, 0.35);
    font-style: italic;
    line-height: 1.6;
}

.ecr-caption--centrado[b-i3ti8cgeyl] {
    text-align: center;
}

/* =======================================================================
   GRILLA DE 6 CAMPOS (Sección A)
   2 columnas en mobile, 3 en ≥640px
   ======================================================================= */

.ecr-campos-grid[b-i3ti8cgeyl] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .ecr-campos-grid[b-i3ti8cgeyl] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ecr-campo-card[b-i3ti8cgeyl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background-color: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid rgba(55, 71, 79, 0.06);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ecr-campo-icono-caja[b-i3ti8cgeyl] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ecr-campo-info[b-i3ti8cgeyl] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ecr-campo-clave[b-i3ti8cgeyl] {
    display: block;
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(55, 71, 79, 0.30);
}

.ecr-campo-label[b-i3ti8cgeyl] {
    font-size: 0.875rem;
    color: rgba(55, 71, 79, 0.70);
}

/* =======================================================================
   INFOGRAFÍA 1: CANTIDAD VS DIFICULTAD (Sección B)
   Dos columnas con bandas coloreadas de ancho proporcional por rama
   ======================================================================= */

.ecr-infog-funnels[b-i3ti8cgeyl] {
    display: flex;
    align-items: stretch;
    background-color: #FAFAF7;
    border-radius: 0.75rem;
    border: 1px solid rgba(55, 71, 79, 0.06);
    overflow: hidden;
    margin: 1.5rem 0 0.5rem;
    min-height: 340px;
}

.ecr-infog-columna[b-i3ti8cgeyl] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1rem 1rem;
}

.ecr-infog-header[b-i3ti8cgeyl] {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(55, 71, 79, 0.55);
    margin-bottom: 1rem;
    font-family: 'Inter', sans-serif;
}

.ecr-infog-bandas[b-i3ti8cgeyl] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.375rem;
}

.ecr-infog-banda[b-i3ti8cgeyl] {
    margin: 0 auto;
    height: 54px;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 600;
    font-size: 10.5px;
    font-family: 'Inter', sans-serif;
    opacity: 0.88;
    width: 28%; /* se sobreescribe con style inline */
}

/* Para Lobatos (fondo amarillo) el texto negro tiene más contraste */
.ecr-infog-banda--texto-oscuro[b-i3ti8cgeyl] {
    color: rgba(55, 71, 79, 0.80);
}

.ecr-infog-vs[b-i3ti8cgeyl] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: rgba(55, 71, 79, 0.18);
    padding: 0 0.375rem;
    flex-shrink: 0;
}

.ecr-infog-nota[b-i3ti8cgeyl] {
    text-align: center;
    font-size: 9.5px;
    color: rgba(55, 71, 79, 0.30);
    margin-top: 0.75rem;
    font-family: 'Inter', sans-serif;
}

/* =======================================================================
   TARJETAS DE DISTINCIÓN (Sección C)
   Grid 1→2 columnas. Card con icono + título + texto
   ======================================================================= */

.ecr-distinciones-grid[b-i3ti8cgeyl] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    .ecr-distinciones-grid[b-i3ti8cgeyl] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ecr-distincion-card[b-i3ti8cgeyl] {
    background-color: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid rgba(55, 71, 79, 0.08);
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ecr-distincion-header[b-i3ti8cgeyl] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
}

.ecr-distincion-icono[b-i3ti8cgeyl] {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ecr-distincion-icono i[b-i3ti8cgeyl] {
    font-size: 0.875rem;
}

.ecr-distincion-icono--purpura[b-i3ti8cgeyl] {
    background-color: rgba(142, 36, 170, 0.10);
    color: #8E24AA;
}

/* El ícono play del "Especialista en Campo" va rotado 90° para que parezca triángulo */
.ecr-distincion-icono-play[b-i3ti8cgeyl] {
    transform: rotate(90deg);
}

.ecr-distincion-icono--ambar[b-i3ti8cgeyl] {
    background-color: #FFF8E1;
    color: #F57F17;
}

.ecr-distincion-titulo[b-i3ti8cgeyl] {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1rem;
    color: var(--title);
    font-weight: 700;
}

.ecr-distincion-texto[b-i3ti8cgeyl] {
    font-size: 0.875rem;
    color: rgba(55, 71, 79, 0.55);
    line-height: 1.6;
}

/* Texto introductorio de "Requisitos por Rama" */
.ecr-texto-req[b-i3ti8cgeyl] {
    font-size: 0.875rem;
    color: rgba(55, 71, 79, 0.55);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

/* =======================================================================
   INFOGRAFÍA 2: BAR CHART DE REQUISITOS (Sección C)
   5 barras verticales, altura proporcional al valor (máximo = 4)
   ======================================================================= */

.ecr-infog-barchart[b-i3ti8cgeyl] {
    background-color: #FAFAF7;
    border-radius: 0.75rem;
    border: 1px solid rgba(55, 71, 79, 0.06);
    padding: 1.5rem;
    margin: 0 0 1.5rem;
}

.ecr-barchart-encabezado[b-i3ti8cgeyl] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(55, 71, 79, 0.45);
    text-align: center;
    margin-bottom: 1.5rem;
    font-family: 'Inter', sans-serif;
}

/* Los wrappers se alinean al fondo del contenedor. Cada barra tiene altura en px
   para que no dependa del contexto del padre (evita el bug height:% en flex). */
.ecr-barchart-contenedor[b-i3ti8cgeyl] {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 200px;
    gap: 0.5rem;
    padding-top: 1rem; /* Espacio para los números que flotan encima */
}

.ecr-barchart-wrapper[b-i3ti8cgeyl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    flex: 1;
}

.ecr-barchart-valor[b-i3ti8cgeyl] {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.375rem;
    font-family: 'Inter', sans-serif;
}

.ecr-barchart-barra[b-i3ti8cgeyl] {
    width: 100%;
    max-width: 64px;
    border-radius: 0.5rem 0.5rem 0 0;
    opacity: 0.85;
    /* height viene del style inline en px (ej: height: 140px) */
    min-height: 2px;
    flex-shrink: 0;
}

.ecr-barchart-dot[b-i3ti8cgeyl] {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    opacity: 0.50;
    margin-top: 0.5rem;
}

.ecr-barchart-label[b-i3ti8cgeyl] {
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(55, 71, 79, 0.55);
    text-align: center;
    margin-top: 0.25rem;
    font-family: 'Inter', sans-serif;
    line-height: 1.3;
}

/* =======================================================================
   TABLA DE REQUISITOS (Sección C)
   Grid de 5 columnas con círculo coloreado + número + label
   ======================================================================= */

.ecr-req-tabla[b-i3ti8cgeyl] {
    background-color: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid rgba(55, 71, 79, 0.08);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    margin-bottom: 1rem;
}

.ecr-req-fila[b-i3ti8cgeyl] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.ecr-req-celda[b-i3ti8cgeyl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0.5rem;
    border-right: 1px solid rgba(55, 71, 79, 0.06);
}

.ecr-req-celda--ultimo[b-i3ti8cgeyl] {
    border-right: none;
}

.ecr-req-circulo[b-i3ti8cgeyl] {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.ecr-req-numero[b-i3ti8cgeyl] {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}

.ecr-req-label[b-i3ti8cgeyl] {
    font-size: 0.65rem;
    color: rgba(55, 71, 79, 0.50);
    text-align: center;
    line-height: 1.3;
    font-family: 'Inter', sans-serif;
}

/* =======================================================================
   QUOTE BOX — ¿Qué es un Sinodal? (Sección D)
   Borde izquierdo verde, fondo verde muy suave, cita italic
   ======================================================================= */

.ecr-quote[b-i3ti8cgeyl] {
    position: relative;
    background-color: rgba(27, 94, 32, 0.04);
    border-left: 4px solid #2E7D32;
    border-radius: 0 0.75rem 0.75rem 0;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
}

.ecr-quote__icono-deco[b-i3ti8cgeyl] {
    position: absolute;
    top: -0.75rem;
    left: -0.25rem;
    font-size: 1.5rem;
    color: rgba(46, 125, 50, 0.20);
}

.ecr-quote__titulo[b-i3ti8cgeyl] {
    font-family: 'Bitter', Georgia, serif;
    font-size: 0.95rem;
    color: #2E7D32;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.ecr-quote__texto[b-i3ti8cgeyl] {
    font-size: 0.94rem;
    font-style: italic;
    color: rgba(55, 71, 79, 0.65);
    line-height: 1.7;
}

.ecr-quote__fuente[b-i3ti8cgeyl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.ecr-quote__fuente-dot[b-i3ti8cgeyl] {
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background-color: rgba(46, 125, 50, 0.30);
    flex-shrink: 0;
}

.ecr-quote__fuente-texto[b-i3ti8cgeyl] {
    font-size: 10px;
    color: rgba(55, 71, 79, 0.30);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
}

/* =======================================================================
   STEPPER — Proceso de Aprobación (Sección D)
   5 pasos numerados con círculo verde + título + descripción
   ======================================================================= */

.ecr-stepper[b-i3ti8cgeyl] {
    background-color: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid rgba(55, 71, 79, 0.08);
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ecr-stepper__encabezado[b-i3ti8cgeyl] {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(55, 71, 79, 0.35);
    margin-bottom: 1rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

.ecr-stepper__pasos[b-i3ti8cgeyl] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ecr-paso[b-i3ti8cgeyl] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.ecr-paso__circulo[b-i3ti8cgeyl] {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background-color: rgba(46, 125, 50, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.ecr-paso__numero[b-i3ti8cgeyl] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #2E7D32;
    font-family: 'Inter', sans-serif;
}

.ecr-paso__contenido[b-i3ti8cgeyl] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ecr-paso__titulo[b-i3ti8cgeyl] {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(55, 71, 79, 0.80);
    font-family: 'Inter', sans-serif;
}

.ecr-paso__texto[b-i3ti8cgeyl] {
    font-size: 0.875rem;
    color: rgba(55, 71, 79, 0.50);
    line-height: 1.6;
    margin-top: 0.125rem;
    font-family: 'Inter', sans-serif;
}

/* =======================================================================
   TARJETAS DE CASOS ESPECIALES (Sección E)
   Card con cabecera (icono coloreado + título) + cuerpo indentado
   ======================================================================= */

.ecr-caso-card[b-i3ti8cgeyl] {
    background-color: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid rgba(55, 71, 79, 0.08);
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    margin-bottom: 1.25rem;
}

.ecr-caso-card--ultimo[b-i3ti8cgeyl] {
    margin-bottom: 0;
}

.ecr-caso-header[b-i3ti8cgeyl] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
}

.ecr-caso-icono[b-i3ti8cgeyl] {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ecr-caso-icono i[b-i3ti8cgeyl] {
    font-size: 0.875rem;
}

.ecr-caso-icono--verde[b-i3ti8cgeyl] {
    background-color: rgba(46, 125, 50, 0.08);
    color: #2E7D32;
}

.ecr-caso-icono--azul[b-i3ti8cgeyl] {
    background-color: rgba(21, 101, 192, 0.08);
    color: #1565C0;
}

.ecr-caso-titulo[b-i3ti8cgeyl] {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.05rem;
    color: var(--title);
    font-weight: 700;
}

.ecr-caso-body[b-i3ti8cgeyl] {
    font-size: 0.875rem;
    color: rgba(55, 71, 79, 0.60);
    line-height: 1.6;
    padding-left: 2.625rem;  /* 42px — alinea con el texto del header */
}

.ecr-caso-body p + p[b-i3ti8cgeyl] {
    margin-top: 0.75rem;
}

/* Último párrafo de la card de adultos — italic más pequeño */
.ecr-caso-body__nota[b-i3ti8cgeyl] {
    font-size: 0.75rem;
    color: rgba(55, 71, 79, 0.35);
    font-style: italic;
    margin-top: 0.75rem;
}

/* =======================================================================
   SECCIÓN DOCUMENTO OFICIAL
   Wrapper que centra la tarjeta del libro dentro del flujo de .ecr-pagina
   ======================================================================= */

.ecr-seccion-doc[b-i3ti8cgeyl] {
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 1rem 0;
}

@media (min-width: 640px) {
    .ecr-seccion-doc[b-i3ti8cgeyl] {
        padding: 0 1.5rem 0;
    }
}

@media (min-width: 1024px) {
    .ecr-seccion-doc[b-i3ti8cgeyl] {
        padding: 0 2rem 0;
    }
}

@media (min-width: 1600px) {
    .ecr-seccion-doc[b-i3ti8cgeyl] {
        max-width: 80rem;
    }
}

/* =======================================================================
   TARJETA DEL LIBRO (ecr-book-*)
   Clon del patrón pg-book-* de Progresiones pero con prefijo propio
   ======================================================================= */

.ecr-book-card[b-i3ti8cgeyl] {
    display: flex;
    background-color: var(--surface, #ffffff);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(55, 71, 79, 0.08);
}

/* Panel izquierdo: fondo verde degradado + portada */
.ecr-book-cover-panel[b-i3ti8cgeyl] {
    position: relative;
    width: 200px;
    min-width: 200px;
    background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 60%, #388E3C 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow: hidden;
}

.ecr-book-deco[b-i3ti8cgeyl] {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.06);
}

.ecr-book-deco--tr[b-i3ti8cgeyl] {
    top: -20px;
    right: -20px;
}

.ecr-book-deco--bl[b-i3ti8cgeyl] {
    bottom: -30px;
    left: -30px;
    width: 120px;
    height: 120px;
}

.ecr-book-cover-img[b-i3ti8cgeyl] {
    position: relative;
    width: 100%;
    max-width: 140px;
    border-radius: 0.5rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.40);
    object-fit: cover;
}

/* Panel derecho: contenido */
.ecr-book-content[b-i3ti8cgeyl] {
    flex: 1;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ecr-book-tag[b-i3ti8cgeyl] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background-color: rgba(46, 125, 50, 0.08);
    color: #2E7D32;
    border-radius: 2rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    width: fit-content;
}

.ecr-book-title[b-i3ti8cgeyl] {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--title);
    line-height: 1.3;
    margin-bottom: 0;
}

.ecr-book-desc[b-i3ti8cgeyl] {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    color: rgba(55, 71, 79, 0.60);
    line-height: 1.6;
    flex: 1;
}

.ecr-book-btns[b-i3ti8cgeyl] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

/* Botón primario (Descargar) */
.ecr-book-btn[b-i3ti8cgeyl] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background-color: var(--primary, #2E7D32);
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 1.125rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.ecr-book-btn:hover[b-i3ti8cgeyl] {
    background-color: #1B5E20;
}

/* Botón secundario (Vista previa) */
.ecr-book-btn--secondary[b-i3ti8cgeyl] {
    background-color: transparent;
    color: var(--primary, #2E7D32);
    border: 1.5px solid var(--primary, #2E7D32);
}

.ecr-book-btn--secondary:hover[b-i3ti8cgeyl] {
    background-color: rgba(46, 125, 50, 0.06);
}

.ecr-book-meta[b-i3ti8cgeyl] {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: rgba(55, 71, 79, 0.35);
    margin-top: 0;
}

/* =======================================================================
   MODAL DE VISTA PREVIA (ecr-preview-*)
   Overlay oscuro + modal con iframe para visualizar el PDF
   ======================================================================= */

.ecr-preview-overlay[b-i3ti8cgeyl] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: ecrFadeIn-b-i3ti8cgeyl 0.2s ease;
}

@keyframes ecrFadeIn-b-i3ti8cgeyl {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ecr-preview-modal[b-i3ti8cgeyl] {
    background-color: #ffffff;
    border-radius: 0.75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 900px;
    max-height: 96vh;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.40);
    animation: ecrScaleIn-b-i3ti8cgeyl 0.2s ease;
}

@keyframes ecrScaleIn-b-i3ti8cgeyl {
    from { transform: scale(0.93); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.ecr-preview-header[b-i3ti8cgeyl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid rgba(55, 71, 79, 0.10);
    background-color: #f8f9fa;
    flex-shrink: 0;
}

.ecr-preview-title[b-i3ti8cgeyl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Bitter', Georgia, serif;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--title);
}

.ecr-preview-actions[b-i3ti8cgeyl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ecr-preview-dl[b-i3ti8cgeyl] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background-color: var(--primary, #2E7D32);
    color: #ffffff;
    border-radius: 0.375rem;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.ecr-preview-dl:hover[b-i3ti8cgeyl] {
    background-color: #1B5E20;
}

.ecr-preview-close[b-i3ti8cgeyl] {
    background: none;
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 1.125rem;
    cursor: pointer;
    color: rgba(55, 71, 79, 0.50);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ecr-preview-close:hover[b-i3ti8cgeyl] {
    background-color: rgba(55, 71, 79, 0.08);
    color: var(--title);
}

.ecr-preview-iframe[b-i3ti8cgeyl] {
    flex: 1;
    width: 100%;
    min-height: 680px;
    border: none;
}

/* =======================================================================
   BOTÓN VOLVER
   Centrado debajo de la tarjeta doc y antes del pie de página
   ======================================================================= */

.ecr-seccion-volver[b-i3ti8cgeyl] {
    max-width: 64rem;
    margin: 2rem auto 0;
    padding: 0 1rem 3rem;
    display: flex;
    justify-content: center;
}

@media (min-width: 640px) {
    .ecr-seccion-volver[b-i3ti8cgeyl] {
        padding: 0 1.5rem 3rem;
    }
}

@media (min-width: 1024px) {
    .ecr-seccion-volver[b-i3ti8cgeyl] {
        padding: 0 2rem 3rem;
    }
}

@media (min-width: 1600px) {
    .ecr-seccion-volver[b-i3ti8cgeyl] {
        max-width: 80rem;
    }
}

.ecr-btn-volver[b-i3ti8cgeyl] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(55, 71, 79, 0.50);
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.ecr-btn-volver:hover[b-i3ti8cgeyl] {
    color: var(--primary, #2E7D32);
    background-color: rgba(46, 125, 50, 0.06);
}

/* =======================================================================
   RESPONSIVE — mobile (< 640px)
   ======================================================================= */

@media (max-width: 640px) {

    .ecr-pagina[b-i3ti8cgeyl] {
        padding: 1rem 0 2rem;
    }

    .ecr-articulo[b-i3ti8cgeyl] {
        padding: 0 1rem;
    }

    .ecr-campos-grid[b-i3ti8cgeyl] {
        grid-template-columns: 1fr;
    }

    .ecr-distinciones-grid[b-i3ti8cgeyl] {
        grid-template-columns: 1fr;
    }

    .ecr-infog-funnels[b-i3ti8cgeyl] {
        flex-direction: column;
        gap: 2.5rem;
        min-height: unset;
        padding-bottom: 2rem;
    }

    .ecr-infog-vs[b-i3ti8cgeyl] {
        display: none;
    }

    .ecr-infog-columna[b-i3ti8cgeyl] {
        flex: 1;
        width: 100%;
        padding: 1.5rem 1rem;
    }

    .ecr-infog-bandas[b-i3ti8cgeyl] {
        width: 100%;
    }

    .ecr-barchart-encabezado[b-i3ti8cgeyl] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .ecr-req-tabla[b-i3ti8cgeyl] {
        gap: 0.5rem;
    }

    .ecr-req-celda[b-i3ti8cgeyl] {
        padding: 0.5rem 0.375rem;
    }

    .ecr-stepper__pasos[b-i3ti8cgeyl] {
        gap: 1rem;
    }

    /* Tarjeta libro: apilada verticalmente en mobile */
    .ecr-book-card[b-i3ti8cgeyl] {
        flex-direction: column;
    }

    .ecr-book-cover-panel[b-i3ti8cgeyl] {
        width: 100%;
        min-width: unset;
        padding: 1.5rem;
        min-height: 180px;
    }

    .ecr-book-cover-img[b-i3ti8cgeyl] {
        max-width: 110px;
    }

    .ecr-book-content[b-i3ti8cgeyl] {
        padding: 1.25rem;
    }

    .ecr-book-btns[b-i3ti8cgeyl] {
        flex-direction: column;
    }

    .ecr-book-btn[b-i3ti8cgeyl] {
        justify-content: center;
    }

    /* Modal en mobile */
    .ecr-preview-overlay[b-i3ti8cgeyl] {
        padding: 0.5rem;
        align-items: flex-end;
    }

    .ecr-preview-modal[b-i3ti8cgeyl] {
        max-height: 98vh;
        border-radius: 0.75rem 0.75rem 0 0;
    }

    .ecr-preview-iframe[b-i3ti8cgeyl] {
        min-height: 540px;
    }

    .ecr-seccion-doc[b-i3ti8cgeyl] {
        padding: 1.5rem 1rem 0;
    }

    .ecr-seccion-volver[b-i3ti8cgeyl] {
        padding: 0 1rem 2rem;
    }
}

/* =======================================================================
   ACCESIBILIDAD — reducir movimiento
   ======================================================================= */

@media (prefers-reduced-motion: reduce) {
    .ecr-seccion[b-i3ti8cgeyl] {
        animation: none;
    }

    .ecr-preview-overlay[b-i3ti8cgeyl],
    .ecr-preview-modal[b-i3ti8cgeyl] {
        animation: none;
    }
}
/* /Pages/Especialidades/Ejemplos.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   Ejemplos.razor.css — Página /especialidades/ejemplos
   Port de SpecialtiesExamplesPage.tsx — Calco visual exacto.
   Prefijo: eje-
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Página ── */
.eje-pagina[b-l9pfgdbqrs] {
    background-color: var(--background, #F9F7F2);
    min-height: 100vh;
}

/* ════════════════════════════════════════════
   SECCIONES
   ════════════════════════════════════════════ */

.eje-seccion-busqueda[b-l9pfgdbqrs] {
    max-width: 75rem; /* 1200px */
    margin: 0 auto;
    padding: 1.5rem 1.25rem 0.5rem;
}

.eje-seccion-grilla[b-l9pfgdbqrs] {
    max-width: 75rem;
    margin: 0 auto;
    padding: 2rem 1.25rem;
}

.eje-seccion-volver[b-l9pfgdbqrs] {
    max-width: 75rem;
    margin: 0 auto;
    padding: 0 1.25rem 4rem;
}

@media (min-width: 640px) {
    .eje-seccion-busqueda[b-l9pfgdbqrs] {
        padding: 1.5rem 2rem 0.5rem;
    }

    .eje-seccion-grilla[b-l9pfgdbqrs] {
        padding: 2rem 2rem;
    }

    .eje-seccion-volver[b-l9pfgdbqrs] {
        padding: 0 2rem 4rem;
    }
}

/* ════════════════════════════════════════════
   BUSCADOR
   ════════════════════════════════════════════ */

.eje-busqueda-wrap[b-l9pfgdbqrs] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

@media (min-width: 640px) {
    .eje-busqueda-wrap[b-l9pfgdbqrs] {
        flex-direction: row;
        align-items: center;
    }
}

.eje-busqueda-campo[b-l9pfgdbqrs] {
    position: relative;
    flex: 1;
    max-width: 28rem;
    width: 100%;
}

.eje-busqueda-icono[b-l9pfgdbqrs] {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.875rem;
    color: rgba(55, 71, 79, 0.25);
    pointer-events: none;
}

.eje-busqueda-input[b-l9pfgdbqrs] {
    width: 100%;
    padding: 0.625rem 2.5rem 0.625rem 2.5rem;
    border-radius: 0.75rem;
    background-color: white;
    border: 1px solid rgba(55, 71, 79, 0.1);
    font-size: 0.875rem;
    color: rgba(55, 71, 79, 0.8);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
}

.eje-busqueda-input[b-l9pfgdbqrs]::placeholder {
    color: rgba(55, 71, 79, 0.25);
}

.eje-busqueda-input:focus[b-l9pfgdbqrs] {
    border-color: rgba(46, 125, 50, 0.3);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12);
}

.eje-busqueda-limpiar[b-l9pfgdbqrs] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    color: rgba(55, 71, 79, 0.25);
    padding: 0;
    transition: color 0.2s ease;
    font-family: inherit;
}

.eje-busqueda-limpiar:hover[b-l9pfgdbqrs] {
    color: rgba(55, 71, 79, 0.5);
}

.eje-busqueda-resultados[b-l9pfgdbqrs] {
    font-size: 0.75rem;
    color: rgba(55, 71, 79, 0.35);
    white-space: nowrap;
}

/* ════════════════════════════════════════════
   GRILLA DE TARJETAS
   ════════════════════════════════════════════ */

.eje-grilla[b-l9pfgdbqrs] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .eje-grilla[b-l9pfgdbqrs] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .eje-grilla[b-l9pfgdbqrs] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Tarjeta ── */
.eje-tarjeta[b-l9pfgdbqrs] {
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(55, 71, 79, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    background-color: white;
    transition: box-shadow 0.3s ease;
    animation: ejeFadeUp-b-l9pfgdbqrs 0.4s ease both;
}

.eje-tarjeta:hover[b-l9pfgdbqrs] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@keyframes ejeFadeUp-b-l9pfgdbqrs {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .eje-tarjeta[b-l9pfgdbqrs] {
        animation: none;
    }
}

/* ── Cabecera coloreada ── */
.eje-tarjeta__cabecera[b-l9pfgdbqrs] {
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.eje-tarjeta__icono-caja[b-l9pfgdbqrs] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background-color: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.eje-tarjeta__icono[b-l9pfgdbqrs] {
    font-size: 0.9375rem;
    color: white;
}

.eje-tarjeta__titulo[b-l9pfgdbqrs] {
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}

/* ── Cuerpo ── */
.eje-tarjeta__cuerpo[b-l9pfgdbqrs] {
    flex: 1;
    padding: 1rem 1.25rem;
}

/* ── Lista de items ── */
.eje-tarjeta__lista[b-l9pfgdbqrs] {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 1;
    column-gap: 0;
}

/* Más de 12 items: 2 columnas */
.eje-tarjeta__lista--2col[b-l9pfgdbqrs] {
    columns: 2;
}

.eje-tarjeta__item[b-l9pfgdbqrs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 3px 0;
    break-inside: avoid;
}

.eje-tarjeta__bullet[b-l9pfgdbqrs] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0.35;
}

.eje-tarjeta__texto[b-l9pfgdbqrs] {
    font-size: 0.78rem;
    color: rgba(55, 71, 79, 0.65);
    line-height: 1.375;
}

/* ── Sin resultados ── */
.eje-tarjeta__sin-resultado[b-l9pfgdbqrs] {
    font-size: 0.875rem;
    color: rgba(55, 71, 79, 0.3);
    text-align: center;
    padding: 1.5rem 0;
    font-style: italic;
    margin: 0;
}

/* ── Pie / contador ── */
.eje-tarjeta__pie[b-l9pfgdbqrs] {
    padding: 0.625rem 1.25rem;
    border-top: 1px solid rgba(55, 71, 79, 0.06);
    text-align: center;
    font-size: 0.7rem;
    color: rgba(55, 71, 79, 0.3);
}

/* ════════════════════════════════════════════
   HIGHLIGHT DE BÚSQUEDA
   ════════════════════════════════════════════ */

[b-l9pfgdbqrs] .eje-highlight {
    background-color: rgba(251, 191, 36, 0.6);
    color: rgba(55, 71, 79, 0.8);
    border-radius: 2px;
    padding: 0 1px;
}

/* ════════════════════════════════════════════
   BOTÓN VOLVER
   ════════════════════════════════════════════ */

.eje-volver-btn[b-l9pfgdbqrs] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    padding: 1rem 1.5rem;
    background-color: #1B5E20;
    color: white;
    border-radius: 0.75rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 4px 14px rgba(27, 94, 32, 0.25);
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.eje-volver-btn:hover[b-l9pfgdbqrs] {
    background-color: #145218;
    color: white;
}

.eje-volver-btn:active[b-l9pfgdbqrs] {
    transform: scale(0.99);
}
/* /Pages/Especialidades/Index.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════
   ESPECIALIDADES — Página pública de insignias de especialidades
   ══════════════════════════════════════════════════════════════════ */

/* ── ANIMACIONES ─────────────────────────────────────────────────── */

@keyframes espFadeUp-b-cw26017xm2 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.esp-anim-up[b-cw26017xm2] {
    animation: espFadeUp-b-cw26017xm2 0.55s ease both;
}

.esp-anim-up--d1[b-cw26017xm2] {
    animation-delay: 0.12s;
}

.esp-anim-up--d2[b-cw26017xm2] {
    animation-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {
    .esp-anim-up[b-cw26017xm2],
    .esp-anim-up--d1[b-cw26017xm2],
    .esp-anim-up--d2[b-cw26017xm2] {
        animation: none;
    }
}

/* ── PÁGINA ──────────────────────────────────────────────────────── */

.esp-page[b-cw26017xm2] {
    background-color: var(--background, #F9F7F2);
    min-height: 100vh;
    padding-bottom: 3rem;
}

.esp-contenedor[b-cw26017xm2] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

@media (min-width: 640px) {
    .esp-contenedor[b-cw26017xm2] {
        padding: 0 2rem;
    }
}


/* ── SECCIÓN ─────────────────────────────────────────────────────── */

.esp-seccion[b-cw26017xm2] {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

/* ── BADGE / LABEL ───────────────────────────────────────────────── */

.esp-badge[b-cw26017xm2] {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #2E7D32;
    background-color: rgba(46, 125, 50, 0.08);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    margin-bottom: 1rem;
    font-family: var(--font-sans, 'Inter', sans-serif);
    user-select: none;
}

/* ── TÍTULOS ─────────────────────────────────────────────────────── */

.esp-titulo[b-cw26017xm2] {
    font-family: var(--font-serif, 'Bitter', Georgia, serif);
    font-size: clamp(1.3rem, 3vw, 1.6rem);
    font-weight: 700;
    color: var(--title, #263238);
    margin: 0 0 0.5rem;
    line-height: 1.25;
}

/* Cuando va dentro del header con ícono, el margin lo maneja el contenedor */
.esp-titulo--con-icono[b-cw26017xm2] {
    margin: 0;
}

.esp-subtitulo[b-cw26017xm2] {
    font-family: var(--font-serif, 'Bitter', Georgia, serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--title, #263238);
    margin: 0 0 0.25rem;
}

.esp-subtitulo--inline[b-cw26017xm2] {
    margin: 0 0 0.25rem;
}

.esp-subtitulo-desc[b-cw26017xm2] {
    font-size: 0.75rem;
    color: rgba(55, 71, 79, 0.4);
    margin: 0 0 1.5rem;
    font-family: var(--font-sans, 'Inter', sans-serif);
}

.esp-subtitulo-desc--indent[b-cw26017xm2] {
    padding-left: 2.75rem;
}

/* ── TEXTO INTRO ─────────────────────────────────────────────────── */

.esp-intro-texto[b-cw26017xm2] {
    font-size: 0.875rem;
    color: rgba(55, 71, 79, 0.55);
    line-height: 1.75;
    margin: 0 0 2rem;
    max-width: 700px;
    font-family: var(--font-sans, 'Inter', sans-serif);
}

/* Alinea con el texto del título cuando hay ícono (icon 40px + gap 12px = ~52px) */
.esp-intro-texto--indent[b-cw26017xm2] {
    padding-left: 3.25rem;
}

/* ── HEADER DE SECCIÓN CON ÍCONO ─────────────────────────────────── */

.esp-seccion-header[b-cw26017xm2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.esp-seccion-icono[b-cw26017xm2] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background-color: rgba(46, 125, 50, 0.08);
    color: #2E7D32;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.esp-seccion-icono--purpura[b-cw26017xm2] {
    background-color: rgba(142, 36, 170, 0.08);
    color: #8E24AA;
}

.esp-seccion-icono--ambar[b-cw26017xm2] {
    background-color: rgba(245, 127, 23, 0.08);
    color: #F57F17;
}

/* ── WHITE BOX ───────────────────────────────────────────────────── */

.esp-box[b-cw26017xm2] {
    background-color: #FFFFFF;
    border-radius: 1rem;
    border: 1px solid rgba(55, 71, 79, 0.08);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06);
    padding: 1.5rem;
}

@media (min-width: 640px) {
    .esp-box[b-cw26017xm2] {
        padding: 2rem;
    }
}

.esp-box--mb[b-cw26017xm2] {
    margin-bottom: 1.5rem;
}

.esp-box__imagen[b-cw26017xm2] {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.esp-box__imagen--mb[b-cw26017xm2] {
    margin-bottom: 1rem;
}

/* ── IMAGEN CENTRADA ─────────────────────────────────────────────── */
/* max-width base (Sección A — foto de todos los campos) */
.esp-img-centrada[b-cw26017xm2] {
    width: 100%;
    max-width: 900px; /* TAMAÑO IMG SECCIÓN A */
    height: auto;
    object-fit: contain;
}

/* TAMAÑO IMG VARIACIONES POR RAMA — ajustar max-width */
.esp-img-centrada--md[b-cw26017xm2] {
    max-width: 660px;
}

/* TAMAÑO IMG VARIANTES CON BORDE (Fondo_especialistas.gif) — ajustar max-width independiente */
.esp-img-variantes-borde[b-cw26017xm2] {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 340px; /* TAMAÑO IMG VARIANTES CON BORDE */
    height: auto;
    object-fit: contain;
}

/* ── FLEX DE ICONOS DE CAMPOS — Sección A ───────────────── */

.esp-campos-flex[b-cw26017xm2] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.esp-campo-item[b-cw26017xm2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* TAMAÑO ICONOS CAMPOS — ajustar width/height */
.esp-campo-img[b-cw26017xm2] {
    width: 7rem;
    height: 7rem;
    object-fit: contain;
}

.esp-campo-etiqueta[b-cw26017xm2] {
    font-size: 0.75rem;
    color: rgba(55, 71, 79, 0.55);
    font-family: var(--font-sans, 'Inter', sans-serif);
    text-align: center;
}

/* ── LEYENDA DE COLORES ──────────────────────────────────────────── */

.esp-leyenda[b-cw26017xm2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(55, 71, 79, 0.06);
}

.esp-leyenda--mt[b-cw26017xm2] {
    margin-top: 1.5rem;
}

.esp-leyenda__item[b-cw26017xm2] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.esp-leyenda__color[b-cw26017xm2] {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.2rem;
    flex-shrink: 0;
}

.esp-leyenda__etiqueta[b-cw26017xm2] {
    font-size: 0.6875rem;
    color: rgba(55, 71, 79, 0.5);
    font-family: var(--font-sans, 'Inter', sans-serif);
}

/* ── CAPTION BOX ─────────────────────────────────────────────────── */

.esp-caption[b-cw26017xm2] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background-color: rgba(55, 71, 79, 0.03);
    border: 1px solid rgba(55, 71, 79, 0.06);
}

.esp-caption__dot[b-cw26017xm2] {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 9999px;
    background-color: rgba(46, 125, 50, 0.4);
    flex-shrink: 0;
    margin-top: 0.4375rem;
}

.esp-caption p[b-cw26017xm2] {
    font-size: 0.875rem;
    color: rgba(55, 71, 79, 0.55);
    line-height: 1.7;
    margin: 0;
    font-family: var(--font-sans, 'Inter', sans-serif);
}

/* ── DIVISOR ─────────────────────────────────────────────────────── */

.esp-divisor[b-cw26017xm2] {
    height: 1px;
    background-color: rgba(55, 71, 79, 0.08);
    margin: 0;
}

/* ── EFECTO DE ACUMULACIÓN — HEADER ──────────────────────────────── */

.esp-acum-header[b-cw26017xm2] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.esp-acum-icono[b-cw26017xm2] {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background-color: rgba(245, 127, 23, 0.1);
    color: #F57F17;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* ── EFECTO DE ACUMULACIÓN — FLOW ────────────────────────────────── */

.esp-flow[b-cw26017xm2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .esp-flow[b-cw26017xm2] {
        flex-direction: row;
        justify-content: center;
        gap: 2.5rem;
    }
}

.esp-flow__paso[b-cw26017xm2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.esp-flow__imagen-wrap[b-cw26017xm2] {
    background-color: var(--background, #F9F7F2);
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(55, 71, 79, 0.06);
}

/* TAMAÑO IMÁGENES ACUMULACIÓN — ajustar width/height para cambiar tamaño */
.esp-flow__img[b-cw26017xm2] {
    width: 7.5rem;
    height: 7.5rem;
    object-fit: contain;
}

.esp-flow__img--lg[b-cw26017xm2] {
    width: 9rem;
    height: 9rem;
}

.esp-flow__label[b-cw26017xm2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.esp-flow__label-top[b-cw26017xm2] {
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(55, 71, 79, 0.35);
    font-family: var(--font-sans, 'Inter', sans-serif);
}

.esp-flow__label-desc[b-cw26017xm2] {
    font-size: 0.75rem;
    color: rgba(55, 71, 79, 0.55);
    font-family: var(--font-sans, 'Inter', sans-serif);
}

/* En mobile la flecha apunta hacia abajo */
.esp-flow__flecha[b-cw26017xm2] {
    color: rgba(55, 71, 79, 0.2);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(90deg);
}

@media (min-width: 640px) {
    .esp-flow__flecha[b-cw26017xm2] {
        transform: rotate(0deg);
    }
}

/* ── GRID TRIÁNGULOS — Sección C ─────────────────────────────────── */

.esp-tri-grid[b-cw26017xm2] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 0.5rem;
}

@media (min-width: 640px) {
    .esp-tri-grid[b-cw26017xm2] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.esp-tri-item[b-cw26017xm2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
}

.esp-tri-img-wrap[b-cw26017xm2] {
    background-color: var(--background, #F9F7F2);
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(55, 71, 79, 0.06);
    width: 100%;
    display: flex;
    justify-content: center;
}

/* TAMAÑO TRIANGULOS CAMPO — ajustar width/height para cambiar tamaño */
.esp-tri-img[b-cw26017xm2] {
    width: 6rem;
    height: 6rem;
    object-fit: contain;
}

.esp-tri-label[b-cw26017xm2] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: rgba(55, 71, 79, 0.6);
    font-family: var(--font-sans, 'Inter', sans-serif);
}

/* ── VARIANTES CON BORDE DE RAMA — Sección C ───────────────── */

.esp-variantes-borde[b-cw26017xm2] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(55, 71, 79, 0.06);
}

.esp-variantes-titulo[b-cw26017xm2] {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(55, 71, 79, 0.35);
    margin: 0 0 1rem;
    font-family: var(--font-sans, 'Inter', sans-serif);
}

/* ── ESPECIALISTAS POR RAMA — Sección D ──────────────────────────── */
/* 2 por fila con display flex, centrado horizontalmente */

.esp-spec-flex[b-cw26017xm2] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin: 1rem 0;
}

.esp-spec-item[b-cw26017xm2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: calc(50% - 0.75rem);
    max-width: 300px;
}

.esp-spec-img[b-cw26017xm2] {
    width: 100%;
    max-width: 220px;
    height: auto;
    object-fit: contain;
    border-radius: 0.5rem;
}

.esp-spec-label[b-cw26017xm2] {
    font-size: 0.75rem;
    color: rgba(55, 71, 79, 0.55);
    text-align: center;
    font-family: var(--font-sans, 'Inter', sans-serif);
    line-height: 1.4;
}

/* ── NAVEGACIÓN AL PIE ───────────────────────────────────────────── */

.esp-nav-footer[b-cw26017xm2] {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.esp-nav-grid[b-cw26017xm2] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .esp-nav-grid[b-cw26017xm2] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.esp-nav-card[b-cw26017xm2] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background-color: var(--background, #F9F7F2);
    border: 1px solid #E0DBD1;
    border-radius: 1rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    text-decoration: none;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.esp-nav-card:hover[b-cw26017xm2] {
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.08);
    border-color: rgba(46, 125, 50, 0.3);
}

.esp-nav-card:hover .esp-nav-card__titulo[b-cw26017xm2] {
    color: #2E7D32;
}

.esp-nav-card:hover .esp-nav-card__icono[b-cw26017xm2] {
    background-color: rgba(46, 125, 50, 0.15);
}

.esp-nav-card:hover .esp-nav-card__arrow[b-cw26017xm2] {
    color: #2E7D32;
}

.esp-nav-card__icono[b-cw26017xm2] {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background-color: rgba(46, 125, 50, 0.1);
    color: #2E7D32;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    transition: background-color 0.3s ease;
}

.esp-nav-card__body[b-cw26017xm2] {
    flex: 1;
    min-width: 0;
}

.esp-nav-card__titulo[b-cw26017xm2] {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--title, #263238);
    margin: 0 0 0.375rem;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.esp-nav-card__desc[b-cw26017xm2] {
    font-size: 0.875rem;
    color: rgba(55, 71, 79, 0.5);
    line-height: 1.6;
    margin: 0;
    font-family: var(--font-sans, 'Inter', sans-serif);
}

.esp-nav-card__arrow[b-cw26017xm2] {
    flex-shrink: 0;
    font-size: 0.875rem;
    color: rgba(55, 71, 79, 0.25);
    margin-top: 0.125rem;
    transition: color 0.3s ease;
}
/* /Pages/Formularios/FormulariosComponent.razor.rz.scp.css */
/* =======================================================================
   FormulariosComponent.razor.css — Estilos del componente de formularios
   =======================================================================
   He aislado estos estilos en un archivo .razor.css para que el
   scope de Blazor los aplique únicamente dentro del componente,
   evitando colisiones con otros estilos de la aplicación.

   Prefijo: fm- (formularios)
   Paleta base:
     --background   #F9F7F2  fondo general de la app
     --title        #37474F  color de títulos
     --border       #E0E0E0  bordes de filas
   ======================================================================= */

/* -----------------------------------------------------------------------
   SECCIÓN — contenedor de cada grupo temático
   ----------------------------------------------------------------------- */
.fm-section[b-71h84fdjv0] {
    margin-bottom: 3rem;
}

/* -----------------------------------------------------------------------
   ENCABEZADO DE SECCIÓN — barra lateral + título + descripción
   Port del SectionHeader de FormsPage.tsx
   ----------------------------------------------------------------------- */
.fm-section-header[b-71h84fdjv0] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

/* Barra vertical coloreada a la izquierda del título */
.fm-section-bar[b-71h84fdjv0] {
    width: 6px;
    height: 2rem;
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 2px;
}

.fm-section-title[b-71h84fdjv0] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #37474F;
    margin: 0 0 0.2rem;
    font-family: Georgia, 'Times New Roman', serif;
}

.fm-section-desc[b-71h84fdjv0] {
    font-size: 0.82rem;
    color: #9E9E9E;
    margin: 0;
}

/* -----------------------------------------------------------------------
   LISTA — apila las filas verticalmente con separación
   ----------------------------------------------------------------------- */
.fm-list[b-71h84fdjv0] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

/* -----------------------------------------------------------------------
   FILA — Port del componente FileRow de FormsPage.tsx
   Flexbox horizontal: icono | info | acciones
   ----------------------------------------------------------------------- */
.fm-row[b-71h84fdjv0] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: 0.5rem;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.fm-row:hover[b-71h84fdjv0] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-color: #BDBDBD;
}

/* Envoltorio de fila con aviso especial debajo (Ficha Médica) */
.fm-row-wrapper[b-71h84fdjv0] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* -----------------------------------------------------------------------
   ICONO — cuadrado redondeado con color temático de la sección
   ----------------------------------------------------------------------- */
.fm-icon-wrap[b-71h84fdjv0] {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* -----------------------------------------------------------------------
   INFO — título y descripción del documento
   ----------------------------------------------------------------------- */
.fm-info[b-71h84fdjv0] {
    flex: 1;
    min-width: 0;
}

.fm-name[b-71h84fdjv0] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #37474F;
    margin: 0 0 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.fm-row:hover .fm-name[b-71h84fdjv0] {
    color: #2E7D32;
}

.fm-desc[b-71h84fdjv0] {
    font-size: 0.8125rem;
    color: #9E9E9E;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -----------------------------------------------------------------------
   ACCIONES — botones "Vista Previa" y "Descargar"
   ----------------------------------------------------------------------- */
.fm-actions[b-71h84fdjv0] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

/* Base compartida de ambos botones */
.fm-btn[b-71h84fdjv0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 0.375rem;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

/* Botón outline — "Vista Previa" */
.fm-btn--outline[b-71h84fdjv0] {
    color: #616161;
    background-color: transparent;
    border: 1px solid #BDBDBD;
}

.fm-btn--outline:hover[b-71h84fdjv0] {
    background-color: #F5F5F5;
    color: #212121;
    border-color: #9E9E9E;
}

/* Botón sólido — "Descargar" (color inyectado inline por sección) */
.fm-btn--solid[b-71h84fdjv0] {
    color: #ffffff;
    border: none;
}

.fm-btn--solid:hover[b-71h84fdjv0] {
    opacity: 0.88;
    color: #ffffff;
}

/* -----------------------------------------------------------------------
   ALERTA INFORMATIVA — nota debajo de la Ficha Médica
   Port del bloque "Aviso especial" de FormsPage.tsx
   ----------------------------------------------------------------------- */
.fm-alert[b-71h84fdjv0] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 0.9rem;
    margin-left: 0;
    background-color: #FFF8E1;
    border: 1px solid #FFECB3;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: #7B3D00;
}

.fm-alert__icon[b-71h84fdjv0] {
    flex-shrink: 0;
    margin-top: 2px;
    color: #E65100;
}

.fm-alert__text[b-71h84fdjv0] {
    margin: 0;
    line-height: 1.5;
}

/* -----------------------------------------------------------------------
   RESPONSIVE — pantallas pequeñas (≤ 640 px)
   En mobile, la fila se apila verticalmente y los botones ocupan
   todo el ancho disponible, replicando el comportamiento de React.
   ----------------------------------------------------------------------- */
/* -----------------------------------------------------------------------
   SEPARADOR DE SUBSECCIÓN — divisor dentro de una sección (ej. Familia)
   Separa visualmente formularios por audiencia (padres vs. scouts adultos)
   ----------------------------------------------------------------------- */
.fm-subsection-divider[b-71h84fdjv0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0 0.25rem;
}

.fm-subsection-line[b-71h84fdjv0] {
    flex: 1;
    border: none;
    border-top: 1px dashed #D0D0D0;
    margin: 0;
}

.fm-subsection-label[b-71h84fdjv0] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #BDBDBD;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .fm-row[b-71h84fdjv0] {
        flex-direction: column;
        align-items: flex-start;
    }

    .fm-actions[b-71h84fdjv0] {
        width: 100%;
        margin-top: 0.5rem;
    }

    .fm-btn[b-71h84fdjv0] {
        flex: 1;
        justify-content: center;
    }

    .fm-name[b-71h84fdjv0],
    .fm-desc[b-71h84fdjv0] {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }
}

/* -----------------------------------------------------------------------
   MODAL DE VISTA PREVIA — mismo patrón que bcat-modal de Biblioteca
   ----------------------------------------------------------------------- */
.fm-modal-backdrop[b-71h84fdjv0] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.fm-modal[b-71h84fdjv0] {
    background: #fff;
    border-radius: 0.75rem;
    width: 100%;
    max-width: 860px;
    max-height: 96vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.fm-modal-header[b-71h84fdjv0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #E0E0E0;
    flex-shrink: 0;
}

.fm-modal-title[b-71h84fdjv0] {
    font-size: 1rem;
    font-weight: 700;
    color: #37474F;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fm-modal-close[b-71h84fdjv0] {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    color: #9E9E9E;
    font-size: 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fm-modal-close:hover[b-71h84fdjv0] {
    background-color: #F5F5F5;
    color: #37474F;
}

.fm-modal-body[b-71h84fdjv0] {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.fm-modal-iframe[b-71h84fdjv0] {
    width: 100%;
    height: 100%;
    min-height: 680px;
    border: none;
    display: block;
}

@media (max-width: 640px) {
    .fm-modal[b-71h84fdjv0] {
        max-height: 98vh;
    }

    .fm-modal-iframe[b-71h84fdjv0] {
        min-height: 520px;
    }
}
/* /Pages/Formularios/Index.razor.rz.scp.css */
/* =======================================================================
   Formularios.razor.css — Estilos estructurales de la página Formularios
   =======================================================================
   He separado los estilos estructurales de la página de los estilos
   del componente hijo (FormulariosComponent.razor.css) para mantener
   una separación de responsabilidades clara.

   Prefijo: fmp- (formularios page)
   ======================================================================= */

/* -----------------------------------------------------------------------
   CONTENEDOR PRINCIPAL — replica el max-w-5xl + px-4 py-12 del origen
   ----------------------------------------------------------------------- */
.fmp-container[b-oe90q7bycj] {
    max-width: 64rem;      /* ≈ max-w-5xl (1024 px) */
    margin: 0 auto;
    padding: 3rem 1rem;    /* py-12 px-4 */
    min-height: 60vh;
    background-color: var(--background, #F9F7F2);
}

/* -----------------------------------------------------------------------
   RESPONSIVE — en pantallas pequeñas se reduce el padding lateral
   ----------------------------------------------------------------------- */
@media (max-width: 640px) {
    .fmp-container[b-oe90q7bycj] {
        padding: 2rem 0.75rem;
    }
}
/* /Pages/Fotos/Index.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * Pages/Fotos/Index.razor.css — Galería de Fotos
 * ──────────────────────────────────────────────────────────────────────
 * Estilo público editorial: Bitter para headings, Inter para body,
 * fondo crema, bordes redondeados generosos. NUNCA mezclar con admin.
 * ══════════════════════════════════════════════════════════════════════ */

/* ══════ CONTENEDOR PRINCIPAL ══════════════════════════════════════════ */
.fotos-contenedor[b-d4jsjlsjxw] {
    max-width: 80rem;
    margin: 0 auto;
    padding: 2rem 1rem;
}

@media (min-width: 640px) {
    .fotos-contenedor[b-d4jsjlsjxw] { padding: 2.5rem 1.5rem; }
}

@media (min-width: 1024px) {
    .fotos-contenedor[b-d4jsjlsjxw] { padding: 3rem 2rem; }
}

@media (min-width: 1600px) {
    .fotos-contenedor[b-d4jsjlsjxw] { max-width: 90rem; }
}

/* ══════ LOADING ══════════════════════════════════════════════════════ */
.fotos-loading[b-d4jsjlsjxw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 1rem;
    color: var(--text-secondary, #78909C);
    font-size: 1.125rem;
}

.fotos-loading i[b-d4jsjlsjxw] {
    font-size: 2rem;
    color: var(--primary, #2E7D32);
}

/* ══════ LAYOUT: SIDEBAR + MAIN ══════════════════════════════════════ */
.fotos-layout[b-d4jsjlsjxw] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

    @media (min-width: 1024px) {
    .fotos-layout[b-d4jsjlsjxw] {
        flex-direction: row;
        gap: 1.5rem;
    }
}

/* ══════ SIDEBAR (desktop) ═══════════════════════════════════════════ */
.fotos-sidebar[b-d4jsjlsjxw] {
    display: none;
}

@media (min-width: 1024px) {
    .fotos-sidebar[b-d4jsjlsjxw] {
        display: block;
        width: 320px;
        flex-shrink: 0;
        position: sticky;
        top: 5rem;
        align-self: flex-start;
    }
}

.fotos-sidebar-titulo[b-d4jsjlsjxw] {
    font-family: var(--font-serif, 'Bitter', Georgia, serif);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary, #78909C);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fotos-sidebar-titulo i[b-d4jsjlsjxw] {
    color: var(--primary, #2E7D32);
    font-size: 0.95rem;
}

.fotos-sidebar-grid[b-d4jsjlsjxw] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

/* ── Year Pills (compartido sidebar + dropdown) ─────────────────────── */
.fotos-anio-pill[b-d4jsjlsjxw] {
    position: relative;
    padding: 0.5rem 0.15rem;
    border: 1.5px solid rgba(46, 125, 50, 0.25);
    border-radius: 0.625rem;
    background: rgba(46, 125, 50, 0.08); /* Verde suave para años con fotos */
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary, #2E7D32);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

.fotos-anio-pill:disabled[b-d4jsjlsjxw] {
    cursor: default !important;
    pointer-events: none;
    opacity: 0.4 !important;
}

.fotos-anio-pill:hover:not(:disabled):not(.activo)[b-d4jsjlsjxw] {
    background: rgba(46, 125, 50, 0.15);
    border-color: rgba(46, 125, 50, 0.4);
}

/* Año seleccionado sobreescribe transparencias */
.fotos-anio-pill.activo[b-d4jsjlsjxw] {
    background: var(--primary, #2E7D32);
    color: #fff !important; /* Fuerza blanco incluso si era gris/rojo */
    border-color: var(--primary, #2E7D32);
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.25);
    opacity: 1 !important;
}

/* ── Sobreescritura especial para años VACÍOS cuando están activos (Mejor legibilidad) ── */
.fotos-anio-pill.vacio.activo[b-d4jsjlsjxw] {
    background: #FFD54F !important; /* Ámbar/Amarillo intenso */
    color: #9E7D23 !important; /* Mostaza oscuro (el mismo de los vacíos) */
    border-color: #FFB300 !important;
    box-shadow: 0 2px 8px rgba(255, 179, 0, 0.2);
}

/* ── ESTADOS PARA LíNEA DE TIEMPO COMPLETA ── */

/* Años sin fotos pero activos: Amarillo suave y legible */
.fotos-anio-pill.vacio[b-d4jsjlsjxw] {
    opacity: 1; /* Transparencia eliminada para mayor nitidez */
    background: rgba(255, 193, 7, 0.08); /* Fondo amarillo casi imperceptible */
    border-color: rgba(255, 193, 7, 0.25);
    color: #9E7D23; /* Mostaza oscuro (buen contraste) */
    cursor: pointer;
}

.fotos-anio-pill.vacio:hover:not(:disabled):not(.activo)[b-d4jsjlsjxw] {
    background: rgba(255, 193, 7, 0.12);
    border-color: rgba(255, 193, 7, 0.3);
}

/* Periodo de cierre (1964-1991): Gris y 40% opacidad (más visible que antes) */
.fotos-anio-pill.etapa-cierre[b-d4jsjlsjxw] {
    opacity: 0.4;
    background: rgba(144, 164, 174, 0.15);
    color: #607D8B;
    border-color: rgba(144, 164, 174, 0.3);
}

/* Año 1976: Rojo y 40% opacidad */
.fotos-anio-pill.especial-1976[b-d4jsjlsjxw] {
    opacity: 0.4;
    background: rgba(211, 47, 47, 0.1);
    color: #D32F2F;
    border-color: rgba(211, 47, 47, 0.3);
}

/* Dot verde para sidebar (indica que hay fotos) */
.fotos-anio-dot[b-d4jsjlsjxw] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary, #2E7D32);
}

.fotos-anio-pill.activo .fotos-anio-dot[b-d4jsjlsjxw] {
    background: rgba(255, 255, 255, 0.7);
}

/* Badge de conteo para dropdown mobile */
.fotos-anio-badge[b-d4jsjlsjxw] {
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0.05rem 0.35rem;
    border-radius: 0.5rem;
    background: rgba(46, 125, 50, 0.12);
    color: var(--primary, #2E7D32);
    font-size: 0.6875rem;
    font-weight: 700;
}

.fotos-anio-pill.activo .fotos-anio-badge[b-d4jsjlsjxw] {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* ── Sidebar stats ──────────────────────────────────────────────────── */
.fotos-sidebar-stats[b-d4jsjlsjxw] {
    padding-top: 1.25rem;
    border-top: 1.5px solid var(--accent, #ECE6D8);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fotos-stat[b-d4jsjlsjxw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fotos-stat-numero[b-d4jsjlsjxw] {
    font-family: var(--font-serif, 'Bitter', Georgia, serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary, #2E7D32);
}

.fotos-stat-label[b-d4jsjlsjxw] {
    font-size: 0.8125rem;
    color: var(--text-secondary, #78909C);
}

/* ══════ CONTENIDO PRINCIPAL ═════════════════════════════════════════ */
.fotos-main[b-d4jsjlsjxw] {
    flex: 1;
    min-width: 0;
}

.fotos-filtro-titulo[b-d4jsjlsjxw] {
    font-family: var(--font-serif, 'Bitter', Georgia, serif);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--title, #263238);
    margin: 0 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fotos-filtro-titulo i[b-d4jsjlsjxw] {
    color: var(--primary, #2E7D32);
    font-size: 1.15rem;
}

.fotos-filtro-count[b-d4jsjlsjxw] {
    font-weight: 400;
    font-size: 0.9375rem;
    color: var(--text-secondary, #78909C);
    background: rgba(120, 144, 156, 0.1);
    padding: 0.125rem 0.625rem;
    border-radius: 1rem;
}

/* ══════ GRID DE CARDS ═══════════════════════════════════════════════ */
.fotos-grid[b-d4jsjlsjxw] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 2rem;
    align-items: stretch;
}

@media (min-width: 640px) {
    .fotos-grid[b-d4jsjlsjxw] { grid-template-columns: repeat(2, 1fr); }
}

/* ── Card link ──────────────────────────────────────────────────────── */
.fotos-card-link[b-d4jsjlsjxw] {
    text-decoration: none;
    color: inherit;
    display: flex;
    min-width: 0;
    border-radius: 1rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.fotos-card-link:hover[b-d4jsjlsjxw] {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* ── Card ────────────────────────────────────────────────────────────── */
.fotos-card[b-d4jsjlsjxw] {
    background: var(--card, #FFFFFF);
    border-radius: 1rem;
    overflow: hidden;
    border: 1.5px solid var(--accent, #ECE6D8);
    transition: border-color 0.25s ease;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.fotos-card-link:hover .fotos-card[b-d4jsjlsjxw] {
    border-color: rgba(46, 125, 50, 0.3);
}

/* ── Card imagen ─────────────────────────────────────────────────────── */
.fotos-card-imagen[b-d4jsjlsjxw] {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #F0ECE3;
}

.fotos-card-img[b-d4jsjlsjxw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.fotos-card-link:hover .fotos-card-img[b-d4jsjlsjxw] {
    transform: scale(1.05);
}

/* Placeholder cuando no hay portada */
.fotos-card-placeholder[b-d4jsjlsjxw] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #F0ECE3 0%, #E8E2D6 100%);
    color: var(--accent, #ECE6D8);
    font-size: 2.5rem;
}

/* Overlay oscuro con CTA en hover */
.fotos-card-overlay[b-d4jsjlsjxw] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0) 50%
    );
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fotos-card-link:hover .fotos-card-overlay[b-d4jsjlsjxw] {
    opacity: 1;
}

.fotos-card-ver[b-d4jsjlsjxw] {
    background: rgba(255, 255, 255, 0.95);
    color: var(--primary, #2E7D32);
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transform: translateY(8px);
    transition: transform 0.3s ease;
}

.fotos-card-link:hover .fotos-card-ver[b-d4jsjlsjxw] {
    transform: translateY(0);
}

/* ── Card body (altura fija para uniformidad) ──────────────────────── */
.fotos-card-body[b-d4jsjlsjxw] {
    padding: 0.875rem 1rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ── Pills de unidad ─────────────────────────────────────────────────── */
.fotos-card-pills[b-d4jsjlsjxw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.fotos-pill-unidad[b-d4jsjlsjxw] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    background: var(--pill-bg, rgba(93, 64, 55, 0.1));
    color: var(--pill-color, #5D4037);
    white-space: nowrap;
    line-height: 1.4;
}

/* ── Card texto ──────────────────────────────────────────────────────── */
.fotos-card-titulo[b-d4jsjlsjxw] {
    font-family: var(--font-serif, 'Bitter', Georgia, serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--title, #263238);
    margin: 0 0 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.fotos-card-link:hover .fotos-card-titulo[b-d4jsjlsjxw] {
    color: var(--primary, #2E7D32);
}

.fotos-card-meta[b-d4jsjlsjxw] {
    font-size: 0.8125rem;
    color: var(--text-secondary, #78909C);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fotos-card-autor[b-d4jsjlsjxw] {
    font-size: 0.75rem;
    color: var(--text-secondary, #78909C);
    margin: 0.35rem 0 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.9;
}

.fotos-card-autor i[b-d4jsjlsjxw] {
    font-size: 0.7rem;
    color: var(--primary, #2E7D32);
}

/* ══════ ESTADO VACÍO ════════════════════════════════════════════════ */
.fotos-vacio[b-d4jsjlsjxw] {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--text-secondary, #78909C);
}

.fotos-vacio-icono[b-d4jsjlsjxw] {
    font-size: 3rem;
    color: var(--accent, #ECE6D8);
    margin-bottom: 1rem;
}

.fotos-vacio h3[b-d4jsjlsjxw] {
    font-family: var(--font-serif, 'Bitter', Georgia, serif);
    font-size: 1.25rem;
    color: var(--title, #263238);
    margin: 0 0 0.5rem;
}

.fotos-vacio p[b-d4jsjlsjxw] {
    font-size: 0.9375rem;
    margin: 0;
}

.fotos-vacio-contacto[b-d4jsjlsjxw] {
    margin-top: 1.5rem !important;
    font-size: 0.875rem !important;
    color: var(--text-secondary, #78909C);
}

.fotos-vacio-contacto a[b-d4jsjlsjxw] {
    color: var(--primary, #2E7D32);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed var(--primary, #2E7D32);
    transition: all 0.2s ease;
}

.fotos-vacio-contacto a:hover[b-d4jsjlsjxw] {
    color: #256428;
    border-bottom-style: solid;
}

/* ══════ DROPDOWN MOBILE ═════════════════════════════════════════════ */
.fotos-dropdown-mobile[b-d4jsjlsjxw] {
    display: block;
    margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
    .fotos-dropdown-mobile[b-d4jsjlsjxw] { display: none; }
}

.fotos-dropdown-btn[b-d4jsjlsjxw] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--card, #FFFFFF);
    border: 1.5px solid var(--accent, #ECE6D8);
    border-radius: 0.75rem;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--title, #263238);
    transition: border-color 0.2s ease;
}

.fotos-dropdown-btn:hover[b-d4jsjlsjxw] {
    border-color: rgba(46, 125, 50, 0.3);
}

.fotos-dropdown-btn i:first-child[b-d4jsjlsjxw] {
    color: var(--primary, #2E7D32);
}

.fotos-dropdown-count[b-d4jsjlsjxw] {
    margin-left: auto;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-secondary, #78909C);
}

.fotos-dropdown-chevron[b-d4jsjlsjxw] {
    transition: transform 0.3s ease;
    color: var(--text-secondary, #78909C);
    font-size: 0.75rem;
}

.fotos-dropdown-chevron.rotado[b-d4jsjlsjxw] {
    transform: rotate(180deg);
}

.fotos-dropdown-panel[b-d4jsjlsjxw] {
    margin-top: 0.5rem;
    padding: 1rem;
    background: var(--card, #FFFFFF);
    border: 1.5px solid var(--accent, #ECE6D8);
    border-radius: 0.75rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.fotos-dropdown-grid[b-d4jsjlsjxw] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

@media (min-width: 480px) {
    .fotos-dropdown-grid[b-d4jsjlsjxw] { grid-template-columns: repeat(5, 1fr); }
}

/* ══════ PAGINACIÓN ══════════════════════════════════════════════════ */
.fotos-paginacion[b-d4jsjlsjxw] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    padding: 1.5rem 0;
}

.fotos-pag-btn[b-d4jsjlsjxw] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border: 1.5px solid var(--accent, #ECE6D8);
    border-radius: 0.5rem;
    background: var(--card, #FFFFFF);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--title, #263238);
    cursor: pointer;
    transition: all 0.2s ease;
}

.fotos-pag-btn:hover:not(:disabled):not(.activo)[b-d4jsjlsjxw] {
    background: rgba(46, 125, 50, 0.06);
    border-color: rgba(46, 125, 50, 0.3);
}

.fotos-pag-btn.activo[b-d4jsjlsjxw] {
    background: var(--primary, #2E7D32);
    color: #fff;
    border-color: var(--primary, #2E7D32);
}

.fotos-pag-btn:disabled[b-d4jsjlsjxw] {
    opacity: 0.35;
    cursor: default;
}

.fotos-pag-ellipsis[b-d4jsjlsjxw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--text-secondary, #78909C);
    font-size: 0.875rem;
}

/* ══════ CTA FOOTER ══════════════════════════════════════════════════ */
.fotos-cta[b-d4jsjlsjxw] {
    position: relative;
    margin-top: 3rem;
    padding: 2rem 1.5rem;
    background: var(--accent, #ECE6D8);
    border-radius: 1.25rem;
    overflow: hidden;
}

.fotos-cta-decorativo[b-d4jsjlsjxw] {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    filter: blur(20px);
}

.fotos-cta-contenido[b-d4jsjlsjxw] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

@media (min-width: 640px) {
    .fotos-cta-contenido[b-d4jsjlsjxw] {
        flex-direction: row;
        text-align: left;
        gap: 1.5rem;
    }
}

.fotos-cta-icono[b-d4jsjlsjxw] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary, #2E7D32);
    color: #fff;
    border-radius: 1rem;
    font-size: 1.375rem;
    flex-shrink: 0;
    transform: rotate(3deg);
}

.fotos-cta-texto[b-d4jsjlsjxw] {
    flex: 1;
}

.fotos-cta-texto h3[b-d4jsjlsjxw] {
    font-family: var(--font-serif, 'Bitter', Georgia, serif);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--title, #263238);
    margin: 0 0 0.25rem;
}

.fotos-cta-texto p[b-d4jsjlsjxw] {
    font-size: 0.875rem;
    color: var(--text-secondary, #78909C);
    margin: 0;
    line-height: 1.5;
}

.fotos-cta-email[b-d4jsjlsjxw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--primary, #2E7D32);
    color: #fff;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.fotos-cta-email:hover[b-d4jsjlsjxw] {
    background: #256428;
    transform: translateY(-1px);
}

/* ══════ ACCESIBILIDAD ═══════════════════════════════════════════════ */
.fotos-card-link:focus-visible[b-d4jsjlsjxw] {
    outline: 3px solid var(--primary, #2E7D32);
    outline-offset: 2px;
    border-radius: 1rem;
}

.fotos-anio-pill:focus-visible[b-d4jsjlsjxw],
.fotos-pag-btn:focus-visible[b-d4jsjlsjxw],
.fotos-dropdown-btn:focus-visible[b-d4jsjlsjxw] {
    outline: 3px solid var(--primary, #2E7D32);
    outline-offset: 2px;
}

.fotos-cta-email:focus-visible[b-d4jsjlsjxw] {
    outline: 3px solid var(--primary, #2E7D32);
    outline-offset: 2px;
}

/* ══════ REDUCED MOTION ══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .fotos-card-link[b-d4jsjlsjxw],
    .fotos-card-img[b-d4jsjlsjxw],
    .fotos-card-overlay[b-d4jsjlsjxw],
    .fotos-card-ver[b-d4jsjlsjxw],
    .fotos-anio-pill[b-d4jsjlsjxw],
    .fotos-pag-btn[b-d4jsjlsjxw],
    .fotos-dropdown-chevron[b-d4jsjlsjxw],
    .fotos-cta-email[b-d4jsjlsjxw],
    .fotos-card-titulo[b-d4jsjlsjxw],
    .fotos-card[b-d4jsjlsjxw] {
        transition: none !important;
    }

    .fotos-card-link:hover[b-d4jsjlsjxw] {
        transform: none;
    }

    .fotos-card-link:hover .fotos-card-img[b-d4jsjlsjxw] {
        transform: none;
    }
}
/* /Pages/Funciones/Index.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * Funciones/Index.razor.css — Funciones de Patrulla
 * ──────────────────────────────────────────────────────────────────────
 * Página editorial pública. Mundo visual: cálido, Bitter, crema.
 * Paleta dominante: marrón #6D4C41, dorado #FFD600.
 * Prefijo: fn- (funciones)
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Animación compartida ─────────────────────────────────────────── */
@keyframes fnFadeUp-b-b93tqovo5g {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =======================================================================
   SECCIÓN 2 — TEXTO INTRODUCTORIO
   ======================================================================= */

.fn-intro-section[b-b93tqovo5g] {
    max-width: 62.5rem; /* 1000px */
    margin: 0 auto;
    padding: 2.5rem 1rem 1.5rem;
}

@media (min-width: 640px) {
    .fn-intro-section[b-b93tqovo5g] {
        padding: 3.5rem 1.5rem 1.5rem;
    }
}

.fn-intro-card[b-b93tqovo5g] {
    position: relative;
    background-color: var(--card, #ffffff);
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    border: 1px solid #EDE8E0;
    animation: fnFadeUp-b-b93tqovo5g 0.45s ease-out both;
}

.fn-intro-card__stripe[b-b93tqovo5g] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #6D4C41, #A1887F, #6D4C41);
}

.fn-intro-card__inner[b-b93tqovo5g] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.5rem;
}

@media (min-width: 640px) {
    .fn-intro-card__inner[b-b93tqovo5g] {
        padding: 1.75rem 2.5rem;
    }
}

.fn-intro-card__icono[b-b93tqovo5g] {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.125rem;
    background-color: rgba(109, 76, 65, 0.07);
    color: #6D4C41;
    font-size: 0.875rem;
}

.fn-intro-card__texto[b-b93tqovo5g] {
    font-size: 0.875rem;
    color: #5D4037;
    line-height: 1.9;
    font-style: italic;
    margin: 0;
}

@media (min-width: 640px) {
    .fn-intro-card__texto[b-b93tqovo5g] {
        font-size: 1rem;
    }
}

/* =======================================================================
   SECCIÓN 3 — GRID DE FUNCIONES
   ======================================================================= */

.fn-grid-section[b-b93tqovo5g] {
    max-width: 62.5rem;
    margin: 0 auto;
    padding: 2rem 1rem 2.5rem;
}

@media (min-width: 640px) {
    .fn-grid-section[b-b93tqovo5g] {
        padding: 2.5rem 1.5rem 2.5rem;
    }
}

.fn-grid[b-b93tqovo5g] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .fn-grid[b-b93tqovo5g] {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}

/* ── Tarjeta de función ───────────────────────────────────────────── */
.fn-card[b-b93tqovo5g] {
    background-color: var(--card, #ffffff);
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    border: 1px solid #EDE8E0;
    transition: box-shadow 0.2s ease;
    animation: fnFadeUp-b-b93tqovo5g 0.4s ease-out both;
}

.fn-card:hover[b-b93tqovo5g] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ── Header de la tarjeta ─────────────────────────────────────────── */
.fn-card__header[b-b93tqovo5g] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.25rem 1rem;
}

@media (min-width: 640px) {
    .fn-card__header[b-b93tqovo5g] {
        padding: 1.5rem 1.5rem 1rem;
    }
}

/* ── Badge (INT, ENF, etc.) ───────────────────────────────────────── */
.fn-badge[b-b93tqovo5g] {
    width: 4rem;
    height: 4rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0 auto;
    background-color: #6D4C41;
    border: 4px solid #FFD600;
    box-shadow: 0 4px 12px rgba(109, 76, 65, 0.35),
                inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

@media (min-width: 640px) {
    .fn-badge[b-b93tqovo5g] {
        width: 4.5rem;
        height: 4.5rem;
    }
}

.fn-badge__text[b-b93tqovo5g] {
    font-size: 1.125rem;
    font-weight: 900;
    color: #FFD600;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

@media (min-width: 640px) {
    .fn-badge__text[b-b93tqovo5g] {
        font-size: 1.25rem;
    }
}

/* ── Área de título ───────────────────────────────────────────────── */
.fn-card__titulo-area[b-b93tqovo5g] {
    flex: 1;
    min-width: 0;
    padding-top: 0.25rem;
}

.fn-card__etiqueta[b-b93tqovo5g] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.125rem;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #A1887F;
    font-weight: 600;
}

.fn-card__etiqueta-icono[b-b93tqovo5g] {
    color: #6D4C41;
    font-size: 0.75rem;
}

.fn-card__nombre[b-b93tqovo5g] {
    font-family: var(--font-serif, 'Bitter', serif);
    font-size: 1.125rem;
    font-weight: 700;
    color: #3E2723;
    margin: 0;
    line-height: 1.3;
}

@media (min-width: 640px) {
    .fn-card__nombre[b-b93tqovo5g] {
        font-size: 1.25rem;
    }
}

/* ── Divisor interno ──────────────────────────────────────────────── */
.fn-card__divider[b-b93tqovo5g] {
    margin: 0 1.25rem;
    height: 1px;
    background-color: #F0EDE8;
}

@media (min-width: 640px) {
    .fn-card__divider[b-b93tqovo5g] {
        margin: 0 1.5rem;
    }
}

/* ── Body de la tarjeta ───────────────────────────────────────────── */
.fn-card__body[b-b93tqovo5g] {
    padding: 1rem 1.25rem 1.25rem;
}

@media (min-width: 640px) {
    .fn-card__body[b-b93tqovo5g] {
        padding: 1rem 1.5rem 1.5rem;
    }
}

/* ── Lista de responsabilidades ───────────────────────────────────── */
.fn-lista[b-b93tqovo5g] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.fn-lista__item[b-b93tqovo5g] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.fn-lista__num[b-b93tqovo5g] {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.125rem;
    background-color: rgba(109, 76, 65, 0.06);
    border: 1px solid rgba(109, 76, 65, 0.09);
}

.fn-lista__num span[b-b93tqovo5g] {
    font-size: 0.625rem;
    font-weight: 700;
    color: #6D4C41;
}

.fn-lista__texto[b-b93tqovo5g] {
    font-size: 0.8125rem;
    color: #5D4037;
    line-height: 1.6;
    margin: 0;
}

@media (min-width: 640px) {
    .fn-lista__texto[b-b93tqovo5g] {
        font-size: 0.875rem;
    }
}

/* =======================================================================
   SECCIÓN 4 — NOTA ADICIONAL
   ======================================================================= */

.fn-nota-section[b-b93tqovo5g] {
    max-width: 62.5rem;
    margin: 0 auto;
    padding: 0 1rem 2.5rem;
}

@media (min-width: 640px) {
    .fn-nota-section[b-b93tqovo5g] {
        padding: 0 1.5rem 2.5rem;
    }
}

.fn-nota[b-b93tqovo5g] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background-color: #FFF8E1;
    border: 1px solid #FFE082;
    border-radius: 1rem;
    padding: 1.5rem;
    animation: fnFadeUp-b-b93tqovo5g 0.4s ease-out both;
}

@media (min-width: 640px) {
    .fn-nota[b-b93tqovo5g] {
        padding: 1.5rem 2rem;
    }
}

.fn-nota__icono[b-b93tqovo5g] {
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: #F9A825;
    font-size: 1rem;
}

.fn-nota__titulo[b-b93tqovo5g] {
    font-family: var(--font-serif, 'Bitter', serif);
    font-weight: 700;
    color: #5D4037;
    font-size: 1rem;
    margin: 0 0 0.5rem;
}

.fn-nota__texto[b-b93tqovo5g] {
    font-size: 0.8125rem;
    color: #6D4C41;
    line-height: 1.7;
    margin: 0;
}

@media (min-width: 640px) {
    .fn-nota__texto[b-b93tqovo5g] {
        font-size: 0.875rem;
    }
}

/* =======================================================================
   SECCIÓN 5 — DIVISOR
   ======================================================================= */

.fn-divider-section[b-b93tqovo5g] {
    max-width: 62.5rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

@media (min-width: 640px) {
    .fn-divider-section[b-b93tqovo5g] {
        padding: 0 2rem;
    }
}

.fn-divider[b-b93tqovo5g] {
    height: 1px;
    background-color: rgba(55, 71, 79, 0.08);
}

/* =======================================================================
   SECCIÓN 6 — DOCUMENTO OFICIAL (fn-book-*)
   Patrón clonado de ecr-book-* de /especialidades/caracteristicas
   con degradado marrón en vez de verde.
   ======================================================================= */

.fn-seccion-doc[b-b93tqovo5g] {
    max-width: 62.5rem;
    margin: 0 auto;
    padding: 3.5rem 1rem 5rem;
}

@media (min-width: 640px) {
    .fn-seccion-doc[b-b93tqovo5g] {
        padding: 3.5rem 1.5rem 5rem;
    }
}

.fn-book-card[b-b93tqovo5g] {
    display: flex;
    background-color: var(--surface, #ffffff);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(55, 71, 79, 0.08);
    animation: fnFadeUp-b-b93tqovo5g 0.45s ease-out both;
}

/* Panel izquierdo: portada con degradado verde */
.fn-book-cover-panel[b-b93tqovo5g] {
    position: relative;
    width: 200px;
    min-width: 200px;
    background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 60%, #388E3C 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow: hidden;
}

.fn-book-deco[b-b93tqovo5g] {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.06);
}

.fn-book-deco--tr[b-b93tqovo5g] {
    top: -20px;
    right: -20px;
}

.fn-book-deco--bl[b-b93tqovo5g] {
    bottom: -30px;
    left: -30px;
    width: 120px;
    height: 120px;
}

.fn-book-cover-img[b-b93tqovo5g] {
    position: relative;
    width: 100%;
    max-width: 140px;
    border-radius: 0.5rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.40);
    object-fit: cover;
}

/* Panel derecho: contenido */
.fn-book-content[b-b93tqovo5g] {
    flex: 1;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fn-book-tag[b-b93tqovo5g] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background-color: rgba(46, 125, 50, 0.08);
    color: #2E7D32;
    border-radius: 2rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    width: fit-content;
}

.fn-book-title[b-b93tqovo5g] {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--title);
    line-height: 1.3;
    margin-bottom: 0;
}

.fn-book-desc[b-b93tqovo5g] {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    color: rgba(55, 71, 79, 0.60);
    line-height: 1.6;
    flex: 1;
}

.fn-book-btns[b-b93tqovo5g] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

/* Botón primario (Descargar) */
.fn-book-btn[b-b93tqovo5g] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background-color: var(--primary, #2E7D32);
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 1.125rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.fn-book-btn:hover[b-b93tqovo5g] {
    background-color: #1B5E20;
}

/* Botón secundario (Vista previa) */
.fn-book-btn--secondary[b-b93tqovo5g] {
    background-color: transparent;
    color: var(--primary, #2E7D32);
    border: 1.5px solid var(--primary, #2E7D32);
}

.fn-book-btn--secondary:hover[b-b93tqovo5g] {
    background-color: rgba(46, 125, 50, 0.06);
}

.fn-book-meta[b-b93tqovo5g] {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: rgba(55, 71, 79, 0.35);
    margin-top: 0;
}

/* =======================================================================
   MODAL DE VISTA PREVIA (fn-preview-*)
   ======================================================================= */

.fn-preview-overlay[b-b93tqovo5g] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: fnFadeIn-b-b93tqovo5g 0.2s ease;
}

@keyframes fnFadeIn-b-b93tqovo5g {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.fn-preview-modal[b-b93tqovo5g] {
    background-color: #ffffff;
    border-radius: 0.75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 900px;
    max-height: 96vh;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.40);
    animation: fnScaleIn-b-b93tqovo5g 0.2s ease;
}

@keyframes fnScaleIn-b-b93tqovo5g {
    from { transform: scale(0.93); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.fn-preview-header[b-b93tqovo5g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid rgba(55, 71, 79, 0.10);
    background-color: #f8f9fa;
    flex-shrink: 0;
}

.fn-preview-title[b-b93tqovo5g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Bitter', Georgia, serif;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--title);
}

.fn-preview-actions[b-b93tqovo5g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fn-preview-dl[b-b93tqovo5g] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background-color: var(--primary, #2E7D32);
    color: #ffffff;
    border-radius: 0.375rem;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.fn-preview-dl:hover[b-b93tqovo5g] {
    background-color: #1B5E20;
}

.fn-preview-close[b-b93tqovo5g] {
    background: none;
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 1.125rem;
    cursor: pointer;
    color: rgba(55, 71, 79, 0.50);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fn-preview-close:hover[b-b93tqovo5g] {
    background-color: rgba(55, 71, 79, 0.08);
    color: var(--title);
}

.fn-preview-iframe[b-b93tqovo5g] {
    flex: 1;
    width: 100%;
    min-height: 680px;
    border: none;
}

/* =======================================================================
   RESPONSIVE — mobile (< 640px)
   ======================================================================= */

@media (max-width: 640px) {

    .fn-intro-section[b-b93tqovo5g] {
        padding: 2rem 1rem 1rem;
    }

    .fn-grid-section[b-b93tqovo5g] {
        padding: 1.5rem 1rem 2rem;
    }

    .fn-nota-section[b-b93tqovo5g] {
        padding: 0 1rem 2rem;
    }

    /* Tarjeta libro: apilada verticalmente */
    .fn-book-card[b-b93tqovo5g] {
        flex-direction: column;
    }

    .fn-book-cover-panel[b-b93tqovo5g] {
        width: 100%;
        min-width: unset;
        padding: 1.5rem;
        min-height: 180px;
    }

    .fn-book-cover-img[b-b93tqovo5g] {
        max-width: 110px;
    }

    .fn-book-content[b-b93tqovo5g] {
        padding: 1.25rem;
    }

    .fn-book-btns[b-b93tqovo5g] {
        flex-direction: column;
    }

    .fn-book-btn[b-b93tqovo5g] {
        justify-content: center;
    }

    /* Modal en mobile */
    .fn-preview-overlay[b-b93tqovo5g] {
        padding: 0.5rem;
        align-items: flex-end;
    }

    .fn-preview-modal[b-b93tqovo5g] {
        max-height: 98vh;
        border-radius: 0.75rem 0.75rem 0 0;
    }

    .fn-preview-iframe[b-b93tqovo5g] {
        min-height: 540px;
    }

    .fn-seccion-doc[b-b93tqovo5g] {
        padding: 2.5rem 1rem 3rem;
    }
}

/* =======================================================================
   ACCESIBILIDAD — prefers-reduced-motion
   ======================================================================= */
@media (prefers-reduced-motion: reduce) {
    .fn-card[b-b93tqovo5g],
    .fn-intro-card[b-b93tqovo5g],
    .fn-nota[b-b93tqovo5g],
    .fn-book-card[b-b93tqovo5g] {
        animation: none;
    }

    .fn-preview-overlay[b-b93tqovo5g],
    .fn-preview-modal[b-b93tqovo5g] {
        animation: none;
    }
}
/* /Pages/Historia/Index.razor.rz.scp.css */
/*
 * Historia.razor.css — Historia del Grupo Scout San Patricio
 * ════════════════════════════════════════════════════════════
 * Prefijo: hist- (history page)
 *
 * Paleta:
 *   Verde principal    #2E7D32  (var --color-primary)
 *   Verde oscuro       #1B5E20
 *   Verde scout dark   #1B3A1F  (CTA Libro de Oro bg)
 *   Dorado             #D4AF37
 *   Marrón sepia       #804000  (Baden-Powell accent)
 *   Rojo destructive   #D32F2F
 *   Texto principal    #37474F
 *   Texto secundario   #546E7A
 *   Crema bg           #F9F7F2
 *   Crema alt          #F1ECE0
 *   Crema table        #F8F5F0
 *   Blanco             #FFFFFF
 *   Acento bordes      #ECE6D8
 */


/* ════════════════════════════════════════════════════════════
   ANIMACIONES GLOBALES
   ════════════════════════════════════════════════════════════ */

@keyframes hist-fadeUp-b-g3tj3q6hbe {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes hist-fadeIn-b-g3tj3q6hbe {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes hist-modalIn-b-g3tj3q6hbe {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hist-anim-up[b-g3tj3q6hbe] {
    animation: hist-fadeUp-b-g3tj3q6hbe 0.6s ease both;
}

.hist-anim-in[b-g3tj3q6hbe] {
    animation: hist-fadeIn-b-g3tj3q6hbe 0.8s ease both;
}


/* ════════════════════════════════════════════════════════════
   LAYOUT GENERAL DE LA PÁGINA
   ════════════════════════════════════════════════════════════ */

.hist-page[b-g3tj3q6hbe] {
    min-height: 100vh;
    background-color: #F9F7F2;
}


/* ════════════════════════════════════════════════════════════
   SECTION CONTAINER — max-width y padding estándar
   ════════════════════════════════════════════════════════════ */

.hist-container[b-g3tj3q6hbe] {
    max-width: 72rem;
    margin: 0 auto;
    padding: 4rem 1rem;
}

@media (min-width: 640px) {
    .hist-container[b-g3tj3q6hbe] { padding: 4rem 1.5rem; }
}

@media (min-width: 1024px) {
    .hist-container[b-g3tj3q6hbe] { padding: 6rem 2rem; }
}

.hist-container--sm[b-g3tj3q6hbe] {
    max-width: 72rem;
    margin: 0 auto;
    padding: 3rem 1rem;
}

@media (min-width: 640px) {
    .hist-container--sm[b-g3tj3q6hbe] { padding: 3rem 1.5rem; }
}

@media (min-width: 1024px) {
    .hist-container--sm[b-g3tj3q6hbe] { padding: 4rem 2rem; }
}


/* ════════════════════════════════════════════════════════════
   SECTION LABEL — reutilizado en secciones (igual que Promesa)
   ════════════════════════════════════════════════════════════ */

.hist-section-label[b-g3tj3q6hbe] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.hist-section-label__bar[b-g3tj3q6hbe] {
    width: 2.5rem;
    height: 1px;
    flex-shrink: 0;
}

.hist-section-label__bar--brown[b-g3tj3q6hbe] { background-color: #804000; }
.hist-section-label__bar--green[b-g3tj3q6hbe] { background-color: #2E7D32; }
.hist-section-label__bar--red[b-g3tj3q6hbe]   { background-color: #D32F2F; }
.hist-section-label__bar--grey[b-g3tj3q6hbe]  { background-color: rgba(55, 71, 79, 0.4); }

.hist-section-label__text[b-g3tj3q6hbe] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.hist-section-label__text--brown[b-g3tj3q6hbe] { color: #804000; }
.hist-section-label__text--green[b-g3tj3q6hbe] { color: #2E7D32; }
.hist-section-label__text--red[b-g3tj3q6hbe]   { color: #D32F2F; }
.hist-section-label__text--grey[b-g3tj3q6hbe]  { color: rgba(55, 71, 79, 0.5); }

.hist-section-title[b-g3tj3q6hbe] {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.875rem;
    font-weight: 700;
    color: #37474F;
    margin: 0.25rem 0 0;
}

@media (min-width: 768px) {
    .hist-section-title[b-g3tj3q6hbe] { font-size: 2.25rem; }
}


/* ════════════════════════════════════════════════════════════
   SECTION BG VARIANTS
   ════════════════════════════════════════════════════════════ */

.hist-bg-cream[b-g3tj3q6hbe] {
    background-color: #F9F7F2;
}

.hist-bg-white[b-g3tj3q6hbe] {
    background-color: #FFFFFF;
    border-top: 1px solid #ECE6D8;
    border-bottom: 1px solid #ECE6D8;
}


/* ════════════════════════════════════════════════════════════
   GRID LAYOUTS
   ════════════════════════════════════════════════════════════ */

.hist-grid-2[b-g3tj3q6hbe] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .hist-grid-2[b-g3tj3q6hbe] {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

.hist-grid-2--center[b-g3tj3q6hbe] {
    align-items: center;
}

/* Orden móvil: imagen primero (order-1), texto segundo (order-2) */
/* Orden desktop: texto primero (order-1 lg), imagen segundo (order-2 lg) */
.hist-order-text-1[b-g3tj3q6hbe] { order: 2; }
.hist-order-img-1[b-g3tj3q6hbe]  { order: 1; }

@media (min-width: 1024px) {
    .hist-order-text-1[b-g3tj3q6hbe] { order: 1; }
    .hist-order-img-1[b-g3tj3q6hbe]  { order: 2; }
}

.hist-grid-3[b-g3tj3q6hbe] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .hist-grid-3[b-g3tj3q6hbe] { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
    .hist-grid-3[b-g3tj3q6hbe] { grid-template-columns: 1fr 1fr 1fr; }
}

.hist-grid-patrullas[b-g3tj3q6hbe] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
}

@media (min-width: 640px) {
    .hist-grid-patrullas[b-g3tj3q6hbe] { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
    .hist-grid-patrullas[b-g3tj3q6hbe] { grid-template-columns: 1fr 1fr 1fr; }
}


/* ════════════════════════════════════════════════════════════
   SECCIÓN A — TIMELINE CONNECTOR
   ════════════════════════════════════════════════════════════ */

.hist-timeline[b-g3tj3q6hbe] {
    display: flex;
    justify-content: center;
    padding: 0 0 1rem;
}

.hist-timeline__inner[b-g3tj3q6hbe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.hist-timeline__dot[b-g3tj3q6hbe] {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    background-color: #2E7D32;
    flex-shrink: 0;
}

.hist-timeline__line[b-g3tj3q6hbe] {
    width: 1px;
    height: 4rem;
    background: linear-gradient(to bottom, #2E7D32 0%, rgba(46, 125, 50, 0.2) 100%);
}

.hist-timeline__line--up[b-g3tj3q6hbe] {
    background: linear-gradient(to bottom, rgba(46, 125, 50, 0.2) 0%, #2E7D32 100%);
    height: 2rem;
}

.hist-timeline__label[b-g3tj3q6hbe] {
    font-size: 0.6875rem;
    color: rgba(55, 71, 79, 0.4);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}


/* ════════════════════════════════════════════════════════════
   SECCIÓN A — BADGE QUOTE (Baden-Powell)
   ════════════════════════════════════════════════════════════ */

.hist-quote-card[b-g3tj3q6hbe] {
    background-color: #FFFFFF;
    border: 1px solid #ECE6D8;
    border-radius: 1rem;
    padding: 1.5rem 2rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    margin-bottom: 1.5rem;
}

.hist-quote-card__header[b-g3tj3q6hbe] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.hist-quote-icon[b-g3tj3q6hbe] {
    font-size: 1.75rem;
    color: rgba(128, 64, 0, 0.3);
    line-height: 1;
    flex-shrink: 0;
    margin-top: 0.125rem;
    font-style: normal;
}

.hist-quote-text[b-g3tj3q6hbe] {
    color: #804000;
    font-style: italic;
    font-size: 1.125rem;
    line-height: 1.65;
    margin: 0;
}

.hist-quote-author[b-g3tj3q6hbe] {
    font-size: 0.8125rem;
    color: rgba(55, 71, 79, 0.5);
    margin: 0 0 1.5rem;
}

.hist-text-block[b-g3tj3q6hbe] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hist-text-block p[b-g3tj3q6hbe] {
    color: rgba(55, 71, 79, 0.8);
    line-height: 1.7;
    margin: 0;
}


/* ════════════════════════════════════════════════════════════
   IMAGEN PLACEHOLDER (donde van las fotos reales)
   ════════════════════════════════════════════════════════════ */

.hist-img-placeholder[b-g3tj3q6hbe] {
    width: 100%;
    background-color: #ECE6D8;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: rgba(55, 71, 79, 0.35);
}

.hist-img-placeholder--portrait[b-g3tj3q6hbe] { aspect-ratio: 4 / 5; }
.hist-img-placeholder--landscape[b-g3tj3q6hbe] { aspect-ratio: 4 / 3; }
.hist-img-placeholder--square[b-g3tj3q6hbe] { aspect-ratio: 1 / 1; }

.hist-img-placeholder__icon[b-g3tj3q6hbe] {
    font-size: 2.5rem;
    opacity: 0.5;
}

.hist-img-placeholder__text[b-g3tj3q6hbe] {
    font-size: 0.75rem;
    font-style: italic;
    text-align: center;
    padding: 0 1rem;
}

/* Frame decorativo para fotos — estilo polaroid con fondo blanco + hover */
.hist-img-frame[b-g3tj3q6hbe] {
    position: relative;
    background-color: #FFFFFF;
    padding: 0.75rem;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
    border-radius: 2px;
    transform: rotate(1deg);
    transition: transform 0.5s ease;
    will-change: transform;
    backface-visibility: hidden;
}

.hist-img-frame:hover[b-g3tj3q6hbe] {
    transform: rotate(0deg);
}

.hist-img-frame__border[b-g3tj3q6hbe] {
    display: none;
}

.hist-img-frame__caption[b-g3tj3q6hbe] {
    margin: 0.5rem 0 0;
    text-align: center;
    padding: 0 0.5rem;
    font-size: 0.8125rem;
    color: rgba(128, 64, 0, 0.65);
    font-style: italic;
    line-height: 1.5;
}

/* Foto estilo Polaroid para fundación */
.hist-polaroid[b-g3tj3q6hbe] {
    background-color: #FFFFFF;
    padding: 1rem;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 2px;
    transform: rotate(-2deg);
    transition: transform 0.5s ease;
    max-width: 36rem;
    width: 100%;
}

.hist-polaroid:hover[b-g3tj3q6hbe] {
    transform: rotate(0deg);
}

.hist-polaroid__img-wrapper[b-g3tj3q6hbe] {
    position: relative;
    overflow: hidden;
}

.hist-polaroid__caption[b-g3tj3q6hbe] {
    text-align: center;
    padding: 0.625rem 0.75rem 0;
    font-size: 0.8125rem;
    color: rgba(128, 64, 0, 0.65);
    font-style: italic;
    font-family: Georgia, serif;
    line-height: 1.5;
    margin: 0;
}

/* Frame vintage para foto de pañuelo */
.hist-scarf-frame[b-g3tj3q6hbe] {
    position: relative;
    max-width: 24rem;
    width: 100%;
}

.hist-scarf-frame__tilt[b-g3tj3q6hbe] {
    position: absolute;
    inset: -1rem;
    background-color: #ECE6D8;
    border-radius: 1rem;
    transform: rotate(3deg);
}

.hist-scarf-frame__inner[b-g3tj3q6hbe] {
    position: relative;
    background-color: #FFFFFF;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    padding: 0.75rem;
}

.hist-scarf-frame__badge[b-g3tj3q6hbe] {
    position: absolute;
    bottom: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFFFFF;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    border-radius: 9999px;
    padding: 0.375rem 1.25rem;
    border: 1px solid #ECE6D8;
    white-space: nowrap;
}

.hist-scarf-frame__badge-text[b-g3tj3q6hbe] {
    font-size: 0.75rem;
    color: rgba(55, 71, 79, 0.7);
}

.hist-scarf-frame__badge-text strong[b-g3tj3q6hbe] {
    color: #D32F2F;
}


/* ════════════════════════════════════════════════════════════
   CARDS DE INFORMACIÓN (dato histórico, hito, primeros dir)
   ════════════════════════════════════════════════════════════ */

.hist-info-card[b-g3tj3q6hbe] {
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-top: 1.5rem;
}

.hist-info-card--green[b-g3tj3q6hbe] {
    background-color: rgba(46, 125, 50, 0.05);
    border: 1px solid rgba(46, 125, 50, 0.12);
}

.hist-info-card--red[b-g3tj3q6hbe] {
    background-color: rgba(211, 47, 47, 0.05);
    border: 1px solid rgba(211, 47, 47, 0.12);
}

.hist-info-card--brown[b-g3tj3q6hbe] {
    background-color: rgba(128, 64, 0, 0.05);
    border: 1px solid rgba(128, 64, 0, 0.12);
}

.hist-info-card--white[b-g3tj3q6hbe] {
    background-color: #FFFFFF;
    border: 1px solid #ECE6D8;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.hist-info-card__header[b-g3tj3q6hbe] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.hist-info-card__icon[b-g3tj3q6hbe] {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

.hist-info-card__icon--green[b-g3tj3q6hbe] { color: #2E7D32; }
.hist-info-card__icon--red[b-g3tj3q6hbe]   { color: #D32F2F; }
.hist-info-card__icon--brown[b-g3tj3q6hbe] { color: #804000; }

.hist-info-card__title[b-g3tj3q6hbe] {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
}

.hist-info-card__title--green[b-g3tj3q6hbe] { color: #2E7D32; }
.hist-info-card__title--red[b-g3tj3q6hbe]   { color: #D32F2F; }
.hist-info-card__title--brown[b-g3tj3q6hbe] { color: #804000; }

.hist-info-card__text[b-g3tj3q6hbe] {
    font-size: 0.875rem;
    color: rgba(55, 71, 79, 0.7);
    line-height: 1.65;
    margin: 0;
}


/* ════════════════════════════════════════════════════════════
   SECCIÓN A — SÍMBOLOS SCOUT (3 cards)
   ════════════════════════════════════════════════════════════ */

.hist-symbol-card[b-g3tj3q6hbe] {
    background-color: #FFFFFF;
    border: 1px solid #ECE6D8;
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    animation: hist-fadeUp-b-g3tj3q6hbe 0.6s ease both;
}

.hist-symbol-card__icon-wrap[b-g3tj3q6hbe] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background-color: rgba(128, 64, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.hist-symbol-card__title[b-g3tj3q6hbe] {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
    color: #804000;
    margin: 0;
}

.hist-symbol-card__text[b-g3tj3q6hbe] {
    font-size: 0.875rem;
    color: rgba(55, 71, 79, 0.75);
    line-height: 1.65;
    margin: 0;
}


/* ════════════════════════════════════════════════════════════
   SECCIÓN A — ÚLTIMO MENSAJE (card especial + botón modal)
   ════════════════════════════════════════════════════════════ */

.hist-last-msg[b-g3tj3q6hbe] {
    background: linear-gradient(135deg, rgba(128, 64, 0, 0.04) 0%, rgba(128, 64, 0, 0.02) 100%);
    border: 1px solid rgba(128, 64, 0, 0.15);
    border-left: 4px solid #804000;
    border-radius: 0 1rem 1rem 0;
    padding: 1.5rem 1.75rem;
    margin-top: 2rem;
}

.hist-last-msg__title[b-g3tj3q6hbe] {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #804000;
    margin: 0 0 0.625rem;
}

.hist-last-msg__text[b-g3tj3q6hbe] {
    font-size: 0.875rem;
    color: rgba(55, 71, 79, 0.75);
    line-height: 1.7;
    margin: 0 0 1.25rem;
    font-style: italic;
}

.hist-last-msg__btn[b-g3tj3q6hbe] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #804000, #a05000);
    color: #FFFFFF;
    border: none;
    border-radius: 9999px;
    padding: 0.625rem 1.625rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(128, 64, 0, 0.3);
    transition: box-shadow 0.2s ease, transform 0.15s ease, filter 0.15s ease;
}

.hist-last-msg__btn:hover[b-g3tj3q6hbe] {
    filter: brightness(1.12);
    box-shadow: 0 6px 20px rgba(128, 64, 0, 0.4);
    transform: translateY(-2px);
}

.hist-last-msg__btn:active[b-g3tj3q6hbe] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(128, 64, 0, 0.2);
}


/* ════════════════════════════════════════════════════════════
   MODAL — ÚLTIMO MENSAJE B.P.
   ════════════════════════════════════════════════════════════ */

.hist-modal-overlay[b-g3tj3q6hbe] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.65);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.hist-modal[b-g3tj3q6hbe] {
    background-color: #FFFFFF;
    border-radius: 1.25rem;
    max-width: 44rem;
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3), 0 8px 20px rgba(0,0,0,0.15);
    animation: hist-modalIn-b-g3tj3q6hbe 0.3s ease both;
    position: relative;
}

.hist-modal__header[b-g3tj3q6hbe] {
    position: sticky;
    top: 0;
    background-color: #FFFFFF;
    border-bottom: 1px solid #ECE6D8;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 1.25rem 1.25rem 0 0;
    z-index: 1;
}

.hist-modal__title[b-g3tj3q6hbe] {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #804000;
    margin: 0;
}

.hist-modal__close[b-g3tj3q6hbe] {
    background: none;
    border: none;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(55, 71, 79, 0.08);
    color: #37474F;
    font-size: 1.125rem;
    line-height: 1;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.hist-modal__close:hover[b-g3tj3q6hbe] {
    background-color: rgba(55, 71, 79, 0.15);
}

.hist-modal__body[b-g3tj3q6hbe] {
    padding: 1.5rem 2rem 2rem;
    overflow-y: auto;
    flex: 1;
    background-color: #FAF8F4;
}

.hist-modal__intro[b-g3tj3q6hbe] {
    font-size: 0.8125rem;
    color: rgba(55, 71, 79, 0.5);
    margin-bottom: 1.25rem;
    font-style: italic;
}

.hist-modal__letter[b-g3tj3q6hbe] {
    font-size: 0.9375rem;
    color: rgba(55, 71, 79, 0.85);
    line-height: 1.9;
    font-style: italic;
    border-left: 3px solid rgba(128, 64, 0, 0.3);
    padding-left: 1.25rem;
    margin: 0 0 1.25rem;
}

.hist-modal__letter p[b-g3tj3q6hbe] {
    margin: 0 0 1rem;
}

.hist-modal__letter p:last-child[b-g3tj3q6hbe] {
    margin-bottom: 0;
}

.hist-modal__signature[b-g3tj3q6hbe] {
    font-size: 0.875rem;
    color: #804000;
    font-weight: 600;
    font-style: italic;
    text-align: right;
    border-top: 1px solid rgba(128, 64, 0, 0.18);
    padding-top: 1rem;
    margin-top: 1.5rem;
    margin-bottom: 0;
}

.hist-modal__tumba-wrap[b-g3tj3q6hbe] {
    margin-top: 2rem;
    text-align: center;
}

.hist-modal__tumba-img[b-g3tj3q6hbe] {
    max-width: 320px;
    width: 100%;
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    display: inline-block;
}


/* ════════════════════════════════════════════════════════════
   SECCIÓN B — CAMPAMENTOS TABLE / LIST
   ════════════════════════════════════════════════════════════ */

.hist-camps[b-g3tj3q6hbe] {
    background-color: rgba(46, 125, 50, 0.04);
    border: 1px solid rgba(46, 125, 50, 0.1);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
}

.hist-camps__title[b-g3tj3q6hbe] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #2E7D32;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hist-camps__grid[b-g3tj3q6hbe] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem 1.5rem;
}

@media (min-width: 640px) {
    .hist-camps__grid[b-g3tj3q6hbe] { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 900px) {
    .hist-camps__grid[b-g3tj3q6hbe] { grid-template-columns: repeat(8, 1fr); gap: 0.375rem 0.75rem; }
}

.hist-camps__item[b-g3tj3q6hbe] {
    font-size: 0.8125rem;
    color: rgba(55, 71, 79, 0.75);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0;
}

.hist-camps__item[b-g3tj3q6hbe]::before {
    content: '';
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background-color: #2E7D32;
    flex-shrink: 0;
    opacity: 0.6;
}


/* ════════════════════════════════════════════════════════════
   SECCIÓN C — PATRULLAS DE DIRIGENTES
   ════════════════════════════════════════════════════════════ */

.hist-patrulla-card[b-g3tj3q6hbe] {
    background-color: #F9F7F2;
    border-radius: 1rem;
    padding: 1.25rem;
    border: 1px solid rgba(128, 64, 0, 0.12);
    transition: all 0.2s ease;
}

.hist-patrulla-card:hover[b-g3tj3q6hbe] {
    border-color: rgba(46, 125, 50, 0.25);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.hist-patrulla-card--inactive[b-g3tj3q6hbe] {
    opacity: 0.65;
    border-color: #ECE6D8;
}

.hist-patrulla-card__header[b-g3tj3q6hbe] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.hist-patrulla-card__name[b-g3tj3q6hbe] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #37474F;
    margin: 0;
}

.hist-patrulla-badge[b-g3tj3q6hbe] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.1875rem 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.hist-patrulla-badge--active[b-g3tj3q6hbe] {
    background-color: rgba(46, 125, 50, 0.1);
    color: #2E7D32;
}

.hist-patrulla-badge--inactive[b-g3tj3q6hbe] {
    background-color: rgba(55, 71, 79, 0.08);
    color: rgba(55, 71, 79, 0.45);
}

.hist-patrulla-card__lema[b-g3tj3q6hbe] {
    font-size: 0.8125rem;
    color: rgba(55, 71, 79, 0.6);
    font-style: italic;
    margin: 0 0 0.5rem;
}

.hist-patrulla-card__meta[b-g3tj3q6hbe] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.75rem;
    color: rgba(55, 71, 79, 0.5);
}

.hist-patrulla-card__dot[b-g3tj3q6hbe] {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 9999px;
    background-color: rgba(55, 71, 79, 0.2);
}

/* Card emotiva Jabalí Perseverante */
.hist-jalabi-card[b-g3tj3q6hbe] {
    background: linear-gradient(135deg, #1B3A1F 0%, #2E5733 100%);
    border-radius: 1.25rem;
    padding: 2rem;
    margin-top: 2.5rem;
    color: rgba(255,255,255,0.9);
    position: relative;
    overflow: hidden;
}

.hist-jalabi-card[b-g3tj3q6hbe]::before {
    content: '';
    position: absolute;
    top: -2rem;
    right: -2rem;
    width: 8rem;
    height: 8rem;
    border-radius: 9999px;
    background-color: rgba(255,255,255,0.03);
}

.hist-jalabi-card__title[b-g3tj3q6hbe] {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 0.75rem;
}

.hist-jalabi-card__text[b-g3tj3q6hbe] {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.85);
    margin: 0;
}

.hist-jalabi-card__text em[b-g3tj3q6hbe] {
    color: rgba(212, 175, 55, 0.9);
    font-style: normal;
    font-weight: 600;
}

/* Jabalí In Memoriam — layout split: primer párrafo + imagen / resto full-width */
.hist-jalabi-card__top[b-g3tj3q6hbe] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.hist-jalabi-card__top-text[b-g3tj3q6hbe] {
    flex: 1;
    min-width: 0;
}

.hist-jalabi-card__bottom[b-g3tj3q6hbe] {
    margin-top: 1rem;
}


/* ════════════════════════════════════════════════════════════
   SECCIÓN D — TABLAS DE LIDERAZGO
   ════════════════════════════════════════════════════════════ */

.hist-tables-section[b-g3tj3q6hbe] {
    background-color: #FFFFFF;
    border-top: 1px solid #ECE6D8;
    border-bottom: 1px solid #ECE6D8;
}

.hist-tables-header[b-g3tj3q6hbe] {
    text-align: center;
    margin-bottom: 3rem;
}

.hist-tables-header__tag[b-g3tj3q6hbe] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #2E7D32;
    margin-bottom: 0.75rem;
}

.hist-tables-title[b-g3tj3q6hbe] {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.875rem;
    font-weight: 700;
    color: #37474F;
    margin: 0 0 0.75rem;
}

@media (min-width: 768px) {
    .hist-tables-title[b-g3tj3q6hbe] { font-size: 2.25rem; }
}

.hist-tables-subtitle[b-g3tj3q6hbe] {
    font-size: 0.9375rem;
    color: rgba(55, 71, 79, 0.5);
    max-width: 32rem;
    margin: 0 auto;
    line-height: 1.6;
}

.hist-table-group[b-g3tj3q6hbe] {
    animation: hist-fadeUp-b-g3tj3q6hbe 0.6s ease both;
}

.hist-table-group__header[b-g3tj3q6hbe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.hist-table-group__icon[b-g3tj3q6hbe] {
    font-size: 0.875rem;
    width: 1rem;
    text-align: center;
}

.hist-table-group__icon--green[b-g3tj3q6hbe] { color: #2E7D32; }
.hist-table-group__icon--brown[b-g3tj3q6hbe] { color: #804000; }

.hist-table-group__title[b-g3tj3q6hbe] {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #37474F;
    margin: 0;
}

.hist-table-wrap[b-g3tj3q6hbe] {
    background-color: #F9F7F2;
    border: 1px solid #ECE6D8;
    border-radius: 1rem;
    overflow: hidden;
}

.hist-table[b-g3tj3q6hbe] {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

.hist-table thead tr[b-g3tj3q6hbe] {
    border-bottom: 1px solid #ECE6D8;
}

.hist-table th[b-g3tj3q6hbe] {
    padding: 0.875rem 1.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(55, 71, 79, 0.4);
    font-family: 'Inter', sans-serif;
}

.hist-table td[b-g3tj3q6hbe],
.hist-table .td[b-g3tj3q6hbe] {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    vertical-align: top;
    border-bottom: 1px solid rgba(236, 230, 216, 0.7);
}

.hist-table tr:last-child td[b-g3tj3q6hbe],
.hist-table tr:last-child .td[b-g3tj3q6hbe] {
    border-bottom: none;
}

.hist-table .tr-even[b-g3tj3q6hbe] { background-color: #FFFFFF; }
.hist-table .tr-odd[b-g3tj3q6hbe]  { background-color: #F9F7F2; }

.hist-table .td-period[b-g3tj3q6hbe] {
    color: rgba(55, 71, 79, 0.7);
    white-space: nowrap;
}

.hist-table .td-totem[b-g3tj3q6hbe] {
    color: #2E7D32;
    font-style: italic;
}

.hist-table .td-name[b-g3tj3q6hbe] {
    color: #37474F;
}

/* Fila CEI especial */
.hist-table .td-cei-label[b-g3tj3q6hbe] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(46, 125, 50, 0.7);
    font-style: normal;
    display: block;
    margin-bottom: 0.25rem;
}

.hist-table .td-cei-list[b-g3tj3q6hbe] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hist-table .td-cei-list li[b-g3tj3q6hbe] {
    white-space: nowrap;
    font-size: 0.8125rem;
    padding: 0.125rem 0;
    color: #2E7D32;
    font-style: italic;
}

.hist-table .td-cei-names[b-g3tj3q6hbe] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hist-table .td-cei-names li[b-g3tj3q6hbe] {
    font-size: 0.8125rem;
    padding: 0.125rem 0;
}

/* Sublabel de período (CEI, Interina) */
.hist-table .td-period-sublabel[b-g3tj3q6hbe] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(55, 71, 79, 0.5);
    font-style: italic;
    white-space: normal;
    margin-top: 0.125rem;
}

/* Anchos de columnas por tabla */
.hist-table--jefes th:nth-child(1)[b-g3tj3q6hbe],
.hist-table--jefes td:nth-child(1)[b-g3tj3q6hbe] { width: 22%; }

.hist-table--jefes th:nth-child(2)[b-g3tj3q6hbe],
.hist-table--jefes td:nth-child(2)[b-g3tj3q6hbe] { width: 33%; }

.hist-table--jefes th:nth-child(3)[b-g3tj3q6hbe],
.hist-table--jefes td:nth-child(3)[b-g3tj3q6hbe] { width: 45%; }

.hist-table--directores th:nth-child(1)[b-g3tj3q6hbe],
.hist-table--directores td:nth-child(1)[b-g3tj3q6hbe] { width: 28%; }

.hist-table--directores th:nth-child(2)[b-g3tj3q6hbe],
.hist-table--directores td:nth-child(2)[b-g3tj3q6hbe] { width: 72%; }

/* Nota histórica en marrón */
.hist-nota[b-g3tj3q6hbe] {
    background-color: rgba(128, 64, 0, 0.05);
    border: 1px solid rgba(128, 64, 0, 0.12);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: rgba(55, 71, 79, 0.65);
    line-height: 1.65;
}

.hist-nota strong[b-g3tj3q6hbe] {
    color: #804000;
}


/* ════════════════════════════════════════════════════════════
   SECCIÓN E — CTA LIBRO DE ORO
   ════════════════════════════════════════════════════════════ */

.hist-libro-oro[b-g3tj3q6hbe] {
    background-color: #1B3A1F;
    position: relative;
    overflow: hidden;
}

.hist-libro-oro__texture[b-g3tj3q6hbe] {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hist-libro-oro__circle-top[b-g3tj3q6hbe] {
    position: absolute;
    top: -5rem;
    right: -5rem;
    width: 18rem;
    height: 18rem;
    border-radius: 9999px;
    background-color: rgba(212, 175, 55, 0.06);
    pointer-events: none;
}

.hist-libro-oro__circle-bottom[b-g3tj3q6hbe] {
    position: absolute;
    bottom: -4rem;
    left: -4rem;
    width: 12rem;
    height: 12rem;
    border-radius: 9999px;
    background-color: rgba(212, 175, 55, 0.04);
    pointer-events: none;
}

.hist-libro-oro__inner[b-g3tj3q6hbe] {
    position: relative;
    z-index: 1;
    max-width: 72rem;
    margin: 0 auto;
    padding: 4rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
}

@media (min-width: 640px) {
    .hist-libro-oro__inner[b-g3tj3q6hbe] { padding: 4rem 1.5rem; }
}

@media (min-width: 1024px) {
    .hist-libro-oro__inner[b-g3tj3q6hbe] {
        flex-direction: row;
        text-align: left;
        padding: 6rem 2rem;
        gap: 3.5rem;
        align-items: center;
    }
}

.hist-libro-oro__icon-block[b-g3tj3q6hbe] {
    position: relative;
    flex-shrink: 0;
}

.hist-libro-oro__glow[b-g3tj3q6hbe] {
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    background-color: #D4AF37;
    filter: blur(2.5rem);
    opacity: 0.3;
}

.hist-libro-oro__icon-box[b-g3tj3q6hbe] {
    position: relative;
    width: 7rem;
    height: 7rem;
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 25px 50px rgba(0,0,0,0.4);
    border: 1px solid rgba(212, 175, 55, 0.4);
    background: linear-gradient(145deg, #D4AF37 0%, #B8860B 50%, #8B6914 100%);
}

@media (min-width: 768px) {
    .hist-libro-oro__icon-box[b-g3tj3q6hbe] {
        width: 9rem;
        height: 9rem;
    }
}

.hist-libro-oro__book-icon[b-g3tj3q6hbe] {
    font-size: 3rem;
    color: #FFFFFF;
}

@media (min-width: 768px) {
    .hist-libro-oro__book-icon[b-g3tj3q6hbe] { font-size: 3.75rem; }
}

.hist-libro-oro__quill[b-g3tj3q6hbe] {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    font-size: 2rem;
    transform: rotate(-30deg);
    opacity: 0.85;
    color: #D4AF37;
}

.hist-libro-oro__content[b-g3tj3q6hbe] {
    flex: 1;
}

.hist-libro-oro__tag[b-g3tj3q6hbe] {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #D4AF37;
    background-color: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 9999px;
    padding: 0.375rem 0.875rem;
    margin-bottom: 1rem;
}

.hist-libro-oro__title[b-g3tj3q6hbe] {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.875rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 1rem;
    text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

@media (min-width: 768px) {
    .hist-libro-oro__title[b-g3tj3q6hbe] { font-size: 2.5rem; }
}

@media (min-width: 1024px) {
    .hist-libro-oro__title[b-g3tj3q6hbe] { font-size: 3rem; }
}

.hist-libro-oro__subtitle[b-g3tj3q6hbe] {
    color: rgba(255,255,255,0.7);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 40rem;
    margin: 0 0 2rem;
    text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.hist-libro-oro__btn[b-g3tj3q6hbe] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #D4AF37 0%, #F0D060 50%, #D4AF37 100%);
    color: #1B3A1F;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.35);
    transition: all 0.3s ease;
    text-decoration: none;
}

.hist-libro-oro__btn:hover[b-g3tj3q6hbe] {
    box-shadow: 0 12px 35px rgba(212, 175, 55, 0.5);
    transform: translateY(-2px);
    color: #1B3A1F;
    text-decoration: none;
}

.hist-libro-oro__accent-line[b-g3tj3q6hbe] {
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, #D4AF37 50%, transparent 100%);
}


/* ════════════════════════════════════════════════════════════
   SECCIÓN F — FOOTER CTA "¿TENÉS FOTOS?"
   ════════════════════════════════════════════════════════════ */

.hist-footer-cta[b-g3tj3q6hbe] {
    background-color: #FFFFFF;
    border-top: 1px solid #ECE6D8;
}

.hist-footer-cta__inner[b-g3tj3q6hbe] {
    max-width: 72rem;
    margin: 0 auto;
    padding: 3rem 1rem;
}

@media (min-width: 640px) {
    .hist-footer-cta__inner[b-g3tj3q6hbe] { padding: 3rem 1.5rem; }
}

@media (min-width: 1024px) {
    .hist-footer-cta__inner[b-g3tj3q6hbe] { padding: 4rem 2rem; }
}

.hist-footer-cta__card[b-g3tj3q6hbe] {
    background-color: #F1ECE0;
    border-radius: 1.25rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

@media (min-width: 640px) {
    .hist-footer-cta__card[b-g3tj3q6hbe] {
        flex-direction: row;
        text-align: left;
        padding: 2.5rem;
    }
}

@media (min-width: 768px) {
    .hist-footer-cta__card[b-g3tj3q6hbe] { padding: 3rem; }
}

.hist-footer-cta__deco-1[b-g3tj3q6hbe] {
    position: absolute;
    top: -4rem;
    right: -4rem;
    width: 14rem;
    height: 14rem;
    border-radius: 9999px;
    background-color: rgba(46, 125, 50, 0.05);
    pointer-events: none;
}

.hist-footer-cta__deco-2[b-g3tj3q6hbe] {
    position: absolute;
    bottom: -2.5rem;
    left: -2.5rem;
    width: 9rem;
    height: 9rem;
    border-radius: 9999px;
    background-color: rgba(128, 64, 0, 0.05);
    pointer-events: none;
}

.hist-footer-cta__icon-wrap[b-g3tj3q6hbe] {
    width: 4rem;
    height: 4rem;
    background-color: #2E7D32;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(46, 125, 50, 0.25);
    transform: rotate(3deg);
    font-size: 1.5rem;
    color: #FFFFFF;
}

.hist-footer-cta__body[b-g3tj3q6hbe] {
    flex: 1;
    position: relative;
    z-index: 1;
}

.hist-footer-cta__title[b-g3tj3q6hbe] {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #37474F;
    margin: 0 0 0.5rem;
}

@media (min-width: 640px) {
    .hist-footer-cta__title[b-g3tj3q6hbe] { font-size: 1.5rem; }
}

.hist-footer-cta__text[b-g3tj3q6hbe] {
    font-size: 0.9375rem;
    color: rgba(55, 71, 79, 0.65);
    line-height: 1.65;
    margin: 0;
}

.hist-footer-cta__link[b-g3tj3q6hbe] {
    color: #2E7D32;
    text-decoration: none;
    word-break: break-all;
}

.hist-footer-cta__link:hover[b-g3tj3q6hbe] {
    text-decoration: underline;
}

.hist-footer-cta__btn[b-g3tj3q6hbe] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #2E7D32;
    color: #FFFFFF;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.25);
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.hist-footer-cta__btn:hover[b-g3tj3q6hbe] {
    background-color: #1B5E20;
    color: #FFFFFF;
    text-decoration: none;
    transform: translateY(-1px);
}


/* ════════════════════════════════════════════════════════════
   TABS BAR
   ════════════════════════════════════════════════════════════ */

.hist-tabs-bar[b-g3tj3q6hbe] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #ECE6D8;
    background-color: #F9F7F2;
    position: sticky;
    top: 0;
    z-index: 10;
}

.hist-tab-btn[b-g3tj3q6hbe] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.5rem;
    background: none;
    border: 2px solid #ECE6D8;
    border-radius: 9999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #546E7A;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.hist-tab-btn:hover[b-g3tj3q6hbe] {
    color: #2E7D32;
    border-color: #2E7D32;
    background-color: #F1F8F1;
}

.hist-tab-btn--active[b-g3tj3q6hbe] {
    color: #FFFFFF;
    background-color: #2E7D32;
    border-color: #2E7D32;
}

.hist-tab-btn--active:hover[b-g3tj3q6hbe] {
    background-color: #1B5E20;
    border-color: #1B5E20;
    color: #FFFFFF;
}


/* ════════════════════════════════════════════════════════════
   IMÁGENES REALES
   ════════════════════════════════════════════════════════════ */

.hist-img-real[b-g3tj3q6hbe] {
    display: block;
    width: 100%;
    object-fit: cover;
    border-radius: 0.5rem;
}

.hist-img-real--portrait[b-g3tj3q6hbe] {
    max-height: 420px;
    object-position: top center;
}

.hist-img-real--landscape[b-g3tj3q6hbe] {
    max-height: 300px;
    object-position: center center;
}

.hist-img-real--showcase[b-g3tj3q6hbe] {
    max-height: 420px;
    object-position: top center;
}

.hist-img-real--promesa[b-g3tj3q6hbe] {
    max-height: 280px;
    object-position: top center;
}

.hist-img-real--panuelo[b-g3tj3q6hbe] {
    max-height: 200px;
    object-position: top center;
    object-fit: cover;
}

.hist-img-real--sepia[b-g3tj3q6hbe] {
    filter: sepia(40%) contrast(1.05) brightness(0.97);
}

/* Imagen pequeña en la columna de A5 (tumba bp, estatua bp) */
.hist-img-small[b-g3tj3q6hbe] {
    display: block;
    width: 100%;
    max-width: 120px;
    height: auto;
    object-fit: cover;
    border-radius: 0.375rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Imagen pequeña inline junto a texto (pañuelo_antiguo) */
.hist-img-small-inline[b-g3tj3q6hbe] {
    display: block;
    float: right;
    max-width: 140px;
    height: auto;
    object-fit: cover;
    border-radius: 0.375rem;
    margin: 0 0 1rem 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Imagen del Jabaí en la card homenaje (baja resolución → pequeña) */
.hist-img-jabali[b-g3tj3q6hbe] {
    display: block;
    flex-shrink: 0;
    width: 100px;
    height: auto;
    object-fit: contain;
    border-radius: 0.375rem;
    opacity: 0.9;
}

.hist-img-jabali--small[b-g3tj3q6hbe] {
    width: 72px;
}

@media (max-width: 640px) {
    .hist-img-jabali--hide-mobile[b-g3tj3q6hbe] {
        display: none;
    }
}

@media (max-width: 480px) {
    .hist-img-jabali[b-g3tj3q6hbe] {
        width: 64px;
    }

    .hist-img-small-inline[b-g3tj3q6hbe] {
        float: none;
        margin: 0 auto 1rem;
        max-width: 100%;
    }
}


/* ════════════════════════════════════════════════════════════
   ÚLTIMO MENSAJE (layout dos columnas)
   ════════════════════════════════════════════════════════════ */

.hist-last-msg__inner[b-g3tj3q6hbe] {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.hist-last-msg__content[b-g3tj3q6hbe] {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.hist-last-msg__img-side[b-g3tj3q6hbe] {
    flex-shrink: 0;
}

.hist-last-msg__tumba[b-g3tj3q6hbe] {
    display: block;
    width: 180px;
    height: auto;
    border-radius: 0.75rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

@media (max-width: 600px) {
    .hist-last-msg__inner[b-g3tj3q6hbe] {
        flex-direction: column;
        align-items: center;
    }

    .hist-last-msg__tumba[b-g3tj3q6hbe] {
        width: 160px;
    }
}

/* Responsive mobile — tablas de liderazgo */
@media (max-width: 768px) {
    /* Jefes de Grupo: ocultar columna Nombre en mobile (solo Período + Tótem) */
    .hist-table--jefes th:nth-child(3)[b-g3tj3q6hbe],
    .hist-table--jefes td:nth-child(3)[b-g3tj3q6hbe] {
        display: none;
    }
}

@media (max-width: 640px) {
    /* Directores de Grupo: table-layout fixed para que el nombre no se corte */
    .hist-table--directores[b-g3tj3q6hbe] {
        table-layout: fixed;
    }

    .hist-table--directores th[b-g3tj3q6hbe],
    .hist-table--directores td[b-g3tj3q6hbe] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    .hist-table--directores th:nth-child(1)[b-g3tj3q6hbe],
    .hist-table--directores td:nth-child(1)[b-g3tj3q6hbe] {
        width: 32%;
    }

    .hist-table--directores th:nth-child(2)[b-g3tj3q6hbe],
    .hist-table--directores td:nth-child(2)[b-g3tj3q6hbe] {
        width: 68%;
    }

    .hist-table--directores .td-period[b-g3tj3q6hbe] {
        white-space: normal;
    }
}


/* ════════════════════════════════════════════════════════════
   TRANSICIÓN POÉTICA
   ════════════════════════════════════════════════════════════ */

.hist-poetic-transition[b-g3tj3q6hbe] {
    text-align: center;
    padding: 3rem 2rem;
    background-color: #F9F7F2;
    border-top: 1px solid #ECE6D8;
    border-bottom: 1px solid #ECE6D8;
}

.hist-poetic-transition__text[b-g3tj3q6hbe] {
    font-family: 'Bitter', serif;
    font-style: italic;
    font-size: 1.125rem;
    line-height: 1.9;
    color: #546E7A;
    max-width: 600px;
    margin: 0 auto;
}
/* /Pages/Home/Index.razor.rz.scp.css */
/* ==========================================================================
   Index.razor.css — Estilos de la sección F (Noticias) de Index.razor
   ==========================================================================
   CSS Isolation: aplica solo a Index.razor. Las secciones A–E y G tienen
   sus propios .razor.css en Componentes/Home/. La sección F permanece
   inline porque accede a `noticiasRecientes` del @code block.
   ========================================================================== */

/* ── Sección de noticias ──────────────────────────────────────────────────── */
.news-section[b-cz57a1cf34] {
    background-color: rgba(236, 230, 216, 0.40);
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .news-section[b-cz57a1cf34] {
        padding-top: 6rem;
        padding-bottom: 6rem;
        padding-left: 0;
        padding-right: 0;
    }
}

/* ── Contenedor interno centrado ──────────────────────────────────────────── */
.news-container[b-cz57a1cf34] {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 1600px) {
    .news-container[b-cz57a1cf34] {
        max-width: 90rem;
    }
}

@media (min-width: 640px) {
    .news-container[b-cz57a1cf34] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .news-container[b-cz57a1cf34] {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* ── Encabezado centrado ─────────────────────────────────────────────────── */
.news-header[b-cz57a1cf34] {
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
}

/* Grupo centrado del encabezado */
.news-header-left[b-cz57a1cf34] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}

/* Eyebrow: "Últimas Novedades" */
.news-eyebrow[b-cz57a1cf34] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #2E7D32;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 700;
}

/* Título principal "Noticias" */
.news-title[b-cz57a1cf34] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: clamp(2.25rem, 5vw, 3rem);
    font-weight: 700;
    color: #37474F;
    margin: 0;
}

/* ── Botón "Ver más noticias" — pill verde sólido ──────────────────────── */
.news-ver-todas[b-cz57a1cf34] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    padding: 0.875rem 2rem;
    border-radius: 9999px;
    background-color: #2E7D32;
    box-shadow: 0 4px 14px rgba(46, 125, 50, 0.35);
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.news-ver-todas:hover[b-cz57a1cf34] {
    background-color: #1B5E20;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46, 125, 50, 0.45);
    text-decoration: none;
}

.news-ver-todas:active[b-cz57a1cf34] {
    transform: translateY(0);
}

/* ── Contenedor inferior del CTA: centrado ───────────────────────────────── */
.news-cta-bottom[b-cz57a1cf34] {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

/* ── Grid de 3 columnas ───────────────────────────────────────────────────── */
.news-grid[b-cz57a1cf34] {

    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .news-grid[b-cz57a1cf34] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Estados especiales del grid ──────────────────────────────────────────── */
.news-loading[b-cz57a1cf34],
.news-empty[b-cz57a1cf34] {
    /* Ocupa las 3 columnas cuando no hay tarjetas */
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 0;
    color: rgba(55, 71, 79, 0.50);
}

/* ── Tarjeta de noticia ───────────────────────────────────────────────────── */
.news-card[b-cz57a1cf34] {

    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
    border: 1px solid #ECE6D8;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.news-card:hover[b-cz57a1cf34] {
    box-shadow: 0 20px 25px rgba(0,0,0,0.10), 0 10px 10px rgba(0,0,0,0.04);
    transform: translateY(-4px);
}

/* ── Contenedor de imagen con overflow oculto para el hover-scale ─────────── */
.news-card-image-wrap[b-cz57a1cf34] {

    position: relative;
    overflow: hidden;
}

/* Imagen con efecto zoom al hacer hover sobre la tarjeta */
.news-card-img[b-cz57a1cf34] {
    width: 100%;
    height: 13rem;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.news-card:hover .news-card-img[b-cz57a1cf34] {
    transform: scale(1.05);
}

/* Badge de categoría: eliminado del markup; se conserva por si se reutiliza. */
.news-category-badge[b-cz57a1cf34] {
    display: none;
}

/* ── Cuerpo de texto de la tarjeta ───────────────────────────────────────── */
.news-card-body[b-cz57a1cf34] {

    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

/* Fecha de la noticia */
.news-card-date[b-cz57a1cf34] {
    font-size: 0.75rem;
    color: rgba(55, 71, 79, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem;
}

/* Autor inline junto a la fecha */
.news-card-author[b-cz57a1cf34] {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(55, 71, 79, 0.55);
}

/* Título de la noticia */
.news-card-title[b-cz57a1cf34] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #37474F;
    line-height: 1.35;
    margin: 0;
    transition: color 0.2s ease;
}

.news-card:hover .news-card-title[b-cz57a1cf34] {
    color: #2E7D32;
}

/* Extracto: line-clamp a 2 líneas con técnica -webkit-box (Chrome/Firefox/Safari). */
.news-card-excerpt[b-cz57a1cf34] {
    color: rgba(55, 71, 79, 0.60);
    line-height: 1.625;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* Footer de la tarjeta: empuja el "Leer más" al fondo */
.news-card-footer[b-cz57a1cf34] {
    margin-top: auto;
    padding-top: 0.5rem;
}

/* Botón Leer más */
.news-read-more[b-cz57a1cf34] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #2E7D32;
    font-size: 0.8125rem;
    font-weight: 700;
    transition: gap 0.2s ease;
}

.news-card:hover .news-read-more[b-cz57a1cf34] {
    gap: 0.6rem;
}

/* .news-mobile-cta eliminado — reemplazado por .news-cta-bottom unificado */
.stats-bar-wrapper[b-cz57a1cf34] {
    animation: fadeIn-b-cz57a1cf34 0.4s ease-in;
}

@keyframes fadeIn-b-cz57a1cf34 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Sección H — Calendario Scout
   ========================================================================== */

.scout-cal-section[b-cz57a1cf34] {
    padding-top: 0rem;
    padding-bottom: 4rem;
    background-color: #F9F7F2;
}

@media (min-width: 768px) {
    .scout-cal-section[b-cz57a1cf34] {
        padding-top: 0rem;
        padding-bottom: 6rem;
    }
}

/* Contenedor max-w-5xl */
.scout-cal-container[b-cz57a1cf34] {
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .scout-cal-container[b-cz57a1cf34] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .scout-cal-container[b-cz57a1cf34] {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1600px) {
    .scout-cal-container[b-cz57a1cf34] {
        max-width: 80rem;
    }
}

/* Card blanca con borde sutil y sombra */
.scout-cal-card[b-cz57a1cf34] {
    background-color: #ffffff;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid #ECE6D8;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: box-shadow 0.25s ease;
}

.scout-cal-card:hover[b-cz57a1cf34] {
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}

/* Header verde degradado */
.scout-cal-header[b-cz57a1cf34] {
    padding: 0.875rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #2E7D32, #1B5E20);
}

@media (min-width: 640px) {
    .scout-cal-header[b-cz57a1cf34] {
        padding: 0.875rem 1.5rem;
    }
}

.scout-cal-header-left[b-cz57a1cf34] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

/* Círculo del ícono de calendario */
.scout-cal-icon-wrap[b-cz57a1cf34] {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,0.15);
    flex-shrink: 0;
}

.scout-cal-title[b-cz57a1cf34] {
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

@media (min-width: 640px) {
    .scout-cal-title[b-cz57a1cf34] { font-size: 0.9375rem; }
}

.scout-cal-subtitle[b-cz57a1cf34] {
    color: rgba(255,255,255,0.6);
    font-size: 0.6875rem;
    margin: 0;
    line-height: 1.3;
}

/* Enlace "Ver todo" */
.scout-cal-ver-todo[b-cz57a1cf34] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: rgba(255,255,255,0.7);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.scout-cal-ver-todo:hover[b-cz57a1cf34] {
    color: #ffffff;
    text-decoration: none;
}

.scout-cal-ver-todo-text[b-cz57a1cf34] {
    display: none;
}

@media (min-width: 640px) {
    .scout-cal-ver-todo-text[b-cz57a1cf34] { display: inline; }
}

/* Lista de eventos */
.scout-cal-list[b-cz57a1cf34] {
    padding: 0.75rem 1.25rem;
}

@media (min-width: 640px) {
    .scout-cal-list[b-cz57a1cf34] { padding: 0.75rem 1.5rem; }
}

/* Fila de un evento */
.scout-cal-row[b-cz57a1cf34] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid #F0EBE0;
}

.scout-cal-row:last-child[b-cz57a1cf34] {
    border-bottom: none;
}

/* Mini fecha visual */
.scout-cal-date[b-cz57a1cf34] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.scout-cal-date-mes[b-cz57a1cf34] {
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.scout-cal-date-dia[b-cz57a1cf34] {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Info del evento */
.scout-cal-info[b-cz57a1cf34] {
    flex: 1;
    min-width: 0;
}

.scout-cal-event-title[b-cz57a1cf34] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #37474F;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scout-cal-badges[b-cz57a1cf34] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* Badge de categoría */
.scout-cal-cat-badge[b-cz57a1cf34] {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    white-space: nowrap;
}

/* Ubicación */
.scout-cal-ubicacion[b-cz57a1cf34] {
    font-size: 0.625rem;
    color: #90A4AE;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Puntos de ramas */
.scout-cal-ramas[b-cz57a1cf34] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.scout-cal-rama-dot[b-cz57a1cf34] {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    display: inline-block;
}

.scout-cal-ramas-extra[b-cz57a1cf34] {
    font-size: 0.5625rem;
    color: #90A4AE;
    line-height: 1;
}

/* Estado vacío / cargando */
.scout-cal-empty[b-cz57a1cf34] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0;
    font-size: 0.875rem;
    color: #90A4AE;
}

/* /Pages/Kinganguli/Index.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════
   HERO — FOGÓN NOCTURNO
   (Hero propio con estética oscura/cálida, diferente al FadeHeroBanner
    estándar del sitio porque el Kinganguli es un ritual nocturno)
══════════════════════════════════════════════════════════════════ */

.kg-hero[b-08w578wygw] {
    position: relative;
    width: 100%;
    min-height: 500px;
    overflow: hidden;
    background-color: #1E0F05; /* Fondo de respaldo si la imagen no carga */
    display: flex;
    align-items: center;
    justify-content: center;
}

.kg-hero-img[b-08w578wygw] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}

/* Overlay oscuro cálido — más denso que el hero estándar para el ambiente nocturno */
.kg-hero-overlay[b-08w578wygw] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(30, 15, 5, 0.75) 0%,
        rgba(40, 20, 8, 0.85) 60%,
        rgba(62, 39, 35, 0.92) 100%
    );
}

/* Glow naranja desde abajo — efecto de brasa */
.kg-hero-glow[b-08w578wygw] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(216, 67, 21, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

.kg-hero-body[b-08w578wygw] {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 5rem 1rem 4rem;
    max-width: 48rem;
    margin: 0 auto;
    animation: kgHeroIn-b-08w578wygw 0.6s ease-out both;
}

@keyframes kgHeroIn-b-08w578wygw {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Badge dorado ("Tradición Sagrada del Fogón") */
.kg-hero-badge[b-08w578wygw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.kg-hero-badge-text[b-08w578wygw] {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #FFB74D;
}

.kg-hero-badge-icon[b-08w578wygw] {
    color: #FFB74D;
    font-size: 0.75rem;
}

/* Título principal — Cinzel serif dorado/blanco */
.kg-hero-title[b-08w578wygw] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: clamp(2.25rem, 7vw, 3.75rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
    margin: 0 0 1rem;
    text-shadow: 0 2px 20px rgba(216, 67, 21, 0.35);
}

.kg-hero-title-highlight[b-08w578wygw] {
    color: #FFB74D;
    display: block;
}

.kg-hero-subtitle[b-08w578wygw] {
    font-size: clamp(0.9375rem, 2.5vw, 1.125rem);
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.6;
    margin: 0 0 1.5rem;
    max-width: 32rem;
    margin-inline: auto;
}

/* Llamas decorativas */
.kg-hero-flames[b-08w578wygw] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.kg-flame[b-08w578wygw]             { color: #D84315; line-height: 1; }
.kg-flame--xs[b-08w578wygw]         { font-size: 0.875rem; opacity: 0.35; }
.kg-flame--sm[b-08w578wygw]         { font-size: 1.125rem; opacity: 0.55; }
.kg-flame--lg[b-08w578wygw]         { font-size: 1.5rem;   opacity: 0.85; }

/* ══════════════════════════════════════════════════════════════════
   CONTENEDOR DE CONTENIDO
══════════════════════════════════════════════════════════════════ */

.kg-content[b-08w578wygw] {
    max-width: 56rem;
    margin: 0 auto;
    padding: 3.5rem 1rem 1rem;
}

@media (min-width: 640px)  { .kg-content[b-08w578wygw] { padding: 4rem 1.5rem 1rem; } }
@media (min-width: 1024px) { .kg-content[b-08w578wygw] { padding: 4.5rem 2rem 1rem; } }
@media (min-width: 1600px) { .kg-content[b-08w578wygw] { max-width: 68rem; } }

/* ══════════════════════════════════════════════════════════════════
   CARD DE LA LEYENDA
══════════════════════════════════════════════════════════════════ */

.kg-leyenda-card[b-08w578wygw] {
    position: relative;
    background: #ffffff;
    border: 1px solid #F0EDE8;
    border-radius: 1rem;
    box-shadow: 0 1px 4px rgba(62, 39, 35, 0.06);
    padding: 1.75rem 1.5rem 2rem;
    margin-bottom: 3rem;
    overflow: hidden;
}

@media (min-width: 640px) {
    .kg-leyenda-card[b-08w578wygw] { padding: 2rem 2.5rem; }
}

/* Línea de acento naranja en el borde superior */
.kg-leyenda-accent[b-08w578wygw] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #D84315, #FF8A65, #D84315);
}

.kg-leyenda-header[b-08w578wygw] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
}

.kg-leyenda-icon[b-08w578wygw] {
    color: #D84315;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.kg-leyenda-title[b-08w578wygw] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #3E2723;
    margin: 0;
}

@media (min-width: 640px) {
    .kg-leyenda-title[b-08w578wygw] { font-size: 1.5rem; }
}

.kg-leyenda-text[b-08w578wygw] {
    font-size: 0.875rem;
    font-style: italic;
    color: #5D4037;
    line-height: 2;
    margin: 0;
}

@media (min-width: 640px) {
    .kg-leyenda-text[b-08w578wygw] { font-size: 1rem; }
}

/* ══════════════════════════════════════════════════════════════════
   FOTO POLAROID — centrada (sombrero)
══════════════════════════════════════════════════════════════════ */

.kg-foto-center[b-08w578wygw] {
    display: flex;
    justify-content: center;
    margin-bottom: 2.5rem;
}

.kg-foto-polaroid[b-08w578wygw] {
    background: #ffffff;
    padding: 0.875rem 0.875rem 0.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border: 1px solid #E8E0D0;
    max-width: 22rem;
    width: 100%;
    transform: rotate(-1.5deg);
    transition: transform 0.45s ease;
}

.kg-foto-polaroid:hover[b-08w578wygw] {
    transform: rotate(0deg);
}

/* Frame de foto (maneja placeholder + imagen encima) */
.kg-foto-frame[b-08w578wygw] {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #3E2723;
    border: 1px solid rgba(216, 67, 21, 0.15);
}

.kg-foto-frame--cuadrado[b-08w578wygw] {
    width: 100%;
    aspect-ratio: 1 / 1;
}

.kg-foto-frame--ancho[b-08w578wygw] {
    width: 100%;
    aspect-ratio: 16 / 10;
}

/* Imagen real (encima del placeholder cuando carga) */
.kg-foto-img[b-08w578wygw] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Placeholder visible mientras la foto no está disponible */
.kg-foto-placeholder[b-08w578wygw] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1.5rem;
}

.kg-foto-placeholder-icon[b-08w578wygw] {
    font-size: 2rem;
    color: rgba(216, 67, 21, 0.45);
}

.kg-foto-placeholder-label[b-08w578wygw] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.kg-foto-placeholder-flames[b-08w578wygw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(216, 67, 21, 0.4);
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

/* Caption debajo de la polaroid */
.kg-foto-caption[b-08w578wygw] {
    text-align: center;
    padding: 0.5rem 0 0.25rem;
    font-size: 0.8125rem;
    font-style: italic;
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    color: #5D4037;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
   TEXTO PUENTE (Lince Intrépido)
══════════════════════════════════════════════════════════════════ */

.kg-lince-texto[b-08w578wygw] {
    text-align: center;
    font-size: 0.9375rem;
    color: #5D4037;
    line-height: 1.8;
    margin: 0 0 1.5rem;
}

.kg-lince-nombre[b-08w578wygw] {
    color: #D84315;
    font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════
   FOTO ANCHA (Lince Intrépido)
══════════════════════════════════════════════════════════════════ */

.kg-foto-wide-wrap[b-08w578wygw] {
    max-width: 44rem;
    margin: 0 auto 2rem;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(216, 67, 21, 0.10), 0 4px 16px rgba(0, 0, 0, 0.12);
    border: 2px solid rgba(216, 67, 21, 0.20);
}

/* ══════════════════════════════════════════════════════════════════
   DIVISOR DE LLAMA
══════════════════════════════════════════════════════════════════ */

.kg-divider[b-08w578wygw] {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 20rem;
    margin: 2rem auto 2.5rem;
    padding: 0 1.5rem;
}

.kg-divider-line[b-08w578wygw] {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(216, 67, 21, 0.25), transparent);
}

.kg-divider-icon[b-08w578wygw] {
    color: #D84315;
    font-size: 0.875rem;
    opacity: 0.5;
}

/* ══════════════════════════════════════════════════════════════════
   HALL OF FAME — SECCIÓN DE GANADORES
══════════════════════════════════════════════════════════════════ */

.kg-hof[b-08w578wygw] {
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 1rem 5rem;
}

@media (min-width: 640px)  { .kg-hof[b-08w578wygw] { padding: 0 1.5rem 5rem; } }
@media (min-width: 1024px) { .kg-hof[b-08w578wygw] { padding: 0 2rem 5rem; } }
@media (min-width: 1600px) { .kg-hof[b-08w578wygw] { max-width: 68rem; } }

/* Encabezado de sección */
.kg-hof-header[b-08w578wygw] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.kg-hof-header-icon[b-08w578wygw] {
    color: #D84315;
    font-size: 1.125rem;
    display: block;
    margin: 0 auto 0.75rem;
}

.kg-hof-title[b-08w578wygw] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: 1.625rem;
    font-weight: 700;
    color: #3E2723;
    margin: 0 0 0.625rem;
}

@media (min-width: 640px) {
    .kg-hof-title[b-08w578wygw] { font-size: 2rem; }
}

.kg-hof-subtitle[b-08w578wygw] {
    font-size: 0.875rem;
    color: #8D6E63;
    max-width: 30rem;
    margin: 0 auto;
    line-height: 1.6;
}

/* Toolbar de administrador */
.kg-admin-toolbar[b-08w578wygw] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
}

.kg-btn-agregar[b-08w578wygw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background-color: #D84315;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(216, 67, 21, 0.30);
    transition: opacity var(--transition-fast, 150ms), box-shadow var(--transition-fast, 150ms);
}

.kg-btn-agregar:hover[b-08w578wygw] {
    opacity: 0.88;
    box-shadow: 0 4px 14px rgba(216, 67, 21, 0.35);
}

/* ══════════════════════════════════════════════════════════════════
   TIMELINE — GRUPOS POR AÑO
══════════════════════════════════════════════════════════════════ */

.kg-timeline[b-08w578wygw] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.kg-anio-grupo[b-08w578wygw] {
    /* Cada bloque de un año */
}

/* Encabezado del año (badge + línea) */
.kg-anio-header[b-08w578wygw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
}

.kg-anio-badge[b-08w578wygw] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background-color: rgba(216, 67, 21, 0.08);
    border: 1.5px solid rgba(216, 67, 21, 0.18);
    color: #D84315;
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: 0.8125rem;
    font-weight: 800;
    white-space: nowrap;
    flex-shrink: 0;
}

.kg-anio-linea[b-08w578wygw] {
    flex: 1;
    height: 1px;
    background-color: #E8E0D0;
}

/* Filas de entradas */
.kg-anio-items[b-08w578wygw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-left: 0.5rem;
}

@media (min-width: 640px) {
    .kg-anio-items[b-08w578wygw] { padding-left: 1rem; }
}

/* Fila individual */
.kg-row[b-08w578wygw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem 0.875rem 1.25rem;
    border-radius: 0.75rem;
    background: #ffffff;
    border: 1px solid #F0EDE8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow var(--transition-fast, 150ms);
}

.kg-row:hover[b-08w578wygw] {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
}

@media (min-width: 560px) {
    .kg-row[b-08w578wygw] {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }
}

/* Lado izquierdo: fecha + lugar */
.kg-row-izq[b-08w578wygw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

@media (min-width: 560px) {
    .kg-row-izq[b-08w578wygw] {
        min-width: 14rem;
        flex-wrap: nowrap;
    }
}

.kg-row-mesanio[b-08w578wygw] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #D84315;
    white-space: nowrap;
}

.kg-row-sep[b-08w578wygw] {
    font-size: 0.6875rem;
    color: #BDBDBD;
}

.kg-row-lugar[b-08w578wygw] {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.75rem;
    color: #8D6E63;
}

/* Lado derecho: tag ganador + acciones */
.kg-row-der[b-08w578wygw] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

@media (min-width: 560px) {
    .kg-row-der[b-08w578wygw] {
        margin-left: auto;
        flex-wrap: nowrap;
    }
}

/* Tag de ganador — coloreado dinámicamente con inline style */
.kg-tag[b-08w578wygw] {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border-width: 1.5px;
    border-style: solid;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    max-width: 100%;
    word-break: break-word;
}

.kg-tag-icon[b-08w578wygw] {
    font-size: 0.6875rem;
    flex-shrink: 0;
}

.kg-tag-vacio[b-08w578wygw] {
    font-size: 0.6875rem;
    font-style: italic;
    color: #BDBDBD;
}

/* Botones de acciones admin — ocultos hasta hover en filas con .kg-row--admin */
.kg-row-acciones[b-08w578wygw] {
    display: none;
    align-items: center;
    gap: 0.25rem;
}

.kg-row--admin:hover .kg-row-acciones[b-08w578wygw] {
    display: flex;
}

.kg-btn-editar[b-08w578wygw],
.kg-btn-eliminar[b-08w578wygw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background-color var(--transition-fast, 150ms);
    background-color: transparent;
}

.kg-btn-editar[b-08w578wygw] {
    color: #D84315;
}

.kg-btn-editar:hover[b-08w578wygw] {
    background-color: #FFF3E0;
}

.kg-btn-eliminar[b-08w578wygw] {
    color: #C62828;
}

.kg-btn-eliminar:hover[b-08w578wygw] {
    background-color: #FFEBEE;
}

/* ══════════════════════════════════════════════════════════════════
   PIE DEL TIMELINE
══════════════════════════════════════════════════════════════════ */

.kg-timeline-fin[b-08w578wygw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 3rem;
}

.kg-fin-flames[b-08w578wygw] {
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
}

.kg-fin-flame[b-08w578wygw]         { color: #D84315; line-height: 1; }
.kg-fin-flame--sm[b-08w578wygw]     { font-size: 0.875rem; opacity: 0.35; }
.kg-fin-flame--md[b-08w578wygw]     { font-size: 1.125rem; opacity: 0.55; }

.kg-fin-texto[b-08w578wygw] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #A1887F;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
   MODALES — Backdrop
══════════════════════════════════════════════════════════════════ */

.kg-modal-backdrop[b-08w578wygw] {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.50);
    backdrop-filter: blur(2px);
    animation: kgFadeIn-b-08w578wygw 0.2s ease both;
}

@keyframes kgFadeIn-b-08w578wygw {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════
   MODAL — Ventana centrada (el div.kg-modal ES la ventana)
══════════════════════════════════════════════════════════════════ */

.kg-modal[b-08w578wygw] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    width: calc(100% - 2rem);
    max-width: 32rem;
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    border: 1px solid #E8E0D0;
    max-height: 90dvh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    animation: kgModalIn-b-08w578wygw 0.22s ease both;
}

@keyframes kgModalIn-b-08w578wygw {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(0.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1);                 }
}

.kg-modal-header[b-08w578wygw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #3E2723, #5D4037);
    border-bottom: 2px solid rgba(216, 67, 21, 0.20);
    border-radius: 1rem 1rem 0 0;
    flex-shrink: 0;
}

.kg-modal-header-inner[b-08w578wygw] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.kg-modal-header-icon[b-08w578wygw] {
    color: #FFB74D;
    font-size: 1rem;
}

.kg-modal-titulo[b-08w578wygw] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0;
}

.kg-modal-cerrar[b-08w578wygw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: background-color var(--transition-fast, 150ms);
    font-size: 1rem;
}

.kg-modal-cerrar:hover[b-08w578wygw] {
    background: rgba(255, 255, 255, 0.20);
}

.kg-modal-body[b-08w578wygw] {
    padding: 1.375rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

/* ══════════════════════════════════════════════════════════════════
   FORMULARIO
══════════════════════════════════════════════════════════════════ */

.kg-form-row[b-08w578wygw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}

.kg-form-grupo[b-08w578wygw] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.kg-label[b-08w578wygw] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #8D6E63;
}

.kg-select[b-08w578wygw],
.kg-input[b-08w578wygw] {
    width: 100%;
    background-color: #FAF8F5;
    border: 1.5px solid #E8E0D0;
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    color: #3E2723;
    appearance: none;
    transition: border-color var(--transition-fast, 150ms);
    font-family: var(--font-sans, Inter, sans-serif);
}

.kg-select:focus[b-08w578wygw],
.kg-input:focus[b-08w578wygw] {
    outline: none;
    border-color: rgba(216, 67, 21, 0.50);
    box-shadow: 0 0 0 3px rgba(216, 67, 21, 0.10);
}

.kg-input[b-08w578wygw]::placeholder { color: #BDBDBD; }

.kg-form-hint[b-08w578wygw] {
    font-size: 0.6875rem;
    color: #A1887F;
}

.kg-form-hint--inline[b-08w578wygw] {
    align-self: center;
}

/* Color picker */
.kg-color-row[b-08w578wygw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.kg-input-color[b-08w578wygw] {
    width: 2.5rem;
    height: 2.25rem;
    padding: 0.125rem;
    background: #FAF8F5;
    border: 1.5px solid #E8E0D0;
    border-radius: 0.5rem;
    cursor: pointer;
}

.kg-color-muestra[b-08w578wygw] {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.10);
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════
   BOTONES DE MODAL
══════════════════════════════════════════════════════════════════ */

.kg-modal-acciones[b-08w578wygw] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.5rem;
}

.kg-btn-cancelar[b-08w578wygw] {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: #5D4037;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast, 150ms);
    font-family: var(--font-sans, Inter, sans-serif);
}

.kg-btn-cancelar:hover[b-08w578wygw] {
    background-color: #F5F5F5;
}

.kg-btn-guardar[b-08w578wygw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 0.5rem;
    background-color: #D84315;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity var(--transition-fast, 150ms);
    font-family: var(--font-sans, Inter, sans-serif);
}

.kg-btn-guardar:hover[b-08w578wygw] { opacity: 0.88; }

/* ══════════════════════════════════════════════════════════════════
   MODAL — CONFIRMAR ELIMINACIÓN
══════════════════════════════════════════════════════════════════ */

.kg-modal--confirmar[b-08w578wygw] {
    max-width: 24rem;
    text-align: center;
    padding: 2rem 1.5rem;
    align-items: center;
    border-color: #FFCDD2;
}

.kg-modal-eliminar-icono[b-08w578wygw] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: #FFEBEE;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: #C62828;
    font-size: 1.25rem;
}

.kg-modal-eliminar-titulo[b-08w578wygw] {
    font-size: 1rem;
    font-weight: 700;
    color: #3E2723;
    margin: 0 0 0.5rem;
}

.kg-modal-eliminar-desc[b-08w578wygw] {
    font-size: 0.875rem;
    color: #8D6E63;
    margin: 0 0 0.25rem;
}

.kg-modal-eliminar-ganador[b-08w578wygw] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #5D4037;
    margin: 0 0 1rem;
}

.kg-modal-eliminar-advertencia[b-08w578wygw] {
    font-size: 0.75rem;
    color: #BDBDBD;
    margin: 0 0 1.5rem;
}

.kg-btn-eliminar-confirmar[b-08w578wygw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 0.5rem;
    background-color: #C62828;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity var(--transition-fast, 150ms);
    font-family: var(--font-sans, Inter, sans-serif);
}

.kg-btn-eliminar-confirmar:hover[b-08w578wygw] { opacity: 0.88; }

/* =======================================================================
   FOGÓN STATS — SECCIÓN OSCURA NOCTURNA
   Contrasta con el contenido blanco de arriba.
   Reproduce la atmósfera cálida del hero con fondo marrón profundo.
   ======================================================================= */

.kg-fogon-stats[b-08w578wygw] {
    background: linear-gradient(
        175deg,
        #2A1610 0%,
        #1E0F05 40%,
        #2A1610 100%
    );
    padding: 3.5rem 1rem 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Resplandor naranja ambiental de fondo */
.kg-fogon-stats[b-08w578wygw]::before {
    content: '';
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(216, 67, 21, 0.14) 0%, transparent 70%);
    pointer-events: none;
}

/* Llamas decorativas */
.kg-fogon-llamas-top[b-08w578wygw],
.kg-fogon-llamas-bottom[b-08w578wygw] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.25rem;
}

.kg-fogon-llamas-top[b-08w578wygw]    { margin-bottom: 1.25rem; }
.kg-fogon-llamas-bottom[b-08w578wygw] { margin-top: 2rem; }

.kg-fogon-fl[b-08w578wygw]            { line-height: 1; }
.kg-fogon-fl--xs[b-08w578wygw]        { font-size: 0.75rem;  color: #D84315; opacity: 0.30; }
.kg-fogon-fl--sm[b-08w578wygw]        { font-size: 1rem;     color: #FF8A65; opacity: 0.50; }
.kg-fogon-fl--lg[b-08w578wygw]        { font-size: 1.375rem; color: #FFB74D; opacity: 0.80; }

/* Título y bajada */
.kg-fogon-titulo[b-08w578wygw] {
    font-family: var(--font-serif, 'Bitter', serif);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem;
    text-shadow: 0 2px 12px rgba(216, 67, 21, 0.25);
}

.kg-fogon-bajada[b-08w578wygw] {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: clamp(0.875rem, 2vw, 1rem);
    color: rgba(255, 255, 255, 0.55);
    max-width: 30rem;
    margin: 0 auto 2.25rem;
    line-height: 1.5;
}

/* --- Ranking --- */

.kg-fogon-ranking[b-08w578wygw] {
    max-width: 40rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    text-align: left;
}

.kg-fogon-fila[b-08w578wygw] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.625rem 1rem;
    border-radius: 0.625rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background var(--transition-fast, 150ms);
}

.kg-fogon-fila:hover[b-08w578wygw] {
    background: rgba(255, 255, 255, 0.08);
}

/* Punto de color de la unidad */
.kg-fogon-brasa[b-08w578wygw] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(255, 183, 77, 0.25);
}

.kg-fogon-datos[b-08w578wygw] {
    flex: 1;
    min-width: 0;
}

.kg-fogon-nombre-row[b-08w578wygw] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.375rem;
}

.kg-fogon-nombre[b-08w578wygw] {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kg-fogon-victorias[b-08w578wygw] {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    color: #FFB74D;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.kg-fogon-victorias-icono[b-08w578wygw] {
    font-size: 0.625rem;
    opacity: 0.70;
}

/* Barra con efecto de brasa */
.kg-fogon-barra-track[b-08w578wygw] {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.kg-fogon-barra-llama[b-08w578wygw] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
    min-width: 4px;
    box-shadow: 0 0 8px rgba(216, 67, 21, 0.30);
}

/* --- Responsive --- */

@media (min-width: 640px) {
    .kg-fogon-stats[b-08w578wygw] {
        padding: 4rem 1.5rem 3.5rem;
    }

    .kg-fogon-fila[b-08w578wygw] {
        padding: 0.75rem 1.25rem;
    }
}

@media (min-width: 1024px) {
    .kg-fogon-stats[b-08w578wygw] {
        padding: 4.5rem 2rem 4rem;
    }
}

@media (max-width: 480px) {
    .kg-fogon-nombre[b-08w578wygw] {
        font-size: 0.8125rem;
    }

    .kg-fogon-fila[b-08w578wygw] {
        gap: 0.625rem;
        padding: 0.5rem 0.75rem;
    }
}
/* /Pages/Logout/Index.razor.rz.scp.css */
:root[b-xsp7ajtrft] {
  /*No me estarian funcionando las variables de css*/
  --footer-bg-color: #333333; /*Esto iria para .custom-input y .arch_contact_us_duplicate*/
}


/*body general*/
body[b-xsp7ajtrft]{
    background-color: #FFFFFF;
    
}
/*Todas las tipografías*/
body p[b-xsp7ajtrft],a[b-xsp7ajtrft],h1[b-xsp7ajtrft],h2[b-xsp7ajtrft],h3[b-xsp7ajtrft],h4[b-xsp7ajtrft],h5[b-xsp7ajtrft],label[b-xsp7ajtrft]{
  font-family: 'Open Sans', sans-serif;
  color:black;
  font-size: 15pt;

}

/*Comienzo Navbar*/
.navbar[b-xsp7ajtrft]{
  background-color: #0A592A;
}

.navbar-brand[b-xsp7ajtrft]{
margin-left: 20px;
}
#navbar-principal a[b-xsp7ajtrft]{
  color: #FFFFFF;
}
#toggler-boton[b-xsp7ajtrft]{
border-width: 1px;
border-color: #FFFFFF;
}

.navbar-toggler[b-xsp7ajtrft] {
  border-color: #FFFFFF;
}

#navbarText[b-xsp7ajtrft]{
  padding-left: 25%;
  padding-right: 20px;
}
/*Fin Navbar*/

/*Comienzo Carousel*/

.carousel-item[b-xsp7ajtrft] {
height: 55vh;
object-fit: scale-down;
object-position: center;
}
.carousel-item img[b-xsp7ajtrft]{
background-image: none;
background-color: rgb(100,100,100);
background-blend-mode: soft-light;
opacity: 0.4
}
/*Titulo Carousel*/
.carousel-caption h1[b-xsp7ajtrft]{
  color: black;
  font-weight:bold;
  font-size:45pt;
}
/*Fin Carousel*/

/*Comienzo Visitados*/
.most-visited[b-xsp7ajtrft]{
    margin-top:100px;
}
.most-visited .col-md-7[b-xsp7ajtrft] {
    margin-top: 100px;
}

.most-visited h1[b-xsp7ajtrft]
{
  font-size: 45pt;
  line-height:350%;
  font-weight:bold;
  text-align: center;
}

.featurette-heading[b-xsp7ajtrft]{
  font-size: 45pt;
  line-height:350%;
  font-weight:bold;
  text-align: justify;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 10%;
}

.most-visited .lead[b-xsp7ajtrft]{
  padding-left: 10%;
  padding-top: 10%;
  padding-right: 10%;
}

.most-visited .col-md-5[b-xsp7ajtrft]{
  padding-left: 10%;
  padding-top: 10%;
  padding-right: 10%;
}
/*Fin Visitados*/

/*Comienzo Organizacion*/
#nuestra-organizacion[b-xsp7ajtrft] {
    margin:200px 0 0 0;

    padding-bottom: 200px;
}
#nuestra-organizacion h1[b-xsp7ajtrft] {
    font-size: 45pt;
    line-height: 350%;
    font-weight: bold;
    text-align: center;
}

#nuestra-organizacion .seccion[b-xsp7ajtrft]
{
  font-size: 20pt;
  line-height:200%;
  font-weight:  bold;
  text-align: center;
}

#nuestra-organizacion p[b-xsp7ajtrft]
{
  font-size: 10pt;
  text-align: normal;
}


#nuestra-organizacion .lead[b-xsp7ajtrft]{
  padding-left: 7%;
  padding-right: 7%;
  padding-bottom: 5%;
  font-size: 14pt;
}

#nuestra-organizacion .col-lg-3[b-xsp7ajtrft]{
  text-align: center;
}
#nuestra-organizacion .col-lg-3[b-xsp7ajtrft]{
  text-align: center;
}
.org-img-container[b-xsp7ajtrft] {
    width: 140px;
    height: 140px;
    margin: auto;
}
.org-img[b-xsp7ajtrft] {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 1;
}


/*Fin Organizacion*/


.bd-placeholder-img image[b-xsp7ajtrft] {
    width: 100%;
    height:auto;
    top: 0;
    left: 0;
    object-fit: cover;
}
/* /Pages/Mensajes/Index.razor.rz.scp.css */
/* ==========================================================================
   Mensajes/Index.razor.css — Estilos del libro de mensajes público
   ==========================================================================
   CSS Isolation: aplica solo a Pages/Mensajes/Index.razor.
   Prefijo mp- (mensajes-page) en todas las clases para evitar colisiones
   con otras páginas del proyecto.

   Secciones:
     A. Página completa
     B. Hero banner (port de FadeHeroBanner.tsx)
     C. Sección principal (feed)
     D. Encabezado del feed
     E. Tarjetas de mensajes
     F. Respuesta oficial del grupo
     G. Controles de admin inline
     H. Paginación
     I. CTA inferior
     J. Modal de escritura + honeypot
     K. Spinner pequeño
     L. Estados loading / vacío
     M. Responsive móvil
   ========================================================================== */

/* ── A. Página completa ──────────────────────────────────────────────────── */
.mp-page[b-xj5682nhy0] {
    background-color: var(--background, #F9F7F2);
    min-height: 100vh;
}

/* ── B. HERO BANNER ──────────────────────────────────────────────────────── */
.mp-hero[b-xj5682nhy0] {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.mp-hero-img[b-xj5682nhy0] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.70);
}

.mp-hero-overlay[b-xj5682nhy0] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.20) 0%,
        rgba(0,0,0,0.38) 55%,
        rgba(0,0,0,0.25) 100%
    );
}

/* Fusiona el borde inferior del hero con el fondo crema de la página. */
.mp-hero-fade[b-xj5682nhy0] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 42%;
    background: linear-gradient(
        to top,
        var(--background, #F9F7F2) 0%,
        rgba(249,247,242,0.80) 35%,
        rgba(249,247,242,0) 100%
    );
}

.mp-hero-content[b-xj5682nhy0] {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1.25rem;
    gap: 0.75rem;
}

.mp-hero-title[b-xj5682nhy0] {
    font-family: var(--font-serif, 'Bitter', Georgia, serif);
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-weight: 700;
    color: white;
    letter-spacing: -0.02em;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

.mp-hero-subtitle[b-xj5682nhy0] {
    font-size: 1rem;
    color: rgba(255,255,255,0.88);
    max-width: 480px;
    line-height: 1.55;
    margin: 0;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

/* ── C. Sección principal ────────────────────────────────────────────────── */
.mp-section[b-xj5682nhy0] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.25rem 3rem;
}

/* ── D. Encabezado del feed ─────────────────────────────────────────────── */
.mp-feed-header[b-xj5682nhy0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.mp-feed-count[b-xj5682nhy0] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #5D4037;
}

.mp-feed-page-info[b-xj5682nhy0] {
    font-size: 0.7rem;
    color: #BDBDBD;
}

/* ── E. Tarjetas de mensajes ─────────────────────────────────────────────── */
.mp-feed[b-xj5682nhy0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mp-card[b-xj5682nhy0] {
    background: #FFFFFF;
    border: 1px solid #EDE8E0;
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    overflow: hidden;
}

/* Cabecera de la tarjeta: avatar + info + fecha */
.mp-card-header[b-xj5682nhy0] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.mp-card-avatar[b-xj5682nhy0] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.02em;
}

.mp-avatar-sanpa[b-xj5682nhy0] {
    background: linear-gradient(135deg, #2E7D32, #43A047);
}

.mp-avatar-otro[b-xj5682nhy0] {
    background: linear-gradient(135deg, #78909C, #90A4AE);
}

.mp-card-info[b-xj5682nhy0] {
    flex: 1;
    min-width: 0;
}

.mp-card-name-row[b-xj5682nhy0] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.mp-card-name[b-xj5682nhy0] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #37474F;
    text-transform: capitalize;
}

.mp-card-flag[b-xj5682nhy0] {
    font-size: 0.875rem;
    line-height: 1;
}

.mp-card-details[b-xj5682nhy0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.2rem;
}

.mp-card-lugar[b-xj5682nhy0] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.7rem;
    color: #9E9E9E;
}

.mp-card-grupo[b-xj5682nhy0] {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
}

.mp-grupo-sanpa[b-xj5682nhy0] {
    background-color: #E8F5E9;
    color: #2E7D32;
    border: 1px solid #C8E6C9;
}

.mp-grupo-dot[b-xj5682nhy0] {
    margin-right: 0.15rem;
    font-size: 0.55rem;
}

.mp-grupo-otro[b-xj5682nhy0] {
    background-color: #F5F5F5;
    color: #9E9E9E;
    border: 1px solid #E0E0E0;
}

.mp-card-fecha[b-xj5682nhy0] {
    font-size: 0.68rem;
    font-weight: 500;
    color: #BDBDBD;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* Cuerpo del mensaje — cursiva serif evocadora */
.mp-card-body[b-xj5682nhy0] {
    font-family: var(--font-serif, 'Bitter', Georgia, serif);
    font-size: 0.9rem;
    font-style: italic;
    color: #455A64;
    line-height: 1.85;
    margin: 0.75rem 0 0.75rem;
}

/* Separador decorativo */
.mp-card-hr-wrap[b-xj5682nhy0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
}

.mp-card-hr[b-xj5682nhy0] {
    flex: 1;
    height: 1px;
    background-color: #F0EDE8;
}

/* ── F. Respuesta oficial del grupo ─────────────────────────────────────── */
.mp-reply-box[b-xj5682nhy0] {
    margin-top: 1rem;
    background-color: #F1F8E9;
    border: 1px solid #C5E1A5;
    border-radius: 0.75rem;
    padding: 0.85rem 1rem;
}

.mp-reply-header[b-xj5682nhy0] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.mp-reply-avatar[b-xj5682nhy0] {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #e6ffe7, #a7ffac);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    font-size: 0.7rem;
}

.mp-reply-meta[b-xj5682nhy0] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    min-width: 0;
}

.mp-reply-author[b-xj5682nhy0] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #2E7D32;
}

.mp-reply-badge[b-xj5682nhy0] {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 9999px;
    background-color: #C8E6C9;
    color: #1B5E20;
}

.mp-reply-fecha[b-xj5682nhy0] {
    font-size: 0.62rem;
    font-weight: 500;
    color: #81C784;
    margin-left: auto;
}

.mp-reply-text[b-xj5682nhy0] {
    font-size: 0.82rem;
    color: #33691E;
    line-height: 1.7;
    margin: 0;
}

/* ── G. Controles de admin inline ───────────────────────────────────────── */
.mp-admin-actions[b-xj5682nhy0] {
    margin-top: 0.85rem;
    display: flex;
    justify-content: flex-end;
}

.mp-btn-responder[b-xj5682nhy0] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid #C8E6C9;
    border-radius: 0.5rem;
    background-color: #E8F5E9;
    color: #2E7D32;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
}

.mp-btn-responder:hover[b-xj5682nhy0]  { filter: brightness(0.95); transform: scale(1.01); }
.mp-btn-responder:active[b-xj5682nhy0] { transform: scale(0.97); }

.mp-reply-form[b-xj5682nhy0] {
    margin-top: 1rem;
    background-color: #FAFAF8;
    border: 1.5px solid #C8E6C9;
    border-radius: 0.75rem;
    padding: 1rem;
}

.mp-reply-form-header[b-xj5682nhy0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #2E7D32;
    margin-bottom: 0.65rem;
}

.mp-reply-textarea[b-xj5682nhy0] {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1.5px solid #E0D8CF;
    border-radius: 0.6rem;
    font-size: 0.82rem;
    color: #37474F;
    line-height: 1.7;
    resize: vertical;
    background: #FFFFFF;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.mp-reply-textarea:focus[b-xj5682nhy0] {
    outline: none;
    border-color: #A5D6A7;
}

.mp-reply-form-footer[b-xj5682nhy0] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.mp-btn-cancelar-reply[b-xj5682nhy0] {
    padding: 0.35rem 0.75rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: #9E9E9E;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.mp-btn-cancelar-reply:hover[b-xj5682nhy0] { background: #F5F5F5; }

.mp-btn-publicar[b-xj5682nhy0] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 1rem;
    border: none;
    border-radius: 0.5rem;
    background-color: #2E7D32;
    color: #FFFFFF;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
    box-shadow: 0 2px 6px rgba(46,125,50,0.25);
}

.mp-btn-publicar:hover:not(:disabled)[b-xj5682nhy0]  { filter: brightness(1.08); transform: scale(1.01); }
.mp-btn-publicar:active:not(:disabled)[b-xj5682nhy0] { transform: scale(0.97); }
.mp-btn-publicar:disabled[b-xj5682nhy0] {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

/* ── H. Paginación ───────────────────────────────────────────────────────── */
.mp-pagination[b-xj5682nhy0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.mp-pag-btn[b-xj5682nhy0] {
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #8D6E63;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, transform 0.1s;
}

.mp-pag-btn:hover:not(:disabled):not(.mp-pag-active)[b-xj5682nhy0] {
    background-color: #EFEBE9;
}
.mp-pag-btn:active:not(:disabled)[b-xj5682nhy0] { transform: scale(0.93); }
.mp-pag-btn:disabled[b-xj5682nhy0] { opacity: 0.3; cursor: not-allowed; }

.mp-pag-active[b-xj5682nhy0] {
    background-color: #2E7D32 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(46,125,50,0.28);
}

.mp-pag-nav[b-xj5682nhy0] {
    width: auto;
    padding: 0 0.75rem;
    border-radius: 0.5rem;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #5D4037;
}

.mp-pag-nav:hover:not(:disabled)[b-xj5682nhy0] { background-color: #EFEBE9; }

.mp-pag-label[b-xj5682nhy0] {
    display: none;
}

.mp-pag-dots[b-xj5682nhy0] {
    padding: 0 0.25rem;
    font-size: 0.85rem;
    color: #BDBDBD;
    user-select: none;
}

/* ── I. Botón principal (hero + CTA) ─────────────────────────────────────── */
.mp-btn-escribir[b-xj5682nhy0] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.75rem;
    border: none;
    border-radius: 0.875rem;
    background-color: #2E7D32;
    color: #FFFFFF;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, filter 0.15s;
    box-shadow: 0 4px 16px rgba(46,125,50,0.35), 0 2px 4px rgba(0,0,0,0.1);
}

.mp-btn-escribir:hover[b-xj5682nhy0]  { filter: brightness(1.08); transform: scale(1.02); }
.mp-btn-escribir:active[b-xj5682nhy0] { transform: scale(0.97); }

.mp-btn-escribir-sm[b-xj5682nhy0] {
    font-size: 0.85rem;
    padding: 0.65rem 1.35rem;
    box-shadow: 0 2px 8px rgba(46,125,50,0.25);
}

/* ── Sección CTA inferior ────────────────────────────────────────────────── */
.mp-cta-section[b-xj5682nhy0] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.25rem 4rem;
}

.mp-cta-box[b-xj5682nhy0] {
    background-color: #EFEBE9;
    border: 2px dashed #D7CCC8;
    border-radius: 1rem;
    padding: 2rem 1.5rem;
    text-align: center;
}

.mp-cta-icon-wrap[b-xj5682nhy0] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: #D7CCC8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
}

.mp-cta-icon[b-xj5682nhy0] { color: #5D4037; font-size: 1.2rem; }

.mp-cta-title[b-xj5682nhy0] {
    font-family: var(--font-serif, 'Bitter', Georgia, serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: #3E2723;
    margin: 0 0 0.5rem;
}

.mp-cta-text[b-xj5682nhy0] {
    font-size: 0.875rem;
    color: #8D6E63;
    line-height: 1.6;
    max-width: 420px;
    margin: 0 auto 1.25rem;
}

/* ── J. MODAL ────────────────────────────────────────────────────────────── */
.mp-modal-backdrop[b-xj5682nhy0] {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: rgba(30,20,15,0.60);
    backdrop-filter: blur(4px);
}

.mp-modal-box[b-xj5682nhy0] {
    background: #FFFFFF;
    border: 1px solid #EDE8E0;
    border-radius: 1rem;
    width: 100%;
    max-width: 512px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}

.mp-modal-header[b-xj5682nhy0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 0.75rem;
}

.mp-modal-title-wrap[b-xj5682nhy0] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.mp-modal-icono[b-xj5682nhy0] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background-color: #E8F5E9;
    color: #2E7D32;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.mp-modal-titulo[b-xj5682nhy0] {
    font-family: var(--font-serif, 'Bitter', Georgia, serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: #37474F;
    margin: 0;
}

.mp-modal-close[b-xj5682nhy0] {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.4rem;
    background: transparent;
    color: #BDBDBD;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.15s;
}

.mp-modal-close:hover[b-xj5682nhy0] { background: #F5F5F5; }

.mp-modal-divider[b-xj5682nhy0] {
    height: 1px;
    background-color: #F0EDE8;
    margin: 0 1.5rem;
}

.mp-modal-body[b-xj5682nhy0],
[b-xj5682nhy0] .mp-modal-body {
    padding: 1.25rem 1.5rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Campos del formulario */
.mp-field[b-xj5682nhy0] { display: flex; flex-direction: column; gap: 0.35rem; }

.mp-label[b-xj5682nhy0] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #5D4037;
    letter-spacing: 0.03em;
}

.mp-required[b-xj5682nhy0] { color: #D32F2F; }

.mp-optional[b-xj5682nhy0] {
    font-size: 0.65rem;
    font-weight: 400;
    color: #BDBDBD;
    margin-left: 0.25rem;
}

.mp-input[b-xj5682nhy0],
[b-xj5682nhy0] .mp-input {
    padding: 0.625rem 1rem;
    border: 1.5px solid #E0D8CF;
    border-radius: 0.75rem;
    background-color: #FAFAF8;
    color: #37474F;
    font-size: 0.875rem;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.mp-input:focus[b-xj5682nhy0],
[b-xj5682nhy0] .mp-input:focus {
    outline: none;
    border-color: #A5D6A7;
}

.mp-textarea[b-xj5682nhy0],
[b-xj5682nhy0] .mp-textarea {
    resize: none;
    line-height: 1.7;
    min-height: 7rem;
    padding: 0.75rem 1rem;
}

.mp-select[b-xj5682nhy0],
[b-xj5682nhy0] .mp-select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235D4037' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.25rem;
    padding-left: 0.75rem;
}

.mp-error[b-xj5682nhy0],
[b-xj5682nhy0] .mp-error,
[b-xj5682nhy0] .validation-message {
    font-size: 0.7rem;
    color: #D32F2F;
}

/* Fila inferior del campo Mensaje: error de validación a la izquierda, contador a la derecha */
.mp-field-footer[b-xj5682nhy0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 1rem;
}

/* Agrupa el botón de emoji + contador de chars en el extremo derecho del footer */
.mp-campo-acciones[b-xj5682nhy0] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.mp-char-counter[b-xj5682nhy0] {
    font-size: 0.7rem;
    color: #78909C;
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}

.mp-char-near-limit[b-xj5682nhy0] {
    color: #D32F2F;
    font-weight: 600;
}

/* Fila país + lugar */
.mp-fields-row[b-xj5682nhy0] {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 0.75rem;
}

.mp-field-pais[b-xj5682nhy0],
.mp-field-lugar[b-xj5682nhy0] { display: flex; flex-direction: column; gap: 0.35rem; }

/*
    HONEYPOT — Oculto por CSS: desplazado fuera de pantalla y sin altura.
    Un bot típico llena todos los inputs visibles en el DOM; los usuarios
    humanos nunca lo ven ni pueden alcanzarlo con el teclado (tabindex=-1).
*/
.mp-honeypot[b-xj5682nhy0] {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    tabindex: -1;
}

.mp-modal-footer[b-xj5682nhy0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.5rem 1rem;
}

.mp-btn-cancelar-modal[b-xj5682nhy0] {
    border: none;
    background: transparent;
    color: #9E9E9E;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s;
}

.mp-btn-cancelar-modal:hover[b-xj5682nhy0] { text-decoration: underline; }

.mp-btn-enviar[b-xj5682nhy0] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1.5rem;
    border: none;
    border-radius: 0.75rem;
    background-color: #2E7D32;
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
    box-shadow: 0 2px 8px rgba(46,125,50,0.25);
}

.mp-btn-enviar:hover:not(:disabled)[b-xj5682nhy0]  { filter: brightness(1.08); transform: scale(1.01); }
.mp-btn-enviar:active:not(:disabled)[b-xj5682nhy0] { transform: scale(0.97); }
.mp-btn-enviar:disabled[b-xj5682nhy0] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* Estado de éxito post-envío */
.mp-modal-success[b-xj5682nhy0] {
    padding: 2.5rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.mp-success-icon-wrap[b-xj5682nhy0] {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: #E8F5E9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.mp-success-icon[b-xj5682nhy0] { color: #2E7D32; font-size: 1.5rem; }

.mp-success-title[b-xj5682nhy0] {
    font-family: var(--font-serif, 'Bitter', Georgia, serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: #37474F;
    margin: 0;
}

.mp-success-text[b-xj5682nhy0] {
    font-size: 0.875rem;
    color: #9E9E9E;
    line-height: 1.6;
    margin: 0 0 1.25rem;
}

/* ── K. Spinner pequeño ──────────────────────────────────────────────────── */
.mp-spinner-sm[b-xj5682nhy0] {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: mpSpin-b-xj5682nhy0 0.65s linear infinite;
}

@keyframes mpSpin-b-xj5682nhy0 {
    to { transform: rotate(360deg); }
}

/* ── L. Estados loading / vacío ──────────────────────────────────────────── */
.mp-loading[b-xj5682nhy0] {
    display: flex;
    justify-content: center;
    padding: 3rem 0;
}

.mp-empty[b-xj5682nhy0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3.5rem 1rem;
    text-align: center;
}

.mp-empty-icon[b-xj5682nhy0] {
    font-size: 3rem;
    color: #D7CCC8;
}

.mp-empty-text[b-xj5682nhy0] {
    font-size: 0.9rem;
    color: #9E9E9E;
    margin: 0;
}

/* ── M. RESPONSIVE MÓVIL ─────────────────────────────────────────────────── */
@media (max-width: 639px) {
    .mp-hero[b-xj5682nhy0] { height: 400px; }
    .mp-hero-title[b-xj5682nhy0] { font-size: 2.1rem; }
    .mp-hero-subtitle[b-xj5682nhy0] { font-size: 0.875rem; }

    .mp-card[b-xj5682nhy0] { padding: 1rem 1.1rem; }
    .mp-card-body[b-xj5682nhy0] { font-size: 0.85rem; }

    .mp-fields-row[b-xj5682nhy0] {
        grid-template-columns: 1fr;
    }

    .mp-modal-box[b-xj5682nhy0] { max-width: 100%; border-radius: 1rem 1rem 0 0; align-self: flex-end; }
    .mp-modal-backdrop[b-xj5682nhy0] { align-items: flex-end; padding: 0; }
}

@media (min-width: 640px) {
    .mp-pag-label[b-xj5682nhy0] { display: inline; }
}
/* /Pages/Noticias/Index.razor.rz.scp.css */
/* ==========================================================================
   Noticias/Index.razor.css — Estilos de la página de listado de noticias
   ==========================================================================
   CSS Isolation: aplica solo a Pages/Noticias/Index.razor.
   Prefijo np- (noticias-page) en todas las clases para evitar colisiones
   con los estilos de otras páginas y componentes.

   Secciones:
     A. Página completa + animación de entrada
     B. Hero Banner (port de FadeHeroBanner.tsx)
     C. Contenedor principal
     D. Buscador
     E. Estados de carga y vacío
     F. Grilla de tarjetas (1 → 2 → 3 columnas)
     G. Tarjeta de noticia
     H. Paginación
     I. Responsive móvil
   ========================================================================== */

/* ── A. Página completa ──────────────────────────────────────────────────── */
.np-page[b-kxenehftdy] {
    background-color: #F9F7F2;
    min-height: 100vh;
    animation: npFadeIn-b-kxenehftdy 0.7s ease-out;
}

@keyframes npFadeIn-b-kxenehftdy {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── B. HERO BANNER — port de FadeHeroBanner.tsx ────────────────────────── */
.np-hero[b-kxenehftdy] {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

/* Imagen de fondo: cubre todo el contenedor con brillo reducido al 75%. */
.np-hero-img[b-kxenehftdy] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.75);
}

/* Overlay oscuro que aumenta el contraste del texto sobre la foto. */
.np-hero-overlay[b-kxenehftdy] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.25) 0%,
        rgba(0,0,0,0.40) 60%,
        rgba(0,0,0,0.30) 100%
    );
}

/* Degradado inferior que fusiona el hero con el fondo crema (#F9F7F2) de la página. */
.np-hero-fade-bottom[b-kxenehftdy] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(
        to top,
        #F9F7F2 0%,
        rgba(249,247,242,0.85) 30%,
        rgba(249,247,242,0) 100%
    );
}

.np-hero-content[b-kxenehftdy] {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1rem;
    animation: npHeroIn-b-kxenehftdy 0.55s ease-out both;
}

@keyframes npHeroIn-b-kxenehftdy {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.np-hero-title[b-kxenehftdy] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    color: white;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
    text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}

.np-hero-subtitle[b-kxenehftdy] {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255,255,255,0.85);
    text-shadow: 0 1px 12px rgba(0,0,0,0.25);
    max-width: 36rem;
    line-height: 1.6;
    margin: 0;
    animation: npHeroIn-b-kxenehftdy 0.5s 0.1s ease-out both;
}

/* ── C. CONTENEDOR PRINCIPAL ────────────────────────────────────────────── */
.np-container[b-kxenehftdy] {
    max-width: 96rem;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

@media (min-width: 640px) {
    .np-container[b-kxenehftdy] { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
    .np-container[b-kxenehftdy] { padding-left: 3rem; padding-right: 3rem; }
}

/* ── D. BUSCADOR ────────────────────────────────────────────────────────── */
.np-search-wrap[b-kxenehftdy] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 2.5rem;
}

.np-search-box[b-kxenehftdy] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 28rem;
    background: white;
    border: 1.5px solid #ECE6D8;
    border-radius: 9999px;
    padding: 0 1.25rem;
    gap: 0.625rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.07);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Anillo verde cuando el input está enfocado. */
.np-search-box:focus-within[b-kxenehftdy] {
    border-color: #2E7D32;
    box-shadow: 0 0 0 3px rgba(46,125,50,0.12);
}

.np-search-icon[b-kxenehftdy] {
    color: rgba(55,71,79,0.40);
    flex-shrink: 0;
}

.np-search-input[b-kxenehftdy] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9375rem;
    color: #37474F;
    padding: 0.75rem 0;
    line-height: 1;
}

.np-search-input[b-kxenehftdy]::placeholder {
    color: rgba(55,71,79,0.38);
}

.np-search-clear[b-kxenehftdy] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: rgba(55,71,79,0.40);
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.np-search-clear:hover[b-kxenehftdy] { color: #37474F; }

/* Banner de filtro activo */
.np-filtro-activo[b-kxenehftdy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: #E8F5E9;
    border: 1px solid #C8E6C9;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--text);
    margin-bottom: 1.25rem;
}

.np-filtro-limpiar[b-kxenehftdy] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 1px solid var(--primary);
    border-radius: 0.375rem;
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.25rem 0.625rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.np-filtro-limpiar:hover[b-kxenehftdy] {
    background: var(--primary);
    color: #ffffff;
}

/* Botón Buscar: pill verde, mismo alto visual que el search-box */
.np-search-btn[b-kxenehftdy] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: 0.75rem 1.5rem;
    background: var(--primary, #2E7D32);
    color: #fff;
    border: none;
    border-radius: 9999px;
    font-size: 0.9375rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.np-search-btn:hover[b-kxenehftdy]  { background: #1B5E20; }
.np-search-btn:active[b-kxenehftdy] { transform: scale(.97); }

/* ── E. ESTADOS DE CARGA / VACÍO ────────────────────────────────────────── */
.np-loading[b-kxenehftdy] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    min-height: 300px;
}

.np-loading .spinner-border[b-kxenehftdy] {
    width: 3rem;
    height: 3rem;
    border-width: 0.25rem;
}

/* Texto auxiliar que aparece solo durante la carga de la búsqueda global. */
.np-loading-text[b-kxenehftdy] {
    font-size: 0.9375rem;
    color: rgba(55,71,79,0.55);
    margin: 0;
}

.np-empty[b-kxenehftdy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 5rem 1rem;
    color: rgba(55,71,79,0.55);
    text-align: center;
    font-size: 1rem;
}

/* ── F. GRILLA — 1 col móvil → 2 col sm → 3 col md → 4 col escritorio ── */
.np-grid[b-kxenehftdy] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 4rem;
}

@media (min-width: 640px) {
    .np-grid[b-kxenehftdy] { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .np-grid[b-kxenehftdy] { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1400px) {
    .np-grid[b-kxenehftdy] { grid-template-columns: repeat(4, 1fr); }
}

/* ── G. TARJETA DE NOTICIA ──────────────────────────────────────────────── */
.np-card[b-kxenehftdy] {
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 1.5rem;
    overflow: hidden;
    border: 1px solid #ECE6D8;
    box-shadow: 0 1px 3px rgba(0,0,0,0.07);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: box-shadow 0.3s cubic-bezier(0.4,0,0.2,1),
                transform  0.3s cubic-bezier(0.4,0,0.2,1);
}

.np-card:hover[b-kxenehftdy] {
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.10),
                0 10px 10px -5px rgba(0,0,0,0.04);
    transform: translateY(-4px);
    text-decoration: none;
    color: inherit;
}

/* Imagen: overflow hidden para que el scale no desborde la tarjeta. */
.np-card-img-wrap[b-kxenehftdy] {
    position: relative;
    height: 14rem;
    overflow: hidden;
    flex-shrink: 0;
}

.np-card-img[b-kxenehftdy] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}

.np-card:hover .np-card-img[b-kxenehftdy] { transform: scale(1.05); }

/* Cuerpo: flex columna con flex:1 para que las tarjetas del mismo renglón sean igual de altas. */
.np-card-body[b-kxenehftdy] {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Fecha + autor: fila compacta en mayúsculas con separador bullet. */
.np-card-meta[b-kxenehftdy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(55,71,79,0.40);
    margin-bottom: 0.75rem;
}

.np-card-author[b-kxenehftdy] {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(55,71,79,0.50);
}

/* Título: serif, 2 líneas máximo con -webkit-line-clamp, vira a verde al hacer hover. */
.np-card-title[b-kxenehftdy] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: 1.375rem;
    font-weight: 700;
    color: #37474F;
    line-height: 1.3;
    margin: 0 0 1rem;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.np-card:hover .np-card-title[b-kxenehftdy] { color: #2E7D32; }

/* Extracto: 3 líneas máximo; flex:1 empuja el footer al fondo de la tarjeta. */
.np-card-excerpt[b-kxenehftdy] {
    font-size: 0.9375rem;
    color: rgba(55,71,79,0.70);
    line-height: 1.625;
    margin: 0 0 1.5rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* "Leer más": el footer se ancla al fondo; la flecha se anima con gap en hover. */
.np-card-footer[b-kxenehftdy] { margin-top: auto; }

.np-read-more[b-kxenehftdy] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #2E7D32;
    font-weight: 700;
    font-size: 0.875rem;
    transition: gap 0.2s ease;
}

.np-card:hover .np-read-more[b-kxenehftdy] { gap: 0.7rem; }

/* ── H. PAGINACIÓN ──────────────────────────────────────────────────────── */
.np-pagination[b-kxenehftdy] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 2rem 0;
    border-top: 1px solid #ECE6D8;
}

/* Botones circulares de navegación (◀ ▶) y salto (« ») */
.np-pag-nav[b-kxenehftdy] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    border: 1px solid #ECE6D8;
    background: white;
    color: #37474F;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.np-pag-nav:hover:not(:disabled)[b-kxenehftdy] {
    background-color: #ECE6D8;
    border-color: #d4cbb8;
}

.np-pag-nav:disabled[b-kxenehftdy] { opacity: 0.30; cursor: not-allowed; }

/* Botón de salto ±5: tamaño levemente menor para diferenciarlo visualmente */
.np-pag-jump[b-kxenehftdy] {
    width: 2.25rem;
    height: 2.25rem;
}

.np-pag-numbers[b-kxenehftdy] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Número concreto */
.np-pag-num[b-kxenehftdy] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    border: 1px solid #ECE6D8;
    background: white;
    color: #37474F;
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.np-pag-num:hover:not(.active)[b-kxenehftdy] { border-color: #2E7D32; color: #2E7D32; }

.np-pag-num.active[b-kxenehftdy] {
    background-color: #2E7D32;
    color: white;
    border-color: #2E7D32;
}

/* Clases de distancia: np-d-edge = pág.1 y última (nunca se ocultan).
   np-d-1 a np-d-5 = vecinos del activo; las media queries las ocultan
   progresivamente en el nav desktop. El nav mobile usa ventana=2
   y C# genera los "…" directamente, sin depender de CSS. */
.np-d-edge[b-kxenehftdy],
.np-d-0[b-kxenehftdy] { /* siempre visible */ }

/* Mobile: oculto por defecto, visible en pantallas angostas */
.np-pag-mobile[b-kxenehftdy] { display: none; }

/* Responsive desktop: ocultar botones lejanos progresivamente.
   A 480px se cambia a la versión mobile con ellipsis nativas. */
@media (max-width: 900px)  { .np-d-5[b-kxenehftdy] { display: none; } }
@media (max-width: 720px)  { .np-d-4[b-kxenehftdy] { display: none; } }
@media (max-width: 560px)  { .np-d-3[b-kxenehftdy] { display: none; } }

/* A 480px: cambiar a versión mobile (ventana=2 con "…" de C#) */
@media (max-width: 480px) {
    .np-pag-desktop[b-kxenehftdy] { display: none; }
    .np-pag-mobile[b-kxenehftdy]  { display: flex; }
}

/* Ellipsis "…" entre bloques de páginas */
.np-pag-ellipsis[b-kxenehftdy] {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(55,71,79,0.40);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    pointer-events: none;
    user-select: none;
}

/* ── I. RESPONSIVE MÓVIL — ajustes para pantallas < 480px ──────────────── */
@media (max-width: 480px) {
    .np-hero[b-kxenehftdy] { height: 320px; }
    .np-card-body[b-kxenehftdy] { padding: 1.25rem; }
    .np-card-img-wrap[b-kxenehftdy] { height: 11rem; }

    /* Paginación: reducir tamaño de todos los botones para que entren en pantalla angosta. */
    .np-pagination[b-kxenehftdy] { gap: 0.3rem; padding: 1.5rem 0; }
    .np-pag-nav[b-kxenehftdy]    { width: 2.25rem; height: 2.25rem; }
    .np-pag-jump[b-kxenehftdy]   { width: 1.875rem; height: 1.875rem; }
    .np-pag-num[b-kxenehftdy]    { width: 2.25rem; height: 2.25rem; font-size: 0.8125rem; border-radius: 0.5rem; }
    .np-pag-ellipsis[b-kxenehftdy] { width: 1.5rem; font-size: 0.875rem; }
}

/* En pantallas muy pequeñas (<360px) ocultar los botones de salto ±5
   para liberar espacio. */
@media (max-width: 360px) {
    .np-pag-jump[b-kxenehftdy] { display: none; }
}
/* /Pages/Noticias/Visualizar.razor.rz.scp.css */
/* ==========================================================================
   Noticias/Visualizar.razor.css — Estilos de la lectura completa de una noticia
   ==========================================================================
   CSS Isolation (scoped) — aplica exclusivamente a Pages/Noticias/Visualizar.razor.
   Utilizo el prefijo vz- en todas las clases para evitar colisiones con el
   resto de la aplicación.

   Paleta de colores:
     bg         #F5F5F5   fondo de página
     card       #FFFFFF   tarjeta artículo
     title      #1B5E20   título (accentDark — verde oscuro)
     body       #37474F   texto del cuerpo
     meta       #78909C   metadatos e iconos
     accent     #2E7D32   verde principal
     accentDark #1B5E20   verde oscuro (hover, gradientes)
     border     #E0E0E0   bordes
     guestBg    #ECEFF1   fondo CTA visitante

   Secciones:
     A. Página y animación de entrada
     B. Spinner de carga
     C. Barra de volver
     D. Tarjeta artículo + padding interno
     E. Header (título, copete, meta-row, acciones)
     F. Carrusel: imagen, flechas, badge, dots, thumbnails
     G. Cuerpo de la noticia + Auth Wall (preview, fade, tarjeta)
     H. Comentarios: encabezado, formulario rediseñado, CTA visitante, lista
     I. Responsive móvil
     J. Lightbox pantalla completa
   ========================================================================== */

/* Expando el <main> del layout para que el fondo cubra toda la altura
   y el carrusel no quede recortado. */
[b-9ookystmc2] main {
    overflow: visible !important;
    height: auto !important;
}


/* ── A. PÁGINA ────────────────────────────────────────────────────────────── */
.vz-page[b-9ookystmc2] {
    background-color: #F5F5F5;
    min-height: 100vh;
    padding-bottom: 4rem;
    /* Equivale a animate-in fade-in duration-500 */
    animation: vzFadeIn-b-9ookystmc2 0.5s ease-out both;
}

@keyframes vzFadeIn-b-9ookystmc2 {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ── B. SPINNER ───────────────────────────────────────────────────────────── *//* Centrado en el eje vertical para ocupar al menos 60 vh mientras carga. */.vz-loading[b-9ookystmc2] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.vz-loading .spinner-border[b-9ookystmc2] {
    width: 3rem;
    height: 3rem;
    border-width: 0.25rem;
}


/* ── C. BARRA DE VOLVER ───────────────────────────────────────────────────── */
/* Contenedor centrado que alberga el botón ‘← Volver a Noticias’. */
.vz-back-bar[b-9ookystmc2] {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 1rem 0.5rem;
}

.vz-back-btn[b-9ookystmc2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    color: #78909C;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

/* hover:bg-white — fondo blanco al pasar el cursor */
.vz-back-btn:hover[b-9ookystmc2] {
    background-color: #FFFFFF;
    color: #78909C;
    text-decoration: none;
}


/* ── D. TARJETA ARTÍCULO ─────────────────────────────────────────────────── */
/* Tarjeta blanca centrada, ancho máx. 900 px, con borde y sombra sutil. */
.vz-article[b-9ookystmc2] {
    max-width: 900px;
    margin: 0 auto 4rem;
    background-color: #FFFFFF;
    border-radius: 1rem;
    border: 1px solid #E0E0E0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
    overflow: hidden;
}

/* Padding interno que crece por breakpoint: 2rem (base) → 3rem (sm) → 4rem (md). */
.vz-inner[b-9ookystmc2] {
    padding: 2rem 1.5rem;
}

@media (min-width: 640px) {
    .vz-back-bar[b-9ookystmc2] { padding-left: 1.5rem; padding-right: 1.5rem; }
    .vz-inner[b-9ookystmc2]    { padding: 3rem; }
}

@media (min-width: 900px) {
    .vz-back-bar[b-9ookystmc2] { padding-left: 0; padding-right: 0; }
    .vz-inner[b-9ookystmc2]    { padding: 4rem; }
}


/* ── E. HEADER ────────────────────────────────────────────────────────────── */
.vz-header[b-9ookystmc2] { margin-bottom: 2.5rem; }

/* Título: tipografía serif, tamaño fluido clamp(1.75→2.5rem), color accentDark (#1B5E20), centrado. */
.vz-title[b-9ookystmc2] {
    font-family: var(--font-serif, 'Bitter', 'Georgia', serif);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: #1B5E20;           /* accentDark — idéntico al React */
    line-height: 1.2;
    text-align: center;
    margin: 0 0 1.25rem;
}

/* Copete: tamaño 1.05rem, interlineado 1.6, color body, opacidad reducida al 75%. */
.vz-copete[b-9ookystmc2] {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #37474F;
    opacity: 0.75;
    margin: 0 0 1.5rem;
}

/* Meta-row: fecha+autor izquierda | botones share y bookmark derecha. */
.vz-meta-row[b-9ookystmc2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Metadatos: uppercase, 0.75rem, peso 600, espaciado 0.05em, color meta (#78909C). */
.vz-meta[b-9ookystmc2] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #78909C;
}

.vz-meta-dot[b-9ookystmc2] { opacity: 0.4; }

/* Share / Bookmark — íconos */
.vz-actions[b-9ookystmc2] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Botón circular transparente con hover gris claro para share y bookmark. */
.vz-action-btn[b-9ookystmc2] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    border: none;
    background: transparent;
    color: #78909C;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.vz-action-btn:hover[b-9ookystmc2] { background-color: #F0F0F0; }


/* ── F. CARRUSEL ──────────────────────────────────────────────────────────── */
/* Margen inferior equivalente a mb-12 (3 rem). */
.vz-carousel-wrap[b-9ookystmc2] { margin-bottom: 3rem; }

/* Contenedor con overflow oculto. La imagen se adapta a su proporción real
   pero con un tope máximo de alto para que no se desborde. */
.vz-carousel[b-9ookystmc2] {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    max-height: 32rem;
    background-color: #E0E0E0;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.10);
}

/* Imagen: se muestra completa sin recorte (object-fit contain). El max-height
   limita imágenes muy altas y la animación fade se dispara con @key. */
.vz-carousel-img[b-9ookystmc2] {
    width: 100%;
    max-height: 32rem;
    object-fit: contain;
    display: block;
    animation: vzImgFade-b-9ookystmc2 0.35s ease-in-out both;
}

/* El <video> comparte los mismos estilos base que <img> (sin zoom, ya tiene controles). */
video.vz-carousel-img[b-9ookystmc2] {
    cursor: default;
    background: #000;
}

@keyframes vzImgFade-b-9ookystmc2 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Gradientes laterales: insinúan que hay más imágenes a los costados. */
.vz-car-edge[b-9ookystmc2] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5rem;
    pointer-events: none;
    z-index: 1;
}

.vz-car-edge-l[b-9ookystmc2] {
    left: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.15) 0%, transparent 100%);
}

.vz-car-edge-r[b-9ookystmc2] {
    right: 0;
    background: linear-gradient(270deg, rgba(0,0,0,0.15) 0%, transparent 100%);
}

/* Flechas siempre visibles (sin requerir hover): círculo blanco semitransparente,
   sombra y animación de escala al presionar. */
.vz-car-btn[b-9ookystmc2] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    border: none;
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.20);
    color: #37474F;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.vz-car-btn:hover[b-9ookystmc2] {
    transform: translateY(-50%) scale(1.10);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.vz-car-btn:active[b-9ookystmc2] { transform: translateY(-50%) scale(0.92); }

.vz-car-prev[b-9ookystmc2] { left:  1rem; }
.vz-car-next[b-9ookystmc2] { right: 1rem; }

/* Badge contador “Nº / total” en la esquina superior derecha con fondo oscuro y blur. */
.vz-car-badge[b-9ookystmc2] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.vz-car-badge span[b-9ookystmc2] {
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* Barra de dots bottom-center: cápsulas con blur sobre fondo oscuro. */
.vz-car-dots[b-9ookystmc2] {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 9999px;
    background-color: rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Dot inactivo: 10×10 px, semitransparente; transiciona a cápsula de 28 px al activarse. */
.vz-dot[b-9ookystmc2] {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.45);
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: width 0.3s ease, background-color 0.3s ease;
}

/* Dot activo: cuerpo expandido a cápsula de 28×10 px, color blanco. */
.vz-dot-active[b-9ookystmc2] {
    width: 28px;
    background-color: #FFFFFF;
}

/* Miniaturas clickeables debajo del carrusel, alineadas al centro con flex-wrap. */
.vz-thumb-strip[b-9ookystmc2] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Cada miniatura: 56×38 px, borde verde cuando está activa, opacidad reducida si no lo está. */
.vz-thumb[b-9ookystmc2] {
    width: 56px;
    height: 38px;
    border-radius: 8px;
    border: 2.5px solid transparent;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
    opacity: 0.5;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.vz-thumb img[b-9ookystmc2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ícono de video en miniatura (reemplaza al <img> cuando el adjunto es un video). */
.vz-thumb-video-icon[b-9ookystmc2] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a2e;
    color: #ffffff;
    font-size: 1.1rem;
}

/* Miniatura activa: borde verde accent (#2E7D32) y opacidad completa. */
.vz-thumb-active[b-9ookystmc2] {
    border-color: #2E7D32;
    opacity: 1;
}

.vz-thumb:hover:not(.vz-thumb-active)[b-9ookystmc2] { opacity: 0.75; }


/* ── G. CUERPO DE LA NOTICIA ─────────────────────────────────────────────── */
/* Tipo serif, 1.05rem, interlineado 1.7, color body (#37474F). */
.vz-body[b-9ookystmc2] {
    margin-bottom: 4rem;
    font-family: var(--font-serif, 'Bitter', 'Georgia', serif);
    font-size: 1.05rem;
    line-height: 1.7;
    color: #37474F;
}

.vz-body p[b-9ookystmc2]       { margin-bottom: 1.5rem; }

.vz-body ul[b-9ookystmc2],
.vz-body ol[b-9ookystmc2]      { padding-left: 1.5rem; margin-bottom: 1.5rem; }

.vz-body li[b-9ookystmc2]      { margin-bottom: 0.5rem; line-height: 1.6; }
.vz-body strong[b-9ookystmc2]  { font-weight: 700; color: #263238; }
.vz-body em[b-9ookystmc2]      { font-style: italic; }


/* ── G2. AUTH WALL (NotAuthorized) ───────────────────────────────────────── */
/*
   Estructura del wrapper relativo:
     .vz-body-preview-wrap   (position: relative)
       ├── .vz-body.vz-body-preview   (primeras líneas, overflow oculto)
       ├── .vz-body-fade              (gradiente blanco descendente)
       └── .vz-auth-wall              (tarjeta centrada con CTA de login)
*/

.vz-body-preview-wrap[b-9ookystmc2] {
    position: relative;
    margin-bottom: 4rem;
}

/* Preview: muestro solo ~3 líneas del texto; el resto queda oculto. */
.vz-body.vz-body-preview[b-9ookystmc2] {
    max-height: 7rem;
    overflow: hidden;
    margin-bottom: 0;
}

/* Gradiente: disuelve el texto hacia el auth wall (rgba 0→1). */
.vz-body-fade[b-9ookystmc2] {
    position: relative;
    height: 5rem;
    margin-top: -5rem;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0)   0%,
        rgba(255, 255, 255, 0.85) 55%,
        rgba(255, 255, 255, 1)   100%
    );
    pointer-events: none;
}

/* Tarjeta centrada que invita al visitante a iniciar sesión. */
.vz-auth-wall[b-9ookystmc2] {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 1rem;
    padding: 2.25rem 1.5rem;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
    margin-top: 0.5rem;
}

/* Ícono de candado: círculo con degradado verde (#2E7D32 → #1B5E20) y sombra verde. */
.vz-aw-icon[b-9ookystmc2] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.28);
    flex-shrink: 0;
}

.vz-aw-title[b-9ookystmc2] {
    font-family: var(--font-serif, 'Bitter', 'Georgia', serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: #263238;
    margin: 0;
}

.vz-aw-text[b-9ookystmc2] {
    font-size: 0.9rem;
    line-height: 1.55;
    color: #78909C;
    margin: 0;
    max-width: 28rem;
}

.vz-aw-btn[b-9ookystmc2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    border-radius: 0.625rem;
    background-color: #2E7D32;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    margin-top: 0.25rem;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.25);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.vz-aw-btn:hover[b-9ookystmc2] {
    background-color: #1B5E20;
    color: white;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(46, 125, 50, 0.32);
}


/* ── H. COMENTARIOS ───────────────────────────────────────────────────────── */

/* Encabezado: ícono MessageCircle verde + título con contador entre paréntesis. */
.vz-comments-hdr[b-9ookystmc2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.vz-comments-title[b-9ookystmc2] {
    font-family: var(--font-serif, 'Bitter', 'Georgia', serif);
    font-size: 1.35rem;
    font-weight: 700;
    color: #263238;
    margin: 0;
}

/* Línea divisoria sutil (#E0E0E0) que separa el encabezado del formulario. */
.vz-comments-divider[b-9ookystmc2] {
    height: 1px;
    background-color: #E0E0E0;
    margin-bottom: 2rem;
}

/* Contenedor del formulario o del CTA según el estado de autenticación. */
.vz-comment-input-wrap[b-9ookystmc2] { margin-bottom: 2.5rem; }

/* Formulario rediseñado para usuarios autenticados:
   - Border 2px #E8E8E8; cambia a #2E7D32 con ring verde al recibir foco (:focus-within)
   - Superior: avatar + textarea sin borde sobre fondo transparente
   - Inferior: fondo #FAFAFA con hint izquierda y botón Enviar derecha
*/
.vz-cf-wrap[b-9ookystmc2] {
    border-radius: 1rem;
    overflow: hidden;
    background-color: #FFFFFF;
    border: 2px solid #E8E8E8;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Borde cambia a verde cuando cualquier hijo del formulario recibe foco. */
.vz-cf-wrap:focus-within[b-9ookystmc2] {
    border-color: #2E7D32;
    box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* Parte superior: avatar con inicial + textarea sin borde. */
.vz-cf-top[b-9ookystmc2] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.25rem 1.25rem 0.75rem;
}

/* Avatar con inicial del usuario: círculo con degradado verde. */
.vz-cf-avatar[b-9ookystmc2] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.25);
    margin-top: 2px;
}

/* Textarea: sin borde ni fondo; crece dinámicamente con el contenido. */
.vz-cf-textarea[b-9ookystmc2] {
    flex: 1;
    min-width: 0;
    resize: none;
    border: none;
    outline: none;
    background: transparent;
    color: #37474F;
    font-size: 0.92rem;
    line-height: 1.6;
    padding: 4px 0;
    font-family: inherit;
    width: 100%;
    transition: height 0.2s ease;
}

.vz-cf-textarea[b-9ookystmc2]::placeholder { color: rgba(55, 71, 79, 0.40); }

/* Barra inferior: hint informativo izquierda + acciones derecha. */
.vz-cf-bottom[b-9ookystmc2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background-color: #FAFAFA;
    border-top: 1px solid #F0F0F0;
}

/* Agrupa el botón de emoji + botón Enviar en el extremo derecho */
.vz-cf-bottom-actions[b-9ookystmc2] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* Texto de pista dinámico: muestra mensaje de estímulo o el conteo de caracteres. */
.vz-cf-hint[b-9ookystmc2] {
    color: #78909C;
    font-size: 0.73rem;
}

.vz-cf-hint--warn[b-9ookystmc2] {
    color: #D32F2F;
    font-weight: 600;
}

/* Botón Enviar:
   activo    → fondo #2E7D32, sombra verde
   disabled  → fondo #B0BEC5, opacidad 0.35 */
.vz-send-btn[b-9ookystmc2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    border: none;
    background-color: #2E7D32;
    color: white;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.25);
    transition: background-color 0.15s ease;
}

.vz-send-btn:hover:not(:disabled)[b-9ookystmc2] { background-color: #1B5E20; }

.vz-send-btn:disabled[b-9ookystmc2] {
    background-color: #B0BEC5;
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
}

/* CTA visitante: fondo gris claro (#ECEFF1), invita a iniciar sesión para comentar. */
.vz-guest-cta[b-9ookystmc2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background-color: #ECEFF1;
    border-radius: 0.75rem;
}

@media (min-width: 640px) {
    .vz-guest-cta[b-9ookystmc2] { flex-direction: row; }
}

.vz-guest-text[b-9ookystmc2] {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #37474F;
    margin: 0;
    text-align: center;
}

@media (min-width: 640px) { .vz-guest-text[b-9ookystmc2] { text-align: left; } }

.vz-guest-btn[b-9ookystmc2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    background-color: #2E7D32;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

.vz-guest-btn:hover[b-9ookystmc2] { background-color: #1B5E20; color: white; text-decoration: none; }

/* Lista de comentarios: columna con separación vertical de 1.5rem entre ítems. */
.vz-comment-list[b-9ookystmc2] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Cada ítem de comentario: avatar a la izquierda + cuerpo a la derecha en flex. */
.vz-comment-item[b-9ookystmc2] {
    display: flex;
    gap: 1rem;
}

/* Avatar del comentarista: círculo 40×40 px con inicial, borde sutil y degradado verde. */
.vz-ci-avatar[b-9ookystmc2] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
    border: 1px solid #E0E0E0;
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
}

.vz-ci-body[b-9ookystmc2] { flex: 1; min-width: 0; }

/* Nombre y fecha en la misma línea con baseline alignment. */
.vz-ci-meta[b-9ookystmc2] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.vz-ci-name[b-9ookystmc2] { font-size: 0.9rem;  font-weight: 600; color: #263238; }
.vz-ci-date[b-9ookystmc2] { font-size: 0.78rem; color: #78909C; }

.vz-ci-text[b-9ookystmc2] {
    font-size: 0.9rem;
    line-height: 1.55;
    color: #37474F;
    margin: 0;
}


/* ── J. LIGHTBOX ─────────────────────────────────────────────────────────── */

/* Cursor zoom-in sobre la imagen del carrusel: indica que se puede ampliar al hacer clic. */
.vz-carousel-img-zoom[b-9ookystmc2] {
    cursor: zoom-in;
}

/* Overlay: posición fixed, cubre toda la pantalla, fondo casi negro con 92% de opacidad. */
.vz-lightbox[b-9ookystmc2] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    cursor: zoom-out;
    /* Animación de entrada: aparición rápida con fadeIn en 220ms. */
    animation: vzLbIn-b-9ookystmc2 0.22s ease-out both;
}

@keyframes vzLbIn-b-9ookystmc2 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Contenedor de la imagen: stopPropagation impide que el clic llegue al overlay. */
.vz-lb-content[b-9ookystmc2] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    cursor: default;
    animation: vzLbImgIn-b-9ookystmc2 0.25s ease-out both;
}

@keyframes vzLbImgIn-b-9ookystmc2 {
    from { transform: scale(0.93); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* Imagen ampliada: respeta máx. 90vw × 88vh, contiene proporciones y aplica sombra. */
.vz-lb-img[b-9ookystmc2] {
    max-width:  90vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0.75rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* Botón cerrar X — esquina superior derecha del contenido */
.vz-lb-close[b-9ookystmc2] {
    position: absolute;
    top: -3rem;
    right: -0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    border: none;
    background-color: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
    z-index: 1;
    backdrop-filter: blur(4px);
}

.vz-lb-close:hover[b-9ookystmc2] {
    background-color: rgba(255, 255, 255, 0.22);
    transform: scale(1.08);
}

/* Flechas de navegación dentro del lightbox: círculo semiblanco con blur. */
.vz-lb-arr[b-9ookystmc2] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    border: none;
    background-color: rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background-color 0.15s ease, transform 0.15s ease;
    z-index: 1;
}

.vz-lb-arr:hover[b-9ookystmc2] {
    background-color: rgba(255, 255, 255, 0.28);
}

.vz-lb-arr:active[b-9ookystmc2] { transform: translateY(-50%) scale(0.92); }

.vz-lb-arr-l[b-9ookystmc2] { left:  -4rem; }
.vz-lb-arr-r[b-9ookystmc2] { right: -4rem; }

/* Contador “Nº / total” centrado debajo de la imagen, solo texto sin interacción. */
.vz-lb-counter[b-9ookystmc2] {
    position: absolute;
    bottom: -2.25rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
    pointer-events: none;
}

/* En pantallas muy pequeñas: las flechas se acercan a los bordes y la imagen ocupa todo el ancho. */
@media (max-width: 560px) {
    .vz-lb-arr-l[b-9ookystmc2] { left:  0.25rem; }
    .vz-lb-arr-r[b-9ookystmc2] { right: 0.25rem; }
    .vz-lb-img[b-9ookystmc2]   { max-width: 98vw; max-height: 80vh; }
    .vz-lb-close[b-9ookystmc2] { top: -2.5rem; right: 0; }
}


/* ── I. RESPONSIVE MÓVIL ─────────────────────────────────────────────────── */
/* Ajustes para pantallas menores a 480 px: reduzco fuentes, padding y tamaños de elementos. */
@media (max-width: 480px) {
    .vz-title[b-9ookystmc2]        { font-size: 1.5rem; }
    .vz-carousel[b-9ookystmc2]     { aspect-ratio: 4 / 3; }
    .vz-inner[b-9ookystmc2]        { padding: 1.25rem 1rem; }
    .vz-car-btn[b-9ookystmc2]      { width: 2.25rem; height: 2.25rem; }
    .vz-thumb-strip[b-9ookystmc2]  { gap: 0.375rem; }
    .vz-thumb[b-9ookystmc2]        { width: 44px; height: 30px; }
}
/* /Pages/Patrullas/Index.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * Index.razor.css — Rincón de Patrullas (/patrullas)
 * ──────────────────────────────────────────────────────────────────────
 * Replica el diseño de PatrolsPage.tsx (React) en Blazor scoped CSS.
 * Secciones:
 *   0. Variables y página
 *   1. Hero Banner
 *   2. Tabs sticky de ramas
 *   3. Contenido principal (descripción + grid)
 *   4. Skeleton
 *   5. Responsive
 * ══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
 * 0. PÁGINA
 * ═══════════════════════════════════════════════════════ */
.patrullas-page[b-nip6hyh40v] {
    background: #F9F7F2;
    min-height: 100vh;
    animation: patrullas-fadein-b-nip6hyh40v 0.6s ease;
}

@keyframes patrullas-fadein-b-nip6hyh40v {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.patrullas-contenido[b-nip6hyh40v] {
    max-width: 80rem;
    margin: 0 auto;
    padding: 2rem 1rem 6rem;
}

@media (min-width: 640px)  { .patrullas-contenido[b-nip6hyh40v] { padding: 2rem 1.5rem 6rem; } }
@media (min-width: 1024px) { .patrullas-contenido[b-nip6hyh40v] { padding: 2rem 2rem 6rem; } }


/* ═══════════════════════════════════════════════════════
 * 1. HERO BANNER
 * ═══════════════════════════════════════════════════════ */
.patrullas-hero[b-nip6hyh40v] {
    position: relative;
    width: 100%;
    min-height: 500px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.patrullas-hero-img[b-nip6hyh40v] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.70);
}

.patrullas-hero-tint[b-nip6hyh40v] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.20) 100%
    );
}

.patrullas-hero-fade[b-nip6hyh40v] {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 35%;
    background: linear-gradient(
        to top,
        #F9F7F2 0%,
        rgba(249, 247, 242, 0.7) 40%,
        transparent 100%
    );
}

.patrullas-hero-content[b-nip6hyh40v] {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1rem 5rem;
    gap: 1rem;
}

.patrullas-hero-title[b-nip6hyh40v] {
    font-family: 'Bitter', Georgia, serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

.patrullas-hero-subtitle[b-nip6hyh40v] {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}

/* Botón CTA "Diseñador de Banderines" */
.patrullas-hero-cta[b-nip6hyh40v] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--primary, #2E7D32);
    color: #ffffff;
    border: none;
    border-radius: 0.75rem;
    padding: 0.75rem 1.25rem 0.75rem 1rem;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    margin-top: 0.5rem;
    text-align: left;
}

.patrullas-hero-cta:hover[b-nip6hyh40v] {
    background: #1B5E20;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

.patrullas-hero-cta:hover .patrullas-hero-cta-icon[b-nip6hyh40v] {
    transform: rotate(12deg);
}

.patrullas-hero-cta-icon[b-nip6hyh40v] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    transition: transform 0.3s;
    flex-shrink: 0;
}

.patrullas-hero-cta-texto[b-nip6hyh40v] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.patrullas-hero-cta-sup[b-nip6hyh40v] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1;
}

.patrullas-hero-cta-label[b-nip6hyh40v] {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
}


/* ═══════════════════════════════════════════════════════
 * 2. TABS STICKY DE RAMAS
 * ═══════════════════════════════════════════════════════ */
.patrullas-tabs-bar[b-nip6hyh40v] {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(248, 245, 240, 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #ECE6D8;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.patrullas-tabs-inner[b-nip6hyh40v] {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.patrullas-tabs-inner[b-nip6hyh40v]::-webkit-scrollbar { display: none; }

@media (min-width: 640px)  { .patrullas-tabs-inner[b-nip6hyh40v] { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .patrullas-tabs-inner[b-nip6hyh40v] { padding: 0 2rem; } }

/* Tab individual */
.patrullas-tab[b-nip6hyh40v] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.25s ease;
    background: transparent;
    border: none;
    color: rgba(55, 71, 79, 0.6);
    margin: 0;
}

.patrullas-tab:hover:not(.patrullas-tab--activa)[b-nip6hyh40v] {
    background: #ffffff;
    color: #37474F;
}

.patrullas-tab--activa[b-nip6hyh40v] {
    /* Color inyectado via style inline */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

/* Labels: siempre se muestra el nombre completo */
.patrullas-tab-label-full[b-nip6hyh40v]  { display: inline; }
.patrullas-tab-label-short[b-nip6hyh40v] { display: none; }

@media (max-width: 639px) {
    .patrullas-tab-label-full[b-nip6hyh40v]  { display: inline; }
    .patrullas-tab-label-short[b-nip6hyh40v] { display: none; }
}

.patrullas-tab-badge[b-nip6hyh40v] {
    font-size: 0.625rem;
    padding: 0.15rem 0.4rem;
    border-radius: 9999px;
    min-width: 1.25rem;
    text-align: center;
    font-weight: 600;
    line-height: 1.4;
}

/* Sub-tabs de unidad (segundo row dentro del sticky bar) */
.patrullas-tabs-unidades[b-nip6hyh40v] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.625rem 1rem 0.625rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

@media (min-width: 640px)  { .patrullas-tabs-unidades[b-nip6hyh40v] { padding: 0.625rem 1.5rem 0.625rem; } }
@media (min-width: 1024px) { .patrullas-tabs-unidades[b-nip6hyh40v] { padding: 0.625rem 2rem 0.625rem; } }

.patrullas-tab-unidad[b-nip6hyh40v] {
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.3rem 0.875rem;
    border-radius: 9999px;
    border: 1px solid rgba(55, 71, 79, 0.18);
    background: transparent;
    color: rgba(55, 71, 79, 0.55);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.patrullas-tab-unidad:hover:not(.patrullas-tab-unidad--activa)[b-nip6hyh40v] {
    border-color: rgba(55, 71, 79, 0.35);
    color: #37474F;
    background: rgba(55, 71, 79, 0.06);
}

.patrullas-tab-unidad--activa[b-nip6hyh40v] {
    background: #37474F;
    color: #ffffff;
    border-color: #37474F;
}


/* ═══════════════════════════════════════════════════════
 * 3. DESCRIPCIÓN RAMA + GRID
 * ═══════════════════════════════════════════════════════ */
.patrullas-descripcion[b-nip6hyh40v] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
    animation: patrullas-fadein-b-nip6hyh40v 0.25s ease;
}

.patrullas-descripcion-barra[b-nip6hyh40v] {
    width: 4px;
    height: 2rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.patrullas-descripcion-texto[b-nip6hyh40v] {
    font-size: 0.875rem;
    font-style: italic;
    color: rgba(55, 71, 79, 0.5);
    max-width: 48rem;
    margin: 0;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .patrullas-descripcion-texto[b-nip6hyh40v] { font-size: 1rem; }
}

/* Grid de cards */
.patrullas-grid[b-nip6hyh40v] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.patrullas-card-wrapper[b-nip6hyh40v] {
    /* Anchos responsive match de PatrolsPage.tsx */
    width: calc(50% - 0.5rem);
    animation: patrullas-card-in-b-nip6hyh40v 0.3s ease both;
}

@media (min-width: 640px)  { .patrullas-card-wrapper[b-nip6hyh40v] { width: calc(33.333% - 0.67rem); } }
@media (min-width: 768px)  { .patrullas-card-wrapper[b-nip6hyh40v] { width: calc(25% - 0.75rem); } }
@media (min-width: 1024px) { .patrullas-card-wrapper[b-nip6hyh40v] { width: calc(20% - 0.8rem); } }
@media (min-width: 1280px) { .patrullas-card-wrapper[b-nip6hyh40v] { width: calc(16.667% - 0.84rem); } }

@keyframes patrullas-card-in-b-nip6hyh40v {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}


/* ═══════════════════════════════════════════════════════
 * 4. SKELETON LOADING
 * ═══════════════════════════════════════════════════════ */
.patrullas-skeleton[b-nip6hyh40v] {
    aspect-ratio: 1.2 / 1;
    border-radius: 0.75rem;
    background: linear-gradient(90deg, #f0ece4 25%, #e8e4dc 50%, #f0ece4 75%);
    background-size: 200% 100%;
    animation: patrullas-shimmer-b-nip6hyh40v 1.5s infinite;
}

@keyframes patrullas-shimmer-b-nip6hyh40v {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════
 * 5. SECCIÓN "EN CONSTRUCCIÓN"
 * ═══════════════════════════════════════════════════════ */
.patrullas-en-construccion[b-nip6hyh40v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
    min-height: 200px;
    color: #78909C;
}

.patrullas-en-construccion-icono[b-nip6hyh40v] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.patrullas-en-construccion-titulo[b-nip6hyh40v] {
    font-family: 'Bitter', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #37474F;
    margin: 0 0 0.5rem;
}

.patrullas-en-construccion-texto[b-nip6hyh40v] {
    font-size: 0.9375rem;
    max-width: 420px;
    margin: 0;
    line-height: 1.5;
}
/* /Pages/Progresiones/Caracteristicas.razor.rz.scp.css */
/*
    Caracteristicas.razor.css — Estilos de /progresiones/caracteristicas
    =====================================================================
    Prefijo: pcr- (Progresiones CaRacterísticas)
    Se construye en múltiples prompts. Este archivo contiene los estilos base.
*/

/* =======================================================================
   CONTENEDOR PRINCIPAL
   ======================================================================= */

.pcr-pagina[b-7hc6hmm8h7] {
    background-color: var(--background);
    min-height: 100vh;
}

/* =======================================================================
   CITA DE BADEN-POWELL
   Blockquote centrado con ícono decorativo y dos citas
   ======================================================================= */

.pcr-cita[b-7hc6hmm8h7] {
    position: relative;
    max-width: 64rem;
    margin: 0 auto;
    padding: 2.5rem 1rem 1.5rem;
    text-align: center;
}

@media (min-width: 640px) {
    .pcr-cita[b-7hc6hmm8h7] {
        padding: 3rem 1.5rem 2rem;
    }
}

@media (min-width: 1024px) {
    .pcr-cita[b-7hc6hmm8h7] {
        padding: 3rem 2rem 2rem;
    }
}

@media (min-width: 1600px) {
    .pcr-cita[b-7hc6hmm8h7] {
        max-width: 80rem;
    }
}

.pcr-cita__deco[b-7hc6hmm8h7] {
    display: block;
    font-size: 1.75rem;
    color: rgba(46, 125, 50, 0.18);
    margin-bottom: 1rem;
}

.pcr-cita__bloque[b-7hc6hmm8h7] {
    margin: 0;
    padding: 0;
}

.pcr-cita__texto[b-7hc6hmm8h7] {
    font-family: 'Bitter', Georgia, serif;
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    font-style: italic;
    color: rgba(55, 71, 79, 0.65);
    line-height: 1.7;
    max-width: 640px;
    margin: 0 auto;
}

.pcr-cita__texto + .pcr-cita__texto[b-7hc6hmm8h7] {
    margin-top: 0.75rem;
}

.pcr-cita__fuente[b-7hc6hmm8h7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.pcr-cita__fuente-dot[b-7hc6hmm8h7] {
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background-color: rgba(46, 125, 50, 0.30);
    flex-shrink: 0;
}

.pcr-cita__fuente-texto[b-7hc6hmm8h7] {
    font-size: 10px;
    color: rgba(55, 71, 79, 0.30);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
}

/* =======================================================================
   INTRODUCCIÓN
   ======================================================================= */

.pcr-intro[b-7hc6hmm8h7] {
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 1rem 2rem;
    font-size: 0.94rem;
    line-height: 1.85;
    color: rgba(55, 71, 79, 0.65);
}

@media (min-width: 640px) {
    .pcr-intro[b-7hc6hmm8h7] {
        padding: 0 1.5rem 2rem;
    }
}

@media (min-width: 1024px) {
    .pcr-intro[b-7hc6hmm8h7] {
        padding: 0 2rem 2rem;
    }
}

@media (min-width: 1600px) {
    .pcr-intro[b-7hc6hmm8h7] {
        max-width: 80rem;
    }
}

.pcr-intro p + p[b-7hc6hmm8h7] {
    margin-top: 1rem;
}

.pcr-intro strong[b-7hc6hmm8h7] {
    font-weight: 600;
    color: rgba(55, 71, 79, 0.80);
}

/* =======================================================================
   DIVISOR
   ======================================================================= */

.pcr-divisor[b-7hc6hmm8h7] {
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.pcr-divisor[b-7hc6hmm8h7]::after {
    content: '';
    display: block;
    height: 1px;
    background-color: rgba(55, 71, 79, 0.08);
}

@media (min-width: 1600px) {
    .pcr-divisor[b-7hc6hmm8h7] {
        max-width: 80rem;
    }
}

/* =======================================================================
   ARTÍCULO EDITORIAL
   max-width 64rem base (80rem en pantallas grandes), centrado, padding responsive
   ======================================================================= */

.pcr-articulo[b-7hc6hmm8h7] {
    max-width: 64rem;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

@media (min-width: 640px) {
    .pcr-articulo[b-7hc6hmm8h7] {
        padding: 2.5rem 1.5rem 4rem;
    }
}

@media (min-width: 1024px) {
    .pcr-articulo[b-7hc6hmm8h7] {
        padding: 3rem 2rem 5rem;
    }
}

@media (min-width: 1600px) {
    .pcr-articulo[b-7hc6hmm8h7] {
        max-width: 80rem;
    }
}

/* =======================================================================
   SECCIÓN — animación de entrada
   ======================================================================= */

.pcr-seccion[b-7hc6hmm8h7] {
    animation: pcrFadeUp-b-7hc6hmm8h7 0.45s ease both;
}

@keyframes pcrFadeUp-b-7hc6hmm8h7 {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pcr-seccion[b-7hc6hmm8h7] {
        animation: none;
    }
}

/* =======================================================================
   BADGE DE SECCIÓN
   Pill verde pequeño — "Sección A", "Sección B", etc.
   ======================================================================= */

.pcr-badge[b-7hc6hmm8h7] {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #2E7D32;
    background-color: rgba(46, 125, 50, 0.08);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    margin-bottom: 1rem;
    user-select: none;
}

/* =======================================================================
   TÍTULOS EDITORIALES
   ======================================================================= */

.pcr-titulo[b-7hc6hmm8h7] {
    font-family: 'Bitter', Georgia, serif;
    font-size: clamp(1.3rem, 3vw, 1.55rem);
    color: var(--title);
    line-height: 1.25;
    margin-bottom: 1rem;
}

.pcr-subtitulo[b-7hc6hmm8h7] {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.1rem;
    color: var(--title);
    margin-bottom: 0.75rem;
}

.pcr-titulo-con-icono[b-7hc6hmm8h7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.pcr-icono-caja[b-7hc6hmm8h7] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pcr-icono-caja i[b-7hc6hmm8h7] {
    font-size: 1.125rem;
}

.pcr-icono-caja--verde[b-7hc6hmm8h7] {
    background-color: rgba(46, 125, 50, 0.08);
    color: #2E7D32;
}

.pcr-icono-caja--purpura[b-7hc6hmm8h7] {
    background-color: rgba(142, 36, 170, 0.08);
    color: #8E24AA;
}

.pcr-icono-caja--ambar[b-7hc6hmm8h7] {
    background-color: #FFF8E1;
    color: #F57F17;
}

.pcr-icono-caja--azul[b-7hc6hmm8h7] {
    background-color: rgba(21, 101, 192, 0.08);
    color: #1565C0;
}

/* =======================================================================
   TEXTO EDITORIAL
   ======================================================================= */

.pcr-texto-editorial[b-7hc6hmm8h7] {
    font-size: 0.94rem;
    line-height: 1.85;
    color: rgba(55, 71, 79, 0.65);
    margin-bottom: 2rem;
    max-width: 860px;
}

.pcr-texto-editorial p + p[b-7hc6hmm8h7] {
    margin-top: 1rem;
}

.pcr-texto-editorial em[b-7hc6hmm8h7] {
    font-style: italic;
}

.pcr-texto-editorial strong[b-7hc6hmm8h7] {
    font-weight: 600;
    color: rgba(55, 71, 79, 0.80);
}

/* =======================================================================
   DIVISOR ENTRE SECCIONES (dentro del artículo)
   ======================================================================= */

.pcr-divisor-seccion[b-7hc6hmm8h7] {
    height: 1px;
    background-color: rgba(55, 71, 79, 0.08);
    margin: 3rem 0;
}

/* =======================================================================
   CAPTION — texto italic pequeño al pie de secciones
   ======================================================================= */

.pcr-caption[b-7hc6hmm8h7] {
    font-size: 0.75rem;
    color: rgba(55, 71, 79, 0.35);
    font-style: italic;
    line-height: 1.6;
}

.pcr-caption--centrado[b-7hc6hmm8h7] {
    text-align: center;
}

/* =======================================================================
   INFOGRAFÍA: TABLA DE ETAPAS (Sección A)
   Grid 3 columnas: #, ETAPA, DESCRIPCIÓN — opacidad progresiva por fila
   ======================================================================= */

.pcr-stages-tabla[b-7hc6hmm8h7] {
    background-color: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid rgba(55, 71, 79, 0.08);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    margin: 1.5rem 0 0.75rem;
}

.pcr-stages-header[b-7hc6hmm8h7] {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 0.75rem;
    background: linear-gradient(135deg, #1B5E20, #2E7D32);
    padding: 0.625rem 1.25rem;
}

.pcr-stages-hcol[b-7hc6hmm8h7] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.90);
    font-family: 'Inter', sans-serif;
}

.pcr-stages-filas[b-7hc6hmm8h7] {
    display: flex;
    flex-direction: column;
}

.pcr-stages-fila[b-7hc6hmm8h7] {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid rgba(55, 71, 79, 0.06);
}

.pcr-stages-fila:last-child[b-7hc6hmm8h7] {
    border-bottom: none;
}

.pcr-stages-numero[b-7hc6hmm8h7] {
    font-weight: 700;
    font-size: 0.8125rem;
    color: #2E7D32;
    font-family: 'Inter', sans-serif;
}

.pcr-stages-nombre[b-7hc6hmm8h7] {
    font-family: 'Bitter', Georgia, serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--title);
    line-height: 1.3;
}

.pcr-stages-desc[b-7hc6hmm8h7] {
    font-size: 0.8125rem;
    color: rgba(55, 71, 79, 0.55);
    line-height: 1.5;
    font-family: 'Inter', sans-serif;
}

.pcr-stages-footer[b-7hc6hmm8h7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background-color: rgba(46, 125, 50, 0.03);
    border-top: 1px solid rgba(55, 71, 79, 0.06);
}

.pcr-stages-footer-tri[b-7hc6hmm8h7] {
    font-size: 0.5rem;
    color: #2E7D32;
    opacity: 0.50;
}

.pcr-stages-footer-txt[b-7hc6hmm8h7] {
    font-size: 10px;
    color: rgba(55, 71, 79, 0.35);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
}

.pcr-stages-footer-barra[b-7hc6hmm8h7] {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(to right, transparent, #2E7D32);
    opacity: 0.25;
}

/* =======================================================================
   INFOGRAFÍA: CANTIDAD VS DIFICULTAD (Sección B)
   SVG con trapezoides divergentes — cantidad decrece, dificultad crece
   ======================================================================= */

.pcr-funnels[b-7hc6hmm8h7] {
    margin: 1.5rem 0 0.5rem;
}

.pcr-funnels-svg[b-7hc6hmm8h7] {
    display: block;
    width: 100%;
    height: auto;
}

.pcr-funnels-htxt[b-7hc6hmm8h7] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    fill: rgba(55, 71, 79, 0.55);
    font-family: 'Inter', sans-serif;
}

.pcr-funnels-ltxt[b-7hc6hmm8h7] {
    font-size: 11px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}

/* =======================================================================
   INFOGRAFÍA: ÁREAS DE PROGRESIÓN (Sección C)
   7 barras horizontales con labels a la izquierda
   ======================================================================= */

.pcr-areas[b-7hc6hmm8h7] {
    background-color: #FAFAF7;
    border-radius: 0.75rem;
    border: 1px solid rgba(55, 71, 79, 0.06);
    overflow: hidden;
    margin: 1.5rem 0 0.75rem;
}

.pcr-areas-header[b-7hc6hmm8h7] {
    background: linear-gradient(135deg, #1B5E20, #2E7D32);
    padding: 0.75rem 1rem;
}

.pcr-areas-header-txt[b-7hc6hmm8h7] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.90);
    font-family: 'Inter', sans-serif;
}

.pcr-areas-barras[b-7hc6hmm8h7] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pcr-areas-item[b-7hc6hmm8h7] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pcr-areas-label[b-7hc6hmm8h7] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(55, 71, 79, 0.65);
    font-family: 'Inter', sans-serif;
}

.pcr-areas-barra-fondo[b-7hc6hmm8h7] {
    width: 100%;
    height: 10px;
    background-color: rgba(55, 71, 79, 0.06);
    border-radius: 5px;
    overflow: hidden;
}

.pcr-areas-barra[b-7hc6hmm8h7] {
    height: 100%;
    border-radius: 5px;
    opacity: 0.80;
}

/* =======================================================================
   SECCIÓN D: GRID PAP + TIME CHART
   2 columnas en desktop, apiladas en mobile
   ======================================================================= */

.pcr-pap-grid[b-7hc6hmm8h7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 1.5rem 0 1rem;
}

@media (max-width: 768px) {
    .pcr-pap-grid[b-7hc6hmm8h7] {
        grid-template-columns: 1fr;
    }
}

/* --- Hexágono PAP --- */

.pcr-pap-hex-card[b-7hc6hmm8h7] {
    background-color: #FAFAF7;
    border-radius: 0.75rem;
    border: 1px solid rgba(55, 71, 79, 0.06);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pcr-pap-hex-titulo[b-7hc6hmm8h7] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(55, 71, 79, 0.45);
    text-align: center;
    margin-bottom: 1.5rem;
    font-family: 'Inter', sans-serif;
}

.pcr-pap-hex-contenedor[b-7hc6hmm8h7] {
    position: relative;
    width: 220px;
    height: 220px;
}

.pcr-pap-hex-centro[b-7hc6hmm8h7] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #1B5E20, #2E7D32);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pcr-pap-hex-txt-grande[b-7hc6hmm8h7] {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
}

.pcr-pap-hex-sat[b-7hc6hmm8h7] {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 80px;
    text-align: center;
}

.pcr-pap-hex-sat i[b-7hc6hmm8h7] {
    font-size: 1rem;
    color: #2E7D32;
}

.pcr-pap-hex-sat span[b-7hc6hmm8h7] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(55, 71, 79, 0.60);
    font-family: 'Inter', sans-serif;
    line-height: 1.3;
}

.pcr-pap-hex-sat--tl[b-7hc6hmm8h7] {
    top: 8px;
    left: 8px;
}

.pcr-pap-hex-sat--tr[b-7hc6hmm8h7] {
    top: 8px;
    right: 8px;
}

.pcr-pap-hex-sat--bl[b-7hc6hmm8h7] {
    bottom: 8px;
    left: 8px;
}

.pcr-pap-hex-sat--br[b-7hc6hmm8h7] {
    bottom: 8px;
    right: 8px;
}

/* --- Gráfico de Tiempos --- */

.pcr-time-card[b-7hc6hmm8h7] {
    background-color: #FAFAF7;
    border-radius: 0.75rem;
    border: 1px solid rgba(55, 71, 79, 0.06);
    padding: 1.25rem;
}

.pcr-time-titulo[b-7hc6hmm8h7] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(55, 71, 79, 0.45);
    text-align: center;
    margin-bottom: 1.25rem;
    font-family: 'Inter', sans-serif;
}

.pcr-time-contenedor[b-7hc6hmm8h7] {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 200px;
    gap: 0.5rem;
    padding-top: 1rem;
}

.pcr-time-wrapper[b-7hc6hmm8h7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
}

.pcr-time-valor[b-7hc6hmm8h7] {
    font-weight: 700;
    font-size: 0.9375rem;
    margin-bottom: 0.375rem;
    font-family: 'Inter', sans-serif;
}

.pcr-time-barra[b-7hc6hmm8h7] {
    width: 100%;
    max-width: 52px;
    border-radius: 0.5rem 0.5rem 0 0;
    opacity: 0.80;
    min-height: 2px;
    flex-shrink: 0;
}

.pcr-time-label[b-7hc6hmm8h7] {
    font-size: 10px;
    font-weight: 600;
    color: rgba(55, 71, 79, 0.50);
    text-align: center;
    margin-top: 0.5rem;
    font-family: 'Inter', sans-serif;
    line-height: 1.3;
}

/* =======================================================================
   FÓRMULA IP (Sección F)
   Caja centrada con la fórmula y leyenda
   ======================================================================= */

.pcr-formula-card[b-7hc6hmm8h7] {
    background-color: #FAFAF7;
    border-radius: 0.75rem;
    border: 1px solid rgba(55, 71, 79, 0.06);
    padding: 1.5rem;
    margin: 1.5rem 0 0.75rem;
    text-align: center;
}

.pcr-formula-titulo[b-7hc6hmm8h7] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(55, 71, 79, 0.45);
    margin-bottom: 1.5rem;
    font-family: 'Inter', sans-serif;
}

.pcr-formula-cuerpo[b-7hc6hmm8h7] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background-color: #ffffff;
    border-radius: 0.5rem;
    border: 1px solid rgba(55, 71, 79, 0.08);
    margin-bottom: 1rem;
}

.pcr-formula-expr[b-7hc6hmm8h7] {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #2E7D32;
    letter-spacing: 0.02em;
}

.pcr-formula-expr sub[b-7hc6hmm8h7] {
    font-size: 0.65em;
    vertical-align: sub;
}

.pcr-formula-leyenda[b-7hc6hmm8h7] {
    text-align: left;
    display: inline-block;
}

.pcr-formula-leyenda p[b-7hc6hmm8h7] {
    font-size: 0.8125rem;
    color: rgba(55, 71, 79, 0.55);
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
}

.pcr-formula-leyenda strong[b-7hc6hmm8h7] {
    font-weight: 600;
    color: rgba(55, 71, 79, 0.75);
}

/* =======================================================================
   SECCIÓN G: CONTEXTO (placeholder embudo)
   ======================================================================= */

.pcr-contexto-placeholder[b-7hc6hmm8h7] {
    background-color: #FAFAF7;
    border-radius: 0.75rem;
    border: 1px solid rgba(55, 71, 79, 0.06);
    padding: 1.5rem;
    margin: 1.5rem 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pcr-contexto-item[b-7hc6hmm8h7] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pcr-contexto-icono[b-7hc6hmm8h7] {
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.pcr-contexto-icono--rojo[b-7hc6hmm8h7] {
    color: #C62828;
}

.pcr-contexto-icono--verde[b-7hc6hmm8h7] {
    color: #2E7D32;
}

.pcr-contexto-label[b-7hc6hmm8h7] {
    font-size: 0.875rem;
    font-weight: 700;
    color: rgba(55, 71, 79, 0.70);
    font-family: 'Inter', sans-serif;
}

.pcr-contexto-desc[b-7hc6hmm8h7] {
    font-size: 0.8125rem;
    color: rgba(55, 71, 79, 0.50);
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
}

.pcr-contexto-sep[b-7hc6hmm8h7] {
    height: 1px;
    background-color: rgba(55, 71, 79, 0.06);
}

/* =======================================================================
   SECCIÓN H: GRID DE COMPLEMENTOS
   3 tarjetas con icono, nombre y descripción
   ======================================================================= */

.pcr-complemento-grid[b-7hc6hmm8h7] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 1.5rem 0 1rem;
}

@media (max-width: 768px) {
    .pcr-complemento-grid[b-7hc6hmm8h7] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .pcr-complemento-grid[b-7hc6hmm8h7] {
        grid-template-columns: 1fr;
    }
}

.pcr-complemento-card[b-7hc6hmm8h7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    background-color: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid rgba(55, 71, 79, 0.06);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.pcr-complemento-card:hover[b-7hc6hmm8h7] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.pcr-complemento-icono[b-7hc6hmm8h7] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pcr-complemento-icono i[b-7hc6hmm8h7] {
    font-size: 1rem;
}

.pcr-complemento-icono--verde[b-7hc6hmm8h7] {
    background-color: rgba(46, 125, 50, 0.08);
    color: #2E7D32;
}

.pcr-complemento-icono--ambar[b-7hc6hmm8h7] {
    background-color: #FFF8E1;
    color: #F57F17;
}

.pcr-complemento-icono--azul[b-7hc6hmm8h7] {
    background-color: rgba(21, 101, 192, 0.08);
    color: #1565C0;
}

.pcr-complemento-icono--purpura[b-7hc6hmm8h7] {
    background-color: rgba(94, 53, 177, 0.08);
    color: #5E35B1;
}

.pcr-complemento-nombre[b-7hc6hmm8h7] {
    font-family: 'Bitter', Georgia, serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--title);
}

.pcr-complemento-desc[b-7hc6hmm8h7] {
    font-size: 0.75rem;
    color: rgba(55, 71, 79, 0.50);
    font-family: 'Inter', sans-serif;
}

/* =======================================================================
   SECCIÓN DOCUMENTO OFICIAL
   Wrapper que centra la tarjeta del libro dentro del flujo de .pcr-pagina
   ======================================================================= */

.pcr-seccion-doc[b-7hc6hmm8h7] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem 0;
}

@media (min-width: 640px) {
    .pcr-seccion-doc[b-7hc6hmm8h7] {
        padding: 0 1.5rem 0;
    }
}

@media (min-width: 1024px) {
    .pcr-seccion-doc[b-7hc6hmm8h7] {
        padding: 0 2rem 0;
    }
}

/* =======================================================================
   TARJETA DEL LIBRO (pcr-book-*)
   ======================================================================= */

.pcr-book-card[b-7hc6hmm8h7] {
    display: flex;
    background-color: var(--surface, #ffffff);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(55, 71, 79, 0.08);
}

.pcr-book-cover-panel[b-7hc6hmm8h7] {
    position: relative;
    width: 320px;
    min-width: 320px;
    background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 60%, #388E3C 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    overflow: hidden;
}

.pcr-book-deco[b-7hc6hmm8h7] {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.06);
}

.pcr-book-deco--tr[b-7hc6hmm8h7] {
    top: -20px;
    right: -20px;
}

.pcr-book-deco--bl[b-7hc6hmm8h7] {
    bottom: -30px;
    left: -30px;
    width: 120px;
    height: 120px;
}

.pcr-book-cover-img[b-7hc6hmm8h7] {
    position: relative;
    z-index: 1;
    width: 160px;
    border-radius: 0.375rem;
    box-shadow: 0 16px 48px rgba(0,0,0,0.40), 0 4px 12px rgba(0,0,0,0.25);
    display: block;
}

.pcr-book-content[b-7hc6hmm8h7] {
    flex: 1;
    padding: 1.5rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
}

.pcr-book-tag[b-7hc6hmm8h7] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background-color: rgba(46, 125, 50, 0.08);
    color: #2E7D32;
    border-radius: 2rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    width: fit-content;
}

.pcr-book-title[b-7hc6hmm8h7] {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--title);
    line-height: 1.3;
    margin-bottom: 0;
}

.pcr-book-desc[b-7hc6hmm8h7] {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    color: rgba(55, 71, 79, 0.60);
    line-height: 1.6;
    flex: 1;
}

.pcr-book-btns[b-7hc6hmm8h7] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.pcr-book-btn[b-7hc6hmm8h7] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background-color: var(--primary, #2E7D32);
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 1.125rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.pcr-book-btn:hover[b-7hc6hmm8h7] {
    background-color: #1B5E20;
}

.pcr-book-btn--secondary[b-7hc6hmm8h7] {
    background-color: transparent;
    color: var(--primary, #2E7D32);
    border: 1.5px solid var(--primary, #2E7D32);
}

.pcr-book-btn--secondary:hover[b-7hc6hmm8h7] {
    background-color: rgba(46, 125, 50, 0.06);
}

.pcr-book-meta[b-7hc6hmm8h7] {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: rgba(55, 71, 79, 0.35);
    margin-top: 0;
}

@media (max-width: 768px) {
    .pcr-book-card[b-7hc6hmm8h7] {
        flex-direction: column;
    }

    .pcr-book-cover-panel[b-7hc6hmm8h7] {
        width: auto;
        min-width: unset;
        padding: 2rem;
    }
}

/* =======================================================================
   MODAL DE VISTA PREVIA (pcr-preview-*)
   ======================================================================= */

.pcr-preview-overlay[b-7hc6hmm8h7] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: pcrFadeIn-b-7hc6hmm8h7 0.2s ease;
}

@keyframes pcrFadeIn-b-7hc6hmm8h7 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pcr-preview-modal[b-7hc6hmm8h7] {
    background-color: #ffffff;
    border-radius: 0.75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 900px;
    max-height: 96vh;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.40);
    animation: pcrScaleIn-b-7hc6hmm8h7 0.2s ease;
}

@keyframes pcrScaleIn-b-7hc6hmm8h7 {
    from { transform: scale(0.93); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.pcr-preview-header[b-7hc6hmm8h7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid rgba(55, 71, 79, 0.10);
    background-color: #f8f9fa;
    flex-shrink: 0;
}

.pcr-preview-title[b-7hc6hmm8h7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Bitter', Georgia, serif;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--title);
}

.pcr-preview-actions[b-7hc6hmm8h7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pcr-preview-dl[b-7hc6hmm8h7] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background-color: var(--primary, #2E7D32);
    color: #ffffff;
    border-radius: 0.375rem;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.pcr-preview-dl:hover[b-7hc6hmm8h7] {
    background-color: #1B5E20;
}

.pcr-preview-close[b-7hc6hmm8h7] {
    background: none;
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 1.125rem;
    cursor: pointer;
    color: rgba(55, 71, 79, 0.50);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pcr-preview-close:hover[b-7hc6hmm8h7] {
    background-color: rgba(55, 71, 79, 0.08);
    color: var(--title);
}

.pcr-preview-iframe[b-7hc6hmm8h7] {
    flex: 1;
    width: 100%;
    min-height: 680px;
    border: none;
}

/* =======================================================================
   BOTÓN VOLVER
   ======================================================================= */

.pcr-seccion-volver[b-7hc6hmm8h7] {
    max-width: 64rem;
    margin: 2rem auto 0;
    padding: 0 1rem 3rem;
    display: flex;
    justify-content: center;
}

@media (min-width: 640px) {
    .pcr-seccion-volver[b-7hc6hmm8h7] {
        padding: 0 1.5rem 3rem;
    }
}

@media (min-width: 1024px) {
    .pcr-seccion-volver[b-7hc6hmm8h7] {
        padding: 0 2rem 3rem;
    }
}

@media (min-width: 1600px) {
    .pcr-seccion-volver[b-7hc6hmm8h7] {
        max-width: 80rem;
    }
}

.pcr-btn-volver[b-7hc6hmm8h7] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(55, 71, 79, 0.50);
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.pcr-btn-volver:hover[b-7hc6hmm8h7] {
    color: var(--primary, #2E7D32);
    background-color: rgba(46, 125, 50, 0.06);
}

/* =======================================================================
   RESPONSIVE — mobile (< 640px)
   ======================================================================= */

@media (max-width: 640px) {

    .pcr-pagina[b-7hc6hmm8h7] {
        padding: 1rem 0 2rem;
    }

    .pcr-articulo[b-7hc6hmm8h7] {
        padding: 0 1rem;
    }

    .pcr-cita[b-7hc6hmm8h7] {
        padding: 2rem 1rem 1rem;
    }

    .pcr-stages-tabla[b-7hc6hmm8h7] {
        border-radius: 0.5rem;
    }

    .pcr-stages-header[b-7hc6hmm8h7],
    .pcr-stages-fila[b-7hc6hmm8h7] {
        grid-template-columns: 2.5rem 1fr;
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .pcr-stages-desc[b-7hc6hmm8h7],
    .pcr-stages-hcol:nth-child(3)[b-7hc6hmm8h7] {
        display: none;
    }

    .pcr-stages-numero[b-7hc6hmm8h7] {
        font-size: 0.7rem;
    }

    .pcr-funnels[b-7hc6hmm8h7] {
        margin: 1rem 0 0.25rem;
    }

    /* --- Tarjeta del libro --- */

    .pcr-book-card[b-7hc6hmm8h7] {
        flex-direction: column;
    }

    .pcr-book-cover-panel[b-7hc6hmm8h7] {
        width: 100%;
        min-width: unset;
        min-height: 180px;
    }

    .pcr-book-cover-img[b-7hc6hmm8h7] {
        max-width: 110px;
    }

    .pcr-book-content[b-7hc6hmm8h7] {
        padding: 1.25rem;
    }

    .pcr-book-btns[b-7hc6hmm8h7] {
        flex-direction: column;
    }

    .pcr-book-btn[b-7hc6hmm8h7] {
        justify-content: center;
    }

    /* --- Modal de vista previa --- */

    .pcr-preview-modal[b-7hc6hmm8h7] {
        max-height: 92vh;
    }

    .pcr-preview-iframe[b-7hc6hmm8h7] {
        min-height: 400px;
    }

    .pcr-preview-title[b-7hc6hmm8h7] {
        font-size: 0.8125rem;
    }

    /* --- Botón volver --- */

    .pcr-seccion-volver[b-7hc6hmm8h7] {
        padding: 0 1rem 2rem;
    }
}

/* =======================================================================
   ACCESIBILIDAD — reducir movimiento
   ======================================================================= */

@media (prefers-reduced-motion: reduce) {
    .pcr-seccion[b-7hc6hmm8h7] {
        animation: none;
    }

    .pcr-preview-overlay[b-7hc6hmm8h7] {
        animation: none;
    }

    .pcr-preview-modal[b-7hc6hmm8h7] {
        animation: none;
    }
}
/* /Pages/Progresiones/Index.razor.rz.scp.css */
/* =======================================================================
   Pages/Progresiones/Index.razor.css — Estilos de la página de Progresiones
   =======================================================================
   Réplica fiel del diseño React ProgressionPage.tsx.
   DOS COLUMNAS lado a lado: Masculina (izq) | Femenina (der)
     - M: grid 3 cols → 2.5rem 1fr 4rem  (# | Nombre | Tipo)
     - F: grid 3 cols → 4rem 1fr 2.5rem  (Tipo | Nombre | #)
   Responsive: se apilan en 1 col en mobile (< 768px)

   Prefijo: pg- (progresiones)
   Paleta:
     title    #37474F   títulos
     bg       #F9F7F2   fondo (--background)
     border   #E0DBD1   bordes cards
     green    #2E7D32   acento scout
     greenDk  #1B5E20   acento hover
   ======================================================================= */

/* -----------------------------------------------------------------------
   SECCIÓN PRINCIPAL
   ----------------------------------------------------------------------- */
.pg-section[b-n3pflprlvc] {
    max-width: 1100px;                      /* más ancho para 2 columnas */
    margin: 0 auto;
    padding: 2.5rem 1rem 5rem;
    background-color: var(--background, #F9F7F2);
    min-height: 60vh;
}

@media (min-width: 640px) {
    .pg-section[b-n3pflprlvc] { padding: 2.5rem 1.5rem 5rem; }
}

/* -----------------------------------------------------------------------
   COLUMNA INTERNA (contiene TODAS las secciones de un sexo — skeleton)
   ----------------------------------------------------------------------- */
.pg-col-inner[b-n3pflprlvc] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;            /* space-y-0.5 entre secciones */
}

/* -----------------------------------------------------------------------
   LISTA DE SECCIONES (envuelve todos los pg-dual-grid de datos)
   ----------------------------------------------------------------------- */
.pg-sections-list[b-n3pflprlvc] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;            /* space-y-0.5 entre secciones — React */
}

/* -----------------------------------------------------------------------
   GRID DUAL (2 columnas: M izq | F der) — 1 por sección
   ----------------------------------------------------------------------- */
.pg-dual-grid[b-n3pflprlvc] {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 1.5rem;           /* React: gap-x-6 */
    align-items: start;           /* cada columna crece independiente */
}

@media (min-width: 768px) {
    .pg-dual-grid[b-n3pflprlvc] {
        grid-template-columns: 1fr 1fr;
    }
}

/* -----------------------------------------------------------------------
   ENCABEZADOS DE COLUMNA (3 cols por tabla)
   React: SexColumnHeader — 11px tracking-widest uppercase #37474F/35
   M: 2.5rem 1fr 4rem    F: 4rem 1fr 2.5rem
   ----------------------------------------------------------------------- */
.pg-col-headers[b-n3pflprlvc] {
    display: grid;
    align-items: center;
    font-size: 0.6875rem;         /* 11px */
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(55, 71, 79, 0.35);
    padding: 0.5rem 0.25rem;
    margin-bottom: 0.5rem;
    user-select: none;
}

.pg-col-headers--m[b-n3pflprlvc] { grid-template-columns: 2.5rem 1fr 4rem; }
.pg-col-headers--f[b-n3pflprlvc] { grid-template-columns: 4rem 1fr 2.5rem; }

/* Label central prominente — "MASCULINA" en slate oscuro */
.pg-col-headers--m .pg-hdr-left[b-n3pflprlvc] {
    color: #37474F;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
}

/* Label central prominente — "FEMENINA" en marrón cálido */
.pg-col-headers--f .pg-hdr-right[b-n3pflprlvc] {
    color: #6D4C41;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
}

/* Línea inferior de acento para cada encabezado */
.pg-col-headers--m[b-n3pflprlvc] {
    border-bottom: 2px solid rgba(55, 71, 79, 0.15);
    padding-bottom: 0.625rem;
    margin-bottom: 0.625rem;
}
.pg-col-headers--f[b-n3pflprlvc] {
    border-bottom: 2px solid rgba(109, 76, 65, 0.15);
    padding-bottom: 0.625rem;
    margin-bottom: 0.625rem;
}

.pg-hdr-center[b-n3pflprlvc] { text-align: center; }
.pg-hdr-left[b-n3pflprlvc]   { padding-left: 0.75rem; }
.pg-hdr-right[b-n3pflprlvc]  { text-align: right; padding-right: 0.75rem; }

/* -----------------------------------------------------------------------
   DIVISOR
   ----------------------------------------------------------------------- */
.pg-divider[b-n3pflprlvc] {
    height: 1px;
    background-color: rgba(55, 71, 79, 0.10);
    margin-bottom: 1rem;
}

/* -----------------------------------------------------------------------
   SELECTOR DE SEXO — solo mobile (< 768px)
   Segmented control pill sobre las tablas.
   ----------------------------------------------------------------------- */
.pg-sex-toggle[b-n3pflprlvc] { display: none; }

@media (max-width: 767px) {
    .pg-sex-toggle[b-n3pflprlvc] {
        display: flex;
        background: rgba(55, 71, 79, 0.07);
        border-radius: 9999px;
        padding: 0.25rem;
        margin-bottom: 1.5rem;
    }

    .pg-sex-btn[b-n3pflprlvc] {
        flex: 1;
        position: relative;
        padding: 0.55rem 1rem;
        border-radius: 9999px;
        border: none;
        background: transparent;
        font-size: 0.8125rem;
        font-weight: 500;
        color: rgba(55, 71, 79, 0.45);
        cursor: pointer;
        transition: color 0.2s ease;
        letter-spacing: 0.03em;
        z-index: 1;
        font-family: inherit;
    }

    .pg-sex-btn--active[b-n3pflprlvc] {
        color: #37474F;
        font-weight: 600;
    }

    /* Pill blanca animada como fondo del botón activo */
    .pg-sex-btn--active[b-n3pflprlvc]::before {
        content: '';
        position: absolute;
        inset: 0;
        background: white;
        border-radius: 9999px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.12), 0 0 1px rgba(0,0,0,0.06);
        z-index: -1;
    }

    /* Masculino activo → ocultar columna F (segundo hijo de cada dual-grid) */
    .pg-section.pg-filtro--m .pg-dual-grid > *:nth-child(2)[b-n3pflprlvc] { display: none; }
    /* Femenino activo → ocultar columna M (primer hijo de cada dual-grid) */
    .pg-section.pg-filtro--f .pg-dual-grid > *:first-child[b-n3pflprlvc]  { display: none; }
}

/* -----------------------------------------------------------------------
   CONTENEDOR DE FILAS POR COLUMNA
   ----------------------------------------------------------------------- */
.pg-rows-col[b-n3pflprlvc] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;            /* space-y-0.5 */
}

/* -----------------------------------------------------------------------
   SEPARADOR DE RAMA (pill + líneas)
   ----------------------------------------------------------------------- */
.pg-branch-sep[b-n3pflprlvc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.5rem;
}

.pg-branch-line[b-n3pflprlvc] {
    flex: 1;
    height: 2px;
    border-radius: 9999px;
    opacity: 0.3;
}

.pg-branch-pill[b-n3pflprlvc] {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    white-space: nowrap;
    font-weight: 600;
}

/* -----------------------------------------------------------------------
   FILA DE PROGRESIÓN (3 columnas, variante M o F)
   React: SingleSexRow — minHeight 2.75rem, rounded-md
   ----------------------------------------------------------------------- */
.pg-row[b-n3pflprlvc] {
    display: grid;
    align-items: center;
    border-radius: 0.375rem;
    min-height: 2.75rem;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.pg-row--m[b-n3pflprlvc] { grid-template-columns: 2.5rem 1fr 4rem; }
.pg-row--f[b-n3pflprlvc] { grid-template-columns: 4rem 1fr 2.5rem; }

a.pg-row[b-n3pflprlvc] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.pg-row:hover[b-n3pflprlvc] {
    filter: brightness(0.95);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.pg-row:active[b-n3pflprlvc] {
    filter: brightness(0.90);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.10);
    transform: scale(0.995);
}

/* -----------------------------------------------------------------------
   CELDA GENÉRICA CENTRADA
   ----------------------------------------------------------------------- */
.pg-cell-center[b-n3pflprlvc] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* first-child siempre va al borde izquierdo de su celda (# en M, badge en F) */
.pg-row .pg-cell-center:first-child[b-n3pflprlvc] {
    justify-content: flex-start;
    padding-left: 0.5rem;
}

/* last-child siempre va al borde derecho de su celda (badge en M, # en F) */
.pg-row .pg-cell-center:last-child[b-n3pflprlvc] {
    justify-content: flex-end;
    padding-right: 0.5rem;
}

/* -----------------------------------------------------------------------
   CELDA NOMBRE
   ----------------------------------------------------------------------- */
.pg-name-cell[b-n3pflprlvc] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    min-width: 0;
    height: 100%;
}

.pg-name-cell--right[b-n3pflprlvc] {
    justify-content: flex-end;
    text-align: right;
}

.pg-name[b-n3pflprlvc] {
    font-size: 0.875rem;    /* 14px */
    font-weight: 500;
    color: #37474F;
    transition: color 0.15s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pg-name--honor[b-n3pflprlvc] {
    font-weight: 700;
}

.pg-row:hover .pg-name[b-n3pflprlvc] {
    color: #2E7D32;
}

/* -----------------------------------------------------------------------
   ÍNDICE NUMÉRICO
   ----------------------------------------------------------------------- */
.pg-idx[b-n3pflprlvc] {
    font-size: 0.75rem;
    color: rgba(55, 71, 79, 0.45);
    user-select: none;
}

/* -----------------------------------------------------------------------
   BADGE DE TIPO
   React TYPE_STYLES: normal → grey, extra → blue, honor → amber
   ----------------------------------------------------------------------- */
.pg-badge[b-n3pflprlvc] {
    font-size: 0.6875rem;   /* 11px */
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    user-select: none;
    font-weight: 500;
    white-space: nowrap;
    display: inline-block;
}

/* normal — gris */
.pg-badge--normal[b-n3pflprlvc] {
    color: #6B7280;
    background-color: rgba(107, 114, 128, 0.08);
}

/* extra — azul claro */
.pg-badge--extra[b-n3pflprlvc] {
    color: #0369A1;
    background-color: rgba(3, 105, 161, 0.08);
}

/* honor — ámbar */
.pg-badge--honor[b-n3pflprlvc] {
    color: #B45309;
    background-color: rgba(180, 83, 9, 0.10);
    font-weight: 700;
}

/* -----------------------------------------------------------------------
   COLUMNA VACÍA
   ----------------------------------------------------------------------- */
.pg-empty-col[b-n3pflprlvc] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    font-size: 0.75rem;
    color: #D1D5DB;
    font-style: italic;
    user-select: none;
}

/* -----------------------------------------------------------------------
   SKELETON DE CARGA (2 columnas, animación pulse)
   React: TableSkeleton — grid-cols-2 con separadores y filas skeleton
   ----------------------------------------------------------------------- */
.pg-skeleton-wrap[b-n3pflprlvc] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pg-skeleton-sep[b-n3pflprlvc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.5rem;
}

.pg-skeleton-line[b-n3pflprlvc] {
    flex: 1;
    height: 2px;
    border-radius: 9999px;
    background-color: rgba(55, 71, 79, 0.06);
}

.pg-skeleton-pill[b-n3pflprlvc] {
    width: 5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background-color: rgba(55, 71, 79, 0.06);
    animation: pg-pulse-b-n3pflprlvc 1.5s ease-in-out infinite;
}

.pg-skeleton-row[b-n3pflprlvc] {
    display: grid;
    align-items: center;
    min-height: 2.75rem;
    border-radius: 0.375rem;
}

.pg-skeleton-row--m[b-n3pflprlvc] { grid-template-columns: 2.5rem 1fr 4rem; }
.pg-skeleton-row--f[b-n3pflprlvc] { grid-template-columns: 4rem 1fr 2.5rem; }

.pg-skeleton-idx[b-n3pflprlvc] {
    width: 1rem;
    height: 0.75rem;
    border-radius: 0.25rem;
    background-color: rgba(55, 71, 79, 0.06);
    margin: 0 auto;
    animation: pg-pulse-b-n3pflprlvc 1.5s ease-in-out infinite;
}

.pg-skeleton-name[b-n3pflprlvc] {
    width: 7rem;
    height: 1rem;
    border-radius: 0.25rem;
    background-color: rgba(55, 71, 79, 0.06);
    margin-left: 0.75rem;
    animation: pg-pulse-b-n3pflprlvc 1.5s ease-in-out infinite;
}

.pg-skeleton-name--right[b-n3pflprlvc] {
    margin-left: auto;
    margin-right: 0.75rem;
}

.pg-skeleton-badge[b-n3pflprlvc] {
    width: 3rem;
    height: 1.25rem;
    border-radius: 9999px;
    background-color: rgba(55, 71, 79, 0.06);
    margin: 0 auto;
    animation: pg-pulse-b-n3pflprlvc 1.5s ease-in-out infinite;
}

@keyframes pg-pulse-b-n3pflprlvc {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* =======================================================================
   BANNER CTA — PROGRESIONES DE HONOR
   Replica el bloque "motion.a" con fondo degradado amarillo
   ======================================================================= */
.pg-honor-banner[b-n3pflprlvc] {
    display: block;
    position: relative;
    margin-top: 3.5rem;
    overflow: hidden;
    border-radius: 1rem;
    cursor: pointer;
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 40%, #FDE68A 100%);
    border: 1.5px solid rgba(245, 158, 11, 0.19);
    text-decoration: none;
    transition: box-shadow 0.3s ease;
}

.pg-honor-banner:hover[b-n3pflprlvc] {
    box-shadow: 0 4px 24px rgba(180, 83, 9, 0.12);
}

/* Decoraciones de fondo */
.pg-honor-deco[b-n3pflprlvc] {
    position: absolute;
    border-radius: 9999px;
    pointer-events: none;
}

.pg-honor-deco--tr[b-n3pflprlvc] {
    top: 0; right: 0;
    width: 12rem; height: 12rem;
    background-color: rgba(245, 158, 11, 0.05);
    transform: translate(25%, -50%);
}

.pg-honor-deco--bl[b-n3pflprlvc] {
    bottom: 0; left: 0;
    width: 8rem; height: 8rem;
    background-color: rgba(180, 83, 9, 0.05);
    transform: translate(-25%, 50%);
}

.pg-honor-content[b-n3pflprlvc] {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    padding: 1.625rem 1.75rem;
}

/* Icono trofeo */
.pg-honor-icon-wrap[b-n3pflprlvc] { flex-shrink: 0; }

.pg-honor-icon[b-n3pflprlvc] {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #fff;
    background: linear-gradient(145deg, #F59E0B, #D97706);
    box-shadow: 0 4px 12px rgba(180, 83, 9, 0.20);
    transition: box-shadow 0.3s ease;
}

.pg-honor-banner:hover .pg-honor-icon[b-n3pflprlvc] {
    box-shadow: 0 6px 20px rgba(180, 83, 9, 0.30);
}

/* Texto */
.pg-honor-text[b-n3pflprlvc] { flex: 1; }

.pg-honor-eyebrow[b-n3pflprlvc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #B45309;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 0.375rem;
}

.pg-honor-eyebrow-ico[b-n3pflprlvc] { font-size: 0.75rem; }

.pg-honor-title[b-n3pflprlvc] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #92400E;
    margin: 0 0 0.375rem;
    transition: color 0.2s ease;
}

.pg-honor-banner:hover .pg-honor-title[b-n3pflprlvc] { color: #78350F; }

.pg-honor-desc[b-n3pflprlvc] {
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(146, 64, 14, 0.60);
    margin: 0;
    max-width: 40rem;
}

/* Flecha CTA */
.pg-honor-arrow[b-n3pflprlvc] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.pg-honor-arrow-circle[b-n3pflprlvc] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(245, 158, 11, 0.082);
    border: 1.5px solid rgba(245, 158, 11, 0.19);
    color: #B45309;
    font-size: 0.875rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pg-honor-banner:hover .pg-honor-arrow-circle[b-n3pflprlvc] {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(180, 83, 9, 0.15);
}

/* Barra decorativa inferior */
.pg-honor-bar[b-n3pflprlvc] {
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, #F59E0B, #B45309, #92400E);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.pg-honor-banner:hover .pg-honor-bar[b-n3pflprlvc] {
    transform: scaleX(1);
}

/* =======================================================================
   TARJETAS DE RECURSOS (2 columnas)
   ======================================================================= */
.pg-resource-grid[b-n3pflprlvc] {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

a.pg-res-card[b-n3pflprlvc] {
    text-decoration: none;
    color: inherit;
    display: block;
}

.pg-res-card[b-n3pflprlvc] {
    background-color: var(--background, #F9F7F2);
    border: 1px solid #E0DBD1;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}

.pg-res-card:hover[b-n3pflprlvc] {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border-color: rgba(46, 125, 50, 0.30);
}

.pg-res-card-inner[b-n3pflprlvc] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.pg-res-icon[b-n3pflprlvc] {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background-color: rgba(46, 125, 50, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #2E7D32;
    transition: background-color 0.3s ease;
}

.pg-res-card:hover .pg-res-icon[b-n3pflprlvc] {
    background-color: rgba(46, 125, 50, 0.15);
}

.pg-res-body[b-n3pflprlvc] { flex: 1; min-width: 0; }

.pg-res-title[b-n3pflprlvc] {
    font-size: 1rem;
    font-weight: 600;
    color: #37474F;
    margin: 0 0 0.25rem;
    transition: color 0.2s ease;
}

.pg-res-card:hover .pg-res-title[b-n3pflprlvc] { color: #2E7D32; }

.pg-res-desc[b-n3pflprlvc] {
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(55, 71, 79, 0.50);
    margin: 0;
}

.pg-res-arrow[b-n3pflprlvc] {
    flex-shrink: 0;
    font-size: 0.875rem;
    color: #D1D5DB;
    margin-top: 2px;
    transition: color 0.2s ease;
}

.pg-res-card:hover .pg-res-arrow[b-n3pflprlvc] { color: #2E7D32; }

/* =======================================================================
   TARJETA DESCARGA — LIBRO DE PROGRESIÓN
   Replica el bloque con panel verde izquierdo + contenido derecho
   ======================================================================= */
.pg-book-card[b-n3pflprlvc] {
    margin-top: 3rem;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid #E0DBD1;
    background-color: #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: row;     /* imagen izq, contenido der */
    transition: box-shadow 0.3s ease;
}

/* Limitar ancho del panel de portada en desktop */
.pg-book-card:hover[b-n3pflprlvc] {
    box-shadow: 0 6px 28px rgba(0,0,0,0.10);
}

/* Panel izquierdo verde */
.pg-book-cover-panel[b-n3pflprlvc] {
    flex-shrink: 0;
    width: 320px;
    position: relative;
    background: linear-gradient(135deg, #1B5E20, #2E7D32);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* Portada real del libro */
.pg-book-cover-img[b-n3pflprlvc] {
    position: relative;
    z-index: 1;
    width: 160px;
    border-radius: 0.375rem;
    box-shadow: 0 16px 48px rgba(0,0,0,0.40), 0 4px 12px rgba(0,0,0,0.25);
    display: block;
}

/* Decoraciones del panel */
.pg-book-deco[b-n3pflprlvc] {
    position: absolute;
    border-radius: 9999px;
    background-color: rgba(255,255,255,0.05);
    pointer-events: none;
}
.pg-book-deco--tr[b-n3pflprlvc] { top: 1rem; right: 1rem; width: 5rem; height: 5rem; }
.pg-book-deco--bl[b-n3pflprlvc] { bottom: 1.5rem; left: 1rem; width: 3.5rem; height: 3.5rem; }

/* Libro ilustrado */
.pg-book-illustration[b-n3pflprlvc] {
    position: relative;
    width: 160px;
}

.pg-book-shape[b-n3pflprlvc] {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,0.30);
    aspect-ratio: 3/4;
    background: linear-gradient(145deg, #F5F0E6 0%, #EDE8DA 50%, #E8E0CE 100%);
}

.pg-book-spine[b-n3pflprlvc] {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0.75rem;
    background: linear-gradient(to right, #4E342E, #6D4C41);
}

.pg-book-page-content[b-n3pflprlvc] {
    position: absolute;
    inset: 0;
    padding: 1.5rem 1rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pg-book-icon-wrap[b-n3pflprlvc] {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background-color: rgba(46, 125, 50, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.pg-book-icon[b-n3pflprlvc] { font-size: 1.25rem; color: #2E7D32; }

.pg-book-label-top[b-n3pflprlvc] {
    font-family: Georgia, serif;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #37474F;
    margin: 0 0 0.1rem;
    line-height: 1.2;
}

.pg-book-label-title[b-n3pflprlvc] {
    font-family: Georgia, serif;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #2E7D32;
    margin: 0 0 0.5rem;
    line-height: 1.2;
}

.pg-book-divider[b-n3pflprlvc] {
    width: 2.5rem;
    height: 1px;
    background-color: rgba(46, 125, 50, 0.30);
    margin-bottom: 0.5rem;
}

.pg-book-group[b-n3pflprlvc] {
    font-size: 0.5rem;
    font-weight: 700;
    color: rgba(55, 71, 79, 0.50);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 0.1rem;
}

.pg-book-parish[b-n3pflprlvc] {
    font-size: 0.4375rem;
    color: rgba(55, 71, 79, 0.40);
    letter-spacing: 0.06em;
    margin: 0;
}

.pg-book-pages-edge[b-n3pflprlvc] {
    position: absolute;
    right: 0; top: 0.5rem; bottom: 0.5rem;
    width: 3px;
    background: linear-gradient(to left, #D7CFC0, transparent);
    opacity: 0.6;
}

.pg-book-shadow[b-n3pflprlvc] {
    position: absolute;
    bottom: -4px; left: 4px; right: 4px;
    height: 8px;
    border-radius: 0 0 0.5rem 0.5rem;
    background-color: rgba(215, 207, 192, 0.60);
    filter: blur(1px);
    z-index: -1;
}

/* Panel derecho de contenido */
.pg-book-content[b-n3pflprlvc] {
    flex: 1;
    padding: 1.5rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pg-book-tag[b-n3pflprlvc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #2E7D32;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 1rem;
}

.pg-book-tag-ico[b-n3pflprlvc] { font-size: 0.875rem; }

.pg-book-title[b-n3pflprlvc] {
    font-family: Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #37474F;
    line-height: 1.25;
    margin: 0 0 0.75rem;
}

.pg-book-desc[b-n3pflprlvc] {
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(55, 71, 79, 0.60);
    margin: 0 0 1.5rem;
}

/* Fila de botones */
.pg-book-btns[b-n3pflprlvc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Botón primario (Descargar) */
.pg-book-btn[b-n3pflprlvc] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    background-color: #2E7D32;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 12px rgba(27, 94, 32, 0.15);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.pg-book-btn:hover[b-n3pflprlvc] {
    background-color: #1B5E20;
    box-shadow: 0 6px 20px rgba(27, 94, 32, 0.22);
    transform: translateY(-1px);
    color: #fff;
}

/* Botón secundario (Vista previa) */
.pg-book-btn--secondary[b-n3pflprlvc] {
    background-color: transparent;
    color: #2E7D32;
    border: 1.5px solid #2E7D32;
    box-shadow: none;
}

.pg-book-btn--secondary:hover[b-n3pflprlvc] {
    background-color: rgba(46, 125, 50, 0.06);
    box-shadow: none;
    color: #1B5E20;
    border-color: #1B5E20;
}

/* -----------------------------------------------------------------------
   MODAL VISTA PREVIA
   ----------------------------------------------------------------------- */
.pg-preview-overlay[b-n3pflprlvc] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(4px);
    animation: pg-fade-in-b-n3pflprlvc 0.15s ease;
}

.pg-preview-modal[b-n3pflprlvc] {
    position: relative;
    width: min(95vw, 860px);
    height: min(96vh, 1000px);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.40);
    animation: pg-scale-in-b-n3pflprlvc 0.15s ease;
    display: flex;
    flex-direction: column;
    background: #fff;
}

/* Barra superior del visor */
.pg-preview-header[b-n3pflprlvc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    background: #37474F;
    flex-shrink: 0;
}

.pg-preview-title[b-n3pflprlvc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
}

.pg-preview-actions[b-n3pflprlvc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pg-preview-dl[b-n3pflprlvc] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    padding: 0.3rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(255,255,255,0.20);
    transition: background 0.15s ease, color 0.15s ease;
}

.pg-preview-dl:hover[b-n3pflprlvc] {
    background: rgba(255,255,255,0.10);
    color: #fff;
}

.pg-preview-iframe[b-n3pflprlvc] {
    flex: 1;
    width: 100%;
    border: none;
    display: block;
}

.pg-preview-close[b-n3pflprlvc] {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    border: none;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.80);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.pg-preview-close:hover[b-n3pflprlvc] {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

@keyframes pg-fade-in-b-n3pflprlvc  { from { opacity: 0; }  to { opacity: 1; } }
@keyframes pg-scale-in-b-n3pflprlvc { from { transform: scale(0.93); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.pg-book-meta[b-n3pflprlvc] {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: rgba(55, 71, 79, 0.35);
}

/* =======================================================================
   RESPONSIVE
   ======================================================================= */

/* Tablet (≤ 768 px): 1 columna, ocultar flecha honor, 1 col recursos */
@media (max-width: 768px) {
    .pg-honor-arrow[b-n3pflprlvc] { display: none; }

    .pg-resource-grid[b-n3pflprlvc] {
        grid-template-columns: 1fr;
    }

    .pg-book-card[b-n3pflprlvc] {
        flex-direction: column;
    }

    .pg-book-cover-panel[b-n3pflprlvc] {
        width: auto;
        padding: 2rem;
    }
}

/* Mobile (≤ 500 px) */
@media (max-width: 500px) {
    .pg-section[b-n3pflprlvc] {
        padding: 1.5rem 0.75rem 3rem;
    }

    .pg-honor-content[b-n3pflprlvc] {
        flex-direction: column;
        text-align: center;
        padding: 1.25rem;
    }

    .pg-honor-desc[b-n3pflprlvc] { font-size: 0.8rem; }
}

/* -----------------------------------------------------------------------
   ESTADOS DE CARGA Y ERROR
   ----------------------------------------------------------------------- */
.pg-spinner-wrap[b-n3pflprlvc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 0;
    gap: 1rem;
}

.pg-spinner-text[b-n3pflprlvc] {
    font-size: 0.875rem;
    color: #9E9E9E;
}

.pg-error-wrap[b-n3pflprlvc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 0;
    gap: 0.75rem;
    text-align: center;
}

.pg-error-ico[b-n3pflprlvc]  { font-size: 2rem; color: #EF9A9A; }
.pg-error-text[b-n3pflprlvc] { font-size: 0.875rem; color: #9E9E9E; }
/* /Pages/Promesa/Index.razor.rz.scp.css */
/*
 * Promesa.razor.css — Promesa Scout y Ley
 * ════════════════════════════════════════════════════════════
 * Prefijo: pr- (promise page)
 *
 * Paleta:
 *   Verde principal    #2E7D32
 *   Texto principal    #37474F
 *   Hero kicker verde  #A5D6A7
 *   Bordes/divisores   #ECE6D8
 *   Pergamino claro    #F4EDE0
 *   Pergamino medio    #F0E8D8
 *   Fondo pagina       #F8F5F0
 *   PDF rojo           #EF4444 (icon), #FEF2F2 (bg), #FEE2E2 (border)
 */


/* ════════════════════════════════════════════════════════════
   1. HERO — Usa FadeHeroBanner (estilos en FadeHeroBanner.razor.css)
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   SECTION LABEL — reutilizado en 3 secciones
   ════════════════════════════════════════════════════════════ */

.pr-section-label[b-sbduhlzn1u] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.pr-section-label__bar[b-sbduhlzn1u] {
    width: 0.25rem;
    height: 1.5rem;
    border-radius: 9999px;
    background-color: #2E7D32;
    flex-shrink: 0;
}

.pr-section-label__text[b-sbduhlzn1u] {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #2E7D32;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    white-space: nowrap;
}

.pr-section-label__line[b-sbduhlzn1u] {
    flex: 1;
    height: 1px;
    background-color: rgba(46, 125, 50, 0.10);
}


/* ════════════════════════════════════════════════════════════
   2. SECCIÓN A — LEY SCOUT
   ════════════════════════════════════════════════════════════ */

.pr-law[b-sbduhlzn1u] {
    max-width: 56rem;
    margin: 0 auto;
    padding: 3.5rem 1rem;
}

@media (min-width: 640px) {
    .pr-law[b-sbduhlzn1u] { padding: 3.5rem 1.5rem; }
}

.pr-law__grid[b-sbduhlzn1u] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

@media (min-width: 768px) {
    .pr-law__grid[b-sbduhlzn1u] {
        grid-template-columns: 1fr 1fr;
        column-gap: 2.5rem;
    }
}

/* Columna con divisores entre artículos */
.pr-law__col[b-sbduhlzn1u] {
    border-top: 1px solid #ECE6D8;
}

.pr-law__col .pr-article[b-sbduhlzn1u] {
    border-bottom: 1px solid #ECE6D8;
}

/* Artículo individual */
.pr-article[b-sbduhlzn1u] {
    display: flex;
    gap: 0.875rem;
    padding: 0.75rem 0;
    animation: prFadeUp-b-sbduhlzn1u 0.4s ease-out both;
}

.pr-article__num[b-sbduhlzn1u] {
    flex-shrink: 0;
    font-family: var(--font-serif, 'Bitter', 'Georgia', serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: rgba(46, 125, 50, 0.80);
    line-height: 1;
    min-width: 2.25rem;
    text-align: right;
    margin-top: 0.125rem;
    user-select: none;
}

.pr-article__text[b-sbduhlzn1u] {
    font-size: 0.875rem;
    color: rgba(55, 71, 79, 0.80);
    line-height: 1.625;
    margin: 0;
}


/* ════════════════════════════════════════════════════════════
   3. SECCIÓN B — LA PROMESA (pergamino)
   ════════════════════════════════════════════════════════════ */

.pr-promise[b-sbduhlzn1u] {
    position: relative;
}

.pr-promise__bg[b-sbduhlzn1u] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        #F4EDE0 0%,
        #F0E8D8 50%,
        #F4EDE0 100%
    );
}

.pr-promise__texture[b-sbduhlzn1u] {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000' fill-opacity='1'%3E%3Cpath d='M0 0h20v20H0zM20 20h20v20H20z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 8px 8px;
    pointer-events: none;
}

.pr-promise__content[b-sbduhlzn1u] {
    position: relative;
    z-index: 10;
    max-width: 48rem;
    margin: 0 auto;
    padding: 4rem 1rem;
    text-align: center;
    animation: prScaleIn-b-sbduhlzn1u 0.6s ease-out both;
}

@media (min-width: 640px) {
    .pr-promise__content[b-sbduhlzn1u] {
        padding: 5rem 1.5rem;
    }
}

.pr-promise__badge[b-sbduhlzn1u] {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    color: #2E7D32;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 1.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid rgba(46, 125, 50, 0.20);
    background: rgba(46, 125, 50, 0.05);
}

.pr-promise__quote[b-sbduhlzn1u] {
    font-family: var(--font-serif, 'Bitter', 'Georgia', serif);
    font-style: italic;
    color: rgba(55, 71, 79, 0.80);
    font-size: clamp(1.05rem, 2.5vw, 1.35rem);
    line-height: 1.625;
    max-width: 36rem;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .pr-promise__quote[b-sbduhlzn1u] {
        line-height: 2;
    }
}

/* Separador decorativo */
.pr-promise__separator[b-sbduhlzn1u] {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.pr-promise__sep-line[b-sbduhlzn1u] {
    width: 2rem;
    height: 1px;
    background-color: rgba(46, 125, 50, 0.20);
}

.pr-promise__sep-dot[b-sbduhlzn1u] {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background-color: rgba(46, 125, 50, 0.25);
}


/* ════════════════════════════════════════════════════════════
   4. SECCIÓN C — PRINCIPIOS Y VIRTUDES
   ════════════════════════════════════════════════════════════ */

.pr-principles[b-sbduhlzn1u] {
    max-width: 56rem;
    margin: 0 auto;
    padding: 4rem 1rem;
}

@media (min-width: 640px) {
    .pr-principles[b-sbduhlzn1u] { padding: 4rem 1.5rem; }
}

.pr-principles__grid[b-sbduhlzn1u] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 0.5rem;
}

@media (min-width: 768px) {
    .pr-principles__grid[b-sbduhlzn1u] {
        grid-template-columns: 1fr 1fr;
        column-gap: 2.5rem;
        row-gap: 2rem;
    }
}

.pr-principles__subtitle[b-sbduhlzn1u] {
    font-family: var(--font-serif, 'Bitter', 'Georgia', serif);
    font-size: 1.05rem;
    color: rgba(55, 71, 79, 0.70);
    margin: 0 0 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #ECE6D8;
}


/* ════════════════════════════════════════════════════════════
   5. SECCIÓN D — BIBLIOGRAFÍA Y RECURSOS
   ════════════════════════════════════════════════════════════ */

.pr-resources[b-sbduhlzn1u] {
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 1rem 5rem;
}

@media (min-width: 640px) {
    .pr-resources[b-sbduhlzn1u] { padding: 0 1.5rem 5rem; }
}

.pr-resources__grid[b-sbduhlzn1u] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .pr-resources__grid[b-sbduhlzn1u] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .pr-resources__grid[b-sbduhlzn1u] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* PDF Card */
.pr-pdf[b-sbduhlzn1u] {
    background: #FFFFFF;
    border: 1px solid #ECE6D8;
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    transition: box-shadow 0.2s ease;
    animation: prFadeUp-b-sbduhlzn1u 0.4s ease-out both;
}

.pr-pdf:hover[b-sbduhlzn1u] {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
}

.pr-pdf__icon[b-sbduhlzn1u] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: #FEF2F2;
    border: 1px solid #FEE2E2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pr-pdf__icon i[b-sbduhlzn1u] {
    font-size: 1.125rem;
    color: #EF4444;
}

.pr-pdf__info[b-sbduhlzn1u] {
    flex: 1;
    min-width: 0;
}

.pr-pdf__title[b-sbduhlzn1u] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #37474F;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pr-pdf__filename[b-sbduhlzn1u] {
    font-size: 0.6875rem;
    color: rgba(55, 71, 79, 0.35);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pr-pdf__download[b-sbduhlzn1u] {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(46, 125, 50, 0.15);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(46, 125, 50, 0.50);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pr-pdf__download i[b-sbduhlzn1u] {
    font-size: 0.875rem;
}

.pr-pdf__download:hover[b-sbduhlzn1u] {
    background: #2E7D32;
    color: #FFFFFF;
    border-color: #2E7D32;
}


/* ════════════════════════════════════════════════════════════
   6. FOOTER QUOTE
   ════════════════════════════════════════════════════════════ */

.pr-footer-quote[b-sbduhlzn1u] {
    padding-bottom: 3.5rem;
    text-align: center;
    animation: prFadeUp-b-sbduhlzn1u 0.6s ease-out both;
}

.pr-footer-quote p[b-sbduhlzn1u] {
    font-size: 0.6875rem;
    color: rgba(55, 71, 79, 0.25);
    font-style: italic;
    font-family: var(--font-serif, 'Bitter', 'Georgia', serif);
    margin: 0;
}


/* ════════════════════════════════════════════════════════════
   ANIMACIONES
   ════════════════════════════════════════════════════════════ */

@keyframes prFadeUp-b-sbduhlzn1u {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes prScaleIn-b-sbduhlzn1u {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pr-hero__content[b-sbduhlzn1u],
    .pr-hero__kicker[b-sbduhlzn1u],
    .pr-hero__title[b-sbduhlzn1u],
    .pr-hero__subtitle[b-sbduhlzn1u],
    .pr-article[b-sbduhlzn1u],
    .pr-promise__content[b-sbduhlzn1u],
    .pr-pdf[b-sbduhlzn1u],
    .pr-footer-quote[b-sbduhlzn1u] {
        animation: none;
    }
}
/* /Pages/Rosario/Index.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
 * Rosario/Index.razor.css — Página principal del Rosario Scout
 * ──────────────────────────────────────────────────────────────────────────
 * Secciones:
 *   0. BREADCRUMB
 *   1. HERO — Fondo de bosque + overlay verde + card blanca con podio
 *   2. DIVIDER — Separador con hoja
 *   3. INFO — "¿Cómo es el Rosario Scout?" (2 columnas)
 *   4. ANIMACIONES — Transiciones CSS de entrada
 * ══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
 * 0. BREADCRUMB
 * ═══════════════════════════════════════════════════════════════════════ */

.rsc-breadcrumb[b-x5yq9f5f9p] {
    max-width: 72rem;
    margin: 0 auto;
    padding: 1rem 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media (min-width: 640px) {
    .rsc-breadcrumb[b-x5yq9f5f9p] {
        padding: 1.25rem 1.5rem 0;
    }
}

.rsc-breadcrumb__link[b-x5yq9f5f9p] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #5D4037;
    text-decoration: none;
    transition: color 0.15s ease;
}

.rsc-breadcrumb__link:hover[b-x5yq9f5f9p] {
    color: #2E7D32;
    text-decoration: underline;
}

.rsc-breadcrumb__link:focus-visible[b-x5yq9f5f9p] {
    outline: 2px solid #2E7D32;
    outline-offset: 2px;
    border-radius: 2px;
}

.rsc-breadcrumb__sep[b-x5yq9f5f9p] {
    font-size: 0.5rem;
    color: #A1887F;
}

.rsc-breadcrumb__current[b-x5yq9f5f9p] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #2E7D32;
}


/* ═══════════════════════════════════════════════════════════════════════
 * 1. HERO
 * ═══════════════════════════════════════════════════════════════════════ */

.rsc-hero[b-x5yq9f5f9p] {
    position: relative;
    overflow: hidden;
}

/* ── Fondo ── */
.rsc-hero__bg[b-x5yq9f5f9p] {
    position: absolute;
    inset: 0;
}

.rsc-hero__bg-img[b-x5yq9f5f9p] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rsc-hero__overlay[b-x5yq9f5f9p] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(27, 94, 32, 0.80) 0%,
        rgba(46, 125, 50, 0.60) 50%,
        rgba(27, 94, 32, 0.75) 100%
    );
}

.rsc-hero__topo[b-x5yq9f5f9p] {
    position: absolute;
    inset: 0;
    opacity: 0.20;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cpath d='M20 60 Q60 20 100 50 Q140 80 180 40 Q220 0 260 30 Q300 60 300 60' fill='none' stroke='%23795548' stroke-opacity='0.15' stroke-width='1'/%3E%3Cpath d='M0 100 Q40 70 80 90 Q120 110 160 80 Q200 50 240 70 Q280 90 300 80' fill='none' stroke='%23795548' stroke-opacity='0.15' stroke-width='1'/%3E%3Cpath d='M10 150 Q50 120 90 140 Q130 160 170 130 Q210 100 250 120 Q290 140 300 130' fill='none' stroke='%23795548' stroke-opacity='0.15' stroke-width='1'/%3E%3Cpath d='M0 200 Q40 180 80 195 Q120 210 160 185 Q200 160 240 180 Q280 200 300 190' fill='none' stroke='%23795548' stroke-opacity='0.15' stroke-width='1'/%3E%3Cpath d='M20 250 Q60 230 100 245 Q140 260 180 235 Q220 210 260 230 Q300 250 300 245' fill='none' stroke='%23795548' stroke-opacity='0.15' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* ── Contenedor interno del hero ── */
.rsc-hero__inner[b-x5yq9f5f9p] {
    position: relative;
    max-width: 64rem;
    margin: 0 auto;
    padding: 4rem 1rem 3.5rem;
}

@media (min-width: 640px) {
    .rsc-hero__inner[b-x5yq9f5f9p] {
        padding: 5rem 1.5rem 4rem;
    }
}

/* ── Card blanca central ── */
.rsc-hero-card[b-x5yq9f5f9p] {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.50);
    padding: 2.5rem 1.5rem 2rem;
    text-align: center;
}

@media (min-width: 640px) {
    .rsc-hero-card[b-x5yq9f5f9p] {
        padding: 3rem 2.5rem 2.5rem;
    }
}

@media (min-width: 1024px) {
    .rsc-hero-card[b-x5yq9f5f9p] {
        padding: 3rem 3.5rem 2.5rem;
    }
}


/* ── Eyebrow ── */
.rsc-eyebrow[b-x5yq9f5f9p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.rsc-eyebrow i[b-x5yq9f5f9p] {
    color: #2E7D32;
    font-size: 0.875rem;
}

.rsc-eyebrow span[b-x5yq9f5f9p] {
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #2E7D32;
    font-weight: 600;
}


/* ── Título ── */
.rsc-hero-title[b-x5yq9f5f9p] {
    font-family: var(--font-serif, 'Bitter', 'Georgia', serif);
    font-size: clamp(1.875rem, 5vw, 3rem);
    font-weight: 700;
    color: #1B5E20;
    line-height: 1.15;
    margin: 0 0 0.75rem;
}


/* ── Subtítulo ── */
.rsc-hero-subtitle[b-x5yq9f5f9p] {
    font-size: clamp(0.9375rem, 2.5vw, 1.125rem);
    color: #5D4037;
    max-width: 32rem;
    margin: 0 auto;
}


/* ── Divider con hoja ── */
.rsc-divider[b-x5yq9f5f9p] {
    max-width: 16rem;
    margin: 2rem auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rsc-divider__line[b-x5yq9f5f9p] {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #D7CCC8, transparent);
}

.rsc-divider__icon[b-x5yq9f5f9p] {
    color: #A1887F;
    font-size: 0.75rem;
}

.rsc-section-divider[b-x5yq9f5f9p] {
    max-width: 32rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
}


/* ═══════════════════════════════════════════════════════════════════════
 * PODIO
 * ═══════════════════════════════════════════════════════════════════════ */

.rsc-podium-loading[b-x5yq9f5f9p] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
}

/* Mobile: columna vertical, order NO aplica (se apilan 1°, 2°, 3°) */
.rsc-podium[b-x5yq9f5f9p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
}

/* sm+: fila horizontal, order aplica (2° izq, 1° centro, 3° der) */
@media (min-width: 640px) {
    .rsc-podium[b-x5yq9f5f9p] {
        flex-direction: row;
        align-items: flex-end;
        justify-content: center;
        gap: 1.5rem;
    }
}

@media (min-width: 768px) {
    .rsc-podium[b-x5yq9f5f9p] {
        gap: 2rem;
    }
}


/* ── Podium item ── */
.rsc-podium-item[b-x5yq9f5f9p] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Mobile: forzar orden natural 1°,2°,3° ignorando inline order */
@media (max-width: 639px) {
    .rsc-podium-item[b-x5yq9f5f9p] {
        order: unset !important;
    }
}

/* ── Shield card mobile scaling ── */
.rsc-shield-card[b-x5yq9f5f9p] {
    position: relative;
    border-radius: 1rem;
    padding: 0.75rem 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10),
                0  4px  6px -4px rgba(0, 0, 0, 0.10);
    border: 3px solid;
}

@media (min-width: 640px) {
    .rsc-shield-card[b-x5yq9f5f9p] {
        padding: 1rem 1rem 1.25rem;
        gap: 0.75rem;
    }
}

/* ── Podium base responsive ── */
.rsc-podium-base[b-x5yq9f5f9p] {
    margin-top: 0.5rem;
    border-radius: 0.5rem 0.5rem 0 0;
    border: 2px solid;
    border-bottom: none;
}

@media (max-width: 639px) {
    .rsc-podium-base[b-x5yq9f5f9p] {
        width: 75% !important;
        max-width: 130px;
        height: auto !important;
        min-height: 20px;
    }
}


/* ── Corona del 1° ── */
.rsc-podium-crown[b-x5yq9f5f9p] {
    margin-bottom: 0.5rem;
}


/* ── Badge de ranking ── */
.rsc-rank-badge[b-x5yq9f5f9p] {
    position: absolute;
    top: -0.75rem;
    left: -0.75rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10);
    border: 2px solid;
}


/* ── Shield SVG ── */
.rsc-shield-svg[b-x5yq9f5f9p] {
    flex-shrink: 0;
    width: 48px;
    height: auto;
}

@media (min-width: 640px) {
    .rsc-shield-svg[b-x5yq9f5f9p] {
        width: auto;
        height: auto;
    }
}


/* ── Info del escudo ── */
.rsc-shield-info[b-x5yq9f5f9p] {
    text-align: center;
}

.rsc-shield-short[b-x5yq9f5f9p] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1F2937;
    margin: 0;
    line-height: 1.3;
}

.rsc-shield-name[b-x5yq9f5f9p] {
    font-size: 0.6875rem;
    color: #4B5563;
    line-height: 1.3;
    margin: 0.125rem 0 0;
}


/* ── Puntaje ── */
.rsc-shield-score[b-x5yq9f5f9p] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    border: 1.5px solid;
}

.rsc-shield-score__pts[b-x5yq9f5f9p] {
    font-size: 0.9375rem;
    font-weight: 800;
}

.rsc-shield-score__label[b-x5yq9f5f9p] {
    font-size: 0.625rem;
    font-weight: 600;
}


/* ── CTA principal ── */
.rsc-hero-cta[b-x5yq9f5f9p] {
    margin-top: 2rem;
    text-align: center;
}

.rsc-btn-primary[b-x5yq9f5f9p] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    border-radius: 9999px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    background-color: #2E7D32;
    border: 2px solid rgba(255, 255, 255, 0.30);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10),
                0  4px  6px -4px rgba(0, 0, 0, 0.10);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.rsc-btn-primary:hover[b-x5yq9f5f9p] {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.10),
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: scale(1.02);
    color: #fff;
    text-decoration: none;
    background-color: #1B5E20;
}

.rsc-btn-primary:active[b-x5yq9f5f9p] {
    transform: scale(0.98);
}

.rsc-btn-primary:focus-visible[b-x5yq9f5f9p] {
    outline: 2px solid #FBC02D;
    outline-offset: 3px;
}

.rsc-btn-arrow[b-x5yq9f5f9p] {
    opacity: 0.60;
    font-size: 0.875rem;
}


/* ═══════════════════════════════════════════════════════════════════════
 * 3. SECCIÓN INFORMATIVA — "¿Cómo es el Rosario Scout?"
 * ═══════════════════════════════════════════════════════════════════════ */

.rsc-info[b-x5yq9f5f9p] {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

@media (min-width: 640px) {
    .rsc-info[b-x5yq9f5f9p] {
        padding: 0 1.5rem 4rem;
    }
}

.rsc-info__container[b-x5yq9f5f9p] {
    /* no extra styles needed, just a semantic wrapper */
}


/* ── Card blanca ── */
.rsc-info-card[b-x5yq9f5f9p] {
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10),
                0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid #E8E0D0;
    overflow: hidden;
}


/* ── Grid 2 columnas ── */
.rsc-info-grid[b-x5yq9f5f9p] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

@media (min-width: 1024px) {
    .rsc-info-grid[b-x5yq9f5f9p] {
        grid-template-columns: 1fr 1fr;
    }
}


/* ── Columna de texto ── */
.rsc-info-text[b-x5yq9f5f9p] {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .rsc-info-text[b-x5yq9f5f9p] {
        padding: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .rsc-info-text[b-x5yq9f5f9p] {
        padding: 3rem;
    }
}


/* ── Pill badge ── */
.rsc-info-pill[b-x5yq9f5f9p] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    background-color: #EFEBE9;
    border: 1px solid #D7CCC8;
    width: fit-content;
}

.rsc-info-pill span[b-x5yq9f5f9p] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #5D4037;
    letter-spacing: 0.06em;
}


/* ── Título informativo ── */
.rsc-info-title[b-x5yq9f5f9p] {
    font-family: var(--font-serif, 'Bitter', 'Georgia', serif);
    font-size: clamp(1.5rem, 3.5vw, 1.875rem);
    font-weight: 700;
    color: #3E2723;
    line-height: 1.25;
    margin: 0;
}


/* ── Descripciones ── */
.rsc-info-desc[b-x5yq9f5f9p] {
    font-size: clamp(0.875rem, 2vw, 1rem);
    color: #5D4037;
    line-height: 1.8;
    margin: 0;
}

.rsc-info-desc--secondary[b-x5yq9f5f9p] {
    color: #8D6E63;
    font-size: 0.875rem;
    line-height: 1.7;
}

.rsc-info-desc strong[b-x5yq9f5f9p] {
    font-weight: 700;
}


/* ── Stats ── */
.rsc-info-stats[b-x5yq9f5f9p] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 0.5rem;
}

.rsc-info-stat[b-x5yq9f5f9p] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: #795548;
    font-weight: 600;
}

.rsc-info-stat__dot[b-x5yq9f5f9p] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}


/* ── Columna de imagen ── */
.rsc-info-image-wrap[b-x5yq9f5f9p] {
    position: relative;
    min-height: 20rem;
}

@media (max-width: 1023px) {
    .rsc-info-image-wrap[b-x5yq9f5f9p] {
        min-height: 20rem; /* 320px */
    }
}

@media (min-width: 1024px) {
    .rsc-info-image-wrap[b-x5yq9f5f9p] {
        min-height: 0;
    }
}

.rsc-info-image[b-x5yq9f5f9p] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rsc-info-image-label[b-x5yq9f5f9p] {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.90);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-radius: 0.5rem;
    padding: 0.375rem 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10);
}

.rsc-info-image-label p[b-x5yq9f5f9p] {
    font-size: 0.5625rem;
    color: #5D4037;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
 * 4. ANIMACIONES — Transiciones CSS de entrada
 * ═══════════════════════════════════════════════════════════════════════
 * Reemplaza motion.div de Framer Motion.
 * Cada bloque .rsc-animate empieza oculto y se revela vía keyframes.
 * ═══════════════════════════════════════════════════════════════════════ */

.rsc-animate[b-x5yq9f5f9p] {
    opacity: 0;
}

.rsc-animate--up[b-x5yq9f5f9p] {
    animation: rscFadeUp-b-x5yq9f5f9p 0.55s ease-out forwards;
}

.rsc-animate--left[b-x5yq9f5f9p] {
    animation: rscFadeLeft-b-x5yq9f5f9p 0.5s ease-out forwards;
}

.rsc-animate--right[b-x5yq9f5f9p] {
    animation: rscFadeRight-b-x5yq9f5f9p 0.5s ease-out forwards;
    animation-delay: 0.15s;
}

/* Delays escalonados */
.rsc-delay-1[b-x5yq9f5f9p] { animation-delay: 0.10s; }
.rsc-delay-2[b-x5yq9f5f9p] { animation-delay: 0.15s; }
.rsc-delay-3[b-x5yq9f5f9p] { animation-delay: 0.22s; }
.rsc-delay-4[b-x5yq9f5f9p] { animation-delay: 0.30s; }
.rsc-delay-5[b-x5yq9f5f9p] { animation-delay: 0.60s; }

@keyframes rscFadeUp-b-x5yq9f5f9p {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rscFadeLeft-b-x5yq9f5f9p {
    from {
        opacity: 0;
        transform: translateX(-16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes rscFadeRight-b-x5yq9f5f9p {
    from {
        opacity: 0;
        transform: translateX(16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ════════════════════════════════════════════════════════════════════
   SECCIÓN 3: COMPOSICIÓN DE MADERAS
   ════════════════════════════════════════════════════════════════════ */

.rsc-woods[b-x5yq9f5f9p] {
    padding: 4rem 1rem;
    max-width: 76rem;
    margin: 0 auto;
}

/* ── Header ── */
.rsc-woods-header[b-x5yq9f5f9p] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.rsc-woods-header__title-row[b-x5yq9f5f9p] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.rsc-woods-heading[b-x5yq9f5f9p] {
    font-family: var(--font-serif, Georgia, serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: #3E2723;
    margin: 0;
}

.rsc-woods-subtitle[b-x5yq9f5f9p] {
    font-size: 0.95rem;
    color: #8D6E63;
    max-width: 40rem;
    margin: 0 auto;
}

/* ── Grid ── */
.rsc-woods-grid[b-x5yq9f5f9p] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .rsc-woods-grid[b-x5yq9f5f9p] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .rsc-woods-grid[b-x5yq9f5f9p] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Card ── */
.rsc-wood-card[b-x5yq9f5f9p] {
    background: #F5F5DC;
    border: 1px solid #E8E0D0;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10),
                0 2px 4px -2px rgba(0, 0, 0, 0.10);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
}

.rsc-wood-card:hover[b-x5yq9f5f9p] {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10),
                0 4px 6px -4px rgba(0, 0, 0, 0.10);
}

.rsc-wood-card:focus-visible[b-x5yq9f5f9p] {
    outline: 3px solid #A5D6A7;
    outline-offset: 2px;
}

/* Header oscuro */
.rsc-wood-card__header[b-x5yq9f5f9p] {
    background: linear-gradient(135deg, #4E342E 0%, #6D4C41 100%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
}

.rsc-wood-card__header--special[b-x5yq9f5f9p] {
    background: linear-gradient(135deg, #3E2723 0%, #5D4037 100%);
}

.rsc-wood-card__title[b-x5yq9f5f9p] {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 1rem;
    font-weight: 600;
    color: #FFFFFF;
    margin: 0;
}

/* Body */
.rsc-wood-card__body[b-x5yq9f5f9p] {
    padding: 1rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Wood list */
.rsc-wood-list[b-x5yq9f5f9p] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.rsc-wood-list--ordered[b-x5yq9f5f9p] {
    counter-reset: none;
}

.rsc-wood-list__item[b-x5yq9f5f9p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #5D4037;
    padding: 0.2rem 0;
}

.rsc-wood-list__num[b-x5yq9f5f9p] {
    font-weight: 600;
    font-size: 0.6875rem;
    color: #8D6E63;
    min-width: 1.5rem;
}

.rsc-wood-list__leaf[b-x5yq9f5f9p] {
    color: #81C784;
    font-size: 0.75rem;
}

/* Footer padrenuestro / nota */
.rsc-wood-card__footer[b-x5yq9f5f9p] {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px dashed #D7CCC8;
}

.rsc-wood-card__footer-text[b-x5yq9f5f9p] {
    font-size: 0.8rem;
    color: #4E342E;
    font-style: italic;
    font-weight: 700;
    margin: 0;
}


/* ════════════════════════════════════════════════════════════════════
   SECCIÓN 4: CTA FOOTER VERDE
   ════════════════════════════════════════════════════════════════════ */

.rsc-cta-footer-wrap[b-x5yq9f5f9p] {
    padding: 0 1rem 4rem;
}

.rsc-cta-footer[b-x5yq9f5f9p] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 50%, #388E3C 100%);
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    max-width: 56rem;
    margin: 0 auto;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10),
                0 4px 6px -4px rgba(0, 0, 0, 0.10);
}

@media (min-width: 640px) {
    .rsc-cta-footer[b-x5yq9f5f9p] {
        padding: 3.5rem 3rem;
    }
}

/* Decorative circles */
.rsc-cta-footer__circle[b-x5yq9f5f9p] {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.rsc-cta-footer__circle--tr[b-x5yq9f5f9p] {
    width: 10rem;
    height: 10rem;
    top: -3rem;
    right: -3rem;
}

.rsc-cta-footer__circle--bl[b-x5yq9f5f9p] {
    width: 8rem;
    height: 8rem;
    bottom: -2.5rem;
    left: -2.5rem;
}

/* Inner layout */
.rsc-cta-footer__inner[b-x5yq9f5f9p] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .rsc-cta-footer__inner[b-x5yq9f5f9p] {
        flex-direction: row;
        text-align: left;
        justify-content: space-between;
    }
}

.rsc-cta-footer__text[b-x5yq9f5f9p] {
    max-width: 34rem;
}

.rsc-cta-footer__title[b-x5yq9f5f9p] {
    font-family: var(--font-serif, Georgia, serif);
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 0.375rem;
}

.rsc-cta-footer__desc[b-x5yq9f5f9p] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Button */
.rsc-cta-footer__btn[b-x5yq9f5f9p] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.65rem 1.5rem;
    border-radius: 9999px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    cursor: pointer;
}

.rsc-cta-footer__btn:hover[b-x5yq9f5f9p] {
    background: #FFFFFF;
    color: #2E7D32;
    transform: translateY(-1px);
}

.rsc-cta-footer__btn:focus-visible[b-x5yq9f5f9p] {
    outline: 3px solid #A5D6A7;
    outline-offset: 2px;
}

.rsc-cta-footer__btn-arrow[b-x5yq9f5f9p] {
    font-size: 0.75rem;
    transition: transform 0.2s;
}

.rsc-cta-footer__btn:hover .rsc-cta-footer__btn-arrow[b-x5yq9f5f9p] {
    transform: translateX(3px);
}


/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .rsc-animate[b-x5yq9f5f9p] {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}
/* /Pages/Totem/Index.razor.rz.scp.css */
/*
 * Pages/Totem/Index.razor.css
 * ══════════════════════════════════════════════════════════════════
 * He replicado el diseño de TotemPage.tsx de React a CSS puro (scoped).
 * Prefijo exclusivo: tt- (totem)
 *
 * Estructura de bloques:
 *   1. Poema del Hero (inserción en el FadeHeroBanner via ChildContent)
 *   2. Sección bridge (ícono puente entre columnas)
 *   3. Contenedor principal y card
 *   4. Split de dos columnas
 *   5. Cabecera de columna
 *   6. Filas de tótem con tooltip CSS
 *   7. Estado de carga
 *   8. Pie de página con cita y CTA
 *   9. Responsive (mobile-first)
 */

/* ══════════════════════════════════════════════════════════════════
   1. POEMA DEL HERO
   ══════════════════════════════════════════════════════════════════ */

.tt-poem[b-9w1j2ro2ul] {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.tt-poem__line[b-9w1j2ro2ul] {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
    text-align: center;
}

.tt-poem__line--highlight[b-9w1j2ro2ul] {
    color: #FFAB40;
    font-size: 1.05rem;
    margin-top: 0.5rem;
}

/* ══════════════════════════════════════════════════════════════════
   2. SECCIÓN BRIDGE — Ícono hacha / árbol
   ══════════════════════════════════════════════════════════════════ */

.tt-bridge[b-9w1j2ro2ul] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 1rem 1.5rem;
    /* Solapamiento visual con el hero (sube sobre el degradado inferior) */
    margin-top: -2rem;
    position: relative;
    z-index: 10;
}

.tt-bridge__icon-card[b-9w1j2ro2ul] {
    background: #ffffff;
    border: 1px solid #ECE6D8;
    border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    padding: 1.25rem 1.5rem;
    margin-bottom: 0.875rem;
}

.tt-bridge__icon-fa[b-9w1j2ro2ul] {
    font-size: 2.5rem;
    color: #4E342E;
    display: block;
}

.tt-bridge__label[b-9w1j2ro2ul] {
    font-size: 0.6875rem;          /* 11px */
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(55, 71, 79, 0.40);
    margin: 0 0 0.25rem;
}

.tt-bridge__hint[b-9w1j2ro2ul] {
    font-size: 0.75rem;
    color: rgba(55, 71, 79, 0.30);
    margin: 0;
    text-align: center;
    max-width: 24rem;
}

/* ══════════════════════════════════════════════════════════════════
   3. CONTENEDOR Y CARD
   ══════════════════════════════════════════════════════════════════ */

.tt-container[b-9w1j2ro2ul] {
    max-width: 64rem;              /* ~1024px, igual que max-w-5xl de Tailwind */
    margin: 0 auto 4rem;
    padding: 0 1rem;
}

.tt-card[b-9w1j2ro2ul] {
    background: #ffffff;
    border: 1px solid #ECE6D8;
    border-radius: 1rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════
   4. SPLIT DE DOS COLUMNAS
   ══════════════════════════════════════════════════════════════════ */

.tt-split[b-9w1j2ro2ul] {
    display: flex;
    flex-direction: column; /* mobile: apiladas */
}

@media (min-width: 1024px) {
    .tt-split[b-9w1j2ro2ul] {
        flex-direction: row; /* desktop: lado a lado */
    }
}

.tt-column[b-9w1j2ro2ul] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Borde separador derecho solo en la columna izquierda (desktop) */
@media (min-width: 1024px) {
    .tt-column--left[b-9w1j2ro2ul] {
        border-right: 1px solid #ECE6D8;
    }
}

/* En mobile, quitar el borde inferior — lo reemplaza tt-section-sep */
@media (max-width: 1023px) {
    .tt-column--left[b-9w1j2ro2ul] {
        border-bottom: none;
    }
}

/* ══════════════════════════════════════════════════════════════════
   SEPARADOR VISUAL MOBILE — entre Activos y Siempre Listos
   Solo visible en mobile (< 1024px)
   ══════════════════════════════════════════════════════════════════ */
.tt-section-sep[b-9w1j2ro2ul] {
    display: none;
}

@media (max-width: 1023px) {
    .tt-section-sep[b-9w1j2ro2ul] {
        display: flex;
        align-items: center;
        gap: 0.875rem;
        padding: 1.75rem 1.25rem 1rem;
        background: #F8F5F0;
        border-top: 1px solid #ECE6D8;
        border-bottom: 1px solid #ECE6D8;
    }

    .tt-section-sep__line[b-9w1j2ro2ul] {
        flex: 1;
        height: 1px;
        background: rgba(55, 71, 79, 0.18);
        border-radius: 9999px;
    }

    .tt-section-sep__pill[b-9w1j2ro2ul] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.35rem 0.875rem;
        border-radius: 9999px;
        background: white;
        border: 1px solid #ECE6D8;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(55, 71, 79, 0.55);
        white-space: nowrap;
    }

    .tt-section-sep__icon[b-9w1j2ro2ul] {
        font-size: 0.625rem;
        color: rgba(55, 71, 79, 0.40);
    }
}

/* ══════════════════════════════════════════════════════════════════
   5. CABECERA DE COLUMNA
   ══════════════════════════════════════════════════════════════════ */

.tt-column__header[b-9w1j2ro2ul] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: #F8F5F0;
    border-bottom: 1px solid #ECE6D8;
}

.tt-column__header-info[b-9w1j2ro2ul] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.tt-column__title[b-9w1j2ro2ul] {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    font-weight: normal;
    color: #37474F;
    margin: 0;
}

.tt-column__subtitle[b-9w1j2ro2ul] {
    font-size: 0.625rem;           /* 10px */
    color: rgba(55, 71, 79, 0.40);
    margin: 0;
}

.tt-column__count-pill[b-9w1j2ro2ul] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: #ffffff;
    border: 1px solid #ECE6D8;
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
}

.tt-column__count-icon[b-9w1j2ro2ul] {
    font-size: 0.6875rem;
    color: rgba(55, 71, 79, 0.30);
}

.tt-column__count-num[b-9w1j2ro2ul] {
    font-size: 0.6875rem;
    font-weight: 700;
    color: rgba(55, 71, 79, 0.50);
    font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════
   6. LISTA Y FILAS DE TÓTEM — con tooltip CSS
   ══════════════════════════════════════════════════════════════════ */

.tt-list[b-9w1j2ro2ul] {
    /* Sin scroll fijo: la lista fluye con la página, igual que el React */
}

.tt-list__empty[b-9w1j2ro2ul] {
    padding: 1.5rem;
    font-size: 0.8125rem;
    color: rgba(55, 71, 79, 0.40);
    text-align: center;
    font-style: italic;
    margin: 0;
}

/* ─── Fila individual ─────────────────────────────────────────── */

.tt-row[b-9w1j2ro2ul] {
    position: relative;
    display: flex;
    align-items: center;
    height: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.90);
    cursor: default;
    transition: filter 0.15s ease;
    /* El fondo viene del style inline basado en CodigoColorUnidad */
}

.tt-row:hover[b-9w1j2ro2ul] {
    filter: brightness(0.95);
}

/* Franja vertical de color de rama — 6 px, altura completa */
.tt-row__strip[b-9w1j2ro2ul] {
    flex-shrink: 0;
    width: 6px;
    height: 100%;
    /* El color viene del style inline */
}

/* Nombre totémico */
.tt-row__name[b-9w1j2ro2ul] {
    padding-left: 0.75rem;
    padding-right: 0.5rem;
    font-size: 0.75rem;            /* 12px */
    color: rgba(55, 71, 79, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    flex: 1;
}

/* Cruz de fallecimiento */
.tt-cross[b-9w1j2ro2ul] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #C9963A;
    letter-spacing: 0;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(180, 130, 30, 0.45);
}

/* ─── Tooltip flotante — posicionado por JS (totem-tooltip.js) ─── */

/*
 * El tooltip ahora es un <div> real (#tt-floating-tooltip) posicionado
 * via JS con position:fixed, de forma que sigue al cursor sin tapar
 * la otra columna.  Ya no se usan pseudo-elementos ::before/::after.
 */
.tt-floating-tooltip[b-9w1j2ro2ul] {
    display: none;
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    background: #263238;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   7. ESTADO DE CARGA
   ══════════════════════════════════════════════════════════════════ */

.tt-loading[b-9w1j2ro2ul] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    gap: 1rem;
}

.tt-loading__spinner[b-9w1j2ro2ul] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid rgba(46, 125, 50, 0.15);
    border-top-color: #2E7D32;
    border-radius: 50%;
    animation: tt-spin-b-9w1j2ro2ul 0.8s linear infinite;
}

@keyframes tt-spin-b-9w1j2ro2ul {
    to { transform: rotate(360deg); }
}

.tt-loading__text[b-9w1j2ro2ul] {
    font-size: 0.8125rem;
    color: rgba(55, 71, 79, 0.50);
    font-style: italic;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
   8. PIE DE PÁGINA — Cita y CTA
   ══════════════════════════════════════════════════════════════════ */

.tt-footer[b-9w1j2ro2ul] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem 5rem;
    gap: 2rem;
}

.tt-footer__quote[b-9w1j2ro2ul] {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 0.95rem;
    font-weight: 600;
    color: #4E342E;
    text-align: center;
    margin: 0;
}

.tt-footer__btn[b-9w1j2ro2ul] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    background: #2E7D32;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    padding: 0.875rem 1.75rem;
    border-radius: 9999px;
    box-shadow: 0 4px 14px rgba(27, 94, 32, 0.20);
    transition: background-color 0.3s ease,
                box-shadow 0.3s ease,
                transform 0.3s ease;
}

.tt-footer__btn:hover[b-9w1j2ro2ul] {
    background: #1B5E20;
    box-shadow: 0 6px 20px rgba(27, 94, 32, 0.30);
    transform: translateY(-2px);
    color: #ffffff;
    text-decoration: none;
}

.tt-footer__btn .fa-arrow-right[b-9w1j2ro2ul] {
    transition: transform 0.3s ease;
}

.tt-footer__btn:hover .fa-arrow-right[b-9w1j2ro2ul] {
    transform: translateX(4px);
}

/* Variante secundaria para el botón "Gestionar colores" */
.tt-footer__btn--edit[b-9w1j2ro2ul] {
    background: transparent;
    color: #546E7A;
    border: 2px solid #B0BEC5;
    box-shadow: none;
    font-size: 0.8rem;
    padding: 0.6rem 1.25rem;
}

.tt-footer__btn--edit:hover[b-9w1j2ro2ul] {
    background: #ECEFF1;
    border-color: #78909C;
    color: #37474F;
    box-shadow: none;
    transform: none;
}

/* ══════════════════════════════════════════════════════════════════
   9. RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */

/* En mobile (< 640px):
   - El bridge se compacta
   - El poema reduce el tamaño de fuente
   - Las filas de tótem NO muestran tooltip (no hay hover en touch)
*/
@media (max-width: 639px) {
    .tt-bridge[b-9w1j2ro2ul] {
        padding: 1.5rem 1rem 1rem;
    }

    .tt-bridge__icon-card[b-9w1j2ro2ul] {
        padding: 0.875rem 1.125rem;
    }

    .tt-bridge__icon-fa[b-9w1j2ro2ul] {
        font-size: 2rem;
    }

    .tt-bridge__hint[b-9w1j2ro2ul] {
        display: none;
    }

    .tt-poem__line[b-9w1j2ro2ul] {
        font-size: 0.8125rem;
    }

    .tt-poem__line--highlight[b-9w1j2ro2ul] {
        font-size: 0.9375rem;
    }

    .tt-footer[b-9w1j2ro2ul] {
        padding: 2rem 1rem 3.5rem;
        gap: 1.5rem;
    }

    .tt-footer__btn[b-9w1j2ro2ul] {
        padding: 0.75rem 1.25rem;
        font-size: 0.8125rem;
    }
}
/* /Pages/Unidades/Galeria.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * Galeria.razor.css — Tab Galería (álbumes con paginación)
 * ──────────────────────────────────────────────────────────────────────
 * Secciones: Header, Grid responsive 1→2→4, AlbumCard (cover, badge,
 * disabled overlay, footer), Estado vacío ghost cards, Paginación,
 * Transiciones entre páginas.
 * ══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
 * 0. HEADER
 * ═══════════════════════════════════════════════════════════════ */
.ud-gal-header[b-yfhy5iikf3] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.ud-gal-heading[b-yfhy5iikf3] {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary, #37474F);
    margin: 0 0 0.5rem;
}

.ud-gal-subtitle[b-yfhy5iikf3] {
    color: rgba(55, 71, 79, 0.53);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════
 * 1. GRID RESPONSIVE  1 col → 2 col → 3 col → 4 col
 * ═══════════════════════════════════════════════════════════════ */
.ud-gal-grid[b-yfhy5iikf3] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2.5rem;
    transition: opacity 0.25s ease;
    align-items: stretch;
}

.ud-gal-grid--fade[b-yfhy5iikf3] {
    opacity: 0;
    pointer-events: none;
}

@media (min-width: 640px) {
    .ud-gal-grid[b-yfhy5iikf3] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .ud-gal-grid[b-yfhy5iikf3] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .ud-gal-grid[b-yfhy5iikf3] {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* ═══════════════════════════════════════════════════════════════
 * 2. FOTOS CARD (mismo estilo que /fotos)
 * ═══════════════════════════════════════════════════════════════ */

/* ── Loading ── */
.ud-gal-loading[b-yfhy5iikf3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 1rem;
    color: rgba(55, 71, 79, 0.6);
    font-size: 1.125rem;
}

.ud-gal-loading i[b-yfhy5iikf3] {
    font-size: 2rem;
    color: var(--primary, #2E7D32);
}

/* ── Card link ── */
.fotos-card-link[b-yfhy5iikf3] {
    text-decoration: none;
    color: inherit;
    display: flex;
    min-width: 0;
    border-radius: 1rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.fotos-card-link:hover[b-yfhy5iikf3] {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* ── Card ── */
.fotos-card[b-yfhy5iikf3] {
    background: var(--card, #FFFFFF);
    border-radius: 1rem;
    overflow: hidden;
    border: 1.5px solid var(--accent, #ECE6D8);
    transition: border-color 0.25s ease;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.fotos-card-link:hover .fotos-card[b-yfhy5iikf3] {
    border-color: rgba(46, 125, 50, 0.3);
}

/* ── Card imagen ── */
.fotos-card-imagen[b-yfhy5iikf3] {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #F0ECE3;
}

.fotos-card-img[b-yfhy5iikf3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.fotos-card-link:hover .fotos-card-img[b-yfhy5iikf3] {
    transform: scale(1.05);
}

.fotos-card-placeholder[b-yfhy5iikf3] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #F0ECE3 0%, #E8E2D6 100%);
    color: var(--accent, #ECE6D8);
    font-size: 2.5rem;
}

/* ── Overlay hover ── */
.fotos-card-overlay[b-yfhy5iikf3] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 50%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fotos-card-link:hover .fotos-card-overlay[b-yfhy5iikf3] {
    opacity: 1;
}

.fotos-card-ver[b-yfhy5iikf3] {
    background: rgba(255, 255, 255, 0.95);
    color: var(--primary, #2E7D32);
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transform: translateY(8px);
    transition: transform 0.3s ease;
}

.fotos-card-link:hover .fotos-card-ver[b-yfhy5iikf3] {
    transform: translateY(0);
}

/* ── Card body ── */
.fotos-card-body[b-yfhy5iikf3] {
    padding: 0.875rem 1rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ── Pills de unidad ── */
.fotos-card-pills[b-yfhy5iikf3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.fotos-pill-unidad[b-yfhy5iikf3] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    background: var(--pill-bg, rgba(93, 64, 55, 0.1));
    color: var(--pill-color, #5D4037);
    white-space: nowrap;
    line-height: 1.4;
}

/* ── Card texto ── */
.fotos-card-titulo[b-yfhy5iikf3] {
    font-family: var(--font-serif, 'Bitter', Georgia, serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--title, #263238);
    margin: 0 0 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.fotos-card-link:hover .fotos-card-titulo[b-yfhy5iikf3] {
    color: var(--primary, #2E7D32);
}

.fotos-card-meta[b-yfhy5iikf3] {
    font-size: 0.8125rem;
    color: var(--text-secondary, #78909C);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════
 * 3. ESTADO VACÍO
 * ═══════════════════════════════════════════════════════════════ */
.ud-gal-empty[b-yfhy5iikf3] {
    position: relative;
    background: #fff;
    border: 1px solid var(--border-soft, #ECE6D8);
    border-radius: 1rem;
    padding: 4rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.ud-gal-empty-ghosts[b-yfhy5iikf3] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    opacity: 0.5;
    pointer-events: none;
}

.ud-gal-ghost[b-yfhy5iikf3] {
    flex: 1;
    max-width: 200px;
    aspect-ratio: 4 / 3;
    background: rgba(55, 71, 79, 0.016);
    border-radius: 0.75rem;
}

.ud-gal-empty-content[b-yfhy5iikf3] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ud-gal-empty-icon[b-yfhy5iikf3] {
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.ud-gal-empty-icon i[b-yfhy5iikf3] {
    font-size: 4rem; /* w-16 h-16 equiv */
}

.ud-gal-empty-title[b-yfhy5iikf3] {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    color: var(--text-primary, #37474F);
    margin: 0 0 0.75rem;
}

.ud-gal-empty-desc[b-yfhy5iikf3] {
    max-width: 28rem;
    color: rgba(55, 71, 79, 0.47);
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════
 * 4. PAGINACIÓN
 * ═══════════════════════════════════════════════════════════════ */
.ud-gal-pag[b-yfhy5iikf3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

.ud-gal-pag-btn[b-yfhy5iikf3] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ud-gal-pag-btn:hover:not(:disabled)[b-yfhy5iikf3] {
    opacity: 0.85;
}

.ud-gal-pag-btn--disabled[b-yfhy5iikf3] {
    cursor: not-allowed;
    opacity: 0.35 !important;
    background: transparent !important;
}

.ud-gal-pag-dots[b-yfhy5iikf3] {
    display: flex;
    gap: 0.25rem;
}

.ud-gal-dot[b-yfhy5iikf3] {
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ud-gal-dot:hover:not(.ud-gal-dot--active)[b-yfhy5iikf3] {
    background: rgba(55, 71, 79, 0.06);
}

.ud-gal-dot--active[b-yfhy5iikf3] {
    cursor: default;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Ocultar dots en mobile muy chico */
@media (max-width: 420px) {
    .ud-gal-pag-dots[b-yfhy5iikf3] {
        display: none;
    }
}


/* ═══════════════════════════════════════════════════════════════
 * 5. KEYFRAMES
 * ═══════════════════════════════════════════════════════════════ */
@keyframes ud-gal-fadeUp-b-yfhy5iikf3 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Pages/Unidades/Historia.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * Historia.razor.css — Historia y Recursos (React-aligned 4-col grid)
 * ──────────────────────────────────────────────────────────────────────
 * 0. Grid principal (row1: Historia 3col + Recursos 1col)
 *                    (row2: Info 3col + Drive 1col)
 * 1. Historia card + drop-cap
 * 2. Info cards
 * 3. Recursos PDF sidebar
 * 4. Drive CTA card
 * 5. PDF modal overlay
 * 6. Entrance animation
 * 7. Responsive
 * ══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
 * 0. GRID PRINCIPAL
 * ═══════════════════════════════════════════════════════════════ */
.ud-hist-grid[b-mgk7ae6iur] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 992px) {
    .ud-hist-grid[b-mgk7ae6iur] {
        grid-template-columns: 3fr 1fr;
        align-items: start;
    }
    .ud-hist-text-area[b-mgk7ae6iur]      { grid-column: 1; grid-row: 1; }
    .ud-hist-resources-area[b-mgk7ae6iur]  { grid-column: 2; grid-row: 1; }
    .ud-hist-info-area[b-mgk7ae6iur]       { grid-column: 1; grid-row: 2; }
    .ud-hist-drive-area[b-mgk7ae6iur]      { grid-column: 2; grid-row: 2; }
}

/* Entrance animation (staggered via inline animation-delay) */
.ud-hist-text-area[b-mgk7ae6iur],
.ud-hist-resources-area[b-mgk7ae6iur],
.ud-hist-info-area[b-mgk7ae6iur],
.ud-hist-drive-area[b-mgk7ae6iur] {
    animation: ud-hist-fadeUp-b-mgk7ae6iur 0.4s ease both;
}


/* ═══════════════════════════════════════════════════════════════
 * 1. ACCENT BAR HEADER (reutilizable)
 * ═══════════════════════════════════════════════════════════════ */
.ud-hist-accent-header[b-mgk7ae6iur] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.ud-hist-accent-bar[b-mgk7ae6iur] {
    width: 3px;
    height: 1.5rem;
    border-radius: 9999px;
    background: var(--unit-color, #5D4037);
    flex-shrink: 0;
}
.ud-hist-accent-label[b-mgk7ae6iur] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--unit-color, #5D4037);
}


/* ═══════════════════════════════════════════════════════════════
 * 2. HISTORIA CARD
 * ═══════════════════════════════════════════════════════════════ */
.ud-hist-card[b-mgk7ae6iur] {
    background: #fff;
    border-radius: 1rem;
    border: 1px solid var(--border-soft);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 1.5rem 2rem;
}
.ud-hist-title[b-mgk7ae6iur] {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin: 0 0 1.5rem;
}
.ud-hist-subtitle[b-mgk7ae6iur] {
    font-size: 1.3rem;
    color: var(--text-primary);
    margin: 0 0 1.25rem;
}

/* ── Paragraphs ── */
.ud-hist-paragraph[b-mgk7ae6iur] {
    color: rgba(55, 71, 79, 0.8);
    font-size: 0.92rem;
    line-height: 1.7;
    margin: 0;
    white-space: pre-line;
}
.ud-hist-paragraph--spaced[b-mgk7ae6iur] {
    margin-top: 1.25rem;
}

/* ── Lead paragraph (primer párrafo con borde izquierdo) ── */
.ud-hist-paragraph--lead[b-mgk7ae6iur] {
    border-left: 3px solid var(--unit-color, #5D4037);
    padding-left: 1rem;
    color: rgba(55, 71, 79, 0.9);
}

.ud-hist-empty[b-mgk7ae6iur] {
    color: rgba(55, 71, 79, 0.4);
    font-size: 0.88rem;
    font-style: italic;
}


/* ═══════════════════════════════════════════════════════════════
 * 3. INFO CARDS (row 2, 3-column span)
 * ═══════════════════════════════════════════════════════════════ */
.ud-info-grid[b-mgk7ae6iur] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.ud-info-card[b-mgk7ae6iur] {
    background: #fff;
    padding: 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s;
    animation: ud-hist-fadeUp-b-mgk7ae6iur 0.3s ease both;
}
.ud-info-card:hover[b-mgk7ae6iur] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.ud-info-label[b-mgk7ae6iur] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(55, 71, 79, 0.4);
    display: block;
    margin-bottom: 0.5rem;
}
.ud-info-value[b-mgk7ae6iur] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════════════
 * 4. RECURSOS PDF SIDEBAR (row 1, 1-column)
 * ═══════════════════════════════════════════════════════════════ */
.ud-resources-card[b-mgk7ae6iur] {
    background: #fff;
    border-radius: 1rem;
    border: 1px solid var(--border-soft);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 1.25rem;
}

/* ── Empty / en-construcción state ── */
.ud-resources-card--empty[b-mgk7ae6iur] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}
.ud-resources-empty[b-mgk7ae6iur] {
    text-align: center;
    padding: 1.5rem 1rem;
}
.ud-resources-empty-icon[b-mgk7ae6iur] {
    font-size: 2.25rem;
    color: var(--unit-color, #5D4037);
    opacity: 0.35;
    margin-bottom: 0.75rem;
}
.ud-resources-empty h4[b-mgk7ae6iur] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #37474F);
    margin: 0 0 0.4rem;
}
.ud-resources-empty p[b-mgk7ae6iur] {
    font-size: 0.82rem;
    color: rgba(55, 71, 79, 0.53);
    margin: 0;
    line-height: 1.5;
}
.ud-resources-card-header[b-mgk7ae6iur] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1.25rem;
}
.ud-resources-card-header i[b-mgk7ae6iur] {
    color: var(--unit-color, #5D4037);
    font-size: 0.9rem;
}
.ud-resources-card-header h3[b-mgk7ae6iur] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.ud-resources-list[b-mgk7ae6iur] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Resource button (now a <button>) ── */
.ud-resource[b-mgk7ae6iur] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #FDFCFA;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-soft);
    transition: all 0.2s;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    animation: ud-hist-fadeLeft-b-mgk7ae6iur 0.25s ease both;
}
.ud-resource:hover[b-mgk7ae6iur] {
    border-color: var(--unit-color, #804000);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.ud-resource-info[b-mgk7ae6iur] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}
.ud-resource-icon[b-mgk7ae6iur] {
    width: 2.25rem;
    height: 2.25rem;
    background: #FFEBEE;
    color: #D32F2F;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.ud-resource-text[b-mgk7ae6iur] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.ud-resource-title[b-mgk7ae6iur] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ud-resource-meta[b-mgk7ae6iur] {
    font-size: 0.625rem;
    color: rgba(55, 71, 79, 0.27);
    margin-top: 0.125rem;
}
.ud-resource-desc[b-mgk7ae6iur] {
    font-size: 0.625rem;
    color: rgba(55, 71, 79, 0.4);
    margin-top: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ud-resource-dl-icon[b-mgk7ae6iur] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    color: rgba(55, 71, 79, 0.25);
    font-size: 0.75rem;
    transition: opacity 0.2s;
}
.ud-resource:hover .ud-resource-dl-icon[b-mgk7ae6iur] {
    color: var(--unit-color, #5D4037);
    opacity: 0.8;
}


/* ═══════════════════════════════════════════════════════════════
 * 5. GOOGLE DRIVE CTA CARD (row 2, 1-column)
 * ═══════════════════════════════════════════════════════════════ */
.ud-drive-card[b-mgk7ae6iur] {
    color: #fff;
    padding: 1.5rem;
    border-radius: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.ud-drive-icon-wrap[b-mgk7ae6iur] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 1rem;
    color: #fff;
}
.ud-drive-title[b-mgk7ae6iur] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.5rem;
}
.ud-drive-desc[b-mgk7ae6iur] {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.78rem;
    line-height: 1.55;
    margin: 0 0 1.25rem;
}
.ud-drive-btn[b-mgk7ae6iur] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 0.82rem;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.ud-drive-btn:hover[b-mgk7ae6iur] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    text-decoration: none;
}


/* ═══════════════════════════════════════════════════════════════
 * 6. PDF MODAL OVERLAY
 * ═══════════════════════════════════════════════════════════════ */
.ud-lb-overlay[b-mgk7ae6iur] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ud-hist-fadeIn-b-mgk7ae6iur 0.2s ease;
}
.ud-lb-close[b-mgk7ae6iur] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 10000;
}
.ud-lb-close:hover[b-mgk7ae6iur] {
    background: rgba(255, 255, 255, 0.25);
}
.ud-lb-content--pdf[b-mgk7ae6iur] {
    width: 90%;
    max-width: 900px;
    height: 80vh;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.ud-lb-content--pdf iframe[b-mgk7ae6iur] {
    border: none;
    display: block;
}


/* ═══════════════════════════════════════════════════════════════
 * 7. ENTRANCE ANIMATIONS
 * ═══════════════════════════════════════════════════════════════ */
@keyframes ud-hist-fadeUp-b-mgk7ae6iur {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ud-hist-fadeLeft-b-mgk7ae6iur {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes ud-hist-fadeIn-b-mgk7ae6iur {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════
 * 8. RESPONSIVE
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .ud-hist-card[b-mgk7ae6iur] {
        padding: 1.25rem;
    }
    .ud-drive-card[b-mgk7ae6iur] {
        min-height: auto;
        padding: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .ud-info-grid[b-mgk7ae6iur] {
        grid-template-columns: 1fr;
    }
    .ud-hist-dropcap[b-mgk7ae6iur] {
        font-size: 2.8rem;
    }
    .ud-hist-card[b-mgk7ae6iur] {
        padding: 1rem;
    }
    .ud-lb-content--pdf[b-mgk7ae6iur] {
        width: 95%;
        height: 70vh;
    }
}

/* /Pages/Unidades/Index.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * Index.razor.css — Hub de Unidades (página /unidades)
 * ──────────────────────────────────────────────────────────────────────
 * Replica la identidad visual de UnitsHubPage.tsx (React/Tailwind) en
 * Blazor scoped CSS.  Los valores se tomaron directamente de las clases
 * Tailwind del componente UnitCard original.
 *
 * Diferencias intencionadas respecto al React:
 *   - 4 columnas en lugar de 3 (lg)
 *   - Contenedor más ancho (1440px vs 1120px)
 *   - Sin Framer Motion (se usa CSS animation simple)
 *
 * Secciones:
 *   0. Variables y contenedor general
 *   1. Hero Banner (foto con fade inferior)
 *   2. Cuadrícula de tarjetas activas (flex-wrap 4 columnas)
 *   3. Tarjeta (UnitCard) — réplica exacta del React
 *   4. Skeleton loading
 *   5. Sección de unidades históricas
 *   6. Responsive (tablet / mobile)
 * ══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
 * 0. CONTENEDOR GENERAL
 * ═══════════════════════════════════════════════════════ */
.hub-page[b-y9d98kvg49] {
    background: #F9F7F2;
    min-height: 100vh;
    animation: hub-fade-in-b-y9d98kvg49 0.7s ease;
}

@keyframes hub-fade-in-b-y9d98kvg49 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* React usa max-w-[1120px] mx-auto px-4 sm:px-6 lg:px-8.
   Aumentamos a 1440px para que entren 4 cards cómodamente. */
.hub-container[b-y9d98kvg49] {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1rem;       /* px-4 */
}

@media (min-width: 640px) {
    .hub-container[b-y9d98kvg49] { padding: 0 1.5rem; }   /* sm:px-6 */
}
@media (min-width: 1024px) {
    .hub-container[b-y9d98kvg49] { padding: 0 2rem; }      /* lg:px-8 */
}


/* ═══════════════════════════════════════════════════════
 * 1. HERO BANNER — Imagen full-width con fade
 * ═══════════════════════════════════════════════════════ */
.hub-hero[b-y9d98kvg49] {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.hub-hero-img[b-y9d98kvg49] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.75);
}

.hub-hero-tint[b-y9d98kvg49] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.40) 60%,
        rgba(0, 0, 0, 0.30) 100%
    );
}

.hub-hero-fade[b-y9d98kvg49] {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 40%;
    background: linear-gradient(
        to top,
        #F9F7F2 0%,
        rgba(249, 247, 242, 0.85) 30%,
        rgba(249, 247, 242, 0) 100%
    );
}

.hub-hero-content[b-y9d98kvg49] {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1rem;
}

.hub-hero-title[b-y9d98kvg49] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.hub-hero-subtitle[b-y9d98kvg49] {
    font-size: 1.125rem;
    max-width: 42rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
    margin: 0;
}

@media (min-width: 640px) {
    .hub-hero-title[b-y9d98kvg49] { font-size: 3rem; }
    .hub-hero-subtitle[b-y9d98kvg49] { font-size: 1.25rem; }
}
@media (min-width: 768px) {
    .hub-hero-title[b-y9d98kvg49] { font-size: 3.75rem; }
}
@media (min-width: 1024px) {
    .hub-hero-title[b-y9d98kvg49] { font-size: 4.5rem; }
}


/* ═══════════════════════════════════════════════════════
 * 2. SECCIÓN DE UNIDADES ACTIVAS
 * ═══════════════════════════════════════════════════════
 * React: section  pt-10 pb-20 md:pt-14 md:pb-28
 *        grid     grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6
 * Blazor: flex-wrap centrado, 4 columnas en vez de 3.
 */
.hub-active-section[b-y9d98kvg49] {
    padding: 2.5rem 0 5rem;           /* pt-10 pb-20 */
}

@media (min-width: 768px) {
    .hub-active-section[b-y9d98kvg49] { padding: 3.5rem 0 7rem; }  /* md:pt-14 md:pb-28 */
}

.hub-grid[b-y9d98kvg49] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;                       /* gap-6 */
}

/* Breakpoints de columnas (con flex-wrap):
   gap = 1.5rem → fórmula width = calc(X% - gap*(cols-1)/cols)
   1 col  →  100%
   2 cols →  calc(50% - 0.75rem)
   3 cols →  calc(33.333% - 1rem)                                */
.hub-grid > .hub-card-link[b-y9d98kvg49] {
    width: 100%;
}

@media (min-width: 640px) {
    .hub-grid > .hub-card-link[b-y9d98kvg49] { width: calc(50% - 0.75rem); }
}
@media (min-width: 900px) {
    .hub-grid > .hub-card-link[b-y9d98kvg49] { width: calc(33.333% - 1rem); }
}


/* ═══════════════════════════════════════════════════════
 * 3. TARJETA DE UNIDAD (UnitCard)
 * ═══════════════════════════════════════════════════════
 * Valores extraídos directamente de las clases Tailwind
 * del componente UnitCard en UnitsHubPage.tsx.
 */

/* ── Link wrapper ── */
.hub-card-link[b-y9d98kvg49] {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 1rem;                          /* rounded-2xl */
    transition: transform 0.35s cubic-bezier(.4,0,.2,1),
                box-shadow 0.35s cubic-bezier(.4,0,.2,1),
                filter 0.35s ease;
}

/* hover: lift + glow */
.hub-card-link:hover[b-y9d98kvg49] {
    transform: translateY(-0.4rem);
    text-decoration: none;
    color: inherit;
}

/* hover:shadow-xl + colored ambient shadow */
.hub-card-link:hover .hub-card[b-y9d98kvg49] {
    box-shadow: 0 20px 35px -8px rgba(0, 0, 0, 0.12),
                0 8px 16px -4px rgba(0, 0, 0, 0.08),
                0 0 0 1px var(--card-color-light, rgba(0,0,0,0.04));
    border-color: var(--card-color, #5D4037);
}

/* ── Card container ──
   bg-white rounded-2xl overflow-hidden shadow-sm border border-[#ECE6D8]
   flex flex-col h-full */
.hub-card[b-y9d98kvg49] {
    background: #fff;
    border-radius: 1rem;                          /* rounded-2xl */
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    border: 1px solid #ECE6D8;
    display: flex;
    flex-direction: column;
    padding: 1rem;                                 /* 16px */
    transition: box-shadow 0.35s cubic-bezier(.4,0,.2,1),
                border-color 0.35s ease;
}

/* ── Borde superior coloreado ──
   h-1 w-full shrink-0  →  4px */
.hub-card-border-top[b-y9d98kvg49] {
    height: 0.25rem;                              /* h-1 = 4px */
    width: 100%;
    flex-shrink: 0;
    background: var(--card-color, #5D4037);
}

/* ── Cuerpo principal ──
   p-5 sm:p-6 pb-3 sm:pb-3  flex items-center gap-4 */
.hub-card-body[b-y9d98kvg49] {
    padding: 0.75rem 0;                           /* solo top/bottom, sin laterales */
    display: flex;
    align-items: center;
    gap: 1rem;                                    /* gap-4 */
}

/* ── Contenedor del símbolo ──
   Cuadrado fijo, borde sólido del color de la rama. */
.hub-card-icon[b-y9d98kvg49] {
    width: 110px;
    height: 110px;
    border-radius: 0.75rem;                       /* rounded-xl */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid var(--card-color, #5D4037);
    padding: 0;
    background: transparent;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(.4,0,.2,1),
                box-shadow 0.35s ease;
}

/* Imagen del símbolo de rama: el lado más corto llena el cuadrado,
   el sobrante se recorta. */
.hub-card-simbolo[b-y9d98kvg49] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s cubic-bezier(.4,0,.2,1);
}

/* Hover: icon scale + glow ring */
.hub-card-link:hover .hub-card-icon[b-y9d98kvg49] {
    transform: scale(1.05);
    box-shadow: 0 0 0 4px var(--card-color-light, rgba(0,0,0,0.06));
}

.hub-card-info[b-y9d98kvg49] {
    flex: 1;
    min-width: 0;
}

/* ── Nombre ──
   font-serif text-lg leading-snug mb-2.5  font-weight:700 */
.hub-card-name[b-y9d98kvg49] {
    font-family: 'Cinzel', 'Playfair Display', 'Georgia', serif;
    font-size: 1.125rem;                          /* text-lg */
    font-weight: 700;
    color: #37474F;
    line-height: 1.375;                           /* leading-snug */
    margin: 0 0 0.625rem;                         /* mb-2.5 */
    transition: color 0.3s;
}

.hub-card-link:hover .hub-card-name[b-y9d98kvg49] {
    color: #2E7D32;
}

/* ── Badge de edad (pill) ──
   text-xs px-2.5 py-1 rounded-full uppercase tracking-wider  font-weight:700 */
/* ── Contenedor de badges (edad + sexo en la misma línea) ── */
.hub-card-badges[b-y9d98kvg49] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.hub-card-age[b-y9d98kvg49] {
    display: inline-block;
    font-size: 0.75rem;                           /* text-xs */
    font-weight: 700;
    padding: 0.25rem 0.625rem;                    /* py-1 px-2.5 */
    border-radius: 9999px;                        /* rounded-full */
    text-transform: uppercase;
    letter-spacing: 0.05em;                       /* tracking-wider */
    background: var(--card-color-light, rgba(0,0,0,0.06));
    color: var(--card-color, #5D4037);
}

.hub-card-sex[b-y9d98kvg49] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #607D8B;
    white-space: nowrap;
}

/* ── CTA footer ──
   Wrapper:  px-5 sm:px-6 pb-5 shrink-0
   Bar:      bg-[#F8F5F0] px-5 py-3 rounded-xl  font-weight:700 fontSize:14px
   Usamos margin para simular el wrapper padding y padding para el bar. */
.hub-card-cta[b-y9d98kvg49] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F8F5F0;
    padding: 0.75rem 1.25rem;                     /* py-3 px-5 */
    border-radius: 0.75rem;                       /* rounded-xl */
    font-size: 0.875rem;                          /* 14px */
    font-weight: 700;
    color: #37474F;
    transition: background 0.3s, color 0.3s;
    margin: 0;                                    /* sin margin */
    flex-shrink: 0;
}

.hub-card-cta-arrow[b-y9d98kvg49] {
    font-size: 0.875rem;
    transition: transform 0.3s;
}

.hub-card-link:hover .hub-card-cta[b-y9d98kvg49] {
    background: #37474F;
    color: #fff;
}

.hub-card-link:hover .hub-card-cta-arrow[b-y9d98kvg49] {
    transform: translateX(4px);
}


/* ═══════════════════════════════════════════════════════
 * 4. SKELETON LOADING
 * ═══════════════════════════════════════════════════════ */
.hub-card--skeleton[b-y9d98kvg49] {
    pointer-events: none;
}

.hub-skel[b-y9d98kvg49] {
    background: linear-gradient(90deg, #ECE6D8 25%, #F3EDE4 50%, #ECE6D8 75%);
    background-size: 200% 100%;
    animation: hub-shimmer-b-y9d98kvg49 1.5s ease-in-out infinite;
    border-radius: 0.5rem;
}

@keyframes hub-shimmer-b-y9d98kvg49 {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.hub-skel-icon[b-y9d98kvg49] {
    width: 3rem;                                  /* same as real icon */
    height: 3rem;
    border-radius: 0.75rem;
    flex-shrink: 0;
}

.hub-skel-text[b-y9d98kvg49] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hub-skel-line[b-y9d98kvg49] {
    height: 0.875rem;
    border-radius: 0.25rem;
}

.hub-skel-cta[b-y9d98kvg49] {
    height: 2.75rem;                              /* py-3 + font ~ 2.75rem */
    margin: 0 1.25rem 1.25rem;                    /* same as real CTA */
    border-radius: 0.75rem;
}


/* ═══════════════════════════════════════════════════════
 * 5. SECCIÓN HISTÓRICA
 * ═══════════════════════════════════════════════════════
 * React: py-16 md:py-24  border-t border-[#ECE6D8]
 *        bg rgba(236,230,216,0.2)
 *        flex flex-wrap justify-center gap-6
 */
.hub-hist-section[b-y9d98kvg49] {
    padding: 4rem 0;                              /* py-16 */
    border-top: 1px solid #ECE6D8;
    background: rgba(236, 230, 216, 0.2);
}

@media (min-width: 768px) {
    .hub-hist-section[b-y9d98kvg49] { padding: 6rem 0; }        /* md:py-24 */
}

.hub-hist-header[b-y9d98kvg49] {
    margin-bottom: 3rem;                          /* mb-12 */
}

.hub-hist-label[b-y9d98kvg49] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(55, 71, 79, 0.4);
    font-size: 0.875rem;                          /* text-sm */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;                       /* tracking-widest */
    margin-bottom: 0.75rem;                       /* space-y-3 */
}

.hub-hist-label i[b-y9d98kvg49] {
    font-size: 1.125rem;                          /* w-5 h-5 */
}

.hub-hist-title[b-y9d98kvg49] {
    font-family: 'Cinzel', 'Playfair Display', 'Georgia', serif;
    font-size: 1.875rem;                          /* text-3xl */
    font-weight: 700;
    color: #37474F;
    margin: 0 0 0.75rem;
}

@media (min-width: 768px) {
    .hub-hist-title[b-y9d98kvg49] { font-size: 2.25rem; }       /* md:text-4xl */
}

.hub-hist-desc[b-y9d98kvg49] {
    color: rgba(55, 71, 79, 0.5);
    max-width: 36rem;                             /* max-w-xl */
    line-height: 1.6;
    margin: 0;
}

/* Grid histórica: flex centrado gap-6, mismos breakpoints que activas */
.hub-hist-grid[b-y9d98kvg49] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;                                  /* gap-6 */
}

.hub-hist-card-wrap[b-y9d98kvg49] {
    width: 100%;
}

@media (min-width: 640px) {
    .hub-hist-card-wrap[b-y9d98kvg49] { width: calc(50% - 0.75rem); }
}
@media (min-width: 900px) {
    .hub-hist-card-wrap[b-y9d98kvg49] { width: calc(33.333% - 1rem); }
}

/* Indicador de período histórico */
.hub-hist-period[b-y9d98kvg49] {
    display: flex;
    align-items: center;
    gap: 0.375rem;                                /* gap-1.5 */
    margin-top: 0.25rem;                          /* mt-1 */
    font-size: 0.75rem;                           /* text-xs */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;                       /* tracking-wider */
    color: rgba(55, 71, 79, 0.4);
}

.hub-hist-period i[b-y9d98kvg49] {
    font-size: 0.875rem;                          /* w-3.5 h-3.5 */
    opacity: 0.35;
}


/* ═══════════════════════════════════════════════════════
 * 6. RESPONSIVE — Mobile (< 640px)
 * ═══════════════════════════════════════════════════════ */
@media (max-width: 639px) {
    .hub-hero[b-y9d98kvg49] {
        height: 360px;
    }

    .hub-hero-content[b-y9d98kvg49] {
        padding: 0 1.25rem;
    }

    .hub-hist-header[b-y9d98kvg49] {
        margin-bottom: 2rem;
    }
}
/* /Pages/Unidades/Integrantes.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * Integrantes.razor.css — Nómina con pills coloreadas, avatar, dirigentes
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Layout grid: 1 col mobile, 2 cols (1fr + 0.54fr) lg+ ── */
.int-layout[b-a1t9rqs0a2] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 992px) {
    .int-layout[b-a1t9rqs0a2] {
        grid-template-columns: 1fr 0.54fr;
        gap: 3rem;
    }
}

/* ═══════════════════════════════
 * PANEL DE DIRIGENTES (sidebar)
 * ═══════════════════════════════ */
.int-leaders-aside[b-a1t9rqs0a2] {
    order: -1; /* mobile: above roster */
}

@media (min-width: 992px) {
    .int-leaders-aside[b-a1t9rqs0a2] {
        order: 1; /* desktop: right column */
    }
}

.int-leaders-card[b-a1t9rqs0a2] {
    background: #fff;
    border-radius: 1rem;
    border: 1px solid var(--border-soft, #ECE6D8);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

@media (min-width: 992px) {
    .int-leaders-card[b-a1t9rqs0a2] {
        position: sticky;
        top: 5rem;
    }
}

.int-leaders-header[b-a1t9rqs0a2] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-soft, #ECE6D8);
    background-color: #FAFAF7;
}

.int-leaders-icon[b-a1t9rqs0a2] {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.int-leaders-title[b-a1t9rqs0a2] {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 1rem;
    color: var(--text-primary, #37474F);
    margin: 0;
}

.int-leaders-list[b-a1t9rqs0a2] {
    /* divide-y equivalent */
}

.int-leader-row[b-a1t9rqs0a2] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(236, 230, 216, 0.5);
    transition: background-color 0.2s;
}

.int-leader-row:last-child[b-a1t9rqs0a2] {
    border-bottom: none;
}

.int-leader-row:hover[b-a1t9rqs0a2] {
    background-color: rgba(245, 243, 238, 0.5);
}

.int-leader-avatar[b-a1t9rqs0a2] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid;
    font-size: 0.85rem;
}

.int-leader-info[b-a1t9rqs0a2] {
    min-width: 0;
    flex: 1;
}

.int-leader-code[b-a1t9rqs0a2] {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    margin-bottom: 0.25rem;
}

.int-leader-name[b-a1t9rqs0a2] {
    margin: 0;
    color: var(--text-primary, #37474F);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.int-leaders-footer[b-a1t9rqs0a2] {
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--border-soft, #ECE6D8);
    background-color: #FAFAF7;
}

.int-leaders-footer p[b-a1t9rqs0a2] {
    margin: 0;
    font-size: 0.625rem;
    text-align: center;
    color: rgba(55, 71, 79, 0.33);
    line-height: 1.5;
}


/* ═══════════════════════════════
 * NÓMINA DE INTEGRANTES (main)
 * ═══════════════════════════════ */
.int-roster-section[b-a1t9rqs0a2] {
    order: 0;
    max-width: 48rem;
}

.int-roster-header[b-a1t9rqs0a2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.int-accent-bar[b-a1t9rqs0a2] {
    width: 3px;
    height: 1.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.int-roster-label[b-a1t9rqs0a2] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.int-roster-count[b-a1t9rqs0a2] {
    color: rgba(55, 71, 79, 0.53);
    font-size: 0.82rem;
    margin: 0 0 1.25rem 1rem;
}

/* ── Card container ── */
.int-roster-card[b-a1t9rqs0a2] {
    background: #fff;
    border-radius: 1rem;
    border: 1px solid var(--border-soft, #ECE6D8);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* ── Table header (sm+) ── */
.int-table-head[b-a1t9rqs0a2] {
    display: none;
    padding: 0.625rem 1.25rem;
    background-color: #FAFAF7;
    border-bottom: 1px solid var(--border-soft, #ECE6D8);
}

@media (min-width: 640px) {
    .int-table-head[b-a1t9rqs0a2] {
        display: grid;
        grid-template-columns: 1fr auto;
    }
}

.int-th[b-a1t9rqs0a2] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(55, 71, 79, 0.4);
}

/* ── Member row ── */
.int-member-row[b-a1t9rqs0a2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 1.25rem;
    transition: background-color 0.2s ease;
}

.int-member-row:hover[b-a1t9rqs0a2] {
    background-color: rgba(245, 243, 238, 0.6);
}

.int-member-left[b-a1t9rqs0a2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}

.int-member-avatar[b-a1t9rqs0a2] {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 700;
}

.int-member-name[b-a1t9rqs0a2] {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--text-primary, #37474F);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Progression pill ── */
.int-pill[b-a1t9rqs0a2] {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid;
}

/* ── Empty state ── */
.int-empty[b-a1t9rqs0a2] {
    padding: 3rem 1.5rem;
    text-align: center;
    color: rgba(55, 71, 79, 0.35);
}

.int-empty-icon[b-a1t9rqs0a2] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.25;
}

.int-empty p[b-a1t9rqs0a2] {
    margin: 0;
    font-size: 0.88rem;
}

/* ── Entrance animation (CSS-only, no JS observer needed) ── */
@keyframes int-fade-in-b-a1t9rqs0a2 {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.int-member-row.ud-animate-in[b-a1t9rqs0a2] {
    animation: int-fade-in-b-a1t9rqs0a2 0.25s ease both;
    animation-delay: var(--card-delay, 0s);
}

/* ═══════════════════════════════
 * RESPONSIVE
 * ═══════════════════════════════ */
@media (max-width: 639px) {
    .int-member-row[b-a1t9rqs0a2] {
        padding: 0.625rem 1rem;
    }
    .int-member-name[b-a1t9rqs0a2] {
        font-size: 0.82rem;
    }
    .int-pill[b-a1t9rqs0a2] {
        font-size: 0.6rem;
        padding: 0.2rem 0.5rem;
    }
}
/* /Pages/Unidades/Progresiones.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * Progresiones.razor.css — StageCards + HonorRollTable (React-aligned)
 * ──────────────────────────────────────────────────────────────────────
 * 0. Section spacing & header
 * 1. Paired grid (mixed-unit 2-col layout)
 * 2. Stage cards (normal + compact + honor)
 * 3. Honor table (gold premium)
 * 4. Entrance animation
 * 5. Responsive
 * ══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
 * 0. SECTION SPACING & HEADER
 * ═══════════════════════════════════════════════════════════════ */
.ud-prog-section[b-3hkskw0odn] { margin-bottom: 4rem; }

.ud-prog-header-bar[b-3hkskw0odn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.ud-prog-accent-bar[b-3hkskw0odn] {
    width: 3px;
    height: 1.5rem;
    border-radius: 9999px;
    background: var(--unit-color, #5D4037);
}
.ud-prog-accent-label[b-3hkskw0odn] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--unit-color, #5D4037);
}
.ud-prog-subtitle[b-3hkskw0odn] {
    color: rgba(55, 71, 79, 0.53);
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════
 * 1. PAIRED GRID — mixed-unit 2-column layout
 * ═══════════════════════════════════════════════════════════════ */
.ud-prog-paired-grid[b-3hkskw0odn] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 64rem;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .ud-prog-paired-grid[b-3hkskw0odn] {
        grid-template-columns: 1fr 1fr;
        gap: 0;
        column-gap: 3rem;
    }
    /* Divisor vertical central entre columnas */
    .ud-prog-paired-grid > :nth-child(2)[b-3hkskw0odn] {
        border-left: 2px solid rgba(var(--unit-color-rgb, 93, 64, 55), 0.15);
        padding-left: 3rem;
    }
}

.ud-prog-col-header[b-3hkskw0odn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    background: rgba(var(--unit-color-rgb, 93, 64, 55), 0.06);
    border: 1px solid rgba(var(--unit-color-rgb, 93, 64, 55), 0.20);
}
.ud-prog-col-header span[b-3hkskw0odn] {
    color: var(--unit-color, #5D4037);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.ud-prog-col-cards[b-3hkskw0odn] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}


/* ═══════════════════════════════════════════════════════════════
 * 2. STAGE CARDS — Normal + Compact + Honor
 * ═══════════════════════════════════════════════════════════════ */

/* ── Non-mixed flex grid ── */
.ud-prog-grid-master[b-3hkskw0odn] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    max-width: 64rem;
    margin: 0 auto;
}

/* ── Base card ── */
.ud-prog-card[b-3hkskw0odn] {
    position: relative;
    width: calc(25% - 1.125rem);
    min-width: 160px;
    max-width: 220px;
    height: 320px;
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    transition: transform 0.3s, box-shadow 0.3s;
    /* entrance animation */
    animation: ud-prog-fadeUp-b-3hkskw0odn 0.35s ease both;
}
.ud-prog-card:hover[b-3hkskw0odn] {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* ── Compact variant (mixed-unit columns) ── */
.ud-prog-card--compact[b-3hkskw0odn] {
    width: calc(50% - 8px);
    height: 320px;
    min-width: 120px;
    max-width: none;
}

/* ── Honor variant ── */
.ud-prog-card--honor[b-3hkskw0odn] {
    border: 2.5px solid var(--gold-border);
    box-shadow: 0 0 28px rgba(198, 150, 12, 0.16), 0 6px 20px rgba(0, 0, 0, 0.07);
}
.ud-prog-card--honor:hover[b-3hkskw0odn] {
    box-shadow: 0 0 36px rgba(198, 150, 12, 0.22), 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Honor glow overlay */
.ud-prog-card-glow[b-3hkskw0odn] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(160deg, rgba(198, 150, 12, 0.04) 0%, transparent 45%, rgba(198, 150, 12, 0.02) 100%);
    z-index: 0;
}

/* ── Image wrap (positioned relative for badge) ── */
.ud-prog-img-wrap[b-3hkskw0odn] {
    position: relative;
    width: 10rem;
    height: 10rem;
    background: rgba(var(--unit-color-rgb, 93, 64, 55), 0.04);
    border: 2.5px solid rgba(var(--unit-color-rgb, 93, 64, 55), 0.08);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    margin-bottom: 1rem;
    z-index: 1;
    flex-shrink: 0;
}
.ud-prog-img-wrap--gold[b-3hkskw0odn] {
    background: var(--gold-light);
    border-color: var(--gold-border);
}
.ud-prog-img-wrap--compact[b-3hkskw0odn] {
    width: 10rem;
    height: 10rem;
}
.ud-prog-img-wrap img[b-3hkskw0odn] {
    width: 80%;
    height: 80%;
    object-fit: contain;
    border-radius: 0.5rem;
}

/* ── Icon fallback (shown when img fails) ── */
.ud-prog-icon-fallback[b-3hkskw0odn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.ud-prog-icon-fallback i[b-3hkskw0odn] {
    font-size: 3.5rem;
    color: rgba(var(--unit-color-rgb, 93, 64, 55), 0.25);
}
.ud-prog-img-wrap--gold .ud-prog-icon-fallback i[b-3hkskw0odn] {
    color: var(--gold);
}
.ud-prog-img-wrap--compact .ud-prog-icon-fallback i[b-3hkskw0odn] {
    font-size: 3.5rem;
}

/* ── Step badge (on image wrap) ── */
.ud-prog-step-badge[b-3hkskw0odn] {
    position: absolute;
    top: -0.625rem;
    right: -0.625rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--unit-color, #5D4037);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
    z-index: 3;
}
.ud-prog-step-badge--gold[b-3hkskw0odn] {
    background: var(--gold);
}
.ud-prog-step-badge--compact[b-3hkskw0odn] {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.8125rem;
    top: -0.625rem;
    right: -0.625rem;
}

/* ── Title ── */
.ud-prog-title[b-3hkskw0odn] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin: 0;
    line-height: 1.3;
    padding: 0 0.25rem;
    z-index: 1;
}
.ud-prog-title--gold[b-3hkskw0odn] {
    color: var(--gold);
}
.ud-prog-card--compact .ud-prog-title[b-3hkskw0odn] {
    font-size: 0.82rem;
}

/* ── Honor tag pill ── */
.ud-prog-honor-tag[b-3hkskw0odn] {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 800;
    background: rgba(198, 150, 12, 0.08);
    color: var(--gold);
    border: 1px solid rgba(198, 150, 12, 0.19);
    z-index: 1;
}
.ud-prog-honor-tag--compact[b-3hkskw0odn] {
    margin-top: 0.5rem;
    padding: 0.25rem 0.75rem;
}


/* ═══════════════════════════════════════════════════════════════
 * 3. HONOR TABLE — Gold premium styling
 * ═══════════════════════════════════════════════════════════════ */
.ud-honor-section[b-3hkskw0odn] { margin-top: 2rem; }

.ud-honor-container[b-3hkskw0odn] {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    border-radius: 1rem;
    border: 2px solid var(--gold-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* ── Gold gradient header ── */
.ud-honor-header[b-3hkskw0odn] {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(198, 150, 12, 0.13);
    background: linear-gradient(135deg, var(--gold-light) 0%, #FFFDF5 100%);
    text-align: center;
}
.ud-honor-header-title[b-3hkskw0odn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
}
.ud-honor-header-title h3[b-3hkskw0odn] {
    font-size: 1.3rem;
    color: var(--text-primary);
    margin: 0;
}
.ud-honor-medal-icon[b-3hkskw0odn] {
    color: var(--gold);
    font-size: 1.2rem;
}
.ud-honor-header-desc[b-3hkskw0odn] {
    color: rgba(55, 71, 79, 0.53);
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 0;
}
.ud-honor-header-count[b-3hkskw0odn] {
    color: var(--gold-border, #C6960C);
    font-size: 0.82rem;
    margin: 0.35rem 0 0;
}
.ud-honor-header-count strong[b-3hkskw0odn] {
    font-size: 1rem;
}

/* ── Table header ── */
.ud-honor-table-header[b-3hkskw0odn] {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 0.75rem 2rem;
    border-bottom: 1px solid rgba(198, 150, 12, 0.09);
    background: #FDFBF5;
}
.ud-honor-th[b-3hkskw0odn] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(55, 71, 79, 0.47);
}
.ud-honor-th--right[b-3hkskw0odn] { text-align: right; }

/* ── Rows (with entrance animation) ── */
.ud-honor-row[b-3hkskw0odn] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 0.75rem 2rem;
    border-bottom: 1px solid rgba(236, 230, 216, 0.38);
    transition: background-color 0.2s;
    animation: ud-prog-fadeLeft-b-3hkskw0odn 0.2s ease both;
}
.ud-honor-row:last-of-type[b-3hkskw0odn] { border-bottom: none; }
.ud-honor-row--alt[b-3hkskw0odn] { background: #FDFBF5; }

.ud-honor-name-cell[b-3hkskw0odn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.ud-honor-star-badge[b-3hkskw0odn] {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(198, 150, 12, 0.07);
    border: 1.5px solid rgba(198, 150, 12, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ud-honor-star-badge i[b-3hkskw0odn] {
    font-size: 0.6rem;
    color: var(--gold);
}
.ud-honor-name[b-3hkskw0odn] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}
.ud-honor-prog[b-3hkskw0odn] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gold);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}
.ud-honor-prog i[b-3hkskw0odn] {
    font-size: 0.6rem;
}

/* ── Footer ── */
.ud-honor-footer[b-3hkskw0odn] {
    padding: 1rem 2rem;
    border-top: 1px solid rgba(198, 150, 12, 0.09);
    background: linear-gradient(135deg, var(--gold-light) 0%, #FFFDF5 100%);
    text-align: center;
}
.ud-honor-footer p[b-3hkskw0odn] {
    margin: 0;
    font-size: 0.625rem;
    color: rgba(55, 71, 79, 0.33);
    line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════
 * 4. ENTRANCE ANIMATIONS
 * ═══════════════════════════════════════════════════════════════ */
@keyframes ud-prog-fadeUp-b-3hkskw0odn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ud-prog-fadeLeft-b-3hkskw0odn {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}


/* ═══════════════════════════════════════════════════════════════
 * 5. RESPONSIVE
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .ud-prog-card[b-3hkskw0odn] {
        width: calc(33.333% - 1rem);
    }
}

@media (max-width: 767.98px) {
    .ud-prog-card[b-3hkskw0odn] {
        width: calc(50% - 0.75rem);
        height: 280px;
    }
    .ud-prog-card--compact[b-3hkskw0odn] {
        width: calc(50% - 8px);
        height: 240px;
    }
    .ud-prog-img-wrap[b-3hkskw0odn] {
        width: 8rem;
        height: 8rem;
    }
    .ud-prog-img-wrap--compact[b-3hkskw0odn] {
        width: 6rem;
        height: 6rem;
    }
    .ud-honor-header[b-3hkskw0odn],
    .ud-honor-table-header[b-3hkskw0odn],
    .ud-honor-row[b-3hkskw0odn],
    .ud-honor-footer[b-3hkskw0odn] {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .ud-honor-container[b-3hkskw0odn] {
        border-radius: 0.75rem;
    }
}

@media (max-width: 479.98px) {
    .ud-prog-card[b-3hkskw0odn] {
        width: 100%;
        max-width: 200px;
        height: 260px;
    }
    .ud-prog-card--compact[b-3hkskw0odn] {
        width: 100%;
        max-width: 180px;
        height: 230px;
    }
    .ud-prog-img-wrap[b-3hkskw0odn] {
        width: 7rem;
        height: 7rem;
    }
    .ud-prog-img-wrap--compact[b-3hkskw0odn] {
        width: 5.5rem;
        height: 5.5rem;
    }
    .ud-prog-icon-fallback i[b-3hkskw0odn] {
        font-size: 2.5rem;
    }
    .ud-prog-img-wrap--compact .ud-prog-icon-fallback i[b-3hkskw0odn] {
        font-size: 2rem;
    }
    .ud-honor-name[b-3hkskw0odn] {
        font-size: 0.8rem;
    }
    .ud-honor-prog[b-3hkskw0odn] {
        font-size: 0.7rem;
    }
}
/* /Pages/Unidades/SectionDivider.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
 * SectionDivider.razor.css — Separador con ícono centrado
 * ═══════════════════════════════════════════════════════════════ */

.sd-wrap[b-mw773pnsr5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;       /* gap-3 */
    margin-bottom: 0.75rem; /* mb-3 */
}

.sd-line[b-mw773pnsr5] {
    flex: 1;
    max-width: 4rem;    /* max-w-16 */
    height: 1px;        /* h-px */
    background-color: var(--border-soft, #ECE6D8);
}

.sd-icon[b-mw773pnsr5] {
    font-size: 1.25rem; /* w-5 h-5 equiv */
    line-height: 1;
}
/* /Pages/Unidades/Unidad.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * Unidad.razor.css — Vista "General" de la unidad
 * ──────────────────────────────────────────────────────────────────────
 * Contiene: SectionDivider, Carrusel, Lightbox, Familias, Oración + Patrono.
 * ══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
 * 0. CARRUSEL DE IMÁGENES — Responsive con JS Interop
 * ═══════════════════════════════════════════════════════════════ */

.ud-carousel-section[b-jg245jx2ew] {
    margin-bottom: 2rem;
    position: relative;
}

/* Contenedor principal (role="region") */
.ud-carousel-region[b-jg245jx2ew] {
    position: relative;
    border-radius: 1rem;
    outline: none;
}

.ud-carousel-region:focus-visible[b-jg245jx2ew] {
    box-shadow: 0 0 0 2px var(--unit-color, #5D4037);
}

/* Overflow container */
.ud-carousel-overflow[b-jg245jx2ew] {
    overflow: hidden;
    border-radius: 1rem;
}

/* Track — flex sin wrap, transición suave */
[b-jg245jx2ew] .ud-carousel-track {
    display: flex;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Slide individual */
.ud-carousel-slide[b-jg245jx2ew] {
    flex: 0 0 auto;
    border-radius: 1rem;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.ud-carousel-slide--single .ud-carousel-img[b-jg245jx2ew] {
    aspect-ratio: 3 / 2;
}

.ud-carousel-img[b-jg245jx2ew] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    display: block;
}

/* ── Flechas de navegación ── */
.ud-carousel-arrow[b-jg245jx2ew] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.90);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-soft, #ECE6D8);
    color: var(--text-primary, #37474F);
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
    display: none;            /* ocultas en mobile */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.ud-carousel-arrow:hover:not(:disabled)[b-jg245jx2ew] {
    background: #fff;
    transform: translateY(-50%) scale(1.05);
}

.ud-carousel-arrow:disabled[b-jg245jx2ew] {
    opacity: 0;
    pointer-events: none;
}

.ud-carousel-arrow--prev[b-jg245jx2ew] { left: -1.25rem; }
.ud-carousel-arrow--next[b-jg245jx2ew] { right: -1.25rem; }

@media (min-width: 640px) {
    .ud-carousel-arrow[b-jg245jx2ew] { display: flex; }
}

/* ── Dots de paginación ── */
.ud-carousel-dots[b-jg245jx2ew] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.ud-carousel-dot[b-jg245jx2ew] {
    height: 8px;
    width: 8px;
    border-radius: 9999px;
    border: none;
    background-color: rgba(55, 71, 79, 0.13);
    cursor: pointer;
    transition: all 0.3s;
    padding: 0;
}

.ud-carousel-dot--active[b-jg245jx2ew] {
    /* width y background-color se aplican via style inline */
}

/* ── SR-only ── */
.ud-sr-only[b-jg245jx2ew] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}


/* ═══════════════════════════════════════════════════════════════
 * LIGHTBOX — Fullscreen overlay
 * ═══════════════════════════════════════════════════════════════ */
.ud-lightbox-overlay[b-jg245jx2ew] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.90);
    backdrop-filter: blur(8px);
    cursor: pointer;
    animation: ud-lb-fade-in-b-jg245jx2ew 0.25s ease;
}

@keyframes ud-lb-fade-in-b-jg245jx2ew {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ud-lightbox-close[b-jg245jx2ew] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 10;
}

.ud-lightbox-close:hover[b-jg245jx2ew] { background: rgba(255,255,255,0.25); }

/* Flechas del lightbox */
.ud-lightbox-arrow[b-jg245jx2ew] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 1.1rem;
}

.ud-lightbox-arrow:hover[b-jg245jx2ew] { background: rgba(255,255,255,0.25); }
.ud-lightbox-arrow--prev[b-jg245jx2ew] { left: 0.75rem; }
.ud-lightbox-arrow--next[b-jg245jx2ew] { right: 0.75rem; }

@media (min-width: 640px) {
    .ud-lightbox-arrow--prev[b-jg245jx2ew] { left: 1.5rem; }
    .ud-lightbox-arrow--next[b-jg245jx2ew] { right: 1.5rem; }
}

/* Contenido del lightbox (imagen + caption) */
.ud-lightbox-content[b-jg245jx2ew] {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    max-height: 85vh;
    cursor: default;
    animation: ud-lb-img-in-b-jg245jx2ew 0.2s ease;
}

@keyframes ud-lb-img-in-b-jg245jx2ew {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

.ud-lightbox-img[b-jg245jx2ew] {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 0.5rem;
}

.ud-lightbox-caption[b-jg245jx2ew] {
    margin-top: 0.75rem;
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    padding: 0 1rem;
}

.ud-lightbox-counter[b-jg245jx2ew] {
    margin-left: 0.5rem;
    color: rgba(255,255,255,0.40);
    font-size: 12px;
}


/* ═══════════════════════════════════════════════════════════════
 * 1. TEAMS / PATRULLAS — Ribbon TeamCard (React-aligned)
 * ═══════════════════════════════════════════════════════════════ */
.ud-teams-section[b-jg245jx2ew] {
    padding: 2rem 0;
}

/* Header */
.ud-teams-header[b-jg245jx2ew] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.ud-teams-title[b-jg245jx2ew] {
    font-family: var(--font-serif, 'Cinzel', serif);
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.ud-teams-subtitle[b-jg245jx2ew] {
    font-size: 13px;
    color: rgba(55, 71, 79, 0.47);
    margin: 0;
}

/* Grid container — scroll horizontal en mobile, wrap en sm+ */
.ud-teams-grid[b-jg245jx2ew] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    padding: 0;
    margin: 0;
}

.ud-teams-grid[b-jg245jx2ew]::-webkit-scrollbar { display: none; }

@media (min-width: 640px) {
    .ud-teams-grid[b-jg245jx2ew] {
        overflow: visible;
        padding-bottom: 0;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.25rem;
    }
}

/* Card wrapper — sizing */
.ud-team-card-wrap[b-jg245jx2ew] {
    min-width: 140px;
    width: calc(50% - 0.5rem);
    flex-shrink: 1;
    display: flex;
}

@media (min-width: 640px) {
    .ud-team-card-wrap[b-jg245jx2ew] {
        width: calc(50% - 10px);
    }
}

@media (min-width: 768px) {
    .ud-team-card-wrap[b-jg245jx2ew] {
        width: calc(25% - 15px);
    }
}

@media (min-width: 1024px) {
    .ud-team-card-wrap:not(.ud-team-card-wrap--few)[b-jg245jx2ew] {
        width: calc(25% - 15px);
    }
}

/* ── Card shell ── */
.ud-team-card[b-jg245jx2ew] {
    position: relative;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    border: 1.5px solid var(--border-soft, #ECE6D8);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ud-team-card:hover[b-jg245jx2ew] {
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    transform: scale(1.02) translateY(-4px);
}

/* ── Zona del banderín SVG (reemplaza ribbon + badge) ── */
.ud-team-banderin-zona[b-jg245jx2ew] {
    position: relative;
    aspect-ratio: 1.4 / 1;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F5F3EF;
    overflow: hidden;
}

/* Tooltip de lema del banderín rover */
.ud-banderin-lema-tooltip[b-jg245jx2ew] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.875rem;
    background: rgba(30, 20, 10, 0.72);
    color: #f5f0e8;
    text-align: center;
    font-size: 0.725rem;
    font-style: italic;
    font-family: 'Bitter', Georgia, serif;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 1;
}

.ud-banderin-lema-tooltip i[b-jg245jx2ew] {
    font-size: 0.625rem;
    opacity: 0.6;
    font-style: normal;
    flex-shrink: 0;
}

.ud-team-card:hover .ud-banderin-lema-tooltip[b-jg245jx2ew] {
    opacity: 1;
}

.ud-team-banderin-inner[b-jg245jx2ew] {
    width: 85%;
    height: 85%;
}

[b-jg245jx2ew] .ud-team-banderin-inner .banderin-svg {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.3s ease;
}

.ud-team-card:hover[b-jg245jx2ew]  .ud-team-banderin-inner .banderin-svg {
    transform: scale(1.05);
}


/* ── Info block ── */
.ud-team-info[b-jg245jx2ew] {
    padding: 0.5rem 0.875rem 0.875rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
}

.ud-team-name[b-jg245jx2ew] {
    font-family: var(--font-serif, 'Cinzel', serif);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary, #37474F);
    margin: 0 0 0.25rem;
}

.ud-team-motto[b-jg245jx2ew] {
    font-size: 10px;
    font-style: italic;
    color: rgba(55, 71, 79, 0.53);
    line-height: 1.4;
    margin: 0 0 0.5rem;
}

/* Color swatches */
.ud-team-swatches[b-jg245jx2ew] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.ud-team-swatch[b-jg245jx2ew] {
    width: 1.5rem;
    height: 0.75rem;
    border-radius: 9999px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Encabezado de la sección "inactivas" */
.ud-teams-inactive-header[b-jg245jx2ew] {
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    text-align: center;
}

.ud-teams-inactive-title[b-jg245jx2ew] {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(55, 71, 79, 0.45);
}

/* ── Entrance animation via IntersectionObserver ── */
.ud-animate-in[b-jg245jx2ew] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    transition-delay: var(--card-delay, 0s);
}

.ud-animate-in.visible[b-jg245jx2ew] {
    opacity: 1;
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
 * 3. ORACIÓN + PATRONO
 * ═══════════════════════════════════════════════════════════════ */

.ud-faith-section[b-jg245jx2ew] {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
}

.ud-faith-header[b-jg245jx2ew] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.ud-faith-title[b-jg245jx2ew] {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 1.6rem;
    color: var(--text-primary, #37474F);
    margin: 0;
}

/* ── Patron card ── */
.ud-patron-card[b-jg245jx2ew] {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1.5px solid var(--border-soft, #ECE6D8);
    margin-bottom: 2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ud-patron-card:hover[b-jg245jx2ew] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.ud-patron-accent-bar[b-jg245jx2ew] {
    height: 0.375rem;
}

.ud-patron-body[b-jg245jx2ew] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 768px) {
    .ud-patron-body[b-jg245jx2ew] {
        flex-direction: row;
        align-items: stretch;
    }
}

/* Patron image */
.ud-patron-img-col[b-jg245jx2ew] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1.5rem 0;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .ud-patron-img-col[b-jg245jx2ew] {
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem;
        justify-content: flex-start;
    }
}

/* Tamaño base: pensado para dos imágenes lado a lado */
.ud-patron-img-frame[b-jg245jx2ew] {
    width: 9rem;
    height: 9rem;
    border-radius: 1rem;
    overflow: hidden;
    flex-shrink: 0;
    border: 4px solid;
}

/* Cuando solo hay una imagen (la otra se eliminó del DOM), recupera el tamaño original */
.ud-patron-img-frame:only-child[b-jg245jx2ew] {
    width: 10rem;
    height: 10rem;
}

@media (min-width: 768px) {
    .ud-patron-img-frame[b-jg245jx2ew] {
        width: 11rem;
        height: 11rem;
    }

    .ud-patron-img-frame:only-child[b-jg245jx2ew] {
        width: 12rem;
        height: 12rem;
    }
}

.ud-patron-img[b-jg245jx2ew] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Patron info */
.ud-patron-info[b-jg245jx2ew] {
    flex: 1;
    padding: 1rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    text-align: center;
}

@media (min-width: 768px) {
    .ud-patron-info[b-jg245jx2ew] {
        padding: 2rem 2rem 2rem 0;
        text-align: left;
    }
}

.ud-patron-name-row[b-jg245jx2ew] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .ud-patron-name-row[b-jg245jx2ew] {
        flex-direction: row;
        align-items: center;
    }
}

.ud-patron-icon-box[b-jg245jx2ew] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1.5px solid;
    font-size: 0.85rem;
}

.ud-patron-name[b-jg245jx2ew] {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 1.3rem;
    color: var(--text-primary, #37474F);
    margin: 0;
}

.ud-patron-pill[b-jg245jx2ew] {
    display: inline-block;
    align-self: center;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    border: 1px solid;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .ud-patron-pill[b-jg245jx2ew] {
        align-self: flex-start;
    }
}

.ud-patron-desc[b-jg245jx2ew] {
    flex: 1;
    color: rgba(55, 71, 79, 0.53);
    font-size: 0.9rem;
    line-height: 1.8;
    margin: 0;
    white-space: pre-line;
}

/* Patron quote (future field) */
.ud-patron-quote-sep[b-jg245jx2ew] {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-soft, #ECE6D8);
}

.ud-patron-quote[b-jg245jx2ew] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    max-width: 28rem;
}

.ud-patron-quote-text[b-jg245jx2ew] {
    font-style: italic;
    color: rgba(55, 71, 79, 0.47);
    font-size: 0.85rem;
    line-height: 1.7;
    margin: 0;
    text-align: left;
}

/* ── Prayer blockquote ── */
.ud-prayer[b-jg245jx2ew] {
    position: relative;
    border-radius: 0 0.75rem 0.75rem 0;
    padding: 1.5rem 2rem;
    background-color: #FDFCF9;
    border-left: 4px solid;
    margin: 0;
}

@media (min-width: 640px) {
    .ud-prayer[b-jg245jx2ew] {
        padding: 2rem 2.5rem;
    }
}

.ud-prayer-watermark[b-jg245jx2ew] {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    opacity: 0.04;
    pointer-events: none;
    font-size: 7rem;
    line-height: 1;
}

.ud-prayer-header[b-jg245jx2ew] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
}

.ud-prayer-icon-box[b-jg245jx2ew] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1.5px solid;
    font-size: 1.1rem;
}

.ud-prayer-title[b-jg245jx2ew] {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 1.1rem;
    color: var(--text-primary, #37474F);
    margin: 0;
}

.ud-prayer-label[b-jg245jx2ew] {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(55, 71, 79, 0.33);
}

.ud-prayer-text[b-jg245jx2ew] {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    white-space: pre-line;
    color: rgba(55, 71, 79, 0.6);
    font-size: 1rem;
    line-height: 2;
    margin: 0;
    position: relative;
    z-index: 1;
}


/* ═══════════════════════════════════════════════════════════════
 * 4. RESPONSIVE — MOBILE
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .ud-patron-card[b-jg245jx2ew] {
        border-radius: 0.75rem;
    }
    .ud-patron-img-frame[b-jg245jx2ew] {
        width: 8rem;
        height: 8rem;
    }
    .ud-prayer[b-jg245jx2ew] {
        padding: 1.25rem 1.5rem;
    }
    .ud-prayer-watermark[b-jg245jx2ew] {
        font-size: 4rem;
    }
}
/* /Pages/Unidades/_Layout.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
 * _Layout.razor.css — Estilos compartidos del Layout
 * ──────────────────────────────────────────────────────────────────────
 * REPARADO: Usa ::deep para que los estilos penetren a NavLink (<a>)
 * y a los componentes hijos (Index, Galeria) renderizados vía @Body.
 * ══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
 * 1. TOKENS Y BASE
 * ═══════════════════════════════════════════════════════════════ */
.ud-page[b-o77xecfml9] {
    /* ── Branch color (overridden inline from UnidadDto.ColorUnidad) ── */
    --unit-color: #804000;
    --unit-color-light: #a0622a;
    --unit-color-dark: #5c2e00;
    --accent-dark: #5c2e00;          /* Oscurecido del branchColor, inyectado inline */

    /* ── Palette — React constants (SLATE, CREAM, BORDER) ── */
    --text-primary: #37474F;         /* SLATE  */
    --text-muted: rgba(55, 71, 79, 0.6);
    --text-faint: rgba(55, 71, 79, 0.3);
    --bg-warm: #F8F5F0;              /* CREAM  */
    --bg-card: #ffffff;
    --border-soft: #ECE6D8;          /* BORDER */

    /* ── Gold / Honor palette ── */
    --gold: #C6960C;                 /* GOLD        */
    --gold-light: #FFF8E1;           /* GOLD_LIGHT  */
    --gold-border: #D4A017;          /* GOLD_BORDER */

    /* ── Typography ── */
    --font-serif: 'Cinzel', Georgia, Cambria, 'Times New Roman', serif;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    background-color: var(--bg-warm);
    min-height: 100vh;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

.ud-page *[b-o77xecfml9],
.ud-page *[b-o77xecfml9]::before,
.ud-page *[b-o77xecfml9]::after {
    box-sizing: border-box;
}

/* ── Global focus-visible (accesibilidad — anillo con color de la unidad) ── */
[b-o77xecfml9] button:focus-visible,
[b-o77xecfml9] a:focus-visible,
[b-o77xecfml9] [tabindex="0"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--unit-color), 0 0 0 4px rgba(255, 255, 255, 0.8);
    border-radius: inherit;
}


/* ═══════════════════════════════════════════════════════════════
 * 2. TIPOGRAFÍA (::deep para hijos: Index y Galeria)
 * ═══════════════════════════════════════════════════════════════ */
[b-o77xecfml9] .ud-serif {
    font-family: var(--font-serif);
}

[b-o77xecfml9] .ud-sans {
    font-family: var(--font-sans);
}

[b-o77xecfml9] .ud-heading {
    color: var(--text-primary);
    font-weight: 700;
}

[b-o77xecfml9] .ud-muted {
    color: rgba(55, 71, 79, 0.4);
}

[b-o77xecfml9] .ud-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-faint);
}

[b-o77xecfml9] .ud-accent {
    color: var(--unit-color);
}


/* ═══════════════════════════════════════════════════════════════
 * 3. LAYOUT — Contenedores y encabezados reutilizables
 * ═══════════════════════════════════════════════════════════════ */
[b-o77xecfml9] .ud-tab-body {
    padding: 4rem 1rem;
}

[b-o77xecfml9] .ud-section-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 2.25rem;
    margin-bottom: 2rem;
}

[b-o77xecfml9] .ud-section-heading--centered {
    justify-content: center;
    text-align: center;
}

[b-o77xecfml9] .ud-section-heading--compact {
    margin-bottom: 1rem;
}

[b-o77xecfml9] .ud-section-heading--md {
    font-size: 2rem;
}

[b-o77xecfml9] .ud-section-heading--honor {
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
}

[b-o77xecfml9] .ud-section-heading--sm {
    font-size: 1.5rem;
    gap: 0.5rem;
}

[b-o77xecfml9] .ud-section-intro {
    max-width: 48rem;
    margin-bottom: 2rem;
}

[b-o77xecfml9] .ud-section-desc {
    font-size: 1.15rem;
    color: var(--text-muted);
    line-height: 1.7;
}

[b-o77xecfml9] .ud-section-mb-lg {
    margin-bottom: 2rem;
}

.ud-page-content[b-o77xecfml9] {
    min-height: 40vh;
}


/* ═══════════════════════════════════════════════════════════════
 * 4. HERO BANNER — React-aligned (UnitDetailPage hero)
 *    Staggered CSS animations replace motion.div
 * ═══════════════════════════════════════════════════════════════ */
.ud-hero[b-o77xecfml9] {
    position: relative;
    padding: 2.5rem 1.5rem 2rem;
    text-align: center;
    overflow: hidden;
    background: var(--unit-color);
}

.ud-hero-overlay[b-o77xecfml9] {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.08) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 80%, rgba(0,0,0,0.15) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

.ud-hero-texture[b-o77xecfml9] {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
}

.ud-hero-inner[b-o77xecfml9] {
    position: relative;
    z-index: 2;
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ── Staggered entrance animation ── */
@keyframes ud-hero-fade-in-b-o77xecfml9 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ud-hero-anim[b-o77xecfml9] {
    opacity: 0;
    animation: ud-hero-fade-in-b-o77xecfml9 0.4s ease forwards;
}
.ud-hero-anim--1[b-o77xecfml9] { animation-delay: 0.05s; }
.ud-hero-anim--2[b-o77xecfml9] { animation-delay: 0.10s; }
.ud-hero-anim--3[b-o77xecfml9] { animation-delay: 0.18s; }
.ud-hero-anim--4[b-o77xecfml9] { animation-delay: 0.30s; }

/* ── Pill badge ── */
.ud-hero-pill[b-o77xecfml9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.375rem 1.25rem;
    border-radius: 9999px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1.25rem;
}

.ud-hero-pill i[b-o77xecfml9] {
    font-size: 0.7rem;
}

/* ── Title (Bitter serif, tamaño intermedio entre Noticias y el original) ── */
.ud-hero-title[b-o77xecfml9] {
    font-family: 'Bitter', Georgia, 'Times New Roman', serif;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin: 0 auto 1.25rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    max-width: 900px;
    letter-spacing: -0.02em;
}

.ud-hero-title-sub[b-o77xecfml9] {
    letter-spacing: 0.015em;
}

/* ── Metadata row (lema + patrono) ── */
.ud-hero-meta[b-o77xecfml9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.82rem;
}

.ud-hero-meta-item[b-o77xecfml9] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 500;
}

.ud-hero-meta-item i[b-o77xecfml9] {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.ud-hero-sep[b-o77xecfml9] {
    color: rgba(255, 255, 255, 0.3);
    display: none;
}

@media (min-width: 576px) {
    .ud-hero-sep[b-o77xecfml9] {
        display: inline;
    }
}

/* ── Historical banner (unidad inactiva) ── */
.ud-hero-historical[b-o77xecfml9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: #FFF3E0;
    border-bottom: 1px solid #FFE0B2;
}

.ud-hero-historical i[b-o77xecfml9] {
    color: #E65100;
    font-size: 0.9rem;
}

.ud-hero-historical span[b-o77xecfml9] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #BF360C;
}


/* ═══════════════════════════════════════════════════════════════
 * 5. STICKY TAB BAR — React-aligned (UnitDetailPage tabs)
 *    ::deep penetra al <a> generado por NavLink
 * ═══════════════════════════════════════════════════════════════ */
.ud-tab-nav[b-o77xecfml9] {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ud-tab-nav-inner[b-o77xecfml9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.ud-tab-nav-inner[b-o77xecfml9]::-webkit-scrollbar {
    display: none;
}

/* ── Tab button (::deep for NavLink <a>) ── */
[b-o77xecfml9] .ud-tab-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 1rem 0.75rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(55, 71, 79, 0.33);
    transition: color 0.2s, background-color 0.2s;
    white-space: nowrap;
    text-decoration: none !important;
    border-radius: 0.5rem;
}

@media (min-width: 400px) {
    [b-o77xecfml9] .ud-tab-btn {
        gap: 0.5rem;
        padding: 1rem;
    }
}

@media (min-width: 640px) {
    [b-o77xecfml9] .ud-tab-btn {
        padding: 1rem 1.25rem;
    }
}

/* ── Icon ── */
[b-o77xecfml9] .ud-tab-btn .ud-tab-icon {
    font-size: 1rem;
    color: rgba(55, 71, 79, 0.33);
    transition: color 0.2s;
    flex-shrink: 0;
}

/* ── Responsive labels: icon-only < 400px, shortLabel 400-639px, full 640px+ ── */
[b-o77xecfml9] .ud-tab-btn .ud-tab-short {
    display: none;
}

[b-o77xecfml9] .ud-tab-btn .ud-tab-full {
    display: none;
}

@media (min-width: 400px) {
    [b-o77xecfml9] .ud-tab-btn .ud-tab-short {
        display: inline;
    }
}

@media (min-width: 640px) {
    [b-o77xecfml9] .ud-tab-btn .ud-tab-short {
        display: none;
    }
    [b-o77xecfml9] .ud-tab-btn .ud-tab-full {
        display: inline;
    }
}

/* ── Hover ── */
[b-o77xecfml9] .ud-tab-btn:hover {
    color: var(--text-muted);
    text-decoration: none !important;
}

[b-o77xecfml9] .ud-tab-btn:hover .ud-tab-icon {
    color: var(--text-muted);
}

/* ── Focus visible ── */
[b-o77xecfml9] .ud-tab-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--unit-color), 0 0 0 4px rgba(255, 255, 255, 0.8);
    border-radius: 0.5rem;
}

/* ── Active tab (NavLink adds class "active") ── */
[b-o77xecfml9] .ud-tab-btn.active {
    color: var(--text-primary);
    background-color: rgba(var(--unit-color-rgb, 93, 64, 55), 0.06);
}

[b-o77xecfml9] .ud-tab-btn.active .ud-tab-icon {
    color: var(--unit-color);
}

/* ── Indicator bar (animated underline) ── */
[b-o77xecfml9] .ud-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--unit-color);
    border-radius: 3px 3px 0 0;
    animation: ud-tab-indicator-in-b-o77xecfml9 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes ud-tab-indicator-in-b-o77xecfml9 {
    from {
        transform: scaleX(0);
        opacity: 0;
    }
    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* ── Content area enter transition (replaces AnimatePresence) ── */
.ud-tab-content-enter[b-o77xecfml9] {
    animation: ud-tab-content-fade-in-b-o77xecfml9 0.35s ease;
}

@keyframes ud-tab-content-fade-in-b-o77xecfml9 {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ═══════════════════════════════════════════════════════════════
 * 6. LIGHTBOX (compartido: Index lo usa para imágenes y PDFs)
 * ═══════════════════════════════════════════════════════════════ */
[b-o77xecfml9] .ud-lb-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    animation: ud-fade-in-b-o77xecfml9 0.2s ease;
}

@keyframes ud-fade-in-b-o77xecfml9 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

[b-o77xecfml9] .ud-lb-close {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    font-size: 1.4rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    z-index: 10000;
}

[b-o77xecfml9] .ud-lb-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

[b-o77xecfml9] .ud-lb-content {
    max-width: 90vw;
    max-height: 90vh;
    cursor: default;
}

[b-o77xecfml9] .ud-lb-content img {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    object-fit: contain;
}

[b-o77xecfml9] .ud-lb-content--pdf {
    width: 90vw;
    height: 90vh;
    max-width: 1200px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

[b-o77xecfml9] .ud-lb-content--pdf iframe {
    border: none;
    width: 100%;
    height: 100%;
}


/* ═══════════════════════════════════════════════════════════════
 * 7. BOTÓN VOLVER
 * ═══════════════════════════════════════════════════════════════ */
.ud-footer[b-o77xecfml9] {
    padding: 2rem 1rem 3rem;
}

.ud-back[b-o77xecfml9] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.75rem 2rem;
    border-radius: 50rem;
    background: transparent;
    border: 2px solid var(--unit-color);
    color: var(--unit-color);
    transition: all 0.3s ease;
}

.ud-back:hover[b-o77xecfml9] {
    background: var(--unit-color);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(128, 64, 0, 0.2);
    text-decoration: none;
}


/* ═══════════════════════════════════════════════════════════════
 * 8. RESPONSIVE
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .ud-hero[b-o77xecfml9] {
        padding: 6rem 1rem 4rem;
    }

    .ud-hero-title[b-o77xecfml9] {
        font-size: clamp(2.2rem, 6vw, 3.5rem);
    }
}

@media (max-width: 767.98px) {
    .ud-hero[b-o77xecfml9] {
        padding: 4.5rem 1.5rem 3rem;
        text-align: center;
        background-position: center center;
    }

    .ud-hero-title[b-o77xecfml9] {
        font-size: 2.2rem;
    }

    .ud-hero-meta[b-o77xecfml9] {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.5rem;
        width: 100%;
        font-size: 0.95rem;
    }

    .ud-hero-meta span[b-o77xecfml9] {
        justify-content: center;
        width: 100%;
    }

    .ud-tab-nav[b-o77xecfml9] {
        top: 60px;   /* NavMenu es más bajo en móvil */
    }

    [b-o77xecfml9] .ud-tab-btn {
        padding: 1rem 1.5rem;
        font-size: 0.72rem;
        letter-spacing: 0.08em;
    }

    [b-o77xecfml9] .ud-tab-body {
        padding: 2.5rem 0.75rem;
    }

    .ud-footer[b-o77xecfml9] {
        padding: 1.5rem 1rem 2rem;
    }
}

@media (max-width: 575.98px) {
    .ud-tab-nav-inner[b-o77xecfml9] {
        justify-content: flex-start;
    }

    [b-o77xecfml9] .ud-tab-btn {
        padding: 0.85rem 1.25rem;
        font-size: 0.68rem;
        gap: 0.35rem;
    }
}


/* ═══════════════════════════════════════════════════════════════
 * 9. SKELETON LOADING
 * ═══════════════════════════════════════════════════════════════ */
.ud-hero--skeleton[b-o77xecfml9] {
    background: linear-gradient(145deg, #B0BEC5 0%, #90A4AE 100%);
}

.ud-skel[b-o77xecfml9] {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.08) 25%,
        rgba(255,255,255,0.18) 50%,
        rgba(255,255,255,0.08) 75%);
    background-size: 200% 100%;
    animation: ud-shimmer-b-o77xecfml9 1.5s ease-in-out infinite;
    border-radius: 8px;
}

.ud-skel--pill[b-o77xecfml9] {
    border-radius: 9999px;
}

.ud-skel--title[b-o77xecfml9] {
    border-radius: 12px;
}

@keyframes ud-shimmer-b-o77xecfml9 {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ═══════════════════════════════════════════════════════════════
 * 10. HERO — Separador de meta ("|")
 * ═══════════════════════════════════════════════════════════════ */
.ud-hero-sep[b-o77xecfml9] {
    color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 767.98px) {
    .ud-hero-sep[b-o77xecfml9] {
        display: none;
    }
}


/* ═══════════════════════════════════════════════════════════════
 * 11. PANTALLA 404 — UNIDAD NO ENCONTRADA
 * ═══════════════════════════════════════════════════════════════ */
.ud-404[b-o77xecfml9] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F8F5F0; /* CREAM */
    padding: 2rem;
    animation: ud-404-fadeIn-b-o77xecfml9 0.45s ease both;
}

.ud-404-inner[b-o77xecfml9] {
    text-align: center;
    max-width: 28rem;
}

.ud-404-icon[b-o77xecfml9] {
    font-size: 4rem;
    color: rgba(55, 71, 79, 0.13); /* SLATE muy transparente (#37474F22) */
    margin-bottom: 1rem;
    display: block;
}

.ud-404-title[b-o77xecfml9] {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #37474F;
    margin: 0 0 0.5rem;
}

.ud-404-msg[b-o77xecfml9] {
    font-size: 0.92rem;
    color: rgba(55, 71, 79, 0.53);
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.ud-404-btn[b-o77xecfml9] {
    display: inline-block;
    padding: 0.625rem 1.5rem;
    background-color: #2E7D32;
    color: #fff;
    font-weight: 700;
    font-size: 0.88rem;
    border-radius: 0.75rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.ud-404-btn:hover[b-o77xecfml9] {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(46, 125, 50, 0.3);
    color: #fff;
}

.ud-404-btn:active[b-o77xecfml9] {
    transform: scale(0.97);
}

@keyframes ud-404-fadeIn-b-o77xecfml9 {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Shared/Admin/AdminBuscador.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   AdminBuscador.razor.css — Campo de búsqueda compartido para paneles admin
   Prefijo: adm- (admin shared)
   ══════════════════════════════════════════════════════════════ */

/* Wrapper: flex para alinear ícono de lupa, input y botón en una fila */
.adm-search-wrap[b-8mqh4nqlxp] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

@media (min-width: 640px) {
    .adm-search-wrap[b-8mqh4nqlxp] {
        width: 21rem;
    }
}

/* Ícono de lupa sobrepuesto al input */
.adm-search-icon[b-8mqh4nqlxp] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

/* Input principal */
.adm-search-input[b-8mqh4nqlxp] {
    flex: 1;
    min-width: 0;
    padding: 0.625rem 1rem 0.625rem 2.25rem;
    border: 1px solid #E0E0E0;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    background: var(--background);
    color: var(--text);
    transition: border-color 0.2s;
    outline: none;
}

.adm-search-input:focus[b-8mqh4nqlxp] {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.12);
}

/* Botón "Buscar": verde institucional, mismo alto que el input */
.adm-search-btn[b-8mqh4nqlxp] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0 0.875rem;
    height: 36px;
    background: var(--primary, #2E7D32);
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.84rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.adm-search-btn:hover[b-8mqh4nqlxp]  { background: #1B5E20; }
.adm-search-btn:active[b-8mqh4nqlxp] { transform: scale(0.97); }

/* Botón X de limpiar */
.adm-search-clear[b-8mqh4nqlxp] {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0 0.25rem;
    cursor: pointer;
    color: rgba(55,71,79,0.45);
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    transition: color 0.15s;
    line-height: 1;
}

.adm-search-clear:hover[b-8mqh4nqlxp] { color: #37474F; }
/* /Shared/Admin/AdminEstadoVacio.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   AdminEstadoVacio.razor.css — Estado vacío compartido para paneles admin
   Prefijo: adm- (admin shared)
   ══════════════════════════════════════════════════════════════ */

.adm-empty[b-zf0sjvw4m4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 1rem;
    text-align: center;
}

.adm-empty-icon[b-zf0sjvw4m4] {
    font-size: 2.5rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.adm-empty-title[b-zf0sjvw4m4] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.35rem;
}

.adm-empty-sub[b-zf0sjvw4m4] {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
}
/* /Shared/Admin/AdminTabsBar.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   AdminTabsBar.razor.css — Barra de pestañas compartida para paneles admin
   Prefijo: adm- (admin shared)
   ══════════════════════════════════════════════════════════════ */

/* Contenedor de la barra: flex con fondo gris claro */
.adm-tabs-bar[b-ojmyc3yfno] {
    display: flex;
    gap: 0.375rem;
    background: #ECEFF1;
    border-radius: 0.75rem;
    padding: 0.25rem;
    flex-wrap: wrap;
}

/* Base de cada pestaña */
.adm-tab[b-ojmyc3yfno] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.adm-tab:hover:not(.adm-tab-active)[b-ojmyc3yfno] {
    background: rgba(255, 255, 255, 0.7);
    color: var(--text);
}

/* Pestaña activa: fondo blanco, sombra sutil */
.adm-tab-active[b-ojmyc3yfno] {
    background: #ffffff;
    color: var(--text, #37474F);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ── Píldoras de conteo ──────────────────────────────── */

/* Base: tamaño, forma y espaciado */
.adm-tab-pill[b-ojmyc3yfno] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.35rem;
    border-radius: 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
}

/* Colores por estado de mensaje/comentario */
.adm-tab-pill-pendiente[b-ojmyc3yfno]  { background: #FFF9C4; color: #F57F17; }
.adm-tab-pill-aprobado[b-ojmyc3yfno]   { background: #E8F5E9; color: #2E7D32; }
.adm-tab-pill-rechazado[b-ojmyc3yfno]  { background: #FFEBEE; color: #B71C1C; }
.adm-tab-pill-aceptado[b-ojmyc3yfno]   { background: #E8F5E9; color: #2E7D32; }

/* Colores por estado de noticia */
.adm-tab-pill-borrador[b-ojmyc3yfno]   { background: #E3F2FD; color: #1565C0; }
.adm-tab-pill-autorizada[b-ojmyc3yfno] { background: #E8F5E9; color: #2E7D32; }
.adm-tab-pill-eliminada[b-ojmyc3yfno]  { background: #FFEBEE; color: #B71C1C; }

/* Colores por estado de álbum (masculino) */
.adm-tab-pill-autorizado[b-ojmyc3yfno] { background: #E8F5E9; color: #2E7D32; }
.adm-tab-pill-eliminado[b-ojmyc3yfno]  { background: #FFEBEE; color: #B71C1C; }

/* Colores por rol de usuario */
.adm-tab-pill-todos[b-ojmyc3yfno]         { background: #ECEFF1; color: #546E7A; }
.adm-tab-pill-scout[b-ojmyc3yfno]         { background: #E8F5E9; color: #2E7D32; }
.adm-tab-pill-dirigente[b-ojmyc3yfno]     { background: #E3F2FD; color: #1565C0; }
.adm-tab-pill-hormiga[b-ojmyc3yfno]       { background: #FFF8E1; color: #F57F17; }
.adm-tab-pill-administrador[b-ojmyc3yfno] { background: #FCE4EC; color: #C62828; }
/* /Shared/GlobalBreadcrumb.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
 * Shared/Breadcrumb.razor.css — Breadcrumb global
 * ═══════════════════════════════════════════════════════════════════ */

.global-breadcrumb[b-xiyeb4pirw] {
    background: #FAFAF8;
    border-bottom: 1px solid #E8E0D0;
}

.global-breadcrumb__inner[b-xiyeb4pirw] {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    /* El padding horizontal lo maneja Bootstrap .container,
       así el contenido queda alineado con el logo del navbar. */
}

/* Links */
.global-breadcrumb__link[b-xiyeb4pirw] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #5D4037;
    text-decoration: none;
    transition: color 0.15s ease;
}

.global-breadcrumb__link:hover[b-xiyeb4pirw] {
    color: #2E7D32;
    text-decoration: underline;
}

.global-breadcrumb__link:focus-visible[b-xiyeb4pirw] {
    outline: 2px solid #2E7D32;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Home icon */
.global-breadcrumb__home[b-xiyeb4pirw] {
    font-size: 0.75rem;
    color: #8D6E63;
}

.global-breadcrumb__link:hover .global-breadcrumb__home[b-xiyeb4pirw] {
    color: #2E7D32;
}

/* Separator */
.global-breadcrumb__sep[b-xiyeb4pirw] {
    font-size: 0.5rem;
    color: #A1887F;
    flex-shrink: 0;
}

/* Current page */
.global-breadcrumb__current[b-xiyeb4pirw] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #2E7D32;
}
/* /Shared/MainFooter.razor.rz.scp.css */
/* Footer moderno estilo Scout */

.scout-footer[b-zv6vy3mss0] {
    background-color: var(--scout-green-dark);
    color: var(--scout-bg-primary);
    margin-top: 0;
    position: relative;
    z-index: 1;
}

.footer-section[b-zv6vy3mss0] {
    margin-bottom: 2rem;
}

/* Logo */
.footer-logo-icon[b-zv6vy3mss0] {
    width: 40px;
    height: 40px;
    background-color: var(--scout-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-logo-icon i[b-zv6vy3mss0] {
    color: var(--scout-green-dark);
    font-size: 1.25rem;
}

.footer-logo-text[b-zv6vy3mss0] {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
}

.footer-bio[b-zv6vy3mss0] {
    color: rgba(248, 245, 240, 0.6);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Social Links */
.social-links[b-zv6vy3mss0] {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.social-link[b-zv6vy3mss0] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--scout-bg-primary);
    transition: all var(--transition-fast);
    text-decoration: none;
}

.social-link:hover[b-zv6vy3mss0] {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--scout-white);
}

/* Footer Title */
.footer-title[b-zv6vy3mss0] {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--scout-white);
}

/* Footer Links */
.footer-links[b-zv6vy3mss0] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li[b-zv6vy3mss0] {
    margin-bottom: 1rem;
}

.footer-links a[b-zv6vy3mss0] {
    color: rgba(248, 245, 240, 0.6);
    text-decoration: none;
    transition: color var(--transition-fast);
    font-size: 0.95rem;
}

.footer-links a:hover[b-zv6vy3mss0] {
    color: var(--scout-white);
}

/* Footer Contact */
.footer-contact[b-zv6vy3mss0] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li[b-zv6vy3mss0] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: rgba(248, 245, 240, 0.6);
    font-size: 0.95rem;
}

.footer-contact i[b-zv6vy3mss0] {
    font-size: 1.125rem;
    margin-top: 0.125rem;
}

.whatsapp-link[b-zv6vy3mss0] {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: color 0.3s ease;
}

.whatsapp-link:hover[b-zv6vy3mss0] {
    color: var(--scout-white);
}

.text-accent[b-zv6vy3mss0] {
    color: var(--scout-gold-primary) !important;
}

/* Newsletter */
.footer-newsletter-text[b-zv6vy3mss0] {
    color: rgba(248, 245, 240, 0.6);
    font-family: var(--font-body);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.newsletter-form[b-zv6vy3mss0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.newsletter-input[b-zv6vy3mss0] {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: 0.75rem 1rem;
    width: 100%;
    color: var(--scout-white);
    font-size: 0.95rem;
    transition: all var(--transition-fast);
}

.newsletter-input[b-zv6vy3mss0]::placeholder {
    color: rgba(248, 245, 240, 0.4);
}

.newsletter-input:focus[b-zv6vy3mss0] {
    outline: none;
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.08);
}

.newsletter-button[b-zv6vy3mss0] {
    background-color: var(--scout-green-primary);
    color: var(--scout-white);
    border: none;
    border-radius: var(--radius-lg);
    padding: 0.75rem 1.5rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.newsletter-button:hover[b-zv6vy3mss0] {
    background-color: var(--scout-green-light);
    box-shadow: var(--shadow-md);
}

/* Contador de caracteres del campo Mensaje en el footer */
.ft-char-counter[b-zv6vy3mss0] {
    display: block;
    text-align: right;
    font-size: 0.72rem;
    color: rgba(248, 245, 240, 0.45);
    margin-top: -0.25rem;
}

.ft-char-near-limit[b-zv6vy3mss0] {
    color: #EF9A9A;
}

/* Honeypot anti-bots: invisible para humanos, visible para bots */
.ft-site-field[b-zv6vy3mss0] {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    height: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Footer Bottom */
.footer-bottom[b-zv6vy3mss0] {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.footer-bottom p[b-zv6vy3mss0] {
    color: rgba(248, 245, 240, 0.3);
    font-size: 0.875rem;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .footer-section[b-zv6vy3mss0] {
        margin-bottom: 0.5rem;
        text-align: center;
    }

    .footer-logo-text[b-zv6vy3mss0] {
        text-align: center;
        font-size: 1.25rem;
    }

    .footer-bio[b-zv6vy3mss0] {
        text-align: center;
    }

    .footer-title[b-zv6vy3mss0] {
        margin-bottom: 0.75rem;
        font-size: 1.1rem;
    }

    .footer-links li[b-zv6vy3mss0] {
        margin-bottom: 0.5rem;
    }

    .footer-contact li[b-zv6vy3mss0] {
        margin-bottom: 0.5rem;
        justify-content: center;
    }

    .social-links[b-zv6vy3mss0] {
        justify-content: center;
        margin-top: 1rem;
    }

    .newsletter-form[b-zv6vy3mss0] {
        gap: 0.4rem;
    }

    .footer-newsletter-text[b-zv6vy3mss0] {
        margin-bottom: 0.5rem;
    }

    [b-zv6vy3mss0] .d-flex.align-items-center.gap-2.mb-4 {
        justify-content: center;
    }
}
/* /Shared/MainLayout.razor.rz.scp.css */
/* MainLayout - Diseño moderno Scout */

/* 
   Configuración del contenedor principal <main>
   Se asegura de empujar el footer hacia abajo si hay poco contenido,
   pero NO debe forzar overflow hidden/scroll para evitar barras dobles.
*/
main[b-c5fwgntrmi] {
    min-height: calc(100vh - 80px);
    background-color: var(--scout-bg-primary);
    position: relative;
    /* z-index: auto (default) — NO crear stacking context para que los
       modales con position:fixed puedan superar al footer en z-order. */
    display: block;
    /* Aseguramos que el contenido fluya naturalmente */
    overflow: visible;
}

.body-content[b-c5fwgntrmi] {
    padding: 0;
    margin: 0;
}

/* Asegurar que no hay espacios extra */
[b-c5fwgntrmi] .container {
    max-width: 100%;
    padding: 0;
}

/* Selection styling */
[b-c5fwgntrmi]::selection {
    background-color: rgba(46, 125, 50, 0.2);
    color: var(--scout-green-primary);
}

/* Focus styles accesibles */
*:focus-visible[b-c5fwgntrmi] {
    outline: 2px solid var(--scout-green-primary);
    outline-offset: 2px;
}

/* Loading states */
.loading[b-c5fwgntrmi] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
}

.loading[b-c5fwgntrmi]::after {
    content: "";
    width: 50px;
    height: 50px;
    border: 4px solid var(--scout-bg-secondary);
    border-top-color: var(--scout-green-primary);
    border-radius: 50%;
    animation: spin-b-c5fwgntrmi 1s linear infinite;
}

@keyframes spin-b-c5fwgntrmi {
    to { transform: rotate(360deg); }
}
/* /Shared/NavMenu.razor.rz.scp.css */
/* ==========================================================================
   NavMenu.razor.css — Diseño Scout Unificado
   ==========================================================================
   He concentrado TODOS los estilos del navbar en este único archivo.
   La estrategia de animación de subrayado se aplica sobre ::before del padre
   (.custom-nav-item::before), evitando conflictos con el ::after que Bootstrap
   reserva exclusivamente para el caret (▾) en los .dropdown-toggle.

   NOTA SOBRE EL SCOPING DE BLAZOR:
   Blazor aísla los estilos de cada componente agregando un atributo único
   (por ejemplo, b-3xxt5g7k2d) a los elementos HTML del componente.
   Luego transforma los selectores CSS para incluir ese atributo.
   Por ello, los selectores deben ser simples y sin calificadores de elemento
   (a.clase, span.clase) para que el scoping funcione correctamente.
   ========================================================================== */


/* ── 0. VARIABLES GLOBALES ────────────────────────────── */
/*
   He centralizado la paleta de colores en variables CSS (:root).
   Si necesito cambiar el verde scout o el rojo, solo lo modifico aquí
   y el cambio se propaga a todos los elementos que usen estas variables.
*/
:root[b-7ljhf4g6pb] {
    --scout-green-primary: #2E7D32; /* Verde principal: botones, íconos */
    --scout-green-dark: #1B5E20;    /* Verde oscuro: estado hover de botones */
    --scout-red: #D32F2F;           /* Rojo scout: subrayado activo, logout */
    --scout-text-gray: #1F2937;     /* Gris oscuro: texto base del navbar */
}

/* ── 1. NAVBAR CONTENEDOR ─────────────────────────────── */
/*
   position: sticky + top: 0 hace que el navbar permanezca visible en la
   parte superior mientras el usuario hace scroll.
   z-index: 50 lo ubica por encima del contenido pero por debajo de los
   modales (que generalmente usan z-index 1000+).
*/
.navbar[b-7ljhf4g6pb] {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: #ffffff !important;
    /* !important aquí porque Bootstrap aplica background a .navbar-light con
       especificidad que puede ganar en ciertos contextos de cascada. */
    border-bottom: 1px solid #E5E7EB;
    height: 68px;
    min-height: 68px;
    padding-top: 0 !important;              /* Elimino el padding vertical predeterminado */
    padding-bottom: 0 !important;           /* de Bootstrap que aumentaba la altura. */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

/* Propagar height a .container para que height:100% resuelva en toda la cadena */
.navbar > .container[b-7ljhf4g6pb] {
    height: 100%;
}


/* ── 2. LOGO ──────────────────────────────────────────── */
/*
   He usado !important en font-family y color porque Bootstrap aplica sus
   propios estilos a .navbar-brand con especificidad suficiente para ganar
   sin él. El serif aquí es intencional: el nombre del grupo escucha a una
   tipografía editorial/institucional, no a la sans-serif de la UI.
*/
.navbar-brand[b-7ljhf4g6pb] {
    font-family: var(--font-serif), 'Bitter', 'Georgia', serif !important;
    font-size: 1.5rem;
    font-weight: 700;
    color: #37474F !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s ease;
    text-decoration: none !important;
    cursor: pointer;
}

.navbar-brand:hover[b-7ljhf4g6pb] {
    color: var(--scout-green-primary) !important;
}

.navbar-brand:hover .navbar-brand-icon[b-7ljhf4g6pb] {
    border-color: rgba(46, 125, 50, 0.55);
    box-shadow: 0 3px 10px rgba(46, 125, 50, 0.18);
    transform: scale(1.07);
}

.navbar-brand-icon[b-7ljhf4g6pb] {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 10px !important;
    background-color: #ffffff;
    border: 1.5px solid rgba(46, 125, 50, 0.25);
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
    padding: 4px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.navbar-brand-icon-img[b-7ljhf4g6pb] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ★ TAREA 1: Texto corto "GSSP N°91" visible solo en móvil (< 576px).
   La clase .d-flex.d-sm-none de Bootstrap ya lo oculta en escritorio.
   Aquí solo defino la tipografía y el layout interno del texto. */
.navbar-brand-mobile-text[b-7ljhf4g6pb] {
    display: flex;
    flex-direction: column; /* Nombre en línea 1, subtítulo en línea 2 */
    line-height: 1.2;
}

.brand-name-short[b-7ljhf4g6pb] {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #37474F;
    letter-spacing: -0.01em; /* Apretado leve: mejora legibilidad en texto corto */
    white-space: nowrap;     /* Evita que el nombre se parta en dos líneas */
}

/* ── 2B. ROTACIÓN CHEVRON ────────────────────────────── */
/*
   El chevron (▾) rota 180° para indicar que el dropdown está abierto.
   Uso transition: transform para que la rotación sea suave.
   La versión de escritorio (hover) y el estado active-parent están en
   nav-active-overrides.css (CSS global, sin scoping de Blazor) porque
   los necesito para selectores que cruzan componentes.
*/
/* NOTA: hover y active-parent manejados por nav-active-overrides.css (global) */

.fa-chevron-down[b-7ljhf4g6pb] {
    transition: transform 0.2s ease;
    color: var(--scout-text-gray);
}

/* Cuando BlazorBootstrap agrega la clase .show al dropdown de usuario,
   roto el chevron y lo pinto de rojo para reforzar el estado abierto. */
.nav-item.dropdown .show .fa-chevron-down[b-7ljhf4g6pb] {
    transform: rotate(180deg);
    color: var(--scout-red);
}


/* ── 3. CLASE UNIFICADA: .custom-nav-item ─────────────── */
/*
   He creado .custom-nav-item como clase única para TODOS los enlaces del
   navbar: tanto <a> (NavLink de Blazor) como <span> (dropdown-toggle nativo).
   Esto elimina la necesidad de mantener dos conjuntos de reglas.

   Por qué TODO tiene !important:
   Bootstrap tiene reglas de alta especificidad sobre .nav-link, .navbar-nav .nav-link,
   .navbar-expand-lg .navbar-nav .nav-link etc. Para ganarles sin escribir
   selectores larguísimos, uso !important como estrategia deliberada.

   position: relative es VITAL: es el contexto de posicionamiento para el
   pseudo-elemento ::before que forma el subrayado animado.

   height: 100% asegura que el área clickeable llene todo el alto del navbar
   (68px), haciendo el blanco de clic más amigable.

   -webkit-text-size-adjust: iOS Safari puede agrandar automáticamente el
   texto en móvil. 100% desactiva ese comportamiento.
*/

/* FIX Bug 1: Eliminamos los calificadores de elemento (a., span.)
   para que la especificidad sea 0-2-0 (con Blazor scoping),
   igual que las reglas móviles. Así el móvil gana por orden. */
.custom-nav-item[b-7ljhf4g6pb] {
    /* Reset TOTAL: iguala <a> y <span> sin importar Bootstrap o UA defaults */
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    text-decoration: none !important;
    padding: 0 0.875rem !important;    /* px-3.5 = 14px — matches React DesktopLink (py viene de height:100% + align-items:center) */
    margin: 0 !important;              /* Kill cualquier margin de Bootstrap/UA */
    border: none !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem;                      /* espacio entre nav-text y chevron */
    position: relative !important;     /* Contexto para ::before underline */
    height: 100%;
    box-sizing: border-box !important;
    cursor: pointer;
    transition: color 0.2s ease;
    line-height: normal !important;
    vertical-align: middle !important;
    -webkit-text-size-adjust: 100%;    /* Evita que iOS agrande el texto automáticamente */
}

/* Normalizar FontAwesome fa-2xs dentro de nav items:
   FA aplica line-height: 0.1em que rompe la alineación baseline en flex.
   Forzamos line-height: 1 para que no afecte la altura del contenedor. */
.custom-nav-item .fa-chevron-down[b-7ljhf4g6pb] {
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* FIX Bug 2: .navbar-collapse debe estirarse verticalmente dentro del contenedor
   flex para que height: 100% en .custom-nav-item resuelva correctamente.
   align-self: stretch lo logra cuando el padre es display:flex (que es el
   .container con flex-direction:row por defecto en Bootstrap). */
.navbar-collapse[b-7ljhf4g6pb] {
    align-self: stretch;     /* Estira dentro del .container flex padre */
    display: flex !important;
    align-items: center;
}

/* Alineación Vertical de Contenedores */
.navbar-nav[b-7ljhf4g6pb] {
    display: flex;
    align-items: center;
    gap: 4px;          /* gap-1 = 4px — matches React hidden lg:flex items-center gap-1 */
    height: 100%;
}

.nav-item[b-7ljhf4g6pb] {
    position: relative; /* VITAL: ancla .dropdown-panel al botón, no al viewport */
    display: flex;
    align-items: center;
    height: 100%;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* ── 4. ANIMACIÓN DE SUBRAYADO EN .nav-text::after ────── */
/*
   He elegido poner la tipografía en .nav-text (el <span> hijo) en lugar
   del padre .custom-nav-item. Esto es intencional: el padre es un
   .dropdown-toggle cuyo ::after está reservado por Bootstrap para el caret.
   Si ponía el subrayado en el ::after del padre, colisionaba con Bootstrap.

   El subrayado en sí está implementado en .custom-nav-item::before (ver abajo),
   pero la TIPOGRAFÍA vive aquí porque aplica igual sin importar si el padre
   es <a> (NavLink) o <span> (dropdown nativo).
*/

/* ── Tipografía ÚNICA en .nav-text ────────────────────── */
/*
   Los tres selectores (con y sin calificadores de elemento a./span.)
   garantizan cobertura máxima sin depender del scoping de Blazor.
*/
.custom-nav-item .nav-text[b-7ljhf4g6pb],
a.custom-nav-item .nav-text[b-7ljhf4g6pb],
span.custom-nav-item .nav-text[b-7ljhf4g6pb],
.nav-text[b-7ljhf4g6pb] {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;        /* Figma: 13px exactos */
    font-weight: 600 !important;       /* Figma: semibold */
    color: #1F2937 !important;         /* React: C.text = #1F2937 */
    letter-spacing: normal !important;
    line-height: 1.5 !important;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;      /* Transición suave al hacer hover */
}

/* Color del texto en hover y estado activo navlink nativo de Blazor.
   NOTA: active-parent y dropdown-hover-open viven en nav-active-overrides.css
   (archivo CSS global, sin scoping) porque se necesitan en contextos cruzados. */
.nav-item:hover .nav-text[b-7ljhf4g6pb],
.custom-nav-item:hover .nav-text[b-7ljhf4g6pb],
.nav-link.active .nav-text[b-7ljhf4g6pb] {
    color: var(--scout-red) !important;
}

/* ★ TAREA 3 — active-parent SCOPED (C# lo inyecta en render tree → SÍ recibe [b-xxxx])
   Cuando el usuario está en una ruta dentro del dropdown (ej: /nosotros/historia),
   C# agrega la clase active-parent al <li> en tiempo de render.
   Blazor le asigna el atributo de scoping [b-xxxx], por lo que este selector
   coincide correctamente.
   Si en cambio usara JS para agregar active-parent post-render, el elemento
   modificado por JS NO recibiría el atributo, y este selector no matchearía. */
.nav-item.active-parent > .custom-nav-item .nav-text[b-7ljhf4g6pb] {
    color: var(--scout-red) !important;
}
.nav-item.active-parent > .custom-nav-item .fa-chevron-down[b-7ljhf4g6pb] {
    color: var(--scout-red) !important;
}
.nav-item.active-parent > .custom-nav-item[b-7ljhf4g6pb]::before {
    transform: scaleX(1) !important; /* Disparo manual del subrayado */
}

/* ── UNDERLINE: ::before en el padre .custom-nav-item ─── */
/*
   Por qué ::before y no ::after:
   Bootstrap reserva el ::after de .dropdown-toggle para el caret (▾).
   Si usara ::after aquí, colisionaría con ese comportamiento.
   Uso ::before, que está libre.

   transform: scaleX(0) oculta la línea al inicio (anchura 0%).
   Al hacer hover o estar activo, scaleX(1) la muestra (100%).
   transform-origin: center asegura que la expansión se haga desde el centro.
   pointer-events: none es obligatorio: si el ::before interceptara clics,
   el enlace no respondería al usuario.
*/

/* FIX Bug 3: Sin calificadores de elemento para evitar selectores que
   no matcheen después del scoping de Blazor. */
.custom-nav-item[b-7ljhf4g6pb]::before {
    content: '' !important;
    position: absolute !important;
    bottom: 12px !important;                 /* Offset para quedar cerca del texto (navbar full-height) */
    left: 0.5rem !important;                 /* React: left-2 = 8px */
    right: 0.5rem !important;                /* React: right-2 = 8px */
    height: 3px !important;                  /* React: h-[3px] */
    background-color: rgba(211, 47, 47, 0.4) !important; /* Hover: #D32F2F 40% — semitransparente */
    border-radius: 9999px !important;        /* Extremos redondeados */
    transform: scaleX(0) !important;         /* Oculto por defecto */
    transform-origin: center !important;     /* Crece desde el centro */
    transition: transform 0.22s ease !important;
    pointer-events: none !important;         /* No interfiere con clics */
    z-index: 1;
}

/* Disparo del subrayado: hover o NavLink activo nativo de Blazor.
   active-parent y dropdown-hover-open están en nav-active-overrides.css. */
.nav-item:hover > .custom-nav-item[b-7ljhf4g6pb]::before,
.custom-nav-item.active[b-7ljhf4g6pb]::before,
.nav-link.active[b-7ljhf4g6pb]::before {
    transform: scaleX(1) !important;         /* Mostrar línea completa */
    background-color: var(--scout-red) !important; /* Activo: rojo sólido */
}


/* ── 5. CARET DE BOOTSTRAP: Ocultar en .dropdown-toggle ─ */
/*
   Bootstrap 5 genera automáticamente un carácter caret (▾) usando el
   pseudo-elemento ::after en todos los elementos con .dropdown-toggle.
   Como ya tengo el ícono fa-chevron-down propio dentro del <span>,
   necesito ocultar ese caret para evitar duplicados visuales.
   display: none !important es la forma más directa de lograrlo.
*/
.custom-nav-item.dropdown-toggle[b-7ljhf4g6pb]::after {
    display: none !important;
}


/* ── 6. DROPDOWN PANEL (Menú Desplegable) ─────────────── */
/*
   He elegido opacity + visibility en lugar de display: none/block para
   controlar la visibilidad del panel. ¿Por qué? Porque las transiciones CSS
   (como opacity 0.18s ease) NO funcionan con display: none. El elemento debe
   estar en el DOM y ser renderable (display: block) para que la transición
   pueda calcularse.

   opacity: 0 + visibility: hidden = panel invisible, no interactuable.
   opacity: 1 + visibility: visible = panel visible, interactuable.
   pointer-events: none evita que el cursor interactúe con el panel mientras
   está invisible (evita clics accidentales).

   La apertura (display:block + hover) está controlada por JS (navMenuInterop)
   con un delay de 350ms en el mouseenter/mouseleave para evitar cierres
   accidentales al mover el cursor. Los estilos de apertura están en
   nav-active-overrides.css (CSS global sin scoping de Blazor).
*/
.dropdown-panel[b-7ljhf4g6pb] {
    border: 1px solid #E5E7EB !important;
    border-top: 2px solid var(--scout-red) !important; /* Línea roja superior: identidad scout */
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    background-color: #fff !important;
    padding: 0 !important;
    width: 380px !important;           /* React: w-[380px] */
    min-width: 380px !important;

    /* Posicionamiento equivalente al React: absolute left-1/2 -translate-x-1/2 top-full mt-2.5 */
    position: absolute;
    top: 100%;                                   /* top-full: debajo del padre */
    left: 50%;
    margin-top: 0.625rem !important;             /* mt-2.5 = 10px de separación */
    transform: translateX(-50%) translateY(4px); /* Centrado horizontal + offset vertical para animación */

    opacity: 0;           /* Invisible por defecto */
    visibility: hidden;   /* No interactuable + permite transición (vs display:none) */
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    display: block !important;   /* Debe estar en DOM para que la transición funcione */
    pointer-events: none;        /* Sin this, el cursor podría "caer" sobre el panel invisible */
}

/* Puente invisible: cubre el margen entre el nav-item y el panel.
   Sin este puente, cuando el cursor viaja desde el botón hacia el panel
   (cruzando el margin-top de 10px), se pierde el :hover y el panel se cierra.
   El ::before crea un rectángulo transparente que "pega" ambas zonas. */
.dropdown-panel[b-7ljhf4g6pb]::before {
    content: '';
    position: absolute;
    top: -12px;                /* Cubre los 10px de margin-top + 2px extra de margen seguro */
    left: 0;
    right: 0;
    width: 100%;
    height: 12px;
    background: transparent;   /* Invisible visualmente pero intercepta eventos de mouse */
    pointer-events: auto;
}

/* ★ PROBLEMA 1+3 FIX: He eliminado el selector :hover puro del panel.
   Ahora SOLO .dropdown-hover-open (clase añadida por JS con delay 350ms)
   controla la apertura del panel. Esto evita la duplicidad CSS+JS que causaba
   un cierre instantáneo del panel cuando el mouse salía del área :hover antes
   de que JS actualizara el estado. Los estilos están en nav-active-overrides.css. */
/* @media (min-width: 992px) { dropdown hover → movido a nav-active-overrides.css } */

/* Móvil: reglas del dropdown-panel movidas a Sección 9 unificada */

/* ── DROPDOWN GRID: 2 columns (matches React grid-cols-2) ── */
/*
   grid-template-columns: 1fr 1fr → dos columnas iguales.
   En móvil (sección 9F) se convierte a flex-direction: column para acordeón.
*/
.dropdown-grid[b-7ljhf4g6pb] {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas iguales = layout de tarjetas */
    gap: 2px;                       /* gap-0.5 = 2px — matches React grid gap-0.5 */
    padding: 0.5rem;                /* p-2 */
    width: 100%;                    /* Ocupa el ancho del panel (380px) */
}

/* Móvil: reglas del dropdown-grid movidas a Sección 9 unificada */

/* Ítems dentro del Dropdown */
.dropdown-panel .dropdown-item[b-7ljhf4g6pb] {
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem; /* gap-2.5 */
    padding: 0.625rem 0.75rem; /* py-2.5 px-3 */
    border-radius: 0.5rem; /* rounded-lg */
    font-size: 0.8125rem; /* text-[13px] */
    font-weight: 500;
    color: #4B5563;
    transition: background-color 0.15s ease, color 0.15s ease;
    width: 100%;
}

/* Hover del item: fondo rojo-50 y texto rojo (identidad scout activa) */
.dropdown-panel .dropdown-item:hover[b-7ljhf4g6pb] {
    background-color: #FEF2F2; /* Red-50 — matches React */
    color: var(--scout-red);
}

/* El ícono del item cambia de gris a rojo al hacer hover */
.dropdown-panel .dropdown-item:hover .dropdown-item-icon[b-7ljhf4g6pb] {
    background-color: rgba(211, 47, 47, 0.1) !important; /* red con 10% opacidad */
    color: var(--scout-red) !important;
}

/* Contenedor del ícono dentro de los ítems: cuadrado con fondo gris claro */
/* Iconos en los user-dropdown-panel items */
.user-dropdown-panel .dropdown-item i[b-7ljhf4g6pb],
.user-dropdown-panel .dropdown-item .fa-solid[b-7ljhf4g6pb],
.user-dropdown-panel .dropdown-item .fa-regular[b-7ljhf4g6pb] {
    font-size: 14px;
    width: 14px;
    color: #9CA3AF;      /* gris-400 por defecto */
    flex-shrink: 0;      /* No se achica si el texto es largo */
    transition: color 0.15s ease;
}

.user-dropdown-panel .dropdown-item:hover i[b-7ljhf4g6pb],
.user-dropdown-panel .dropdown-item:hover .fa-solid[b-7ljhf4g6pb],
.user-dropdown-panel .dropdown-item:hover .fa-regular[b-7ljhf4g6pb] {
    color: var(--scout-red);
}

.dropdown-item-icon[b-7ljhf4g6pb] {
    width: 1.75rem;  /* w-7 */
    height: 1.75rem; /* h-7 */
    border-radius: 0.375rem; /* rounded-md */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;          /* No se achica con texto largo */
    background-color: #F3F4F6; /* Gray-100 */
    color: #9CA3AF; /* Gray-400 */
    font-size: 0.8rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}


/* ── 7B. USER DROPDOWN PANEL — ESTILOS NATIVOS (sin BlazorBootstrap) ─── */
/*
   He reemplazado el componente <Dropdown> de BlazorBootstrap por HTML nativo
   controlado con el bool C# _userDropdownOpen. El problema con BlazorBootstrap
   era que creaba instancias Bootstrap.Dropdown en JS que interferían con el
   manejo de eventos del navbar. Al usar HTML nativo, tengo control total.

   Estrategia de apertura/cierre:
   - El <div> wrapper tiene .user-dd-open cuando _userDropdownOpen == true.
   - .user-dropdown-panel tiene display: none por defecto.
   - El selector .user-dd-open .user-dropdown-panel activa display: block.
   - La animación dropdownFadeIn hace la aparición suave (no posible con
     display:none, pero aquí uso animation en vez de transition, lo que SÍ
     funciona con display:block).

   z-index: 1100 asegura que el panel del usuario aparezca sobre todo el
   contenido de la página, incluidos los modales (z-index 1000).
*/
/* Reemplaza todos los ::deep .admin-dropdown-btn / .dropdown-menu / .dropdown-item  */
/* Los elementos ahora son HTML nativo controlados por C# bool _userDropdownOpen.    */

/* Wrapper posicionado para el panel */
.user-dropdown-wrapper[b-7ljhf4g6pb] {
    position: relative; /* Contexto de posicionamiento absoluto para el panel */
    display: flex;
    align-items: center;
}

/* Botón toggle del usuario: aspecto de "pill" con borde sutil */
.user-dropdown-toggle[b-7ljhf4g6pb] {
    background-color: transparent !important;
    border: 1px solid #E5E7EB !important;
    padding: 0.375rem 0.75rem 0.375rem 0.375rem !important;
    border-radius: 9999px !important;   /* Forma de píldora */
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
    color: #1F2937 !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    cursor: pointer;
}

/* El botón cambia de apariencia tanto en hover como cuando está abierto */
.user-dropdown-toggle:hover[b-7ljhf4g6pb],
.user-dd-open .user-dropdown-toggle[b-7ljhf4g6pb] {
    border-color: rgba(211, 47, 47, 0.4) !important; /* Borde rojo tenue */
    background-color: #FEF2F2 !important;             /* Fondo rojo muy claro */
    color: #1F2937 !important;
}

/* Panel dropdown del usuario: oculto por defecto, visible con .user-dd-open */
.user-dropdown-panel[b-7ljhf4g6pb] {
    display: none;           /* Oculto. Se activa con .user-dd-open (ver abajo) */
    position: absolute;
    right: 0;                /* Alineado al borde derecho del wrapper */
    top: calc(100% + 10px);  /* 10px de separación bajo el botón */
    min-width: 220px;
    background-color: white;
    border: 1px solid #E5E7EB;
    border-top: 2px solid #D32F2F;  /* Línea roja: identidad visual consistente */
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    padding: 0.5rem;
    z-index: 1100;           /* Encima de todo el contenido y modales */
    animation: dropdownFadeIn-b-7ljhf4g6pb 0.18s ease-out; /* Aparece con transición suave */
}

/* Cuando C# pone la clase .user-dd-open en el wrapper, el panel se muestra */
.user-dd-open .user-dropdown-panel[b-7ljhf4g6pb] {
    display: block;
}

/* Animación de aparición: desliza desde abajo y aumenta de escala levemente.
   Uso animation (no transition) porque funciona con display:block. */
@keyframes dropdownFadeIn-b-7ljhf4g6pb {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header del panel: muestra el avatar grande y el nombre del usuario */
.dropdown-panel-header[b-7ljhf4g6pb] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(229, 231, 235, 0.5);
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

/* Avatar grande en el encabezado del panel (diferente al avatar pequeño del botón) */
.user-avatar-lg[b-7ljhf4g6pb] {
    width: 2.5rem !important;   /* 40px */
    height: 2.5rem !important;
    font-size: 0.85rem !important;
}

/* Título de sección tipo "ADMIN" o "ENLACES" en mayúsculas */
.dropdown-section-title[b-7ljhf4g6pb] {
    display: block;
    padding: 0.375rem 0.75rem 0.25rem;
    font-size: 0.625rem;        /* Muy pequeño, es un label de sección */
    letter-spacing: 0.12em;     /* Espaciado extra para legibilidad en mayúsculas */
    text-transform: uppercase;
    font-weight: 700;
    color: #6B7280;             /* Gris mediano: no compite visualmente */
    margin-top: 0.25rem;
}

/* ── Botón principal "Configuración" ── */
.dropdown-item-config[b-7ljhf4g6pb] {
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    padding: 0.75rem !important;
    color: var(--scout-text-gray, #1F2937) !important;
}

/* ── Contenedor de accesos rápidos ── */
.dropdown-quick-access[b-7ljhf4g6pb] {
    padding: 0.125rem 0.25rem;
}

.dropdown-item-quick[b-7ljhf4g6pb] {
    font-size: 0.8125rem !important;
    padding: 0.5rem 0.625rem !important;
}

.dropdown-item-quick-label[b-7ljhf4g6pb] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Badge de pendientes en accesos rápidos ── */
.dropdown-item-quick-icon-wrap[b-7ljhf4g6pb] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.dropdown-item-quick-badge[b-7ljhf4g6pb] {
    position: absolute;
    top: -0.4rem;
    right: -0.5rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    background: #d32f2f;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

/* Items del panel */
.user-dropdown-panel .dropdown-item[b-7ljhf4g6pb] {
    border-radius: 0.5rem !important;
    padding: 0.625rem 0.75rem !important;
    transition: background-color 0.15s ease !important;
    color: #4B5563 !important;
    font-family: var(--font-sans), 'Inter', sans-serif;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
    text-decoration: none !important;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.user-dropdown-panel .dropdown-item:hover[b-7ljhf4g6pb] {
    background-color: #F8F5F0 !important; /* Crema cálido, identidad scout */
    color: var(--scout-text-gray) !important;
}

/* Separador visual entre secciones del panel */
.user-dropdown-panel .dropdown-divider[b-7ljhf4g6pb],
.user-dropdown-panel hr.dropdown-divider[b-7ljhf4g6pb] {
    border: none;
    border-top: 1px solid #E5E7EB;
    margin: 0.25rem 0;
}

/* Item de cierre de sesión: rojo para denotar acción destructiva */
.logout-item[b-7ljhf4g6pb] {
    color: var(--scout-red) !important;
    font-weight: 600 !important;
}

.logout-item:hover[b-7ljhf4g6pb] {
    background-color: #FEF2F2 !important; /* Fondo rojo muy claro en hover */
    color: var(--scout-red) !important;
}

.logout-item i[b-7ljhf4g6pb] {
    color: var(--scout-red) !important;
}

/* Avatar circular con gradiente verde: muestra las iniciales del usuario */
.user-avatar-circle[b-7ljhf4g6pb] {
    width: 2rem; /* w-8 = 32px */
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%); /* Gradiente verde scout */
}

.admin-username[b-7ljhf4g6pb] {
    font-family: var(--font-sans), 'Inter', sans-serif;
    font-size: 0.875rem; /* text-sm */
    font-weight: 600;
}

/* Bloque de nombre + rol visible solo en móvil (dentro del botón toggle) */
.user-mobile-info[b-7ljhf4g6pb] {
    flex: 1;
}

.user-mobile-name[b-7ljhf4g6pb] {
    font-family: var(--font-sans), 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1F2937;
    line-height: 1.2;
}

.user-mobile-role[b-7ljhf4g6pb] {
    font-family: var(--font-sans), 'Inter', sans-serif;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #6B7280;
    line-height: 1.2;
    text-transform: capitalize;
}

/* Chevron del botón de usuario: gira 180° cuando el panel está abierto */
.user-chevron[b-7ljhf4g6pb] {
    color: #6B7280;
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

/* C# agrega .user-chevron-open al ícono cuando _userDropdownOpen == true */
.user-chevron-open[b-7ljhf4g6pb] {
    transform: rotate(180deg);
    color: var(--scout-red) !important; /* Rojo cuando está abierto */
}



/* ── 8. NAVBAR TOGGLER (Hamburguesa Móvil) ────────────── */
/*
   El .navbar-toggler es el botón de hamburguesa que aparece en móvil.
   He removido el borde predeterminado de Bootstrap (border: none !important)
   para un aspecto más limpio.

   El .navbar-toggler-icon usa un background-image con una URI de datos SVG
   que dibuja las tres líneas horizontales. Uso este enfoque en lugar de
   FontAwesome porque me permite controlar el color de las líneas directamente
   en el SVG (stroke='%231F2937' = #1F2937 en URL encoding).
   Si el color del fondo cambia, puedo actualizar el stroke aquí.
*/
.navbar-toggler[b-7ljhf4g6pb] {
    border: none !important;     /* Elimino el borde predeterminado de Bootstrap */
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    color: var(--scout-text-gray);
}

.navbar-toggler:hover[b-7ljhf4g6pb] {
    background-color: #F9FAFB; /* gray-50: fondo muy sutil en hover */
}

.navbar-toggler:focus[b-7ljhf4g6pb] {
    box-shadow: none;            /* Bootstrap agrega un box-shadow azul en :focus */
    outline: none;
    background-color: #F3F4F6;  /* gray-100: mayor feedback visual en foco */
}

/* SVG inline como data URI para el ícono de hamburguesa.
   %23 es el encoding de '#'. El color de las líneas es #1F2937 (gris oscuro). */
.navbar-toggler-icon[b-7ljhf4g6pb] {
    width: 1.5rem; /* 24px */
    height: 1.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231F2937' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* ── 8B. BUTTONS ──────────────────────────────────────── */
/*
   .btn-scout-primary es el botón de "Ingresar" que aparece en el extremo
   derecho del navbar cuando el usuario NO está autenticado.
   Tiene forma de píldora (border-radius: 9999px), fondo verde scout y texto
   blanco. Los !important son necesarios para ganar la especificidad de
   Bootstrap .btn, .btn-success y similares.
*/
.btn-scout-primary[b-7ljhf4g6pb] {
    background-color: var(--scout-green-primary) !important;
    color: white !important;
    border-radius: 9999px !important;       /* rounded-full: forma de píldora */
    padding: 0.5rem 1.25rem !important;     /* py-2 px-5 */
    font-size: 0.875rem !important;         /* text-sm */
    font-weight: 600 !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: all 0.2s ease !important;
    box-shadow: none;                       /* Sin sombra en estado normal */
}

/* En hover: verde más oscuro + sombra para sensación de profundidad */
.btn-scout-primary:hover[b-7ljhf4g6pb] {
    background-color: var(--scout-green-dark) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    color: white !important;
}

/* En active (clic): se reduce levemente para dar feedback táctil */
.btn-scout-primary:active[b-7ljhf4g6pb] {
    transform: scale(0.97);
}


/* ── 9. RESPONSIVE: Menú Móvil (ÚNICO BLOQUE UNIFICADO) ── */
/*
   He unificado TODOS los overrides de móvil en este único @media para
   evitar tener reglas dispersas. Si necesito cambiar algo en móvil,
   este es el único lugar donde buscar.

   Breakpoint: 991.98px coincide con el breakpoint "lg" de Bootstrap
   (992px), donde el navbar colapsa y aparece la hamburguesa.
*/
/* Todos los resets móviles van aquí. Nada de media queries   */
/* sueltas arriba. Si tocas algo de móvil, edítalo aquí.      */

@media (max-width: 991.98px) {

    /* En móvil, el navbar debe tener height:auto porque el menú colapsado
       se expande hacia abajo y necesita empujar el contenido de la página. */
    .navbar[b-7ljhf4g6pb] {
        height: auto !important;
    }

    /* ── 9A. CONTENEDOR COLAPSABLE ── */
    /*
       ★ TAREA 2: FIX DOBLE SCROLL
       Problema original: .navbar-collapse.show tenía overflow-y:auto + max-height
       fijo. Cuando un submenú acordeón se expandía, su contenido superaba el
       max-height y aparecía un scroll INTERNO (dentro del menú), que se sumaba
       al scroll de la página completa → doble scroll, experiencia horrible.

       Solución aplicada: height:auto + overflow:visible. El collapse se expande
       libremente. La página (body) es la única que tiene scroll. El menú simplemente
       empuja el contenido hacia abajo como cualquier elemento de bloque normal.
    */
    .navbar-collapse[b-7ljhf4g6pb] {
        background-color: white;
        border-top: 1px solid #E5E7EB;
        padding: 0;
        margin-top: 0;
        box-shadow: none;
        /* ★ SIN overflow:hidden ni max-height — evita el scroll interno */
        overflow: visible !important;
        display: none !important;          /* Oculto por defecto; Bootstrap agrega .show para abrirlo */
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.25s ease;
        align-self: auto !important;       /* Reset del align-self: stretch del modo escritorio */
    }

    .navbar-collapse.show[b-7ljhf4g6pb] {
        /* ★ height:auto + overflow:visible: el menú puede expandirse libremente */
        display: block !important;
        height: auto !important;
        max-height: none !important;       /* Sin límite de altura */
        overflow: visible !important;      /* Sin scroll interno — la página hace el scroll */
        padding: 1.25rem 1rem 2rem;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.25s ease;
    }

    /* ── 9B. NAV-ITEM RESET (BLOQUE, NO FLEX ROW) ──
       En escritorio, .nav-item es display:flex en fila horizontal.
       En móvil, necesito que cada item sea un bloque apilado verticalmente.
    */
    /* ★ FIX: navbar-nav en móvil debe ser flex COLUMN, no row.
       En desktop es flex-direction:row para la barra horizontal.
       En móvil, d-flex de Bootstrap mantendría flex-direction:row y los items
       se apilarían solo por flex-wrap + width:100%. Con flex-direction:column
       el apilado es explícito y el align-items:center del desktop no desplaza
       horizontalmente los items. */
    .navbar-nav[b-7ljhf4g6pb] {
        flex-direction: column !important;
        align-items: stretch !important; /* Estira items al ancho completo */
        gap: 0 !important;               /* Sin gap entre items en móvil */
        height: auto !important;
    }
    .nav-item[b-7ljhf4g6pb] {
        position: relative;
        display: block !important;       /* Uno debajo del otro (no fila flex) */
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        border-bottom: 1px solid #F3F4F6; /* Separador sutil entre items */
    }

    .nav-item:last-child[b-7ljhf4g6pb] {
        border-bottom: none; /* Sin separador en el último item */
    }

    /* ── 9C. ENLACES BASE (full-width, fila con justify-content: space-between)
       En escritorio, .custom-nav-item ocupa height:100% del navbar.
       En móvil, cada enlace es un bloque full-width que muestra el texto
       a la izquierda y el chevron a la derecha (justify-content: space-between).
       Incluyo .dropdown-toggle para que <span> y <a> sean idénticos. */
    .custom-nav-item[b-7ljhf4g6pb],
    .nav-link[b-7ljhf4g6pb],
    .custom-nav-item.dropdown-toggle[b-7ljhf4g6pb],
    .nav-item.dropdown .dropdown-toggle[b-7ljhf4g6pb] {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important; /* Texto izq, chevron der */
        align-items: center !important;
        height: auto !important;
        text-align: left !important;
        padding: 12px 16px !important;
        margin: 0 !important;
        border: none !important;
        border-left: 3px solid transparent !important; /* Reserva espacio para el borde activo sin layout shift */
        border-radius: 0.75rem !important;
        font-size: 0.9375rem !important;   /* 15px — mayor que escritorio (13px) para legibilidad táctil */
        font-weight: 600 !important;
        color: var(--scout-text-gray) !important;
        background-color: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        line-height: 1.5 !important;
        gap: 0 !important;
        transition: background-color 0.15s ease !important;
    }

    /* Texto: 15px en móvil (override del 13px desktop de .nav-text) */
    .nav-text[b-7ljhf4g6pb] {
        font-size: 0.9375rem !important;   /* 15px para mejor legibilidad táctil */
        font-weight: 600 !important;
    }

    .custom-nav-item:hover[b-7ljhf4g6pb],
    .nav-link:hover[b-7ljhf4g6pb],
    .custom-nav-item.dropdown-toggle:hover[b-7ljhf4g6pb] {
        background-color: #F9FAFB !important; /* Fondo muy sutil en hover/tap */
    }

    /* ── 9D. ESTADO ACTIVO ──
       Blazor NavLink agrega .active automáticamente al enlace de la ruta actual.
       Le aplico fondo rojo-50 + texto rojo + borde izquierdo para distinguirlo del resto.
       El borde izquierdo replica el diseño de pagina_muestra (MobileLink active). */
    .custom-nav-item.active[b-7ljhf4g6pb],
    .nav-link.active[b-7ljhf4g6pb] {
        color: var(--scout-red) !important;
        background-color: #FEF2F2 !important;
        border-left: 3px solid var(--scout-red) !important;
    }

    /* ★ TAREA 3 MÓVIL: active-parent en móvil.
       Mismo principio que escritorio: C# inyecta la clase en render time,
       Blazor le agrega el scoping [b-xxxx], por lo que el selector coincide.
       El padre del dropdown activo muestra fondo + texto rojo + borde izquierdo. */
    .nav-item.dropdown.active-parent > .custom-nav-item[b-7ljhf4g6pb],
    .nav-item.dropdown.active-parent > .dropdown-toggle[b-7ljhf4g6pb] {
        color: var(--scout-red) !important;
        background-color: #FEF2F2 !important;
        border-left: 3px solid var(--scout-red) !important;
    }
    .nav-item.dropdown.active-parent > .custom-nav-item .nav-text[b-7ljhf4g6pb],
    .nav-item.dropdown.active-parent > .dropdown-toggle .nav-text[b-7ljhf4g6pb] {
        color: var(--scout-red) !important;
    }

    /* Sin subrayado en móvil: el fondo de color ya indica el estado activo */
    .custom-nav-item[b-7ljhf4g6pb]::before {
        display: none !important;
    }

    /* ── 9E. DROPDOWN PANEL RESET (ACORDEÓN) ──
       En escritorio, .dropdown-panel es position:absolute, flotando sobre el
       contenido. En móvil, lo convierto en un acordeón inline:
       - position:static → ya no flota, forma parte del flujo normal
       - transform:none → cancela el translateX(-50%) del escritorio
       - border-left roja → muestra la jerarquía visual del acordeón
       - display:none → oculto por defecto, C# lo abre con .mobile-open
    */
    .dropdown-panel[b-7ljhf4g6pb] {
        position: static !important;       /* Acordeón: ya no es flotante */
        width: 100% !important;
        min-width: 0 !important;
        transform: none !important;        /* Cancela el centrado de escritorio */
        left: auto !important;             /* Reset del left: 50% */
        opacity: 1 !important;
        visibility: visible !important;
        box-shadow: none !important;
        border: none !important;
        border-left: 2px solid rgba(211, 47, 47, 0.25) !important; /* React: border-l-2 border-#D32F2F25 — 25% opacidad */
        border-radius: 0 !important;
        margin-top: 0 !important;
        padding: 0 0 0.5rem 1rem !important;
        background-color: transparent !important;
        display: none !important;          /* Oculto — el !important aquí gana al display:block!important de la regla base */
        pointer-events: auto;
    }

    /* El puente ::before del escritorio no es necesario en móvil */
    .dropdown-panel[b-7ljhf4g6pb]::before {
        display: none !important;
    }

    /* 9E-2. Mostrar cuando está abierto (C# agrega .mobile-open al .nav-item) */
    .nav-item.dropdown.mobile-open > .dropdown-panel[b-7ljhf4g6pb] {
        display: block !important;
    }

    /* ── 9F. GRID ACORDEÓN (1 columna, no 2) ──
       El grid de 2 columnas del escritorio no sirve en mobile: hay poco espacio.
       Lo convierto a flex-direction:column para listar los ítems uno debajo del otro.
    */
    .dropdown-grid[b-7ljhf4g6pb] {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important; /* Cancela el grid-template del escritorio */
        width: 100% !important;
        min-width: 0 !important;
        padding: 0.25rem 0 !important;
        gap: 0.125rem !important;
    }

    /* ── 9G. ITEMS DENTRO DEL DROPDOWN ── */
    .dropdown-panel .dropdown-item[b-7ljhf4g6pb],
    .nav-item.dropdown .dropdown-item[b-7ljhf4g6pb] {
        padding: 0.625rem 0.75rem !important;
        font-size: 0.875rem !important;    /* 14px — levemente menor que los items padre */
        border-radius: 0.5rem !important;
        width: 100% !important;
    }

    /* ── 9H. CHEVRON ACORDEÓN ──
       En móvil, el chevron gira según si el acordeón está abierto o cerrado.
       C# agrega la clase .mobile-chevron-open al <i> del chevron cuando
       el dropdown está abierto (_nosotrosOpen o _scoutingOpen == true).
    */
    .fa-chevron-down[b-7ljhf4g6pb] {
        transition: transform 0.2s ease, color 0.2s ease;
    }

    /* Aplicado por C# cuando el dropdown está abierto en móvil */
    .mobile-chevron-open[b-7ljhf4g6pb] {
        transform: rotate(180deg);
        color: var(--scout-red) !important;
    }

    /* ── 9I. DROPDOWN TOGGLE REFUERZO (complemento de 9C) ── */
    .nav-item.dropdown .dropdown-toggle[b-7ljhf4g6pb] {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 16px !important;
        height: auto !important;
    }

    /* ── 9J. BOTÓN LOGOUT MÓVIL ──
       En móvil, el cierre de sesión aparece como un botón visible al final
       del menú (no escondido dentro del dropdown de usuario).
       Color rojo + borde rojo tenue para denotar acción destructiva.
    */
    .mobile-logout-btn[b-7ljhf4g6pb] {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        border-radius: 0.75rem;
        font-size: 0.875rem;
        font-weight: 600;
        transition: background-color 0.2s ease;
        background-color: transparent;
        color: var(--scout-red) !important;
        border: 1px solid rgba(211, 47, 47, 0.2); /* Borde rojo muy tenue */
        margin-top: 1rem;
    }

    .mobile-logout-btn:hover[b-7ljhf4g6pb] {
        background-color: #FEF2F2; /* Fondo rojo-50 en hover */
    }

    /* ── 9K. MENÚ USUARIO MÓVIL ──
       En escritorio, el dropdown de usuario es position:absolute flotando sobre
       el contenido. En móvil, lo convierto en acordeón estático, igual que los
       dropdowns de navegación (sección 9E).
       Diferencias notables:
       - border-left roja en lugar de border-top, para consistencia con el acordeón
       - animation:none porque no tiene sentido animar un elemento estático
    */
    /* wrapper: bloque full-width */
    .user-dropdown-wrapper[b-7ljhf4g6pb] {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        margin-top: 0.5rem;
        border-top: 1px solid #F3F4F6; /* Separador visual del resto del menú */
        padding-top: 0.5rem;
    }

    /* Botón toggle: aspecto de fila full-width (igual que los otros nav-items) */
    .user-dropdown-toggle[b-7ljhf4g6pb] {
        width: 100% !important;
        border-radius: 0.75rem !important;
        border: none !important;           /* Sin borde pill en móvil */
        padding: 12px 16px !important;
        justify-content: flex-start !important; /* Alineado a la izquierda */
        gap: 0.625rem !important;
        background-color: transparent !important;
    }

    /* Panel: estático (acordeón), sin sombra, sin posicionamiento absoluto */
    .user-dropdown-panel[b-7ljhf4g6pb] {
        position: static !important;   /* Ya no flotante */
        width: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        border-left: 2px solid var(--scout-red) !important; /* Sangría consistente */
        border-top: none !important;
        box-shadow: none !important;
        margin-top: 0 !important;
        padding: 0.25rem 0 0.5rem 1rem !important;
        animation: none !important;    /* Sin animación de fadeIn en acordeón estático */
    }

    /* Cuando está abierto en móvil (C# pone .user-dd-open en el wrapper) */
    .user-dd-open .user-dropdown-panel[b-7ljhf4g6pb] {
        display: block;
    }
}