/* web/monitor/estilos.css */
:root {
  --fondo: radial-gradient(130% 100% at 12% -10%, #201a32 0%, #14111d 42%, #0b0a10 100%);
  --tarjeta: rgba(9, 8, 14, .55);
  --borde: rgba(167, 139, 250, .14);
  --texto: #e9e9ee;
  --tenue: #8f84b4;
  --sube: #34d399;
  --baja: #f87171;
  --precio: #fbbf24;
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 16px; min-height: 100vh;
  background: var(--fondo); color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.barra { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.barra h1 { font-size: 15px; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.frescura { font-size: 11px; color: var(--tenue); }
/* Sin glow en bordes: decidido en el diseño, menos efecto para mirar largo rato. */
.tarjeta, .grilla, .lateral { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; }
.grilla, .lateral { padding: 12px 14px; }
.cuerpo { display: grid; grid-template-columns: 1fr 200px; gap: 10px; }
.pulso { display: flex; gap: 8px; margin-bottom: 10px; }
.vacio { color: var(--tenue); font-size: 12px; }
/* Estados de frescura: atenuar comunica "esto no es de ahora" sin texto. */
body[data-frescura="demorado"] .grilla { opacity: .6; }
body[data-frescura="caido"] .grilla { opacity: .35; }
body[data-frescura="caido"] .frescura { color: var(--baja); }

.kpi { flex: 1; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 8px 11px; }
.kl { font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.kv { font-size: 19px; font-weight: 650; letter-spacing: -.02em; margin-top: 2px; }
.kd { font-size: 11px; color: var(--tenue); }
.kn { font-size: 9px; color: var(--tenue); margin-top: 1px; }
.fila { display: grid; grid-template-columns: 66px 68px 54px 56px 1fr 84px 46px 52px;
        gap: 9px; align-items: center; padding: 6px 8px; border-radius: 7px; font-size: 11px; }
.fila + .fila { border-top: 1px solid rgba(167,139,250,.09); }
.fila.cab { font-size: 7.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.fila.error { grid-template-columns: 66px 1fr; color: var(--tenue); font-style: italic; }
/* Las filas sin datos no abren el detalle (abrirDetalle las rechaza):
   sin hover ni cursor de mano, para no invitar un clic que no hace nada. */
.fila:not(.cab):not(.error):hover { background: rgba(167,139,250,.07); cursor: pointer; }
.sym { font-weight: 650; }
.sube { color: var(--sube); } .baja { color: var(--baja); }
/* Neutro: variacion_24h sin dato. Verde y rojo afirman una direccion;
   sin dato no se afirma ninguna. Reusa --tenue, no un color nuevo. */
.nt { color: var(--tenue); }
.px.congelado { text-decoration: line-through; opacity: .5; }
/* Precio sin verificar (stale ni True ni False -- ver `stale` tri-estado
   en app.js): mas tenue que el texto normal pero SIN el tachado de
   congelado, para no afirmar "esto es viejo" cuando en realidad es
   "no sabemos". Estado propio, no un aviso ruidoso. */
.px.incierto { opacity: .55; }
.spark { height: 14px; width: 100%; }
/* Nombrada .medidor a proposito: .barra ya es la cabecera de la pagina
   (linea 18). Reusar el mismo nombre para esta mini-barra de metrica
   hacia que la cascada resolviera la cabecera con height:5px/overflow:
   hidden y le clipeara el titulo y #frescura a una tira invisible. */
.medidor { height: 5px; border-radius: 3px; background: rgba(167,139,250,.13); overflow: hidden; }
.medidor i { display: block; height: 100%; border-radius: 3px; background: #6d6d80; }
.micro { font-size: 8px; color: var(--tenue); margin-top: 2px; }
.banda { height: 15px; border-radius: 4px; position: relative;
         background: linear-gradient(90deg, rgba(167,139,250,.07), rgba(167,139,250,.17), rgba(167,139,250,.07)); }
.banda s { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(255,255,255,.3); }
/* Unico glow permitido: el marcador del precio. Es el dato que se busca
   rapido al recorrer filas, y ahi el brillo trabaja a favor. */
.banda b { position: absolute; top: -2px; width: 2px; height: 19px; border-radius: 1px;
           background: var(--precio); box-shadow: 0 0 7px rgba(251,191,36,.75); }
.puntos { display: flex; gap: 3px; }
.puntos u { width: 6px; height: 6px; border-radius: 2px; display: block; }
.lt { font-size: 7.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); margin-bottom: 7px; }
/* El filtro de impacto (solo ★★★) se declara una vez en el titulo de la
   seccion, asi que cada fila solo necesita titulo + cuenta regresiva. */
.evento { display: flex; justify-content: space-between; gap: 8px; font-size: 9.5px; line-height: 1.9; }

.detalle { position: fixed; inset: auto 0 0 0; max-height: 82vh; overflow-y: auto;
           background: #14111d; border-top: 1px solid var(--borde);
           border-radius: 16px 16px 0 0; padding: 16px; z-index: 10; }
.detalle.oculto { display: none; }
.cerrar { position: absolute; top: 12px; right: 14px; background: none; border: 0;
          color: var(--tenue); font-size: 15px; cursor: pointer; }
.dt-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.dt-sym { font-size: 16px; font-weight: 650; }
.dt-px { font-size: 18px; font-weight: 650; }
.dt-ejes { display: flex; justify-content: space-between; font-size: 8px; color: var(--tenue); margin-top: 3px; }
.dt-par { display: flex; justify-content: space-between; font-size: 11px; line-height: 2; }
.dt-par span:first-child { color: var(--tenue); }
.dt-tfs { display: flex; gap: 14px; }
.dt-tfs u { display: block; width: 100%; height: 6px; border-radius: 2px; margin-top: 3px; }

.niv { display: flex; justify-content: space-between; font-size: 11px; line-height: 1.95; }
.et { display: inline-block; font-size: 8px; padding: 1.5px 6px; border-radius: 99px;
      background: rgba(255,255,255,.07); color: var(--tenue); }
/* Los tipos de zona se distinguen por matiz, no por significado direccional:
   ninguno dice "compra" ni "venta". */
.et.vp  { background: rgba(167,139,250,.16); color: #c4b5fd; }
.et.fvg { background: rgba(52,211,153,.14); color: var(--sube); }
.et.ob  { background: rgba(251,191,36,.14); color: var(--precio); }

@media (min-width: 761px) {
  .detalle { inset: 50% auto auto 50%; transform: translate(-50%, -50%);
             width: 400px; border-radius: 16px; border: 1px solid var(--borde); }
}
/* Movil: dos lineas por simbolo. La cabecera se esconde porque las
   columnas dejan de estar alineadas y su texto solo confundiria.
   Cada celda tiene su propia clase c-* para que el grid-area la
   encuentre: dejar una celda sin clase es lo que rompio esto la
   primera vez (auto-placement silencioso en vez del layout con nombre). */
@media (max-width: 760px) {
  .cuerpo { grid-template-columns: 1fr; }
  .pulso { overflow-x: auto; }
  body { padding: 10px; }
  .fila.cab { display: none; }
  .fila {
    grid-template-columns: 1fr 1.25fr 42px 52px;
    grid-template-areas:
      "sym  sym   px  px"
      "act  banda rng tfs";
    row-gap: 6px;
    padding: 9px 10px;
  }
  .c-sym   { grid-area: sym; font-size: 12px; }
  .c-px    { grid-area: px; text-align: right; font-size: 12px; font-weight: 650; }
  .c-act   { grid-area: act; }
  .c-banda { grid-area: banda; }
  .c-rango { grid-area: rng; }
  .c-tfs   { grid-area: tfs; justify-self: end; }
  /* En 375px no entran ocho columnas. Se sacrifican variacion y
     mini-grafico: el precio y las cuatro barras son lo que orienta. */
  .c-var, .c-spark { display: none; }
  .fila.error { grid-template-columns: 1fr; grid-template-areas: "sym" "px"; }
  .fila.error .c-px { text-align: left; font-weight: 400; }
  .lateral { margin-top: 10px; }
}