/* =========================================
   TIPOGRAFÍA LOCAL (sin Google Fonts: funciona en Modo Avión)
   Atkinson Hyperlegible, subconjunto latino (SIL Open Font License)
========================================= */
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('../assets/fonts/atkinson-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('../assets/fonts/atkinson-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* =========================================
   VARIABLES Y CONFIGURACIÓN BASE
========================================= */
:root {
    /* D2 · Cimientos de diseño (maqueta final del 22-oct-2026). Toda la app sale de estos tokens */
    --fondo-app: #1c1d1f; /* grafito (el negro está vetado) */
    --fondo-paneles: #242628; /* tarjetas y paneles */
    --fondo-paneles-2: #2c2e31; /* capa sobre un panel */
    --color-texto: #B9B6AF; /* hueso apagado: 47 % de luz, 7,5:1 sobre el panel (fotofobia) */
    --color-texto-secundario: #9a968f; /* 5,2:1 sobre el panel */
    --color-bordes: #3a3d41;
    --texto-principal: var(--color-texto);
    --texto-secundario: var(--color-texto-secundario);
    --color-titulo: var(--color-tema); /* títulos: color del tema elegido (cambia con él), en negrita */
    /* Letra: nada por debajo de 15,5 px (--letra-pequena). «Letra grande» en Ajustes sube todo un 15 % */
    --letra-pequena: 0.96875rem; /* 15,5 px: etiquetas, notas y pies (mínimo de la app) */
    --letra-base: 1rem;
    --letra-media: 1.125rem;
    --letra-grande: 1.375rem;
    --letra-titulo: 1.75rem;
    /* Espaciado medio por defecto; «Espaciado amplio» en Ajustes vuelve al de antes */
    --espaciado-letra: 0.06em;
    --espaciado-palabra: 0.12em;
    --radio-pequeno: 10px;
    --radio-medio: 14px;
    --radio-grande: 18px;
    --radio-placa: 24px;
    --sombra-suave: 0 2px 6px rgba(0, 0, 0, 0.3);
    --sombra-media: 0 8px 18px rgba(0, 0, 0, 0.4);
    --sombra-flotante: 0 10px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
    --velocidad-rapida: 160ms;
    --velocidad-suave: 400ms;
    /* Color de acento maestro: esmeralda por defecto; otras paletas con :root[data-tema] (abajo) */
    --color-tema: #10b981; /* Verde esmeralda (Gecko) */
    --color-tema-rgb: 16, 185, 129; /* para rgba(var(--color-tema-rgb), alfa) */
    --color-tema-claro: #34d399;
    --color-tema-neon: #00c896; /* resplandores y títulos (antes --verde-neon) */
    --color-tema-neon-rgb: 0, 200, 150;
    /* Anillo del tiempo (js/anillo-tiempo.js): segundo tono de la aurora y versión neón de Pinceladas */
    --anillo-acento: #22d3ee;
    --anillo-b-claro: #a7f3d0;
    --anillo-b-neon: #2af5b8;
    --anillo-b-acento: #38e8ff;
    --color-limit-break: #a855f7; /* violeta cósmico del Limit Break: solo brillos, bordes y barras */
    --color-limit-break-texto: #B79CF5; /* el mismo violeta para letra: 6,6:1 sobre el panel (el de brillos da 3,9:1) */
    --color-xp: var(--color-tema); /* alias heredado: estilos en línea de app.js */
    --color-barra-xp: #10b981; /* la barra de XP NO sigue al tema */
    --color-texto-sobre-tema: #1a1a1a; /* texto sobre fondos sólidos del tema (todas las paletas son claras) */
    /* Acciones sensibles (eliminar, abortar): gris piedra neutro en vez de rojo, para no generar alarma.
       ~6:1 sobre grafito (AA). Se distingue por icono y posición, no por un color de amenaza */
    --color-peligro: #a8a29e;
    --color-peligro-rgb: 168, 162, 158;
    /* Marca teñida con el Resplandor del Sistema (assets/marca/*-<tema>.png, mismo dibujo en cada tono) */
    --img-logo-refugio: url('../assets/marca/logo-refugio-esmeralda.png');
    --img-escudo-temporal: url('../assets/marca/escudo-temporal-esmeralda.png');
}

/* Temas de color: document.documentElement.dataset.tema = '<tema>' (sin atributo = esmeralda).
   Van en :root para que las variables derivadas (--color-xp, --verde-neon…) se recalculen.
   Todas las paletas son de ALTA LUMINOSIDAD para contrastar sobre el fondo grafito; el violeta
   NO es un tema: queda reservado a la animación del Limit Break (--color-limit-break, fijo) */
:root[data-tema="azul-suave"] { /* Azul Suave · Serenidad */
    --color-tema: #60a5fa;
    --color-tema-rgb: 96, 165, 250;
    --color-tema-claro: #bfdbfe;
    --color-tema-neon: #93c5fd;
    --color-tema-neon-rgb: 147, 197, 253;
    /* Anillo del tiempo (js/anillo-tiempo.js): segundo tono de la aurora y versión neón de Pinceladas */
    --anillo-acento: #a78bfa;
    --anillo-b-claro: #dbeafe;
    --anillo-b-neon: #93c5fd;
    --anillo-b-acento: #a5b4fc;
    --img-logo-refugio: url('../assets/marca/logo-refugio-azul-suave.png');
    --img-escudo-temporal: url('../assets/marca/escudo-temporal-azul-suave.png');
}

:root[data-tema="blanco-suave"] { /* Hueso · beige arena cálido y mate (sin blanco puro: menos fatiga ocular) */
    --color-tema: #d4c4b7;
    --color-tema-rgb: 212, 196, 183;
    --color-tema-claro: #e3d5ca;
    --color-tema-neon: #ece3db;
    --color-tema-neon-rgb: 236, 227, 219;
    /* Anillo del tiempo (js/anillo-tiempo.js): segundo tono de la aurora y versión neón de Pinceladas */
    --anillo-acento: #f5d0a9;
    --anillo-b-claro: #f5efe9;
    --anillo-b-neon: #ece3db;
    --anillo-b-acento: #f5d0a9;
    --color-texto-sobre-tema: #1a1a1a; /* grafito: ~10:1 sobre #d4c4b7 */
    --img-logo-refugio: url('../assets/marca/logo-refugio-blanco-suave.png');
    --img-escudo-temporal: url('../assets/marca/escudo-temporal-blanco-suave.png');
}

:root[data-tema="lavanda-claro"] { /* Lavanda · desaturada y tranquila */
    --color-tema: #9f7aea;
    --color-tema-rgb: 159, 122, 234;
    --color-tema-claro: #d6bcfa;
    --color-tema-neon: #b794f4;
    --color-tema-neon-rgb: 183, 148, 244;
    /* Anillo del tiempo (js/anillo-tiempo.js): segundo tono de la aurora y versión neón de Pinceladas */
    --anillo-acento: #f0abfc;
    --anillo-b-claro: #ede9fe;
    --anillo-b-neon: #c4a5ff;
    --anillo-b-acento: #f0abfc;
    --img-logo-refugio: url('../assets/marca/logo-refugio-lavanda-claro.png');
    --img-escudo-temporal: url('../assets/marca/escudo-temporal-lavanda-claro.png');
}

:root[data-tema="ambar"] { /* Ámbar Tostado */
    --color-tema: #d97706;
    --color-tema-rgb: 217, 119, 6;
    --color-tema-claro: #fcd34d;
    --color-tema-neon: #f59e0b;
    --color-tema-neon-rgb: 245, 158, 11;
    /* Anillo del tiempo (js/anillo-tiempo.js): segundo tono de la aurora y versión neón de Pinceladas */
    --anillo-acento: #f87171;
    --anillo-b-claro: #fef3c7;
    --anillo-b-neon: #fbbf24;
    --anillo-b-acento: #fb923c;
    --img-logo-refugio: url('../assets/marca/logo-refugio-ambar.png');
    --img-escudo-temporal: url('../assets/marca/escudo-temporal-ambar.png');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: inherit;
    user-select: none; /* Evita que el texto se seleccione al hacer toques rápidos en el móvil */
}

html {
    scroll-behavior: smooth;
}

/* Lectura (Ajustes > Preferencias): clases en <html> que pone js/bienestar.js */
html.letra-grande { font-size: 115%; }
html.espaciado-amplio { --espaciado-letra: 0.12em; --espaciado-palabra: 0.16em; }
html.texto-muy-suave { --color-texto: #A8A49C; --color-texto-secundario: #908c85; }

html,
body {
    background-color: var(--fondo-app);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
}

body {
    display: flex;
    justify-content: center;
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-size: clamp(var(--letra-pequena), 0.25vw + 0.92rem, 1.15rem);
    color: var(--color-texto);
    line-height: 1.5;
    letter-spacing: var(--espaciado-letra);
    word-spacing: var(--espaciado-palabra);
    /* DIS-59 · red de seguridad: con «Letra grande» y «Espaciado amplio» una palabra larga puede no caber
       en su caja; antes que salirse por el borde, se parte. Los diseños deben dejarle sitio (abajo, mínimos
       en rem); esto solo evita que el texto quede cortado si algo se escapa */
    overflow-wrap: break-word;
    background-color: var(--fondo-app);
    overflow-x: hidden;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
select {
    font-size: 1rem;
    padding: clamp(10px, 1.2vw, 14px) clamp(12px, 1.5vw, 18px);
    text-overflow: ellipsis; /* si el texto no cabe, termina en «…» en vez de cortarse a media letra */
}

button, input, select, textarea {
    font-family: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
}

/* WCAG 1.4.12: Espaciado de párrafos */
p {
    margin-bottom: 2em;
}

/* =========================================
   MARCO MAESTRO (Diseño Flexible & Responsivo)
========================================= */
#marco-app {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--fondo-app);
    position: relative;
    box-shadow: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* =========================================
   SISTEMA DE VISTAS Y VISIBILIDAD SPA (LA REGLA MAESTRA)
   Espaciado superior estándar, fluido y elegante idéntico a Ajustes
========================================= */
.vista,
.vista-app {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    padding: clamp(30px, 4vw, 50px) clamp(15px, 3vw, 30px);
    margin: 0 auto;
    max-width: 1440px;
    overflow-x: clip;
    transition: opacity 0.3s ease;
}

.vista.activo,
.vista.activa,
.vista-app.activo,
.vista-app.activa,
#vista-principal.activo,
#vista-planificador.activo,
#vista-planificacion.activo,
#vista-ajustes.activo,
#vista-buscador.activo,
#vista-completadas.activo,
#vista-completadas.activa,
#vista-completadas:target,
#vista-planificador:target {
    display: block !important;
    visibility: visible;
    opacity: 1;
    align-items: flex-start;
    justify-content: flex-start;
}

#vista-principal {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    align-items: flex-start;
    justify-content: flex-start;
}

/* =========================================
   TÍTULOS MAESTROS DE VISTA (JERARQUÍA PREMIUM - PLACA ESTRUCTURADA)
   Placa con fondo sutil, bordes redondeados, ancla inferior y sombra sólida
========================================= */
h1,
.vista h1,
.vista-app h1,
.cabecera-vista h1,
.header-superior h1,
#vista-campamento h1,
#titulo-planificacion,
#titulo-completadas,
#titulo-ajustes {
    display: inline-block;
    background: rgba(255, 255, 255, 0.015);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 2px solid rgba(var(--color-tema-neon-rgb), 0.9);
    box-shadow: 0 4px 20px rgba(var(--color-tema-neon-rgb), 0.15);
    text-shadow: 0 0 12px rgba(var(--color-tema-neon-rgb), 0.4);
    border-radius: 12px;
    padding: 12px 40px;
    margin-top: 0;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    line-height: 1.2;
    font-size: clamp(1.4rem, 2.4vw, 2.2rem);
    font-weight: 700;
    color: var(--color-tema);
    text-transform: uppercase;
    letter-spacing: 3px;
    visibility: visible;
    opacity: 1;
    max-width: 100%;
    box-sizing: border-box;
}

.header-superior,
.cabecera-vista {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    box-sizing: border-box;
}