/* tokens.css — única fuente de verdad de color/tipografía/espaciado. Ninguna otra hoja
   de estilos define un color suelto: todo referencia estas variables.

   FASE 1 (2026-08-01): paleta burdeos de la portada del libro, según el documento
   oficial de Majo `lidera-color-app.html`. Los dorados y las cremas casi no se mueven;
   lo que cambia es toda la familia del burdeos.

   Se mantienen los nombres en inglés (--burgundy, --gold, --cream) porque son los que
   ya referencian las ~10 hojas de estilo y los módulos JS. Al lado se documenta el
   nombre que usa Majo en sus prototipos, para poder cruzar los dos vocabularios sin
   tener que renombrar medio proyecto. */
:root {
  /* La app está diseñada en claro (crema y burdeos). Sin esta declaración, Chrome y
     Android pueden aplicar su "modo oscuro automático" e invertir tarjetas, tablas e
     inputs por su cuenta: las capturas de David mostraban la ficha con fondo negro y
     el burdeos apagado. Declarar el esquema le dice al navegador que no lo haga. */
  color-scheme: only light;

  /* ---- Burdeos (familia nueva) ---- */
  --burgundy: #400906;        /* Majo: --vino · burdeos base, portada del libro */
  --burgundy-high: #5A1410;   /* Majo: --vino-alto · arriba del degradado, hover */
  --burgundy-mid: #380806;    /* Majo: --vino-medio · medio del degradado */
  --burgundy-dark: #2C0604;   /* Majo: --vino-hondo · abajo del degradado, profundidad */

  /* ---- Dorados y papeles ---- */
  --gold: #A17A3C;            /* Majo: --dorado · filetes, bordes, foco */
  --gold-light: #C9A468;      /* Majo: --dorado-luz · dorado legible sobre vino */
  --cream: #F7F2EC;           /* Majo: --crema · fondo de pantalla clara */
  --paper: #FAF9F7;           /* Majo: --papel · tarjetas e inputs */
  --ink: #2A2420;             /* Majo: --tinta · texto sobre crema */

  /* ---- Grises y estados ---- */
  /* --gray se recalculó sobre la tinta nueva para que la escala de grises no quede
     desafinada respecto del burdeos. */
  --gray: #6E625C;
  --rule: #EFE8E0;
  --success: #3B6D11;
  --danger: #791F1F;
  --danger-bg: #FCEBEB;
  --locked-bg: #F3E6DD;
  --white: #FFFFFF;

  /* ---- Degradado de cabecera (Majo: .cabecera) ----
     Se guarda como token para que ninguna hoja lo reescriba a mano. */
  --header-gradient: linear-gradient(165deg, #4E110C 0%, #400906 55%, #330705 100%);
  /* Fondo de portada del login: radial con el vino alto arriba. */
  --cover-gradient: radial-gradient(120% 62% at 50% 10%, #54120D 0%, #400906 48%, #2E0604 100%);

  /* ---- Opacidades mínimas legibles (accesibilidad, Fase 1) ----
     El público de la app son mujeres de 35-50 leyendo en el teléfono, muchas veces
     con luz de día. La auditoría UX marcó textos al 42-55% que resultan ilegibles.
     Estas variables fijan el piso: nada de texto informativo por debajo de --text-soft. */
  --text-strong: rgba(42, 36, 32, 0.92);
  --text-body: rgba(42, 36, 32, 0.78);
  --text-soft: rgba(42, 36, 32, 0.66);   /* piso para texto informativo sobre crema */
  --text-muted: rgba(42, 36, 32, 0.58);  /* solo para apoyo no esencial */
  /* Sobre burdeos */
  --on-wine-strong: rgba(247, 242, 236, 0.95);
  --on-wine-soft: rgba(247, 242, 236, 0.78);

  /* Tipografía: serif editorial para títulos, sans limpia para todo lo demás,
     detalle caligráfico SOLO para el acento decorativo de la landing. */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* ---- Alias del documento de referencia (LIDERA-centro-de-control-y-fixes.html) ----
     Mismo valor, otro nombre. La maqueta y el manual de Majo hablan en castellano;
     las hojas viejas, en ingles. En vez de renombrar medio proyecto y arriesgar que
     una pantalla quede sin color, conviven los dos vocabularios apuntando al mismo
     token: si manana cambia el burdeos, cambia en un solo lugar y lo toman ambos. */
  --burdeos: var(--burgundy);
  --burdeos-2: var(--burgundy-high);
  --dorado: var(--gold);
  --dorado-cl: var(--gold-light);
  --crema: var(--cream);
  --papel: var(--paper);
  --linea: var(--rule);
  --crema-c: var(--locked-bg);
  --tinta: var(--ink);
  --gris: var(--gray);
  --verde: #56705E;
  --serif: var(--font-heading);
  --sans: var(--font-body);
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script: 'Tangerine', 'Brush Script MT', cursive;

  /* ---- Tamaños mínimos (accesibilidad, Fase 1) ---- */
  --font-min-nav: 12px;   /* piso en la barra de navegación (venía en 10.5px) */
  --font-min-body: 13px;
  --touch-min: 44px;      /* área táctil mínima */

  /* Ancho util de la app de clienta. Escala con la pantalla en vez de quedarse en el
     ancho de la maqueta de telefono: 430px en un escritorio se lee como una app rota.
     Los saltos coinciden con telefono / tablet / escritorio. */
  --ancho-app: 430px;

  /* Radios, sombra, espaciado — consistentes en toda la app */
  --radius-card: 14px;
  --radius-control: 8px;
  --radius-pill: 20px;
  /* Sombras recalculadas sobre el burdeos nuevo: rgba(64,9,6,…) manteniendo opacidad,
     como indica el aviso del documento de color. */
  --shadow-card: 0 1px 3px rgba(64, 9, 6, 0.06), 0 1px 2px rgba(64, 9, 6, 0.08);
  --shadow-raised: 0 3px 12px rgba(64, 9, 6, 0.07);
  --shadow-hover: 0 12px 24px rgba(64, 9, 6, 0.12);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --max-width-content: 1000px;
  --max-width-form: 420px;
  --max-width-phone: 430px;   /* marco móvil de los prototipos */
  --nav-bottom-height: 64px;

  --transition-suave: 180ms ease;
}

/* La app tiene un solo esquema: crema y burdeos. Si el sistema está en oscuro, se
   vuelven a declarar los mismos valores para que nada cambie. Majo vio la columna
   del formulario marrón en vez de crema y nos dijo "ese color no": era su navegador
   reinterpretando la página por su cuenta.

   Se declara `only light`, no `light` a secas. La diferencia importa: `light` dice
   "prefiero claro", y el modo oscuro automático de Chrome/Android igual puede
   invertir los colores. `only` dice "esta página existe solo en claro", que es la
   forma de quedar fuera de esa inversión. Esto es el cinturón además de los tirantes.

   Nota honesta: una extensión tipo Dark Reader inyecta su propio CSS con
   !important y ninguna hoja de estilos puede ganarle. Si el color sigue mal, hay
   que desactivar la extensión para este sitio. */
@media (prefers-color-scheme: dark) {
  :root {
    /* Solo se repite `color-scheme`, que es lo unico que hace falta para que el
       navegador no invente su propio modo oscuro.

       Antes este bloque repetia la paleta entera. Parecia inofensivo y no lo era:
       cualquier cambio de color habia que hacerlo dos veces, y al alinear la paleta a
       la maqueta de referencia solo se cambio arriba. Resultado: quien tuviera el
       telefono o el sistema en modo oscuro — o sea buena parte de las clientas —
       seguia viendo la crema y la tinta viejas, sin que nada lo avisara.

       Los valores viven una sola vez, en el :root de arriba. */
    color-scheme: only light;
  }
}

/* El ancho util crece por tramos. Se declara acá y no dentro del componente para que
   la barra inferior, la cabecera y el contenido usen todos el mismo numero: si cada
   uno tuviera el suyo, en el salto de tramo quedarian desalineados. */
@media (min-width: 700px)  { :root { --ancho-app: 620px; } }
@media (min-width: 1024px) { :root { --ancho-app: 760px; } }