/* ==========================================================================
   Base — reinicio, tipografía y lienzo de la app
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

/*
 * El atributo hidden tiene que poder ocultar.
 *
 * El navegador lo aplica con `display: none`, pero cualquier regla de autor
 * que declare display gana —no por especificidad, sino porque el estilo de
 * autor manda sobre el del navegador—. Como #app, .cabecera y .nav declaran
 * el suyo, `hidden` no les hacía nada y seguían pintándose: la barra inferior
 * aparecía en pantallas que la tienen desactivada.
 *
 * #cargando queda fuera a propósito: se retira con una transición y necesita
 * conservar su display para poder fundirse en vez de desaparecer de golpe.
 */
[hidden]:not(#cargando) { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  /* Altura dinámica: en iOS la barra del navegador cambia el viewport */
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100dvh;
  font-family: var(--f-texto);
  font-size: var(--t-cuerpo);
  line-height: var(--interlinea-cuerpo);
  font-weight: var(--peso-texto);
  color: var(--texto);
  background-color: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  overscroll-behavior-y: none;
  /* La app gestiona su propio scroll interno */
  overflow: hidden;
  position: relative;
}

/* ---- Aurora de fondo: el "aire" del diseño ------------------------------ */

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-fondo);
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(120% 62% at 78% -8%, var(--aurora-1) 0%, transparent 62%),
    radial-gradient(96% 50% at 8% 6%, var(--aurora-2) 0%, transparent 58%),
    radial-gradient(140% 74% at 50% 108%, var(--aurora-3) 0%, transparent 66%);
  opacity: 0.95;
  animation: respirar-aurora 22s var(--ease-respiro) infinite;
}

/* Grano finísimo: quita el banding de los degradados en pantallas OLED */
body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.34'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: overlay;
}

[data-tema="claro"] body::after { opacity: 0.05; }

/* ---- Tipografía --------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: var(--peso-display);
  line-height: var(--interlinea-titulo);
  letter-spacing: var(--track-titulo);
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: var(--peso-display-medio); }

p { text-wrap: pretty; }

.display {
  font-family: var(--f-display);
  font-size: var(--t-display);
  font-weight: var(--peso-display);
  line-height: var(--interlinea-apretada);
  letter-spacing: var(--track-display);
}

.etiqueta {
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-texto-fuerte);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
  line-height: 1.3;
}

.suave { color: var(--texto-suave); }
.tenue { color: var(--texto-tenue); }
.acentuado { color: var(--acento); }
.numero {
  font-family: var(--f-numero);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: var(--track-titulo);
}

/* ---- Elementos --------------------------------------------------------- */

a { color: var(--acento); text-decoration: none; }
a:focus-visible { outline: none; }

img, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/*
 * Red de seguridad para los iconos.
 *
 * Un SVG en línea con viewBox pero sin width ni height mide 300×150 px por
 * defecto, que es el tamaño de un elemento reemplazado sin dimensiones. Un
 * icono suelto dentro de un botón lo desfigura por completo.
 *
 * Va envuelto en :where() para que su especificidad sea cero: cualquier
 * componente que fije su propio tamaño manda sobre esto.
 */
:where(svg[viewBox="0 0 24 24"]:not([width])) {
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  border-radius: var(--r-full);
}

button { cursor: pointer; touch-action: manipulation; user-select: none; }
button:disabled { cursor: default; }

ul, ol { list-style: none; }

/* Foco visible, siempre redondeado y del color de la casa */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: var(--r-md);
}

::selection {
  background: var(--acento);
  color: var(--texto-sobre-acento);
}

/* Barras de scroll discretas donde el sistema las muestra */
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--verde-300-rgb) / 0.28) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgb(var(--verde-300-rgb) / 0.28);
  border-radius: var(--r-full);
}

/* ---- Utilidades --------------------------------------------------------- */

.oculto { display: none !important; }

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.centro { display: grid; place-items: center; }
.fila { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.crece { flex: 1 1 auto; min-width: 0; }
.sin-encoger { flex: 0 0 auto; }