/* --- styles/base/style-layout.css --- */

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family-base);
    overflow: hidden; 
    margin: 0;
    box-sizing: border-box;
    min-height: 100vh;

    /* 🟢 CORRECCIÓN: Usar la altura REAL calculada por JS, con fallback a la variable CSS */
    padding-top: var(--header-height-real, var(--header-height));
    
    padding-bottom: var(--footer-height-real); 
    
    /* ⭐️ A11Y: Aseguramos base 100% para respetar ajustes de navegador */
    font-size: 100%; 
    line-height: var(--line-height-base);

    letter-spacing: var(--letter-spacing-base);
    word-spacing: var(--word-spacing-base);

    /* ⭐️ FIX CLS/FLASH: El cuerpo inicia invisible para evitar parpadeos de Swiper */
    opacity: 0;
    transition: opacity var(--transition-speed) ease-in-out;
}

/* Clase que se añade vía JS cuando todo está listo */
body.app-loaded {
    opacity: 1;
}

.icon-obras-header,
.header-logo::after, .header-logo::before,
.icon-hamburguer, 
.card-volver-icon,
.card-icon-lead,
.menu-icon,
.cc-layer-plate,
.action-icon,
.info-adicional-titulo-ayuda::before {
    background-color: var(--color-header-text);
    /* 🟢 Evita el cuadrado: máscara circular de color suave por defecto */
    -webkit-mask-image: radial-gradient(circle, black 70%, transparent 75%);
    mask-image: radial-gradient(circle, black 70%, transparent 75%);

    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;

    opacity: 1;

    /* 🟢 Forzamos al navegador a estar atento al cambio de propiedad */
    transition: 
        mask-image var(--animation-speed) ease-out,
        -webkit-mask-image var(--animation-speed) ease-out,
        background-color var(--animation-speed) ease;
}

/* 2. REFINAMIENTO PARA LA LICENCIA CC */
/* Al ser capas superpuestas, el placeholder del plato (plate) es suficiente */
.cc-layer-bg-circles,
.cc-layer-bg-letters,
.cc-layer-details {
    -webkit-mask-image: none;
    mask-image: none;
}

#vista-central {
    grid-column: 2 / 3; 
    width: 100%; height: 100%; position: relative; 
    overflow-x: hidden; 
    overflow-y: hidden; 
    display: flex; 
}

.vista {
    position: absolute; width: 100%; height: 100%; top: 0; left: 0;
    display: none;             
    z-index: 1;                
    pointer-events: none;      
    transition: opacity var(--animation-speed) ease; 
    opacity: 0;
}
.vista.active { 
    display: flex; flex-direction: column;
    z-index: 10;                 
    pointer-events: auto;        
    opacity: 1;
} 

#vista-volver {
    grid-column: 1 / 2; 
    position: relative; z-index: 50; 
    display: none; flex-direction: column;
    height: 100%; gap: var(--card-gap); 
    padding: var(--nav-carousel-top-offset) 15px 15px 15px; 
    box-sizing: border-box;
}
#vista-volver.visible { display: flex; }

    body[data-layout="tablet-portrait"] #app-container {
        display: grid;
        grid-template-columns: 1fr 3fr; 
    }
    body[data-layout="tablet-landscape"] #app-container,
    body[data-layout="desktop"] #app-container {
        display: grid;
        grid-template-columns: 1fr 3fr 1fr;
    }

    body[data-layout="tablet-landscape"] #info-adicional,
    body[data-layout="desktop"] #info-adicional {
        grid-column: 3 / 4; 
        width: 100%; 
        border-radius: 12px; 
        border: var(--border-width-no-focus) dashed var(--color-border-placeholder); 
        background: var(--color-card-bg); display: none; 
        box-sizing: border-box; 
        padding: var(--nav-carousel-top-offset) 15px 15px 15px; 
        height: 100%; overflow-y: auto; 
    }
    body[data-layout="mobile"] #info-adicional,
    body[data-layout="tablet-portrait"] #info-adicional {
        display: none !important; 
    }
    
    body[data-layout="mobile"] #info-adicional.visible,
    body[data-layout="tablet-portrait"] #info-adicional.visible { 
        display: none !important; 
    }
    body[data-layout="tablet-landscape"] #info-adicional.visible,
    body[data-layout="desktop"] #info-adicional.visible { 
        display: block !important; 
    }

    body[data-layout="mobile"] .footer-separator-author,
    body[data-layout="mobile"] .footer-author-text {
        display: none !important; 
    }

#card-volver-fija-elemento:focus,
#card-volver-fija-elemento.focus-visible {
    border: var(--border-width-focus) solid var(--color-primary) !important;
}

.resize-animation-stopper * {
    animation: none !important;
    transition: none !important;
}

/* 🛡️ ESCUDO DE CRISTAL: Bloqueo de UI durante saltos de columnas vacías */
body.ui-blocked,
body.ui-blocked * {
    pointer-events: none !important;
    touch-action: none !important; /* Bloquea gestos de scroll nativos en móvil */
}

/* 🟢 SCROLLBARS AAA (Visibles, Contrastados y Accesibles) */
* {
    /* Estándar W3C moderno (Firefox) */
    scrollbar-width: auto; /* NUNCA usar 'thin' en AAA */
    scrollbar-color: var(--color-border-placeholder) var(--color-primary-bg);
}

/* Webkit (Chrome, Edge, Safari) */
*::-webkit-scrollbar {
    /* AAA: Ancho suficiente para interacción motriz (Target Size) */
    width: 14px; 
    height: 14px;
}

*::-webkit-scrollbar-track {
    background: var(--color-primary-bg);
    border-left: var(--border-width-no-focus) solid var(--color-border-placeholder);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--color-border-placeholder);
    border-radius: var(--border-radius);
    
    /* Crea un falso margen para que no toque los bordes, pero mantiene el hit-area grande */
    border: var(----border-width-no-focus) solid var(--color-primary-bg); 
}

*::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:active {
    /* Feedback visual inmediato al interactuar */
    background-color: var(--color-primary); 
}
/* --- styles/base/style-layout.css --- */