/*
 * TEMAS DE COLOR: el único sitio donde se definen los colores de la app.
 * <html data-theme="dark"> = «Negro total» · <html data-theme="light"> = «Blanco total».
 * Para cambiar un color, cámbialo aquí en el tema que quieras; el resto de la app usa estas variables.
 * La interfaz no usa azul: lo seleccionado y los botones principales van en grises.
 */

/* ---------- Negro total (por defecto) ---------- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* selección y acento (sin azul) */
  --color-seleccion: #2a2a2a;        /* elemento activo: menú, filtros, insignias */
  --color-seleccion-hover: #1c1c1c;  /* al pasar el ratón por algo no activo */
  --color-acento: #e6e6e6;           /* botones principales, pestaña activa, curva */
  --color-acento-hover: #ffffff;
  --color-sobre-acento: #111111;     /* texto encima del acento */
  --color-foco: #8a8a8a;             /* bordes de foco y de elementos marcados */
  --color-sobre-peligro: #ffffff;    /* texto encima del rojo */
  --color-neutro: #4c8dff;           /* círculo de frase neutra: la ÚNICA excepción azul */

  /* fondos y texto */
  --bg: #000000;            /* fondo de la app */
  --surface: #0f0f0f;       /* paneles y tarjetas */
  --surface-2: #171717;     /* zonas dentro de las tarjetas */
  --head: #1e1e1e;          /* cabeceras de tabla, chips */
  --border: #2b2b2b;
  --border-strong: #3b3b3b;
  --text: #ececec;
  --muted: #9d9d9d;
  --strong: #ffffff;        /* títulos destacados */

  /* menú lateral */
  --side-bg: #080808;
  --side-border: #1e1e1e;
  --side-text: #bdbdbd;
  --side-strong: #ffffff;
  --side-soon-bg: #262626;

  /* acciones */
  --danger: #e5484d;
  --danger-h: #f06267;
  --row-hover: #141414;
  --focus-bg: #191919;

  /* resultados: verde = ganancia, rojo = pérdida, beige = BE */
  --tp-bg: #0d2a1a; --tp-fg: #5fd38d; --tp-border: #1d5a37;
  --sl-bg: #301012; --sl-fg: #ff8080; --sl-border: #6a2226;
  --be-bg: #2c2410; --be-fg: #e6c67e; --be-border: #5c4b1f;
  --pos: #3ccf83;
  --neg: #ff6161;

  /* avisos y resaltados */
  --warn-bg: #2a2210; --warn-border: #5c4a1a; --warn-fg: #f0cd7a;
  --mark-bg: #6b5714; --mark-current: #b8860b;

  /* importancia del SET UP */
  --imp-mandatory-bg: #3a1416; --imp-mandatory-fg: #ff9c9c;
  --imp-optional-bg: #242424;  --imp-optional-fg: #c4c4c4;
  --imp-suggested-bg: #33280e; --imp-suggested-fg: #f0c766;
  --checked-row: #0f2418;
  --important-bg: #1d0e10;

  /* capas */
  --overlay: rgba(0, 0, 0, .7);
  --lightbox-bg: rgba(0, 0, 0, .9);
  --backdrop: rgba(0, 0, 0, .6);
  --shadow: 0 10px 30px rgba(0, 0, 0, .6);
  --toast-bg: #262626; --toast-fg: #ffffff;
  --chart-guide: #5e5e5e;

  /* diagramas y gráficos de Aprendizaje */
  --dg-bg: #0b0b0b;
  --dg-panel: #171717;
  --dg-border: #272727;
  --dg-grid: #1d1d1d;
  --dg-text: #dedede;
  --dg-strong: #ffffff;
  --dg-muted: #919191;
  --dg-soft: #b9b9b9;
  --dg-off: #656565;
  --dg-btn: #191919; --dg-btn-border: #353535; --dg-btn-hover: #252525;
  /* mismos colores por tipo de elemento en los dos temas (solo cambia el tono para que se lean) */
  --dg-bull: #26a69a;
  --dg-bear: #ef5350;
  --dg-structure: #4c8dff;   /* estructura: BOS, COS, MSS, tendencia (azul: pendiente de que decidas) */
  --dg-liquidity: #f5b942;   /* liquidez: stops, EQH/EQL, barridas */
  --dg-poi: #b67cff;         /* zonas: POI, imbalance, soporte */
  --dg-neutral: #8b97ad;     /* rango / consolidación (gris azulado: pendiente de que decidas) */
}

/* ---------- Blanco total ---------- */
:root[data-theme="light"] {
  color-scheme: light;

  --color-seleccion: #ececec;
  --color-seleccion-hover: #f4f4f4;
  --color-acento: #2b2b2b;
  --color-acento-hover: #111111;
  --color-sobre-acento: #ffffff;
  --color-foco: #8c8c8c;
  --color-sobre-peligro: #ffffff;
  --color-neutro: #2563eb;

  --bg: #ffffff;
  --surface: #f7f7f7;
  --surface-2: #efefef;
  --head: #e8e8e8;
  --border: #dcdcdc;
  --border-strong: #c6c6c6;
  --text: #161616;
  --muted: #616161;
  --strong: #050505;

  --side-bg: #f6f6f6;
  --side-border: #e4e4e4;
  --side-text: #3c3c3c;
  --side-strong: #050505;
  --side-soon-bg: #e0e0e0;

  --danger: #cf3535;
  --danger-h: #b02a2a;
  --row-hover: #f1f1f1;
  --focus-bg: #ffffff;

  --tp-bg: #d5f3dd; --tp-fg: #0f5e28; --tp-border: #a9dfb9;
  --sl-bg: #fad6d6; --sl-fg: #951b1b; --sl-border: #efb1b1;
  --be-bg: #f1e6cc; --be-fg: #6b5019; --be-border: #e0cfa6;
  --pos: #12803a;
  --neg: #c42727;

  --warn-bg: #fff6df; --warn-border: #f0d68f; --warn-fg: #6b4e00;
  --mark-bg: #ffe58a; --mark-current: #ffb020;

  --imp-mandatory-bg: #fde2e2; --imp-mandatory-fg: #8f1c1c;
  --imp-optional-bg: #e9e9e9;  --imp-optional-fg: #404040;
  --imp-suggested-bg: #fff0cf; --imp-suggested-fg: #7a5300;
  --checked-row: #e8f7ed;
  --important-bg: #fff4f4;

  --overlay: rgba(0, 0, 0, .4);
  --lightbox-bg: rgba(0, 0, 0, .85);
  --backdrop: rgba(0, 0, 0, .35);
  --shadow: 0 10px 30px rgba(0, 0, 0, .16);
  --toast-bg: #222222; --toast-fg: #ffffff;
  --chart-guide: #a0a0a0;

  --dg-bg: #f7f7f7;
  --dg-panel: #ebebeb;
  --dg-border: #dcdcdc;
  --dg-grid: #e4e4e4;
  --dg-text: #222222;
  --dg-strong: #050505;
  --dg-muted: #616161;
  --dg-soft: #424242;
  --dg-off: #a6a6a6;
  --dg-btn: #ffffff; --dg-btn-border: #cbcbcb; --dg-btn-hover: #f0f0f0;
  --dg-bull: #089981;
  --dg-bear: #e0393f;
  --dg-structure: #2962ff;
  --dg-liquidity: #c98400;
  --dg-poi: #8a4fe0;
  --dg-neutral: #66748d;
}

/* controles del navegador (desplegables, campos, casillas, selección de texto) con los colores del tema */
input, select, textarea { background-color: var(--surface); color: var(--text); }
option, optgroup { background-color: var(--surface); color: var(--text); }
option:checked { background-color: var(--color-seleccion); color: var(--text); }
input[type=checkbox], input[type=radio], input[type=range], progress { accent-color: var(--color-acento); }
::selection { background: var(--color-seleccion); color: var(--text); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-foco); outline-offset: 2px; }