:root{--kairo-v:7}

/* =====================================================================
 * Kairo Journal - design tokens v2
 * Sistema: jerarquia por elevacion de fondo, no por bordes.
 * Tipografia: Instrument Sans para interfaz, IBM Plex Mono para cifras.
 * Los nombres de token se conservan para no romper ninguna regla
 * existente; solo cambian sus valores.
 * ===================================================================== */
:root{
--font-ui:'Instrument Sans',var(--font-ui);
--font-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;

/* Superficies - tema claro (off-white frio, no una inversion del oscuro) */
--bg:#EDEFF4;--surface:#FFFFFF;--surface-2:#F1F3F8;--surface-3:#E9ECF3;
--sidebar:#FFFFFF;--nav-active:#E7EDFA;--empty:#F4F6FA;
--border:rgba(21,26,38,.08);--border-2:rgba(21,26,38,.06);--border-hover:rgba(21,26,38,.16);

/* Texto - cuatro niveles, todos >= 4.5:1 */
--text:#141922;--text-2:#333B4A;--text-3:#4E576A;--text-4:#6B7484;--text-off:#7C8494;

/* Acento de accion - jamas indica resultado */
--primary:#3F5FC7;--primary-2:#33509F;--primary-soft:rgba(63,95,199,.10);
--primary-link:#3F5FC7;--on-primary:#FFFFFF;

/* Semantico - verde y rojo solo para rendimiento */
--green:#0C8A55;--green-fill:#1FA96B;--green-soft:rgba(12,138,85,.10);
--red:#BE2F39;--red-fill:#E14A52;--red-soft:rgba(190,47,57,.10);
--amber:#8A6410;--amber-fill:#C4901F;--amber-soft:rgba(138,100,16,.12);
--purple:#6F44B4;--purple-2:#8A5CD0;
--neutral:#6B7484;--neutral-fill:#9AA5B6;

/* Canales RGB: permiten construir escalas de intensidad con rgba() sin salir del tema */
--green-rgb:12,138,85;--red-rgb:190,47,57;--neutral-rgb:107,116,132;--primary-rgb:63,95,199;--field:#F7F8FB;
--on-green:#FFFFFF;--on-red:#FFFFFF;

--shadow:0 10px 26px rgba(21,26,38,.06);
--shadow-sm:0 4px 12px rgba(21,26,38,.05);
--glow:none;
--ring:rgba(63,95,199,.35);
}
[data-theme="dark"]{
--bg:#08090C;--surface:#0E1117;--surface-2:#13171E;--surface-3:#161C26;
--sidebar:#0B0D12;--nav-active:#161C26;--empty:#0E1117;
--border:rgba(255,255,255,.055);--border-2:rgba(255,255,255,.04);--border-hover:rgba(255,255,255,.10);

--text:#EDF0F5;--text-2:#C6CDD9;--text-3:#98A1B0;--text-4:#7A8394;--text-off:#3A414D;

--primary:#5B7CD9;--primary-2:#7391E3;--primary-soft:rgba(91,124,217,.14);
--primary-link:#7E9BEF;--on-primary:#080A0E;

--green:#35C77F;--green-fill:#35C77F;--green-soft:rgba(53,199,127,.14);
--red:#F0555C;--red-fill:#F0555C;--red-soft:rgba(240,85,92,.14);
--amber:#D9A23F;--amber-fill:#D9A23F;--amber-soft:rgba(217,162,63,.14);
--purple:#A878E8;--purple-2:#BC94EE;
--neutral:#AAB2BE;--neutral-fill:#4E6180;

--green-rgb:53,199,127;--red-rgb:240,85,92;--neutral-rgb:78,97,128;--primary-rgb:91,124,217;--field:#0A0D12;
--on-green:#06210D;--on-red:#2A0709;

--shadow:0 10px 30px rgba(0,0,0,.32);
--shadow-sm:0 4px 14px rgba(0,0,0,.28);
--glow:0 0 34px rgba(91,124,217,.14);
--ring:rgba(91,124,217,.42);
}

/* =====================================================================
 * Ancho de contenido del sistema.
 * Un solo numero gobierna cabecera y paginas para que nunca se
 * desalineen. La barra lateral queda fuera del calculo porque el
 * padding del body ya la descuenta.
 * ===================================================================== */
:root{--kairo-max:1560px;--kairo-pad:32px}
@media(max-width:1500px){:root{--kairo-max:100%}}
@media(max-width:900px){:root{--kairo-pad:20px}}
@media(max-width:560px){:root{--kairo-pad:14px}}

.kairo-page.e-con>.e-con-inner,
.kairo-page>.e-con-inner{max-width:var(--kairo-max)!important;width:100%!important;margin-inline:auto!important;
padding-left:var(--kairo-pad)!important;padding-right:var(--kairo-pad)!important}
html.k-side-on .kairo-header .k-hd-inner>.e-con-inner{max-width:var(--kairo-max)!important;width:100%!important;
margin-inline:auto!important;padding-left:var(--kairo-pad)!important;padding-right:var(--kairo-pad)!important}

/* Regla del sistema: si es una cifra, es mono con ancho tabular. */
.k-num,.k-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* Aplicacion de la regla a las cifras que ya existen en la app.
   Solo cambia la familia tipografica: ninguna clase, evento ni dato se toca. */
.k-kpi-value,.k-kpi-sub,.k-eq-value,.k-cal-amt,.k-cal-num,.k-cal-wk-amt,.k-cal-wk-sub,
.k-cal-net-lg,.k-sym-val,.k-sym-n,.k-stat-v,.k-badge-num,
.ka-kpi-v,.ka-t td,.ka-hb-n,.ka-ax,.ka-rk-v,.ka-tip-r b,.ka-ci,.ka-du-v,.ka-cc-p,.ka-cc-r,.ka-cc-t,
.kc-kpi-v,.kc-cap-v,.kc-cap-d,.kc-cap-l,.kc-st-v,.kc-av,
.k-calc-hero-v,.k-calc-metric-v,.k-calc-geo-val,.k-calc-inp,
.k-acct-sub,.k-acct-badge,.ks-vote span,.ks-tk-d,
.k-log-cell-num,.k-log-pnl,.k-log-r,.k-log-date{
font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* Las etiquetas cortas en mono no se traducen y no deben ir en mono si son texto */
.ka-t td:first-child,.ka-tip-h,.kc-c-name,.kc-c-broker{font-family:var(--font-ui)}

body{background:var(--bg);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased}
.kairo-app{font-family:var(--font-ui);color:var(--text)}
.kairo-app .elementor-heading-title{color:inherit}
@keyframes kfIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ================= HEADER ================= */
.kairo-header{position:sticky;top:0;z-index:99;background:var(--surface);border-bottom:1px solid var(--border);padding:0!important}
.kairo-header .k-hd-inner{padding:0!important;--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0}
.kairo-header .k-hd-inner>.e-con-inner{display:flex!important;flex-direction:row!important;flex-wrap:nowrap;align-items:center;gap:18px;height:66px;max-width:1400px;margin:0 auto;padding:0 22px!important;width:100%}

.k-logo{display:grid!important;grid-template-columns:auto auto;grid-template-areas:"mark name" "mark sub";align-items:center;column-gap:11px;width:auto!important;flex:0 0 auto!important;padding:0!important;margin:0!important}
.k-logo>*{width:auto!important;margin:0!important}
.k-logo-mark{grid-area:mark;align-self:center;width:38px!important;height:38px;border-radius:12px;background:linear-gradient(135deg,#2563EB,#7C3AED);display:flex!important;align-items:center;justify-content:center;box-shadow:0 6px 16px -6px rgba(37,99,235,.6)}
.k-logo-mark .elementor-icon-wrapper,.k-logo-mark .elementor-icon{padding:0;background:none;line-height:0;display:flex;align-items:center;justify-content:center}
.k-logo-mark svg,.k-logo-mark i{width:19px;height:19px;font-size:17px;fill:#fff!important;color:#fff!important}
.k-logo-name,.k-logo-name .elementor-heading-title{grid-area:name;align-self:end;font-weight:800!important;font-size:16.5px!important;letter-spacing:-.02em;line-height:1.05!important;color:var(--text)!important;text-align:left!important;margin:0!important}
.k-logo-sub,.k-logo-sub .elementor-heading-title{grid-area:sub;align-self:start;font-weight:600!important;font-size:10.5px!important;color:var(--text-3)!important;letter-spacing:.14em;text-transform:uppercase;line-height:1.05!important;text-align:left!important;margin:0!important}

.k-nav{flex:0 1 auto!important;width:auto!important;min-width:0;padding:0!important;margin:0!important}
.k-nav .elementor-nav-menu{display:flex!important;align-items:center;gap:3px;background:var(--surface-2);padding:4px;border-radius:14px;border:1px solid var(--border-2);overflow-x:auto;scrollbar-width:none;margin:0}
.k-nav .elementor-nav-menu::-webkit-scrollbar{display:none}
.k-nav .elementor-nav-menu li{flex-shrink:0}
.k-nav .elementor-nav-menu a.elementor-item{display:inline-flex!important;align-items:center;gap:7px;height:38px;padding:0 13px!important;border:none;border-radius:11px;font-size:12.5px!important;font-weight:600!important;color:var(--text-2)!important;white-space:nowrap;transition:all .15s;background:transparent}
.k-nav .elementor-nav-menu a.elementor-item:hover{color:var(--text)!important;background:var(--surface-3)!important}
.k-nav .elementor-nav-menu a.elementor-item.elementor-item-active{background:var(--surface)!important;color:var(--primary)!important;box-shadow:var(--shadow-sm)!important;font-weight:700!important}
.k-nav .elementor-nav-menu--main .elementor-item:before,.k-nav .elementor-nav-menu--main .elementor-item:after{display:none!important;content:none!important}

.k-hd-spacer{flex:1 1 auto!important;width:auto!important;min-height:0;padding:0!important;align-self:stretch}
.k-theme-toggle{flex:0 0 auto!important;width:auto!important;margin:0!important}
.k-theme-toggle .elementor-button{background-color:var(--surface-2)!important;color:var(--text-2)!important;border:1px solid var(--border)!important;width:40px;height:40px;padding:0!important;border-radius:12px!important;display:flex;align-items:center;justify-content:center;transition:all .15s}
.k-theme-toggle .elementor-button:hover{background-color:var(--surface-3)!important;color:var(--text)!important}
.k-theme-toggle .elementor-button-content-wrapper{justify-content:center}
.k-theme-toggle .elementor-button-icon{margin:0!important;font-size:16px}
.k-theme-toggle .elementor-button-text{display:none}

@media(max-width:1100px){.kairo-header .k-hd-inner>.e-con-inner{gap:12px;padding:0 14px!important}.k-nav .elementor-nav-menu a.elementor-item{padding:0 10px!important;font-size:12px!important}}
@media(max-width:860px){.kairo-header .k-hd-inner>.e-con-inner{height:auto;flex-wrap:wrap;padding:10px 14px!important;gap:10px}.k-nav{order:3;width:100%!important;flex:1 1 100%!important}.k-hd-spacer{display:none}}

/* ================= FOOTER ================= */
.kairo-footer{background:var(--surface);border-top:1px solid var(--border);padding:0!important}
.kairo-footer .k-ft-inner{padding:0!important}
.kairo-footer .k-ft-inner>.e-con-inner{display:flex!important;flex-direction:row!important;align-items:center;gap:14px;max-width:1400px;margin:0 auto;padding:20px 22px!important;width:100%}
.k-ft-brand,.k-ft-brand .elementor-heading-title{color:var(--text)!important;font-weight:800!important;font-size:14px!important;margin:0!important}
.k-ft-tag,.k-ft-tag .elementor-heading-title{color:var(--text-3)!important;font-weight:500!important;font-size:12.5px!important;margin:0!important}
.k-ft-cp,.k-ft-cp .elementor-heading-title{color:var(--text-3)!important;font-weight:600!important;font-size:12px!important;margin:0!important}
.k-ft-brand,.k-ft-tag,.k-ft-cp{width:auto!important}
@media(max-width:700px){.kairo-footer .k-ft-inner>.e-con-inner{flex-wrap:wrap;justify-content:center;text-align:center}}

/* ================= PAGE TITLES ================= */
.k-title,.k-title .elementor-heading-title{color:var(--text)!important;font-size:28px!important;font-weight:800!important;letter-spacing:-.02em;margin:0 0 22px!important;line-height:1.2}

/* ================= DASHBOARD ================= */
.kairo-dash .k-kpi-grid{display:grid!important;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px;padding:0!important;width:100%}
.k-kpi{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:19px 20px!important;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease;display:flex!important;flex-direction:column!important;gap:0}
.k-kpi:hover{transform:translateY(-2px)}
.k-kpi-head{display:flex!important;flex-direction:row!important;align-items:center;gap:9px;margin:0 0 14px!important;padding:0!important;width:100%!important}
.k-kpi-icon{width:30px!important;height:30px;border-radius:9px;display:flex!important;align-items:center;justify-content:center;flex:0 0 auto;margin:0!important}
.k-kpi-icon .elementor-icon-wrapper,.k-kpi-icon .elementor-icon{padding:0;background:none;line-height:0;display:flex;align-items:center;justify-content:center}
.k-kpi-icon svg,.k-kpi-icon i{width:16px;height:16px;font-size:14px;fill:currentColor!important;color:inherit!important}
.ic-green{background:var(--green-soft);color:var(--green)!important}
.ic-blue{background:var(--primary-soft);color:var(--primary)!important}
.ic-purple{background:linear-gradient(135deg,#7C3AED,#A855F7);color:#fff!important}
.ic-muted{background:var(--surface-3);color:var(--text-2)!important}
.k-kpi-label,.k-kpi-label .elementor-heading-title{font-size:12.5px!important;font-weight:600!important;color:var(--text-2)!important;margin:0!important;line-height:1.2;width:auto!important}
.k-kpi-value,.k-kpi-value .elementor-heading-title{font-size:29px!important;font-weight:800!important;letter-spacing:-.03em;color:var(--text)!important;margin:0!important;line-height:1.12}
.k-kpi-value.is-pos,.k-kpi-value.is-pos .elementor-heading-title{color:var(--green)!important}
.k-kpi-value.is-neg,.k-kpi-value.is-neg .elementor-heading-title{color:var(--red)!important}
.k-kpi-sub,.k-kpi-sub .elementor-heading-title{margin:4px 0 0!important;font-size:12px!important;font-weight:500!important;color:var(--text-3)!important;line-height:1.3}
.k-wr-bar{margin:10px 0 0!important;height:7px;min-height:7px;border-radius:6px;background:var(--surface-3);overflow:hidden;padding:0!important;width:100%!important}
.k-wr-fill{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#2563EB,#7C3AED);width:0;transition:width .6s cubic-bezier(.4,0,.2,1)}

.k-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:20px 22px!important;box-shadow:var(--shadow);margin-bottom:16px}
.k-card-title,.k-card-title .elementor-heading-title{font-weight:700!important;font-size:15px!important;color:var(--text)!important;margin:0!important;line-height:1.25}
.k-card-sub,.k-card-sub .elementor-heading-title{font-size:12px!important;font-weight:500!important;color:var(--text-3)!important;margin:2px 0 0!important}
.k-eq-now,.k-eq-now .elementor-heading-title{font-size:19px!important;font-weight:800!important;color:var(--text)!important;margin:10px 0 0!important;letter-spacing:-.02em}
.k-equity{width:100%!important;padding:0!important;margin-top:10px}
.k-eq-svg{width:100%;height:230px;display:block;overflow:visible}
.k-empty{padding:44px 16px;text-align:center;color:var(--text-3);font-weight:600;font-size:13.5px;background:var(--surface-2);border:1px dashed var(--border);border-radius:14px}
@media(max-width:1080px){.kairo-dash .k-kpi-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.kairo-dash .k-kpi-grid{grid-template-columns:1fr}.k-kpi-value,.k-kpi-value .elementor-heading-title{font-size:25px!important}}

/* ================= TRADE LOG ================= */
.kairo-filters{padding:0!important}
.kairo-filters>.e-con-inner,.kairo-filters:not(.e-con-boxed){display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:12px;padding:16px!important;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm);margin-bottom:20px}
.kairo-filters .k-filter{flex:1 1 180px;min-width:150px;width:auto!important}
.kairo-filters .jet-filter-label,.kairo-filters .jet-filter__label{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;color:var(--text-3);margin:0 0 6px}
.kairo-filters select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--text);font-size:13.5px;font-weight:600;cursor:pointer;transition:all .15s}
.kairo-filters select:focus{border-color:var(--primary);background:var(--surface);box-shadow:0 0 0 3px var(--ring)}
.kairo-log .jet-listing-grid__items{display:flex;flex-direction:column;gap:10px;margin:0}
.kairo-log .jet-listing-grid__item{padding:0;animation:kfIn .32s ease both}
.kairo-log .jet-listing-not-found{padding:34px 18px;text-align:center;color:var(--text-3);font-weight:600;background:var(--surface);border:1px dashed var(--border);border-radius:14px}
.kairo-trade-row{display:grid!important;grid-template-columns:minmax(120px,1.1fr) auto auto auto minmax(70px,auto) auto minmax(90px,auto);grid-template-areas:"sym dir ses tf rr res pnl";align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 18px!important;box-shadow:var(--shadow-sm);transition:all .18s ease}
.kairo-trade-row:hover{transform:translateY(-1px);box-shadow:var(--shadow);border-color:var(--primary)}
.kairo-trade-row .k-sym{grid-area:sym;font-weight:800;font-size:15px;color:var(--text);line-height:1.25}
.kairo-trade-row .k-date{grid-area:sym;align-self:end;font-size:12px;font-weight:500;color:var(--text-3);margin-top:20px}
.kairo-trade-row .k-badge{display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;white-space:nowrap;background:var(--primary-soft);color:var(--primary);width:auto!important}
.kairo-trade-row .k-dir{grid-area:dir}
.kairo-trade-row .k-muted{background:var(--surface-3);color:var(--text-2)}
.kairo-trade-row .k-badge.k-muted:nth-of-type(1){grid-area:ses}
.kairo-trade-row .k-res{grid-area:res}
.kairo-trade-row .k-rr{grid-area:rr;font-size:12.5px;font-weight:700;color:var(--text-2);white-space:nowrap}
.kairo-trade-row .k-pnl{grid-area:pnl;font-size:16px;font-weight:800;text-align:right;color:var(--text-2);white-space:nowrap}
.kairo-trade-row .k-pnl.is-pos{color:var(--green)}
.kairo-trade-row .k-pnl.is-neg{color:var(--red)}
.kairo-trade-row .k-dir.is-buy{background:var(--green-soft);color:var(--green)}
.kairo-trade-row .k-dir.is-sell{background:var(--red-soft);color:var(--red)}
.kairo-trade-row .k-res.is-tp{background:var(--green-soft);color:var(--green)}
.kairo-trade-row .k-res.is-sl{background:var(--red-soft);color:var(--red)}
.kairo-trade-row .k-res.is-be{background:var(--surface-3);color:var(--text-2)}
.kairo-trade-row .k-res.is-pending{background:var(--amber-soft);color:var(--amber)}
@media(max-width:880px){.kairo-trade-row{grid-template-columns:1fr auto;grid-template-areas:"sym pnl" "dir res" "ses tf" "rr rr";row-gap:8px}.kairo-trade-row .k-date{margin-top:18px}}

/* ================= FORM ================= */
.kairo-form .jet-form-builder-row{margin-bottom:16px}
.kairo-form .jet-form-builder__label{display:block;font-size:12px;font-weight:700;color:var(--text-2);margin:0 0 7px}
.kairo-form .jet-form-builder__field{width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);color:var(--text);font-size:14px;font-weight:500;transition:all .15s}
.kairo-form .jet-form-builder__field:focus{border-color:var(--primary);background:var(--surface);box-shadow:0 0 0 3px var(--ring)}
.kairo-form textarea.jet-form-builder__field{min-height:96px;resize:vertical}
.kairo-form .jet-form-builder__fields-group{display:flex;flex-wrap:wrap;gap:8px}
.kairo-form .jet-form-builder__field-label{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:12.5px;font-weight:600;color:var(--text-2);cursor:pointer;transition:all .15s}
.kairo-form .jet-form-builder__field-label:hover{border-color:var(--primary);color:var(--text)}
.kairo-form .jet-form-builder__action-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 24px;background:var(--primary)!important;color:#fff!important;border:none;border-radius:13px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 10px 22px -10px rgba(37,99,235,.7);transition:all .18s}
.kairo-form .jet-form-builder__action-button:hover{background:var(--primary-2)!important;transform:translateY(-1px)}
.kairo-form .jet-form-builder-message--success{background:var(--green-soft);color:var(--green);border:1px solid var(--green);border-radius:12px;padding:14px 16px;font-weight:700}
.kairo-form .jet-form-builder-message--error{background:var(--red-soft);color:var(--red);border:1px solid var(--red);border-radius:12px;padding:14px 16px;font-weight:700}

/* ===== Multiseleccion (Confluencias / Indicadores) en 2 columnas ===== */
.jet-form-builder__fields-group:has(input[name="confluencias[]"]),.jet-form-builder__fields-group:has(input[name="indicadores[]"]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;align-items:start}
.jet-form-builder__fields-group:has(input[name="confluencias[]"])>.jet-form-builder__field-wrap,.jet-form-builder__fields-group:has(input[name="indicadores[]"])>.jet-form-builder__field-wrap{width:auto!important;margin:0!important;min-width:0}
@media(max-width:480px){.jet-form-builder__fields-group:has(input[name="confluencias[]"]),.jet-form-builder__fields-group:has(input[name="indicadores[]"]){grid-template-columns:1fr}}


/* ---------- Controles nativos en tema oscuro ---------- */
/* El esquema se declara en la RAIZ, no solo en cada control: asi el navegador
   dibuja en oscuro tambien las partes internas -flechas del campo numerico,
   icono de calendario y de reloj, barras de scroll- que no heredan del hijo. */
:root,html{color-scheme:light}
[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"] body{color-scheme:dark}
[data-theme="dark"] select,[data-theme="dark"] input,[data-theme="dark"] textarea{color-scheme:dark}
[data-theme="dark"] select option,[data-theme="dark"] select optgroup{background:var(--surface-2);color:var(--text)}
[data-theme="dark"] select optgroup{color:var(--text-3);font-weight:800}
/* La lista desplegada la dibuja el sistema operativo: solo admite fondo y
   color. El resaltado de la opcion activa lo controla el navegador, no el CSS. */
[data-theme="dark"] select option:checked{background:var(--surface-3);color:var(--text)}