/* GENERADO por scripts/extraer_chart_propio_css.py -- NO EDITAR A MANO.
   Puente de variables entre los tokens de bonos_html.py (noticias_html._CSS) y los nombres que usan
   las reglas de styles.css que este archivo reutiliza para el gráfico. Ver el docstring del script. */
:root {
  --border: var(--borde);
  --border-medium: var(--borde);
  --border-soft: var(--borde);
  --text: var(--texto);
  --text-dim: var(--suave);
  --muted: var(--suave);
  --card: var(--panel);
  --surface-card: var(--panel);
  --mercados-landing-panel-bg: var(--panel);
  --input-bg: var(--panel);
  --body-bg: var(--bg);
  --accent: var(--acento);
  --table-row-hover: rgba(128, 128, 128, .14);
  --group-hover-bg: rgba(128, 128, 128, .12);
  --group-active-bg: var(--acento);
  --group-active-fg: #ffffff;
  --tab-active-fg: #ffffff;
  --tab-active-grad-a: var(--acento);
  --tab-active-grad-b: var(--acento-fuerte);
  --font-table: 13px;
  --hybrid-section-btn-font: 11px;
  --hybrid-section-btn-gap: 5px;
  --hybrid-section-btn-pad: 6px 10px;
  --chart-propio-escala: 1;
  /* Esta página no lleva el zoom:0.8 global del SPA: el contra-zoom de esas reglas tiene que partir
     de 1, o el gráfico sale un 20-25% mal escalado. */
  --mercados-doc-zoom: 1;
}

.mercados-inicio-hybrid-watchlist__section-filter .mercados-filter-btn-group {
  flex-wrap: nowrap;
  gap: var(--hybrid-section-btn-gap, 5px);
}
.mercados-inicio-hybrid-watchlist__section-filter .mercados-filter-btn {
  font-size: var(--hybrid-section-btn-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  padding: var(--hybrid-section-btn-pad);
}
.mercados-inicio-hybrid-watchlist__rf-var-filter .mercados-filter-btn-group,
.mercados-inicio-hybrid-watchlist__equity-leg-filter .mercados-filter-btn-group,
.mercados-inicio-hybrid-watchlist__rf-global-rate-filter .mercados-filter-btn-group {
  gap: 4px;
}
@media (max-width: 768px) {
  .mercados-filter-btn,
  .filterOption.mercados-filter-btn {
    padding-top: 9px;
    padding-bottom: 9px;
  }
}
@media (max-width: 1024px) {
  .filters,
  #panels_dashboards .dashboard-be-head,
  #panels_dashboards .mercados-filter-btn-group,
  #panels_dashboards .dashboard-forwards-head,
  /* **La barra de filtros del gráfico, que en celular se ENCIMABA.**

     Es la captura que mandó el dueño el 06/09/2026: "Variación", "Fecha Operación", "Restaurar",
     "Precio · Ult. Precio" y "Tasa · TIR" dibujados unos sobre otros. Medido en un teléfono de
     393 px: `Ult. Precio` iba de 254 a 334 y `TIR` arrancaba en 326 — ocho píxeles de superposición—
     y el grupo padre medía 52 px con un hijo de 80 adentro.

     La causa no es `flex-wrap`: en escritorio esta barra es una **grilla de tres columnas**
     (`minmax(0,1fr) auto minmax(0,1fr)`), pensada para dejar el título centrado entre dos espacios
     iguales. En un teléfono la columna del medio no entra, y una grilla no envuelve: desborda. Por
     eso se encimaba en vez de apilarse, que es la distinción que hay que hacer antes de tocar nada.

     Acá pasa a ser la misma tira que se desliza que el resto de las barras de esta lista. */
  #panels_dashboards .dashboard-soberano-chart-toolbar,
  #panels_dashboards .dashboard-tc-section__head-tools,
  #panels_calculadoras .calc-calc-controls,
  #panels_calculadoras .calc-calc-mercado-block,
  #panels_calculadoras .calc-instrument-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    /* Una barra de scroll de 12 px arriba de una fila de 44 px se come un cuarto del control. */
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    /* Que el primero no quede pegado al borde al volver al principio. */
    scroll-padding-left: 12px;
  }
  .filters > *,
  #panels_dashboards .dashboard-be-head > *,
  #panels_dashboards .mercados-filter-btn-group > *,
  /* Y los nietos: en Tipos de Cambio los controles del gráfico viven un nivel más adentro
     (`.dashboard-soberano-chart-toolbar > .dashboard-tc-chart-metric-wrap > label`), así que el
     `> *` de la tira no los alcanzaba. Medido a 390 px: los tres campos quedaban en 46, 75 y 31 px
     con su contenido desbordando 121, 138 y 79 — el `<select>` de "Variación" se dibujaba encima de
     la etiqueta "Fecha Operación". Es la captura que mandó el dueño (M1). */
  #panels_dashboards .dashboard-soberano-usd-chart-metric-wrap > * {
    flex: 0 0 auto;
    min-width: max-content;
  }
  .filters::-webkit-scrollbar,
  #panels_dashboards .dashboard-be-head::-webkit-scrollbar,
  #panels_dashboards .mercados-filter-btn-group::-webkit-scrollbar,
  #panels_dashboards .dashboard-forwards-head::-webkit-scrollbar,
  #panels_dashboards .dashboard-tc-section__head-tools::-webkit-scrollbar,
  #panels_calculadoras .calc-calc-controls::-webkit-scrollbar,
  #panels_calculadoras .calc-calc-mercado-block::-webkit-scrollbar,
  #panels_calculadoras .calc-instrument-bar::-webkit-scrollbar {
    height: 4px;
  }
  .filters::-webkit-scrollbar-thumb,
  #panels_dashboards .dashboard-be-head::-webkit-scrollbar-thumb,
  #panels_dashboards .mercados-filter-btn-group::-webkit-scrollbar-thumb,
  #panels_dashboards .dashboard-forwards-head::-webkit-scrollbar-thumb,
  #panels_dashboards .dashboard-tc-section__head-tools::-webkit-scrollbar-thumb,
  #panels_calculadoras .calc-calc-controls::-webkit-scrollbar-thumb,
  #panels_calculadoras .calc-calc-mercado-block::-webkit-scrollbar-thumb,
  #panels_calculadoras .calc-instrument-bar::-webkit-scrollbar-thumb {
    background: var(--border-soft);
    border-radius: 2px;
  }
}
.mercados-filter-btn-group {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}
.mercados-filter-btn {
  font: inherit;
  font-size: var(--font-table);
  padding: 6px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface-card);
  color: var(--text);
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
}
.mercados-filter-btn:hover {
  border-color: var(--tab-active-grad-a, #2563eb);
}
.mercados-filter-btn:disabled,
.mercados-filter-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.mercados-filter-btn.is-active,
.filterOption.mercados-filter-btn.is-active,
.mercados-filter-btn--radio.is-active {
  background: linear-gradient(135deg, var(--tab-active-grad-a), var(--tab-active-grad-b));
  border-color: var(--tab-active-grad-a);
  color: var(--tab-active-fg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.dashboard-supergroup-nav .mercados-filter-btn-group {
  flex-wrap: wrap;
}
.mercados-filter-btn--radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}
html[data-theme="light"] .mercados-filter-btn.is-active,
html[data-theme="light"] .filterOption.mercados-filter-btn.is-active,
html[data-theme="light"] .mercados-filter-btn--radio.is-active,
html[data-theme="light"] .calendario-filter-chip.mercados-filter-btn.is-active {
  color: var(--tab-active-fg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.calendario-filter-chip.mercados-filter-btn {
  padding: 6px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface-card);
  color: var(--text);
}
.calendario-filter-chip.mercados-filter-btn.is-active {
  background: linear-gradient(135deg, var(--tab-active-grad-a), var(--tab-active-grad-b));
  border-color: var(--tab-active-grad-a);
  color: var(--tab-active-fg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.calendario-filter-chip.mercados-filter-btn.is-active .calendario-filter-chip-text {
  color: inherit;
  font-weight: 600;
}
.calendario-filter-chip.mercados-filter-btn input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}
#panels_dashboards .dashboard-soberano-chart-toggle.mercados-filter-btn--toggle {
  gap: 6px;
  font-size: var(--font-table);
  font-weight: inherit;
}
.filterOption.mercados-filter-btn {
  font-size: var(--font-table);
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--surface-card);
  color: var(--text);
  border: 1px solid var(--border-soft);
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
}
.filterOption.mercados-filter-btn input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}
.filterOption:not(.mercados-filter-btn) input[type="checkbox"] {
  width: 11px;
  height: 11px;
}
.filterGroup.mercados-filter-field--btn-inline .mercados-filter-btn-group {
  flex-wrap: wrap;
}
#panels_bcra .bcra-rem-filters-inner .mercados-filter-btn-group {
  flex-wrap: wrap;
  max-width: 100%;
  justify-content: flex-start;
}
#panels_indec .bcra-rem-filters-inner .mercados-filter-btn-group {
  flex-wrap: wrap;
  max-width: 100%;
}
#panels_dashboards .dashboard-soberano-chart-toolbar--usd-main .dashboard-soberano-chart-toggle.mercados-filter-btn--toggle {
  grid-column: 3;
  justify-self: end;
  font-size: var(--font-table);
  font-weight: inherit;
  /* El .dashboard-soberano-chart-block aplica zoom 1.25 (contra el zoom 0.8 del documento) → sus botones
     quedaban ~25% más grandes que el toggle idéntico del heatmap. Se restaura el zoom del documento aquí
     para que "Diferenciar por Legislación" tenga el MISMO tamaño neto que su gemelo del heatmap y que el
     resto de filtros de la app. */
  zoom: var(--mercados-doc-zoom, 0.8);
}
#panels_dashboards .dashboard-soberano-chart-toggle.mercados-filter-btn--toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}
#panels_dashboards .dashboard-acciones-treemap-toolbar .dashboard-soberano-chart-toggle.mercados-filter-btn--toggle {
  margin-left: auto;
  /* Igualar tamaño/tipografía al resto de botones del heatmap (.mercados-filter-btn),
     que aquí quedaban más chicos por el font-size: 11px / weight 500 de .dashboard-soberano-chart-toggle. */
  font-size: var(--font-table);
  font-weight: inherit;
}
#panels_licitaciones .filters .filterOption.mercados-filter-btn {
  font-size: var(--font-table);
}
.chartPropioBox {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.chartPropioHead {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: var(--font-table);
}
.chartPropioSym { font-weight: 700; }
.chartPropioPx { font-size: 1.15em; font-weight: 600; }
.chartPropioRangos { display: flex; flex-wrap: wrap; gap: 4px; }
.chartPropioMount {
  flex: 1 1 auto;
  min-height: 220px;
  width: 100%;
  position: relative;
  /* Deshace el `zoom: 0.8` del documento sólo acá dentro: el gráfico se dibuja en canvas y con el
     zoom heredado las líneas salían borrosas. */
  zoom: calc(1 / var(--mercados-doc-zoom, 0.8));
}
.chartPropioBox {
  flex-direction: row;
  gap: 10px;
}
.chartPropioMain {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;      /* sin esto el canvas empuja y desborda la columna */
  min-height: 0;
}
.chartPropioTools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}
.chartPropioTools .mercados-filter-btn { padding: 6px 12px; font-size: 1.02em; }
.chartPropioLeyenda {
  position: absolute;
  top: 6px;
  left: 8px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 9px;
  align-items: baseline;
  font-size: calc(var(--font-table) * 1.05);
  line-height: 1.25;
  pointer-events: none;          /* no puede robarle el crosshair al gráfico */
  text-shadow: 0 1px 2px var(--bg, rgba(0,0,0,.55));
  /* **Termina antes de la escala de precios.** Sin tope a la derecha, el texto corría por debajo de
     los precios: en celular `+2,57 (+0,13%)` quedaba tachado por `US$ 2.500` y no se leía ninguno de
     los dos. El ancho de la escala lo publica el propio gráfico en `--chart-propio-escala` (lo pone
     `chartAcomodarLeyenda`), porque **depende del número**: no mide lo mismo `US$ 2.500` que
     `3.042.654,180`. El valor de reserva cubre el instante entre el primer pintado y la primera
     medición. Al quedar acotada, la leyenda parte el renglón —ya era `flex-wrap: wrap`— y esa misma
     función corre el margen superior de la escala para que las velas no queden tapadas. */
  right: calc(var(--chart-propio-escala, 92px) + 6px);
}
.chartPropioLeyenda i { font-style: normal; opacity: .6; margin-right: 3px; }
.chartPropioLeySym { font-weight: 700; }
.chartPropioLeyFecha { opacity: .65; }
.chartPropioLeyVol { opacity: .8; flex-basis: 100%; }
.chartPropioWl {
  /* **430 y no 400.** La nota anterior decía que con 400 el símbolo tenía 173 px y entraba todo:
     entraba casi todo. "S&P Merval en USD (MEP)" y su par en CCL —las dos últimas series que se
     sumaron— pedían 209 px de texto y se cortaban con puntos suspensivos. Se ensancha el panel en
     vez de robarle ancho a las cifras, que ya estaban justas. Sigue siendo arrastrable. */
  flex: 0 0 430px;
  /* **Nada de barra horizontal**: las columnas tienen ancho fijo y el símbolo se recorta con
     puntos suspensivos, así que a lo ancho entra todo siempre. */
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* El scroll vive en `.chartPropioWlLista`: si scrollea también el `aside`, el bloque fijo de
     arriba se va con él y el `position: sticky` no sirve de nada. */
  overflow-y: hidden;
  max-height: 100%;
  border-left: 1px solid var(--border, rgba(128,128,128,.25));
  padding-left: 8px;
}
.chartPropioWlFijo {
  padding-bottom: 2px;
}
.chartPropioWlLista {
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chartPropioWlRow {
  display: grid;
  /* **El símbolo lleva piso propio.** Con `minmax(0, 1fr)` las tres columnas numéricas se quedaban
     con todo y el ticker se cortaba a dos letras: "^GSPC" salía "^GS". El piso de 74 px es lo que
     mide el más largo de la lista (`^STOXX50E`) con su chapita. */
  /* **Anchos fijos para las cifras, y lo que sobra para el símbolo.** Con `auto` cada columna se
     encogía o estiraba según el contenido de SU fila, así que el ticker largo de una corría los
     números de esa fila y las columnas no quedaban alineadas entre sí. Con anchos fijos, cada una
     ocupa siempre su lugar y la lista se lee como una tabla.
     **Las cifras se achican y el símbolo se queda con el resto.** Con 62/48/58 al ticker le
     quedaban unos 50 px y salía cortado —"^G…", "^FT…"—, que es peor que cualquier desalineación.
     Con 54/40/50 y el panel un poco más ancho entra `^STOXX50E`, que es el más largo de la lista. */
  /* **El "último" es la columna que más ancho necesita**: ahí viven "3.022.485" y el Com3500 con sus
     cuatro decimales ("1.492,1790"). Con 54 px se desbordaba sobre la del cambio. Se le dan 66 y se
     compensa en el símbolo, que ya se recorta con puntos suspensivos cuando hace falta. */
  /* **El sobrante se reparte entre las cuatro, no se lo queda el simbolo.** Con `1fr` en la primera
     y anchos fijos en las otras tres, todo el ancho extra del panel -que es arrastrable- caia en la
     columna del simbolo: el dueno reporto el 16/09/2026 que "la columna simbolo ocupa mucho ancho
     sin sentido" mientras "Cambio (pb) no entra en su columna". Son el mismo defecto visto de los
     dos lados. Con `minmax(piso, fraccion)` cada columna tiene su minimo -el que necesita su
     contenido mas largo- y el sobrante se reparte en proporcion, asi que el simbolo sigue siendo la
     mas ancha sin ser la unica que crece.
     El piso de `abs` sube de 58 a 76 px porque en modo tasa el rotulo es "CAMBIO (PB)", y en
     mayusculas con `letter-spacing` no entraba en 58: se montaba sobre VAR. */
  grid-template-columns: minmax(0, 1fr) minmax(82px, .5fr) minmax(76px, .42fr) minmax(62px, .34fr);
  grid-template-areas: "sym px abs var";
  gap: 0 6px;
  align-items: center;
  padding: 6px 7px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: center;
  /* ~13 px en pantalla después del zoom, que es el cuerpo de la watchlist de ellos. */
  font-size: 1.02em;
  line-height: 1.35;
  min-height: 34px;
}
.chartPropioWlRow:hover { background: var(--table-row-hover, rgba(128,128,128,.14)); }
.chartPropioWlRow.is-active { background: var(--table-row-hover, rgba(41,98,255,.18)); font-weight: 600; }
.chartPropioWlSym {
  grid-area: sym;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-weight: 600;
  letter-spacing: .1px;
}
.chartPropioWlTk {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chartPropioWlPx {
  grid-area: px;
  opacity: .95;
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chartPropioWlAbs, .chartPropioWlVar { min-width: 0; overflow: hidden; white-space: nowrap; }
.chartPropioWlAbs {
  grid-area: abs;
  /* Al tamaño del resto de la fila: en .92em quedaban chicas al lado del símbolo, y son el dato. */
  font-size: 1em;
  opacity: .85;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.chartPropioWlVar { grid-area: var; font-size: 1em; font-variant-numeric: tabular-nums; text-align: right; }
.chartPropioWlSym { display: flex; align-items: center; gap: 5px; min-width: 0; text-align: left; }
.chartPropioWlLogo {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.chartPropioWlLogo--txt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card, rgba(255,255,255,.10));
  border: 1px solid var(--border, rgba(255,255,255,.14));
  /* Era `var(--text-dim, inherit)` y `--text-dim` no existe en ningun lado: la regla caia
     siempre a `inherit`, o sea que no hacia nada. El token de texto atenuado del sitio es
     `--muted`, que es lo que aca se queria. */
  color: var(--muted);
  font-weight: 700;
  opacity: .85;
}
.chartPropioWlLogo--txt { font-size: 9px; }
.chartPropioFecha {
  opacity: .65;
  margin-left: auto;
  padding: 4px 8px;               /* mismo padding que los botones de la barra: mismo alto */
  font-size: .95em;
  font-family: inherit;
  color: var(--text, inherit);
  background: var(--card, rgba(255,255,255,.06));
  border: 1px solid var(--border, rgba(255,255,255,.16));
  border-radius: 8px;
  cursor: pointer;
}
.chartPropioFecha::-webkit-calendar-picker-indicator { filter: invert(.65); cursor: pointer; }
.chartPropioWlVar { font-size: 1em; }
@media (max-width: 900px) {
  .chartPropioBox { flex-direction: column; }
  .chartPropioWl {
    flex: 0 0 auto;
    flex-basis: auto;   /* el bloque de tamaños fija 210px, que en columna sería ALTO */
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    border-left: 0;
    border-top: 1px solid var(--border, rgba(128,128,128,.25));
    padding: 6px 0 2px;
    gap: 6px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .chartPropioWlRow {
    flex: 0 0 auto;
    grid-template-columns: auto;
    grid-template-areas: "sym" "var";
    justify-items: center;
    gap: 0;
    padding: 4px 9px;
    border: 1px solid var(--border, rgba(128,128,128,.22));
    border-radius: 999px;
    min-width: 62px;
    min-height: 40px;   /* con el dedo hace falta más */
  }
  .chartPropioWlPx { display: none; }
  .chartPropioWlFijo { display: none; }
  .chartPropioWlLista {
    flex-direction: row;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 6px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    /* **La barra se VE** (pedido del dueño): sin ninguna señal, una fila que se
       desliza parece una fila que se cortó. Va fina y translúcida para informar
       sin competir con los datos. Se declara acá, en el mismo bloque, y no en
       una sección aparte: `tests/test_css_sin_pisadas_lejanas.py` marca los
       selectores redefinidos lejos, donde editar uno no muestra el otro. */
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
  }
  .chartPropioWlLista::-webkit-scrollbar { height: 4px; }
  .chartPropioWlLista::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 999px; }
  .chartPropioWlLista::-webkit-scrollbar-track { background: transparent; }
  .chartPropioWl {
    align-items: stretch;
    height: auto;
  }
  .chartPropioBox {
    height: auto;
    min-height: 0;
  }
  .chartPropioMain {
    flex: 0 0 auto;
    min-height: 0;
  }
  .chartPropioMount { min-height: clamp(220px, 46vh, 360px); }
}
.chartPropioMenu { position: relative; }
.chartPropioMenu > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 6px 12px;
  font-weight: 500;
}
.chartPropioMenu > summary::-webkit-details-marker { display: none; }
.chartPropioMenu > summary::after { content: " ▾"; opacity: .55; }
.chartPropioMenu.tiene-activo > summary { border-color: var(--accent, #2962ff); }
.chartPropioMenuCaja {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  padding: 6px;
  border: 1px solid var(--border, rgba(128,128,128,.3));
  border-radius: 8px;
  /* Misma historia que en `.chartPropioBuscarLista`: `--card-bg` no existe y el respaldo oscuro
     dejaba esta caja negra en modo día. Ver el comentario de allá. */
  background: var(--card, #f8fafc);
  color: var(--text, inherit);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.chartPropioMenuCaja .mercados-filter-btn-group { flex-wrap: wrap; max-width: 300px; }
.chartPropioWlCab { padding: 2px 4px 6px; }
@media (max-width: 900px) {
  .chartPropioWlCab { display: none; }
}
.chartPropioDock {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
  padding: 2px 5px 2px 2px;
  border-right: 1px solid var(--border, rgba(128, 128, 128, 0.25));
}
.chartPropioDock .chartPropioTool[data-tool="quitar"] {
  margin-top: 7px;
  position: relative;
}
.chartPropioDock .chartPropioTool[data-tool="quitar"]::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 15%;
  right: 15%;
  height: 1px;
  background: var(--border, rgba(128, 128, 128, 0.3));
}
.chartPropioDockBtn {
  /* **Declarado para que se VEA como TradingView, no para que mida como TradingView.** El documento
     va a `zoom: 0.8`, así que lo declarado se ve 20% más chico: 36 px terminan siendo ~29 en
     pantalla, que es el botón de ellos. Poner 28 a secas dejaba 22 reales, más chico que el
     original. Es la trampa de esta hoja y conviene medir en el navegador antes de darlo por bueno. */
  width: 36px;
  height: 36px;
  /* `inline-grid` + `place-items` + `line-height: 0` dejan el dibujo en el centro exacto: con el
     padding de texto de `.mercados-filter-btn` el SVG salia corrido a la izquierda y alto. */
  display: inline-grid;
  place-items: center;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  opacity: 0.72;
  cursor: pointer;
  line-height: 0;
  transition: background-color 0.12s ease, opacity 0.12s ease;
}
.chartPropioDockBtn:hover {
  background: var(--table-row-hover, rgba(128, 128, 128, 0.16));
  opacity: 1;
}
.chartPropioDockBtn.is-active {
  background: color-mix(in srgb, var(--accent, #2962ff) 16%, transparent);
  color: var(--accent, #2962ff);
  opacity: 1;
}
.chartPropioDockIco { pointer-events: none; display: grid; place-items: center; }
.chartPropioDockIco svg { display: block; width: 22px; height: 22px; stroke-width: 1.5; }
.chartPropioMenuCaja .mercados-filter-btn { padding: 5px 11px; font-size: 1em; }
.chartPropioWlSeccion {
  width: 100%;
  font-size: 1.12em;
  font-weight: 700;
  padding: 7px 9px;
  cursor: pointer;
  border-radius: 6px;
  text-align: center;
  background: linear-gradient(135deg, var(--tab-active-grad-a), var(--tab-active-grad-b));
  border: 1px solid var(--tab-active-grad-a);
  color: var(--tab-active-fg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.chartPropioWlSeccion option { background: var(--card, #f8fafc); color: var(--text, inherit); font-weight: 500; }
.chartPropioWlAsa {
  flex: 0 0 6px;
  cursor: col-resize;
  border-radius: 3px;
  background: transparent;
  transition: background .12s;
}
.chartPropioWlAsa:hover,
.chartPropioWlAsa:active { background: var(--accent, #2962ff); opacity: .55; }
@media (max-width: 900px) {
  .chartPropioDock {
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid var(--border, rgba(128,128,128,.25));
    padding: 0 0 6px;
    overflow-x: auto;
  }
  .chartPropioWlAsa { display: none; }
}
.chartPropioToolsFila {
  display: contents;
}
@media (max-width: 700px), (max-height: 520px) and (orientation: landscape) {
  .chartPropioWl { display: none; }
  body[data-group="watchlist"] .chartPropioWl,
  body[data-group="cartera"] .chartPropioWl { display: flex; }
  .chartPropioToolsFila {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    /* La barra se VE, como el resto de las tiras: una fila que se desliza sin señal parece cortada. */
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
    padding-bottom: 4px;
  }
  .chartPropioToolsFila > * {
    flex: 0 0 auto;
  }
  .chartPropioToolsFila::-webkit-scrollbar { height: 4px; }
  .chartPropioToolsFila::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 999px; }
  .chartPropioToolsFila::-webkit-scrollbar-track { background: transparent; }
  .chartPropioDock--pegado {
    padding: 0 0 2px;
    margin-bottom: 0;
  }
}
.chartPropioLeyCtx { opacity: .7; font-weight: 600; }
.chartPropioLeyOhlc { display: inline-flex; gap: 9px; }
.chartPropioDockSep {
  height: 1px;
  margin: 4px 2px;
  background: var(--border, rgba(128,128,128,.3));
}
.chartPropioWlHead {
  /* **Adentro de `.chartPropioWlLista` y pegado arriba.** Ver el comentario largo cerca de la línea
     10808: sin esto el encabezado vivía afuera del contenedor que scrollea y quedaba con un ancho
     distinto al de las filas -corrido 14-20 px por la barra de scroll-. `z-index` alcanza con 1: las
     filas no tienen ninguno propio, así que cualquier valor arriba de "auto" las tapa. */
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card, #f8fafc);
  display: grid;
  /* **El sobrante se reparte entre las cuatro, no se lo queda el simbolo.** Con `1fr` en la primera
     y anchos fijos en las otras tres, todo el ancho extra del panel -que es arrastrable- caia en la
     columna del simbolo: el dueno reporto el 16/09/2026 que "la columna simbolo ocupa mucho ancho
     sin sentido" mientras "Cambio (pb) no entra en su columna". Son el mismo defecto visto de los
     dos lados. Con `minmax(piso, fraccion)` cada columna tiene su minimo -el que necesita su
     contenido mas largo- y el sobrante se reparte en proporcion, asi que el simbolo sigue siendo la
     mas ancha sin ser la unica que crece.
     El piso de `abs` sube de 58 a 76 px porque en modo tasa el rotulo es "CAMBIO (PB)", y en
     mayusculas con `letter-spacing` no entraba en 58: se montaba sobre VAR. */
  grid-template-columns: minmax(0, 1fr) minmax(82px, .5fr) minmax(76px, .42fr) minmax(62px, .34fr);
  grid-template-areas: "sym px abs var";
  gap: 0 6px;
  /* **El mismo padding lateral que las filas.** Tenía 8 px contra los 7 de la fila, así que la
     columna del encabezado caía un píxel corrida de la columna de valores. Un píxel se ve. */
  padding: 6px 7px;
  /* **En mayúsculas y con presencia**, por pedido explícito. La versión anterior las evitaba con el
     argumento de que en castellano engordan la palabra y compiten con los tickers; el dueño quiere
     que el encabezado se distinga de los datos, y en mayúsculas eso se lee de una. El `letter-spacing`
     más ancho es lo que hace que una mayúscula chica siga siendo legible. */
  text-transform: uppercase;
  font-size: .8em;
  font-weight: 700;
  opacity: .95;
  letter-spacing: .6px;
  border-bottom: 1px solid var(--border, rgba(128,128,128,.22));
  margin-bottom: 3px;
}
.chartPropioWlHead .chartPropioWlSym { grid-area: sym; text-align: left; }
.chartPropioWlHead .chartPropioWlPx { grid-area: px; text-align: center; }
.chartPropioWlHead .chartPropioWlVar { grid-area: var; text-align: center; }
.chartPropioWlHead .chartPropioWlAbs { text-align: center; }
.chartPropioWlPx, .chartPropioWlAbs, .chartPropioWlVar { text-align: center; }
@media (max-width: 900px) {
  .chartPropioWlHead { display: none; }
}
.chartPropioWlHead .chartPropioWlPxRend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.chartPropioWlPxOpt {
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  /* La que NO está elegida se atenúa: sigue siendo el botón para pasar a esa vista, no hace falta
     que grite tanto como la que ya se está mirando. */
  opacity: .55;
}
.chartPropioWlPxOpt.is-active { opacity: 1; text-decoration: underline; text-underline-offset: 2px; }
.chartPropioWlPxOpt:hover { opacity: .85; }
.chartPropioWlPxOptSep { opacity: .35; }
.chartPropioBuscar { position: relative; }
.chartPropioBuscarInput {
  min-width: 190px;
  height: 34px;
  padding: 4px 10px;
  font-size: 1em;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(128,128,128,.35));
  background: var(--input-bg, rgba(128,128,128,.10));
  color: inherit;
}
.chartPropioBuscarInput:focus { outline: 2px solid var(--tab-active-grad-a, #2962ff); outline-offset: 1px; }
.chartPropioMount:focus,
.chartPropioMount:focus-visible {
  outline: none !important;
}
.chartPropioBuscarLista {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  min-width: 320px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border, rgba(128,128,128,.3));
  border-radius: 10px;
  /* **`--card-bg` no existe: no está definida en ninguna parte de esta hoja.** Así que acá mandaba
     siempre el respaldo `#14161c`, que es oscuro. En modo noche coincidía de casualidad y en modo
     día quedaba un panel oscuro con el texto oscuro que hereda de la página: ilegible.
     La variable del tema es `--card` (#12141a de noche, #f8fafc de día), y el respaldo ahora es
     claro para que un fallo futuro se vea en el modo donde se probó, no en el otro. */
  background: var(--card, #f8fafc);
  color: var(--text, inherit);
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
}
.chartPropioBuscarItem {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 8px;
  align-items: baseline;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font-size: .98em;
}
.chartPropioBuscarItem:hover { background: var(--table-row-hover, rgba(128,128,128,.16)); }
.chartPropioBaseLista {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 210px;
  margin-bottom: 2px;
}
.chartPropioBaseOpt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--text);
  font: inherit;
  font-size: .95em;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.chartPropioBaseOpt:hover { background: var(--group-hover-bg); }
.chartPropioBaseOpt.is-active {
  background: var(--group-active-bg);
  color: var(--group-active-fg);
  font-weight: 600;
}
.chartPropioBaseOptTag {
  opacity: .55;
  font-size: .85em;
  font-weight: 600;
  letter-spacing: .04em;
}
.chartPropioBaseFecha {
  cursor: default;
}
.chartPropioBaseFecha .chartPropioBaseOptNom { flex: 0 0 auto; }
.chartPropioBaseInput {
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(128,128,128,.35));
  background: var(--input-bg, rgba(128,128,128,.10));
  color: inherit;
  font-size: 1em;
}
@media (prefers-color-scheme: dark) {
  .chartPropioBaseInput::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .7; }
}
html[data-theme="dark"] .chartPropioBaseInput::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .7; }
html[data-theme="light"] .chartPropioBaseInput::-webkit-calendar-picker-indicator { filter: none; opacity: .7; }
.chartPropioBuscarTk { font-weight: 700; }
.chartPropioBuscarNom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chartPropioBuscarGrp { opacity: .55; font-size: .82em; }
@media (pointer: coarse) {
  .chartPropioTools .mercados-filter-btn,
  .chartPropioFecha,
  /* **38, 40 y 42 eran píxeles de CSS, no de dedo.** Estaban calibrados contra el zoom 0,8 creyendo
     que darían ~32 en pantalla, y el comentario original lo admitía. Medido con Chrome real el
     06/09/2026: en las tres tablets estos controles salían **30 px vistos** y eran los 29 últimos que
     quedaban por debajo del mínimo — le ganaban por especificidad al piso táctil general del final
     del archivo. Ahora piden 44 **vistos**, como todo lo demás. */
  .chartPropioMenu > summary { min-height: calc(44px / var(--mercados-doc-zoom, 1)); display: inline-flex; align-items: center; font-size: 1.06em; }
  .chartPropioWlSeccion { min-height: calc(44px / var(--mercados-doc-zoom, 1)); font-size: 1.05em; }
  .chartPropioWlRow { min-height: calc(44px / var(--mercados-doc-zoom, 1)); font-size: 1.18em; }
  .chartPropioDockBtn { width: calc(44px / var(--mercados-doc-zoom, 1)); height: calc(44px / var(--mercados-doc-zoom, 1)); font-size: 1.2em; }
  .chartPropioBuscarInput { height: calc(44px / var(--mercados-doc-zoom, 1)); font-size: 1.06em; }
  .chartPropioBuscarItem { min-height: calc(44px / var(--mercados-doc-zoom, 1)); font-size: 1.04em; }
  .chartPropioCompModoSel { min-height: calc(44px / var(--mercados-doc-zoom, 1)); font-size: 1.02em; }
}
@media (pointer: fine) {
  .chartPropioTools .mercados-filter-btn,
  .chartPropioMenu > summary { min-height: 30px; font-size: 1em; }
  .chartPropioBuscarInput { height: 30px; font-size: 1em; }
}
@media (max-width: 900px) {
  .chartPropioBuscarInput { min-width: 0; width: 100%; }
  .chartPropioBuscar { flex: 1 1 100%; }
  .chartPropioBuscarLista { min-width: 0; width: 100%; }
}
@media (max-width: 700px), (max-height: 520px) and (orientation: landscape) {
  .chartPropioMount { min-height: 300px; }
  .chartPropioLeyenda {
    gap: 2px 7px;
    font-size: var(--font-table);
  }
  .chartPropioLeyOhlc > span:not(:last-child),
  .chartPropioLeyFuente,
  .chartPropioLeyCtx { display: none; }
  #panels_dashboards .mercados-inicio-hybrid-watchlist__group-name .mercados-filter-btn-group {
    display: none;
  }
  #panels_dashboards .mercados-inicio-hybrid-watchlist__group-name .mercados-filter-btn-group {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    max-width: 100%;
  }
  #panels_dashboards .mercados-inicio-hybrid-watchlist__group-name .mercados-filter-btn {
    padding: 0 7px;
    font-size: 11px;
    letter-spacing: 0;
    min-width: 0;
  }
}
.chartPropioLeyCurso {
  font-size: .82em;
  font-weight: 700;
  padding: 0 4px;
  border: 1px solid currentColor;
  border-radius: 3px;
  opacity: .7;
}
.chartPropioLeyTramo {
  font-size: .82em;
  font-weight: 700;
  padding: 0 5px;
  margin-left: 2px;
  border-radius: 3px;
  background: rgba(138, 109, 255, .16);
  color: #8a6dff;
}
.chartPropioLeyTit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1.24em;
  margin-right: 4px;
}
.chartPropioLeyLogo { width: 1.15em; height: 1.15em; border-radius: 50%; object-fit: cover; }
.chartPropioLeyLogo--txt {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card, rgba(255,255,255,.12)); font-size: .58em; font-weight: 700;
}
.chartPropioLeyTk { opacity: .6; font-weight: 500; font-size: .82em; }
.chartPropioLeyPlazoBtn {
  cursor: pointer;
  pointer-events: auto;      /* la leyenda entera tiene `pointer-events: none` por el crosshair */
  font-family: inherit;
  color: inherit;
  background: transparent;
}
.chartPropioLeyPlazoBtn:hover {
  opacity: 1;
  border-color: var(--accent, #2962ff);
  background: color-mix(in srgb, var(--accent, #2962ff) 18%, transparent);
}
.chartPropioLeyPlazo {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(128,128,128,.35));
  font-size: .68em;
  font-weight: 700;
  letter-spacing: .3px;
  opacity: .8;
  vertical-align: middle;
}
.chartPropioLeyAjuste {
  opacity: 1;
  border-color: var(--accent, #2962ff);
  background: color-mix(in srgb, var(--accent, #2962ff) 16%, transparent);
}
.chartPropioPieAviso {
  font-size: .8em;
  opacity: .6;
  font-style: italic;
  margin-left: 8px;
  white-space: nowrap;
}
.chartPropioPieRotulo {
  font-size: .82em;
  opacity: .62;
  margin-right: 4px;
  white-space: nowrap;
}
.chartPropioPrecio { text-align: center; font-size: 1.18em; font-weight: 700; line-height: 1.2; }
.chartPropioPanel {
  border-top: 1px solid var(--border, rgba(128, 128, 128, 0.22));
  padding: 8px 8px 10px;
  /* **Pegado al pie, no al final de la lista.** El panel es hijo del `aside`, que es el que
     scrollea, así que con 24 filas arriba quedaba fuera de vista: había que bajar toda la watchlist
     para ver cómo venía el papel que estás mirando, que es justo lo contrario de para qué está.
     Con `sticky` la lista corre por detrás y el panel queda siempre abajo, como en TradingView, sin
     tener que envolver las filas en otro contenedor.
     `margin-top: auto` lo empuja al fondo cuando hay pocas filas y sobra alto. */
  position: sticky;
  bottom: 0;
  margin-top: auto;
  background: var(--mercados-landing-panel-bg, var(--card, var(--body-bg)));
}
.chartPropioPanelNombre {
  font-size: 0.86em;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 5px;
}
.chartPropioEstado {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75em;
  opacity: 0.72;
  margin-bottom: 8px;
}
.chartPropioEstadoPunto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.7);
  flex: none;
}
.chartPropioEstado.is-open .chartPropioEstadoPunto { background: #22c55e; }
.chartPropioEstado.is-premarket .chartPropioEstadoPunto { background: #eab308; }
.chartPropioEstado.is-delayed .chartPropioEstadoPunto { background: #eab308; }
.chartPropioEstado.is-closed .chartPropioEstadoPunto { background: rgba(148, 163, 184, 0.65); }
.chartPropioPerf {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.chartPropioPerfCelda {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 2px;
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.1);
}
.chartPropioPerfVal {
  font-size: 0.8em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.chartPropioPerfEtq {
  font-size: 0.66em;
  opacity: 0.6;
  letter-spacing: 0.3px;
}
.chartPropioPerfCelda.cell-pos { background: rgba(34, 197, 94, 0.14); color: #22c55e; }
.chartPropioPerfCelda.cell-neg { background: rgba(239, 68, 68, 0.14); color: #ef4444; }
.chartPropioPerfCelda.cell-pos .chartPropioPerfEtq,
.chartPropioPerfCelda.cell-neg .chartPropioPerfEtq { opacity: 0.75; }
[data-theme="light"] .chartPropioPerfCelda { background: rgba(15, 23, 42, 0.06); }
[data-theme="light"] .chartPropioPerfCelda.cell-pos { background: rgba(22, 163, 74, 0.12); color: #15803d; }
[data-theme="light"] .chartPropioPerfCelda.cell-neg { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }
.chartPropioPie {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  padding: 6px 2px 4px;
  border-top: 1px solid var(--border, rgba(128, 128, 128, 0.18));
  margin-top: 4px;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border-medium) transparent;
}
.chartPropioPie > * { flex: 0 0 auto; }
.chartPropioPie::-webkit-scrollbar { height: 4px; }
.chartPropioPie::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 999px; }
.chartPropioPie::-webkit-scrollbar-track { background: transparent; }
.chartPropioPie .mercados-filter-btn {
  padding: 4px 10px;
  font-size: 0.92em;
}
@media (max-width: 1024px), (max-height: 520px) and (orientation: landscape) {
  .chartPropioPie {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
    padding-bottom: 4px;
  }
  .chartPropioPie > * {
    flex: 0 0 auto;
  }
  .chartPropioPie::-webkit-scrollbar { height: 4px; }
  .chartPropioPie::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 999px; }
  .chartPropioPie::-webkit-scrollbar-track { background: transparent; }
}
.chartPropioPieSep {
  width: 1px;
  align-self: stretch;
  margin: 2px 4px;
  background: var(--border, rgba(128, 128, 128, 0.3));
}
.chartPropioWlGrupoCab {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 5px 6px 4px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  opacity: 0.62;
}
.chartPropioWlGrupoCab:hover { opacity: 0.95; }
.chartPropioWlGrupoFlecha {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-left: 4px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform 0.12s ease;
}
.chartPropioWlGrupo.is-open .chartPropioWlGrupoFlecha { transform: rotate(90deg); }
.chartPropioWlGrupoNom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chartPropioWlGrupoN { opacity: 0.65; font-weight: 500; }
.chartPropioWlGrupo + .chartPropioWlGrupo { margin-top: 2px; }
.chartPropioNotas {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--border, rgba(128, 128, 128, 0.18));
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chartPropioNota {
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: inherit;
  text-decoration: none;
}
a.chartPropioNota:hover .chartPropioNotaTit { text-decoration: underline; }
.chartPropioNotaMeta { font-size: 0.66em; opacity: 0.55; }
.chartPropioNotaTit {
  font-size: 0.75em;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chartPropioTipos { display: inline-flex; gap: 2px; }
.mercados-filter-btn.chartPropioTipoIco {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  justify-items: center;
  padding: 0;
  line-height: 0;
}
.chartPropioTipoIco svg { width: 22px; height: 22px; display: block; }
.chartPropioBox[data-herramienta]:not([data-herramienta=""]) .chartPropioMount { cursor: crosshair; }
.chartPropioBox[data-herramienta="quitar"] .chartPropioMount { cursor: not-allowed; }
@keyframes chartPropioEsperandoPunto {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
.chartPropioDockBtn.is-active.esperando {
  animation: chartPropioEsperandoPunto 1s ease-in-out infinite;
}
.chartPropioWlDWrap { margin-left: 4px; }
.chartPropioWlDWrap .mercados-inicio-hybrid-watchlist__delay { cursor: default; }
.chartPropioCompFila {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.chartPropioCompCabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.chartPropioCompCabecera .chartPropioCompLista {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
.chartPropioCompCabecera .chartPropioCompLista .chartPropioComp {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chartPropioCompModoSel {
  flex: 0 0 auto;
  max-width: 55%;
  font: inherit;
  font-size: 0.86em;
  padding: 3px 6px;
  border-radius: 8px;
  border: 1px solid var(--border-soft, rgba(128,128,128,.35));
  /* Sin respaldo hexadecimal: `--surface-card` y `--card` están declarados en los DOS temas, así que
     el respaldo nunca se usaría y sólo suma un color suelto fuera de los bloques de tema — que es lo
     que `test_no_se_agregan_hex_sueltos` cuenta (F23). El precedente de más arriba
     (`.chartPropioWlSeccion option`) sí lo tiene, y es deuda vieja, no un ejemplo a copiar. */
  background: var(--surface-card, var(--card));
  color: var(--text);
  cursor: pointer;
}
.chartPropioCompModoSel option {
  background: var(--card);
  color: var(--text, inherit);
}
.chartPropioCompBuscar { position: relative; margin-bottom: 6px; }
.chartPropioCompBuscarInput {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(128,128,128,.35));
  background: var(--input-bg, rgba(128,128,128,.10));
  color: inherit;
  /* Era .95em (15,2px con la base de 16 del resto de `.chartPropio*Input`): el único de la familia
     por debajo de 16px, así que el único que hacía zoom al enfocar en iPhone. */
  font-size: 1em;
}
.chartPropioCompBuscarLista {
  max-height: 230px;
  overflow-y: auto;
  margin-top: 4px;
  padding: 2px;
  border: 1px solid var(--border, rgba(128,128,128,.3));
  border-radius: 8px;
  background: var(--card, #f8fafc);
  color: var(--text, inherit);
}
.chartPropioCompColor {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: middle;
}
@media (max-width: 700px), (max-height: 520px) and (orientation: landscape) {
  .mercados-filter-btn,
  .filterOption.mercados-filter-btn,
  .chartPropioTools .mercados-filter-btn,
  .chartPropioMenuCaja .mercados-filter-btn,
  .chartPropioMenu > summary,
  summary.mercados-filter-btn {
    min-height: calc(44px / var(--mercados-doc-zoom, 1));
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .chartPropioBaseOpt {
    min-height: calc(44px / var(--mercados-doc-zoom, 1));
  }
  .chartPropioDockBtn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: calc(44px / var(--mercados-doc-zoom, 1));
  }
  .chartPropioTools .mercados-filter-btn-group {
    flex-wrap: nowrap;
    max-width: 100%;
    min-width: 0;
  }
  .chartPropioFecha {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }
  .chartPropioBuscarInput,
  .chartPropioCompBuscarInput,
  .chartPropioBaseInput,
  .chartPropioFecha {
    min-height: calc(44px / var(--mercados-doc-zoom, 1));
    height: auto;
  }
  .mercadosNoticiasFiltros .mercados-filter-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .chartPropioWlSym,
  .chartPropioWlPx,
  .chartPropioWlAbs,
  .chartPropioWlVar,
  .chartPropioBaseOptTag {
    font-size: 11px;
  }
  #panels_dashboards .dashboard-chart-filter-field .mercados-filter-btn-group {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
    padding-bottom: 3px;
  }
  #panels_dashboards .dashboard-chart-filter-field .mercados-filter-btn-group > * {
    flex: 0 0 auto;
  }
  #panels_dashboards .dashboard-chart-filter-field .mercados-filter-btn-group::-webkit-scrollbar {
    height: 4px;
  }
  #panels_dashboards .dashboard-chart-filter-field .mercados-filter-btn-group::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 999px;
  }
}
.chartPropioBox--pantalla {
  position: fixed;
  inset: 0;
  z-index: 4000;
  /* **Dividido por el zoom del documento, y sin eso queda al 80%.** La hoja lleva
     `html { zoom: 0.8 }` en pantallas de más de 768 px —el teléfono ACOSTADO incluido, que mide 852—
     así que `100vw` se dibuja como 682 px de los 852 que hay: una "pantalla completa" con un marco
     alrededor. En el teléfono vertical la variable ya vale 1 y esto no cambia nada (medido: 393x852
     exactos en los dos casos). */
  width: calc(100vw / var(--mercados-doc-zoom, 1));
  height: calc(100dvh / var(--mercados-doc-zoom, 1));
  max-height: calc(100dvh / var(--mercados-doc-zoom, 1));
  margin: 0;
  border-radius: 0;
  background: var(--bg);
  overflow: hidden;
  /* **No se toca la dirección del flex, y esto costó una medición.** La caja es una FILA —barra de
     dibujo | gráfico | watchlist— y forzarla a columna las apilaba: el gráfico pasaba de 486 px a
     135 dentro de una capa de 900. Se veía "en pantalla completa" con el dibujo más chico que antes.
     Acá sólo se cambia dónde y cuánto mide la caja; el reparto de adentro ya estaba bien. */
}
.chartPropioBox:fullscreen {
  width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  border-radius: 0;
  background: var(--bg);
  overflow: hidden;
}
.chartPropioBox:-webkit-full-screen {
  width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  border-radius: 0;
  background: var(--bg);
  overflow: hidden;
}
.chartPropioBox:fullscreen .chartPropioMain,
.chartPropioBox:fullscreen .chartPropioMount {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}
.chartPropioBox:-webkit-full-screen .chartPropioMain,
.chartPropioBox:-webkit-full-screen .chartPropioMount {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}
.chartPropioBox--pantalla .chartPropioMain,
.chartPropioBox--pantalla .chartPropioMount {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}
.chartPropioMenuCaja--ancho {
  min-width: 268px;
  max-width: min(340px, calc(100vw - 24px));
}
.chartPropioLeyCmps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 2px;
  /* **`flex-basis: 100%`, que es lo que faltaba.** El comentario de arriba decía desde el principio
     que van "debajo de la serie original", pero el contenedor padre (`.chartPropioLeyenda`) es un
     flex con `wrap`: sin pedir el ancho entero, con lugar de sobra —un gráfico ancho, como el de
     Tipos de Cambio— el bloque se acomodaba en la MISMA fila, a la derecha del símbolo. Es la misma
     línea que `.chartPropioLeyVol` ya tenía y por la que el volumen siempre cortó renglón. */
  flex-basis: 100%;
}
.chartPropioLeyCmpX {
  pointer-events: auto;
  cursor: pointer;
  margin-left: 4px;
  padding: 0 3px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  opacity: .45;
  font: inherit;
  line-height: 1;
}
.chartPropioLeyCmpX:hover,
.chartPropioLeyCmpX:focus-visible { opacity: 1; background: var(--border-soft, rgba(128,128,128,.25)); }
.chartPropioLeyCmp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.92em;
  white-space: nowrap;
}
.chartPropioLeyCmp b {
  font-weight: 600;
  color: var(--muted);
}
.chartPropioLeyCmpPunto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
@media print {
  .siteHeader,
  .groupNav,
  .tabs,
  .siteFooter,
  #footerLogin,
  .watchlistPropia__modos,
  .watchlistPropia__listasCaja,
  .carteraForm,
  .watchlistPropia__quitar,
  .carteraPrimerPaso,
  .chartPropioBotones,
  .chartPropioDock {
    display: none !important;
  }
}
@media (pointer: coarse) and (min-width: 701px) {
  .chartPropioBaseOpt {
    min-height: calc(44px / var(--mercados-doc-zoom, 1));
  }
  .mercados-filter-btn,
  summary.mercados-filter-btn {
    min-height: calc(40px / var(--mercados-doc-zoom, 1));
    display: inline-flex;
    align-items: center;
  }
}
.groupButton:active:not(:disabled),
.tabButton:active,
.mercados-filter-btn:active:not(:disabled):not([aria-disabled="true"]),
.watchlistPropia__accion:active:not(:disabled),
.watchlistPropia__quitar:active,
.watchlistPropia__modo:active,
.escSup__chip:active,
.mercadosNoticiasFiltro:active,
.cuentaForm__submit:active:not(:disabled),
.carteraForm__submit:active,
.escGuardar:active,
.novedades__boton:active:not(:disabled),
.compartirPanel__titulo:active {
  filter: brightness(0.88);
}
@media (max-width: 1024px) {
  #panels_bcra .bcra-rem-filters-inner .mercados-filter-btn-group,
  #panels_indec .bcra-rem-filters-inner .mercados-filter-btn-group,
  .filterGroup.mercados-filter-field--btn-inline .mercados-filter-btn-group,
  .filterGroup.mercados-filter-field--btn-inline {
    flex-wrap: nowrap;
  }
}
@media (max-width: 700px), (max-height: 520px) and (orientation: landscape) {
  .chartPropioBox:fullscreen .chartPropioBuscar {
    display: none;
  }
  .chartPropioBox:-webkit-full-screen .chartPropioBuscar {
    display: none;
  }
  .chartPropioBox--pantalla .chartPropioBuscar {
    display: none;
  }
  .chartPropioBox:fullscreen .chartPropioTools {
    flex-wrap: nowrap;
  }
  .chartPropioBox:-webkit-full-screen .chartPropioTools {
    flex-wrap: nowrap;
  }
  .chartPropioBox--pantalla .chartPropioTools {
    flex-wrap: nowrap;
  }
}
.mercados-inicio-hybrid-watchlist__hdr-ctrls .mercados-filter-btn {
  padding: 2px 6px;
  font-size: 0.68rem;
}
.mercados-inicio-hybrid-watchlist__hdr-ctrls .mercados-filter-btn {
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
}
.chartPropioCompMonedaGrp { padding-left: 10px; margin-top: 3px; }
.chartPropioCompMonedaGrp .mercados-filter-btn {
  padding: 2px 8px;
  font-size: 0.86em;
}
.chartPropioCompFormula {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 10px;
  margin-top: 4px;
}
.chartPropioCompFormulaInput {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(128, 128, 128, 0.35));
  background: var(--input-bg, rgba(128, 128, 128, 0.10));
  color: inherit;
  font-family: inherit;
  font-size: 0.86em;
}
.chartPropioCompFormulaError {
  min-height: 1em;
  color: var(--neg);
  font-size: 0.78em;
  line-height: 1.3;
}