/* Kairo Journal - Sesiones de Backtesting v2 Medidas y colores tomados literalmente de "5. Sesiones de Backtesting.dc.html". Los hex del diseno se expresan con los tokens del tema para que funcione igual en claro y oscuro. */ #kairo-bt .kbt-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:16px} #kairo-bt .kbt-head-l{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 auto} /* ---------- V1 VISUAL FIDELITY (header + session card) ---------- Comparado contra la captura original del Claude Design. Todo es presentacion: ni datos, ni contratos, ni mapping cambian. */ /* El lead del diseno ocupa el ancho util y se resuelve en una linea, dejando solo el hueco del CTA. El tope de 60ch lo partia en tres. */ #kairo-bt .kbt-lead{max-width:none} /* Chips como micro-contexto, no como botones: sin el line-height del tema. */ #kairo-bt .kbt-tag{line-height:1} /* Progreso en una sola linea: barra fina + contador legible. Sustituye a .kbt-prog-b/.kbt-prog-t, cuyo CSS legacy recortaba el texto a 5px. */ #kairo-bt .kbt-pg{display:flex;align-items:center;gap:10px;min-width:0} #kairo-bt .kbt-pg-b{flex:1;height:4px;border-radius:999px;background:var(--surface-3);overflow:hidden;min-width:0} #kairo-bt .kbt-pg-f{display:block;height:100%;border-radius:999px;background:var(--primary)} #kairo-bt .kbt-pg-n{font-family:var(--font-mono);font-size:11px;line-height:1;color:var(--text-4);white-space:nowrap} /* Celdas de metrica del diseno, mas ajustadas (el reparto 3+2 se fija en la regla base de .kbt-mets). */ #kairo-bt .kbt-met-l{line-height:1} #kairo-bt .kbt-met-v{line-height:1.15} #kairo-bt .kbt-per{line-height:1.35} #kairo-bt .kbt-card{gap:13px} /* ---------- V1.1 DEPTH + B5 ---------- Tokens locales de profundidad (solo dentro de #kairo-bt, sin tocar la paleta global). El halo del diseno es una iluminacion ambiental fria: azul hacia violeta, radial en la esquina superior derecha, muy por debajo del contenido. El violeta se usa SOLO como profundidad; performance sigue en verde/rojo. */ #kairo-bt{--kbt-glow-blue:rgba(91,124,217,.09); --kbt-surf-hi:rgba(255,255,255,.03);--kbt-card-sh:0 10px 30px rgba(0,0,0,.32); --kbt-b5-hi:rgba(255,255,255,.02); --kbt-card-grad:linear-gradient(180deg,rgba(255,255,255,.012),rgba(0,0,0,.085)); --kbt-sheen-c:rgba(91,124,217,.5)} [data-theme="light"] #kairo-bt{--kbt-glow-blue:transparent; --kbt-surf-hi:rgba(255,255,255,.6);--kbt-card-sh:0 1px 1px rgba(21,26,38,.04),0 10px 26px rgba(21,26,38,.06); --kbt-b5-hi:rgba(255,255,255,.5); --kbt-card-grad:linear-gradient(180deg,rgba(255,255,255,.9),rgba(251,252,254,.9)); --kbt-sheen-c:rgba(63,95,199,.28)} #kairo-bt .kbt-card{box-shadow:var(--kbt-card-sh),inset 0 1px 0 var(--kbt-surf-hi)} /* El halo va en una capa propia: nunca intercepta clicks ni tapa el contenido. */ #kairo-bt .kbt-card::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background:radial-gradient(260px circle at 100% 0%,var(--kbt-glow-blue),transparent 70%), var(--kbt-card-grad)} /* Destello superior: UN color, centrado y desvanecido a ambos lados. Verde en las sesiones en curso, azul en el resto, exactamente como el diseno. */ #kairo-bt .kbt-card::after{content:"";position:absolute;top:0;left:16px;right:16px;height:1px; pointer-events:none;z-index:2; background:linear-gradient(90deg,transparent,var(--kbt-sheen-c),transparent)} #kairo-bt .kbt-card.is-live{--kbt-sheen-c:rgba(53,199,127,.5);--kbt-glow-blue:rgba(53,199,127,.09)} [data-theme="light"] #kairo-bt .kbt-card.is-live{--kbt-sheen-c:rgba(12,138,85,.28);--kbt-glow-blue:transparent} #kairo-bt .kbt-card>*{position:relative;z-index:1} /* Sombra azul suave del boton principal, como el CTA del diseno. La regla generica .kbt-acts button la anula, asi que se iguala su especificidad. */ #kairo-bt .kbt-acts button.kbt-open{box-shadow:0 6px 20px rgba(var(--primary-rgb),.24)!important} #kairo-bt .kbt-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--primary-link)} #kairo-bt h1.kbt-h1{margin:0!important;font-size:clamp(21px,3.4vw,27px);font-weight:700;letter-spacing:-.025em;line-height:1.1;color:var(--text)} #kairo-bt .kbt-sub{font-size:13px;font-weight:400;color:var(--text-3);text-wrap:pretty;line-height:1.5;margin:0} #kairo-bt button.kbt-new{display:flex;align-items:center;gap:9px;background:var(--primary)!important;border:0!important; border-radius:11px;padding:11px 18px;cursor:pointer;color:var(--on-primary)!important; font-family:var(--font-ui);font-size:12.5px;font-weight:600;white-space:nowrap; box-shadow:0 8px 26px rgba(var(--primary-rgb),.28);transition:background .14s,box-shadow .14s,transform .14s} #kairo-bt button.kbt-new:hover{background:var(--primary-2)!important;box-shadow:0 10px 32px rgba(var(--primary-rgb),.42)} #kairo-bt button.kbt-new:active{transform:translateY(1px)} #kairo-bt .kbt-new i{font-style:normal;font-family:var(--font-mono);font-size:15px;line-height:1} /* ---------- KPI ---------- */ #kairo-bt .kbt-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:12px;margin-bottom:16px} #kairo-bt .kbt-kpi{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:15px 17px; display:flex;flex-direction:column;gap:6px;min-width:0} #kairo-bt .kbt-kpi-l{font-size:9.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--text-4)} /* B6: cinco KPI. El secundario tiene longitudes distintas (W/L/BE, R medio, lectura de PF), asi que se empuja al fondo para que la fila quede pareja sin inventar contenido. Tono semantico solo en R; WR y PF quedan neutros. */ #kairo-bt .kbt-kpis{align-items:stretch} #kairo-bt .kbt-kpi-s{margin-top:auto} #kairo-bt .kbt-kpi-v.is-pos{color:var(--green)} #kairo-bt .kbt-kpi-v.is-neg{color:var(--red)} #kairo-bt .kbt-kpi-v.is-mut{color:var(--text-3)} #kairo-bt .kbt-kpi-v{font-family:var(--font-mono);font-size:clamp(21px,2.4vw,25px);font-weight:700;line-height:1; color:var(--text);font-variant-numeric:tabular-nums} #kairo-bt .kbt-kpi-v.is-pos{color:var(--green)} #kairo-bt .kbt-kpi-v.is-neg{color:var(--red)} #kairo-bt .kbt-kpi-s{font-size:11.5px;font-weight:400;color:var(--text-4);line-height:1.4} /* ---------- Filtros ---------- */ #kairo-bt .kbt-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px} #kairo-bt .kbt-filters-l{font-size:10.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--text-4);padding-right:4px} #kairo-bt button.kbt-chip{border:1px solid var(--border)!important;background:var(--surface-2)!important; border-radius:999px;padding:8px 15px;cursor:pointer;color:var(--text-3)!important;box-shadow:none!important; font-family:var(--font-ui);font-size:12.5px;font-weight:500;white-space:nowrap;transition:all .13s} #kairo-bt button.kbt-chip:hover{border-color:var(--border-hover)!important;color:var(--text)!important} #kairo-bt button.kbt-chip.is-on{background:rgba(var(--primary-rgb),.14)!important; border-color:rgba(var(--primary-rgb),.34)!important;color:var(--primary-link)!important;font-weight:600} #kairo-bt .kbt-fsum{margin-left:auto;font-size:11.5px;font-weight:400;color:var(--text-4);white-space:nowrap} /* ---------- Tarjeta de sesion ---------- */ #kairo-bt .kbt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:16px;align-items:stretch} /* B1-B3: en tablet el ancho util (673px) queda 3px por debajo de lo que exige el minimo de 330px para dos columnas. Se rebaja el minimo solo en ese rango para obtener las 2 columnas del diseno; desktop (4 col) y movil (1 col) siguen saliendo del mismo auto-fill sin tocar nada. */ @media(min-width:700px) and (max-width:900px){ #kairo-bt .kbt-grid{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))} } #kairo-bt .kbt-card{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border); border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:14px; transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .2s,border-color .2s} #kairo-bt .kbt-card:hover{transform:translateY(-3px)} #kairo-bt .kbt-card.is-live{border-color:rgba(var(--green-rgb),.30); box-shadow:0 0 0 1px rgba(var(--green-rgb),.10),0 18px 46px rgba(0,0,0,.5),0 0 34px rgba(var(--green-rgb),.10)} #kairo-bt .kbt-c-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} #kairo-bt .kbt-c-meta{display:flex;flex-direction:column;gap:3px;min-width:0} #kairo-bt .kbt-c-name{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--text);text-wrap:pretty} #kairo-bt .kbt-c-sub{font-family:var(--font-mono);font-size:11px;font-weight:400;color:var(--text-4)} #kairo-bt .kbt-state{display:inline-flex;align-items:center;border-radius:6px;padding:4px 8px;white-space:nowrap;flex:none; font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase} #kairo-bt .kbt-state.is-live{background:rgba(var(--green-rgb),.13);color:var(--green)} #kairo-bt .kbt-state.is-done{background:rgba(var(--primary-rgb),.14);color:var(--primary-link)} #kairo-bt .kbt-state.is-empty{background:var(--surface-3);color:var(--text-3)} #kairo-bt .kbt-tags{display:flex;flex-wrap:wrap;gap:6px} #kairo-bt .kbt-tag{display:inline-flex;align-items:center;border-radius:7px;padding:4px 8px; background:var(--surface-3);font-size:10.5px;font-weight:500;color:var(--text-2);white-space:nowrap} #kairo-bt .kbt-tag.is-sym{background:rgba(var(--primary-rgb),.14);color:var(--primary-link);font-family:var(--font-mono);font-weight:600} #kairo-bt .kbt-tag.is-tf{font-family:var(--font-mono)} #kairo-bt .kbt-curve{height:58px} #kairo-bt .kbt-curve svg{width:100%;height:58px;display:block;overflow:visible} /* B4 visual: la linea y el area toman el tono del acumulado final (is-pos / is-neg / is-mut), no de la ultima operacion. Trazo del mock (2px, extremos redondeados, animacion kbtDraw ya definida) y relleno muy sutil por token, asi que funciona igual en claro y oscuro. */ #kairo-bt .kbt-spark-l{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:420;animation:kbtDraw 900ms cubic-bezier(.3,.8,.3,1) both} #kairo-bt .kbt-spark-a{stroke:none} #kairo-bt .kbt-spark-p{stroke:none} #kairo-bt .kbt-curve.is-pos .kbt-spark-l,#kairo-bt .kbt-curve.is-pos .kbt-spark-p{stroke:var(--green);fill:var(--green)} #kairo-bt .kbt-curve.is-pos .kbt-spark-a{fill:rgba(var(--green-rgb),.10)} #kairo-bt .kbt-curve.is-neg .kbt-spark-l,#kairo-bt .kbt-curve.is-neg .kbt-spark-p{stroke:var(--red);fill:var(--red)} #kairo-bt .kbt-curve.is-neg .kbt-spark-a{fill:rgba(var(--red-rgb),.10)} #kairo-bt .kbt-curve.is-mut .kbt-spark-l,#kairo-bt .kbt-curve.is-mut .kbt-spark-p{stroke:var(--text-3);fill:var(--text-3)} #kairo-bt .kbt-curve.is-mut .kbt-spark-a{fill:transparent} @media(prefers-reduced-motion:reduce){#kairo-bt .kbt-spark-l{animation:none!important;stroke-dasharray:none}} #kairo-bt .kbt-nocurve{height:58px;border-radius:11px;background:var(--surface-2);border:1px dashed var(--border); display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:400;color:var(--text-4)} /* V1: tres arriba y dos abajo como el diseno, tambien con la card ancha de desktop (con auto-fit entraban cuatro y la segunda fila quedaba coja). */ #kairo-bt .kbt-mets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px} #kairo-bt .kbt-met{display:flex;flex-direction:column;align-items:center;gap:3px;border-radius:10px;padding:9px 6px; background:var(--surface-2);min-width:0} #kairo-bt .kbt-met-l{font-size:8.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-4);white-space:nowrap} #kairo-bt .kbt-met-v{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--text); font-variant-numeric:tabular-nums;white-space:nowrap} #kairo-bt .kbt-met-v.is-pos{color:var(--green)} #kairo-bt .kbt-met-v.is-neg{color:var(--red)} #kairo-bt .kbt-met-v.is-mut{color:var(--text-3)} #kairo-bt .kbt-acts{display:flex;align-items:center;gap:8px;margin-top:auto} #kairo-bt .kbt-acts button{border:0!important;border-radius:10px;cursor:pointer;box-shadow:none!important; font-family:var(--font-ui);font-size:12.5px;font-weight:600;transition:background .13s,color .13s} #kairo-bt .kbt-open{flex:1 1 auto;padding:11px 14px;background:var(--primary)!important;color:var(--on-primary)!important} #kairo-bt .kbt-open:hover{background:var(--primary-2)!important} #kairo-bt .kbt-ico{flex:0 0 40px;width:40px;height:40px;padding:0!important;background:var(--surface-2)!important; color:var(--text-3)!important;display:flex;align-items:center;justify-content:center} #kairo-bt .kbt-ico:hover{background:var(--surface-3)!important;color:var(--text)!important} #kairo-bt .kbt-ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} /* ---------- Que condiciones producen resultado ---------- */ #kairo-bt .kbt-brk{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:20px 22px;margin-top:16px} #kairo-bt .kbt-brk-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px} #kairo-bt .kbt-brk-t{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--text);margin:0} #kairo-bt .kbt-brk-s{font-size:11.5px;font-weight:400;color:var(--text-4);margin:3px 0 0} #kairo-bt .kbt-dims{display:flex;gap:2px;background:var(--surface-2);border-radius:10px;padding:3px} #kairo-bt button.kbt-dim{border:0!important;border-radius:8px;padding:7px 13px;cursor:pointer;box-shadow:none!important; background:transparent!important;color:var(--text-3)!important; font-family:var(--font-ui);font-size:12.5px;font-weight:500;white-space:nowrap;transition:all .13s} #kairo-bt button.kbt-dim:hover{color:var(--text)!important} #kairo-bt button.kbt-dim.is-on{background:var(--surface-3)!important;color:var(--text)!important;font-weight:600} #kairo-bt .kbt-tw{overflow-x:auto} #kairo-bt .kbt-th,#kairo-bt .kbt-row{display:grid; grid-template-columns:3px minmax(150px,1.6fr) minmax(40px,.5fr) minmax(66px,.7fr) minmax(72px,.8fr) minmax(72px,.8fr) minmax(120px,1fr); gap:10px;align-items:center;min-width:640px} #kairo-bt .kbt-th{padding:0 4px 9px;border-bottom:1px solid var(--border)} #kairo-bt .kbt-th span{font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-4)} #kairo-bt .kbt-th .r{text-align:right} #kairo-bt .kbt-row{padding:11px 4px;border-top:1px solid var(--border-2)} #kairo-bt .kbt-th+.kbt-row{border-top:0} #kairo-bt .kbt-bar{width:3px;height:22px;border-radius:2px;background:var(--neutral-fill)} #kairo-bt .kbt-row.is-pos .kbt-bar{background:var(--green)} #kairo-bt .kbt-row.is-neg .kbt-bar{background:var(--red)} #kairo-bt .kbt-lab{font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #kairo-bt .kbt-num{font-family:var(--font-mono);font-size:12.5px;font-weight:500;color:var(--text-2); text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} #kairo-bt .kbt-num.is-pos{color:var(--green)} #kairo-bt .kbt-num.is-neg{color:var(--red)} #kairo-bt .kbt-verd{display:inline-flex;align-items:center;border-radius:6px;padding:4px 8px;white-space:nowrap; font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;justify-self:start} #kairo-bt .kbt-verd.is-keep{background:rgba(var(--green-rgb),.14);color:var(--green)} #kairo-bt .kbt-verd.is-drop{background:rgba(var(--red-rgb),.14);color:var(--red)} #kairo-bt .kbt-verd.is-low{background:var(--amber-soft);color:var(--amber)} #kairo-bt .kbt-note{font-size:11.5px;font-weight:400;color:var(--text-4);line-height:1.55;margin:14px 0 0;padding:0 4px} #kairo-bt .kbt-empty{padding:34px 10px;text-align:center;font-size:12.5px;font-weight:400;color:var(--text-4)} /* ---------- B5: Que condiciones producen resultado ---------- Medidas del bloque inferior del Claude Design (card radius 16, padding 20 22, gap 16; titulo 600 13.5; sub 400 11.5; cabecera 600 9 .11em; filas separadas por linea sutil). El scroller es INTERNO: el documento nunca desborda, mismo principio que la tabla de Condiciones de Analytics pero con CSS propio de este namespace. La columna Muestra es neutra: habla de tamano de muestra, no de resultado. */ #kairo-bt .kbt-b5{margin-top:16px;background:var(--surface);border:1px solid var(--border);border-radius:16px; padding:20px 22px;display:flex;flex-direction:column;gap:16px} #kairo-bt .kbt-b5-h{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap} #kairo-bt .kbt-b5-t{display:flex;flex-direction:column;gap:3px;min-width:0} #kairo-bt .kbt-b5-ttl{font-size:13.5px;font-weight:600;color:var(--text)} #kairo-bt .kbt-b5-sub{font-size:11.5px;font-weight:400;color:var(--text-4);text-wrap:pretty;line-height:1.5} #kairo-bt .kbt-b5-tabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap} #kairo-bt button.kbt-b5-tab{border:1px solid transparent!important;background:transparent!important;box-shadow:none!important; border-radius:9px;padding:7px 13px;cursor:pointer;color:var(--text-4)!important; font-family:var(--font-ui);font-size:12px;font-weight:500;white-space:nowrap;transition:all .13s} #kairo-bt button.kbt-b5-tab:hover{color:var(--text)!important;background:var(--surface-2)!important} #kairo-bt button.kbt-b5-tab.is-on{background:rgba(var(--primary-rgb),.14)!important; border-color:rgba(var(--primary-rgb),.34)!important;color:var(--primary-link)!important;font-weight:600} #kairo-bt .kbt-b5-w{border-radius:12px;overflow-x:auto;background:var(--surface-2)} #kairo-bt .kbt-b5-tb{width:100%;min-width:560px;border-collapse:collapse} #kairo-bt .kbt-b5-tb th{font-size:9px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--text-4); text-align:left;padding:10px 16px;border-bottom:1px solid var(--border);white-space:nowrap} #kairo-bt .kbt-b5-tb td{padding:11px 16px;border-top:1px solid var(--border-soft,var(--border));font-size:12.5px;color:var(--text)} #kairo-bt .kbt-b5-tb tbody tr:first-child td{border-top:0} #kairo-bt .kbt-b5-tb th.kbt-b5-n,#kairo-bt .kbt-b5-tb td.kbt-b5-n{text-align:right;font-family:var(--font-mono); font-variant-numeric:tabular-nums;white-space:nowrap} #kairo-bt .kbt-b5-tb th.kbt-b5-n{font-family:var(--font-ui)} #kairo-bt .kbt-b5-tb td.kbt-b5-c1{font-weight:500;min-width:180px} #kairo-bt .kbt-b5-tb td.is-pos{color:var(--green)} #kairo-bt .kbt-b5-tb td.is-neg{color:var(--red)} #kairo-bt .kbt-b5-tb td.is-mut{color:var(--text-3)} #kairo-bt .kbt-b5-sm{display:inline-flex;align-items:center;border-radius:7px;padding:4px 9px;white-space:nowrap; font-size:10.5px;font-weight:500;background:var(--surface-3);color:var(--text-3)} #kairo-bt .kbt-b5-sm.is-medio{background:rgba(var(--primary-rgb),.10);color:var(--primary-link)} #kairo-bt .kbt-b5-sm.is-alto{background:rgba(var(--primary-rgb),.18);color:var(--primary-link);font-weight:600} #kairo-bt .kbt-b5-note{font-size:11.5px;font-weight:400;line-height:1.55;color:var(--text-4);text-wrap:pretty} #kairo-bt .kbt-b5-empty{padding:26px 10px;text-align:center;font-size:12.5px;color:var(--text-4)} /* V1.1 B5: profundidad moderada (menos que las cards), superficie interior de tabla algo distinta al contenedor, proporciones de columna del diseno y pestanas con el estado activo enmarcado. */ #kairo-bt .kbt-b5{box-shadow:inset 0 1px 0 var(--kbt-b5-hi)} #kairo-bt .kbt-b5::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:16px; background:radial-gradient(420px circle at 100% 0%,var(--kbt-glow-blue),transparent 74%)} #kairo-bt .kbt-b5{position:relative} #kairo-bt .kbt-b5>*{position:relative;z-index:1} #kairo-bt .kbt-b5-tb{table-layout:fixed} #kairo-bt col.kbt-b5-w1{width:46%} #kairo-bt col.kbt-b5-w2{width:7%} #kairo-bt col.kbt-b5-w3{width:11%} #kairo-bt col.kbt-b5-w4{width:11%} #kairo-bt col.kbt-b5-w5{width:11%} #kairo-bt col.kbt-b5-w6{width:14%} #kairo-bt .kbt-b5-tb td{padding:9px 16px} #kairo-bt .kbt-b5-tb td.kbt-b5-c1{display:flex;align-items:center;gap:9px;min-width:0} #kairo-bt .kbt-b5-ac{width:3px;height:20px;border-radius:2px;flex:none;background:var(--text-4);opacity:.5} #kairo-bt .kbt-b5-ac.is-pos{background:var(--green);opacity:1} #kairo-bt .kbt-b5-ac.is-neg{background:var(--red);opacity:1} #kairo-bt .kbt-b5-e1{display:block;font-size:12.5px;color:var(--text-3)} #kairo-bt .kbt-b5-e2{display:block;margin-top:6px;font-size:11.5px;line-height:1.55;color:var(--text-4);max-width:52ch;margin-left:auto;margin-right:auto;text-wrap:pretty} #kairo-bt button.kbt-b5-tab.is-on{background:transparent!important;border-color:rgba(var(--primary-rgb),.45)!important; color:var(--text)!important;box-shadow:0 0 0 1px rgba(var(--primary-rgb),.12)!important} @media(max-width:640px){#kairo-bt .kbt-b5{padding:16px 15px}} /* B1-B3: estados que el markup nuevo necesita y el CSS del mock no cubria. Nada de esto altera reglas existentes: solo anade variantes. */ #kairo-bt .kbt-state.is-off{background:var(--surface-3);color:var(--text-3)} #kairo-bt .kbt-ico.is-danger:hover{background:rgba(var(--red-rgb),.10)!important;color:var(--red)!important} #kairo-bt .kbt-empty.is-first{display:flex;flex-direction:column;align-items:center;gap:10px;padding:46px 18px; background:var(--surface);border:1px dashed var(--border);border-radius:16px} #kairo-bt .kbt-empty-t{font-size:14px;font-weight:600;color:var(--text)} #kairo-bt .kbt-empty-d{font-size:12.5px;color:var(--text-4);max-width:46ch;text-wrap:pretty;line-height:1.55} @keyframes kbtDraw{from{stroke-dashoffset:420}to{stroke-dashoffset:0}} @media(prefers-reduced-motion:reduce){#kairo-bt .kbt-curve path{animation:none!important}} @media(max-width:640px){ #kairo-bt .kbt-fsum{margin-left:0;width:100%} #kairo-bt .kbt-brk{padding:16px 14px} #kairo-bt .kbt-note{padding:0} } /* ---------- Panel lateral de sesion ---------- */ .kbt-dw[hidden]{display:none} .kbt-dw{position:fixed;inset:0;z-index:100000;display:flex;justify-content:flex-end} .kbt-dw-bd{position:absolute;inset:0;background:rgba(5,7,10,.62)} .kbt-dw-p{position:relative;width:min(760px,100vw);height:100vh;background:var(--surface); border-left:1px solid var(--border);box-shadow:-30px 0 70px rgba(0,0,0,.5); display:flex;flex-direction:column;animation:kbtSlide 180ms cubic-bezier(.2,.8,.3,1) both} @keyframes kbtSlide{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}} @media(prefers-reduced-motion:reduce){.kbt-dw-p{animation:none}} .kbt-dw-h{display:flex;align-items:flex-start;justify-content:space-between;gap:14px; padding:16px clamp(14px,2.6vw,20px) 14px;border-bottom:1px solid var(--border-2)} .kbt-dw-ttl{display:flex;flex-direction:column;gap:4px;min-width:0} .kbt-dw-name{font-size:18px;font-weight:700;letter-spacing:-.015em;color:var(--text)} .kbt-dw-meta{font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-4)} .kbt-dw button.kbt-dw-x{width:32px;height:32px;flex:none;border:0!important;border-radius:9px;padding:0!important; background:var(--surface-2)!important;color:var(--text-3)!important;box-shadow:none!important; display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .12s,color .12s} .kbt-dw button.kbt-dw-x:hover{background:var(--surface-3)!important;color:var(--text)!important} .kbt-dw-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round} .kbt-dw-b{flex:1;min-height:0;overflow-y:auto;padding:16px clamp(14px,2.6vw,20px) 24px; display:flex;flex-direction:column;gap:14px} .kbt-dw-kpi{border-radius:14px;padding:14px 16px;background:var(--surface-2); display:grid;grid-template-columns:repeat(auto-fit,minmax(min(104px,100%),1fr));gap:14px} .kbt-dw-kpi>span{display:flex;flex-direction:column;gap:3px;min-width:0} .kbt-dw-kl{font-size:9.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3)} .kbt-dw-kbig{font-family:var(--font-mono);font-size:25px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;color:var(--text-2)} .kbt-dw-kv{font-family:var(--font-mono);font-size:17px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--text-2)} .kbt-dw-kbig.is-pos,.kbt-dw-kv.is-pos{color:var(--green)} .kbt-dw-kbig.is-neg,.kbt-dw-kv.is-neg{color:var(--red)} .kbt-sec{display:flex;flex-direction:column;gap:9px} .kbt-sec-l{font-size:9.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--text-4)} .kbt-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .kbt-sec-r{font-family:var(--font-mono);font-size:11px;font-weight:400;color:var(--text-4)} .kbt-ctx{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:10px} .kbt-ctx>div{display:flex;flex-direction:column;gap:3px;border-radius:10px;padding:10px 12px;background:var(--surface-2)} .kbt-ctx-k{font-size:9.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-4)} .kbt-ctx-v{font-size:12.5px;font-weight:500;color:var(--text);text-wrap:pretty} .kbt-conf{display:flex;flex-wrap:wrap;gap:6px} .kbt-conf span.kbt-cf{display:inline-flex;align-items:center;gap:7px;border-radius:7px;padding:5px 9px; font-size:11.5px;font-weight:500;white-space:nowrap} .kbt-cf.is-pos{background:rgba(var(--green-rgb),.12);color:var(--green)} .kbt-cf.is-neg{background:rgba(var(--red-rgb),.12);color:var(--red)} .kbt-cf.is-mut{background:var(--surface-2);color:var(--text-3)} .kbt-cf i{font-style:normal;font-family:var(--font-mono);font-size:10px;font-weight:500;opacity:.75} .kbt-ops{display:flex;flex-direction:column;gap:8px} .kbt-op{border-radius:12px;padding:12px 14px;background:var(--surface-2);display:flex;flex-direction:column;gap:8px} .kbt-op-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .kbt-op-l{display:flex;align-items:center;gap:8px;min-width:0} .kbt-op-bar{width:3px;height:24px;border-radius:2px;flex:none;background:var(--neutral-fill)} .kbt-op.is-pos .kbt-op-bar{background:var(--green)} .kbt-op.is-neg .kbt-op-bar{background:var(--red)} .kbt-op-time{font-size:13px;font-weight:600;color:var(--text)} .kbt-op-dir{display:inline-flex;align-items:center;border-radius:6px;padding:3px 8px;font-size:10.5px;font-weight:600;white-space:nowrap} .kbt-op-dir.is-buy{background:rgba(var(--green-rgb),.12);color:var(--green)} .kbt-op-dir.is-sell{background:rgba(var(--red-rgb),.12);color:var(--red)} .kbt-op-model{font-size:11px;font-weight:400;color:var(--text-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kbt-op-r{display:flex;align-items:center;gap:14px} .kbt-op-col{display:flex;flex-direction:column;align-items:flex-end;gap:1px} .kbt-op-cl{font-size:8.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-4)} .kbt-op-cv{font-family:var(--font-mono);font-size:11.5px;font-weight:500;color:var(--text-3)} .kbt-op-cv.is-ok{color:var(--green)} .kbt-op-cv.is-off{color:var(--red)} .kbt-op-pnl{min-width:56px;text-align:right;font-family:var(--font-mono);font-size:14px;font-weight:600; font-variant-numeric:tabular-nums;color:var(--text-3)} .kbt-op.is-pos .kbt-op-pnl{color:var(--green)} .kbt-op.is-neg .kbt-op-pnl{color:var(--red)} .kbt-op-tags{display:flex;flex-wrap:wrap;gap:5px} .kbt-op-tag{display:inline-flex;align-items:center;border-radius:6px;padding:3px 7px;background:var(--surface-3); font-size:10px;font-weight:500;color:var(--text-2)} .kbt-op-note{font-size:11.5px;font-weight:400;line-height:1.5;color:var(--text-3);text-wrap:pretty} .kbt-hyp{border-radius:12px;padding:13px 15px;background:var(--surface-2);display:flex;flex-direction:column;gap:6px} .kbt-hyp-v{font-size:12.5px;font-weight:400;line-height:1.55;color:var(--text-2);text-wrap:pretty} /* ---------- Validador: veredicto y promocion ---------- */ .kbt-vd{border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;background:var(--surface-2);border:1px solid var(--border)} .kbt-vd-h{display:flex;align-items:center;justify-content:space-between;gap:12px} .kbt-vd-l{font-size:9.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--text-4)} .kbt-vd-tag{display:inline-flex;align-items:center;border-radius:6px;padding:4px 9px;white-space:nowrap; font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--surface-3);color:var(--text-3)} .kbt-vd-why{font-size:12px;font-weight:400;line-height:1.5;color:var(--text-3);text-wrap:pretty} .kbt-vd.is-validado{border-color:rgba(var(--green-rgb),.30);background:rgba(var(--green-rgb),.07)} .kbt-vd.is-validado .kbt-vd-tag{background:rgba(var(--green-rgb),.16);color:var(--green)} .kbt-vd.is-prometedor .kbt-vd-tag{background:rgba(var(--primary-rgb),.16);color:var(--primary-link)} .kbt-vd.is-descartado{border-color:rgba(var(--red-rgb),.26);background:rgba(var(--red-rgb),.06)} .kbt-vd.is-descartado .kbt-vd-tag{background:rgba(var(--red-rgb),.16);color:var(--red)} .kbt-vd.is-dudoso .kbt-vd-tag{background:var(--amber-soft);color:var(--amber)} .kbt-vd button.kbt-vd-btn{align-self:flex-start;margin-top:2px;border:0!important;border-radius:10px;padding:10px 16px; cursor:pointer;box-shadow:none!important;background:var(--green)!important;color:var(--on-green)!important; font-family:var(--font-ui);font-size:12.5px;font-weight:600;transition:filter .13s} .kbt-vd button.kbt-vd-btn:hover{filter:brightness(1.08)} .kbt-vd button.kbt-vd-btn:disabled{opacity:.6;cursor:default} .kbt-vd-done{align-self:flex-start;margin-top:2px;display:inline-flex;align-items:center;border-radius:8px;padding:7px 12px; background:rgba(var(--green-rgb),.14);color:var(--green);font-size:11.5px;font-weight:600} /* ---------- Calidad de la muestra: fecha y origen por operacion ---------- */ .kbt-op-date{font-family:var(--font-mono);font-size:10.5px;font-weight:400;color:var(--text-4);white-space:nowrap} .kbt-op-src{display:inline-flex;align-items:center;border-radius:6px;padding:3px 7px;white-space:nowrap; font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase} .kbt-op-src.is-replay{background:rgba(var(--green-rgb),.12);color:var(--green)} .kbt-op-src.is-retro{background:var(--amber-soft);color:var(--amber)} /* ---------- Avance de muestra y aviso de muestra insuficiente ---------- */ .kbt-prog{display:flex;flex-direction:column;gap:6px;margin-top:4px} .kbt-prog-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px; font-size:10px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--text-4)} .kbt-prog-n{font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-2)} .kbt-prog-t{height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden} .kbt-prog-t span{display:block;height:5px;border-radius:3px;background:var(--primary);transition:width .3s ease} .kbt-prog-w{font-size:11.5px;font-weight:400;line-height:1.5;color:var(--text-4);text-wrap:pretty} .kbt-vd.is-encurso .kbt-vd-tag{background:rgba(var(--primary-rgb),.16);color:var(--primary-link)} .kbt-warn{display:flex;flex-direction:column;gap:7px;border-radius:12px;padding:13px 15px;margin-bottom:14px; background:var(--amber-soft);border:1px solid rgba(217,162,63,.22)} .kbt-warn b{font-size:12px;font-weight:600;color:var(--amber)} .kbt-warn span{font-size:11.5px;font-weight:400;line-height:1.55;color:var(--text-3);text-wrap:pretty} .kbt-warn .kbt-prog-t{background:rgba(217,162,63,.18)} .kbt-warn .kbt-prog-t span{background:var(--amber)} /* Las filas sin muestra suficiente se atenuan: estan para verlas evolucionar */ #kairo-bt .kbt-row.is-low .kbt-lab,#kairo-bt .kbt-row.is-low .kbt-num{opacity:.62} /* ---------- Analisis en profundidad ---------- */ #kairo-bt .kbt-anl.is-locked{opacity:.72} #kairo-bt .kbt-anl-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:10px;margin-bottom:14px} #kairo-bt .kbt-anl-c{display:flex;flex-direction:column;gap:3px;border-radius:11px;padding:12px 14px;background:var(--surface-2);min-width:0} #kairo-bt .kbt-anl-k{font-size:9.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-4)} #kairo-bt .kbt-anl-v{font-family:var(--font-mono);font-size:16px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap} #kairo-bt .kbt-anl-s{font-size:10.5px;font-weight:400;color:var(--text-4);line-height:1.4} #kairo-bt .kbt-anl-cmp{display:flex;flex-direction:column;gap:8px;margin-bottom:14px} #kairo-bt .kbt-anl-vs{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-radius:11px;padding:12px 14px;background:var(--surface-2)} #kairo-bt .kbt-anl-vs>span{display:flex;align-items:baseline;gap:8px;min-width:0} #kairo-bt .kbt-anl-vs i{font-style:normal;font-size:11.5px;font-weight:500;color:var(--text-3);white-space:nowrap} #kairo-bt .kbt-anl-vs b{font-family:var(--font-mono);font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums} #kairo-bt .kbt-anl-vs em{font-style:normal;font-family:var(--font-mono);font-size:10px;color:var(--text-4)} #kairo-bt .kbt-anl-vs .sep{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-off)} #kairo-bt .kbt-anl-l{display:flex;flex-direction:column;gap:9px} #kairo-bt .kbt-anl-i{display:flex;flex-direction:column;gap:4px;border-radius:11px;padding:13px 15px; background:var(--surface-2);border-left:3px solid var(--neutral-fill)} #kairo-bt .kbt-anl-i.is-ok{border-left-color:var(--green);background:rgba(var(--green-rgb),.05)} #kairo-bt .kbt-anl-i.is-aviso{border-left-color:var(--amber);background:var(--amber-soft)} #kairo-bt .kbt-anl-i.is-clave{border-left-color:var(--primary);background:rgba(var(--primary-rgb),.07)} #kairo-bt .kbt-anl-it{font-size:13px;font-weight:600;color:var(--text);text-wrap:pretty} #kairo-bt .kbt-anl-id{font-family:var(--font-mono);font-size:11px;font-weight:400;color:var(--text-3);line-height:1.5} #kairo-bt .kbt-anl-iq{font-size:12px;font-weight:400;color:var(--text-3);line-height:1.55;text-wrap:pretty} /* ---------- Estrategia seleccionada ---------- */ #kairo-bt .kbt-card{cursor:pointer} #kairo-bt .kbt-card.is-sel{border-color:rgba(var(--primary-rgb),.45); box-shadow:0 0 0 1px rgba(var(--primary-rgb),.14),0 18px 46px rgba(0,0,0,.5),0 0 34px rgba(var(--primary-rgb),.16)} #kairo-bt .kbt-sel-tag{position:absolute;top:0;right:0;border-radius:0 18px 0 10px;padding:5px 12px 6px; background:var(--primary);color:var(--on-primary);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase} #kairo-bt .kbt-card.is-sel .kbt-c-top{padding-right:96px} #kairo-bt .kbt-tag.is-tipo{background:rgba(var(--primary-rgb),.14);color:var(--primary-link);font-weight:600} /* ---------- Dialogo de archivar (medidas del proyecto) ---------- */ .kbt-dl[hidden]{display:none} .kbt-dl{position:fixed;inset:0;z-index:100020;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,24px)} .kbt-dl-bd{position:absolute;inset:0;background:rgba(5,7,10,.78)} .kbt-dl-box{position:relative;width:100%;max-width:428px;background:var(--surface); border:1px solid var(--border);border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.62); display:flex;flex-direction:column;animation:kbtPop 160ms cubic-bezier(.2,.8,.3,1) both} @keyframes kbtPop{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}} @media(prefers-reduced-motion:reduce){.kbt-dl-box{animation:none}} .kbt-dl-h{display:flex;align-items:flex-start;gap:14px;padding:22px 22px 14px} .kbt-dl-ico{width:38px;height:38px;flex:none;border-radius:11px;background:rgba(var(--red-rgb),.12);color:var(--red); display:flex;align-items:center;justify-content:center} .kbt-dl-ico svg{width:17px;height:17px} .kbt-dl-t{display:flex;flex-direction:column;gap:6px;min-width:0} .kbt-dl-tt{font-size:17px;font-weight:700;letter-spacing:-.015em;color:var(--text)} .kbt-dl-td{font-size:12.5px;font-weight:400;line-height:1.55;color:var(--text-3);text-wrap:pretty} .kbt-dl-c{margin:0 22px;border-radius:12px;padding:13px 15px;background:var(--surface-2); display:flex;align-items:center;justify-content:space-between;gap:14px} .kbt-dl-cl{display:flex;flex-direction:column;gap:3px;min-width:0} .kbt-dl-cn{font-size:13.5px;font-weight:600;color:var(--text)} .kbt-dl-cm{font-family:var(--font-mono);font-size:11px;font-weight:400;color:var(--text-4)} .kbt-dl-cr{font-family:var(--font-mono);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;flex:none;color:var(--text-3)} .kbt-dl-cr.is-pos{color:var(--green)} .kbt-dl-cr.is-neg{color:var(--red)} .kbt-dl-f{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:18px 22px 20px} .kbt-dl button.kbt-dl-b{border:0!important;border-radius:9px;padding:10px 16px;cursor:pointer;box-shadow:none!important; background:var(--surface-2)!important;color:var(--text-2)!important; font-family:var(--font-ui);font-size:12.5px;font-weight:600;transition:background .12s,color .12s} .kbt-dl button.kbt-dl-b:hover{background:var(--surface-3)!important;color:var(--text)!important} .kbt-dl button.kbt-dl-b.is-del{background:var(--red)!important;color:var(--on-red)!important} .kbt-dl button.kbt-dl-b.is-del:hover{filter:brightness(1.08)} .kbt-dl button.kbt-dl-b:disabled{opacity:.6;cursor:default} /* Aviso de confirmacion */ .kbt-toast[hidden]{display:none} .kbt-toast{position:fixed;z-index:100030;left:50%;bottom:26px;transform:translateX(-50%); display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--border); border-radius:11px;padding:11px 15px;box-shadow:0 18px 44px rgba(0,0,0,.5); font-family:var(--font-ui);font-size:12.5px;font-weight:500;color:var(--text)} .kbt-toast-i{width:20px;height:20px;flex:none;border-radius:6px;background:rgba(var(--green-rgb),.14);color:var(--green); display:flex;align-items:center;justify-content:center} .kbt-toast-i svg{width:12px;height:12px} /* Aviso de irreversibilidad */ .kbt-dl-tw{font-size:11.5px;font-weight:600;color:var(--red);margin-top:2px} /* ---------- Boton de eliminar: icono de papelera ---------- */ #kairo-bt .kbt-ico.is-del:hover{background:rgba(var(--red-rgb),.12)!important;color:var(--red)!important} .kbt-dl-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} /* ===== T6-C - Backtesting Sessions V2 ===== */ .kbt-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px} .kbt-head h2{margin:0 0 4px;font-size:20px} .kbt-lead{margin:0;font-size:13px;color:var(--text-3);max-width:60ch} .kbt-btn{border:1px solid var(--border);background:var(--surface);color:var(--text-1);border-radius:10px;padding:9px 14px;font-size:13px;font-weight:600;cursor:pointer} .kbt-btn:hover{border-color:var(--accent,#818cf8)} .kbt-btn.is-primary{background:var(--accent,#6366f1);border-color:transparent;color:#fff} .kbt-btn.is-danger{color:#f87171} .kbt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px} .kbt-card{border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:16px;display:flex;flex-direction:column;gap:12px} .kbt-card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .kbt-card-h h3{margin:0;font-size:15px} .kbt-sub{font-size:12px;color:var(--text-3);margin-top:2px} .kbt-est{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;text-transform:uppercase;letter-spacing:.03em;background:rgba(148,163,184,.16);color:var(--text-3)} .kbt-est.is-live{background:rgba(52,211,153,.16);color:#34d399} .kbt-est.is-done{background:rgba(129,140,248,.18);color:#818cf8} .kbt-per{font-size:12.5px;color:var(--text-2)} .kbt-prog-b{height:6px;border-radius:999px;background:rgba(148,163,184,.18);overflow:hidden;margin-bottom:5px} .kbt-prog-b span{display:block;height:100%;background:var(--accent,#6366f1)} .kbt-prog-t{font-size:12px;color:var(--text-3)} .kbt-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .kbt-kpis.is-wide{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))} .kbt-kpis>div{display:flex;flex-direction:column;gap:2px;min-width:0} .kbt-kpis i{font-style:normal;font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.03em} .kbt-kpis b{font-size:15px;font-weight:700} .kbt-card-f{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto} .kbt-empty{border:1px dashed var(--border);border-radius:14px;padding:26px;text-align:center;color:var(--text-3);font-size:13.5px} .kbt-detail{border:1px solid var(--border);border-radius:18px;background:var(--surface);padding:20px} .kbt-d-h{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px} .kbt-d-h h2{margin:0;font-size:18px} .kbt-proto{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 18px;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:16px} .kbt-proto>div{display:flex;flex-direction:column;gap:2px;min-width:0} .kbt-proto i{font-style:normal;font-size:11px;color:var(--text-3);text-transform:uppercase} .kbt-proto b{font-size:13px;overflow-wrap:anywhere} .kbt-hip{margin-bottom:16px} .kbt-hip i{font-style:normal;font-size:11px;color:var(--text-3);text-transform:uppercase} .kbt-hip p{margin:4px 0 0;font-size:13px;color:var(--text-2)} .kbt-acts{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0} .kbt-note{font-size:12.5px;color:var(--text-3)} .kbt-h3{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);margin:20px 0 10px} .kbt-tw{overflow-x:auto} .kbt-t{width:100%;border-collapse:collapse;font-size:12.5px;min-width:640px} .kbt-t th{text-align:left;font-size:11px;text-transform:uppercase;color:var(--text-3);padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap} .kbt-t td{padding:9px 10px;border-bottom:1px solid var(--border)} .kbt-t .kbt-r{font-weight:700;text-align:right} .kbt-m{font-size:11px;padding:2px 7px;border-radius:999px;background:rgba(148,163,184,.16);color:var(--text-2)} .kbt-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:flex-start;justify-content:center;padding:clamp(10px,3vw,32px);overflow-y:auto} .kbt-modal-bd{position:absolute;inset:0;background:rgba(5,7,10,.74)} .kbt-modal-box{position:relative;width:100%;max-width:520px;margin:auto;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:13px} .kbt-modal-box h3{margin:0 0 2px;font-size:17px} .kbt-f{display:flex;flex-direction:column;gap:5px;font-size:12.5px} .kbt-f>span{color:var(--text-2);font-weight:600} .kbt-f i{font-style:normal;color:var(--text-3);font-weight:400} .kbt-in{width:100%;box-sizing:border-box;background:var(--bg-2,rgba(148,163,184,.08));border:1px solid var(--border);border-radius:10px;padding:9px 11px;color:var(--text-1);font-size:13px} .kbt-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .kbt-derived{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:11px 13px;border:1px solid var(--border);border-radius:12px;background:rgba(148,163,184,.06)} .kbt-derived small{grid-column:1/-1;font-size:11.5px;color:var(--text-3)} .kbt-der-i{display:flex;flex-direction:column;gap:2px;min-width:0} .kbt-der-i i{font-style:normal;font-size:11px;color:var(--text-3);text-transform:uppercase} .kbt-der-i b{font-size:13px} .kbt-pills{display:flex;flex-wrap:wrap;gap:6px} .kbt-pill{border:1px solid var(--border);background:transparent;color:var(--text-2);border-radius:999px;padding:5px 11px;font-size:12px;cursor:pointer} .kbt-pill.is-on{background:var(--accent,#6366f1);border-color:transparent;color:#fff} .kbt-err{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.4);color:#f87171;border-radius:10px;padding:9px 12px;font-size:12.5px} .kbt-modal-f{display:flex;justify-content:flex-end;gap:8px;margin-top:4px} .kbt-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:100001;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:11px 18px;font-size:13px;box-shadow:var(--shadow)} @media(max-width:560px){.kbt-row2,.kbt-derived{grid-template-columns:1fr}.kbt-kpis{grid-template-columns:repeat(2,1fr)}} /* T6-D 3C-1 - Trading Model en Backtesting. Presentacion; la autoridad de asociacion vive en el backend (sesion sellada + herencia). */ .kbt-mv-g{display:flex;flex-wrap:wrap;gap:12px} .kbt-mv-c{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 200px} .kbt-mv-l{font-size:.75rem;color:var(--text-2)} .kbt-mv .kbt-in{min-width:0;max-width:none} .kbt-mv-msg{margin:6px 0 0;font-size:.75rem;color:var(--text-3);min-height:1em} .kbt-mv-msg.is-err{color:var(--red)} .kbt-mv-hint{margin:4px 0 0;font-size:.72rem;color:var(--text-4)} .kbt-mv-retry{margin-top:8px} .kbt-mv-tag{display:flex;gap:8px;align-items:baseline;margin:6px 0 2px;font-size:.8125rem} .kbt-mv-tag i{font-style:normal;color:var(--text-4);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em} .kbt-mv-tag b{color:var(--text);font-weight:600} .kbt-mv-tag.is-none b{color:var(--text-3);font-weight:400} .kbt-mv-st{color:var(--amber);font-size:.72rem;font-weight:500} @media (max-width:640px){.kbt-mv-c{flex:1 1 100%}} /* ============================================================ NEW SESSION MODAL (fidelidad visual sobre el Claude Design) El modal se monta en , fuera de #kairo-bt, asi que sus tokens de profundidad se declaran aqui: los --kbt-* de la pagina no lo alcanzan. Todo es presentacion. Ni un dato, ni un contrato, ni un mapping cambian. ============================================================ */ .kbt-nsm{ --nsm-w:1080px; --nsm-glow-a:rgba(91,124,217,.10); /* azul frio, iluminacion interior */ --nsm-glow-b:rgba(133,110,217,.07); /* violeta muy tenue, esquina opuesta */ --nsm-surf:linear-gradient(180deg,rgba(255,255,255,.014),rgba(0,0,0,.10)); --nsm-hi:rgba(255,255,255,.045); /* inset highlight superior */ --nsm-sh:0 30px 70px rgba(0,0,0,.60),0 2px 8px rgba(0,0,0,.35); --nsm-bd:rgba(255,255,255,.075); --nsm-fld:rgba(6,9,14,.55); --nsm-fld-bd:rgba(255,255,255,.07); --nsm-ro:rgba(255,255,255,.028); --nsm-chip:rgba(255,255,255,.035); --nsm-chip-bd:rgba(255,255,255,.075); --nsm-sel:rgba(91,124,217,.16); --nsm-sel-bd:rgba(91,124,217,.55); --nsm-sel-tx:#DCE4F5; } [data-theme="light"] .kbt-nsm{ --nsm-glow-a:rgba(91,124,217,.05); --nsm-glow-b:rgba(133,110,217,.035); --nsm-surf:linear-gradient(180deg,#fff,#FBFCFE); --nsm-hi:rgba(255,255,255,.9); --nsm-sh:0 1px 2px rgba(21,26,38,.05),0 24px 60px rgba(21,26,38,.12); --nsm-bd:rgba(21,26,38,.10); --nsm-fld:rgba(21,26,38,.028); --nsm-fld-bd:rgba(21,26,38,.12); --nsm-ro:rgba(21,26,38,.045); --nsm-chip:rgba(21,26,38,.03); --nsm-chip-bd:rgba(21,26,38,.12); --nsm-sel:rgba(63,95,199,.10); --nsm-sel-bd:rgba(63,95,199,.45); --nsm-sel-tx:#1E2A47; } .kbt-nsm{padding:clamp(12px,3vw,24px)} .kbt-nsm .kbt-modal-bd{background:rgba(5,7,10,.76)} [data-theme="light"] .kbt-nsm .kbt-modal-bd{background:rgba(18,22,32,.42)} /* D-1: ancho de la CAPTURA, no del HTML de referencia. El grid de 3 columnas necesita este ancho para no comprimirse; nunca supera el viewport. */ .kbt-nsm .kbt-modal-box{ width:100%;max-width:var(--nsm-w);margin:auto;padding:0;gap:0; border:1px solid var(--nsm-bd);border-radius:20px; background: radial-gradient(620px circle at 8% -6%,var(--nsm-glow-a),transparent 62%), radial-gradient(520px circle at 100% 108%,var(--nsm-glow-b),transparent 60%), var(--nsm-surf),var(--surface); box-shadow:var(--nsm-sh),inset 0 1px 0 var(--nsm-hi); } /* ---------- Header ---------- */ .kbt-nsm .kbt-nm-h{display:flex;align-items:flex-start;justify-content:space-between;gap:18px; padding:22px 26px 18px;border-bottom:1px solid var(--nsm-bd)} .kbt-nsm .kbt-nm-hl{display:flex;flex-direction:column;gap:5px;min-width:0} .kbt-nsm .kbt-nm-h h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-.015em;color:var(--text)} .kbt-nsm .kbt-nm-h p{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-3);max-width:72ch;text-wrap:pretty} .kbt-nsm .kbt-nm-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:5px} .kbt-nsm .kbt-nm-tag{display:inline-flex;align-items:center;border-radius:6px;padding:3px 8px; background:var(--nsm-sel);border:1px solid var(--nsm-sel-bd);color:var(--nsm-sel-tx); font-size:10.5px;font-weight:600;letter-spacing:.01em} .kbt-nsm .kbt-nm-tag.is-sec{background:var(--nsm-chip);border-color:var(--nsm-chip-bd);color:var(--text-3);font-weight:500} .kbt-nsm .kbt-nm-note{font-size:11px;color:var(--text-4,var(--text-3))} .kbt-nsm .kbt-nm-x{width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center; border:1px solid transparent;border-radius:9px;background:var(--nsm-chip);color:var(--text-3);cursor:pointer; transition:background 120ms ease,color 120ms ease} .kbt-nsm .kbt-nm-x:hover{background:var(--nsm-sel);color:var(--text)} /* El svg computaba width:0 (una regla global del tema gana a width:14px como item flexible) y, como el SVG recorta por defecto, la X no se dibujaba y el boton se veia vacio. flex:none + min-width lo fijan sin forzar prioridad. */ .kbt-nsm .kbt-nm-x svg{width:14px;min-width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round} /* ---------- Cuerpo: ritmo de 3 columnas ---------- */ .kbt-nsm .kbt-nm-b{display:flex;flex-direction:column;gap:16px;padding:20px 26px 4px} .kbt-nsm .kbt-nrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .kbt-nsm .kbt-nf{display:flex;flex-direction:column;gap:7px;min-width:0} .kbt-nsm .kbt-nl{display:flex;align-items:baseline;gap:6px;font-size:11.5px;font-weight:500;color:var(--text-2)} .kbt-nsm .kbt-nl i{font-style:normal;font-size:10.5px;font-weight:400;color:var(--text-4,var(--text-3))} .kbt-nsm .kbt-nh{font-style:normal;font-size:10.5px;color:var(--text-4,var(--text-3))} /* Campos: una sola familia visual para input, select, readonly y trigger. */ .kbt-nsm .kbt-in{width:100%;box-sizing:border-box;min-height:44px; background:var(--nsm-fld);border:1px solid var(--nsm-fld-bd);border-radius:10px; padding:11px 13px;color:var(--text);font-size:13px;font-weight:500; transition:border-color 120ms ease,background 120ms ease} .kbt-nsm select.kbt-in{appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%; background-size:5px 5px,5px 5px;background-repeat:no-repeat} .kbt-nsm .kbt-in:focus-visible{outline:2px solid var(--nsm-sel-bd);outline-offset:1px;border-color:transparent} .kbt-nsm .kbt-in::placeholder{color:var(--text-4,var(--text-3));font-weight:400} .kbt-nsm .kbt-nta{min-height:104px;resize:vertical;font-weight:400;line-height:1.55} /* Read-only real: misma familia, pero no simula ser interactivo. Sin opacity de disabled: el dato es valido y legible, solo no se edita aqui. */ .kbt-nsm .kbt-in.is-ro{background:var(--nsm-ro);border-style:dashed;cursor:default;color:var(--text-2)} .kbt-nsm .kbt-in.is-ro:focus{outline:none} /* Periodo: dos fechas dentro de una sola celda del grid. */ .kbt-nsm .kbt-per2{display:flex;align-items:center;gap:8px;min-width:0} .kbt-nsm .kbt-per2 .kbt-in{flex:1 1 0;min-width:0;font-size:12.5px;padding-left:11px;padding-right:9px} .kbt-nsm .kbt-per2>span{flex:none;color:var(--text-4,var(--text-3));font-size:12px} /* ---------- Instrumentos: control con forma de campo ---------- */ .kbt-nsm .kbt-ms{position:relative;min-width:0} .kbt-nsm .kbt-ms-b{display:flex;align-items:center;justify-content:space-between;gap:10px; text-align:left;cursor:pointer;font-family:inherit} .kbt-nsm .kbt-ms-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kbt-nsm .kbt-ms-v.is-any{color:var(--text-4,var(--text-3));font-weight:400} .kbt-nsm .kbt-ms-c{flex:none;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent; border-top:5px solid currentColor;opacity:.65} .kbt-nsm .kbt-ms-p{position:absolute;z-index:5;top:calc(100% + 6px);left:0;right:0; border:1px solid var(--nsm-bd);border-radius:12px;background:var(--surface); box-shadow:0 18px 44px rgba(0,0,0,.45);padding:8px;display:flex;flex-direction:column;gap:6px} /* display:flex de arriba gana al display:none del UA para [hidden]: hay que devolverselo explicitamente o el desplegable nace abierto. */ .kbt-nsm .kbt-ms-p[hidden]{display:none} [data-theme="light"] .kbt-nsm .kbt-ms-p{box-shadow:0 18px 44px rgba(21,26,38,.16)} .kbt-nsm .kbt-ms-s{width:100%;box-sizing:border-box;min-height:34px;border-radius:8px; border:1px solid var(--nsm-fld-bd);background:var(--nsm-fld);color:var(--text); padding:7px 10px;font-size:12.5px} .kbt-nsm .kbt-ms-l{max-height:230px;overflow-y:auto;display:flex;flex-direction:column;gap:1px} .kbt-nsm .kbt-ms-g{padding:7px 8px 3px;font-size:9.5px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--text-4,var(--text-3))} .kbt-nsm .kbt-ms-o{display:flex;align-items:center;gap:9px;width:100%;text-align:left; border:none;background:transparent;color:var(--text-2);border-radius:8px; padding:7px 9px;font-size:12.5px;font-weight:500;cursor:pointer;font-family:inherit} .kbt-nsm .kbt-ms-o:hover{background:var(--nsm-chip);color:var(--text)} .kbt-nsm .kbt-ms-o.is-on{color:var(--nsm-sel-tx)} .kbt-nsm .kbt-ms-tk{flex:none;width:14px;height:14px;border-radius:4px; border:1px solid var(--nsm-chip-bd);background:transparent;position:relative} .kbt-nsm .kbt-ms-o.is-on .kbt-ms-tk{background:var(--nsm-sel);border-color:var(--nsm-sel-bd)} .kbt-nsm .kbt-ms-o.is-on .kbt-ms-tk::after{content:"";position:absolute;left:4px;top:1px; width:4px;height:8px;border:solid var(--nsm-sel-bd);border-width:0 1.6px 1.6px 0;transform:rotate(42deg)} .kbt-nsm .kbt-ms-none{padding:10px;font-size:12px;color:var(--text-3);text-align:center} /* ---------- Confluencias ---------- */ .kbt-nsm .kbt-chips{display:flex;flex-wrap:wrap;gap:7px} .kbt-nsm .kbt-chip{border:1px solid var(--nsm-chip-bd);background:var(--nsm-chip);color:var(--text-3); border-radius:9px;padding:8px 12px;font-size:12px;font-weight:500;cursor:pointer;font-family:inherit; transition:background 120ms ease,border-color 120ms ease,color 120ms ease} .kbt-nsm .kbt-chip:hover{color:var(--text)} .kbt-nsm .kbt-chip[aria-pressed="true"]{background:var(--nsm-sel);border-color:var(--nsm-sel-bd);color:var(--nsm-sel-tx)} .kbt-nsm .kbt-chip:focus-visible{outline:2px solid var(--nsm-sel-bd);outline-offset:1px} .kbt-nsm .kbt-confn{margin:2px 0 0;font-size:11px;color:var(--text-4,var(--text-3))} /* ---------- Trading Model: bloque secundario, no protagonista ---------- */ .kbt-nsm .kbt-mv{border:1px solid var(--nsm-bd);border-radius:12px;padding:14px 16px;background:var(--nsm-ro)} .kbt-nsm .kbt-mv-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .kbt-nsm .kbt-mv-c{display:flex;flex-direction:column;gap:6px;min-width:0} .kbt-nsm .kbt-mv-l{font-size:11px;color:var(--text-3)} .kbt-nsm .kbt-err{margin:0} /* ---------- Footer ---------- */ .kbt-nsm .kbt-nm-f{display:flex;align-items:center;justify-content:space-between;gap:14px; flex-wrap:wrap;padding:16px 26px 20px} .kbt-nsm .kbt-nm-sum{font-size:11.5px;color:var(--text-4,var(--text-3));min-width:0} .kbt-nsm .kbt-nm-btns{display:flex;align-items:center;gap:9px;margin-left:auto} .kbt-nsm .kbt-nm-btns .kbt-btn{min-height:40px;padding:10px 18px;border-radius:10px;font-weight:600} .kbt-nsm .kbt-btn.is-busy{cursor:progress;opacity:.75} .kbt-nsm .kbt-btn[disabled]{cursor:not-allowed} /* ---------- Responsive ---------- */ /* Guarda global del modal: varias clases de aqui (.kbt-nf, .kbt-btn, .kbt-ms-p) declaran display, y eso gana al display:none que el navegador aplica a [hidden]. Sin esta regla, el bloque Trading Model se ve mientras carga y el boton de reintento aparece siempre. Va al final para ganar por orden. */ .kbt-nsm [hidden]{display:none} @media (max-width:1000px){ .kbt-nsm .kbt-nrow{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:640px){ .kbt-nsm{padding:0} .kbt-nsm .kbt-modal-box{max-width:none;border-radius:16px 16px 0 0;margin:auto 0 0;min-height:100%} .kbt-nsm .kbt-nm-h{padding:18px 16px 14px} .kbt-nsm .kbt-nm-h h3{font-size:17px} .kbt-nsm .kbt-nm-b{padding:16px 16px 4px;gap:14px} .kbt-nsm .kbt-nrow{grid-template-columns:minmax(0,1fr)} .kbt-nsm .kbt-mv-g{grid-template-columns:minmax(0,1fr)} .kbt-nsm .kbt-nm-f{padding:14px 16px 18px} .kbt-nsm .kbt-nm-sum{flex:1 1 100%} .kbt-nsm .kbt-nm-btns{width:100%} .kbt-nsm .kbt-nm-btns .kbt-btn{flex:1 1 0} } /* ============================================================ B7.1 - OBJETIVO DE MUESTRA (SAMPLE TARGET) "Objetivo alcanzado" es presentacion derivada, nunca un estado persistido. Por eso NO usa el verde de performance (que en Kairo significa resultado positivo): alcanzar la muestra no dice nada sobre si la operativa funciona. Usa el azul/violeta del producto y, sobre todo, lo dice con texto. ============================================================ */ #kairo-bt .kbt-target{ flex:none;font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase; white-space:nowrap;padding:3px 8px;border-radius:999px; background:rgba(129,140,248,.16);color:#a5b0fb;border:1px solid rgba(129,140,248,.34)} [data-theme="light"] #kairo-bt .kbt-target{background:rgba(79,70,229,.10);color:#4338CA;border-color:rgba(79,70,229,.30)} /* En la card el progreso es una sola linea; si no cabe, el badge baja en vez de comprimir la barra o cortar el contador. */ #kairo-bt .kbt-pg{flex-wrap:wrap;row-gap:6px} #kairo-bt .kbt-pg-b{flex:1 1 90px} /* Variante en linea para la ficha de detalle (dentro de .kbt-proto b). */ .kbt-target.is-inline{display:inline-block;margin-left:6px;vertical-align:middle; font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase; padding:2px 7px;border-radius:999px; background:rgba(129,140,248,.16);color:#a5b0fb;border:1px solid rgba(129,140,248,.34)} [data-theme="light"] .kbt-target.is-inline{background:rgba(79,70,229,.10);color:#4338CA;border-color:rgba(79,70,229,.30)} /* Nota de ayuda del detalle: solo aparece con la muestra alcanzada. */ .kbt-tgt-note{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--text-3); border-left:2px solid rgba(129,140,248,.45);padding-left:11px} [data-theme="light"] .kbt-tgt-note{border-left-color:rgba(79,70,229,.4)} /* ---------- Dialogo de confirmacion ---------- Reutiliza el shell .kbt-modal ya existente; solo ajusta tamano y ritmo. Botones con etiquetas reales ("Seguir en curso" / "Completar sesion"), que window.confirm no permite. */ .kbt-cfm{align-items:center} .kbt-cfm .kbt-modal-box{max-width:440px;padding:22px;gap:12px} .kbt-cfm .kbt-modal-box h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em} .kbt-cfm-p{margin:0;font-size:12.5px;line-height:1.6;color:var(--text-3);text-wrap:pretty} .kbt-cfm .kbt-modal-f{margin-top:6px} .kbt-cfm .kbt-btn{min-height:38px} @media (max-width:480px){ .kbt-cfm .kbt-modal-f{flex-wrap:wrap} .kbt-cfm .kbt-modal-f .kbt-btn{flex:1 1 0} } /* ============================================================ B7 - SESSION ANALYSIS SCOPE Seleccion = azul Kairo (--primary). El verde sigue siendo estado y rendimiento: usarlo aqui haria pensar que la sesion elegida va bien. ============================================================ */ /* Target de seleccion en overlay. No envuelve nada, asi que no hay controles interactivos anidados; el pie se dibuja por encima y sus botones siguen siendo clicables. */ #kairo-bt .kbt-c-sel{position:absolute;inset:0;z-index:2; background:transparent;border:0;padding:0;margin:0;cursor:pointer; border-radius:inherit;-webkit-appearance:none;appearance:none} #kairo-bt .kbt-c-sel:focus-visible{outline:2px solid var(--primary);outline-offset:-3px;border-radius:16px} #kairo-bt .kbt-acts{position:relative;z-index:3} /* El cursor:pointer heredado de .kbt-card se limita al target real. */ #kairo-bt .kbt-card{cursor:default} /* La etiqueta reutiliza .kbt-sel-tag, que ya existia en el proyecto. */ #kairo-bt .kbt-sel-tag{z-index:4} /* B7 no la usa: reservaba 96px en la cabecera y seleccionar hacia crecer la card ~44px al envolver el nombre. Se neutraliza esa reserva. */ #kairo-bt .kbt-card.is-sel .kbt-c-top{padding-right:0} /* Indicador de alcance, dentro de la cabecera de B5: es la zona que cambia. */ #kairo-bt .kbt-scope{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:8px} #kairo-bt .kbt-scope-l{font-size:11px;color:var(--text-3)} #kairo-bt .kbt-scope-b{border:1px solid var(--border);background:transparent;color:var(--text-3); border-radius:999px;padding:4px 11px;font-size:11.5px;font-weight:500;cursor:pointer;font-family:inherit; transition:background .14s,border-color .14s,color .14s} #kairo-bt .kbt-scope-b:hover{color:var(--text);border-color:rgba(var(--primary-rgb),.34)} #kairo-bt .kbt-scope-b.is-on{background:rgba(var(--primary-rgb),.14); border-color:rgba(var(--primary-rgb),.34);color:var(--primary-link);font-weight:600} #kairo-bt .kbt-scope-b:focus-visible{outline:2px solid var(--primary);outline-offset:1px} #kairo-bt .kbt-scope-cur{display:inline-flex;align-items:center;border-radius:999px; padding:4px 11px;font-size:11.5px;font-weight:600; background:rgba(var(--primary-rgb),.14);color:var(--primary-link); border:1px solid rgba(var(--primary-rgb),.34); max-width:min(320px,60vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ============================================================ CTA "Crear sesion" - paleta Kairo real .kbt-btn.is-primary usaba var(--accent,#6366f1). --accent NO existe en Kairo, asi que el color aplicado era el literal #6366f1: un indigo ajeno a la paleta. La autoridad de CTA primario es --primary / --primary-2 / --on-primary / --primary-rgb, la misma de "+ Nueva sesion" y "Abrir sesion". Solo cambia el color: la logica de submit no se toca. ============================================================ */ .kbt-btn.is-primary{background:var(--primary);border-color:transparent;color:var(--on-primary); box-shadow:0 6px 20px rgba(var(--primary-rgb),.24); transition:background .14s,box-shadow .14s} .kbt-btn.is-primary:hover{background:var(--primary-2);box-shadow:0 8px 26px rgba(var(--primary-rgb),.34)} .kbt-btn.is-primary:active{transform:translateY(1px)} .kbt-btn.is-primary:focus-visible{outline:2px solid var(--primary);outline-offset:2px} .kbt-btn.is-primary[disabled],.kbt-btn.is-primary.is-busy{ background:var(--primary);box-shadow:none;opacity:.62} /* El hover generico de .kbt-btn apuntaba al mismo token inexistente. */ .kbt-btn:hover{border-color:rgba(var(--primary-rgb),.45)} /* ============================================================ B7.3 - ESTADO INTERMEDIO: HAY ACTIVIDAD, NO HAY RENDIMIENTO n_ops > 0 y n_closed = 0. No es un aviso ni un error: es un momento normal del estudio. Misma superficie punteada que .kbt-nocurve (surface-2 + borde discontinuo) para que se lea como el mismo lenguaje, con dos lineas en vez de una. Sin color nuevo: solo tokens de texto existentes. ============================================================ */ #kairo-bt .kbt-noperf{display:flex;flex-direction:column;justify-content:center;gap:5px; min-height:96px;border-radius:11px;padding:12px 14px; background:var(--surface-2);border:1px dashed var(--border);text-align:center} #kairo-bt .kbt-noperf-t{font-size:12.5px;font-weight:600;color:var(--text-2);line-height:1.25} #kairo-bt .kbt-noperf-d{font-size:11px;font-weight:400;color:var(--text-4);line-height:1.45;text-wrap:pretty} @media (max-width:420px){ #kairo-bt .kbt-noperf{min-height:88px;padding:11px 12px} } /* ============================================================ B7.4 - VISTA DETALLE Presentacion. Ni una formula, ni un contrato, ni un estado cambian. Solo tokens reales: --primary(-2/-rgb), --on-primary, --text(-2/-3/-4), --surface, --surface-2, --border, --green, --red y sus -rgb. ============================================================ */ /* ---------- Hero: identidad + estado ---------- */ #kairo-bt .kbt-d-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:16px; padding:18px 20px;margin:-20px -20px 18px;border-bottom:1px solid var(--border); border-radius:18px 18px 0 0; background: radial-gradient(520px circle at 0% -40%,rgba(var(--primary-rgb),.10),transparent 60%), radial-gradient(420px circle at 100% -60%,rgba(129,140,248,.07),transparent 60%)} #kairo-bt .kbt-d-id{display:flex;flex-direction:column;gap:4px;min-width:0} #kairo-bt .kbt-d-hero h2{margin:0;font-size:21px;font-weight:700;letter-spacing:-.015em; color:var(--text);overflow-wrap:anywhere} #kairo-bt .kbt-d-hero .kbt-sub{font-size:12.5px;color:var(--text-3)} /* ---------- Progreso del estudio ---------- */ #kairo-bt .kbt-d-prog{display:flex;flex-direction:column;gap:8px; border:1px solid var(--border);border-radius:14px;padding:14px 16px; background:var(--surface-2);margin-bottom:16px} #kairo-bt .kbt-d-prog-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} #kairo-bt .kbt-d-prog-l{font-size:10.5px;font-weight:600;letter-spacing:.09em; text-transform:uppercase;color:var(--text-4)} #kairo-bt .kbt-d-prog-n{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap} #kairo-bt .kbt-d-prog-n b{font-family:var(--font-mono);font-size:26px;font-weight:700; line-height:1;color:var(--text)} #kairo-bt .kbt-d-prog-n span{font-family:var(--font-mono);font-size:14px;color:var(--text-3)} #kairo-bt .kbt-d-prog-n em{font-style:normal;font-family:var(--font-mono);font-size:12.5px; color:var(--text-4);margin-left:4px} /* .kbt-pg-b nace como item flexible de la card; aqui, dentro de una columna, se estiraria a toda la altura sobrante. Se fija como barra. */ #kairo-bt .kbt-d-prog .kbt-pg-b{width:100%;height:6px;flex:none;align-self:stretch} #kairo-bt .kbt-d-prog-s{font-size:11px;color:var(--text-4)} /* ---------- Guia de cierre ---------- Informacion de producto: superficie secundaria y acento azul muy tenue. Ni ambar de aviso, ni rojo de error, ni verde de exito. */ #kairo-bt .kbt-d-guide{display:flex;align-items:flex-start;gap:11px; border:1px solid var(--border);border-left:2px solid rgba(var(--primary-rgb),.45); border-radius:12px;padding:13px 15px;background:var(--surface-2);margin-bottom:16px} #kairo-bt .kbt-d-gi{flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center; border-radius:7px;background:rgba(var(--primary-rgb),.14);color:var(--primary-link)} #kairo-bt .kbt-d-gi svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round} #kairo-bt .kbt-d-gt{display:flex;flex-direction:column;gap:4px;min-width:0} #kairo-bt .kbt-d-gt b{font-size:12.5px;font-weight:600;color:var(--text-2)} #kairo-bt .kbt-d-gt span{font-size:12px;line-height:1.55;color:var(--text-4);text-wrap:pretty} #kairo-bt .kbt-d-gx{font-size:11px;color:var(--text-4);opacity:.85} /* ---------- Resumen analitico ---------- */ #kairo-bt .kbt-d-mets{display:flex;flex-direction:column;gap:10px;margin-bottom:16px} #kairo-bt .kbt-d-mets-hi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:10px} #kairo-bt .kbt-d-mets-lo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(104px,100%),1fr));gap:8px} #kairo-bt .kbt-d-k{display:flex;flex-direction:column;gap:4px;min-width:0; border:1px solid var(--border);border-radius:12px;padding:11px 13px;background:var(--surface-2)} #kairo-bt .kbt-d-k i{font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--text-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #kairo-bt .kbt-d-k b{font-family:var(--font-mono);font-size:15px;font-weight:600;color:var(--text)} #kairo-bt .kbt-d-mets-hi .kbt-d-k b{font-size:21px;line-height:1.1} #kairo-bt .kbt-d-mets-hi .kbt-d-k{padding:13px 15px} #kairo-bt .kbt-d-k b.is-pos{color:var(--green)} #kairo-bt .kbt-d-k b.is-neg{color:var(--red)} #kairo-bt .kbt-noperf.is-detail{margin-bottom:16px;min-height:0;padding:16px 18px;text-align:left} /* ---------- Acciones ---------- Jerarquia: primaria solida, completar en tinted azul (claramente pulsable, nunca roja: cerrar no destruye nada) y abandonar como terciaria discreta. */ #kairo-bt .kbt-d-acts{display:flex;align-items:center;gap:9px;flex-wrap:wrap; padding-top:14px;border-top:1px solid var(--border)} #kairo-bt .kbt-d-acts .kbt-btn{min-height:40px;padding:10px 16px;border-radius:10px; font-size:13px;font-weight:600;cursor:pointer} #kairo-bt .kbt-d-acts button.kbt-d-a1{background:var(--primary);color:var(--on-primary); box-shadow:0 6px 20px rgba(var(--primary-rgb),.24)} #kairo-bt .kbt-d-acts button.kbt-d-a1:hover{background:var(--primary-2)} #kairo-bt .kbt-d-acts button.kbt-d-a2{background:rgba(var(--primary-rgb),.12); color:var(--primary-link);border:1px solid rgba(var(--primary-rgb),.40)} #kairo-bt .kbt-d-acts button.kbt-d-a2:hover{background:rgba(var(--primary-rgb),.20)} #kairo-bt .kbt-d-acts button.kbt-d-a3{background:transparent;color:var(--text-4); border:1px solid transparent;font-weight:500;margin-left:auto} #kairo-bt .kbt-d-acts button.kbt-d-a3:hover{color:var(--red); background:rgba(var(--red-rgb),.08)} #kairo-bt .kbt-d-acts .kbt-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px} #kairo-bt .kbt-d-closed{display:flex;flex-direction:column;gap:4px; border:1px solid var(--border);border-radius:12px;padding:13px 15px; background:var(--surface-2);margin-top:14px} #kairo-bt .kbt-d-closed b{font-size:12.5px;font-weight:600;color:var(--text-2)} #kairo-bt .kbt-d-closed span{font-size:12px;line-height:1.5;color:var(--text-4)} /* ---------- Tabla de operaciones ---------- */ #kairo-bt .kbt-tw{border:1px solid var(--border);border-radius:12px;background:var(--surface-2)} #kairo-bt .kbt-t th{position:sticky;top:0;background:var(--surface-2);font-size:9.5px; letter-spacing:.09em;font-weight:600;color:var(--text-4);padding:11px 12px;z-index:1} #kairo-bt .kbt-t td{padding:11px 12px;font-size:12.5px;color:var(--text-2);vertical-align:middle} #kairo-bt .kbt-t tbody tr{transition:background 110ms ease} #kairo-bt .kbt-t tbody tr:hover{background:rgba(var(--primary-rgb),.05)} #kairo-bt .kbt-t tbody tr:last-child td{border-bottom:0} #kairo-bt .kbt-t td:last-child,#kairo-bt .kbt-t th:last-child{text-align:right; font-family:var(--font-mono);font-weight:600} #kairo-bt .kbt-empty{border:1px dashed var(--border);border-radius:12px;background:var(--surface-2)} /* ---------- Responsive ---------- */ @media (max-width:820px){ #kairo-bt .kbt-d-hero{padding:16px} #kairo-bt .kbt-d-hero h2{font-size:18px} } @media (max-width:520px){ #kairo-bt .kbt-d-hero{flex-direction:column;align-items:flex-start;gap:10px} #kairo-bt .kbt-d-prog-n b{font-size:23px} #kairo-bt .kbt-d-acts{flex-direction:column;align-items:stretch} #kairo-bt .kbt-d-acts .kbt-btn{width:100%} #kairo-bt .kbt-d-acts button.kbt-d-a3{margin-left:0} } /* ============================================================ B7.5 - DENSIDAD COMPACTA DEL MODAL NUEVA SESION La autoridad de escala pasa a ser la referencia compacta: un modal, no una pagina dentro de otra. Se conservan los 16 campos, los 27 instrumentos y los 29 chips; lo que baja es densidad, no funcionalidad. Solo presentacion: ni un contrato, ni un payload, ni un campo cambian. ============================================================ */ .kbt-nsm{--nsm-w:660px;padding:20px;align-items:center} /* Sin max-height en la caja: si se la ponemos, el desplegable de instrumentos -que es absoluto- queda recortado. Cuando el viewport es corto desplaza el overlay, y margin:auto evita que flexbox corte la parte de arriba. */ .kbt-nsm .kbt-modal-box{border-radius:16px} /* ---------- Header compacto ---------- */ .kbt-nsm .kbt-nm-h{padding:14px 18px 12px;gap:14px} .kbt-nsm .kbt-nm-hl{gap:3px} .kbt-nsm .kbt-nm-h h3{font-size:16.5px} .kbt-nsm .kbt-nm-h p{font-size:11.5px;line-height:1.4;max-width:62ch} .kbt-nsm .kbt-nm-meta{gap:5px;margin-top:3px} .kbt-nsm .kbt-nm-tag{padding:2px 7px;font-size:9.5px} .kbt-nsm .kbt-nm-note{font-size:10px} .kbt-nsm .kbt-nm-x{width:28px;height:28px;border-radius:8px} /* ---------- Cuerpo: menos aire entre grupos ---------- */ .kbt-nsm .kbt-nm-b{padding:14px 18px 2px;gap:11px} .kbt-nsm .kbt-nrow{gap:10px} .kbt-nsm .kbt-nf{gap:5px} .kbt-nsm .kbt-nl{font-size:11px} .kbt-nsm .kbt-nl i{font-size:10px} .kbt-nsm .kbt-nh{font-size:9.5px;margin-top:1px;line-height:1.3} /* ---------- Campos ---------- */ .kbt-nsm .kbt-in{min-height:38px;padding:8px 11px;font-size:12.5px;border-radius:9px} .kbt-nsm select.kbt-in{padding-right:28px; background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%} .kbt-nsm .kbt-nta{min-height:76px;padding:9px 11px;line-height:1.5} .kbt-nsm .kbt-per2{gap:6px} .kbt-nsm .kbt-per2 .kbt-in{font-size:11.5px;padding-left:9px;padding-right:7px} .kbt-nsm .kbt-per2>span{font-size:11px} /* Desplegable de instrumentos, tambien mas denso. */ .kbt-nsm .kbt-ms-p{padding:6px;gap:5px;border-radius:10px} .kbt-nsm .kbt-ms-s{min-height:30px;font-size:11.5px;padding:6px 9px} .kbt-nsm .kbt-ms-l{max-height:190px} .kbt-nsm .kbt-ms-o{padding:5px 8px;font-size:11.5px;gap:8px} .kbt-nsm .kbt-ms-g{padding:6px 8px 2px;font-size:9px} /* ---------- Confluencias: chips tipo etiqueta ---------- Los 29 siguen ahi; lo que baja es el tamano de cada uno para que entren en pocas filas dentro de un modal estrecho. */ .kbt-nsm .kbt-chips{gap:5px} .kbt-nsm .kbt-chip{padding:5px 9px;font-size:11px;border-radius:7px;line-height:1.2} .kbt-nsm .kbt-confn{font-size:10px;margin-top:1px} /* ---------- Trading Model: subpanel discreto ---------- */ .kbt-nsm .kbt-mv{padding:10px 12px;border-radius:10px;gap:5px} .kbt-nsm .kbt-mv-g{gap:9px} .kbt-nsm .kbt-mv-c{gap:4px} .kbt-nsm .kbt-mv-l{font-size:10px} .kbt-nsm .kbt-mv-hint,.kbt-nsm .kbt-mv-msg{font-size:10px;margin:2px 0 0} /* ---------- Footer en una linea ---------- */ .kbt-nsm .kbt-nm-f{padding:11px 18px 14px;gap:12px} .kbt-nsm .kbt-nm-sum{font-size:11px} .kbt-nsm .kbt-nm-btns{gap:8px} .kbt-nsm .kbt-nm-btns .kbt-btn{min-height:36px;padding:8px 15px;font-size:12.5px;border-radius:9px} /* ---------- 768: crece proporcionalmente, 2 columnas ---------- */ @media (max-width:900px){ .kbt-nsm{padding:16px} .kbt-nsm .kbt-modal-box{width:calc(100vw - 32px)} .kbt-nsm .kbt-nrow{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ---------- 390: una columna y campos tactiles ---------- Aqui el scroll vertical es normal, asi que la altura se devuelve a un tamano comodo para el dedo en vez de forzar densidad de escritorio. */ @media (max-width:640px){ .kbt-nsm{padding:0;align-items:flex-end} .kbt-nsm .kbt-modal-box{width:100%;border-radius:16px 16px 0 0} .kbt-nsm .kbt-nrow{grid-template-columns:minmax(0,1fr)} .kbt-nsm .kbt-in{min-height:44px;padding:11px 12px;font-size:13px} .kbt-nsm .kbt-nta{min-height:88px} .kbt-nsm .kbt-chip{padding:7px 11px;font-size:12px} .kbt-nsm .kbt-ms-o{padding:8px 9px;font-size:12.5px} .kbt-nsm .kbt-nm-btns .kbt-btn{min-height:44px;font-size:13px} } /* ---------- B7.5 segunda pasada: los bloques que mas pesaban ---------- Medido en DOM real: la fila Setup/Bias/Objetivo ocupaba 96px porque la etiqueta "Setup / modelo de entrada" envolvia a dos lineas en una columna de 200px; Trading Model 158px por su panel y su mensaje vacio; y los chips 4 filas. Se corrige cada causa, no el sintoma. */ .kbt-nsm .kbt-nl{font-size:10.5px;gap:5px;line-height:1.3} .kbt-nsm .kbt-nl i{font-size:9.5px} /* Chips mas pequenos: 29 siguen estando, caben en menos filas. */ .kbt-nsm .kbt-chips{gap:4px} .kbt-nsm .kbt-chip{padding:4px 8px;font-size:10.5px;border-radius:6px} .kbt-nsm .kbt-nta{min-height:70px} /* Trading Model: el mensaje vacio seguia ocupando linea. */ .kbt-nsm .kbt-mv{padding:9px 11px;gap:4px} .kbt-nsm .kbt-mv-g{gap:8px} .kbt-nsm .kbt-mv-msg:empty{display:none} .kbt-nsm .kbt-mv-hint{font-size:9.5px;margin:1px 0 0;line-height:1.3} /* Header: mismo copy, menos aire. */ .kbt-nsm .kbt-nm-h{padding:12px 16px 10px} .kbt-nsm .kbt-nm-h h3{font-size:15.5px} .kbt-nsm .kbt-nm-h p{font-size:11px;line-height:1.35} .kbt-nsm .kbt-nm-meta{margin-top:2px} .kbt-nsm .kbt-nm-b{padding:12px 16px 2px;gap:10px} .kbt-nsm .kbt-nm-f{padding:10px 16px 12px} .kbt-nsm .kbt-nh{font-size:9px;line-height:1.25} /* En movil se recupera tamano tactil: alli el scroll es normal. */ @media (max-width:640px){ .kbt-nsm .kbt-nl{font-size:11.5px} .kbt-nsm .kbt-chip{padding:7px 11px;font-size:12px;border-radius:8px} .kbt-nsm .kbt-nta{min-height:88px} } /* ============================================================ B7.6 - AFFORDANCE DE LOS BADGES DE METODOLOGIA Causa raiz: .kbt-nm-tag reutilizaba los MISMOS tokens que los chips de confluencias (--nsm-sel = chip marcado, --nsm-chip = chip sin marcar), asi que "indicadores" se leia como una opcion deseleccionada y clicable. Aqui se rompe ese lenguaje compartido: los badges pasan a micro-tipografia en versalitas dentro de una pildora, con candado y etiqueta explicita. Los chips siguen siendo sentence-case, mas grandes, con hover y aria-pressed. Presentacion pura: mismo markup , mismo payload, mismo contrato. ============================================================ */ .kbt-nsm .kbt-nm-meta{gap:6px;row-gap:2px;margin-top:1px} /* El bloque de metodologia sumaba 17px al alto aprobado en B7.5; se recupera apretando su propio ritmo, no reduciendo campos. */ .kbt-nsm .kbt-nm-h{padding:11px 16px 8px} /* Etiqueta explicita: dice QUE es esta zona, no solo la colorea. */ .kbt-nsm .kbt-nm-ml{display:inline-flex;align-items:center;gap:4px; font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--text-4);white-space:nowrap} .kbt-nsm .kbt-nm-lock{width:10px;height:10px;flex:none;fill:none;stroke:currentColor; stroke-width:1.4;stroke-linejoin:round;opacity:.85} /* Badges: pildora + versalitas. Nunca el rectangulo redondeado de los chips. */ .kbt-nsm .kbt-nm-tag{display:inline-flex;align-items:center;border-radius:999px; padding:2px 8px;font-size:9px;font-weight:700;letter-spacing:.07em; text-transform:uppercase;cursor:default; background:rgba(var(--primary-rgb),.10);border:1px solid rgba(var(--primary-rgb),.32); color:var(--primary-link)} /* Complementaria: mas tenue y con borde discontinuo, para que no se lea como "opcion apagada" sino como dato secundario heredado. */ .kbt-nsm .kbt-nm-tag.is-sec{background:transparent;border:1px dashed var(--border); color:var(--text-3);font-weight:600} /* Sin ningun indicio de interaccion: ni cursor, ni hover, ni foco. */ .kbt-nsm .kbt-nm-tag:hover, .kbt-nsm .kbt-nm-tag.is-sec:hover{background:rgba(var(--primary-rgb),.10);color:var(--primary-link)} .kbt-nsm .kbt-nm-tag.is-sec:hover{background:transparent;color:var(--text-3)} .kbt-nsm .kbt-nm-note{flex:1 1 100%;font-size:10px;line-height:1.25;color:var(--text-4)} /* Los chips de confluencia mantienen su affordance: se refuerza el contraste de comportamiento, no se cambia su aspecto base. */ .kbt-nsm .kbt-chip{cursor:pointer;text-transform:none;letter-spacing:0} @media (max-width:640px){ .kbt-nsm .kbt-nm-ml{font-size:10px} .kbt-nsm .kbt-nm-tag{font-size:9.5px;padding:3px 9px} .kbt-nsm .kbt-nm-note{font-size:11px} } /* ============================================================ B7.7 - ELIMINAR BACKTESTING DESDE LA CARD Accion destructiva discreta: nunca compite con "Abrir sesion" y solo se tine de rojo al acercarse. El rojo sale de --red / --red-rgb, la autoridad semantica que ya usa Kairo. Presentacion: el contrato de borrado no cambia. ============================================================ */ #kairo-bt .kbt-ico.is-danger{color:var(--text-4)} #kairo-bt .kbt-ico.is-danger svg{fill:none;stroke:currentColor;stroke-width:1.3; stroke-linecap:round;stroke-linejoin:round} #kairo-bt .kbt-ico.is-danger:hover{color:var(--red)} #kairo-bt .kbt-ico.is-danger:focus-visible{outline:2px solid var(--red);outline-offset:2px} /* Dialogo destructivo: mismo componente accesible que "Completar backtesting", con boton primario en rojo semantico en vez de azul. */ .kbt-cfm.is-danger .kbt-modal-box h3{color:var(--text)} .kbt-cfm .kbt-btn.is-del{background:var(--red);border-color:transparent;color:#fff; box-shadow:0 6px 20px rgba(var(--red-rgb),.24);transition:filter .14s,box-shadow .14s} .kbt-cfm .kbt-btn.is-del:hover{filter:brightness(1.06);box-shadow:0 8px 26px rgba(var(--red-rgb),.34)} .kbt-cfm .kbt-btn.is-del:focus-visible{outline:2px solid var(--red);outline-offset:2px} .kbt-cfm .kbt-btn.is-del[disabled]{opacity:.62;cursor:not-allowed} @media (max-width:640px){ /* El objetivo tactil no se reduce en movil. */ #kairo-bt .kbt-ico.is-danger{min-width:40px;min-height:40px} } /* ============================================================ B7.6.1 - (1) TRADING MODEL: DIVULGACION PROGRESIVA Pasa de bloque permanente de ~118px a una linea opcional. La capability es la misma: solo cambia cuando se muestra. ============================================================ */ /* Colapsado en UNA linea: etiqueta, pregunta y boton conviven; el panel ocupa el ancho completo cuando se despliega. Asi el estado por defecto es una fila opcional y no un bloque de formulario. */ .kbt-nsm .kbt-mv{padding:8px 11px;gap:6px 10px;flex-direction:row;align-items:center;flex-wrap:wrap} .kbt-nsm .kbt-mv-top{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;min-width:0} .kbt-nsm .kbt-mv-q{font-size:10.5px;color:var(--text-4)} .kbt-nsm .kbt-mv-link{margin-left:auto;min-height:28px;padding:5px 10px;border-radius:8px; font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap; background:transparent;border:1px solid rgba(var(--primary-rgb),.38);color:var(--primary-link)} .kbt-nsm .kbt-mv-link:hover{background:rgba(var(--primary-rgb),.12)} .kbt-nsm .kbt-mv-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px} .kbt-nsm .kbt-mv-link[hidden]{display:none} .kbt-nsm .kbt-mv-panel{display:flex;flex-direction:column;gap:7px;margin-top:2px;flex:1 1 100%} .kbt-nsm .kbt-mv-panel[hidden]{display:none} .kbt-nsm .kbt-mv-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .kbt-nsm .kbt-mv-unlink{min-height:28px;padding:5px 10px;border-radius:8px;font-size:11px; cursor:pointer;background:transparent;border:1px solid var(--border);color:var(--text-4)} .kbt-nsm .kbt-mv-unlink:hover{color:var(--text-2);border-color:rgba(var(--primary-rgb),.32)} .kbt-nsm .kbt-mv-unlink:focus-visible{outline:2px solid var(--primary);outline-offset:2px} .kbt-nsm .kbt-mv-hint{margin:0} /* ============================================================ B7.6.1 - (2) FOCO DE LOS CAMPOS EN DARK Causa raiz medida en el DOM: tres reglas del tema (una de ellas inline, del kit de Elementor) apuntan a input[type="text"]:focus con background-color:#fff y color:#475569. Su especificidad (0,2,1) le gana a .kbt-nsm .kbt-in (0,2,0), asi que el campo nacia oscuro y se volvia blanco al enfocarlo. Los mismos selectores incluyen textarea:focus, select:focus, number, date y search, de modo que afectaba a TODOS los campos del modal. Se resuelve subiendo la especificidad a (0,3,0) -una clase mas- sin ningun !important y sin tocar formularios fuera del modal. ============================================================ */ .kbt-nsm .kbt-in:focus, .kbt-nsm .kbt-in:focus-visible, .kbt-nsm .kbt-in:hover{background:var(--nsm-fld);color:var(--text)} .kbt-nsm .kbt-in:focus{border-color:rgba(var(--primary-rgb),.55); box-shadow:0 0 0 3px rgba(var(--primary-rgb),.14)} .kbt-nsm .kbt-in:focus-visible{outline:1px solid rgba(var(--primary-rgb),.55);outline-offset:0} .kbt-nsm .kbt-in::placeholder{color:var(--text-4)} .kbt-nsm .kbt-in:focus::placeholder{color:var(--text-4)} /* Los read-only conservan su propia superficie tambien al pasar el raton. */ .kbt-nsm .kbt-in.is-ro:hover,.kbt-nsm .kbt-in.is-ro:focus{background:var(--nsm-ro);color:var(--text-2); box-shadow:none;border-color:var(--nsm-fld-bd)} /* Autofill: Chrome pinta su propio fondo por debajo de la capa de autor. Se neutraliza con un inset gigante del color real del campo. */ .kbt-nsm .kbt-in:-webkit-autofill, .kbt-nsm .kbt-in:-webkit-autofill:focus{ -webkit-text-fill-color:var(--text); -webkit-box-shadow:0 0 0 1000px var(--surface) inset; caret-color:var(--text)} /* ============================================================ B7.8 - CARD ANALIZADA SIN AMBIGUEDAD Separacion de autoridades: ESTADO -> badge (.kbt-state). Verde/azul/gris semanticos. SELECCION -> marco exterior azul + etiqueta "Analizando". Antes una sesion en_curso llevaba borde y halo VERDE exteriores, asi que con otra card seleccionada en azul parecia haber dos cards activas. El marco exterior deja de representar el estado. Solo presentacion: BT_SCOPE, peticiones, cache y B5 intactos. ============================================================ */ /* --- 1. El estado ya no pinta el marco exterior --- */ #kairo-bt .kbt-card.is-live{ border-color:var(--border); box-shadow:var(--kbt-card-sh),inset 0 1px 0 var(--kbt-surf-hi); /* Se devuelven los tokens de profundidad a los neutros: el ::before y el ::after de la card los usaban para tenir de verde todo el ambiente. */ --kbt-sheen-c:rgba(255,255,255,.16); --kbt-glow-blue:rgba(91,124,217,.05)} [data-theme="light"] #kairo-bt .kbt-card.is-live{ --kbt-sheen-c:rgba(21,26,38,.10); --kbt-glow-blue:transparent} /* completada/abandonada no tenian regla de marco propia: ya eran neutras. Se declara explicitamente para que ningun estado futuro reintroduzca el marco de seleccion por accidente. */ #kairo-bt .kbt-card.is-done, #kairo-bt .kbt-card.is-off, #kairo-bt .kbt-card.is-empty{border-color:var(--border)} /* --- 2. Solo la card analizada lleva marco azul --- */ /* Va DESPUES de las reglas de estado para ganar por orden a igual especificidad. El grosor extra se hace con box-shadow, no con border-width: asi no hay reflow y seleccionar GBP no mueve a EURUSD. */ #kairo-bt .kbt-card.is-sel, #kairo-bt .kbt-card.is-live.is-sel, #kairo-bt .kbt-card.is-done.is-sel, #kairo-bt .kbt-card.is-off.is-sel{ border-color:rgba(var(--primary-rgb),.72); box-shadow:0 0 0 1px rgba(var(--primary-rgb),.55), 0 18px 46px rgba(0,0,0,.5), 0 0 40px rgba(var(--primary-rgb),.20); --kbt-glow-blue:rgba(var(--primary-rgb),.13); --kbt-sheen-c:rgba(var(--primary-rgb),.55)} [data-theme="light"] #kairo-bt .kbt-card.is-sel, [data-theme="light"] #kairo-bt .kbt-card.is-live.is-sel, [data-theme="light"] #kairo-bt .kbt-card.is-done.is-sel{ box-shadow:0 0 0 1px rgba(var(--primary-rgb),.45), 0 10px 30px rgba(21,26,38,.10), 0 0 28px rgba(var(--primary-rgb),.14); --kbt-glow-blue:rgba(var(--primary-rgb),.07)} /* --- 3. Etiqueta "Analizando" --- Una sola linea siempre: el nombre de cuenta trunca y la pildora nunca baja, asi la card seleccionada conserva exactamente la altura de las demas. */ #kairo-bt .kbt-c-sub{display:flex;align-items:center;min-width:0} #kairo-bt .kbt-c-subt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} #kairo-bt .kbt-c-an{flex:none;display:inline-flex;align-items:center;box-sizing:border-box; margin-left:7px;border-radius:999px;padding:0 7px;height:14px; font-family:var(--font-ui);font-size:8.5px;font-weight:700;letter-spacing:.06em;line-height:1; text-transform:uppercase;white-space:nowrap; background:rgba(var(--primary-rgb),.16);color:var(--primary-link); border:1px solid rgba(var(--primary-rgb),.38)} /* --- 4. Jerarquia: seleccionado >> hover >> reposo --- */ #kairo-bt .kbt-card:not(.is-sel):hover{border-color:rgba(var(--primary-rgb),.22)} /* El foco de teclado se distingue de la seleccion: discontinuo y sin halo. */ #kairo-bt .kbt-c-sel:focus-visible{outline:2px dashed rgba(var(--primary-rgb),.85);outline-offset:-4px} @media (max-width:420px){ #kairo-bt .kbt-c-an{margin-left:6px;font-size:8.5px;padding:1px 7px} } /* ============================================================ B7.9 - CONTEXTO DE ESTUDIO EN EL DETALLE Solo presentacion. Reutiliza los tokens, la tipografia y los radios que ya usan .kbt-proto y los chips del modulo; no introduce direccion visual nueva. ============================================================ */ #kairo-bt .kbt-ex{display:flex;flex-direction:column;gap:12px; border:1px solid var(--border);border-radius:14px;padding:14px 16px; background:var(--surface-2);margin-bottom:16px} #kairo-bt .kbt-ex-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:12px 18px} #kairo-bt .kbt-ex-f{display:flex;flex-direction:column;gap:3px;min-width:0} #kairo-bt .kbt-ex-f i{font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.09em; text-transform:uppercase;color:var(--text-4)} #kairo-bt .kbt-ex-f b{font-size:13px;font-weight:600;color:var(--text-2);overflow-wrap:anywhere} #kairo-bt .kbt-ex-c{display:flex;flex-direction:column;gap:7px;min-width:0} #kairo-bt .kbt-ex-c>i{font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.09em; text-transform:uppercase;color:var(--text-4)} #kairo-bt .kbt-ex-chips{display:flex;flex-wrap:wrap;gap:6px} /* Informativo, no seleccionable: sin cursor, sin hover, sin aria-pressed. */ #kairo-bt .kbt-ex-chip{display:inline-flex;align-items:center;border-radius:7px;padding:4px 9px; font-size:11px;font-weight:500;line-height:1.25;cursor:default; background:rgba(var(--primary-rgb),.10);color:var(--primary-link); border:1px solid rgba(var(--primary-rgb),.26);max-width:100%;overflow-wrap:anywhere} @media (max-width:520px){ #kairo-bt .kbt-ex{padding:12px 13px;gap:10px} #kairo-bt .kbt-ex-g{grid-template-columns:minmax(0,1fr);gap:10px} }