/* ─────────────────────────────────────────────────────────────────────────
   LA MARCA — los mismos tokens de las 66 portadas, los diagramas y la web.
   La app no inventa un sistema visual: hereda el que ya existe.
   Oscuro por defecto (es la marca), claro disponible.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* superficies */
  --tinta:      #14161A;
  --tinta-2:    #1B1E24;
  --tinta-3:    #242830;
  --linea:      #2E333C;
  /* 🔴 Los dos grises del anillo de Casa (1-sep-2026). Van AQUÍ y no sueltos en
     app.css porque son marca: el aro de fondo tiene que ser más oscuro que la
     línea normal para que los doce segmentos se lean POR ENCIMA, y el de un
     segmento pendiente más claro para que se distinga del aro. Pintarlos los
     dos del mismo gris borra los doce — pasó, y Andrés lo vio. */
  --aro:        #21252B;
  --aro-trazo:  #4A515C;
  --crema:      #F5F1E8;
  --crema-mate: #B9B4A8;
  /* 🔴 ACLARADO EL 2-SEP-2026, de #7E7A73 a #9A968F. Lo midió el mirador en
     461 pantallas: este gris lleva las etiquetas, las notas y las ayudas —o
     sea, casi todo lo que no es el texto principal— y no llegaba al mínimo
     legible sobre los fondos claros de la app:
         página #0E1116  → 4.43:1     tarjeta #242830 → 3.46:1
         papel  #1B1E24  → 3.91:1     veredicto       → 3.16:1
     El mínimo de la WCAG para texto normal es 4.5:1. Con #9A968F el PEOR de
     esos fondos da 4.58:1, y la diferencia con `--crema` (#F5F1E8) sigue
     marcando la jerarquía. Decisión de Andrés: su paleta, su llamada. */
  --crema-tenue:#9A968F;

  /* los dos triángulos */
  --ser:   #57A07C;   /* ▲ propósito */
  --hacer: #6B9FD0;   /* ▼ libertad financiera */
  --oro:   #D9B45E;

  /* estados: sobrios, nunca alarmistas */
  --bien:  #57A07C;
  --ojo:   #D9B45E;
  --duele: #C97A6A;

  --voz: 'Libre Baskerville', Baskerville, 'Palatino Linotype', Palatino, Georgia, serif;
  --ui:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radio: 4px;
  --fondo: var(--tinta);
  --papel: var(--tinta-2);
  --alto:  var(--tinta-3);
  --texto: var(--crema);
  --texto-mate: var(--crema-mate);
  --texto-tenue: var(--crema-tenue);
}

:root[data-tema="claro"] {
  --fondo: #FBF9F4;
  --papel: #FFFFFF;
  --alto:  #F1ECE0;
  --linea: #DED7C7;
  --aro:        #EDE7D9;
  --aro-trazo:  #C2B9A4;
  --texto: #191B20;
  --texto-mate: #55524B;
  --texto-tenue: #8A867D;
  --ser:   #2A6047;
  --hacer: #3A5E82;
  --oro:   #8A6B1C;
}

@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) {
    --fondo: #FBF9F4;
    --papel: #FFFFFF;
    --alto:  #F1ECE0;
    --linea: #DED7C7;
    --aro:        #EDE7D9;
    --aro-trazo:  #C2B9A4;
    --texto: #191B20;
    --texto-mate: #55524B;
    --texto-tenue: #8A867D;
    --ser:   #2A6047;
    --hacer: #3A5E82;
    --oro:   #8A6B1C;
  }
}

/* 🔴 Principio 2 del diseño: los números son los protagonistas.
   Tabulares SIEMPRE — si una cifra baila al actualizarse, se pierde la
   sensación de instrumento y parece una web. */
.cifra {
  font-family: var(--ui);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}