/*
 * Trading Life Journal — Design Tokens 3.3
 * Fase 11.13: paleta semántica centralizada + Acceso/Registro y Recuperar contraseña migrados.
 *
 * REGLA DE ARQUITECTURA
 * ---------------------
 * 1) Los colores canónicos viven aquí bajo --tlj-color-*.
 * 2) Los plugins migrados deben consumir esos tokens y no hexadecimales locales.
 * 3) --tlj-ui-* y los nombres legacy continúan como alias durante la migración.
 * 4) Cambiar Claro/Oscuro debe requerir editar únicamente este archivo.
 */

:root {
    /* Layout responsivo canónico */
    --tlj-layout-wide: 1460px;
    --tlj-layout-standard: 1320px;
    --tlj-layout-public: 1280px;
    --tlj-layout-readable: 980px;
    --tlj-layout-gutter: clamp(14px, 2.1vw, 30px);

    /* Geometría común */
    --tlj-radius-xs: 6px;
    --tlj-radius-sm: 9px;
    --tlj-radius-md: 12px;
    --tlj-radius-lg: 16px;
    --tlj-radius-xl: 22px;
    --tlj-customize-dialog-gap: clamp(12px, 2.3vh, 24px);
    --tlj-modal-corner-offset: 14px;
    --tlj-modal-pad-top: 0px;
    --tlj-modal-pad-x: 0px;
    --tlj-customize-btn-size: 36px;
    --tlj-toolbar-control-height: 46px;

    /* Transiciones comunes */
    --tlj-transition-fast: 140ms ease;
    --tlj-transition: 200ms ease;

    /* Línea degradada compartida por cabeceras de modales y menú de accesos rápidos. */
    --tlj-effect-modal-header-rule: linear-gradient(90deg, transparent 0%, rgba(var(--tlj-color-accent-rgb, 22, 157, 153), .35) 15%, var(--tlj-color-accent, #169d99) 50%, rgba(var(--tlj-color-accent-rgb, 22, 157, 153), .35) 85%, transparent 100%);

    /* Tipografía única de toda la web (Fase 11.63) */
    --tlj-font-family: Montserrat, Poppins, "Segoe UI", Arial, sans-serif;

    /* Fallbacks sin atributo de tema (compatibilidad/no-JS).
       Coinciden con los valores históricos previos a Fase 11. */
    --tlj-accent-rgb: 22, 157, 153;
    --tlj-positive: #4f9f78;
    --tlj-positive-rgb: 79, 159, 120;
    --tlj-negative: #cf6970;
    --tlj-negative-rgb: 207, 105, 112;
    --tlj-warning: #c7963f;
    --tlj-warning-rgb: 199, 150, 63;
    --tlj-breakeven: #5d95be;
    --tlj-breakeven-rgb: 93, 149, 190;
}

/* Tokens funcionales de Lista de Operaciones que también consume JavaScript. */
:root {
    --tlj-lista-row-positive-inline: #d4f7dc;
    --tlj-lista-row-negative-inline: #f7d4d4;
    --tlj-lista-row-breakeven-inline: #b9e8ff;
    --tlj-lista-actions-cell-bg: #000000;
    --tlj-lista-graph-accent: var(--tlj-color-accent, #5ce3de);
    --tlj-color-annotation-text-stroke: rgba(0, 0, 0, .72);
}

/* =========================================================
   PALETA CANÓNICA · OSCURO
   ========================================================= */
html[data-tlj-theme="dark"] {
    color-scheme: dark;

    /* Marca */
    --tlj-color-accent: #5ce3de;
    --tlj-color-accent-rgb: 92, 227, 222;
    --tlj-color-accent-strong: #28bdb8;
    --tlj-color-accent-soft: rgba(92, 227, 222, .08);
    --tlj-color-accent-text: var(--tlj-color-accent);
    --tlj-color-accent-soft-2: rgba(92, 227, 222, .055);
    --tlj-color-on-accent: #00090c;
    --tlj-effect-modal-header-bg: #112528;
    --tlj-effect-compare-scroll-bg: #060b0c;
    --tlj-effect-compare-cell-bg: #081011;
    --tlj-effect-compare-header-bg: #183a3a;
    --tlj-effect-compare-axis-bg: #0c1718;

    /* Lienzo y superficies */
    --tlj-color-page: #050708;
    --tlj-color-page-elevated: #06090a;
    --tlj-color-surface: #090d0e;
    --tlj-color-surface-2: #0b1112;
    --tlj-color-surface-3: #101718;
    --tlj-color-field: #070b0c;
    --tlj-color-logo-plate: #f4f7f7;
    --tlj-color-media-canvas: #050909;
    --tlj-color-media-canvas-text: #667476;
    --tlj-color-media-canvas-dim: #536063;
    --tlj-color-media-canvas-strong: #e7eeee;
    --tlj-color-on-media: #ffffff;
    --tlj-color-media-panel-rgb: 16, 25, 27;
    --tlj-color-media-panel-deep-rgb: 5, 9, 10;
    --tlj-color-on-media-rgb: 255, 255, 255;

    /* Tipografía */
    --tlj-color-text: #f4f9f9;
    --tlj-color-text-secondary: #dce5e6;
    --tlj-color-text-muted: #829093;
    --tlj-color-text-soft: #aebabc;
    --tlj-color-text-body: var(--tlj-color-text-muted);
    --tlj-color-text-muted-2: #6f7f82;
    --tlj-color-text-disabled: #526063;

    /* Bordes / divisores */
    --tlj-color-border: rgba(255, 255, 255, .075);
    --tlj-color-border-strong: rgba(92, 227, 222, .24);
    --tlj-color-border-accent: rgba(92, 227, 222, .48);
    --tlj-color-divider: rgba(255, 255, 255, .06);

    /* Interacción */
    --tlj-color-hover: rgba(92, 227, 222, .08);
    --tlj-color-hover-strong: rgba(92, 227, 222, .14);
    --tlj-color-active-bg: rgba(92, 227, 222, .12);
    --tlj-color-active-text: #f4f9f9;
    --tlj-color-focus-ring: rgba(92, 227, 222, .09);

    /* Formularios */
    --tlj-color-input-bg: #070b0c;
    --tlj-color-input-text: #e8f0f0;
    --tlj-color-input-placeholder: #667477;
    --tlj-color-input-placeholder-rgb: 102, 116, 119;
    --tlj-color-input-border: rgba(92, 227, 222, .18);
    --tlj-color-input-focus-border: rgba(92, 227, 222, .52);

    /* Botones secundarios / neutros */
    --tlj-color-button-bg: rgba(92, 227, 222, .055);
    --tlj-color-button-text: #dce5e6;
    --tlj-color-button-border: rgba(92, 227, 222, .28);
    --tlj-color-button-hover-bg: rgba(92, 227, 222, .12);
    --tlj-color-button-hover-text: #ffffff;

    /* Estados semánticos: base + representación contextual */
    --tlj-color-positive-base: #4f9f78;
    --tlj-color-positive-rgb: 79, 159, 120;
    --tlj-color-positive-bg: rgba(120, 219, 160, .08);
    --tlj-color-positive-text: #78dba0;

    --tlj-color-negative-base: #cf6970;
    --tlj-color-negative-rgb: 207, 105, 112;
    --tlj-color-negative-bg: rgba(255, 116, 123, .08);
    --tlj-color-negative-text: #ff747b;

    --tlj-color-warning-base: #c7963f;
    --tlj-color-warning-rgb: 199, 150, 63;
    --tlj-color-warning-bg: rgba(229, 184, 92, .08);
    --tlj-color-warning-text: #e5b85c;

    --tlj-color-breakeven-base: #5d95be;
    --tlj-color-breakeven-rgb: 93, 149, 190;
    --tlj-color-breakeven-bg: rgba(100, 169, 255, .08);
    --tlj-color-breakeven-text: #64a9ff;

    /* Canales vívidos para halos, bordes y fondos de estado. Se mantienen
       constantes entre temas para preservar la intensidad histórica. */
    --tlj-color-positive-vivid-rgb: 120, 219, 160;
    --tlj-color-negative-vivid-rgb: 255, 116, 123;
    --tlj-color-warning-vivid-rgb: 229, 184, 92;
    --tlj-color-breakeven-vivid-rgb: 100, 169, 255;
    --tlj-color-positive-vivid-text: #78dba0;
    --tlj-color-negative-vivid-text: #ff747b;
    --tlj-color-warning-vivid-text: #e5b85c;
    --tlj-color-breakeven-vivid-text: #64a9ff;
    --tlj-color-on-vivid: #183236;
    --tlj-color-on-positive-vivid: #1e6823;
    --tlj-color-on-negative-vivid: #9e1e1e;
    --tlj-color-on-breakeven-vivid: #234b73;
    --tlj-color-market-stock: var(--tlj-color-accent);
    --tlj-color-market-future: var(--tlj-color-positive-vivid-text);
    --tlj-color-market-forex: var(--tlj-color-warning-vivid-text);
    --tlj-color-market-crypto: var(--tlj-color-withdrawal);

    /* Overlays / modales */
    --tlj-color-overlay: rgba(5, 7, 8, .92);
    --tlj-color-modal-backdrop: rgba(237, 244, 244, .16);

    /* Ayudas «i» y tooltips (referencia: Estadísticas) */
    --tlj-color-info-border: rgba(92, 227, 222, .31);
    --tlj-color-info-bg: transparent;
    --tlj-color-info-text: var(--tlj-color-accent);
    --tlj-color-info-hover-border: var(--tlj-color-accent);
    --tlj-color-info-hover-bg: var(--tlj-color-accent);
    --tlj-color-info-hover-text: #041011;
    --tlj-color-tooltip-bg: #0a1011;
    --tlj-color-tooltip-border: rgba(92, 227, 222, .19);
    --tlj-color-tooltip-text: #b5c0c2;
    --tlj-color-tooltip-title: var(--tlj-color-accent);
    --tlj-color-tooltip-strong: #ffffff;
    --tlj-color-tooltip-backdrop: rgba(0, 0, 0, .35);
    --tlj-effect-tooltip-shadow: 0 22px 55px rgba(0, 0, 0, .55);

    /* Desplegables (referencia: Lista de Operaciones y Evolución) */
    --tlj-color-dropdown-bg: #080d0e;
    --tlj-color-dropdown-border: rgba(92, 227, 222, .31);
    --tlj-color-dropdown-text: #aebabc;
    --tlj-color-dropdown-hover-border: rgba(92, 227, 222, .14);
    --tlj-color-dropdown-hover-bg: rgba(92, 227, 222, .13);
    --tlj-color-dropdown-hover-text: #ffffff;
    --tlj-color-dropdown-selected-border: rgba(92, 227, 222, .30);
    --tlj-color-dropdown-selected-bg: rgba(92, 227, 222, .075);
    --tlj-color-dropdown-selected-text: var(--tlj-color-accent);
    --tlj-color-picker-hover-bg: #183a3a;
    --tlj-color-picker-selected-bg: var(--tlj-color-accent);
    --tlj-color-picker-selected-text: #031011;
    --tlj-effect-dropdown-shadow: 0 18px 40px rgba(0, 0, 0, .46);
    --tlj-color-filter-card-bg: #0b1113;
    --tlj-color-filter-card-border: rgba(92, 227, 222, .22);
    --tlj-color-filter-card-title: var(--tlj-color-accent);
    --tlj-color-filter-card-text: #9bafb2;
    /* Selectores de filtros compartidos (referencia visual: Gráficos). */
    --tlj-color-filter-selector-bg: #070d0f;
    --tlj-color-filter-selector-border: rgba(var(--tlj-color-accent-rgb), .4);
    --tlj-color-filter-selector-text: #dce9e9;
    --tlj-color-filter-selector-hover-bg: #122426;
    --tlj-color-filter-selector-hover-border: var(--tlj-color-accent);
    --tlj-color-filter-selector-hover-text: var(--tlj-color-accent);
    --tlj-color-filter-selector-selected-bg: #183a3a;
    --tlj-color-filter-selector-selected-border: var(--tlj-color-accent);
    --tlj-color-filter-selector-selected-text: #9bf2ef;
    --tlj-effect-filter-card-shadow: none;

    /* Loading */
    --tlj-color-loading-overlay: rgba(3, 6, 7, .90);
    --tlj-color-loading-surface: #080d0e;
    --tlj-color-loading-text: #c6d0d1;
    --tlj-color-loading-border: rgba(92, 227, 222, .25);

    /* Scrollbars internas históricas */
    --tlj-color-scrollbar: #3abdb8;
    --tlj-color-scrollbar-hover: #5ce3de;
    --tlj-color-scrollbar-track: #0a1011;

    /* Scrollbar principal (se conserva exactamente como antes). */
    --tlj-color-page-scrollbar: #5ce3de;
    --tlj-color-page-scrollbar-hover: #78eeea;

    /* Tablas Lista / Evolución */
    --tlj-color-ledger-zebra: #090f10;
    --tlj-color-ledger-group: #0b1112;
    --tlj-selection-column-bg: #183a3a;
    --tlj-color-ledger-delete-hover-bg: #1a1214;
    --tlj-color-ledger-delete-hover-text: #ff9ca0;
    --tlj-color-ledger-positive-hover: rgba(120, 219, 160, .14);
    --tlj-color-ledger-negative-hover: rgba(255, 116, 123, .14);
    --tlj-color-ledger-breakeven-hover: rgba(100, 169, 255, .14);

    /* Gráficos: fuente común para la futura migración de plugins. */
    --tlj-color-chart-positive: var(--tlj-color-positive-base);
    --tlj-color-chart-negative: var(--tlj-color-negative-base);
    --tlj-color-chart-warning: var(--tlj-color-warning-base);
    --tlj-color-chart-breakeven: var(--tlj-color-breakeven-base);
    --tlj-color-chart-grid: var(--tlj-color-divider);
    --tlj-color-chart-axis: var(--tlj-color-text-muted);
    --tlj-color-chart-text: var(--tlj-color-text-secondary);
    --tlj-color-chart-tooltip-bg: var(--tlj-color-surface-3);
    --tlj-color-chart-tooltip-text: var(--tlj-color-text);

    /* Sombras / efectos */
    --tlj-effect-shadow-sm: 0 8px 22px rgba(0, 0, 0, .20);
    --tlj-effect-shadow-md: 0 16px 42px rgba(0, 0, 0, .28);
    --tlj-effect-shadow-lg: 0 24px 60px rgba(0, 0, 0, .38);
    --tlj-effect-shadow-loading: 0 25px 65px rgba(0, 0, 0, .48);
    --tlj-effect-shadow-header-menu: 0 4px 14px rgba(0, 0, 0, .18);
    --tlj-effect-shadow-popover: 0 12px 30px rgba(0, 0, 0, .30);
    --tlj-effect-active-inset: inset 0 0 0 1px rgba(255, 255, 255, .08);
    --tlj-effect-market-shade: linear-gradient(90deg, rgba(var(--tlj-color-shadow-rgb), .38), transparent 28%), linear-gradient(180deg, rgba(var(--tlj-color-shadow-rgb), .65), transparent 24%, transparent 70%, rgba(var(--tlj-color-shadow-rgb), .78));
    --tlj-effect-market-shade-blend: normal;

    /* Canales RGB globales para transparencias controladas desde los plugins. */
    --tlj-color-page-rgb: 5, 7, 8;
    --tlj-color-surface-rgb: 9, 13, 14;
    --tlj-color-surface-2-rgb: 11, 17, 18;
    --tlj-color-field-rgb: 7, 11, 12;
    --tlj-color-text-rgb: 244, 249, 249;
    --tlj-color-text-secondary-rgb: 220, 229, 230;
    --tlj-color-text-muted-rgb: 130, 144, 147;
    --tlj-color-text-muted-2-rgb: 111, 127, 130;
    --tlj-color-contrast-rgb: 255, 255, 255;
    --tlj-color-shadow-rgb: 0, 0, 0;

    /* Interacciones semánticas compartidas. */
    --tlj-color-negative-hover-border: rgba(255, 109, 115, .34);
    --tlj-color-negative-hover-bg: rgba(255, 109, 115, .065);
    --tlj-color-negative-hover-text: #ff6d73;
    --tlj-color-negative-hover-border-strong: rgba(255, 109, 115, .38);
    --tlj-color-negative-hover-bg-strong: rgba(255, 109, 115, .075);
    --tlj-color-warning-hover-border: var(--tlj-color-warning-text);
    --tlj-color-warning-hover-bg: rgba(var(--tlj-color-warning-rgb), .12);
    --tlj-color-warning-hover-text: var(--tlj-color-warning-text);

    /* Avisos semánticos ampliados. */
    --tlj-color-warning-heading-soft: #e9d6a7;
    --tlj-color-warning-copy-muted: #7b7568;
    --tlj-color-warning-action: #e9c978;
    --tlj-color-warning-heading-strong: #f0d58d;
    --tlj-color-warning-copy-soft: #a99a76;
    --tlj-color-warning-action-soft: #efd184;
    --tlj-color-negative-heading-soft: #ffadb1;
    --tlj-color-negative-copy-muted: #9d7c7f;
    --tlj-color-negative-action: #ffc0c3;

    /* ---------------------------------------------------------
       ALIAS DE COMPATIBILIDAD
       No crear nuevos colores aquí: todos apuntan a --tlj-color-*.
       --------------------------------------------------------- */
    --tlj-ui-accent: var(--tlj-color-accent);
    --tlj-ui-accent-strong: var(--tlj-color-accent-strong);
    --tlj-ui-accent-soft: var(--tlj-color-accent-soft);
    --tlj-ui-page: var(--tlj-color-page);
    --tlj-ui-page-elevated: var(--tlj-color-page-elevated);
    --tlj-ui-surface: var(--tlj-color-surface);
    --tlj-ui-surface-2: var(--tlj-color-surface-2);
    --tlj-ui-surface-3: var(--tlj-color-surface-3);
    --tlj-ui-field: var(--tlj-color-field);
    --tlj-ui-text: var(--tlj-color-text);
    --tlj-ui-text-2: var(--tlj-color-text-secondary);
    --tlj-ui-muted: var(--tlj-color-text-muted);
    --tlj-ui-muted-2: var(--tlj-color-text-muted-2);
    --tlj-ui-border: var(--tlj-color-border);
    --tlj-ui-border-strong: var(--tlj-color-border-strong);
    --tlj-ui-divider: var(--tlj-color-divider);
    --tlj-ui-hover: var(--tlj-color-hover);
    --tlj-ui-active-bg: var(--tlj-color-active-bg);
    --tlj-ui-input-bg: var(--tlj-color-input-bg);
    --tlj-ui-scrollbar: var(--tlj-color-scrollbar);
    --tlj-ui-scrollbar-hover: var(--tlj-color-scrollbar-hover);
    --tlj-ui-scrollbar-track: var(--tlj-color-scrollbar-track);
    --tlj-ui-ledger-zebra: var(--tlj-color-ledger-zebra);
    --tlj-ui-ledger-group: var(--tlj-color-ledger-group);
    --tlj-ui-ledger-delete-hover-bg: var(--tlj-color-ledger-delete-hover-bg);
    --tlj-ui-ledger-delete-hover-text: var(--tlj-color-ledger-delete-hover-text);
    --tlj-ui-ledger-positive-hover: var(--tlj-color-ledger-positive-hover);
    --tlj-ui-ledger-negative-hover: var(--tlj-color-ledger-negative-hover);
    --tlj-ui-ledger-breakeven-hover: var(--tlj-color-ledger-breakeven-hover);

    --tlj-accent-rgb: var(--tlj-color-accent-rgb);
    --tlj-surface: var(--tlj-color-surface);
    --tlj-surface-2: var(--tlj-color-surface-2);
    --tlj-field: var(--tlj-color-field);
    --tlj-overlay: var(--tlj-color-overlay);

    --tlj-loading-overlay: var(--tlj-color-loading-overlay);
    --tlj-loading-surface: var(--tlj-color-loading-surface);
    --tlj-loading-text: var(--tlj-color-loading-text);
    --tlj-loading-border: var(--tlj-color-loading-border);
    --tlj-loading-shadow: var(--tlj-effect-shadow-loading);

    --tlj-text: var(--tlj-color-text);
    --tlj-muted: var(--tlj-color-text-muted);
    --tlj-muted-2: var(--tlj-color-text-muted-2);
    --tlj-border: var(--tlj-color-border);

    --tlj-input-placeholder: var(--tlj-color-input-placeholder);
    --tlj-input-border: var(--tlj-color-input-border);
    --tlj-input-focus-border: var(--tlj-color-input-focus-border);
    --tlj-focus-ring: var(--tlj-color-focus-ring);

    --tlj-button-bg: var(--tlj-color-button-bg);
    --tlj-button-text: var(--tlj-color-button-text);
    --tlj-button-border: var(--tlj-color-button-border);
    --tlj-button-hover-bg: var(--tlj-color-button-hover-bg);
    --tlj-button-hover-text: var(--tlj-color-button-hover-text);

    --tlj-positive: var(--tlj-color-positive-base);
    --tlj-positive-rgb: var(--tlj-color-positive-rgb);
    --tlj-positive-bg: var(--tlj-color-positive-bg);
    --tlj-positive-text: var(--tlj-color-positive-text);
    --tlj-negative: var(--tlj-color-negative-base);
    --tlj-negative-rgb: var(--tlj-color-negative-rgb);
    --tlj-negative-bg: var(--tlj-color-negative-bg);
    --tlj-negative-text: var(--tlj-color-negative-text);
    --tlj-warning: var(--tlj-color-warning-base);
    --tlj-warning-rgb: var(--tlj-color-warning-rgb);
    --tlj-warning-bg: var(--tlj-color-warning-bg);
    --tlj-warning-text: var(--tlj-color-warning-text);
    --tlj-breakeven: var(--tlj-color-breakeven-base);
    --tlj-breakeven-rgb: var(--tlj-color-breakeven-rgb);
    --tlj-breakeven-bg: var(--tlj-color-breakeven-bg);
    --tlj-breakeven-text: var(--tlj-color-breakeven-text);

    --tlj-shadow-sm: var(--tlj-effect-shadow-sm);
    --tlj-shadow-md: var(--tlj-effect-shadow-md);
    --tlj-shadow-lg: var(--tlj-effect-shadow-lg);


    --tlj-bg: var(--tlj-color-page);
    --tlj-panel: var(--tlj-color-surface);
    --tlj-panel-2: var(--tlj-color-surface-2);
    --tlj-white: var(--tlj-color-text);
    --tlj-line: var(--tlj-color-border);
    --tlj-turquoise: var(--tlj-color-accent);
    --tlj-turquoise-soft: var(--tlj-color-accent-soft);
    --tlj-turquoise-line: var(--tlj-color-border-strong);
}

/* =========================================================
   PALETA CANÓNICA · CLARO
   ========================================================= */
html[data-tlj-theme="light"] {
    color-scheme: light;

    /* Marca */
    --tlj-color-accent: #169d99;
    --tlj-color-accent-rgb: 22, 157, 153;
    --tlj-color-accent-strong: #0f8582;
    --tlj-color-accent-soft: rgba(22, 157, 153, .10);
    --tlj-color-accent-text: #0d7673;
    --tlj-color-accent-soft-2: rgba(22, 157, 153, .055);
    --tlj-color-on-accent: #ffffff;
    /* Cabeceras totalmente opacas: evita que el contenido en scroll se vea a través. */
    --tlj-effect-modal-header-bg: linear-gradient(90deg, var(--tlj-color-hover), var(--tlj-color-surface-2));
    --tlj-effect-compare-scroll-bg: var(--tlj-color-surface);
    --tlj-effect-compare-cell-bg: var(--tlj-color-surface);
    --tlj-effect-compare-header-bg: var(--tlj-color-hover);
    --tlj-effect-compare-axis-bg: var(--tlj-color-hover);

    /* Lienzo y superficies */
    --tlj-color-page: #edf4f4;
    --tlj-color-page-elevated: #f3f7f7;
    --tlj-color-surface: #ffffff;
    --tlj-color-surface-2: #f5f8f8;
    --tlj-color-surface-3: #eef4f4;
    --tlj-color-field: #f7f9f9;
    --tlj-color-logo-plate: #f4f7f7;
    --tlj-color-media-canvas: #101718;
    --tlj-color-media-canvas-text: #667476;
    --tlj-color-media-canvas-dim: #536063;
    --tlj-color-media-canvas-strong: #e7eeee;
    --tlj-color-on-media: #ffffff;
    --tlj-color-media-panel-rgb: 16, 25, 27;
    --tlj-color-media-panel-deep-rgb: 5, 9, 10;
    --tlj-color-on-media-rgb: 255, 255, 255;

    /* Tipografía */
    --tlj-color-text: #172326;
    --tlj-color-text-secondary: #314044;
    --tlj-color-text-muted: #5f6e71;
    --tlj-color-text-soft: var(--tlj-color-text-muted);
    --tlj-color-text-body: var(--tlj-color-text-secondary);
    --tlj-color-text-muted-2: #5d6c6f;
    --tlj-color-text-disabled: #a8b4b6;

    /* Bordes / divisores */
    --tlj-color-border: #d3e0e0;
    --tlj-color-border-strong: rgba(22, 157, 153, .28);
    --tlj-color-border-accent: var(--tlj-color-border-strong);
    --tlj-color-divider: #e1e9e9;

    /* Interacción */
    --tlj-color-hover: #e3f2f1;
    --tlj-color-hover-strong: #d5eceb;
    --tlj-color-active-bg: #d9efee;
    --tlj-color-active-text: #123638;
    --tlj-color-focus-ring: rgba(22, 157, 153, .10);

    /* Formularios */
    --tlj-color-input-bg: #f8fafa;
    --tlj-color-input-text: #243235;
    --tlj-color-input-placeholder: #8b989a;
    --tlj-color-input-placeholder-rgb: 139, 152, 154;
    --tlj-color-input-border: #cedddd;
    --tlj-color-input-focus-border: rgba(22, 157, 153, .52);

    /* Botones secundarios / neutros */
    --tlj-color-button-bg: #f8fbfb;
    --tlj-color-button-text: #314044;
    --tlj-color-button-border: #cbdada;
    --tlj-color-button-hover-bg: #e0f1f0;
    --tlj-color-button-hover-text: #153638;

    /* Estados semánticos */
    --tlj-color-positive-base: #4f9f78;
    --tlj-color-positive-rgb: 79, 159, 120;
    --tlj-color-positive-bg: #eaf6ef;
    --tlj-color-positive-text: #317a58;

    --tlj-color-negative-base: #cf6970;
    --tlj-color-negative-rgb: 207, 105, 112;
    --tlj-color-negative-bg: #fbecee;
    --tlj-color-negative-text: #a94d56;

    --tlj-color-warning-base: #c7963f;
    --tlj-color-warning-rgb: 199, 150, 63;
    --tlj-color-warning-bg: #fbf3df;
    --tlj-color-warning-text: #8e681e;

    --tlj-color-breakeven-base: #5d95be;
    --tlj-color-breakeven-rgb: 93, 149, 190;
    --tlj-color-breakeven-bg: #eaf3fa;
    --tlj-color-breakeven-text: #3f78a0;

    /* Canales vívidos: deliberadamente iguales al modo oscuro. */
    --tlj-color-positive-vivid-rgb: 120, 219, 160;
    --tlj-color-negative-vivid-rgb: 255, 116, 123;
    --tlj-color-warning-vivid-rgb: 229, 184, 92;
    --tlj-color-breakeven-vivid-rgb: 100, 169, 255;
    --tlj-color-positive-vivid-text: #78dba0;
    --tlj-color-negative-vivid-text: #ff747b;
    --tlj-color-warning-vivid-text: #e5b85c;
    --tlj-color-breakeven-vivid-text: #64a9ff;
    --tlj-color-on-vivid: #183236;
    --tlj-color-on-positive-vivid: #1e6823;
    --tlj-color-on-negative-vivid: #9e1e1e;
    --tlj-color-on-breakeven-vivid: #234b73;
    --tlj-color-market-stock: var(--tlj-color-accent);
    --tlj-color-market-future: var(--tlj-color-positive-vivid-text);
    --tlj-color-market-forex: var(--tlj-color-warning-vivid-text);
    --tlj-color-market-crypto: var(--tlj-color-withdrawal);

    /* Overlays / modales */
    --tlj-color-overlay: rgba(237, 244, 244, .94);
    --tlj-color-modal-backdrop: rgba(23, 35, 38, .30);

    /* Ayudas «i» y tooltips (referencia: Estadísticas) */
    --tlj-color-info-border: var(--tlj-color-border-strong);
    --tlj-color-info-bg: var(--tlj-color-surface-2);
    --tlj-color-info-text: var(--tlj-color-accent-strong);
    --tlj-color-info-hover-border: var(--tlj-color-border-strong);
    --tlj-color-info-hover-bg: var(--tlj-color-hover);
    --tlj-color-info-hover-text: var(--tlj-color-accent-strong);
    --tlj-color-tooltip-bg: var(--tlj-color-surface);
    --tlj-color-tooltip-border: var(--tlj-color-border);
    --tlj-color-tooltip-text: var(--tlj-color-text-secondary);
    --tlj-color-tooltip-title: var(--tlj-color-accent-strong);
    --tlj-color-tooltip-strong: var(--tlj-color-text);
    --tlj-color-tooltip-backdrop: rgba(237, 244, 244, .44);
    --tlj-effect-tooltip-shadow: var(--tlj-effect-shadow-lg);

    /* Desplegables (referencia: Lista de Operaciones y Evolución) */
    --tlj-color-dropdown-bg: var(--tlj-color-surface);
    --tlj-color-dropdown-border: var(--tlj-color-border);
    --tlj-color-dropdown-text: var(--tlj-color-text-secondary);
    --tlj-color-dropdown-hover-border: var(--tlj-color-border-strong);
    --tlj-color-dropdown-hover-bg: var(--tlj-color-hover);
    --tlj-color-dropdown-hover-text: var(--tlj-color-accent-strong);
    --tlj-color-dropdown-selected-border: var(--tlj-color-border-strong);
    --tlj-color-dropdown-selected-bg: var(--tlj-color-hover);
    --tlj-color-dropdown-selected-text: var(--tlj-color-accent-strong);
    --tlj-color-picker-hover-bg: var(--tlj-color-hover);
    --tlj-color-picker-selected-bg: var(--tlj-color-hover);
    --tlj-color-picker-selected-text: var(--tlj-color-accent-strong);
    --tlj-effect-dropdown-shadow: var(--tlj-effect-shadow-md);
    --tlj-color-filter-card-bg: var(--tlj-color-surface);
    --tlj-color-filter-card-border: var(--tlj-color-border-strong);
    --tlj-color-filter-card-title: var(--tlj-color-accent-strong);
    --tlj-color-filter-card-text: var(--tlj-color-text-muted);
    /* Selectores de filtros compartidos (modo claro). */
    --tlj-color-filter-selector-bg: var(--tlj-color-surface-2);
    --tlj-color-filter-selector-border: var(--tlj-color-border-strong);
    --tlj-color-filter-selector-text: var(--tlj-color-text-secondary);
    --tlj-color-filter-selector-hover-bg: var(--tlj-color-hover);
    --tlj-color-filter-selector-hover-border: var(--tlj-color-border-strong);
    --tlj-color-filter-selector-hover-text: var(--tlj-color-accent-strong);
    --tlj-color-filter-selector-selected-bg: var(--tlj-color-active-bg);
    --tlj-color-filter-selector-selected-border: var(--tlj-color-border-strong);
    --tlj-color-filter-selector-selected-text: var(--tlj-color-accent-strong);
    --tlj-effect-filter-card-shadow: var(--tlj-effect-shadow-sm);

    /* Loading */
    --tlj-color-loading-overlay: rgba(237, 244, 244, .94);
    --tlj-color-loading-surface: #ffffff;
    --tlj-color-loading-text: #314044;
    --tlj-color-loading-border: rgba(22, 157, 153, .24);

    /* Scrollbars internas históricas */
    --tlj-color-scrollbar: #65b7b3;
    --tlj-color-scrollbar-hover: #399f9b;
    --tlj-color-scrollbar-track: #e4ecec;

    /* Scrollbar principal (se conserva exactamente como antes). */
    --tlj-color-page-scrollbar: #169d99;
    --tlj-color-page-scrollbar-hover: #0f8582;

    /* Tablas Lista / Evolución */
    --tlj-color-ledger-zebra: #fbfdfd;
    --tlj-color-ledger-group: #e7f3f2;
    --tlj-selection-column-bg: var(--tlj-ui-active-bg);
    --tlj-color-ledger-delete-hover-bg: #f8dfe3;
    --tlj-color-ledger-delete-hover-text: #8f3e47;
    --tlj-color-ledger-positive-hover: #dff1e7;
    --tlj-color-ledger-negative-hover: #f8dfe3;
    --tlj-color-ledger-breakeven-hover: #dcecf7;

    /* Gráficos: fuente común para la futura migración de plugins. */
    --tlj-color-chart-positive: var(--tlj-color-positive-base);
    --tlj-color-chart-negative: var(--tlj-color-negative-base);
    --tlj-color-chart-warning: var(--tlj-color-warning-base);
    --tlj-color-chart-breakeven: var(--tlj-color-breakeven-base);
    --tlj-color-chart-grid: var(--tlj-color-divider);
    --tlj-color-chart-axis: var(--tlj-color-text-muted);
    --tlj-color-chart-text: var(--tlj-color-text-secondary);
    --tlj-color-chart-tooltip-bg: var(--tlj-color-surface);
    --tlj-color-chart-tooltip-text: var(--tlj-color-text);

    /* Sombras / efectos */
    --tlj-effect-shadow-sm: 0 8px 24px rgba(22, 48, 50, .06);
    --tlj-effect-shadow-md: 0 16px 42px rgba(22, 48, 50, .09);
    --tlj-effect-shadow-lg: 0 24px 60px rgba(22, 48, 50, .12);
    --tlj-effect-shadow-loading: 0 18px 45px rgba(24, 45, 48, .12);
    --tlj-effect-shadow-header-menu: 0 4px 14px rgba(22, 48, 50, .045);
    --tlj-effect-shadow-popover: 0 12px 30px rgba(19, 35, 38, .10);
    --tlj-effect-active-inset: inset 0 0 0 1px rgba(255, 255, 255, .48);
    --tlj-effect-market-shade: linear-gradient(0deg, rgba(var(--tlj-color-positive-rgb), .1), rgba(var(--tlj-color-positive-rgb), .1)), linear-gradient(90deg, color-mix(in srgb, var(--tlj-color-positive-bg) 6%, transparent), transparent 28%), linear-gradient(180deg, color-mix(in srgb, var(--tlj-color-positive-bg) 16%, transparent), transparent 25%, transparent 72%, color-mix(in srgb, var(--tlj-color-positive-bg) 30%, transparent));
    --tlj-effect-market-shade-blend: multiply;

    /* Canales RGB globales para transparencias. */
    --tlj-color-page-rgb: 237, 244, 244;
    --tlj-color-surface-rgb: 255, 255, 255;
    --tlj-color-surface-2-rgb: 245, 248, 248;
    --tlj-color-field-rgb: 247, 249, 249;
    --tlj-color-text-rgb: 23, 35, 38;
    --tlj-color-text-secondary-rgb: 49, 64, 68;
    --tlj-color-text-muted-rgb: 95, 110, 113;
    --tlj-color-text-muted-2-rgb: 93, 108, 111;
    --tlj-color-contrast-rgb: 25, 58, 62;
    --tlj-color-shadow-rgb: 24, 45, 48;

    /* Interacciones semánticas compartidas. */
    --tlj-color-negative-hover-border: rgba(196, 62, 72, .30);
    --tlj-color-negative-hover-bg: #fff0f1;
    --tlj-color-negative-hover-text: #9b3940;
    --tlj-color-negative-hover-border-strong: rgba(196, 62, 72, .30);
    --tlj-color-negative-hover-bg-strong: #fff0f1;
    --tlj-color-warning-hover-border: rgba(199, 150, 63, .34);
    --tlj-color-warning-hover-bg: #fff8e9;
    --tlj-color-warning-hover-text: #8a611a;

    /* Avisos semánticos ampliados. */
    --tlj-color-warning-heading-soft: #e9d6a7;
    --tlj-color-warning-copy-muted: #7b7568;
    --tlj-color-warning-action: #e9c978;
    --tlj-color-warning-heading-strong: #f0d58d;
    --tlj-color-warning-copy-soft: #a99a76;
    --tlj-color-warning-action-soft: #efd184;
    --tlj-color-negative-heading-soft: #ffadb1;
    --tlj-color-negative-copy-muted: #9d7c7f;
    --tlj-color-negative-action: #ffc0c3;

    /* ---------------------------------------------------------
       ALIAS DE COMPATIBILIDAD
       Mismos nombres y valores efectivos que Fase 10.8.
       --------------------------------------------------------- */
    --tlj-ui-accent: var(--tlj-color-accent);
    --tlj-ui-accent-strong: var(--tlj-color-accent-strong);
    --tlj-ui-accent-soft: var(--tlj-color-accent-soft);
    --tlj-ui-page: var(--tlj-color-page);
    --tlj-ui-page-elevated: var(--tlj-color-page-elevated);
    --tlj-ui-surface: var(--tlj-color-surface);
    --tlj-ui-surface-2: var(--tlj-color-surface-2);
    --tlj-ui-surface-3: var(--tlj-color-surface-3);
    --tlj-ui-field: var(--tlj-color-field);
    --tlj-ui-text: var(--tlj-color-text);
    --tlj-ui-text-2: var(--tlj-color-text-secondary);
    --tlj-ui-muted: var(--tlj-color-text-muted);
    --tlj-ui-muted-2: var(--tlj-color-text-muted-2);
    --tlj-ui-border: var(--tlj-color-border);
    --tlj-ui-border-strong: var(--tlj-color-border-strong);
    --tlj-ui-divider: var(--tlj-color-divider);
    --tlj-ui-hover: var(--tlj-color-hover);
    --tlj-ui-active-bg: var(--tlj-color-active-bg);
    --tlj-ui-input-bg: var(--tlj-color-input-bg);
    --tlj-ui-scrollbar: var(--tlj-color-scrollbar);
    --tlj-ui-scrollbar-hover: var(--tlj-color-scrollbar-hover);
    --tlj-ui-scrollbar-track: var(--tlj-color-scrollbar-track);
    --tlj-ui-ledger-zebra: var(--tlj-color-ledger-zebra);
    --tlj-ui-ledger-group: var(--tlj-color-ledger-group);
    --tlj-ui-ledger-delete-hover-bg: var(--tlj-color-ledger-delete-hover-bg);
    --tlj-ui-ledger-delete-hover-text: var(--tlj-color-ledger-delete-hover-text);
    --tlj-ui-ledger-positive-hover: var(--tlj-color-ledger-positive-hover);
    --tlj-ui-ledger-negative-hover: var(--tlj-color-ledger-negative-hover);
    --tlj-ui-ledger-breakeven-hover: var(--tlj-color-ledger-breakeven-hover);

    --tlj-accent-rgb: var(--tlj-color-accent-rgb);
    --tlj-surface: var(--tlj-color-surface);
    --tlj-surface-2: var(--tlj-color-surface-2);
    --tlj-field: var(--tlj-color-field);
    --tlj-overlay: var(--tlj-color-overlay);

    --tlj-loading-overlay: var(--tlj-color-loading-overlay);
    --tlj-loading-surface: var(--tlj-color-loading-surface);
    --tlj-loading-text: var(--tlj-color-loading-text);
    --tlj-loading-border: var(--tlj-color-loading-border);
    --tlj-loading-shadow: var(--tlj-effect-shadow-loading);

    --tlj-text: var(--tlj-color-text);
    --tlj-muted: var(--tlj-color-text-muted);
    --tlj-muted-2: var(--tlj-color-text-muted-2);
    --tlj-border: var(--tlj-color-border);

    --tlj-input-placeholder: var(--tlj-color-input-placeholder);
    --tlj-input-border: var(--tlj-color-input-border);
    --tlj-input-focus-border: var(--tlj-color-input-focus-border);
    --tlj-focus-ring: var(--tlj-color-focus-ring);

    --tlj-button-bg: var(--tlj-color-button-bg);
    --tlj-button-text: var(--tlj-color-button-text);
    --tlj-button-border: var(--tlj-color-button-border);
    --tlj-button-hover-bg: var(--tlj-color-button-hover-bg);
    --tlj-button-hover-text: var(--tlj-color-button-hover-text);

    --tlj-positive: var(--tlj-color-positive-base);
    --tlj-positive-rgb: var(--tlj-color-positive-rgb);
    --tlj-positive-bg: var(--tlj-color-positive-bg);
    --tlj-positive-text: var(--tlj-color-positive-text);
    --tlj-negative: var(--tlj-color-negative-base);
    --tlj-negative-rgb: var(--tlj-color-negative-rgb);
    --tlj-negative-bg: var(--tlj-color-negative-bg);
    --tlj-negative-text: var(--tlj-color-negative-text);
    --tlj-warning: var(--tlj-color-warning-base);
    --tlj-warning-rgb: var(--tlj-color-warning-rgb);
    --tlj-warning-bg: var(--tlj-color-warning-bg);
    --tlj-warning-text: var(--tlj-color-warning-text);
    --tlj-breakeven: var(--tlj-color-breakeven-base);
    --tlj-breakeven-rgb: var(--tlj-color-breakeven-rgb);
    --tlj-breakeven-bg: var(--tlj-color-breakeven-bg);
    --tlj-breakeven-text: var(--tlj-color-breakeven-text);

    --tlj-shadow-sm: var(--tlj-effect-shadow-sm);
    --tlj-shadow-md: var(--tlj-effect-shadow-md);
    --tlj-shadow-lg: var(--tlj-effect-shadow-lg);


    --tlj-bg: var(--tlj-color-page);
    --tlj-panel: var(--tlj-color-surface);
    --tlj-panel-2: var(--tlj-color-surface-2);
    --tlj-white: var(--tlj-color-text);
    --tlj-line: var(--tlj-color-border);
    --tlj-turquoise: var(--tlj-color-accent);
    --tlj-turquoise-soft: var(--tlj-color-accent-soft);
    --tlj-turquoise-line: var(--tlj-color-border-strong);
}


/* Estadísticas · efectos de gráfica semánticos. */
:root, html[data-tlj-theme="dark"] {
    --tlj-effect-chart-positive-fill: rgba(var(--tlj-color-positive-rgb), .18);
    --tlj-effect-chart-negative-fill: rgba(var(--tlj-color-negative-rgb), .18);
    --tlj-effect-chart-accent-fill: rgba(var(--tlj-color-accent-rgb), .20);
}
html[data-tlj-theme="light"] {
    --tlj-effect-chart-positive-fill: rgba(var(--tlj-color-positive-rgb), .14);
    --tlj-effect-chart-negative-fill: rgba(var(--tlj-color-negative-rgb), .14);
    --tlj-effect-chart-accent-fill: rgba(var(--tlj-color-accent-rgb), .12);
}

/* Botón Personalizar (.tlj-customize-btn). Referencia: botón del modal de
   añadir operación de Lista. Se deriva del acento, así que vale para Claro y Oscuro. */
:root {
    --tlj-color-customize-btn-bg: rgba(255, 255, 255, .025);
    --tlj-color-customize-btn-border: rgba(var(--tlj-color-accent-rgb), .24);
    --tlj-color-customize-btn-text: var(--tlj-color-accent);
    --tlj-color-customize-btn-hover-bg: rgba(var(--tlj-color-accent-rgb), .085);
    --tlj-color-customize-btn-hover-border: var(--tlj-color-accent);
    --tlj-effect-customize-btn-hover-ring: 0 0 0 3px rgba(var(--tlj-color-accent-rgb), .055);
}

/* Evolución Histórica · paleta de gráfica exacta (Fase 11.4). */
html[data-tlj-theme="dark"] {
    --tlj-evol-chart-background: #070b0c;
    --tlj-evol-chart-text: #aebabc;
    --tlj-evol-chart-muted: #829093;
    --tlj-evol-chart-border: #263234;
    --tlj-evol-chart-crosshair: #4f5b5d;
    --tlj-evol-chart-zero: #405052;
    --tlj-evol-chart-up: #86e7ad;
    --tlj-evol-chart-down: #ff8a8f;
    --tlj-evol-chart-ma8: #ffd700;
    --tlj-evol-chart-ma20: #0000ff;
    --tlj-evol-chart-ma50: #008000;
    --tlj-evol-chart-ma100: #800080;
    --tlj-evol-chart-ma200: #ff0000;
    --tlj-color-platform: #f1c96b;
    --tlj-color-withdrawal: #c6a5ff;
    --tlj-color-platform-rgb: 241, 201, 107;
    --tlj-color-withdrawal-rgb: 198, 165, 255;
}
html[data-tlj-theme="light"] {
    --tlj-evol-chart-background: #ffffff;
    --tlj-evol-chart-text: #314044;
    --tlj-evol-chart-muted: #687779;
    --tlj-evol-chart-border: #d3e0e0;
    --tlj-evol-chart-crosshair: #9fb0b2;
    --tlj-evol-chart-zero: #9aabaa;
    --tlj-evol-chart-up: #86e7ad;
    --tlj-evol-chart-down: #ff8a8f;
    --tlj-evol-chart-ma8: #ffd700;
    --tlj-evol-chart-ma20: #0000ff;
    --tlj-evol-chart-ma50: #008000;
    --tlj-evol-chart-ma100: #800080;
    --tlj-evol-chart-ma200: #ff0000;
    --tlj-color-platform: #f1c96b;
    --tlj-color-withdrawal: #c6a5ff;
    --tlj-color-platform-rgb: 241, 201, 107;
    --tlj-color-withdrawal-rgb: 198, 165, 255;
}