:root {
  --bg: #f7f8fa;
  --panel: #ffffff;
  --borde: #e2e6ec;
  --texto: #16202c;
  --suave: #64748b;
  --acento: #2563eb;
  --optima: #059669;
  --propuesta: #dc2626;
  --hrp: #a855f7;
  --minvol: #f59e0b;
  --sube: #059669;
  --baja: #dc2626;
  --sombra: 0 1px 2px rgba(16, 32, 48, .06), 0 4px 12px rgba(16, 32, 48, .04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --panel: #161b22;
    --borde: #2a313c;
    --texto: #e6edf3;
    --suave: #8b949e;
    --acento: #58a6ff;
    --optima: #3fb950;
    --propuesta: #f85149;
    --hrp: #bc8cff;
    --minvol: #d29922;
    --sube: #3fb950;
    --baja: #f85149;
    --sombra: none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.5rem 4rem;
  background: var(--bg);
  color: var(--texto);
  font: 15px/1.55 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.envoltorio { max-width: 1180px; margin: 0 auto; }

header { padding: 2.5rem 0 1.5rem; border-bottom: 1px solid var(--borde); margin-bottom: 2rem; }
h1 { margin: 0 0 .35rem; font-size: 1.65rem; letter-spacing: -.02em; }
.subtitulo { color: var(--suave); font-size: .92rem; margin: 0; }

h2 {
  font-size: 1.05rem; letter-spacing: -.01em; margin: 2.5rem 0 .4rem;
  display: flex; align-items: baseline; gap: .6rem;
}
h2 .nota { font-size: .8rem; font-weight: 400; color: var(--suave); }

.panel {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 10px; padding: 1.15rem 1.3rem; box-shadow: var(--sombra);
}

/* --- cotizaciones en vivo --- */
.vivo { display: flex; align-items: center; gap: .55rem; color: var(--suave); font-size: .84rem; }
.punto {
  width: 8px; height: 8px; border-radius: 50%; background: var(--sube);
  animation: latir 2.4s ease-in-out infinite;
}
@keyframes latir { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) { .punto { animation: none } }

.tiras { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: .65rem; }
.tira { background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; padding: .6rem .75rem; }
.tira .tk { font-weight: 650; font-size: .82rem; letter-spacing: .02em; }
.tira .px { font-variant-numeric: tabular-nums; font-size: 1.12rem; margin: .1rem 0; }
.tira .vr { font-variant-numeric: tabular-nums; font-size: .82rem; font-weight: 600; }
.sube { color: var(--sube); } .baja { color: var(--baja); }

/* --- comparacion destacada --- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 720px) { .duo { grid-template-columns: 1fr } }
.tarjeta { position: relative; overflow: hidden; }
.tarjeta::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; }
.tarjeta.prop::before { background: var(--propuesta); }
.tarjeta.opt::before { background: var(--optima); }
.tarjeta h3 { margin: 0 0 .8rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.cifra .v { font-size: 1.45rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cifra .e { font-size: .74rem; color: var(--suave); text-transform: uppercase; letter-spacing: .05em; }

/* --- tablas --- */
.marco { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td { padding: .5rem .7rem; text-align: right; white-space: nowrap; }
th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--suave); font-weight: 600; border-bottom: 1px solid var(--borde);
}
td { border-bottom: 1px solid var(--borde); font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: left; }
tbody tr:last-child td { border-bottom: none; }
.ticker { font-weight: 650; }
.tenue { color: var(--suave); }

.barra { position: relative; height: 6px; background: var(--borde); border-radius: 3px; overflow: hidden; min-width: 60px; }
.barra i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; display: block; }

/* --- graficos --- */
svg { display: block; width: 100%; height: auto; }
.eje { stroke: var(--borde); }
.grilla { stroke: var(--borde); stroke-dasharray: 2 4; opacity: .7; }
.etiqueta-eje { fill: var(--suave); font-size: 11px; font-variant-numeric: tabular-nums; }
.titulo-eje { fill: var(--suave); font-size: 11.5px; }
.curva { fill: none; stroke: var(--acento); stroke-width: 2; }
.punto-etiqueta { font-size: 11px; font-weight: 600; }

.leyenda { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .9rem; font-size: .82rem; color: var(--suave); }
.leyenda span { display: flex; align-items: center; gap: .4rem; }
.marca { width: 10px; height: 10px; border-radius: 50%; }

/* --- avisos --- */
.aviso {
  background: color-mix(in srgb, var(--minvol) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--minvol) 35%, transparent);
  border-radius: 8px; padding: .7rem .9rem; margin-bottom: .6rem; font-size: .86rem;
}
.aviso b { color: var(--minvol); }

/* --- veredictos del scoring --- */
.sello {
  display: inline-block; padding: .15rem .55rem; border-radius: 999px;
  font-size: .74rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em;
}
.sello.compra { background: color-mix(in srgb, var(--sube) 16%, transparent); color: var(--sube); }
.sello.venta { background: color-mix(in srgb, var(--baja) 16%, transparent); color: var(--baja); }
.sello.mantener { background: color-mix(in srgb, var(--suave) 16%, transparent); color: var(--suave); }

.medidor { display: inline-block; width: 54px; height: 5px; background: var(--borde); border-radius: 3px; position: relative; vertical-align: middle; }
.medidor i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.medidor .cero { position: absolute; top: -2px; bottom: -2px; left: 50%; width: 1px; background: var(--suave); opacity: .5; }

.regimen { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.regimen .etq { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.regimen .val { font-weight: 650; padding: .2rem .6rem; border-radius: 6px; font-size: .85rem; }
.regimen .val.risk-on { background: color-mix(in srgb, var(--sube) 16%, transparent); color: var(--sube); }
.regimen .val.risk-off { background: color-mix(in srgb, var(--baja) 16%, transparent); color: var(--baja); }
.regimen .val.neutral { background: color-mix(in srgb, var(--suave) 16%, transparent); color: var(--suave); }
.regimen ul { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--suave); font-size: .85rem; width: 100%; }

.error { border-color: var(--propuesta); color: var(--propuesta); }
.cargando { color: var(--suave); padding: 2rem 0; text-align: center; }

footer { margin-top: 3.5rem; padding-top: 1.2rem; border-top: 1px solid var(--borde); color: var(--suave); font-size: .8rem; }