/* Sala de control de mercado: una columna de bloques a ancho completo con pares lado a lado; la barra de sesiones de
   24 h es el elemento propio de la página. Neutros azul pizarra, acento ámbar de señal, verde/rojo solo para estado. */
:root {
  color-scheme: light;
  --fondo: #eef1f4;
  --panel: #fbfcfd;
  --panel-2: #e4e9ee;
  --tinta: #13202c;
  --tinta-2: #46576a;
  --tinta-3: #75859a;
  --linea: #d3dbe3;
  --acento: #b35c0c;
  --acento-suave: #f6e3cf;
  --sube: #157a3c;
  --baja: #b8352a;
  --aviso: #9a6a00;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --asia: #dfe7f1; --londres: #e6e2f3; --ny: #f5e4d3;
  --f-titulo: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-datos: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r: 6px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fondo: #0d141b; --panel: #141e28; --panel-2: #1c2834; --tinta: #e5ecf2; --tinta-2: #a9b7c6; --tinta-3: #7d8da0;
    --linea: #263443; --acento: #f0a24a; --acento-suave: #3a2a17; --sube: #4cc47a; --baja: #f07466; --aviso: #e0b44a;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --asia: #1a2a3c; --londres: #262241; --ny: #3a2919;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fondo: #0d141b; --panel: #141e28; --panel-2: #1c2834; --tinta: #e5ecf2; --tinta-2: #a9b7c6; --tinta-3: #7d8da0;
  --linea: #263443; --acento: #f0a24a; --acento-suave: #3a2a17; --sube: #4cc47a; --baja: #f07466; --aviso: #e0b44a;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --asia: #1a2a3c; --londres: #262241; --ny: #3a2919;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font: 15px/1.5 var(--f-texto);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
a { color: inherit; text-decoration-color: var(--linea); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--acento); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 3px; }
h2, h3 { font-family: var(--f-titulo); text-wrap: balance; margin: 0; }
h2 { font-size: 1.32rem; font-weight: 750; font-stretch: 112%; letter-spacing: .005em; }
h2 small { font: 500 .78rem var(--f-texto); color: var(--tinta-3); margin-left: .4rem; letter-spacing: .02em; }
h3 { font-size: .98rem; font-weight: 700; font-stretch: 105%; }
.sub { margin: 1.1rem 0 .55rem; color: var(--tinta-2); }
.num, .tabla td.n, .tabla th.n { font-family: var(--f-datos); font-variant-numeric: tabular-nums; }
.nota { margin: 0; color: var(--tinta-3); font-size: .82rem; max-width: 70ch; }
.etq { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--tinta-3); font-weight: 600; }
.vacio { color: var(--tinta-3); font-size: .9rem; padding: .6rem 0; }

/* barra superior */
.barra {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea);
  margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.barra-in { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 1.2rem; padding-block: .6rem; flex-wrap: wrap; }
.marca { font-family: var(--f-titulo); font-weight: 800; font-stretch: 122%; font-size: 1.25rem; text-decoration: none; display: flex; align-items: center; gap: .5rem; letter-spacing: -.01em; }
.marca span:last-child { color: var(--acento); }
.marca-punto { width: 11px; height: 11px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); animation: pulso 2.6s ease-out infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 55%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.relojes { display: flex; gap: 1.1rem; }
.reloj { display: flex; flex-direction: column; line-height: 1.15; }
.reloj .num { font-size: 1.02rem; font-weight: 500; }
.frescura { margin-left: auto; font-size: .8rem; color: var(--tinta-2); display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.frescura .ok::before, .frescura .viejo::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: .35rem; background: var(--sube); vertical-align: 1px; }
.frescura .viejo::before { background: var(--aviso); }
.boton-tema { border: 1px solid var(--linea); background: var(--panel); color: var(--tinta); border-radius: var(--r); width: 34px; height: 34px; cursor: pointer; font-size: 1rem; }

.pagina { max-width: 1280px; margin: 0 auto; padding-block: 1.1rem 2.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
.bloque, .sesiones { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r); padding: 1.05rem 1.15rem 1.2rem; min-width: 0; }
.cab { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; flex-wrap: wrap; margin-bottom: .85rem; }
.dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 900px) { .dos { grid-template-columns: 1fr; } }

/* sesiones */
.linea-sesiones { position: relative; height: 92px; }
.linea-sesiones svg { width: 100%; height: 100%; display: block; overflow: visible; }
.linea-sesiones text { font-family: var(--f-datos); font-size: 10px; fill: var(--tinta-3); }
.linea-sesiones .banda-etq { font-family: var(--f-texto); font-size: 11px; font-weight: 600; fill: var(--tinta-2); }
.linea-sesiones .ahora { stroke: var(--acento); stroke-width: 2; }
.linea-sesiones .ahora-etq { fill: var(--acento); font-weight: 600; }
.linea-sesiones .evento { fill: var(--baja); }
.linea-sesiones .evento.medio { fill: var(--aviso); }

/* lectura */
.lectura { border-left: 3px solid var(--acento); }
.lectura-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.3rem; }
@media (max-width: 860px) { .lectura-grid { grid-template-columns: 1fr; } }
.esencial { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .62rem; }
.esencial li { padding-left: 1.05rem; position: relative; max-width: 78ch; }
.esencial li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--acento); border-radius: 1px; transform: rotate(45deg); }
.vigilar { background: var(--panel-2); border-radius: var(--r); padding: .85rem 1rem; }
.vigilar h3 { margin-bottom: .5rem; }
.vigilar ul { margin: 0; padding-left: 1rem; display: flex; flex-direction: column; gap: .4rem; font-size: .9rem; }

/* tablero */
.tablero { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: .7rem; }
@media (min-width: 1080px) { .tablero { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.activo { border: 1px solid var(--linea); border-radius: var(--r); padding: .7rem .8rem .55rem; display: grid; grid-template-rows: auto auto auto auto; gap: .2rem; background: var(--panel); }
.activo .fila { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.activo .nombre { font-weight: 600; font-size: .92rem; }
.activo .grupo { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.activo .precio { font-family: var(--f-datos); font-size: 1.28rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.activo .var { font-family: var(--f-datos); font-size: .88rem; font-variant-numeric: tabular-nums; }
.sube { color: var(--sube); } .baja { color: var(--baja); }
.activo .mini { font-family: var(--f-datos); font-size: .72rem; color: var(--tinta-3); display: flex; gap: .7rem; white-space: nowrap; }
.activo .fila:last-child { align-items: center; }
.chips { display: flex; gap: .3rem; flex-wrap: wrap; }
.activo .chips { flex-wrap: nowrap; }
.chip { font-size: .68rem; font-weight: 600; border-radius: 999px; padding: .08rem .5rem; border: 1px solid var(--linea); color: var(--tinta-2); white-space: nowrap; }
.chip.alcista { color: var(--sube); border-color: color-mix(in srgb, var(--sube) 45%, var(--linea)); }
.chip.bajista { color: var(--baja); border-color: color-mix(in srgb, var(--baja) 45%, var(--linea)); }
.chip.acento { color: var(--acento); border-color: color-mix(in srgb, var(--acento) 50%, var(--linea)); }
.spark { width: 100%; height: 38px; display: block; }
.spark .area { opacity: .12; }

/* agenda */
.agenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ev { display: grid; grid-template-columns: 4.8rem minmax(0, 1fr) auto; gap: .2rem .8rem; padding: .55rem 0; border-top: 1px solid var(--linea); align-items: start; }
.ev:first-child { border-top: 0; }
.ev .cuando { font-family: var(--f-datos); font-size: .8rem; line-height: 1.3; }
.ev .cuando small { display: block; color: var(--tinta-3); font-size: .7rem; }
.ev .nombre { font-weight: 600; font-size: .9rem; }
.ev .valores { font-family: var(--f-datos); font-size: .76rem; color: var(--tinta-2); display: flex; gap: .7rem; flex-wrap: wrap; }
.ev .efecto { grid-column: 2 / 4; font-size: .77rem; color: var(--tinta-2); background: var(--panel-2); border-radius: 4px; padding: .3rem .5rem; }
.impacto { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: .35rem; background: var(--aviso); vertical-align: 1px; }
.impacto.high { background: var(--baja); }
.ev.pasado { opacity: .72; }
.cuenta { font-family: var(--f-datos); font-size: .75rem; color: var(--acento); white-space: nowrap; }

/* bot */
.senal { padding: .55rem 0; border-top: 1px solid var(--linea); display: grid; gap: .15rem; }
.senal:first-child { border-top: 0; }
.senal .fila { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.senal .sim { font-family: var(--f-datos); font-weight: 500; }
.senal .dist { font-size: .84rem; color: var(--tinta-2); }
.medidor { height: 6px; background: var(--panel-2); border-radius: 3px; overflow: hidden; }
.medidor span { display: block; height: 100%; background: var(--acento); border-radius: 3px; }

/* titulares */
.actividad { height: 46px; margin-bottom: .7rem; }
.actividad svg { width: 100%; height: 100%; display: block; }
.actividad rect { fill: var(--acento); opacity: .55; }
.actividad rect:hover { opacity: 1; }
.pestanas { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .8rem; }
.pestana { font: 600 .82rem var(--f-texto); border: 1px solid var(--linea); background: var(--panel); color: var(--tinta-2); border-radius: 999px; padding: .28rem .75rem; cursor: pointer; }
.pestana[aria-selected="true"] { background: var(--tinta); color: var(--panel); border-color: var(--tinta); }
.pestana .c { font-family: var(--f-datos); font-weight: 400; opacity: .75; margin-left: .3rem; }
.tema-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 1.2rem; }
@media (max-width: 860px) { .tema-panel { grid-template-columns: 1fr; } }
.analisis-tema { display: flex; flex-direction: column; gap: .55rem; font-size: .9rem; }
.analisis-tema b { font-family: var(--f-titulo); font-stretch: 105%; }
.titulares { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.titulares li { padding: .45rem 0; border-top: 1px solid var(--linea); display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: .6rem; }
.titulares li:first-child { border-top: 0; }
.titulares .t { font-family: var(--f-datos); font-size: .74rem; color: var(--tinta-3); padding-top: .12rem; }
.titulares .m { font-size: .74rem; color: var(--tinta-3); font-weight: 600; }

/* ideas */
.ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
@media (min-width: 1180px) { .ideas { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } }
.idea { border: 1px solid var(--linea); border-radius: var(--r); padding: .8rem .9rem; display: flex; flex-direction: column; gap: .45rem; font-size: .86rem; }
.idea .fila { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.idea h3 { font-size: 1rem; }
.idea dl { margin: 0; display: grid; gap: .4rem; }
.idea dt { font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-3); font-weight: 600; }
.idea dd { margin: 0; }

/* tablas */
.tabla-env { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .84rem; }
.tabla th { text-align: left; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); font-weight: 600; padding: .4rem .5rem; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla td { padding: .42rem .5rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla td.n, .tabla th.n { text-align: right; white-space: nowrap; }
.tabla tr:last-child td { border-bottom: 0; }

/* gráficos */
.graf { margin-bottom: .6rem; position: relative; }
.graf svg { width: 100%; height: 210px; display: block; overflow: visible; }
.graf text { font-family: var(--f-datos); font-size: 10px; fill: var(--tinta-3); }
.graf .rejilla { stroke: var(--linea); stroke-width: 1; }
.graf .etq-serie { font-family: var(--f-texto); font-size: 11px; font-weight: 600; fill: var(--tinta-2); }
.graf .cruz { stroke: var(--tinta-3); stroke-dasharray: 3 3; }
.leyenda { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .78rem; color: var(--tinta-2); margin-bottom: .4rem; }
.leyenda i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: .35rem; border-radius: 1px; }

/* valor relativo */
.pctl { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 3.2rem; gap: .2rem .7rem; align-items: center; padding: .28rem 0; font-size: .84rem; }
.pctl .riel { height: 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--s1) 22%, transparent), color-mix(in srgb, var(--s2) 22%, transparent)); border-radius: 5px; position: relative; }
.pctl .marca-p { position: absolute; top: -3px; width: 4px; height: 16px; border-radius: 2px; background: var(--tinta); transform: translateX(-2px); box-shadow: 0 0 0 2px var(--panel); }
.pctl .v { font-family: var(--f-datos); text-align: right; font-variant-numeric: tabular-nums; }
.ratio { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: .2rem .8rem; padding: .45rem 0; border-top: 1px solid var(--linea); font-size: .84rem; }
.ratio:first-child { border-top: 0; }
.ratio .l { color: var(--tinta-3); font-size: .76rem; }
.ratio .spark { width: 90px; height: 30px; grid-row: 1 / 3; grid-column: 2; align-self: center; }

/* analistas */
.analistas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.4rem; }
@media (max-width: 960px) { .analistas { grid-template-columns: 1fr; } }
.totales { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-bottom: .2rem; }
.total .v { font-family: var(--f-titulo); font-stretch: 112%; font-weight: 750; font-size: 1.6rem; line-height: 1; }
.marc { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 4.4rem; gap: .2rem .6rem; align-items: center; padding: .25rem 0; font-size: .82rem; }
.marc .sim { font-family: var(--f-datos); }
.marc .barra-m { display: flex; height: 12px; gap: 2px; }
.marc .barra-m span { display: block; height: 100%; border-radius: 2px; min-width: 2px; }
.marc .k { font-family: var(--f-datos); text-align: right; font-size: .76rem; color: var(--tinta-2); }
.b-cumplida { background: var(--sube); } .b-fallida { background: var(--baja); }
.b-favor { background: color-mix(in srgb, var(--sube) 40%, var(--panel)); } .b-contra { background: color-mix(in srgb, var(--baja) 40%, var(--panel)); }
.leyenda-marc { display: flex; gap: .8rem; flex-wrap: wrap; font-size: .74rem; color: var(--tinta-2); margin: .4rem 0 0; }
.leyenda-marc i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }
.pendientes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .45rem; font-size: .84rem; }
.pendientes li { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: .6rem; }
.pendientes .f { font-family: var(--f-datos); color: var(--acento); font-size: .78rem; }
.tesis-lista { display: flex; flex-direction: column; max-height: 640px; overflow-y: auto; padding-right: .3rem; }
.tes { border-top: 1px solid var(--linea); padding: .55rem 0; display: grid; gap: .25rem; font-size: .84rem; }
.tes:first-child { border-top: 0; }
.tes .fila { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; align-items: baseline; }
.tes q { color: var(--tinta-2); font-style: italic; }
.estado { font-size: .7rem; font-weight: 600; border-radius: 999px; padding: .06rem .5rem; white-space: nowrap; border: 1px solid var(--linea); color: var(--tinta-2); }
.estado.cumplida, .estado.favor { color: var(--sube); border-color: color-mix(in srgb, var(--sube) 45%, var(--linea)); }
.estado.fallida, .estado.contra { color: var(--baja); border-color: color-mix(in srgb, var(--baja) 45%, var(--linea)); }

/* pie */
.pie { color: var(--tinta-3); font-size: .78rem; display: flex; flex-direction: column; gap: .6rem; padding-top: .4rem; }
.pie p { margin: 0; max-width: 90ch; }
.feeds { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.feeds span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--sube); margin-right: .3rem; vertical-align: 1px; }
.feeds span.mal::before { background: var(--baja); }

.tooltip { position: fixed; z-index: 30; pointer-events: none; background: var(--tinta); color: var(--panel); font: .76rem/1.35 var(--f-texto); padding: .4rem .55rem; border-radius: 4px; max-width: 260px; }
.tooltip .num { font-family: var(--f-datos); }

@media (max-width: 560px) {
  .relojes { gap: .7rem; } .reloj:nth-child(3) { display: none; }
  .frescura { margin-left: 0; width: 100%; order: 3; }
  .ev { grid-template-columns: 4.2rem minmax(0, 1fr); } .ev .cuenta { grid-column: 2; }
  .pctl { grid-template-columns: 6rem minmax(0, 1fr) 2.6rem; }
}
@media (prefers-reduced-motion: reduce) { .marca-punto { animation: none; } }