/* ══════════════════════════════════════════════════════════════════
   LA ESTÉTICA DEL TABLERO

   Por ahora es neutra a propósito. Cuando el producto esté cerrado se
   rebrandea cambiando solamente este bloque de variables, que son los
   mismos nombres que usa sitio/tema.py.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --navy: #123A5E;
  --azul-claro: #8FC2E0;
  --tinta: #0F2740;
  --tinta-suave: #4C6480;
  --fondo: #EFEAE0;
  --papel: #FBF8F3;
  --linea: #DBD3C5;

  --verde: #1B7F5A;
  --rojo: #B3261E;
  --ambar: #B26B00;

  --tipo-titulos: "Newsreader", Georgia, serif;
  --tipo-texto: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radio: 8px;
  --ancho: 1400px;

  /* El color con el que se destaca un dato sobre el papel. En claro es el
     navy, en oscuro el navy no se ve, así que pasa a ser el azul claro. */
  --acento: var(--navy);

  /* Los dos fondos, siempre a mano y en los dos temas. El círculo que abre
     el cambio de tema tiene que pintarse del color al que va ANTES de que
     el tema cambie, así que no puede leer --fondo, que todavía es el otro.
     Estos dos no se redefinen nunca. */
  --suelo-claro: #EFEAE0;
  --suelo-oscuro: #0D1620;
}

/* ══════════════════════════════════════════════════════════════════
   TEMA OSCURO

   Los mismos nombres de variables, con otros valores. Nada del resto del
   CSS sabe que existe el tema oscuro, y por eso el rebrandeo de después
   toca un solo lugar y arrastra los dos.
   ══════════════════════════════════════════════════════════════════ */

:root[data-tema="oscuro"] {
  /* El navy sigue siendo navy. Antes valía #0E2138 y quedaba tan cerca del
     fondo que el encabezado se disolvía, así que el tablero perdía la banda
     de marca que sí tiene en claro. Ahora se parece al navy real. */
  --navy: #143A5C;
  --azul-claro: #8FC2E0;

  /* El texto va en un blanco cálido, no en un celeste grisado. Es el mismo
     beige del tema claro visto al revés, y es lo que hace que los dos temas
     se sientan la misma marca y no dos productos distintos. */
  --tinta: #ECE7DD;
  --tinta-suave: #9CA7B0;

  /* Fondo, papel y navy arman una escalera de tres escalones. En oscuro lo
     que está más arriba es más claro, así que la tarjeta se despega del
     fondo sin necesitar sombra, que en oscuro no se ve. */
  --fondo: #0D1620;
  --papel: #17222D;
  --linea: #2A3846;

  /* Bajados de saturación. Los de antes eran de neón y sobre un fondo tan
     oscuro vibraban, que en una tabla de números cansa la vista. */
  --verde: #4FBE87;
  --rojo: #EF8079;
  --ambar: #E3A94A;

  --acento: var(--azul-claro);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--tipo-texto);
  font-size: 14px;
  line-height: 1.45;
}

/* ── Encabezado ─────────────────────────────────────────────────── */

header.tablero {
  background: var(--navy);
  border-bottom: 1px solid var(--linea);
  color: #fff;
  padding: 10px 22px 10px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* La marca del sitio, a la izquierda de todo, ahora es el logo. Antes iba
   el nombre escrito y se comía casi 200px de ancho para decir lo mismo que
   dice la marca. Va en blanco y azul claro porque el logo original tiene el
   aro en navy y sobre el navy del encabezado desaparecía. */
header.tablero .marca-sitio {
  display: flex;
  align-items: center;
  flex: none;
  text-decoration: none;
  border-radius: 8px;
  transition: opacity .15s ease;
}

header.tablero .marca-sitio img {
  display: block;
  width: 34px;
  height: 34px;
}

header.tablero .marca-sitio:hover { opacity: .75; }

header.tablero .marca-sitio:focus-visible {
  outline: 2px solid var(--azul-claro);
  outline-offset: 3px;
}

/* El tajo que separa la marca del nombre del producto. */
header.tablero .tajo {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, .25);
  flex: none;
}

/* ── La botonera de navegación ──────────────────────────────────────
   Los tres destinos del sitio, agrupados en una sola pieza que se
   despega del navy. Es el mismo lenguaje que la píldora de estado, así
   el encabezado se lee como una fila de piezas y no como texto suelto
   flotando sobre el fondo. */

header.tablero nav.botonera {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}

header.tablero nav.botonera a {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

header.tablero nav.botonera a:hover {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

header.tablero nav.botonera a:focus-visible {
  outline: 2px solid var(--azul-claro);
  outline-offset: 1px;
}

/* El destino que más nos importa va lleno, para que se lea como el
   botón principal de la fila y no como un link más. */
header.tablero nav.botonera a.destacado {
  background: var(--azul-claro);
  color: var(--navy);
  font-weight: 600;
}

header.tablero nav.botonera a.destacado:hover {
  background: #fff;
  color: var(--navy);
}

/* La botonera deja de empujar cuando el encabezado se parte en filas,
   así no queda pegada al borde derecho de la nada. */
@media (max-width: 1100px) {
  header.tablero nav.botonera { margin-left: 0; }
}

/* En el teléfono el tablero necesita cada píxel de alto, y apilado sin
   tocar nada eran cuatro filas antes del primer dato. Se reordena para que
   la marca y la botonera compartan la primera, el título se quede con la
   segunda y los controles con la tercera. Se cae además la navegación
   secundaria, que desde el tablero nadie busca. */
@media (max-width: 620px) {
  header.tablero { padding: 9px 14px 9px 10px; gap: 10px; }
  header.tablero .tajo { display: none; }

  header.tablero .marca-sitio { order: 1; }
  header.tablero .marca-sitio img { width: 30px; height: 30px; }
  header.tablero nav.botonera { order: 2; margin-left: auto; }
  header.tablero h1 { order: 3; flex-basis: 100%; }
  header.tablero .acciones { order: 4; flex-basis: 100%; }

  header.tablero nav.botonera a.opcional { display: none; }
  header.tablero nav.botonera a { padding: 5px 12px; font-size: 12.5px; }

  /* La casilla de comisión no necesita tanto ancho para tres dígitos.
     Achicarla no alcanza para que Actualizar suba de fila, la píldora de
     estado se come el ancho igual, pero deja la fila menos apretada. */
  header.tablero .acciones .a70 { width: 52px; }
  header.tablero .campo-encabezado { gap: 6px; }
}

/* En papel no va ni la marca del sitio ni la navegación. */
@media print {
  header.tablero .marca-sitio,
  header.tablero .tajo,
  header.tablero nav.botonera { display: none !important; }
}

header.tablero h1 {
  font-family: var(--tipo-titulos);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  letter-spacing: .3px;
}

header.tablero .marca-sub {
  color: var(--azul-claro);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
}

.acciones { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }


/* ── Botones y campos ──────────────────────────────────────────── */

button, .boton {
  font-family: inherit;
  font-size: 13px;
  border: 1px solid var(--linea);
  background: var(--papel);
  color: var(--tinta);
  border-radius: var(--radio);
  padding: 7px 14px;
  cursor: pointer;
}
button:hover { border-color: var(--navy); }
button.primario { background: var(--navy); color: #fff; border-color: var(--navy); }
header.tablero button { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); }
header.tablero button:hover { background: rgba(255,255,255,.22); }

input, select {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 9px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: var(--papel);
  color: var(--tinta);
}
input:focus, select:focus { outline: 2px solid var(--azul-claro); outline-offset: -1px; }

/* ── Solapas ───────────────────────────────────────────────────── */

nav.solapas {
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
  padding: 0 22px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
}
nav.solapas button {
  border: none;
  background: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 12px 16px;
  color: var(--tinta-suave);
  font-weight: 500;
  white-space: nowrap;
}
nav.solapas button.activa { color: var(--acento); border-bottom-color: var(--acento); font-weight: 600; }

nav.solapas.internas { background: var(--fondo); border-bottom: 1px solid var(--linea); }
nav.solapas.internas button { padding: 9px 14px; font-size: 13px; }

.panel { display: none; padding: 20px 22px 60px; max-width: var(--ancho); margin: 0 auto; }
.panel.activo { display: block; }

/* Las sub-solapas de Mercado. Sin esto se apilan todas las curvas juntas. */
.sub { display: none; }
.sub.activo { display: block; }

/* ── Tarjetas y tablas ─────────────────────────────────────────── */

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  margin-bottom: 22px;
  overflow: hidden;
}
.tarjeta > h2 {
  font-family: var(--tipo-titulos);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  padding: 13px 16px;
  border-bottom: 1px solid var(--linea);
  display: flex;
  align-items: center;
  gap: 10px;
}
.tarjeta > h2 .cuenta { font-family: var(--tipo-texto); font-size: 11px; color: var(--tinta-suave); font-weight: 400; }

.envoltorio-tabla { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  background: var(--fondo);
  text-align: right;
  padding: 9px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--tinta-suave);
  font-weight: 600;
  border-bottom: 1px solid var(--linea);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
th:first-child, td:first-child { text-align: left; }
th.texto, td.texto { text-align: left; }
th.ordenable { cursor: pointer; user-select: none; }
th.ordenable:hover { color: var(--navy); }

td { padding: 7px 10px; text-align: right; border-bottom: 1px solid color-mix(in srgb, var(--linea) 55%, transparent); white-space: nowrap; font-variant-numeric: tabular-nums; }
tbody tr:hover td { background: color-mix(in srgb, var(--azul-claro) 12%, transparent); }
td.ticker { font-weight: 600; color: var(--acento); text-align: left; }
td.vacio, .vacio { color: #9AAABB; }
td.alerta { color: var(--ambar); font-weight: 600; }
.positivo { color: var(--verde); }
.negativo { color: var(--rojo); }

/* ── Fichas de mercado ─────────────────────────────────────────── */

.fichas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.ficha {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 11px 16px;
  min-width: 150px;
}
.ficha .rotulo { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--tinta-suave); }
.ficha .valor { font-family: var(--tipo-titulos); font-size: 22px; font-weight: 600; color: var(--acento); }
.ficha .pie { font-size: 11px; color: var(--tinta-suave); }

/* ── Herramientas ──────────────────────────────────────────────── */

.barra { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.barra label { font-size: 12px; color: var(--tinta-suave); display: flex; align-items: center; gap: 6px; }

.grupo-opciones { display: inline-flex; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.grupo-opciones button { border: none; border-radius: 0; border-right: 1px solid var(--linea); }
.grupo-opciones button:last-child { border-right: none; }
.grupo-opciones button.activa { background: var(--navy); color: #fff; }

.totales { display: flex; gap: 22px; flex-wrap: wrap; padding: 14px 16px; background: var(--fondo); border-top: 1px solid var(--linea); }
.totales div { font-size: 12px; color: var(--tinta-suave); }
.totales strong { display: block; font-family: var(--tipo-titulos); font-size: 19px; color: var(--acento); font-weight: 600; }

.aviso { font-size: 12px; color: var(--tinta-suave); padding: 10px 16px; }
.aviso.atencion {
  background: color-mix(in srgb, var(--ambar) 14%, transparent);
  color: var(--ambar);
  border-top: 1px solid color-mix(in srgb, var(--ambar) 35%, transparent);
}

footer.tablero { padding: 22px; text-align: center; font-size: 11px; color: var(--tinta-suave); border-top: 1px solid var(--linea); }

@media (max-width: 700px) {
  header.tablero { padding: 12px 14px; }
  .panel { padding: 14px 12px 50px; }
  nav.solapas { padding: 0 10px; }
}


/* ── Ficha con dato secundario adentro ─────────────────────────── */

.ficha .apunte {
  display: inline-block;
  margin-top: 3px;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--azul-claro) 22%, transparent);
  color: var(--acento);
  font-weight: 600;
}

/* ── Orden de columnas ─────────────────────────────────────────── */

th.ordenable::after { content: ' ⇅'; opacity: .35; font-size: 10px; }
th.ordenable.asc::after  { content: ' ↑'; opacity: 1; }
th.ordenable.desc::after { content: ' ↓'; opacity: 1; }
th.ordenable.asc, th.ordenable.desc { color: var(--acento); }

/* ── Calculadora de canje ──────────────────────────────────────── */

.calculadora { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }

.camino { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.camino h3 {
  margin: 0; padding: 13px 16px; font-family: var(--tipo-titulos);
  font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--linea);
}
.camino .cuerpo { padding: 16px; }
.camino .paso { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed color-mix(in srgb, var(--linea) 70%, transparent); font-size: 13px; }
.camino .paso:last-child { border-bottom: none; }
.camino .paso .que { color: var(--tinta-suave); }
.camino .paso .cuanto { font-variant-numeric: tabular-nums; font-weight: 500; }
.camino .paso.remate { border-top: 2px solid var(--linea); margin-top: 6px; padding-top: 12px; }
.camino .paso.remate .cuanto { font-family: var(--tipo-titulos); font-size: 20px; font-weight: 600; color: var(--acento); }

/* ── Simulador de tasa fija ────────────────────────────────────── */

.tarjeta > .barra.adentro { padding: 14px 16px 0; margin-bottom: 14px; }
.simulador { padding: 0 16px 4px; align-items: start; }
.simulador .envoltorio-tabla { border: 1px solid var(--linea); border-radius: var(--radio); }
tr.elegible { cursor: pointer; }
tr.elegible:hover td { background: color-mix(in srgb, var(--acento) 6%, transparent); }
tr.elegida td { background: color-mix(in srgb, var(--acento) 12%, transparent); }
tr.elegida td.ticker { color: var(--acento); font-weight: 600; }

/* ── Glosario ──────────────────────────────────────────────────── */

.glosario { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.termino { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px 18px; }
.termino h3 { margin: 0 0 7px; font-family: var(--tipo-titulos); font-size: 16px; font-weight: 600; color: var(--acento); }
.termino p { margin: 0 0 9px; font-size: 13.5px; line-height: 1.55; }
.termino p:last-child { margin-bottom: 0; }
.termino .ejemplo { background: color-mix(in srgb, var(--azul-claro) 10%, transparent); border-left: 3px solid var(--azul-claro); padding: 9px 12px; border-radius: 0 6px 6px 0; font-size: 12.5px; color: var(--tinta-suave); }
.termino .ejemplo strong { color: var(--tinta); }

.intro-ayuda { max-width: 720px; margin-bottom: 26px; }
.intro-ayuda p { font-size: 14.5px; line-height: 1.6; }


/* ── Gráficos ──────────────────────────────────────────────────── */

.caja-grafico { padding: 14px 16px 4px; }
svg.grafico { width: 100%; height: auto; display: block; overflow: visible; }

svg.grafico .rejilla { stroke: var(--linea); stroke-width: 1; opacity: .55; }
svg.grafico .marca { font-family: var(--tipo-texto); font-size: 11px; fill: var(--tinta-suave); }
svg.grafico .eje { font-family: var(--tipo-texto); font-size: 11.5px; fill: var(--tinta-suave); letter-spacing: .4px; }
svg.grafico .medio { text-anchor: middle; }
svg.grafico .fin { text-anchor: end; }
svg.grafico .etiqueta { font-family: var(--tipo-texto); font-size: 9.5px; fill: var(--tinta); opacity: .8; }
svg.grafico .tendencia { fill: none; stroke: var(--tinta-suave); stroke-width: 1.6; stroke-dasharray: 6 4; opacity: .85; }
svg.grafico .punto { fill: var(--acento); stroke: var(--papel); stroke-width: 1.2; }
svg.grafico .punto.encima { fill: var(--verde); }
svg.grafico .punto.debajo { fill: var(--rojo); }
svg.grafico circle:hover { r: 6.5; }

.pie-grafico {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  padding: 4px 16px 14px; font-size: 11.5px; color: var(--tinta-suave);
}
.pie-grafico .llave { display: inline-flex; align-items: center; gap: 6px; }
.pie-grafico .bolita { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.pie-grafico .bolita.encima { background: var(--verde); }
.pie-grafico .bolita.debajo { background: var(--rojo); }

/* Un término explicado, pero adentro de una frase en vez de colgado de un
   encabezado. Se subraya punteado para que se note que se puede tocar sin
   que parezca un link que te saca de la página. */
.ayuda-linea {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: help;
}

.ayuda-linea:hover { color: var(--acento); }
.ayuda-linea:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* La leyenda del canje es un párrafo, no una fila de llaves sueltas como la
   de los gráficos, así que necesita respirar entre renglones. */
.tarjeta > .pie-grafico { line-height: 1.5; padding-top: 4px; }

/* ── Arbitraje ─────────────────────────────────────────────────── */

.arbitraje { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; }
.arbitraje > div { padding: 14px 16px; }
.arbitraje > div + div { border-left: 1px solid var(--linea); }
.arbitraje h4 {
  margin: 0 0 10px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 1px; color: var(--tinta-suave); font-weight: 600;
}
.arbitraje ol { margin: 0; padding: 0; list-style: none; }
.arbitraje li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; border-bottom: 1px dashed color-mix(in srgb, var(--linea) 70%, transparent); }
.arbitraje li:last-child { border-bottom: none; }
.arbitraje li .papel { font-weight: 600; color: var(--acento); }
.arbitraje li .dato { font-variant-numeric: tabular-nums; }

/* ── Botón de tema ─────────────────────────────────────────────── */

button.tema { min-width: 40px; font-size: 15px; line-height: 1; padding: 7px 11px; }




/* ── Desplegables ──────────────────────────────────────────────────
   Las curvas van escondidas por defecto. El cliente entra a ver precios,
   no un scatter con una regresión encima. El que la quiera, la abre.
   ────────────────────────────────────────────────────────────────── */

details.desplegable { border-top: 1px solid var(--linea); }

details.desplegable > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 13px;
  color: var(--acento);
  user-select: none;
}
details.desplegable > summary::-webkit-details-marker { display: none; }

details.desplegable > summary::before {
  content: '▸';
  font-size: 11px;
  transition: transform .15s ease;
  display: inline-block;
}
details.desplegable[open] > summary::before { transform: rotate(90deg); }

details.desplegable > summary:hover { background: color-mix(in srgb, var(--azul-claro) 10%, transparent); }
details.desplegable > summary .pista {
  font-weight: 400;
  color: var(--tinta-suave);
  font-size: 11.5px;
}
details.desplegable[open] > summary { border-bottom: 1px solid var(--linea); }

@media (max-width: 620px) {
  details.desplegable > summary { flex-wrap: wrap; }
  details.desplegable > summary .pista { flex-basis: 100%; padding-left: 21px; }
}




/* ── Marcas de liquidez ────────────────────────────────────────────
   Un precio que no se formó hoy no puede verse igual que uno que sí.
   ────────────────────────────────────────────────────────────────── */

.marca-liq { font-size: 11px; cursor: help; }
.marca-liq.liq-nula  { color: var(--rojo); }
.marca-liq.liq-flojo { color: var(--ambar); }
td.liq-flojo { color: var(--tinta-suave); }


/* ── Ayuda por columna ─────────────────────────────────────────── */

a.ayuda-col {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  margin-left: 5px;
  border-radius: 50%;
  border: 1px solid var(--linea);
  color: var(--tinta-suave);
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
  vertical-align: middle;
  cursor: help;
}
a.ayuda-col:hover, a.ayuda-col:focus {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--papel);
  outline: none;
}

.termino.resaltado {
  animation: destacar 2.2s ease;
}
@keyframes destacar {
  0%, 60% { box-shadow: 0 0 0 3px var(--azul-claro); border-color: var(--acento); }
  100%    { box-shadow: 0 0 0 0 transparent; }
}




/* ══════════════════════════════════════════════════════════════════
   IMPRESIÓN Y PDF

   Acá la marca de agua sí queda pegada de verdad. Se dibuja atrás del
   contenido, se repite en toda la página y termina adentro del PDF.
   Sacarla es rehacer el documento.
   ══════════════════════════════════════════════════════════════════ */

.marca-agua, .pie-impresion, .solo-impresion { display: none; }

@media print {

  @page {
    size: A4 landscape;
    margin: 12mm 10mm 16mm;
  }

  /* Sin esto Chrome no imprime fondos ni colores. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  body {
    background: #fff !important;
    color: #0F2740 !important;
    font-size: 9pt;
  }

  /* Fuera todo lo que no es contenido. */
  header.tablero .acciones,
  nav.solapas,
  .barra button,
  a.ayuda-col,
  details.desplegable > summary,
  button { display: none !important; }

  header.tablero {
    background: #fff !important;
    color: #123A5E !important;
    border-bottom: 2px solid #123A5E;
    padding: 0 0 8px;
  }
  header.tablero h1 { color: #123A5E !important; font-size: 17pt; }
  header.tablero .marca-sub { color: #4C6480 !important; }

  /* En papel el título es el del documento, no el de la herramienta. */
  h1:not(.solo-impresion), .marca-sub:not(.solo-impresion) { display: none !important; }
  .solo-impresion { display: block !important; }

  /* Se imprime solo la cartera, que es lo único que se exporta. */
  .panel { display: none !important; }
  body[data-imprimiendo="cartera"] #panel-cartera { display: block !important; padding: 0; max-width: none; }

  /* Las curvas se despliegan solas al imprimir. */
  details.desplegable > .caja-grafico,
  details.desplegable > .pie-grafico,
  details.desplegable > .arbitraje { display: block !important; }

  /* Las flechitas de ordenar no tienen sentido en papel. */
  th.ordenable::after { content: none !important; }

  /* Los campos editables se imprimen como texto, no como cajas. */
  input, select {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    font-weight: 600;
    color: #0F2740 !important;
    -webkit-appearance: none;
    appearance: none;
  }
  .barra label { font-weight: 600; }

  .tarjeta {
    break-inside: auto;
    border: 1px solid #DBD3C5;
    box-shadow: none;
  }
  .tarjeta > h2 { break-after: avoid; background: #F2EDE4 !important; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  th { background: #123A5E !important; color: #fff !important; font-size: 7.5pt; }
  td { font-size: 8pt; }
  .ficha { border: 1px solid #DBD3C5; }

  /* ── La marca de agua ────────────────────────────────────────────
     Un mosaico de texto en diagonal, atrás de todo. Va en position
     fixed para que se repita en todas las páginas del PDF.          */

  .marca-agua {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='330' height='215'>\
<text x='0' y='120' transform='rotate(-30 30 120)' \
font-family='Georgia,serif' font-size='27' fill='%23123A5E' fill-opacity='0.20' \
letter-spacing='0.5'>Finanzas con Marcos</text>\
<text x='34' y='150' transform='rotate(-30 30 120)' \
font-family='Helvetica,Arial,sans-serif' font-size='11' fill='%23123A5E' fill-opacity='0.17' \
letter-spacing='3'>finanzasconmarcos.com.ar</text>\
</svg>");
    background-repeat: repeat;
  }

  .pie-impresion {
    display: block !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    text-align: center;
    font-size: 6.5pt;
    color: #4C6480;
    border-top: 1px solid #DBD3C5;
    padding-top: 3px;
    background: #fff;
  }

  footer.tablero { display: none; }
}


/* ══════════════════════════════════════════════════════════════════
   UTILIDADES

   Existen para que no haya un solo atributo style="..." en el HTML.
   Sin eso, la política de contenido tiene que permitir estilos en línea,
   y esa excepción es de las que conviene no tener.
   ══════════════════════════════════════════════════════════════════ */

.a70  { width: 70px; }
.a80  { width: 80px; }
.a90  { width: 90px; }
.a100 { width: 100px; }
.a110 { width: 110px; }
.a130 { width: 130px; }
.a240 { min-width: 240px; }
.a280 { min-width: 280px; }

.mayus { text-transform: uppercase; }
.oculto { display: none; }
.chico { padding: 5px 9px; }

.centrado-vacio { text-align: center; padding: 24px; }
.centrado-grafico { padding: 36px; text-align: center; }
.aviso-chico { font-size: 13px; margin: 0; }
.sin-aire { padding: 12px 0; }
.aire-arriba { margin-top: 22px; }

/* Las sub-solapas de Mercado se pegan al borde de la tarjeta de arriba. */
.solapas-mercado { margin: -4px -22px 18px; }

/* La etiqueta de comisión, que va sobre el navy del encabezado. */
.campo-encabezado {
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}


/* ══════════════════════════════════════════════════════════════════
   BOTÓN DE WHATSAPP

   Abajo a la derecha, quieto. Cerrado es un círculo, al pasar el mouse
   se abre y muestra el texto. Del lado izquierdo, para que no se vaya
   de la pantalla.
   ══════════════════════════════════════════════════════════════════ */

.boton-whatsapp {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  cursor: pointer;
  /* El botón crece hacia la izquierda, no hacia afuera de la pantalla. */
  flex-direction: row;
}

.boton-whatsapp .circulo {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  flex: 0 0 auto;
  transition: transform .18s ease, box-shadow .18s ease;
}

.boton-whatsapp .globo {
  background: var(--papel);
  color: var(--tinta);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 9px 16px;
  margin-right: -18px;
  padding-right: 30px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .13);
  /* Arranca escondido detrás del círculo y sale al pasar el mouse. */
  opacity: 0;
  transform: translateX(14px) scale(.96);
  transform-origin: right center;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

.boton-whatsapp:hover .globo,
.boton-whatsapp:focus-visible .globo {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.boton-whatsapp:hover .circulo,
.boton-whatsapp:focus-visible .circulo {
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(37, 211, 102, .42);
}

.boton-whatsapp:focus-visible { outline: none; }
.boton-whatsapp:focus-visible .circulo { outline: 3px solid var(--azul-claro); outline-offset: 3px; }

/* En teléfono el globo se muestra siempre: no hay mouse que pasar por encima,
   y un círculo verde solo no dice qué hace. */
@media (hover: none) {
  .boton-whatsapp .globo {
    opacity: 1;
    transform: translateX(0) scale(1);
    font-size: 12px;
    padding: 7px 14px;
    padding-right: 28px;
  }
}

@media (max-width: 420px) {
  .boton-whatsapp { right: 12px; bottom: 12px; }
  .boton-whatsapp .globo { display: none; }
}

/* En papel no va. */
@media print { .boton-whatsapp { display: none !important; } }

/* Que no tape el pie de página. */
footer.tablero { padding-bottom: 90px; }


/* ══════════════════════════════════════════════════════════════════
   LA TRANSICIÓN DE TEMA

   El navegador, por defecto, hace un fundido entre la foto vieja y la
   nueva. Acá no queremos eso: queremos que la nueva se revele con un
   círculo que se abre desde el botón, y de ese círculo se encarga el
   JavaScript. Así que se apaga el fundido y se apilan las dos capas,
   la vieja abajo y la nueva arriba.
   ══════════════════════════════════════════════════════════════════ */

/* ── El círculo que abre el cambio de tema ──────────────────────────
   Un elemento de verdad, no la API de transiciones de vista, que se
   abortaba sola cuando el documento no estaba visible y hacía que la
   animación saliera cuando quería. Ver tema.js.

   Va arriba de todo y no recibe clics, así que apretar dos veces seguido
   no se traba con el círculo del cambio anterior. */

.onda-tema {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  will-change: opacity;
}

/* El círculo que crece. Va adentro de la capa de arriba, que lo recorta,
   porque es más grande que la ventana. Crece con transform y no con
   clip-path, que hay navegadores que no lo interpolan y saltan al final. */
.onda-tema > i {
  position: absolute;
  display: block;
  border-radius: 50%;
  transform: scale(0);
  transform-origin: 50% 50%;
  will-change: transform;
}

/* El botón acompaña con un giro, que le da el detalle de que algo pasó. */
button.tema { transition: transform .5s cubic-bezier(.4,0,.2,1); }
button.tema:hover { transform: rotate(20deg); }
:root[data-tema="oscuro"] button.tema { transform: rotate(180deg); }
:root[data-tema="oscuro"] button.tema:hover { transform: rotate(200deg); }

/* Si la persona pidió menos movimiento, no se mueve nada. */
@media (prefers-reduced-motion: reduce) {
  button.tema { transition: none; }
  .onda-tema { display: none; }
}


/* ══════════════════════════════════════════════════════════════════
   CARTEL DE ESTADO DEL MERCADO

   Dos renglones. Arriba si opera o no, abajo cuándo vuelve y qué tan
   frescos son los precios. La luz repite la misma información en color,
   para el que mira de reojo y no lee.
   ══════════════════════════════════════════════════════════════════ */

.estado-mercado {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  line-height: 1.25;
}

.estado-mercado .leyenda { display: flex; flex-direction: column; }
.estado-mercado strong { font-size: 12.5px; font-weight: 600; letter-spacing: .2px; }
.estado-mercado #estado-detalle { font-size: 10.5px; opacity: .75; }

.estado-mercado .luz {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--azul-claro);
  flex: 0 0 auto;
  position: relative;
}

/* Abierto: verde, con un latido lento que se nota sin molestar. */
.estado-mercado.vivo .luz { background: #4ADE80; }
.estado-mercado.vivo .luz::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #4ADE80;
  animation: latido 2.2s ease-out infinite;
}

@keyframes latido {
  0%   { transform: scale(1);   opacity: .75; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Cerrado en día hábil: rojo latiendo. Hoy se opera, ahora no.
   Late porque es un estado que va a cambiar en unas horas. */
.estado-mercado.cerrado .luz { background: #F87171; }
.estado-mercado.cerrado .luz::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #F87171;
  animation: latido 2.2s ease-out infinite;
}

/* Fin de semana o feriado: gris quieto. Hoy no hay nada que esperar. */
.estado-mercado.descanso .luz { background: #94A3B8; }

/* Respaldo: ámbar. Opera, pero lo que ves no es de ahora. */
.estado-mercado.viejo .luz { background: #FBBF24; }

/* Sin datos: rojo fuerte y parpadeo corto. Es lo único que hay que atender
   ya, así que se distingue del cerrado por el ritmo, no solo por el texto. */
.estado-mercado.caido .luz { background: #DC2626; animation: parpadeo .9s ease-in-out infinite; }

.estado-mercado.cargando .luz { animation: parpadeo 1s ease-in-out infinite; }
@keyframes parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
  .estado-mercado .luz::after,
  .estado-mercado.caido .luz,
  .estado-mercado.cargando .luz { animation: none; }
}

@media (max-width: 700px) {
  .estado-mercado #estado-detalle { display: none; }
}