/* ══════════════════════════════════════════════════════════════════════
 * UNIDAD-DETALLE.CSS
 * ══════════════════════════════════════════════════════════════════════
 * Hoja de estilos centralizada para las 14 páginas de detalle de
 * unidades scout y la página hub (/unidades).
 *
 * ARQUITECTURA:
 *   SECCIÓN 1 → Design Tokens (variables CSS globales)
 *   SECCIÓN 2 → Layout Base (.unit-wrapper)
 *   SECCIÓN 3 → Hero Header inmersivo (.detalle-hero)
 *   SECCIÓN 4 → Navegación por pestañas (.detalle-tab-nav)
 *   SECCIÓN 5 → Tarjetas de contenido (cards)
 *   SECCIÓN 6 → Elementos de texto con estilo propio
 *   SECCIÓN 7 → Animaciones y botones
 *   SECCIÓN 8 → Hub de unidades (/unidades)
 *   SECCIÓN 9 → Overrides por unidad (.unit-ccag, .unit-mlsfa, etc.)
 *
 * REGLA: Ningún estilo inline en los archivos .razor.
 *        Todo el theming se controla via --unit-color definido
 *        en la SECCIÓN 9 para cada clase de unidad.
 * ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
 * SECCIÓN 1: DESIGN TOKENS
 * Variables CSS globales que definen la paleta de colores, tipografía
 * y tokens del sistema de diseño Scout.
 * Estas variables son agnósticas a la unidad — aplican a todas las
 * páginas del módulo Unidades.
 * ══════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Colores base del sistema ─────────────────────────────────────
     * Fondo, texto principal, bordes y variantes de texto secundario.
     * Se referencian con var(--scout-xxx) en todo el archivo.
     */
    --scout-bg:       #F8F5F0;                  /* Fondo principal: beige cálido Scout */
    --scout-text:     #37474F;                  /* Texto principal: gris oscuro pizarra */
    --scout-border:   #ECE6D8;                  /* Bordes y separadores: beige oscuro */
    --scout-muted:    rgba(55, 71, 79, 0.4);    /* Texto apagado (badges, labels) */
    --scout-body:     rgba(55, 71, 79, 0.7);    /* Texto de párrafos descriptivos */
    --scout-body-alt: rgba(55, 71, 79, 0.6);    /* Texto de párrafos suaves (historia) */

    /* ── Color de honor (dorado institucional) ────────────────────────
     * Usado en el ícono de "Cuadro de Honor" de todas las unidades.
     * Es un color institucional fijo, no varía por rama.
     */
    --scout-honor: #FBC02D;

    /* ── Valor por defecto para --unit-color ──────────────────────────
     * Cada clase .unit-xxx (SECCIÓN 9) sobreescribe este valor.
     * Si una página no tiene clase de unidad, se usa verde Scout.
     */
    --unit-color: #2E7D32;
}


/* ── Tipografía serif (Bitter) ───────────────────────────────────────
 * Clase utilitaria para títulos y textos destacados que requieren
 * la fuente Bitter (serif) en lugar de Inter (sans-serif por defecto).
 */
.font-serif {
    font-family: 'Bitter', serif !important;
}


/* ══════════════════════════════════════════════════════════════════════
 * SECCIÓN 2: LAYOUT BASE — .unit-wrapper
 * Contenedor principal de cada página de detalle de unidad.
 * Define el fondo beige global y la altura mínima de una pantalla.
 * La clase .unit-xxx del mismo <div> inyecta --unit-color que se
 * propaga a todos los hijos (hero, tabs, íconos, acentos).
 * ══════════════════════════════════════════════════════════════════════ */

.unit-wrapper {
    background: var(--scout-bg);
    min-height: 100vh;
}


/* ══════════════════════════════════════════════════════════════════════
 * SECCIÓN 3: HERO HEADER INMERSIVO — .detalle-hero
 * Cabecera de color completo que ocupa el ancho total de la página.
 * El color de fondo se hereda de --unit-color (definido por la clase
 * .unit-xxx del wrapper padre), eliminando la necesidad de estilos
 * inline en el HTML.
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Contenedor del hero ─────────────────────────────────────────────
 * Padding generoso arriba (8rem) y abajo (6rem) para dar presencia.
 * background-color usa var(--unit-color) para auto-colorearse.
 * overflow:hidden evita que la textura decorativa se desborde.
 */
.detalle-hero {
    position: relative;
    padding: 3rem 0 2rem;
    overflow: hidden;
    background-color: var(--unit-color);
}

/* ── Textura de fondo superpuesta ────────────────────────────────────
 * Patrón topográfico sutil sobre el color sólido del hero.
 * opacity:0.1 + mix-blend-mode:overlay = efecto discreto que
 * agrega textura sin competir con el contenido principal.
 */
.detalle-hero-texture {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* ── Contenedor del contenido del hero ───────────────────────────────
 * Se posiciona por encima de la textura con z-index:10.
 * Reemplaza el antiguo style="z-index: 10; position: relative"
 * que antes estaba como atributo inline en el HTML.
 */
.detalle-hero-content {
    position: relative;
    z-index: 10;
}

/* ── Badge de tipo de rama ───────────────────────────────────────────
 * Pillbox glassmorphism que indica la rama y rango de edad.
 * Ejemplos: "Colonia · 5 a 7 años", "Tropa Raider · 14 a 17 años"
 * backdrop-filter:blur crea el efecto de vidrio esmerilado.
 */
.detalle-badge-tipo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    padding: 0.4rem 1rem;
    border-radius: 50px;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── Título principal del hero (nombre de la unidad) ─────────────────
 * Tipografía grande, blanca, con sombra de texto para legibilidad
 * sobre el fondo de color. Responsive: 3rem → 4.5rem en desktop.
 */
.detalle-title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.04em;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    line-height: 1.1;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .detalle-title {
        font-size: 2.8rem;
    }
}

/* ── Elemento de metadatos del hero (lema, santo patrono) ────────────
 * Layout flex horizontal para mostrar ícono + texto del lema
 * debajo del título principal. Color blanco con leve transparencia.
 */
.detalle-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    font-size: 1.05rem;
}

/* ── Ícono decorativo dentro del meta-item ───────────────────────────
 * Se aplica al ícono de escudo que precede al texto del lema.
 * opacity:0.6 lo suaviza para que no compita visualmente con el texto.
 * Reemplaza el antiguo style="opacity: 0.6".
 */
.detalle-meta-icon {
    opacity: 0.6;
}

/* ── Meta-row: Lema + Patrono en línea ────────────────────────────────
 * Layout flex horizontal para Lema y Patrono en la misma línea
 * debajo del título, separados por un pipe (|) con gap amplio.
 */
.hero-meta-row {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

/* ── Separador visual | entre metadatos ──────────────────────────────
 * Pipe semitransparente entre Lema y Patrono.
 */
.hero-meta-separator {
    color: rgba(255, 255, 255, 0.35);
    font-weight: 300;
    font-size: 1.2rem;
    user-select: none;
}


/* ══════════════════════════════════════════════════════════════════════
 * SECCIÓN 4: NAVEGACIÓN POR PESTAÑAS — .detalle-tab-nav
 * Barra sticky horizontal con 4 pestañas:
 *   General | Integrantes | Progresión | Honor e Historia
 * Funciona con Bootstrap 5 nativo (data-bs-toggle="tab"), sin C#.
 * El indicador de color del tab activo usa var(--unit-color).
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Contenedor sticky de las pestañas ───────────────────────────────
 * Se fija en top:60px (debajo del navbar principal) al hacer scroll.
 * Fondo glassmorphism con backdrop-filter:blur para transparencia.
 */
.detalle-tab-nav {
    position: sticky;
    top: 60px;
    z-index: 40;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--scout-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ── Scroll horizontal sin scrollbar visible ─────────────────────────
 * En mobile, las pestañas pueden desplazarse horizontalmente
 * sin mostrar la barra de scroll del navegador.
 */
.detalle-tabs-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.detalle-tabs-scroll::-webkit-scrollbar {
    display: none;
}

/* ── Botón individual de pestaña ─────────────────────────────────────
 * Estado inactivo: texto gris claro (30% opacidad) para sutil.
 * Estado hover: texto gris medio (60% opacidad) como feedback.
 * Estado active: texto oscuro completo + indicador de color inferior.
 */
.detalle-tab-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.25rem 2rem;
    background: none;
    border: none;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(55, 71, 79, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    white-space: nowrap;
}

.detalle-tab-btn:hover {
    color: rgba(55, 71, 79, 0.6);
}

.detalle-tab-btn.active {
    color: var(--scout-text);
}

/* ── Indicador de color de la pestaña activa ─────────────────────────
 * Línea horizontal de 3px en la parte inferior del botón activo.
 * Su color proviene de --unit-color para reflejar la identidad de
 * la rama. Reemplaza el antiguo <div> condicional de Blazor C#.
 */
.detalle-tab-btn.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background-color: var(--unit-color);
}


/* ══════════════════════════════════════════════════════════════════════
 * SECCIÓN 5: TARJETAS DE CONTENIDO (Cards)
 * Componentes visuales reutilizables dentro del tab-content:
 * oración, patrullas, dirigentes, miembros, progresión, honor, etc.
 * Cada card sigue el lenguaje visual redondeado del sistema Scout.
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Card de Oración ─────────────────────────────────────────────────
 * Tarjeta destacada con borde grueso (4px), bordes ultra-redondeados
 * (48px) y un ícono decorativo grande de baja opacidad a la izquierda.
 * Contiene el texto espiritual / oración de la unidad.
 */
.card-oracion {
    background: #FAFAF7;
    padding: 2.5rem;
    border-radius: 24px;
    border: 1px solid var(--scout-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}

/* ── Ícono decorativo de la card oración ─────────────────────────────
 * Scroll o libro grande, casi invisible (8% opacidad).
 * Sirve como adorno visual para dar contexto espiritual/religioso.
 */
.card-oracion-icon {
    font-size: 2rem;
    opacity: 0.08;
    flex-shrink: 0;
}

/* ── Texto de la oración ─────────────────────────────────────────────
 * Tipografía grande (1.5rem) e itálica para diferenciar del texto
 * normal y darle un carácter ceremonial/distinguido.
 */
.card-oracion-texto {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--scout-text);
    line-height: 1.8;
    font-style: italic;
    margin-bottom: 0;
    font-family: 'Bitter', serif;
}

/* ── Card General (placeholder vacío) ────────────────────────────────
 * Contenedor blanco genérico para secciones sin datos todavía.
 * Bordes suaves de 24px. Se usa como estado vacío temporal.
 */
.card-general {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ── Card de Patrulla ────────────────────────────────────────────────
 * Tarjeta individual para cada patrulla/seisena de la unidad.
 * Bordes 40px, efecto hover con sombra más profunda para interactividad.
 */
.card-patrulla {
    background: #fff;
    border-radius: 40px;
    padding: 2rem;
    border: 1px solid var(--scout-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}
.card-patrulla:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

/* ── Card de Dirigente ───────────────────────────────────────────────
 * Layout horizontal (flex) con avatar + datos del dirigente.
 * Gap de 1.5rem entre el avatar y la información textual.
 */
.card-dirigente {
    background: #fff;
    padding: 2rem;
    border-radius: 32px;
    border: 1px solid var(--scout-border);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ── Card Tabla de Miembros ──────────────────────────────────────────
 * Contenedor con bordes redondeados que envuelve la tabla/lista
 * de miembros inscritos en la unidad. overflow:hidden para que
 * las esquinas de la tabla interna no sobresalgan.
 */
.card-tabla-miembros {
    background: #fff;
    border-radius: 40px;
    border: 1px solid var(--scout-border);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ── Card de Progresión ──────────────────────────────────────────────
 * Tarjeta informativa sobre las etapas de progresión personal.
 * max-width:640px evita que se estire en pantallas ultra anchas.
 */
.card-progresion-info {
    background: #fff;
    padding: 3rem;
    border-radius: 48px;
    border: 1px solid var(--scout-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    max-width: 640px;
}

/* ── Card de Honor ───────────────────────────────────────────────────
 * Contenedor principal para el cuadro de honor de la unidad.
 * Bordes 48px, overflow:hidden para contenido interno.
 */
.card-honor {
    border-radius: 48px;
    border: 1px solid var(--scout-border);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    background: #fff;
}

/* ── Card Aside Oscuro (Banderines / Logros) ─────────────────────────
 * Panel lateral oscuro (--scout-text) con textura de fibra de carbono.
 * Usado para destacar logros, banderines o hitos históricos.
 * ::before aplica la textura con baja opacidad.
 */
.card-aside-dark {
    background: var(--scout-text);
    color: #fff;
    padding: 2.5rem;
    border-radius: 48px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}
.card-aside-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background-image: repeating-linear-gradient(
        45deg, transparent, transparent 3px,
        rgba(255, 255, 255, 0.6) 3px, rgba(255, 255, 255, 0.6) 4px
    ),
    repeating-linear-gradient(
        -45deg, transparent, transparent 3px,
        rgba(255, 255, 255, 0.6) 3px, rgba(255, 255, 255, 0.6) 4px
    );
    background-repeat: repeat;
    pointer-events: none;
}

/* ── Card Aside Archivo Histórico ────────────────────────────────────
 * Panel lateral blanco con borde beige para la sección
 * "Nuestra Historia" en el tab de Honor e Historia.
 */
.card-aside-archivo {
    background: #fff;
    padding: 2.5rem;
    border-radius: 48px;
    border: 1px solid var(--scout-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}


/* ── Gallery Grid (scroll-snap responsive) ────────────────────────────
 * Contenedor horizontal con scroll-snap para galería de fotos.
 * Desktop: 3 imágenes | Tablet: 2 imágenes | Mobile: 1 imagen.
 */
.gallery-grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    margin-bottom: 2.5rem;
}

.gallery-grid::-webkit-scrollbar {
    height: 6px;
}
.gallery-grid::-webkit-scrollbar-track {
    background: transparent;
}
.gallery-grid::-webkit-scrollbar-thumb {
    background: var(--scout-border);
    border-radius: 3px;
}

.gallery-item {
    flex: 0 0 100%;
    scroll-snap-align: start;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.03);
}

@media (min-width: 768px) {
    .gallery-item {
        flex: 0 0 calc(50% - 0.5rem);
    }
}

@media (min-width: 992px) {
    .gallery-item {
        flex: 0 0 calc(33.333% - 0.667rem);
    }
}


/* ── Grid de Patrullas (centrado) ─────────────────────────────────────
 * Sistema flex centrado para mostrar las tarjetas de patrullas.
 * justify-content: center asegura centrado perfecto.
 */
.patrullas-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    padding: 1rem 0;
}

.patrulla-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    min-width: 150px;
    max-width: 200px;
}

.patrulla-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.patrulla-nombre {
    font-weight: 700;
    color: var(--scout-text);
    text-align: center;
    margin: 0;
    font-size: 1rem;
}

/* ── Insignia circular base (CSS puro) ────────────────────────────────
 * Círculo de 72px. Los colores se definen en cada .razor.css scoped.
 */
.patrulla-badge {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    border: 2px solid #fff;
    background-color: var(--unit-color);
}


/* ══════════════════════════════════════════════════════════════════════
 * SECCIÓN 6: ELEMENTOS DE TEXTO CON ESTILO PROPIO
 * Clases utilitarias que centralizan los colores, tamaños y estilos
 * de texto que antes estaban como atributos inline en los .razor.
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Label de sección ────────────────────────────────────────────────
 * Texto pequeño en mayúsculas con tracking amplio.
 * Se usa como subtítulo de sección (ej: "Nuestra Oración").
 */
.detalle-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 0.75rem;
}

/* ── Título de sección ───────────────────────────────────────────────
 * Título h2 oscuro (--scout-text) para encabezar bloques principales
 * como "Dirigentes de Unidad", "Lista de Miembros", etc.
 */
.detalle-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--scout-text);
}

/* ── Color de acento de la unidad ────────────────────────────────────
 * Aplica --unit-color como color de texto a labels, íconos y
 * elementos decorativos que deben reflejar la identidad visual
 * de la rama activa. Reemplaza TODOS los style="color: var(--unit-color)".
 */
.detalle-accent-color {
    color: var(--unit-color);
}

/* ── Encabezado oscuro ───────────────────────────────────────────────
 * Color base oscuro (--scout-text) para títulos h4 dentro de cards.
 * Reemplaza style="color: #37474F" que se usaba en progresión.
 */
.detalle-heading-dark {
    color: var(--scout-text);
}

/* ── Texto de cuerpo / párrafo descriptivo ───────────────────────────
 * Estilo para párrafos descriptivos dentro de cards de contenido.
 * Color gris suave (70% opacidad), tamaño ligeramente mayor al base
 * (1.05rem) y interlineado amplio (1.7) para máxima legibilidad.
 * Reemplaza style="color: rgba(55,71,79,0.7); font-size: 1.05rem;
 * line-height: 1.7" que estaba inline en el HTML.
 */
.detalle-body-text {
    color: var(--scout-body);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* ── Ícono del Cuadro de Honor ───────────────────────────────────────
 * Siempre dorado (--scout-honor: #FBC02D) sin importar la unidad.
 * Representa el color institucional del reconocimiento scout.
 * Reemplaza style="color: #FBC02D" del ícono fa-award.
 */
.detalle-honor-icon {
    color: var(--scout-honor);
}

/* ── Título de "Nuestra Historia" ────────────────────────────────────
 * h4 dentro del card-aside-archivo, con tamaño menor (1.15rem)
 * al de los títulos estándar. Color oscuro --scout-text.
 * Reemplaza style="color: #37474F; font-size: 1.15rem".
 */
.detalle-historia-title {
    color: var(--scout-text);
    font-size: 1.15rem;
}

/* ── Texto de "Nuestra Historia" ─────────────────────────────────────
 * Párrafo descriptivo dentro del card-aside-archivo.
 * Color más suave (--scout-body-alt) y tamaño más pequeño (0.9rem)
 * que el body-text estándar, para sugerir contenido secundario.
 * Reemplaza style="color: rgba(55,71,79,0.6); font-size: 0.9rem;
 * line-height: 1.6".
 */
.detalle-historia-text {
    color: var(--scout-body-alt);
    font-size: 0.9rem;
    line-height: 1.6;
}


/* ══════════════════════════════════════════════════════════════════════
 * SECCIÓN 7: ANIMACIONES Y BOTONES
 * Elementos interactivos y de transición compartidos por todas
 * las páginas de detalle de unidad.
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Animación fade-in con deslizamiento ─────────────────────────────
 * Entrada suave: el contenido sube 16px mientras aparece.
 * Usada para animar la aparición del contenido de las pestañas.
 */
.detalle-fade-in {
    animation: fadeSlideIn 0.5s ease forwards;
}
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Botón "Volver al listado" ───────────────────────────────────────
 * Enlace estilizado como botón con borde beige y fondo blanco.
 * Al hacer hover invierte colores: fondo oscuro + texto blanco.
 * Se muestra al pie de cada página de detalle.
 */
.btn-volver-listado {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid var(--scout-border);
    padding: 0.75rem 1.5rem;
    border-radius: 16px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--scout-text);
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-volver-listado:hover {
    background: var(--scout-text);
    color: #fff;
    border-color: var(--scout-text);
}


/* ══════════════════════════════════════════════════════════════════════
 * SECCIÓN 8: HUB DE UNIDADES — Listado (/unidades)
 * Estilos exclusivos de la página hub (Pages/Unidades/Index.razor)
 * que muestra la grilla de todas las unidades activas + históricas.
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Hero del hub (sección superior) ─────────────────────────────────
 * Contiene el título "Nuestras Ramas" y la barra tricolor.
 */
.hub-hero {
    position: relative;
    padding: 6rem 1rem 4rem;
    background: var(--scout-bg);
}

/* ── Barra tricolor (rojo-blanco-verde) ──────────────────────────────
 * Línea decorativa de 4px en la parte superior de la página hub.
 * Representa la identidad visual institucional del grupo.
 */
.hub-tricolor {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    display: flex;
}
.hub-tricolor > div {
    flex: 1;
}

/* ── Círculo con ícono central del hub ───────────────────────────────
 * Círculo blanco de 96px con sombra suave, contiene el ícono
 * de escudo que encabeza la sección del hub.
 */
.hub-icon-circle {
    width: 96px;
    height: 96px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--scout-border);
}

/* ── Título del hub ──────────────────────────────────────────────────
 * "Nuestras Ramas" — tipografía impactante responsive.
 * 3.5rem en mobile → 4.5rem en desktop.
 */
.hub-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--scout-text);
    letter-spacing: -0.04em;
}
@media (min-width: 768px) {
    .hub-title {
        font-size: 4.5rem;
    }
}

/* ── Subtítulo del hub ───────────────────────────────────────────────
 * Descripción breve debajo del título, ancho máximo para legibilidad.
 */
.hub-subtitle {
    max-width: 640px;
    font-size: 1.25rem;
    color: var(--scout-body-alt);
    font-weight: 500;
    line-height: 1.6;
}

/* ── Tarjeta de unidad activa (Hub) ──────────────────────────────────
 * Card que representa una unidad en la grilla principal.
 * Efecto hover: sube 8px con sombra profunda para feedback táctil.
 * El border-top se aplica con style inline en el hub (color único).
 */
.hub-card {
    background: #fff;
    border-radius: 32px;
    border: 1px solid var(--scout-border);
    box-shadow: 0 12px 32px rgba(27, 94, 32, 0.05);
    padding: 2rem;
    height: 100%;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    display: flex;
    flex-direction: column;
}
.hub-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12);
}

/* ── Ícono de la tarjeta hub ─────────────────────────────────────────
 * Cuadrado de 48px con bordes redondeados y fondo tinted.
 * El color de fondo e ícono se aplican inline (varían por unidad).
 */
.hub-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

/* ── Badge de edad en la tarjeta hub ─────────────────────────────────
 * Pillbox con el rango de edad de la rama (ej: "5 a 7 años").
 * Fondo beige, texto gris apagado, mayúsculas compactas.
 */
.hub-card-badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    background: var(--scout-bg);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--scout-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    align-self: flex-start;
}

/* ── Tarjeta de unidad histórica (Hub) ───────────────────────────────
 * Card simplificada con efecto grayscale (desaturada) por defecto.
 * Al hacer hover recupera el color y el título se vuelve verde Scout.
 */
.hub-card-hist {
    background: rgba(248, 245, 240, 0.8);
    padding: 1.5rem 2rem;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    filter: grayscale(100%);
    height: 100%;
}
.hub-card-hist:hover {
    filter: grayscale(0%);
}
.hub-card-hist:hover h6 {
    color: #2E7D32 !important;
}

/* ── Título de sección del hub ───────────────────────────────────────
 * Encabezado h2 para separar "Unidades Activas" de "Históricas".
 */
.hub-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--scout-text);
}


/* ══════════════════════════════════════════════════════════════════════
 * SECCIÓN 9: OVERRIDES POR UNIDAD
 * ══════════════════════════════════════════════════════════════════════
 * Cada clase .unit-xxx define la variable --unit-color que personaliza
 * automáticamente: hero, indicador de pestaña, íconos de acento,
 * y cualquier elemento que use var(--unit-color).
 *
 * Para añadir personalización futura (textura, tipografía, etc.),
 * basta con agregar reglas dentro del bloque correspondiente.
 *
 * CONVENCIÓN DE NOMBRES:
 *   .unit-{sigla} donde la sigla es el nombre del archivo .razor
 *   en minúsculas: CCAG.razor → .unit-ccag
 * ══════════════════════════════════════════════════════════════════════ */


/* ── UNIDADES ACTIVAS ──────────────────────────────────────────────── */

/* Colonia de Castores "Ángel de la Guarda"
 * Rama: Colonia | Rango: 5 a 8 años
 * Naranja cálido que representa la energía y calidez de los más pequeños.
 */
.unit-ccag {
    --unit-color: #804000;
    ;
}

/* Manada de Lobatos "San Francisco de Asís"
 * Rama: Manada | Rango: 8 a 11 años
 * Amarillo dorado que simboliza la alegría y espíritu de manada.
 */
.unit-mlsfa {
    --unit-color: #FBC02D;
}

/* Ronda de Chispitas "De la Esperanza"
 * Rama: Ronda (femenina) | Rango: 7 a 11 años
 * Comparte el amarillo dorado de la rama Manada/Ronda.
 */
.unit-rce {
    --unit-color: #FBC02D;
}

/* Unidad Scout "Mártires Palotinos"
 * Rama: Unidad Scout | Rango: 11 a 14 años
 * Verde institucional scout: naturaleza, exploración y compromiso.
 */
.unit-usmp {
    --unit-color: #2E7D32;
}

/* Tropa Raider "Compañía de Jesús"
 * Rama: Tropa Raider | Rango: 14 a 17 años
 * Azul cielo que representa aventura, horizontes y servicio.
 */
.unit-trcj {
    --unit-color: #039BE5;
}

/* Comunidad Raider "Fortaleza de María"
 * Rama: Comunidad Raider | Rango: 14 a 17 años
 * Comparte el azul cielo de la rama Raider.
 */
.unit-crfm {
    --unit-color: #039BE5;
}

/* Clan Rover "San Miguel Arcángel"
 * Rama: Clan Rover | Rango: 17 a 21 años
 * Rojo que simboliza pasión, servicio y entrega total.
 */
.unit-crsma {
    --unit-color: #D32F2F;
}

/* Comunidad de Scouts Adultos "P. Alfredo Leaden"
 * Rama: Scouts Adultos | Rango: +21 años
 * Gris que representa madurez, experiencia y guía.
 */
.unit-csapal {
    --unit-color: #9E9E9E;
}


/* ── UNIDADES HISTÓRICAS (Inactivas) ─────────────────────────────────
 * Estas unidades ya no están activas pero se preservan como parte
 * del patrimonio histórico del grupo. Mantienen los colores de su
 * rama original para coherencia visual.
 * ──────────────────────────────────────────────────────────────────── */

/* Manada "San Antonio de Padua" — Histórica
 * Rama: Manada | Color: amarillo dorado
 */
.unit-mlsap {
    --unit-color: #FBC02D;
}

/* Ronda "De la Fe" — Histórica
 * Rama: Ronda | Color: amarillo dorado
 */
.unit-rcf {
    --unit-color: #FBC02D;
}

/* Tropa Scout "San Vicente Pallotti" — Histórica
 * Rama: Tropa Scout | Color: verde institucional scout
 */
.unit-tssvp {
    --unit-color: #2E7D32;
}

/* Comunidad Scout "Luz de María" — Histórica
 * Rama: Comunidad Scout | Color: verde institucional scout
 */
.unit-cslm {
    --unit-color: #2E7D32;
}

/* Tropa Scout "San Pablo Apóstol" — Histórica
 * Rama: Tropa Scout | Color: verde institucional scout
 */
.unit-tsspa {
    --unit-color: #2E7D32;
}

/* Comunidad Scout "María de Nazareth" — Histórica
 * Rama: Comunidad Scout | Color: verde institucional scout
 */
.unit-csmn {
    --unit-color: #2E7D32;
}