.omnia-chart-card { display: flex; flex-direction: column; min-width: 0; margin-top: 0.6rem; }
.omnia-chart-card .chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.omnia-chart-card .chart-head .eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--omnia-text-muted); }
.omnia-chart-card .chart-head .instr { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.omnia-chart-card .chart-head .instr .px { font-size: 1rem; font-weight: 700; }
.omnia-chart-card .chart-head .range { font-size: 0.82rem; color: var(--omnia-text-muted); }
.omnia-chart-card .tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
/* Base del segmentado (fondo/borde/estado activo dorado) -- Dashboard la
   tenía como regla GENERAL de página (`.seg`/`.seg button[aria-pressed]`,
   fuera de `.omnia-chart-card`, reusada por otros controles de la página).
   Capital.com usa `.seg` EXCLUSIVAMENTE dentro de OmniaChart (confirmado con
   grep real en capital_app.js) pero nunca tuvo esa regla general -- bug real
   reportado por Pepe (2026-09-15, captura real): "Velas"/"Halo" sin resaltar
   en dorado, "SL/TP" como texto plano suelto. Root cause real, no supuesto.
   Fix acá (scoped a `.omnia-chart-card`, más específico que cualquier `.seg`
   general de página): el componente queda auto-contenido, nunca depende de
   que la página que lo consume defina esta base por su cuenta -- cero cambio
   visual en Dashboard (mismos valores, solo más específico). */
.omnia-chart-card .seg { display: inline-flex; border: 1px solid var(--omnia-glass-border); border-radius: var(--radius-pill); overflow: hidden; }
.omnia-chart-card .seg button { background: transparent; color: var(--omnia-text-muted); border: 0; cursor: pointer; font: inherit; }
.omnia-chart-card .seg button[aria-pressed="true"] { background: var(--omnia-gold-muted); color: var(--omnia-gold-bright); }
.omnia-chart-card .tools .seg button { font-size: 0.8rem; padding: 0.3rem 0.8rem; transition: background var(--transition-base), color var(--transition-base); }
.omnia-chart-card .tools .seg button:hover { color: var(--omnia-text); }
.omnia-chart-card .tools .seg button:focus-visible { outline: 2px solid var(--omnia-gold-border); outline-offset: -2px; }
.omnia-chart-card .seg-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--omnia-text-muted); margin-right: 0.1rem; }
/* `flex: none` explícito (Pepe, 2026-09-14, 2do feedback en vivo -- "muy
   aplastados" comparado con Investigación): sin esto, el `.chart` SIN
   escopear de este archivo (gráfico ancla, `flex: 1; min-height: 200px`)
   se filtraba acá vía cascada -- `flex-basis:0%` de ese `flex:1` gana
   sobre `height` en el eje principal de un flex item (regla real de
   flexbox), así que la altura efectiva quedaba clampeada al `min-height:
   200px` de ESA regla en vez de a la de acá, cada vez que el contenedor
   padre (`.view` del detalle, sin `align-items:stretch` con espacio extra)
   no tenía sobrante para que `flex-grow` repartiera. Medido con
   `getBoundingClientRect()`: 199px real vs. 420px declarado. Altura
   subida a 480px (antes 420) para que se vea tan legible como Investigación
   incluso comprimido -- el diálogo ya tiene scroll propio (`.dlg-body
   { overflow-y: auto }`) para el resto del contenido. */
.omnia-chart-card .chart { position: relative; height: 480px; flex: none; border-top: 1px solid var(--omnia-glass-border); margin-top: 0; }
.omnia-chart-card .chart > .lwc { position: absolute; inset: 0; }
.omnia-chart-card .chart-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: var(--font-mono); font-size: 0.74rem; color: var(--omnia-text-muted); padding-top: 0.6rem; border-top: 1px solid var(--omnia-glass-border); }
.omnia-chart-card .chart-foot span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.omnia-chart-card .chart .empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--omnia-text-muted); font-size: 0.85rem; text-align: center; padding: 1rem; border: 0; }
.omnia-chart-card .legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; font-size: 0.78rem; color: var(--omnia-text-muted); padding: 0.55rem 0 0.4rem; }
.omnia-chart-card .lg { display: inline-flex; align-items: center; gap: 0.4rem; font: inherit; color: inherit; background: transparent;
  border: 1px solid transparent; border-radius: var(--radius-pill); padding: 0.18rem 0.55rem; margin: 0 0.25rem 0 0; cursor: pointer; user-select: none;
  transition: opacity var(--transition-base), border-color var(--transition-base), background var(--transition-base); }
.omnia-chart-card .lg svg { width: 14px; height: 14px; flex-shrink: 0; transition: filter var(--transition-base); }
.omnia-chart-card .lg:hover { border-color: var(--omnia-glass-border-hover); background: var(--omnia-glass-bg-hover); color: var(--omnia-text); }
.omnia-chart-card .lg:focus-visible { outline: 2px solid var(--omnia-gold-border); outline-offset: 1px; }
.omnia-chart-card .lg[aria-checked="false"] { opacity: 0.38; }
.omnia-chart-card .lg[aria-checked="false"] svg { filter: grayscale(1); }
.omnia-chart-card .lg[aria-checked="false"]:hover { opacity: 0.7; }
.omnia-chart-card .lg--master { color: var(--omnia-text); font-weight: 600; padding-left: 0.4rem; }
.omnia-chart-card .lg--master svg { width: 15px; height: 15px; color: var(--omnia-gold-bright); }
.omnia-chart-card .lg--master .cnt { font-family: var(--font-mono); font-size: 0.7rem; color: var(--omnia-text-muted); font-weight: 400; }
.omnia-chart-card .lg--master[aria-checked="false"] { opacity: 1; }
.omnia-chart-card .lg--master[aria-checked="false"] svg { filter: none; color: var(--omnia-text-muted); }
.omnia-chart-card .legend .sep { width: 1px; height: 16px; background: var(--omnia-glass-border-hover); margin: 0 0.35rem 0 0.1rem; }
.omnia-chart-card .legend .hint { margin-left: auto; font-size: 0.7rem; color: var(--omnia-text-muted); opacity: 0.7; white-space: nowrap; }
.omnia-chart-card .razon-card { position: absolute; z-index: 4; width: min(340px, calc(100% - 16px)); max-height: 88%; overflow: auto; overflow-x: hidden;
  background: var(--omnia-glass-bg-solid); backdrop-filter: blur(var(--omnia-glass-blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--omnia-glass-blur)) saturate(140%);
  border: 1px solid var(--omnia-glass-border-hover); border-left: 3px solid var(--accent, var(--omnia-gold)); border-radius: 12px; box-shadow: var(--omnia-glass-shadow);
  font-size: 0.8rem; line-height: 1.4; color: var(--omnia-text); pointer-events: auto;
  opacity: 0; transform: translateY(4px); transition: opacity 120ms ease-out, transform 120ms ease-out; }
.omnia-chart-card .razon-card.show { opacity: 1; transform: none; }
.omnia-chart-card .razon-card::after { content: ""; position: absolute; left: var(--caret-x, 20px); width: 10px; height: 10px; background: var(--omnia-glass-bg-solid); border: 1px solid var(--omnia-glass-border-hover); transform: rotate(45deg); }
.omnia-chart-card .razon-card.above::after { bottom: -6px; border-top: 0; border-left: 0; }
.omnia-chart-card .razon-card.below::after { top: -6px; border-bottom: 0; border-right: 0; }
.omnia-chart-card .razon-card .rc-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.3rem; padding: 0.55rem 0.7rem 0.35rem; }
.omnia-chart-card .razon-card .rc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.45rem; min-width: 0; }
.omnia-chart-card .razon-card .rc-act { display: inline-flex; align-items: center; gap: 0.15rem; }
.omnia-chart-card .razon-card .rc-chip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent, var(--omnia-gold-bright)); white-space: nowrap; }
.omnia-chart-card .razon-card .rc-chip svg { width: 12px; height: 12px; }
.omnia-chart-card .razon-card .rc-time { font-family: var(--font-mono); font-size: 0.7rem; color: var(--omnia-text-muted); white-space: nowrap; }
.omnia-chart-card .razon-card .rc-price { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700; margin-left: auto; }
.omnia-chart-card .razon-card .rc-close { width: 24px; height: 24px; border-radius: var(--radius-pill); border: 1px solid transparent; background: transparent; color: var(--omnia-text-muted); display: grid; place-items: center; cursor: pointer; padding: 0; margin-left: 0.25rem; }
.omnia-chart-card .razon-card .rc-close:hover { border-color: var(--omnia-glass-border-hover); color: var(--omnia-text); }
.omnia-chart-card .razon-card .rc-close svg { width: 14px; height: 14px; }
.omnia-chart-card .razon-card .rc-pin { width: 22px; height: 22px; display: grid; place-items: center; color: var(--omnia-gold-bright); background: var(--omnia-gold-muted); border: 1px solid var(--omnia-gold-border); border-radius: var(--radius-pill); margin-left: 0.3rem; flex-shrink: 0; }
.omnia-chart-card .razon-card .rc-pin svg { width: 12px; height: 12px; }
.omnia-chart-card .razon-card .rc-body { padding: 0 0.7rem 0.55rem; }
.omnia-chart-card .razon-card .rc-lbl { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--omnia-text-muted); margin: 0.25rem 0 0.15rem; display: flex; align-items: center; gap: 0.3rem; }
.omnia-chart-card .razon-card .rc-lbl svg { width: 12px; height: 12px; }
.omnia-chart-card .razon-card .rc-razon { margin: 0; white-space: pre-wrap; }
.omnia-chart-card .razon-card .rc-razon + .rc-razon { margin-top: 0.35rem; }
.omnia-chart-card .razon-card .rc-sec { margin-top: 0.45rem; padding-top: 0.35rem; border-top: 1px dashed var(--omnia-glass-border-hover); color: var(--omnia-text-muted); font-size: 0.76rem; }
.omnia-chart-card .razon-card .rc-sec > summary { list-style: none; cursor: pointer; color: var(--omnia-gold); margin: 0.1rem 0; }
.omnia-chart-card .razon-card .rc-sec > summary::-webkit-details-marker { display: none; }
.omnia-chart-card .razon-card .rc-sec > summary::before { content: "▸"; font-size: 0.7rem; }
.omnia-chart-card .razon-card .rc-sec[open] > summary::before { content: "▾"; }
.omnia-chart-card .razon-card .rc-razon .rc-k { font-weight: 700; color: var(--omnia-text); }
/* El caret (::after, bottom:-6px) quedaba fuera del borde y agrandaba el area desplazable ~6 px: aparecia una barra de scroll aunque el contenido entraba entero. Recortado igual que antes (nunca se veia). */
.omnia-chart-card .razon-card::after { display: none; }
.omnia-chart-card .razon-card .rc-razon .ell { color: var(--omnia-text-muted); }
.omnia-chart-card .razon-card .rc-parcial { display: flex; align-items: flex-start; gap: 0.35rem; margin-top: 0.4rem; padding: 0.35rem 0.5rem; border-radius: 6px; background: var(--color-warning-bg); color: var(--color-warning); font-size: 0.72rem; line-height: 1.35; }
.omnia-chart-card .razon-card .rc-parcial svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; }
.omnia-chart-card .razon-card .rc-group { list-style: none; margin: 0; padding: 0 0 0.3rem; }
.omnia-chart-card .razon-card .rc-group details { border-top: 1px solid var(--omnia-glass-border); }
.omnia-chart-card .razon-card .rc-group summary { display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.7rem; cursor: pointer; list-style: none; }
.omnia-chart-card .razon-card .rc-group summary::-webkit-details-marker { display: none; }
.omnia-chart-card .razon-card .rc-group summary .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); flex-shrink: 0; margin: 0; }
.omnia-chart-card .razon-card .rc-group summary .dot.sq { border-radius: 1px; }
.omnia-chart-card .razon-card .rc-group summary .dot.tri { width: 0; height: 0; background: transparent; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 8px solid var(--dot); border-radius: 0; }
.omnia-chart-card .razon-card .rc-group summary .dot.tri.dn { border-bottom: 0; border-top: 8px solid var(--dot); }
.omnia-chart-card .razon-card .rc-group summary .s-act { font-weight: 700; font-size: 0.74rem; color: var(--dot); text-transform: uppercase; letter-spacing: 0.03em; }
.omnia-chart-card .razon-card .rc-group summary .s-time { font-family: var(--font-mono); font-size: 0.7rem; color: var(--omnia-text-muted); }
.omnia-chart-card .razon-card .rc-group summary .s-pre { flex: 1; min-width: 0; color: var(--omnia-text-muted); font-size: 0.74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Precio real de cada decisión en la esquina derecha de su fila (bug 2026-09-25: la ENTRADA no
   lo mostraba en ningún lado dentro del grupo; su vista previa es la razón, no el precio). */
.omnia-chart-card .razon-card .rc-group summary .s-px { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700; flex-shrink: 0; margin-left: auto; }
.omnia-chart-card .razon-card .rc-group summary .chev { width: 14px; height: 14px; color: var(--omnia-text-muted); transition: transform var(--transition-base); flex-shrink: 0; }
.omnia-chart-card .razon-card .rc-group details[open] summary .chev { transform: rotate(180deg); }
.omnia-chart-card .razon-card .rc-group details[open] summary .s-pre { display: none; }
.omnia-chart-card .razon-card .rc-group details .rc-body { padding-top: 0; }
.omnia-chart-card .razon-card .rc-group summary:hover { background: var(--omnia-glass-bg-hover); }
.omnia-chart-card .razon-card .rc-ghint { padding: 0.25rem 0.7rem 0.45rem; font-size: 0.7rem; color: var(--omnia-text-muted); display: flex; align-items: center; gap: 0.3rem; }
.omnia-chart-card .razon-card .rc-ghint svg { width: 12px; height: 12px; }
.omnia-chart-card .chart.pinned-mode .lwc { cursor: default; }
@media (max-width: 767px) { .omnia-chart-card .chart { height: 320px; } .omnia-chart-card .legend .hint, .omnia-chart-card .seg-label { display: none; } .omnia-chart-card .razon-card { width: min(300px, calc(100% - 12px)); } }