/* BolsaDeValores — hoja de estilos.
   Estilo «Fey» refinado: lienzo negro tinta con un fondo vivo en <canvas>
   (lienzo.js), superficies de vidrio, Geist para la interfaz, Geist Mono para
   cotizaciones y Newsreader (serif sobria) en títulos y acentos. El color
   sigue siendo solo señal (subida, bajada, navegación activa). */
:root {
  /* Superficies */
  --tinta: #07080a;        /* lienzo */
  --carbon: #141518;       /* tarjetas */
  --obsidiana: #0e0f12;    /* anidado, campos */
  --capa: rgba(0, 0, 0, .8);
  /* Texto */
  --blanco: #ffffff;
  --grafito: #868f97;      /* texto secundario */
  --ceniza: #999999;
  --niebla: #cccccc;
  /* Bordes */
  --borde: rgba(255, 255, 255, .08);
  --borde-fuerte: #525252;
  /* Señales */
  --senal: #479ffa;        /* navegación activa */
  --crecimiento: #4ebe96;  /* sube */
  --caida: #f0616d;        /* baja */
  --ascua: linear-gradient(97.13deg, #ffa16c 8.47%, #551b10 108.41%);
  --escarcha: linear-gradient(96.44deg, #b6d6ff 6.12%, #393f56 110.28%);
  /* Sombras */
  --halo: 0 0 44px rgba(0, 0, 0, .8);
  --halo-suave: 0 0 35px rgba(0, 0, 0, .5);
  --brillo: 0 0 14px rgba(255, 255, 255, .25);
  /* Radios */
  --r-icono: 6px;
  --r-peq: 10px;
  --r-tarjeta: 16px;
  --r-pildora: 99px;
  /* Tipografía */
  --f-ui: "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  /* Vidrio */
  --vidrio: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012) 40%, rgba(255, 255, 255, .008));
  --vidrio-base: rgba(16, 17, 20, .74);
  --filo: inset 0 1px 0 rgba(255, 255, 255, .07);

  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--tinta); }
body {
  font-family: var(--f-ui);
  background: transparent;
  min-height: 100vh;
  color: var(--grafito);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
a { color: var(--blanco); text-decoration: none; }
a:hover { color: var(--senal); }
strong { color: var(--blanco); font-weight: 600; }

h1, h2, h3 { color: var(--blanco); margin: 0 0 .5rem; font-weight: 700; }
h1 { font-size: 26px; line-height: 1.2; letter-spacing: -0.053em; }
h2 { font-size: 18px; line-height: 1.32; font-weight: 500; letter-spacing: -0.01em; }
h3 { font-size: 15px; font-weight: 600; }
h1 + .apagado { margin-top: 0; }

.contenedor { width: min(1200px, calc(100vw - 32px)); margin: 0 auto; }

/* Cabecera ---------------------------------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 10;
  background: rgba(11, 11, 11, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 14px 0; }
.marca { display: flex; align-items: center; gap: 10px; color: var(--blanco); }
.marca:hover { color: var(--blanco); }
.marca strong { font-weight: 600; letter-spacing: -0.02em; font-size: 15px; }
.marca small { display: block; color: var(--grafito); font-size: 11px; }
.marca-globo {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-peq);
  background: var(--carbon); border: 1px solid var(--borde-fuerte); color: var(--blanco);
  font-weight: 700; font-size: 13px; letter-spacing: -0.03em; box-shadow: var(--brillo);
}
.menu {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  background: var(--carbon); border: 1px solid var(--borde); border-radius: var(--r-pildora);
  padding: 4px 4px 4px 10px; box-shadow: var(--halo-suave);
}
.menu > a:not(.boton) {
  color: var(--grafito); padding: 6px 10px; font-size: 13px; font-weight: 500;
  border-bottom: 1px solid transparent; transition: color .15s;
}
.menu > a:not(.boton):hover { color: var(--blanco); }
.menu > a.activo { color: var(--blanco); border-bottom-color: var(--senal); }
.menu-usuario { color: var(--niebla); font-size: 12px; padding: 0 8px 0 12px; border-left: 1px solid var(--borde); margin-left: 4px; }

/* Botones ----------------------------------------------------------------- */
/* Sin rellenos de color: botones fantasma con halo blanco suave. */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; border-radius: var(--r-pildora);
  background: var(--tinta); color: var(--blanco);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: var(--brillo);
  font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1;
  padding: 10px 18px; transition: box-shadow .15s, border-color .15s;
}
.boton:hover { color: var(--blanco); border-color: rgba(255, 255, 255, .5); box-shadow: 0 0 20px rgba(255, 255, 255, .35); }
.boton:focus-visible { outline: 2px solid var(--senal); outline-offset: 2px; }
.boton-suave { background: transparent; box-shadow: none; border-color: var(--borde-fuerte); color: var(--niebla); }
.boton-suave:hover { box-shadow: none; }
.boton-azul { border-color: rgba(71, 159, 250, .55); }
.boton-mini { padding: 6px 12px; font-size: 12px; }
.boton-peligro { border-color: rgba(240, 97, 109, .55); color: var(--caida); box-shadow: none; }
.boton-peligro:hover { color: var(--caida); border-color: var(--caida); box-shadow: 0 0 14px rgba(240, 97, 109, .3); }
.boton-ancho { width: 100%; padding: 13px; }

/* Contenido --------------------------------------------------------------- */
.contenido { padding: 40px 0 64px; }
.tarjeta {
  background: var(--carbon); border: 1px solid var(--borde); border-radius: var(--r-tarjeta);
  padding: 22px 24px; box-shadow: var(--halo); margin-bottom: 18px;
}
.tarjeta > h2 { font-size: 16px; margin-bottom: 14px; }
.tarjeta .tarjeta, .tarjeta .metrica { background: var(--obsidiana); box-shadow: none; }
.apagado { color: var(--grafito); }
.mini { font-size: 12px; }

.rejilla { display: grid; gap: 16px; }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }

/* Métricas ---------------------------------------------------------------- */
.metrica {
  background: var(--carbon); border: 1px solid var(--borde); border-radius: var(--r-tarjeta);
  padding: 18px 20px; box-shadow: var(--halo);
}
.metrica .etiqueta { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--grafito); }
.metrica .valor {
  font-size: 26px; font-weight: 700; color: var(--blanco); margin-top: 6px;
  letter-spacing: -0.05em; line-height: 1.2; font-variant-numeric: tabular-nums;
}
.metrica .nota { font-size: 12px; color: var(--grafito); margin-top: 2px; }

.positivo, .metrica .valor.positivo, .metrica .nota.positivo, .tasa .valor.positivo { color: var(--crecimiento); }
.negativo, .metrica .valor.negativo, .metrica .nota.negativo, .tasa .valor.negativo { color: var(--caida); }

/* Tablas ------------------------------------------------------------------ */
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--niebla); }
.tabla th, .tabla td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--borde); }
.tabla th {
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em;
  color: var(--grafito); background: var(--carbon); position: sticky; top: 0;
}
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla tbody tr { transition: background .12s; }
.tabla tbody tr:hover { background: rgba(255, 255, 255, .03); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla-scroll { overflow-x: auto; }

.insignia {
  display: inline-block; padding: 4px 8px; border-radius: var(--r-pildora);
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; line-height: 1.2;
}
.insignia-verde { background: var(--crecimiento); color: var(--blanco); }
.insignia-roja { background: transparent; border: 1px solid var(--caida); color: var(--caida); }
.insignia-gris { background: transparent; border: 1px solid var(--borde-fuerte); color: var(--grafito); }

/* Formularios ------------------------------------------------------------- */
label { display: block; margin-bottom: 14px; font-size: 12px; font-weight: 500; color: var(--grafito); }
input[type=text], input[type=password], input[type=number], input[type=email], input[type=date], select, textarea {
  width: 100%; margin-top: 6px; padding: 10px 14px;
  border: 1px solid var(--borde); border-radius: var(--r-peq);
  font-family: inherit; font-size: 14px; line-height: 1.4;
  background: var(--obsidiana); color: var(--blanco);
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--borde-fuerte); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--senal); box-shadow: 0 0 0 3px rgba(71, 159, 250, .18); }
.form-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; align-items: end; }
details > summary { cursor: pointer; color: var(--niebla); font-weight: 500; }
details > summary:hover { color: var(--blanco); }

/* Filtro de tablas -------------------------------------------------------- */
.filtro { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.filtro input[type=search] {
  width: min(260px, 58vw); margin: 0; padding: 8px 14px;
  border: 1px solid var(--borde); border-radius: var(--r-pildora);
  background: var(--obsidiana); color: var(--blanco);
  font-family: inherit; font-size: 13px;
  transition: border-color .15s, box-shadow .15s;
}
.filtro input[type=search]::placeholder { color: var(--borde-fuerte); }
.filtro input[type=search]:focus { outline: none; border-color: var(--senal); box-shadow: 0 0 0 3px rgba(71, 159, 250, .18); }
.tabla tr[hidden] { display: none; }

/* Avisos ------------------------------------------------------------------ */
.avisos { margin-bottom: 20px; }
.aviso {
  padding: 10px 16px; border-radius: var(--r-peq); margin-bottom: 8px; font-size: 13px;
  background: var(--carbon); border: 1px solid; color: var(--niebla);
}
.aviso-ok { border-color: rgba(78, 190, 150, .45); }
.aviso-ok::before { content: "● "; color: var(--crecimiento); }
.aviso-error { border-color: rgba(240, 97, 109, .45); }
.aviso-error::before { content: "● "; color: var(--caida); }

/* Acceso ------------------------------------------------------------------ */
.acceso { display: grid; place-items: center; min-height: 62vh; }
.acceso-tarjeta { width: min(400px, 100%); padding: 32px; }
.acceso-tarjeta h1 { font-size: 32px; letter-spacing: -0.06em; }

/* Portada ----------------------------------------------------------------- */
.hero { padding: 16px 0 56px; max-width: 760px; }
.hero h1 {
  font-size: clamp(40px, 7vw, 54px); line-height: 1.02; letter-spacing: -0.08em; margin-bottom: 18px;
}
.hero .resalte { background: var(--ascua); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { font-size: 16px; color: var(--grafito); margin: 0 0 28px; max-width: 560px; }
.hero .boton { margin-right: 10px; }

/* Cinta de cotizaciones (portada) ---------------------------------------- */
.cinta {
  position: relative; display: flex; align-items: stretch;
  background: var(--obsidiana);
  border-bottom: 1px solid var(--borde);
}
/* Solo la parte que se mueve se desvanece en los bordes; el sello queda fijo.
   El desvanecido son dos velos encima (no mask-image): una máscara sobre una
   capa en movimiento obliga a recomponerla en cada cuadro y la cinta saltaba. */
.cinta-ventana { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; contain: paint; }
.cinta-ventana::before, .cinta-ventana::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 56px; z-index: 1; pointer-events: none;
}
.cinta-ventana::before { left: 0; background: linear-gradient(90deg, #0a0b0e, rgba(10, 11, 14, 0)); }
.cinta-ventana::after { right: 0; background: linear-gradient(270deg, #0a0b0e, rgba(10, 11, 14, 0)); }
/* Capa propia en la GPU: el compositor la desplaza sin repintar. */
.cinta-pista {
  display: flex; width: max-content;
  will-change: transform; backface-visibility: hidden; transform: translate3d(0, 0, 0);
  animation: cinta-avance var(--duracion, 60s) linear infinite;
}
/* Con JavaScript la mueve lienzo.js (Web Animations, también en el compositor)
   a velocidad fija y sin saltos al recalcular; la animación CSS es el respaldo. */
.cinta-pista.cinta-js { animation: none; }
/* Pausa solo mientras el ratón está encima o se navega con teclado. No con
   :focus-within: al volver atrás el navegador restaura el enlace pulsado con
   foco y la cinta se quedaba detenida; en táctil, :hover se queda pegado. */
@media (hover: hover) and (pointer: fine) {
  .cinta:hover .cinta-pista { animation-play-state: paused; }
}
.cinta:has(a:focus-visible) .cinta-pista { animation-play-state: paused; }
.cinta-lista { display: flex; margin: 0; padding: 0; list-style: none; }
.cinta-lista > li { border-right: 1px solid var(--borde); }
/* Etiqueta fija a la izquierda de la cinta: de qué sesión son los precios. */
.cinta-sello {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 0 14px 0 16px;
  border-right: 1px solid var(--borde);
  font-size: 11px; color: var(--grafito); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cinta-sello-bvc {
  font-weight: 700; font-size: 10px; letter-spacing: .08em; color: var(--blanco);
  padding: 2px 6px; border-radius: var(--r-icono); background: rgba(255, 255, 255, .08);
}
.fecha-precio { font-size: 10px; color: var(--grafito); margin-top: 1px; }
.sello-fecha {
  display: inline-block; font-size: 11px; font-weight: 500; color: var(--niebla); letter-spacing: 0;
  padding: 3px 10px; border-radius: var(--r-pildora); border: 1px solid var(--borde-fuerte); vertical-align: middle;
}
.cinta-item {
  display: flex; align-items: baseline; gap: 8px;
  padding: 11px 22px; white-space: nowrap;
  font-size: 13px; font-variant-numeric: tabular-nums;
  transition: background .15s;
}
@media (hover: hover) and (pointer: fine) {
  a.cinta-item:hover { background: rgba(255, 255, 255, .05); }
  a.cinta-item:hover .cinta-ticker { color: var(--senal); }
}
a.cinta-item:active { background: rgba(255, 255, 255, .08); }
a.cinta-item:focus-visible { outline: 2px solid var(--senal); outline-offset: -2px; }
.cinta-ticker { color: var(--blanco); font-weight: 600; letter-spacing: .02em; }
.cinta-precio { color: var(--niebla); }
.cinta-var { font-size: 12px; font-weight: 500; }
.cinta-var.sube { color: var(--crecimiento); }
.cinta-var.baja { color: var(--caida); }
.cinta-var.igual { color: var(--grafito); }
.cinta-indice .cinta-ticker { color: var(--senal); }
@keyframes cinta-avance { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .cinta-ventana { overflow-x: auto; }
  .cinta-ventana::before, .cinta-ventana::after { display: none; }
  .cinta-pista { animation: none; }
  .cinta-lista[aria-hidden] { display: none; }
}

.enlace-ticker:hover strong { color: var(--senal); }
/* Fila entera como enlace: el enlace del ticker se estira sobre toda la fila
   («stretched link»), así sigue habiendo un único enlace para el lector de
   pantalla y el teclado, pero se puede pulsar en cualquier celda. */
.fila-enlace { position: relative; cursor: pointer; }
.fila-enlace .enlace-ticker::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.fila-enlace .enlace-ticker:focus-visible { outline: none; }
.fila-enlace:has(.enlace-ticker:focus-visible) { outline: 2px solid var(--senal); outline-offset: -2px; }
.fila-enlace:hover .enlace-ticker strong { color: var(--senal); }

.seccion-titulo { font-size: 24px; font-weight: 700; letter-spacing: -0.053em; line-height: 1.25; margin-bottom: 16px; }

.tasas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 16px; }
.tasa {
  background: var(--carbon); border: 1px solid var(--borde); border-radius: var(--r-tarjeta);
  padding: 18px 20px; box-shadow: var(--halo);
}
.tasa .nombre { font-size: 11px; font-weight: 500; color: var(--grafito); text-transform: uppercase; letter-spacing: .06em; }
.tasa .valor {
  font-size: 26px; font-weight: 700; color: var(--blanco); letter-spacing: -0.05em;
  margin-top: 6px; font-variant-numeric: tabular-nums;
}

.grafica-caja { position: relative; height: 300px; }
/* Tarjeta cuya gráfica ocupa el alto sobrante (cuando la vecina es más alta). */
.tarjeta-flexible { display: flex; flex-direction: column; }
.tarjeta-flexible .grafica-caja.crece { flex: 1 1 auto; height: auto; min-height: 240px; }
.grafica-caja.alta { height: 360px; }
.grafica-caja.baja { height: 230px; }

/* Páginas de detalle (índice y acción) ----------------------------------- */
.volver { display: inline-block; color: var(--grafito); font-size: 13px; margin-bottom: 20px; }
.volver:hover { color: var(--blanco); }
.detalle-cabecera {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.detalle-identidad { display: flex; align-items: center; gap: 16px; }
.detalle-logo {
  display: grid; place-items: center; flex: none;
  width: 60px; height: 60px; border-radius: var(--r-tarjeta);
  background: var(--carbon); border: 1px solid var(--borde-fuerte); box-shadow: var(--brillo);
  color: var(--blanco); font-weight: 700; font-size: 16px; letter-spacing: -0.04em;
}
.antetitulo { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--grafito); margin-bottom: 6px; }
.detalle-titulo { font-size: clamp(34px, 6vw, 48px); line-height: 1.05; letter-spacing: -0.08em; margin: 0 0 4px; }
.detalle-codigo { font-size: .45em; letter-spacing: 0; color: var(--grafito); font-weight: 500; vertical-align: middle; margin-left: 6px; }
.detalle-valor { text-align: right; }
.cifra-grande { font-size: clamp(32px, 5vw, 44px); font-weight: 700; letter-spacing: -0.06em; color: var(--blanco); line-height: 1.1; }
.detalle-valor-pie { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.pastilla { display: inline-block; padding: 4px 10px; border-radius: var(--r-pildora); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pastilla-sube { background: rgba(78, 190, 150, .14); color: var(--crecimiento); }
.pastilla-baja { background: rgba(240, 97, 109, .14); color: var(--caida); }
.pastilla-igual { background: rgba(255, 255, 255, .06); color: var(--grafito); }

.tarjeta-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tarjeta-cabecera h2 { margin: 0; }
.rangos { display: inline-flex; gap: 2px; padding: 3px; background: var(--obsidiana); border: 1px solid var(--borde); border-radius: var(--r-pildora); }
.rango {
  font-family: inherit; font-size: 12px; font-weight: 500; color: var(--grafito);
  background: transparent; border: 0; border-radius: var(--r-pildora); padding: 5px 12px; cursor: pointer;
}
.rango:hover:not(:disabled) { color: var(--blanco); }
.rango.activo { background: var(--carbon); color: var(--blanco); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.rango:disabled { opacity: .35; cursor: default; }
.rango:focus-visible { outline: 2px solid var(--senal); outline-offset: 1px; }

.controles { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.grafica-caja.volumen { height: 72px; margin-top: 4px; }
.leyenda-simple { display: flex; align-items: center; gap: 6px; margin: 6px 0 4px; }
.clave-barra { width: 10px; height: 10px; border-radius: 2px; background: rgba(255, 255, 255, .22); }
.eventos { margin-top: 10px; border-top: 1px solid var(--borde); padding-top: 12px; font-size: 13px; }
.eventos ul { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; color: var(--niebla); }
.eventos li span { display: inline-block; min-width: 92px; color: var(--grafito); font-variant-numeric: tabular-nums; }
.escala-aviso {
  margin-left: auto; font-size: 11px; font-weight: 500; color: var(--senal);
  border: 1px solid rgba(71, 159, 250, .35); border-radius: var(--r-pildora); padding: 3px 10px;
}
.escala-aviso[hidden] { display: none; }
.texto { color: var(--niebla); font-size: 14px; line-height: 1.65; margin: 0 0 16px; }
.ficha { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0 0 16px; font-size: 13px; }
.ficha dt { color: var(--grafito); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; }
.ficha dd { margin: 0; color: var(--niebla); }
.ficha a { color: var(--senal); }
.otros-enlaces { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .detalle-valor { text-align: left; }
  .detalle-valor-pie { justify-content: flex-start; }
  .ficha { grid-template-columns: 1fr; gap: 2px; }
  .ficha dd { margin-bottom: 10px; }
}

/* Minigráficas ------------------------------------------------------------ */
.minigrafica { display: block; overflow: visible; }
.minigrafica .mg-linea { fill: none; vector-effect: non-scaling-stroke; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.minigrafica .mg-area { stroke: none; opacity: .12; }
.minigrafica.sube .mg-linea { stroke: var(--crecimiento); }
.minigrafica.sube .mg-area, .minigrafica.sube .mg-punto { fill: var(--crecimiento); }
.minigrafica.baja .mg-linea { stroke: var(--caida); }
.minigrafica.baja .mg-area, .minigrafica.baja .mg-punto { fill: var(--caida); }
.minigrafica.igual .mg-linea { stroke: var(--grafito); }
.minigrafica.igual .mg-area, .minigrafica.igual .mg-punto { fill: var(--grafito); }
.minigrafica .mg-punto { stroke: var(--carbon); stroke-width: 1.5; }
.minigrafica-vacia { color: var(--borde-fuerte); }
.tasa-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tasa-var { font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tasa-var.sube { color: var(--crecimiento); } .tasa-var.baja { color: var(--caida); } .tasa-var.igual { color: var(--grafito); }
.tasa-mini { margin-top: 10px; }
.tasa-mini .minigrafica { width: 100%; height: 32px; }
.tasa-mini .mg-punto { display: none; } /* el círculo se deformaría al estirar */
.tabla-compacta td { padding-top: 8px; padding-bottom: 8px; vertical-align: middle; }
.celda-empresa { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.cifra-linea { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 10px; }
.cifra-media { font-size: 26px; font-weight: 700; letter-spacing: -0.05em; color: var(--blanco); }
.enlace-mas { display: inline-block; margin-top: 12px; color: var(--grafito); }
.enlace-mas:hover { color: var(--blanco); }
.tarjeta-cabecera h2 a { color: inherit; }
.tarjeta-cabecera h2 a:hover { color: var(--senal); }

/* Mapa de calor del día ---------------------------------------------------- */
.calor { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; margin-bottom: 12px; }
.calor-celda {
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
  min-height: 62px; padding: 10px; border-radius: var(--r-peq);
  color: var(--blanco); font-variant-numeric: tabular-nums;
  transition: transform .12s, box-shadow .12s;
}
.calor-celda.sube { background: rgba(78, 190, 150, var(--i)); }
.calor-celda.baja { background: rgba(240, 97, 109, var(--i)); }
.calor-celda.igual { background: #262626; color: var(--niebla); }
.calor-celda:hover { color: var(--blanco); transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.calor-ticker { font-weight: 600; font-size: 13px; letter-spacing: .01em; }
.calor-var { font-size: 12px; opacity: .92; }
.leyenda-calor { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--grafito); }
.leyenda-barra {
  width: 120px; height: 8px; border-radius: var(--r-pildora);
  background: linear-gradient(90deg, rgb(240, 97, 109), #262626 50%, rgb(78, 190, 150));
}
.indices-fila { margin-bottom: 16px; }
.metrica-enlace { display: block; transition: border-color .15s; }
.metrica-enlace:hover { border-color: rgba(71, 159, 250, .5); }
.metrica-enlace:hover .etiqueta { color: var(--senal); }

@media (max-width: 640px) {
  .solo-ancho { display: none; }
  .calor { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
}

/* Confirmaciones: subida, revisión, detalle ------------------------------- */
.rejilla-arriba { align-items: start; }
.subida { display: grid; gap: 12px; justify-items: start; }
.subida-zona {
  position: relative; display: grid; justify-items: center; gap: 6px; width: 100%;
  padding: 28px 20px; margin: 0; text-align: center; cursor: pointer;
  border: 1px dashed var(--borde-fuerte); border-radius: var(--r-tarjeta); background: var(--obsidiana);
  color: var(--niebla); transition: border-color .15s, background .15s;
}
.subida-zona:hover, .subida-zona.arrastrando { border-color: var(--senal); background: rgba(71, 159, 250, .06); }
.subida-zona.con-archivos { border-style: solid; border-color: rgba(78, 190, 150, .5); }
.subida-zona input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.subida-icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--carbon); color: var(--blanco); box-shadow: var(--brillo); }
.subida-texto strong { color: var(--blanco); font-weight: 500; }
.pasos { margin: 0; padding-left: 18px; display: grid; gap: 10px; color: var(--niebla); font-size: 13px; line-height: 1.55; }
.pasos strong { color: var(--blanco); font-weight: 500; }
.chip {
  display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px; border-radius: var(--r-pildora);
  background: rgba(255, 255, 255, .06); color: var(--niebla); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fila-resaltada { background: rgba(78, 190, 150, .08); }
.documento { border-color: rgba(255, 255, 255, .1); }
.documento-error { border-color: rgba(240, 97, 109, .45); }
.documento-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.documento-titulo { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; margin: 2px 0 4px; }
.documento-titulo .apagado { font-weight: 500; font-size: 15px; }
.documento-cliente { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 16px; align-items: end; margin-bottom: 14px; }
.documento-cliente label { margin: 0; }
.documento-cifras { margin-bottom: 14px; }
.documento-cifras .metrica { background: var(--obsidiana); box-shadow: none; }
.interruptor { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--blanco); font-size: 13px; cursor: pointer;
  padding: 6px 12px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-pildora); }
.interruptor input { accent-color: var(--crecimiento); width: 16px; height: 16px; }
.barra-accion {
  position: sticky; bottom: 16px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 20px; border-radius: var(--r-tarjeta); background: rgba(25, 25, 25, .92);
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: var(--halo); backdrop-filter: blur(12px);
}
.boton:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.tabla tfoot td { border-top: 1px solid var(--borde-fuerte); border-bottom: 0; }
.efecto-lista { display: grid; gap: 14px; }
.efecto { display: grid; grid-template-columns: 150px minmax(120px, 1fr) minmax(220px, 1.4fr); gap: 16px; align-items: center; }
.efecto-ticker a { color: var(--blanco); }
.efecto-barra { display: flex; height: 10px; border-radius: var(--r-pildora); background: rgba(255, 255, 255, .05); overflow: hidden; gap: 2px; }
.efecto-previo { background: rgba(255, 255, 255, .28); border-radius: var(--r-pildora); }
.efecto-nuevo { background: var(--crecimiento); border-radius: var(--r-pildora); }
.clave-nueva { background: var(--crecimiento); margin-left: 12px; }
.efecto-vendido { background: var(--caida); border-radius: var(--r-pildora); }
.clave-vendida { background: var(--caida); margin-left: 12px; }
.chip-venta { color: #f59aa2; background: rgba(240, 97, 109, .1); }
.chip-compra { color: #8fdcbf; background: rgba(78, 190, 150, .1); }
.aviso-info { border-color: rgba(71, 159, 250, .4); }
.aviso-info::before { content: "● "; color: var(--senal); }
.historial-corto { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; font-size: 13px; }
.historial-corto li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--borde); }
.historial-corto a { color: var(--niebla); }
.historial-corto a:hover { color: var(--blanco); }
.linea-tiempo { display: grid; gap: 4px; }
.hito { display: grid; grid-template-columns: 110px 1fr; gap: 16px; color: inherit; }
.hito:hover { color: inherit; }
.hito:hover .hito-cuerpo { border-color: rgba(71, 159, 250, .45); }
.hito-fecha { padding-top: 22px; color: var(--grafito); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.hito-cuerpo { display: grid; gap: 8px; margin-bottom: 12px; transition: border-color .15s; }
.hito-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--blanco); }

@media (max-width: 760px) {
  .documento-cliente { grid-template-columns: 1fr; }
  .efecto { grid-template-columns: 1fr; gap: 6px; }
  .hito { grid-template-columns: 1fr; gap: 0; }
  .hito-fecha { padding: 0 0 4px; text-align: left; }
  .barra-accion { flex-direction: column; align-items: stretch; }
}

/* Archivo de documentos ---------------------------------------------------- */
.filtros { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.filtros .rango { display: inline-block; }
.filtro-anio { display: flex; align-items: center; gap: 8px; margin: 0; }
.filtro-anio select { width: auto; margin: 0; padding: 6px 10px; }
.archivo { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.35fr); gap: 16px; align-items: start; }
.archivo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 760px; overflow: auto; }
.archivo-item {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center;
  padding: 12px; border-radius: var(--r-peq); border: 1px solid var(--borde); background: var(--obsidiana);
  color: inherit; transition: border-color .15s, background .15s;
}
.archivo-item:hover { color: inherit; border-color: rgba(255, 255, 255, .25); }
.archivo-item.activo { border-color: var(--senal); background: rgba(71, 159, 250, .06); }
.archivo-icono {
  display: grid; place-items: center; width: 40px; height: 48px; border-radius: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--blanco);
}
.archivo-icono.compra { background: rgba(78, 190, 150, .22); box-shadow: inset 0 -3px 0 var(--crecimiento); }
.archivo-icono.venta { background: rgba(240, 97, 109, .22); box-shadow: inset 0 -3px 0 var(--caida); }
.archivo-texto { display: grid; gap: 2px; min-width: 0; }
.archivo-texto .mini { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archivo-titulo { color: var(--blanco); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.archivo-titulo strong { font-weight: 600; }
.archivo-cifra { display: grid; justify-items: end; gap: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.archivo-cifra strong { color: var(--blanco); }
.archivo-visor { position: sticky; top: 84px; display: grid; gap: 10px; }
.visor-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--blanco); }
.visor-acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.visor-pdf { width: 100%; height: 720px; border: 1px solid var(--borde); border-radius: var(--r-peq); background: #fff; }
@media (max-width: 900px) {
  .archivo { grid-template-columns: 1fr; }
  .archivo-visor { position: static; }
  .visor-pdf { height: 480px; }
}

.ritmos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; font-size: 13px; color: var(--niebla); }
.ritmos li { display: grid; grid-template-columns: 112px 1fr; gap: 14px; }
.ritmos strong { color: var(--blanco); font-weight: 500; }
.ritmos .mini { display: block; margin-top: 4px; }
.ritmo-hora { font-variant-numeric: tabular-nums; color: var(--senal); font-weight: 500; }

/* Barras de desplazamiento ------------------------------------------------ */
* { scrollbar-width: thin; scrollbar-color: var(--borde-fuerte) transparent; }

/* Pie --------------------------------------------------------------------- */
.pie { border-top: 1px solid var(--borde); color: var(--borde-fuerte); padding: 24px 0; font-size: 12px; }
.pie .contenedor { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

@media (max-width: 760px) {
  .rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .rejilla-4 .metrica { padding: 14px 16px; }
  .menu { width: 100%; border-radius: var(--r-tarjeta); padding: 8px; }
  .menu-usuario { border-left: 0; margin-left: 0; }
  .metrica .valor, .tasa .valor { font-size: 22px; }
  .tarjeta { padding: 18px; }
  .contenido { padding-top: 28px; }
}


/* =========================================================================
   Rediseño 2026-10 · capa visual sobre la base anterior
   ========================================================================= */

/* Fondo vivo (canvas fijo detrás de todo) y grano fino encima */
.fondo-lienzo { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -2; pointer-events: none; }
body::before {
  /* Sin mix-blend-mode: mezclar una capa fija a pantalla completa sobre los
     lienzos animados obligaba a recomponer toda la ventana en cada cuadro. */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: rgba(255, 161, 108, .35); color: #fff; }

/* Tipografía */
h1 { font-weight: 600; letter-spacing: -0.045em; }
h1 em, h2 em, .titulo-pagina em, .acceso-frase em {
  font-family: var(--f-serif); font-style: italic; font-weight: 300; letter-spacing: -0.01em; color: #dfe6ee;
}
.titulo-pagina { font-family: var(--f-serif); font-weight: 300; font-size: clamp(38px, 5.4vw, 56px); line-height: 1.04; letter-spacing: -0.025em; margin-bottom: 8px; }
.antetitulo { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--grafito); }
.seccion-titulo { font-weight: 600; letter-spacing: -0.035em; display: flex; align-items: center; gap: 14px; }
.seccion-titulo::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--borde), transparent); }

/* Cifras: dígitos tabulares de Geist; cotizaciones y tickers en mono */
.metrica .valor, .tasa .valor, .cifra-media, .cifra-grande { font-weight: 600; letter-spacing: -0.04em; font-feature-settings: "tnum", "ss01"; }
.cinta, .tabla td.num, .chip, .sello-fecha, .pastilla, .fecha-precio, .calor-celda, .escena-cifras dd { font-family: var(--f-mono); letter-spacing: -0.01em; }
.tabla td.num { font-size: 12.5px; }
.enlace-ticker strong, .cinta-ticker { font-family: var(--f-mono); font-weight: 600; letter-spacing: .01em; }

/* Cabecera */
/* Casi opaca y sin backdrop-filter: es fija y difuminar lo que se anima
   detrás (planeta, fondo) se recalculaba en cada cuadro. */
.cabecera { background: rgba(7, 8, 10, .94); backdrop-filter: none; -webkit-backdrop-filter: none; }
.marca { gap: 12px; }
.marca-logo { display: block; width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255, 255, 255, .025), 0 6px 22px rgba(80, 140, 255, .18); transition: box-shadow .3s; }
.marca:hover .marca-logo { box-shadow: 0 0 0 4px rgba(255, 255, 255, .04), 0 6px 26px rgba(255, 170, 120, .35); }
.marca strong { font-family: var(--f-serif); font-weight: 500; font-size: 20px; letter-spacing: -0.01em; line-height: 1.1; }
.marca small { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; margin-top: 2px; }
.menu { background: rgba(20, 21, 24, .7); box-shadow: var(--filo), 0 10px 30px rgba(0, 0, 0, .45); }
.menu > a:not(.boton) { border-radius: var(--r-pildora); border-bottom: 0; transition: color .15s, background .15s; }
.menu > a:not(.boton):hover { background: rgba(255, 255, 255, .04); }
.menu > a.activo { background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }

/* Botones */
.boton { font-weight: 500; letter-spacing: -0.01em; }
.boton-luz {
  background: linear-gradient(180deg, #ffffff, #d9dde3); color: #07080a; border-color: transparent;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 8px 30px rgba(255, 255, 255, .16), inset 0 -2px 0 rgba(0, 0, 0, .12);
}
.boton-luz:hover { color: #07080a; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 10px 40px rgba(255, 190, 150, .35), inset 0 -2px 0 rgba(0, 0, 0, .12); }
.boton-luz span { transition: transform .2s; display: inline-block; }
.boton-luz:hover span { transform: translateX(3px); }

/* Superficies de vidrio */
.tarjeta, .metrica, .tasa {
  background: var(--vidrio), var(--vidrio-base);
  border-color: rgba(255, 255, 255, .075);
  box-shadow: var(--filo), 0 24px 48px -24px rgba(0, 0, 0, .85);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.tarjeta { border-radius: 20px; }
.tarjeta .tarjeta, .tarjeta .metrica, .documento-cifras .metrica { background: rgba(255, 255, 255, .02); backdrop-filter: none; box-shadow: var(--filo); }
.tabla th { background: transparent; }
.tabla tbody tr:hover { background: linear-gradient(90deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01)); }

/* Tasas: filo de color según la variación y número grande */
.tasa { position: relative; overflow: hidden; transition: transform .2s, border-color .2s; }
.tasa::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
}
.tasa:has(.tasa-var.sube)::before { background: linear-gradient(90deg, transparent, rgba(78, 190, 150, .8), transparent); }
.tasa:has(.tasa-var.baja)::before { background: linear-gradient(90deg, transparent, rgba(240, 97, 109, .8), transparent); }
.tasa:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .14); }
.tasa .valor { font-size: 28px; }
.tasa .nombre { font-family: var(--f-mono); letter-spacing: .1em; }
.tasa-mini .minigrafica { height: 38px; }

.metrica .etiqueta, .tabla th, .ficha dt { font-family: var(--f-mono); letter-spacing: .1em; font-size: 10.5px; }
.metrica-enlace { transition: transform .2s, border-color .2s; }
.metrica-enlace:hover { transform: translateY(-2px); }

/* Cinta */
/* Fondo opaco: un backdrop-filter sobre contenido animado se recalcula a cada cuadro. */
.cinta { background: #0a0b0e; }
.cinta-item { font-size: 12.5px; }
.cinta-sello-bvc { background: linear-gradient(135deg, #ffa16c, #a8411f); color: #fff; }

/* Escena de portada: planeta en <canvas> al fondo, texto centrado --------- */
.escena {
  position: relative; overflow: hidden; isolation: isolate; background: #030406;
  min-height: clamp(640px, calc(100vh - 110px), 920px); display: flex; flex-direction: column;
}
.escena::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 160px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--tinta));
}
.escena-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.escena-contenido { padding: clamp(56px, 9vh, 104px) 0 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.escena-antetitulo {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 28px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .02em; color: var(--niebla);
  padding: 6px 14px 6px 10px; border-radius: var(--r-pildora);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--borde); backdrop-filter: blur(8px);
}
.punto-vivo { width: 7px; height: 7px; border-radius: 50%; background: var(--crecimiento); box-shadow: 0 0 0 0 rgba(78, 190, 150, .6); animation: latido 2.4s infinite; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(78, 190, 150, .55); } 70% { box-shadow: 0 0 0 9px rgba(78, 190, 150, 0); } 100% { box-shadow: 0 0 0 0 rgba(78, 190, 150, 0); } }
/* Título: Newsreader ligera, tono plata, sin color; la cursiva es el único acento. */
.escena-titulo {
  font-family: var(--f-serif); font-optical-sizing: auto; font-weight: 300;
  font-size: clamp(44px, 6.6vw, 92px); line-height: 1.02; letter-spacing: -0.025em;
  margin: 0 0 22px; max-width: 980px;
  background: linear-gradient(180deg, #ffffff 30%, #b7c2cf 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 30px rgba(3, 4, 6, .9));
}
.escena-titulo em { font-style: italic; font-weight: 300; letter-spacing: -0.015em; padding-right: .04em; }
.escena-texto { font-size: 17px; line-height: 1.6; color: #a3abb3; max-width: 540px; margin: 0 0 32px; }
.escena-acciones { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.escena-acciones .boton { padding: 13px 24px; font-size: 14px; }
.escena-acciones .boton-suave { background: rgba(3, 4, 6, .5); backdrop-filter: blur(8px); }
.escena-cifras {
  display: flex; flex-wrap: wrap; justify-content: center; margin: auto auto 40px; position: relative; top: 0;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: rgba(6, 8, 12, .55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--filo), 0 20px 50px rgba(0, 0, 0, .5);
}
.escena-cifras > div { padding: 14px 24px; border-left: 1px solid var(--borde); text-align: center; }
.escena-cifras > div:first-child { border-left: 0; }
.escena-cifras dt { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--grafito); margin-bottom: 4px; }
.escena-cifras dd { margin: 0; color: var(--blanco); font-size: 15px; font-weight: 500; white-space: nowrap; }
.escena-cifras dd span { font-size: 12.5px; margin-left: 4px; }
.escena + .contenido { padding-top: 24px; }
@media (max-width: 760px) {
  .escena { min-height: 720px; }
  .escena-titulo br { display: none; }
  .escena-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: calc(100% - 32px); margin-bottom: 24px; }
  .escena-cifras > div { padding: 10px 6px; }
  .escena-cifras dt { font-size: 8.5px; letter-spacing: .08em; }
  .escena-cifras dd { font-size: 11.5px; white-space: normal; }
  .escena-cifras dd span { display: block; margin: 2px 0 0; font-size: 10.5px; }
  .escena-antetitulo { font-size: 10px; }
  .marca small { display: none; }
}

/* Mapa de árbol (mercado) ------------------------------------------------- */
.calor-empresa { display: none; }
.calor.arbol { display: block; position: relative; gap: 0; }
.calor.arbol .calor-celda {
  position: absolute; min-height: 0; padding: 10px 12px; border-radius: 0; overflow: hidden;
  border: 2px solid var(--tinta); border-radius: 10px; justify-content: flex-start; gap: 2px;
  transition: filter .15s, box-shadow .15s, z-index 0s;
}
.calor.arbol .calor-celda.sube { background: linear-gradient(160deg, rgba(110, 220, 180, var(--i)), rgba(40, 140, 105, var(--i))); }
.calor.arbol .calor-celda.baja { background: linear-gradient(160deg, rgba(255, 130, 140, var(--i)), rgba(170, 50, 62, var(--i))); }
.calor.arbol .calor-celda.igual { background: linear-gradient(160deg, #24262b, #17181c); }
.calor.arbol .calor-celda:hover { transform: none; z-index: 2; filter: brightness(1.15); box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 12px 30px rgba(0, 0, 0, .6); }
.calor.arbol .calor-celda.grande { padding: 16px 18px; }
.calor.arbol .calor-celda.grande .calor-ticker { font-size: 22px; letter-spacing: -0.02em; }
.calor.arbol .calor-celda.grande .calor-var { font-size: 15px; }
.calor.arbol .calor-celda.grande .calor-empresa { display: block; margin-top: auto; font-family: var(--f-ui); font-size: 11px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calor.arbol .calor-celda.diminuta { padding: 4px 6px; }
.calor.arbol .calor-celda.diminuta .calor-ticker { font-size: 10px; }
.calor.arbol .calor-celda.diminuta .calor-var { display: none; }
.calor-ticker { text-shadow: 0 1px 8px rgba(0, 0, 0, .3); }
.calor.arbol .calor-ticker, .calor.arbol .calor-var { white-space: nowrap; }

/* Acceso con panel de velas ---------------------------------------------- */
.acceso { grid-template-columns: minmax(0, 1.15fr) minmax(320px, 420px); gap: 0; place-items: stretch; min-height: 560px; width: min(1080px, 100%); margin: 8px auto 0;
  border: 1px solid var(--borde); border-radius: 24px; overflow: hidden; box-shadow: var(--filo), 0 40px 80px -30px rgba(0, 0, 0, .9); }
.acceso-panel { position: relative; background: radial-gradient(120% 90% at 20% 0%, rgba(255, 161, 108, .1), transparent 60%), rgba(10, 11, 14, .7); border-right: 1px solid var(--borde); min-height: 320px; }
.acceso-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; }
.acceso-cita { position: absolute; left: 36px; bottom: 32px; right: 36px; }
.acceso-frase { font-family: var(--f-serif); font-size: clamp(36px, 4.4vw, 52px); line-height: 1.02; letter-spacing: -0.025em; font-weight: 300; color: var(--blanco); margin: 6px 0 0; }
.acceso-tarjeta { width: 100%; margin: 0; border: 0; border-radius: 0; display: flex; flex-direction: column; justify-content: center; padding: 44px 40px; }
.acceso-tarjeta h1 { font-size: 36px; }
@media (max-width: 820px) {
  .acceso { grid-template-columns: 1fr; }
  .acceso-panel { min-height: 240px; border-right: 0; border-bottom: 1px solid var(--borde); }
  .acceso-tarjeta { padding: 30px 24px; }
}

/* Detalle (índice / acción) */
.detalle-titulo { letter-spacing: -0.06em; font-weight: 600; }
.detalle-logo { background: radial-gradient(120% 120% at 30% 0%, #23252b, #0c0d10); font-family: var(--f-mono); box-shadow: var(--filo), 0 10px 30px rgba(0, 0, 0, .6); }
.rangos { background: rgba(7, 8, 10, .6); }
.rango { font-family: var(--f-mono); font-size: 11.5px; }
.rango.activo { background: rgba(255, 255, 255, .1); }

/* Pie */
.pie { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .5)); color: #5d636a; }
.pie .contenedor::before {
  content: ""; display: block; width: 100%; height: 1px; margin: -24px 0 22px;
  background: linear-gradient(90deg, transparent, rgba(255, 161, 108, .35), rgba(182, 214, 255, .25), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .punto-vivo { animation: none; }
  .tasa, .metrica-enlace, .boton-luz span { transition: none; }
}