/* Archivo base.css: Variables CSS y estilos GLOBALES (solo lo no reutilizable en componentes) */

/* Variables CSS globales */
:root {
    /* Paleta de colores */
    --bg-color: #E6E4E0;       /* Fondo */
    --text-color: #1A1A1A;     /* Texto principal */
    --tile-color-1: #0F499A;   /* Azul oscuro (para tiles) */
    --tile-color-2: #F8E7A5;   /* Amarillo claro (destacado) */
    --tile-color-3: #E6F2FF;   /* Azul claro (acento) */
    --shadow-color: rgba(0, 0, 0, 0.1); /* Sombra sutil */
    --hover-scale: 1.02; /* Escala al hacer hover */
}

/* Reset básico */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Accesibilidad: Enfoque visible para todos los elementos interactivos */
a:focus,
button:focus,
[tabindex]:focus {
    outline: 2px solid var(--tile-color-2); /* Amarillo claro */
    outline-offset: 2px;
}

/* Clase para ocultar elementos visualmente (accesibilidad) */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Estilo H2 para páginas secundarias - Degradado texto + barra degradada */
.secundaria-container h2,
.hub-page h2 {
    position: relative;
    padding-left: 1.2em;
    background: linear-gradient(to left, var(--text-color), var(--tile-color-1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    margin-bottom: 1.5em;
    font-size: clamp(1.3rem, 3.5vw, 1.6rem);
}

.secundaria-container h2::before,
.hub-page h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--tile-color-1), var(--text-color));
}