/* ─────────────────────────────────────────────────────────────────────────
   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 */
  /* 🔴 NEGRO NEUTRO DE MARCA (7-oct-2026). Antes era #14161A: un carbón con tinte azulado (el
     canal azul era el más alto) y más claro que la web. Andrés lo notó: «el fondo no parece
     negro». Ahora la escalera está alineada a la web (synergywhole.com): negro casi puro, neutro,
     sin cast frío. Las tarjetas (--tinta-2) resaltan más sobre el fondo. */
  --tinta:      #0A0A0B;
  --tinta-2:    #141416;
  --tinta-3:    #1C1C1F;
  --linea:      #28282C;
  /* 🔴 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:        #161618;
  --aro-trazo:  #44444A;
  --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 */
  --energia: #EF7D34; /* ● energía con método (color de producto, no depende del tema) */
  --ingreso: #B49ACB; /* ◆ del propósito al ingreso */
  --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);
  /* 🔴 El acento de la UI genérica (botones, barras, focos). Neutro = oro; cada sección lo cambia
     abajo. Va aquí, una por línea, porque la guarda de «color que no existe» solo detecta las
     definiciones al inicio de línea. */
  --acento: var(--oro);
  /* 🔴 Color «de este componente»: cada tarjeta/cara lo fija inline a su color de producto
     (style="--c:var(--hacer)" etc.) y el CSS tiñe glifo y chip con él. Por defecto, oro. */
  --c: var(--oro);
}

/* 🔴 ● Energía es NARANJA. Sus pantallas (BARRA_DE[vista]==="energia") llevan el acento de
   producto en vez del verde del Ser y del azul genérico. El verde/azul siguen para Propósito
   y Finanzas; el verde de «bien» (--bien) se queda, es estado, no acento. */
body[data-seccion="energia"] { --ser: var(--energia); --hacer: var(--energia); }

/* 🔴 EL ACENTO DE LA UI SIGUE A LA SECCIÓN (6-oct-2026, decisión de Andrés). Hasta hoy el chrome
   genérico —botones, barras, focos, casillas, pestaña activa— estaba cableado al AZUL de Finanzas
   (`--hacer`), así que el login, la casa y la cuenta se veían azules en vez de la marca. Ahora ese
   chrome usa `--acento`: NEUTRO (casa, login, cuenta) = ORO —el acento de negro+oro—, y cada
   producto lidera con su color. 🔴 Lo SEMÁNTICO no usa --acento y no se toca: los triángulos del
   hexagrama (.hexa .hacer/.ser) y los glifos de producto de la casa siguen con --hacer/--ser/--oro,
   porque ahí el color ES el significado. El neutro (--acento = oro) se define arriba, en :root. */
body[data-seccion="lfp"]     { --acento: var(--hacer); }
body[data-seccion="energia"] { --acento: var(--energia); }
body[data-seccion="rumbo"],
body[data-seccion="atn"]     { --acento: var(--ser); }
body[data-seccion="ingreso"],
body[data-seccion="dpi"]     { --acento: var(--ingreso); }

: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;
}