@charset "UTF-8";
/* ============================================
   BINAS PAGE HEADER - SISTEMA MODULAR DE TEMAS
   Versión: 3.0
   Fecha: Enero 2025
   
   Sistema modular con clases combinables:
   - Patrón (pattern-*): Define el diseño geométrico
   - Color (color-*): Define la paleta de colores
   - Intensidad (intensity-*): Define qué tan visible es el fondo
   
   Uso: class="binas-header-zone pattern-grid color-blue intensity-medium"
   ============================================ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CSS CUSTOM PROPERTIES - Variables base para el sistema de temas
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.binas-header-zone {
    /* Colores por defecto (se sobrescriben con color-*) */
    --theme-color: 113, 128, 150; /* RGB del color primario */
    --theme-color-dark: 45, 55, 72; /* RGB del color oscuro para títulos */
    --theme-color-hex: var(--color-gray-500); /* HEX para bordes */
    /* Intensidades por defecto (se sobrescriben con intensity-*) */
    --theme-gradient-start: 0.08; /* Opacidad inicio gradiente */
    --theme-gradient-end: 0.02; /* Opacidad fin gradiente */
    --theme-pattern-opacity: 0.04; /* Opacidad del patrón */
    --theme-decoration-opacity: 0.12; /* Opacidad decoraciones */
    --theme-border-width: 3px; /* Ancho borde inferior */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MAIN WRAPPER - Contenedor principal
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.binas-main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 4em);
    width: 100%;
    margin-top: 4em;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HEADER ZONE - Full Width con fondo temático
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.binas-header-zone {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: var(--outlook-bg-primary);
    border-bottom: 1px solid var(--outlook-border);
    /* padding-top: var(--spacing-6); Aumentado de spacing-4 a spacing-6 para más altura */
    /* padding-bottom: var(--spacing-4); Agregado padding inferior */
    min-height: 80px; /* Altura mínima garantizada */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BREADCRUMB INTEGRADO EN HEADER ZONE
   Posicionado en la parte inferior derecha
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.binas-breadcrumb-inline {
    display: flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    white-space: nowrap;
}

    .binas-breadcrumb-inline .breadcrumb {
        margin-bottom: 0;
        background: transparent;
        padding: 0;
        font-size: var(--font-size-xs);
    }

    .binas-breadcrumb-inline .breadcrumb-item a {
        color: var(--outlook-text-tertiary);
        text-decoration: none;
        font-size: var(--font-size-xs);
        transition: color 0.15s ease;
    }

        .binas-breadcrumb-inline .breadcrumb-item a:hover {
            color: var(--palette-blue-primary);
            text-decoration: underline;
        }

    .binas-breadcrumb-inline .breadcrumb-item.active a {
        font-weight: var(--font-weight-medium);
        color: var(--outlook-text-secondary);
    }

    .binas-breadcrumb-inline .breadcrumb-item + .breadcrumb-item::before {
        color: var(--outlook-text-tertiary);
        content: var(--bs-breadcrumb-divider, "/");
        font-size: var(--font-size-xs);
    }

/* Header zone compacto (sin page header, solo breadcrumb) */
.binas-header-zone.header-zone-compact {
    min-height: auto;
    border-bottom: 1px solid var(--outlook-border-light);
    background-color: var(--outlook-bg-primary);
}

    .binas-header-zone.header-zone-compact .binas-page-header {
        padding: var(--spacing-2) 0;
    }

/* Temas con breadcrumb: usar color temático sutil */
.binas-header-zone[class*="pattern-"] .binas-breadcrumb-inline .breadcrumb-item a,
.binas-header-zone[class*="theme-"] .binas-breadcrumb-inline .breadcrumb-item a {
    color: var(--outlook-text-secondary);
}

.binas-header-zone[class*="pattern-"] .binas-breadcrumb-inline .breadcrumb-item + .breadcrumb-item::before,
.binas-header-zone[class*="theme-"] .binas-breadcrumb-inline .breadcrumb-item + .breadcrumb-item::before {
    color: var(--outlook-text-tertiary);
}

/* Legacy: mantener compatibilidad con binas-breadcrumb-row si existe */
.binas-breadcrumb-row {
    padding: var(--spacing-2) 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONTENT ZONE - Contenido de la página
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.binas-content-zone {
    flex: 1;
    width: 100%;
    padding: var(--spacing-4) 0;
    /* Allow natural scroll flow — avoid fixed max-height that clips content */
    overflow: visible;
}

    /* Cuando el content-zone tiene un hijo flush, eliminar el padding externo
   para que las secciones full-bleed arranquen justo debajo del header zone.
   Navegadores mínimos requeridos: Chrome 105+, Firefox 121+, Safari 15.4+.
   Fallback gracioso: en navegadores sin soporte de :has(), el content-zone
   mantiene su padding: spacing-4 (12px top/bottom), lo cual es aceptable. */
    .binas-content-zone:has(> .content-zone-flush) {
        padding: 0;
    }

    /* Surface implícita: el hijo directo del content-zone (container del Layout)
   recibe fondo blanco + borde sutil para que el contenido no flote sobre
   el fondo gris del body. Clase .content-zone-transparent desactiva esto. */
    .binas-content-zone > .content-surface {
        background: var(--outlook-bg-primary);
        border: 1px solid var(--outlook-border-light);
        border-radius: var(--radius-lg);
        box-shadow: var(--outlook-shadow-subtle);
        padding: var(--spacing-md);
        overflow: auto;
    }

    /* Modo flush: sin card, sin padding, sin borde/sombra.
   Permite secciones full-bleed con fondos propios (home, landing pages). */
    .binas-content-zone > .content-zone-flush {
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        overflow: visible;
    }

    /* Cuando hay paneles internos, la surface puede ser neutra para que
   los .binas-content-panel blancos contrasten contra ella */
    .binas-content-zone > .content-surface.surface-neutral {
        background: var(--outlook-bg-tertiary, var(--outlook-bg-tertiary));
    }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONTENEDOR ADAPTABLE
   El .content-surface recibe padding horizontal reducido en pantallas pequeñas
   para maximizar el espacio disponible sin quitar el encuadre visual.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Extra-small: sin padding horizontal extra, solo el del container Bootstrap */
@media (max-width: 576px) {
    .binas-content-zone {
        padding: var(--spacing-2) 0;
    }

        .binas-content-zone > .content-surface {
            padding: var(--spacing-sm);
            border-radius: var(--radius-md);
        }
}

/* Small (576–767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .binas-content-zone > .content-surface {
        padding: var(--spacing-3);
    }
}

/* Medium (768–991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .binas-content-zone > .content-surface {
        padding: var(--spacing-4);
    }
}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAGE HEADER DISCRETO (BASE)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.binas-page-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4) 0;
    position: relative;
    z-index: 2;
}

.binas-page-header-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--outlook-icon-neutral);
    font-size: 1.5rem;
    opacity: 0.7;
    position: relative;
    z-index: 2;
}

.binas-page-header-content {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 2;
}

.binas-page-title {
    margin: 0;
    padding: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--outlook-text-primary);
    line-height: 1.3;
}

.binas-page-description {
    margin: var(--spacing-1) 0 0 0;
    padding: 0;
    font-size: var(--font-size-sm);
    color: var(--outlook-text-secondary);
    line-height: 1.5;
    max-width: 800px;
}

/* TEMPORAL: Forzar colores para debug */
.binas-page-title {
    color: var(--chakra-gray-700) !important; /* Gris muy oscuro */
}

.binas-page-description {
    color: var(--gray-700) !important; /* Gris medio */
}

.binas-page-header.compact {
    padding: var(--spacing-3) 0;
}

    .binas-page-header.compact .binas-page-header-icon {
        width: 32px;
        height: 32px;
        font-size: 1.25rem;
    }

    .binas-page-header.compact .binas-page-title {
        font-size: var(--font-size-md);
    }

.binas-page-header.borderless {
    border-bottom: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🎨 COLORES (color-*)
   Define la paleta de colores del tema
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Azul Institucional */
.binas-header-zone.color-blue {
    --theme-color: 74, 144, 226;
    --theme-color-dark: 44, 82, 130;
    --theme-color-hex: var(--palette-blue-primary);
}

/* Azul Agua (Infraestructura) */
.binas-header-zone.color-water {
    --theme-color: 0, 114, 187;
    --theme-color-dark: 0, 75, 124;
    --theme-color-hex: var(--palette-water);
}

/* Teal/Verde Azulado (Census) */
.binas-header-zone.color-teal {
    --theme-color: 56, 178, 172;
    --theme-color-dark: 40, 94, 97;
    --theme-color-hex: var(--chakra-teal-500);
}

/* Verde Esmeralda (Survey/Success) */
.binas-header-zone.color-green {
    --theme-color: 72, 187, 120;
    --theme-color-dark: 39, 103, 73;
    --theme-color-hex: var(--palette-green);
}

/* Naranja/Ámbar (Providers) */
.binas-header-zone.color-orange {
    --theme-color: 237, 137, 54;
    --theme-color-dark: 192, 86, 33;
    --theme-color-hex: var(--palette-amber);
}

/* Púrpura (Data/Analytics) */
.binas-header-zone.color-purple {
    --theme-color: 128, 90, 213;
    --theme-color-dark: 85, 60, 154;
    --theme-color-hex: var(--palette-purple);
}

/* Gris Neutro (Admin) */
.binas-header-zone.color-gray {
    --theme-color: 113, 128, 150;
    --theme-color-dark: 45, 55, 72;
    --theme-color-hex: var(--color-gray-500);
}

/* Rojo (Alertas/Crítico) */
.binas-header-zone.color-red {
    --theme-color: 229, 62, 62;
    --theme-color-dark: 155, 44, 44;
    --theme-color-hex: var(--chakra-red-500);
}

/* Índigo (Especial) */
.binas-header-zone.color-indigo {
    --theme-color: 102, 126, 234;
    --theme-color-dark: 67, 83, 143;
    --theme-color-hex: var(--palette-indigo);
}

/* Rosa (Especial) */
.binas-header-zone.color-pink {
    --theme-color: 237, 100, 166;
    --theme-color-dark: 184, 50, 128;
    --theme-color-hex: var(--pink-400);
}

/* Cian (Especial) */
.binas-header-zone.color-cyan {
    --theme-color: 0, 188, 212;
    --theme-color-dark: 0, 131, 143;
    --theme-color-hex: var(--material-cyan);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   💡 INTENSIDADES (intensity-*)
   Define qué tan visible/prominente es el fondo
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Suave - Muy sutil, apenas perceptible */
.binas-header-zone.intensity-soft {
    --theme-gradient-start: 0.04;
    --theme-gradient-end: 0.01;
    --theme-pattern-opacity: 0.02;
    --theme-decoration-opacity: 0.06;
    --theme-border-width: 2px;
}

/* Light - Sutil pero visible */
.binas-header-zone.intensity-light {
    --theme-gradient-start: 0.06;
    --theme-gradient-end: 0.02;
    --theme-pattern-opacity: 0.03;
    --theme-decoration-opacity: 0.08;
    --theme-border-width: 2px;
}

/* Medium - Equilibrado (por defecto) */
.binas-header-zone.intensity-medium {
    --theme-gradient-start: 0.10;
    --theme-gradient-end: 0.03;
    --theme-pattern-opacity: 0.05;
    --theme-decoration-opacity: 0.12;
    --theme-border-width: 3px;
}

/* Strong - Prominente */
.binas-header-zone.intensity-strong {
    --theme-gradient-start: 0.15;
    --theme-gradient-end: 0.05;
    --theme-pattern-opacity: 0.08;
    --theme-decoration-opacity: 0.18;
    --theme-border-width: 4px;
}

/* Bold - Muy prominente */
.binas-header-zone.intensity-bold {
    --theme-gradient-start: 0.20;
    --theme-gradient-end: 0.08;
    --theme-pattern-opacity: 0.12;
    --theme-decoration-opacity: 0.25;
    --theme-border-width: 5px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🔷 PATRONES (pattern-*)
   Define el diseño geométrico del fondo
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* --- Base para todos los patrones con color --- */
.binas-header-zone[class*="pattern-"][class*="color-"] {
    border-bottom-color: var(--theme-color-hex);
    border-bottom-width: var(--theme-border-width);
    border-bottom-style: solid;
}

    .binas-header-zone[class*="pattern-"][class*="color-"] .binas-page-header-icon {
        color: var(--theme-color-hex);
        opacity: 1;
    }

    .binas-header-zone[class*="pattern-"][class*="color-"] .binas-page-title {
        color: rgb(var(--theme-color-dark));
    }

/* === PATRÓN: GRID (Cuadrícula de puntos) === */
.binas-header-zone.pattern-grid {
    background: linear-gradient(135deg, rgba(var(--theme-color), var(--theme-gradient-start)) 0%, rgba(var(--theme-color), var (--theme-gradient-end)) 100% ), radial-gradient(circle, rgba(var(--theme-color), var(--theme-pattern-opacity)) 1.5px, transparent 1.5px);
    background-size: 100% 100%, 20px 20px;
}

/* === PATRÓN: DIAGONAL (Líneas diagonales) === */
.binas-header-zone.pattern-diagonal {
    background: linear-gradient(135deg, rgba(var(--theme-color), var(--theme-gradient-start)) 0%, rgba(var(--theme-color), var(--theme-gradient-end)) 100% ), repeating-linear-gradient( 45deg, transparent, transparent 20px, rgba(var(--theme-color), var(--theme-pattern-opacity)) 20px, rgba(var(--theme-color), var(--theme-pattern-opacity)) 40px );
}

    .binas-header-zone.pattern-diagonal::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(var(--theme-color), calc(var(--theme-decoration-opacity) + 0.02)) 0%, transparent 70%);
        pointer-events: none;
    }

/* === PATRÓN: WAVES (Ondas horizontales) === */
.binas-header-zone.pattern-waves {
    background: linear-gradient(135deg, rgba(var(--theme-color), var(--theme-gradient-start)) 0%, rgba(var(--theme-color), var(--theme-gradient-end)) 100% ), repeating-linear-gradient( 0deg, transparent, transparent 10px, rgba(var(--theme-color), var(--theme-pattern-opacity)) 10px, rgba(var(--theme-color), var(--theme-pattern-opacity)) 12px );
}

    .binas-header-zone.pattern-waves::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: repeating-linear-gradient( 90deg, transparent, transparent 12px, rgba(var(--theme-color), calc(var(--theme-decoration-opacity) + 0.1)) 12px, rgba(var(--theme-color), calc(var(--theme-decoration-opacity) + 0.1)) 24px );
        pointer-events: none;
    }

    .binas-header-zone.pattern-waves::after {
        content: '';
        position: absolute;
        top: 0;
        right: 10%;
        width: 100px;
        height: 100%;
        background: linear-gradient(180deg, rgba(var(--theme-color), var(--theme-decoration-opacity)) 0%, transparent 100%);
        clip-path: polygon(50% 0%, 100% 0%, 50% 100%, 0% 100%);
        pointer-events: none;
    }

/* === PATRÓN: CIRCLES (Círculos concéntricos) === */
.binas-header-zone.pattern-circles {
    background: linear-gradient(135deg, rgba(var(--theme-color)), var(--theme-gradient-start) 0%, rgba(var(--theme-color)), var(--theme-gradient-end) 100% ), radial-gradient(circle at 95% 50%, rgba(var(--theme-color), calc(var(--theme-pattern-opacity) + 0.02)) 0%, transparent 50%), radial-gradient(circle at 5% 80%, rgba(var(--theme-color), var(--theme-pattern-opacity) 0%, transparent 40%));
}

    .binas-header-zone.pattern-circles::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 5%;
        transform: translateY(-50%);
        width: 180px;
        height: 180px;
        border: 3px solid rgba(var(--theme-color), var(--theme-decoration-opacity));
        border-radius: 50%;
        pointer-events: none;
    }

    .binas-header-zone.pattern-circles::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 5%;
        transform: translateY(-50%);
        width: 120px;
        height: 120px;
        border: 2px solid rgba(var(--theme-color), calc(var(--theme-decoration-opacity) - 0.04));
        border-radius: 50%;
        pointer-events: none;
    }

/* === PATRÓN: BARS (Barras verticales) === */
.binas-header-zone.pattern-bars {
    background: linear-gradient(135deg, rgba(var(--theme-color)), var(--theme-gradient-start) 0%, rgba(var(--theme-color)), var(--theme-gradient-end) 100% ), repeating-linear-gradient( 90deg, transparent, transparent 18px, rgba(var(--theme-color), var(--theme-pattern-opacity)) 18px, rgba(var(--theme-color), var(--theme-pattern-opacity)) 22px );
}

    .binas-header-zone.pattern-bars::before {
        content: '';
        position: absolute;
        top: 15%;
        right: 5%;
        width: 12px;
        height: 70%;
        background: rgba(var(--theme-color), var(--theme-decoration-opacity));
        border-radius: 6px;
        pointer-events: none;
    }

    .binas-header-zone.pattern-bars::after {
        content: '';
        position: absolute;
        top: 30%;
        right: 8%;
        width: 12px;
        height: 50%;
        background: rgba(var(--theme-color), calc(var(--theme-decoration-opacity) - 0.04));
        border-radius: 6px;
        pointer-events: none;
    }

/* === PATRÓN: HEXAGON (Hexágonos) === */
.binas-header-zone.pattern-hexagon {
    background: linear-gradient(135deg, rgba(var(--theme-color), var(--theme-gradient-start)) 0%, rgba(var(--theme-color), var(--theme-gradient-end)) 100% ), linear-gradient(60deg, transparent 47%, rgba(var(--theme-color), var(--theme-pattern-opacity)) 47%, rgba(var(--theme-color), var(--theme-pattern-opacity)) 53%, transparent 53%), linear-gradient(-60deg, transparent 47%, rgba(var(--theme-color), var(--theme-pattern-opacity)) 47%, rgba(var(--theme-color), var(--theme-pattern-opacity)) 53%, transparent 53%);
    background-size: 100% 100%, 40px 70px, 40px 70px;
}

    .binas-header-zone.pattern-hexagon::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 8%;
        transform: translateY(-50%) rotate(30deg);
        width: 80px;
        height: 80px;
        border: 3px solid rgba(var(--theme-color), var (--theme-decoration-opacity));
        pointer-events: none;
    }

/* === PATRÓN: CROSS (Cruz/Más) === */
.binas-header-zone.pattern-cross {
    background: linear-gradient(135deg, rgba(var(--theme-color), var(--theme-gradient-start)) 0%, rgba(var(--theme-color), var(--theme-gradient-end)) 100% ), linear-gradient(90deg, transparent 48%, rgba(var(--theme-color), var(--theme-pattern-opacity)) 48%, rgba(var(--theme-color), var(--theme-pattern-opacity)) 52%, transparent 52%), linear-gradient(0deg, transparent 48%, rgba(var(--theme-color), var(--theme-pattern-opacity)) 48%, rgba(var(--theme-color), var(--theme-pattern-opacity)) 52%, transparent 52%);
    background-size: 100% 100%, 25px 25px, 25px 25px;
}

/* === PATRÓN: DIAMOND (Diamantes/Rombos) === */
.binas-header-zone.pattern-diamond {
    background: linear-gradient(135deg, rgba(var(--theme-color), var(--theme-gradient-start)) 0%, rgba(var(--theme-color), var(--theme-gradient-end)) 100% ), linear-gradient(45deg, transparent 48%, rgba(var(--theme-color), var(--theme-pattern-opacity)) 48%, rgba(var(--theme-color), var(--theme-pattern-opacity)) 52%, transparent 52%), linear-gradient(-45deg, transparent 48%, rgba(var(--theme-color), var(--theme-pattern-opacity)) 48%, rgba(var(--theme-color), var(--theme-pattern-opacity)) 52%, transparent 52%);
    background-size: 100% 100%, 30px 30px, 30px 30px;
}

    .binas-header-zone.pattern-diamond::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 6%;
        transform: translateY(-50%) rotate(45deg);
        width: 60px;
        height: 60px;
        border: 3px solid rgba(var(--theme-color), var (--theme-decoration-opacity));
        pointer-events: none;
    }

/* === PATRÓN: ZIGZAG === */
.binas-header-zone.pattern-zigzag {
    background: linear-gradient(135deg, rgba(var(--theme-color), var(--theme-gradient-start)) 0%, rgba(var(--theme-color), var(--theme-gradient-end)) 100% ), linear-gradient(135deg, rgba(var(--theme-color), var(--theme-pattern-opacity)) 25%, transparent 25%), linear-gradient(225deg, rgba(var(--theme-color), var(--theme-pattern-opacity)) 25%, transparent 25%), linear-gradient(315deg, rgba(var(--theme-color), var(--theme-pattern-opacity)) 25%, transparent 25%), linear-gradient(45deg, rgba(var(--theme-color), var(--theme-pattern-opacity)) 25%, transparent 25%);
    background-size: 100% 100%, 20px 20px, 20px 20px, 20px 20px, 20px 20px;
}

/* === PATRÓN: TRIANGLES (Triángulos) === */
.binas-header-zone.pattern-triangles {
    background: linear-gradient(135deg, rgba(var(--theme-color), var(--theme-gradient-start)) 0%, rgba(var(--theme-color), var(--theme-gradient-end)) 100% ), linear-gradient(60deg, transparent 65%, rgba(var(--theme-color), var(--theme-pattern-opacity)) 65%), linear-gradient(-60deg, transparent 65%, rgba(var(--theme-color), var(--theme-pattern-opacity)) 65%);
    background-size: 100% 100%, 24px 42px, 24px 42px;
}

    .binas-header-zone.pattern-triangles::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 5%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 40px solid transparent;
        border-right: 40px solid transparent;
        border-bottom: 70px solid rgba(var(--theme-color), var (--theme-decoration-opacity));
        pointer-events: none;
    }

/* === PATRÓN: GRADIENT (Solo gradiente, sin patrón) === */
.binas-header-zone.pattern-gradient {
    background: linear-gradient(135deg, rgba(var(--theme-color), var(--theme-gradient-start)) 0%, rgba(var(--theme-color), var(--theme-gradient-end)) 100% );
}

    .binas-header-zone.pattern-gradient::before {
        content: '';
        position: absolute;
        top: -30%;
        right: -5%;
        width: 250px;
        height: 250px;
        background: radial-gradient(circle, rgba(var(--theme-color), var(--theme-decoration-opacity)) 0%, transparent 70%);
        pointer-events: none;
    }

/* === PATRÓN: SOLID (Fondo sólido sutil) === */
.binas-header-zone.pattern-solid {
    background: rgba(var(--theme-color), var(--theme-gradient-start));
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🏷️ TEMAS LEGACY/PRESETS (Mantienen compatibilidad hacia atrás)
   Combinaciones predefinidas para uso rápido
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* theme-public = pattern-diagonal + color-blue + intensity-medium */
.binas-header-zone.theme-public {
    --theme-color: 74, 144, 226;
    --theme-color-dark: 44, 82, 130;
    --theme-color-hex: var(--palette-blue-primary);
    --theme-gradient-start: 0.10;
    --theme-gradient-end: 0.03;
    --theme-pattern-opacity: 0.05;
    --theme-decoration-opacity: 0.12;
    --theme-border-width: 3px;
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.10) 0%, rgba(74, 144, 226, 0.03) 100%), repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(74, 144, 226, 0.05) 20px, rgba(74, 144, 226, 0.05) 40px);
    border-bottom: 3px solid var(--palette-blue-primary);
}

    .binas-header-zone.theme-public::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(74, 144, 226, 0.12) 0%, transparent 70%);
        pointer-events: none;
    }

    .binas-header-zone.theme-public .binas-page-header-icon {
        color: var(--palette-blue-primary);
        opacity: 1;
    }

    .binas-header-zone.theme-public .binas-page-title {
        color: #2C5282;
    }

/* theme-census = pattern-circles + color-teal + intensity-medium */
.binas-header-zone.theme-census {
    --theme-color: 56, 178, 172;
    --theme-color-dark: 40, 94, 97;
    --theme-color-hex: var(--chakra-teal-500);
    background: linear-gradient(135deg, rgba(56, 178, 172, 0.10) 0%, rgba(56, 178, 172, 0.03) 100%), radial-gradient(circle at 95% 50%, rgba(56, 178, 172, 0.08) 0%, transparent 50%), radial-gradient(circle at 5% 80%, rgba(56, 178, 172, 0.05) 0%, transparent 40%);
    border-bottom: 3px solid var(--chakra-teal-500);
}

    .binas-header-zone.theme-census::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 5%;
        transform: translateY(-50%);
        width: 180px;
        height: 180px;
        border: 3px solid rgba(56, 178, 172, 0.12);
        border-radius: 50%;
        pointer-events: none;
    }

    .binas-header-zone.theme-census::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 5%;
        transform: translateY(-50%);
        width: 120px;
        height: 120px;
        border: 2px solid rgba(56, 178, 172, 0.08);
        border-radius: 50%;
        pointer-events: none;
    }

    .binas-header-zone.theme-census .binas-page-header-icon {
        color: var(--chakra-teal-500);
        opacity: 1;
    }

    .binas-header-zone.theme-census .binas-page-title {
        color: #285E61;
    }

/* theme-infra = pattern-waves + color-water + intensity-medium */
.binas-header-zone.theme-infra {
    --theme-color: 0, 114, 187;
    --theme-color-dark: 0, 75, 124;
    --theme-color-hex: var(--palette-water);
    background: linear-gradient(135deg, rgba(0, 114, 187, 0.10) 0%, rgba(0, 114, 187, 0.03) 100%), repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(0, 114, 187, 0.05) 10px, rgba(0, 114, 187, 0.05) 12px);
    border-bottom: 3px solid var(--palette-water);
}

    .binas-header-zone.theme-infra::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: repeating-linear-gradient(90deg, transparent, transparent 12px, rgba(0, 114, 187, 0.22) 12px, rgba(0, 114, 187, 0.22) 24px);
        pointer-events: none;
    }

    .binas-header-zone.theme-infra::after {
        content: '';
        position: absolute;
        top: 0;
        right: 10%;
        width: 100px;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 114, 187, 0.12) 0%, transparent 100%);
        clip-path: polygon(50% 0%, 100% 0%, 50% 100%, 0% 100%);
        pointer-events: none;
    }

    .binas-header-zone.theme-infra .binas-page-header-icon {
        color: var(--palette-water);
        opacity: 1;
    }

    .binas-header-zone.theme-infra .binas-page-title {
        color: #004B7C;
    }

/* theme-providers = pattern-hexagon + color-orange + intensity-medium */
.binas-header-zone.theme-providers {
    --theme-color: 237, 137, 54;
    --theme-color-dark: 192, 86, 33;
    --theme-color-hex: var(--palette-amber);
    background: linear-gradient(135deg, rgba(237, 137, 54, 0.10) 0%, rgba(237, 137, 54, 0.03) 100%), linear-gradient(60deg, transparent 47%, rgba(237, 137, 54, 0.05) 47%, rgba(237, 137, 54, 0.05) 53%, transparent 53%), linear-gradient(-60deg, transparent 47%, rgba(237, 137, 54, 0.05) 47%, rgba(237, 137, 54, 0.05) 53%, transparent 53%);
    background-size: 100% 100%, 40px 70px, 40px 70px;
    border-bottom: 3px solid var(--palette-amber);
}

    .binas-header-zone.theme-providers::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 8%;
        transform: translateY(-50%) rotate(30deg);
        width: 80px;
        height: 80px;
        border: 3px solid rgba(237, 137, 54, 0.15);
        pointer-events: none;
    }

    .binas-header-zone.theme-providers .binas-page-header-icon {
        color: var(--palette-amber);
        opacity: 1;
    }

    .binas-header-zone.theme-providers .binas-page-title {
        color: var(--heatmap-medium-low-fg);
    }

/* theme-data = pattern-bars + color-purple + intensity-medium */
.binas-header-zone.theme-data {
    --theme-color: 128, 90, 213;
    --theme-color-dark: 85, 60, 154;
    --theme-color-hex: var(--palette-purple);
    background: linear-gradient(135deg, rgba(128, 90, 213, 0.10) 0%, rgba(128, 90, 213, 0.03) 100%), repeating-linear-gradient(90deg, transparent, transparent 18px, rgba(128, 90, 213, 0.05) 18px, rgba(128, 90, 213, 0.05) 22px);
    border-bottom: 3px solid var(--palette-purple);
}

    .binas-header-zone.theme-data::before {
        content: '';
        position: absolute;
        top: 15%;
        right: 5%;
        width: 12px;
        height: 70%;
        background: rgba(128, 90, 213, 0.12);
        border-radius: 6px;
        pointer-events: none;
    }

    .binas-header-zone.theme-data::after {
        content: '';
        position: absolute;
        top: 30%;
        right: 8%;
        width: 12px;
        height: 50%;
        background: rgba(128, 90, 213, 0.08);
        border-radius: 6px;
        pointer-events: none;
    }

    .binas-header-zone.theme-data .binas-page-header-icon {
        color: var(--palette-purple);
        opacity: 1;
    }

    .binas-header-zone.theme-data .binas-page-title {
        color: var(--chakra-purple-700);
    }

/* theme-admin = pattern-grid + color-gray + intensity-medium */
.binas-header-zone.theme-admin {
    --theme-color: 113, 128, 150;
    --theme-color-dark: 45, 55, 72;
    --theme-color-hex: var(--color-gray-500);
    background: linear-gradient(135deg, rgba(113, 128, 150, 0.10) 0%, rgba(113, 128, 150, 0.03) 100%), radial-gradient(circle, rgba(113, 128, 150, 0.06) 1.5px, transparent 1.5px);
    background-size: 100% 100%, 20px 20px;
    border-bottom: 3px solid var(--color-gray-500);
}

    .binas-header-zone.theme-admin .binas-page-header-icon {
        color: var(--color-gray-500);
        opacity: 1;
    }

    .binas-header-zone.theme-admin .binas-page-title {
        color: var(--chakra-gray-700);
    }

/* theme-survey = pattern-diagonal + color-green + intensity-medium */
.binas-header-zone.theme-survey {
    --theme-color: 72, 187, 120;
    --theme-color-dark: 39, 103, 73;
    --theme-color-hex: var(--palette-green);
    background: linear-gradient(135deg, rgba(72, 187, 120, 0.10) 0%, rgba(72, 187, 120, 0.03) 100%), repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(72, 187, 120, 0.05) 20px, rgba(72, 187, 120, 0.05) 40px);
    border-bottom: 3px solid var(--palette-green);
}

    .binas-header-zone.theme-survey .binas-page-header-icon {
        color: var(--palette-green);
        opacity: 1;
    }

    .binas-header-zone.theme-survey .binas-page-title {
        color: var(--green-700);
    }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 RESPONSIVE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
    .binas-page-header {
        padding: var(--spacing-3) 0;
        gap: var(--spacing-3);
    }

    .binas-page-header-icon {
        width: 32px;
        height: 32px;
        font-size: 1.25rem;
    }

    .binas-page-title {
        font-size: var(--font-size-md);
    }

    .binas-page-description {
        font-size: var(--font-size-xs);
    }

    /* Ocultar decoraciones en móvil */
    .binas-header-zone::before,
    .binas-header-zone::after {
        display: none;
    }

    .binas-content-zone {
        padding: var(--spacing-3) 0;
    }

    /* Breadcrumb integrado: pasar debajo del título en móvil */
    .binas-breadcrumb-inline {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 576px) {
    .binas-page-header {
        flex-direction: column;
        gap: var(--spacing-2);
    }

    .binas-page-header-icon {
        width: 28px;
        height: 28px;
        font-size: 1.1rem;
    }

    .binas-breadcrumb-inline {
        align-self: flex-start;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ♿ ACCESIBILIDAD
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (prefers-reduced-motion: reduce) {
    .binas-header-zone,
    .binas-header-zone::before,
    .binas-header-zone::after,
    .binas-page-header {
        transition: none;
        animation: none;
    }
}

@media (prefers-contrast: high) {
    .binas-header-zone[class*="pattern-"],
    .binas-header-zone[class*="theme-"] {
        background: var(--outlook-bg-primary) !important;
        border-bottom-width: 4px !important;
    }

    .binas-header-zone::before,
    .binas-header-zone::after {
        display: none !important;
    }
}