/* ============================================================
   PicoVillavo V2 — SISTEMA DE DISEÑO (base.css)
   ------------------------------------------------------------
   Extraído TAL CUAL de la V1 (referencia-v1/index.html).
   Fuentes de verdad:
     - Paleta de color : referencia-v1/index.html  :root  (líneas 31-36)
     - Tipografía       : referencia-v1/index.html  línea 23 (Google Fonts)
                          y línea 30 (body font-family)
     - Radios           : valores reales usados en V1 (8/10/12/14/16/20/24/pill)
     - Sombras          : box-shadow representativos de V1 (header, tarjetas, botones)
   Regla del proyecto: estos tokens NO se inventan; si falta un valor,
   se busca en la V1 y se pregunta antes de improvisar.
   ============================================================ */

/* ---- Tipografía de marca (V1 línea 23) ----
   Nunito, pesos 400 / 600 / 700 / 800 / 900.
   F1 (hecho): la fuente se carga con <link> + preconnect en el <head> de cada
   HTML (más rápido que @import). Las variables de peso siguen más abajo. */

:root {

  /* ===== COLOR — paleta exacta de la V1 (index.html :root, líneas 32-35) ===== */
  --blue-dark:   #0d1b6e;
  --blue:        #1565c0;
  --blue-mid:    #1976d2;
  --blue-light:  #e8eaf6;

  --green:       #2e7d32;
  --green-light: #e8f5e9;
  --red:         #c62828;
  --red-light:   #ffcdd2;
  --orange:      #e65100;
  --orange-light:#fff3e0;
  --purple:      #7b1fa2;
  --purple-light:#f3e5f5;

  --white: #fff;
  --gray:  #f8f9fa;
  --gray2: #e0e0e0;
  --text:  #1a237e;
  --muted: #888;

  /* Fondo de app (V1 body, línea 30) y color de tema PWA (V1 manifest) */
  --app-bg:       #f0f2ff;
  --theme-color:  #1A2748;
  --app-max-width: 480px;   /* V1 body: max-width:480px (línea 30) */

  /* ===== TIPOGRAFÍA ===== */
  --font-base: 'Nunito', sans-serif;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --fw-black: 900;

  /* ===== RADIOS — escala real usada en la V1 ===== */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ===== SOMBRAS — representativas de la V1 ===== */
  /* Tarjeta suave (V1 línea 154/162/278) */
  --shadow-card:   0 2px 12px rgba(0,0,0,.06);
  /* Tarjeta azul de marca (V1 línea 131/204) */
  --shadow-brand:  0 3px 12px rgba(13,27,110,.10);
  /* Header principal (V1 línea 89) */
  --shadow-header: 0 6px 24px rgba(13,27,110,.35);
  /* Botón elevado azul (V1 línea 329/362) */
  --shadow-btn:    0 6px 20px rgba(13,27,110,.30);
  /* Realce interior de botones de color (V1 líneas 112-114, 135-141) */
  --shadow-inset:  inset 0 1px 0 rgba(255,255,255,.25);
}

/* ===== RESET MÍNIMO + BASE ===== */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-base);         /* V1 línea 30 */
  background: var(--app-bg);              /* V1 línea 30: background:#f0f2ff */
  color: var(--text);
  min-height: 100vh;
  max-width: var(--app-max-width);        /* V1 línea 30: max-width:480px */
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
}