/* ==========================================================================
   Aura · Variables de diseño
   Fuente única de colores, tipografía, espaciado, radios y sombras.
   Importar una sola vez, antes que cualquier otro CSS de la app.
   ========================================================================== */

/* --- Fuentes (alojadas en la propia app, ver DISENO_AURA.md § Fuentes) ---- */
/* Subconjunto latino de @fontsource-variable/fraunces y @fontsource/montserrat,
   descargado en /fonts con sus licencias OFL (el proyecto no usa npm).
   Si se cambian los archivos, actualizar también la caché de sw.js. */
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-latin-opsz-normal.woff2") format("woff2-variations");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Color: marca ------------------------------------------------------ */
  --aura-telon: #641218;          /* Granate de Aura. Cabeceras, botón principal, pestaña activa */
  --aura-telon-oscuro: #45090D;   /* Pulsado del botón principal, texto sobre oro-claro */
  --aura-crema-telon: #FBF3E6;    /* Texto e iconos sobre granate */
  --aura-papel: #F7F3E3;          /* Crema de Aura. Fondo de todas las pantallas */

  /* --- Color: superficies y líneas -------------------------------------- */
  --aura-papel-claro: #FDFBF3;    /* Tarjetas, hojas, barra inferior */
  --aura-papel-tinta: #EEE7D2;    /* Rellenos suaves: chips, avatar sin foto, pista de progreso */
  --aura-linea: #E4DCC6;          /* Separadores y borde de tarjetas (decorativo) */
  --aura-linea-control: #9C8268;  /* Borde de botones secundarios, campos y casillas */
  --aura-perforado: #DDD3BA;      /* Línea discontinua de la entrada */

  /* --- Color: texto ----------------------------------------------------- */
  --aura-tinta: #2B1B1C;          /* Texto principal y titulares */
  --aura-tinta-media: #3D2B2C;    /* Texto de apoyo */
  --aura-tinta-suave: #6B5556;    /* Metadatos, rótulos, pestañas inactivas */

  /* --- Color: acentos --------------------------------------------------- */
  --aura-oro: #C9973F;            /* Estrella del estreno, rachas, anillo de foco. Nunca como texto sobre papel */
  --aura-oro-texto: #7A5414;      /* Texto dorado sobre papel: nombre de producción, fecha de estreno */
  --aura-oro-claro: #E2B866;      /* Acentos sobre granate: punto de notificación, avatar en cabecera */
  --aura-aviso: #9A3412;          /* Errores, faltas, cerrar sesión. Siempre con texto */

  /* --- Tipografía ------------------------------------------------------- */
  --aura-font-titulos: "Fraunces", Georgia, serif;
  --aura-font-texto: "Montserrat", system-ui, sans-serif;

  --aura-fs-saludo: 46px;         /* "Hola, Jorge" (Fraunces 500) */
  --aura-fs-fecha-entrada: 52px;  /* Día en el talón de la entrada (Fraunces 600) */
  --aura-fs-titulo-pantalla: 34px;/* Título de cada pestaña (Fraunces 600) */
  --aura-fs-titulo-entrada: 27px; /* Nombre del evento en la entrada (Fraunces 600) */
  --aura-fs-titulo-seccion: 24px; /* Encabezado de sección (Fraunces 600) */
  --aura-fs-destacado: 19px;      /* Estrenos, cifras medianas (Fraunces 600) */
  --aura-fs-titulo-tarjeta: 17px; /* Título de aviso, reto, persona (Montserrat 700) */
  --aura-fs-boton: 15px;          /* Montserrat 600 */
  --aura-fs-cuerpo: 14.5px;       /* Texto general (Montserrat 400) */
  --aura-fs-meta: 13px;           /* Fechas cortas, rótulos (Montserrat 600) */
  --aura-fs-etiqueta: 12px;       /* Chips y etiquetas (Montserrat 700) */
  --aura-fs-nav: 11px;            /* Rótulos de la barra inferior (Montserrat 600) */
  --aura-lh-cuerpo: 1.5;

  /* --- Espaciado -------------------------------------------------------- */
  --aura-space-1: 4px;
  --aura-space-2: 8px;
  --aura-space-3: 12px;
  --aura-space-4: 16px;           /* Margen de tarjetas respecto a la pantalla */
  --aura-space-5: 20px;           /* Margen lateral del contenido y relleno de tarjetas */
  --aura-space-6: 24px;
  --aura-space-8: 32px;           /* Entre secciones */

  /* --- Radios ----------------------------------------------------------- */
  --aura-radius-sm: 4px;          /* Esquina de la chincheta en notas del tablón */
  --aura-radius-chip: 12px;       /* Etiquetas */
  --aura-radius-campo: 14px;      /* Campos de formulario */
  --aura-radius-card: 18px;       /* Tarjetas, entrada, hojas */
  --aura-radius-pill: 999px;      /* Botones, chips de filtro, avatares */

  /* --- Sombras ---------------------------------------------------------- */
  --aura-shadow-entrada: 0 1px 0 rgba(69, 9, 13, 0.06), 0 18px 40px -18px rgba(69, 9, 13, 0.45);
  --aura-shadow-nota: 0 10px 24px -16px rgba(69, 9, 13, 0.40);

  /* --- Telón (fondo de cabecera) ---------------------------------------- */
  --aura-telon-pliegues: repeating-linear-gradient(90deg,
      rgba(0, 0, 0, 0.10) 0, rgba(255, 255, 255, 0.035) 18px, rgba(0, 0, 0, 0.10) 36px);

  /* --- Tamaño táctil mínimo -------------------------------------------- */
  --aura-tactil: 44px;
}

/* --- Base (solo color y familia: no cambia tamaños ni posiciones) -------- */
/* Los tamaños --aura-fs-* son de referencia para pantallas nuevas.
   NO se aplican a las existentes: allí se conserva el font-size actual. */
body {
  background-color: var(--aura-papel);
  color: var(--aura-tinta);
  font-family: var(--aura-font-texto);
}
button, input, select, textarea { font-family: inherit; }
a { color: var(--aura-telon); }
:focus-visible { outline-color: var(--aura-oro); }