/* Cerebras · tema "Glassy dashboard". TODOS los valores visuales (color, cristal, radios, sombras, movimiento) viven aquí.
   Modo claro por defecto; oscuro con el sistema (si no elegiste "claro" en Ajustes) o con data-tema="oscuro".
   Tu foto de fondo: pon en :root  --foto-fondo: url("/assets/fondo.webp");  (WebP ≤150 KB, ya desenfocada o no: se desenfoca aquí). */

:root {
  /* Fondo: malla cálida beige · crema · ámbar */
  --fondo-base: #EDE3D1;
  --malla:
    radial-gradient(48% 52% at 12% 8%, rgba(255, 214, 140, .70), transparent 70%),
    radial-gradient(42% 46% at 88% 14%, rgba(255, 246, 228, .95), transparent 72%),
    radial-gradient(55% 60% at 78% 88%, rgba(240, 178, 82, .45), transparent 70%),
    radial-gradient(50% 55% at 18% 92%, rgba(222, 198, 160, .80), transparent 72%),
    linear-gradient(160deg, #F3EBDD 0%, #E9DCC6 100%);
  --foto-fondo: none;
  --blur-foto: 28px;

  /* Texto (contraste AA comprobado sobre el cristal claro) */
  --texto: #221C14;
  --texto-2: #54483A;
  --texto-3: #675A49;
  --linea: rgba(70, 50, 25, .11);
  --hueco: rgba(70, 50, 25, .07);

  /* Cristal */
  --superficie: rgba(255, 251, 244, .52);
  --superficie-alta: rgba(255, 251, 244, .70);
  --superficie-solida: rgba(250, 245, 236, .92);   /* sin blur: móvil y navegadores sin backdrop-filter */
  --superficie-pop: #FAF5EC;                         /* menús desplegables: opacos, siempre legibles */
  --borde-vidrio: rgba(255, 255, 255, .70);
  --brillo: inset 0 1px 0 rgba(255, 255, 255, .80);
  --blur: 16px;
  --blur-nav: 20px;
  --saturar: 150%;

  /* Acento ámbar */
  --acento: #F2B33D;
  --acento-suave: rgba(242, 179, 61, .22);
  --acento-texto: #855600;        /* ámbar legible como texto sobre claro */
  --sobre-acento: #221C14;

  /* Tarjetas oscuras de contraste */
  --contraste-fondo: #211B14;
  --contraste-borde: rgba(255, 255, 255, .08);
  --contraste-texto: #F7F0E4;
  --contraste-texto-2: rgba(247, 240, 228, .74);
  --contraste-hueco: rgba(255, 255, 255, .10);

  /* Datos (gráficos) */
  --dato-pista: rgba(70, 50, 25, .10);
  --dato-1: #F2B33D;
  --dato-2: #221C14;
  --dato-bien: #2F7D55;
  --dato-mal: #B4472F;

  /* Forma */
  --radio: 24px;
  --radio-medio: 18px;
  --radio-control: 14px;
  --radio-pildora: 999px;

  /* Sombras */
  --sombra-1: var(--brillo), 0 1px 2px rgba(80, 55, 20, .06), 0 14px 34px -18px rgba(80, 55, 20, .30);
  --sombra-2: var(--brillo), 0 2px 4px rgba(80, 55, 20, .06), 0 26px 46px -18px rgba(80, 55, 20, .38);
  --sombra-nav: var(--brillo), 0 10px 30px -12px rgba(80, 55, 20, .30);

  /* Movimiento */
  --dur: 200ms;
  --dur-lenta: 250ms;
  --curva: cubic-bezier(.2, .8, .2, 1);
  --elevar: -4px;


  /* Ventanas, formularios y capas */
  --hueco-2: rgba(70, 50, 25, .12);
  --superficie-ventana: rgba(251, 247, 240, .74);
  --blur-ventana: 28px;
  --campo: rgba(255, 255, 255, .62);
  --velo: rgba(60, 45, 25, .10);
  --velo-fuerte: rgba(40, 30, 15, .32);
  --sombra-ventana: var(--brillo), 0 40px 90px -30px rgba(80, 55, 20, .45);
  --semaforo-1: #FF5F57; --semaforo-2: #FEBC2E; --semaforo-3: #28C840;
  --video-fondo: #000000;

  /* Estados (texto siempre con contraste AA) */
  --bien-texto: #1F6B45;
  --aviso-texto: #7A4E00;
  --peligro-texto: #A23A24;
  --aviso-fondo: rgba(242, 179, 61, .14); --aviso-borde: rgba(133, 86, 0, .28);
  --peligro-fondo: rgba(180, 71, 47, .08); --peligro-borde: rgba(180, 71, 47, .30);
  --wa: #187A42; --wa-hover: #1C8B4B; --wa-texto: #FFFFFF;
  --toast-enlace: #F3D9A6;

  /* Velas (trading simulado) */
  --vela-sube: #2F8F5B; --vela-baja: #C8553D; --vela-entrada: #221C14;
  --vela-zona-sube: rgba(47, 143, 91, .12); --vela-zona-baja: rgba(200, 85, 61, .12); --vela-etiqueta: #FBF8F2;
  --rejilla: rgba(60, 45, 25, .08); --guia: rgba(60, 45, 25, .35);

  /* Categorías para donut/leyendas: orden fijo, validadas con dataviz (claro, superficie #F4EDE1). Máximo 5; el resto va a «Otros». */
  --cat-1: #C98A1C; --cat-2: #3F6FB0; --cat-3: #C2502F; --cat-4: #11957A; --cat-5: #9A5A9E; --cat-otros: #A79C8C;

  --selector: rgba(242, 179, 61, .35);
  --theme-color: #EDE3D1;
  color-scheme: light;
}

/* ── Modo oscuro ─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo-base: #15110C;
    --malla:
      radial-gradient(48% 52% at 12% 8%, rgba(214, 140, 40, .30), transparent 70%),
      radial-gradient(42% 46% at 88% 14%, rgba(120, 92, 58, .35), transparent 72%),
      radial-gradient(55% 60% at 78% 88%, rgba(196, 120, 30, .26), transparent 70%),
      radial-gradient(50% 55% at 18% 92%, rgba(70, 54, 36, .70), transparent 72%),
      linear-gradient(160deg, #1B160F 0%, #110D09 100%);
    --texto: #F4EDE1; --texto-2: #CDBFAA; --texto-3: #BFB19B;
    --linea: rgba(255, 240, 215, .10); --hueco: rgba(255, 240, 215, .07);
    --superficie: rgba(44, 36, 27, .52); --superficie-alta: rgba(54, 45, 34, .66); --superficie-solida: rgba(36, 30, 22, .94); --superficie-pop: #241E16;
    --borde-vidrio: rgba(255, 240, 215, .12); --brillo: inset 0 1px 0 rgba(255, 240, 215, .08);
    --acento: #F5BC4A; --acento-suave: rgba(245, 188, 74, .18); --acento-texto: #F5BC4A; --sobre-acento: #1B160F;
    --contraste-fondo: #F2E8D7; --contraste-borde: rgba(0, 0, 0, .06); --contraste-texto: #221C14; --contraste-texto-2: rgba(34, 28, 20, .74); --contraste-hueco: rgba(34, 28, 20, .10);
    --dato-pista: rgba(255, 240, 215, .10); --dato-1: #F5BC4A; --dato-2: #F4EDE1; --dato-bien: #5CC08A; --dato-mal: #E07A5F;
    --sombra-1: var(--brillo), 0 1px 2px rgba(0, 0, 0, .25), 0 14px 34px -18px rgba(0, 0, 0, .65);
    --sombra-2: var(--brillo), 0 2px 4px rgba(0, 0, 0, .25), 0 26px 46px -18px rgba(0, 0, 0, .75);
    --sombra-nav: var(--brillo), 0 10px 30px -12px rgba(0, 0, 0, .6);
    --selector: rgba(245, 188, 74, .30); --theme-color: #15110C;
    --hueco-2: rgba(255, 240, 215, .12); --superficie-ventana: rgba(30, 25, 18, .80); --campo: rgba(255, 240, 215, .06);
    --velo: rgba(0, 0, 0, .25); --velo-fuerte: rgba(0, 0, 0, .55); --sombra-ventana: var(--brillo), 0 40px 90px -30px rgba(0, 0, 0, .8);
    --bien-texto: #6FCF97; --aviso-texto: #F5BC4A; --peligro-texto: #F08A70;
    --aviso-fondo: rgba(245, 188, 74, .10); --aviso-borde: rgba(245, 188, 74, .30); --peligro-fondo: rgba(240, 138, 112, .08); --peligro-borde: rgba(240, 138, 112, .30);
    --toast-enlace: #855600;
    --vela-sube: #4CB97E; --vela-baja: #E07A5F; --vela-entrada: #F4EDE1; --vela-zona-sube: rgba(76, 185, 126, .14); --vela-zona-baja: rgba(224, 122, 95, .14); --vela-etiqueta: #15110C;
    --rejilla: rgba(255, 240, 215, .07); --guia: rgba(255, 240, 215, .35);
    --cat-1: #BF8320; --cat-2: #5584CC; --cat-3: #CF6243; --cat-4: #22A083; --cat-5: #A673B8; --cat-otros: #8C8070;
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --fondo-base: #15110C;
  --malla:
    radial-gradient(48% 52% at 12% 8%, rgba(214, 140, 40, .30), transparent 70%),
    radial-gradient(42% 46% at 88% 14%, rgba(120, 92, 58, .35), transparent 72%),
    radial-gradient(55% 60% at 78% 88%, rgba(196, 120, 30, .26), transparent 70%),
    radial-gradient(50% 55% at 18% 92%, rgba(70, 54, 36, .70), transparent 72%),
    linear-gradient(160deg, #1B160F 0%, #110D09 100%);
  --texto: #F4EDE1; --texto-2: #CDBFAA; --texto-3: #BFB19B;
  --linea: rgba(255, 240, 215, .10); --hueco: rgba(255, 240, 215, .07);
  --superficie: rgba(44, 36, 27, .52); --superficie-alta: rgba(54, 45, 34, .66); --superficie-solida: rgba(36, 30, 22, .94); --superficie-pop: #241E16;
  --borde-vidrio: rgba(255, 240, 215, .12); --brillo: inset 0 1px 0 rgba(255, 240, 215, .08);
  --acento: #F5BC4A; --acento-suave: rgba(245, 188, 74, .18); --acento-texto: #F5BC4A; --sobre-acento: #1B160F;
  --contraste-fondo: #F2E8D7; --contraste-borde: rgba(0, 0, 0, .06); --contraste-texto: #221C14; --contraste-texto-2: rgba(34, 28, 20, .74); --contraste-hueco: rgba(34, 28, 20, .10);
  --dato-pista: rgba(255, 240, 215, .10); --dato-1: #F5BC4A; --dato-2: #F4EDE1; --dato-bien: #5CC08A; --dato-mal: #E07A5F;
  --sombra-1: var(--brillo), 0 1px 2px rgba(0, 0, 0, .25), 0 14px 34px -18px rgba(0, 0, 0, .65);
  --sombra-2: var(--brillo), 0 2px 4px rgba(0, 0, 0, .25), 0 26px 46px -18px rgba(0, 0, 0, .75);
  --sombra-nav: var(--brillo), 0 10px 30px -12px rgba(0, 0, 0, .6);
  --selector: rgba(245, 188, 74, .30); --theme-color: #15110C;
  --hueco-2: rgba(255, 240, 215, .12); --superficie-ventana: rgba(30, 25, 18, .80); --campo: rgba(255, 240, 215, .06);
  --velo: rgba(0, 0, 0, .25); --velo-fuerte: rgba(0, 0, 0, .55); --sombra-ventana: var(--brillo), 0 40px 90px -30px rgba(0, 0, 0, .8);
  --bien-texto: #6FCF97; --aviso-texto: #F5BC4A; --peligro-texto: #F08A70;
  --aviso-fondo: rgba(245, 188, 74, .10); --aviso-borde: rgba(245, 188, 74, .30); --peligro-fondo: rgba(240, 138, 112, .08); --peligro-borde: rgba(240, 138, 112, .30);
  --toast-enlace: #855600;
  --vela-sube: #4CB97E; --vela-baja: #E07A5F; --vela-entrada: #F4EDE1; --vela-zona-sube: rgba(76, 185, 126, .14); --vela-zona-baja: rgba(224, 122, 95, .14); --vela-etiqueta: #15110C;
  --rejilla: rgba(255, 240, 215, .07); --guia: rgba(255, 240, 215, .35);
  --cat-1: #BF8320; --cat-2: #5584CC; --cat-3: #CF6243; --cat-4: #22A083; --cat-5: #A673B8; --cat-otros: #8C8070;
  color-scheme: dark;
}

/* Móvil: el blur es caro. Las tarjetas pasan a cristal opaco sin blur; solo la barra inferior lo conserva. */
@media (max-width: 760px), (pointer: coarse) {
  :root:root:root { --blur: 0px; --blur-ventana: 0px; --superficie: var(--superficie-solida); --superficie-alta: var(--superficie-solida); --superficie-ventana: var(--superficie-pop); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --dur-lenta: 0ms; --elevar: 0px; }
}
@media (prefers-reduced-transparency: reduce) {
  :root:root:root { --blur: 0px; --blur-nav: 0px; --blur-ventana: 0px; --superficie: var(--superficie-solida); --superficie-alta: var(--superficie-solida); --superficie-ventana: var(--superficie-pop); }
}