:root {
  --negro: #070707; --panel: #0f0e0c; --panel2: #15130f; --linea: #2b261c; --linea2: #3d3424;
  --oro: #d4b06a; --oro2: #b8924a; --champan: #e9dcbc; --hueso: #f3ede0; --gris: #8f887a; --gris2: #6b6558;
  --verde: #2fc26b; --rojo: #e05252; --bronce: #b5793a;
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Montserrat', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { background: var(--negro); color: var(--hueso); font-family: var(--sans); }
body { min-height: 100dvh; display: flex; justify-content: center; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.app { width: 100%; max-width: 480px; padding: 0 16px calc(96px + env(safe-area-inset-bottom)); }

/* splash */
#splash { position: fixed; inset: 0; z-index: 50; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; transition: opacity .45s ease; }
#splash.fuera { opacity: 0; pointer-events: none; }
.splash-logo { position: relative; width: min(82vw, 380px); aspect-ratio: 1; overflow: hidden;
  -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 72%); mask-image: radial-gradient(circle, #000 55%, transparent 72%); }
.splash-logo img { width: 100%; height: 100%; object-fit: contain; display: block; animation: aparecer .7s ease both; }
.splash-logo::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(105deg, transparent 42%, rgba(255,236,190,.38) 50%, transparent 58%); animation: brillo 1.4s .3s ease-in-out both; }
.splash-marca { font-family: var(--serif); letter-spacing: .5em; font-size: 26px; padding-left: .5em; animation: aparecer .8s .2s ease both; }
.splash-lema { font-size: 10px; letter-spacing: .4em; color: var(--oro); animation: aparecer .8s .45s ease both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } }
@keyframes brillo { from { transform: translateX(-70%); } to { transform: translateX(70%); } }

/* cabecera */
header.top { display: flex; align-items: center; gap: 12px; padding: 18px 0 14px; border-bottom: 1px solid var(--oro2); }
.marca-ico { width: 34px; height: 40px; color: var(--oro); flex: none; }
.marca { border-left: 1px solid var(--linea2); padding-left: 12px; flex: 1; min-width: 0; }
.marca b { display: block; font-weight: 600; letter-spacing: .28em; font-size: 18px; }
.marca span { display: block; color: var(--oro); letter-spacing: .38em; font-size: 10px; }
.marca small { display: block; font-size: 8px; letter-spacing: .22em; color: var(--champan); margin-top: 2px; white-space: nowrap; }
.live { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); }
.live.off i { background: var(--gris2); }

/* héroe */
.heroe { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; padding: 18px 0 6px; align-items: center; }
.heroe .sim { font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1; }
.heroe .sub { color: var(--oro); font-size: 10px; letter-spacing: .3em; margin-top: 4px; }
.heroe .precio { font-family: var(--serif); font-size: 52px; font-weight: 600; line-height: 1.05; margin-top: 6px; }
.heroe .cambio { font-family: var(--mono); font-size: 15px; }
.heroe .cambio.sube { color: var(--verde); } .heroe .cambio.baja { color: var(--rojo); }
.heroe .meta { font-family: var(--mono); font-size: 10px; color: var(--gris); margin-top: 4px; }
.heroe .meta.alerta { color: var(--rojo); }
.selector-sim { display: flex; gap: 6px; margin-top: 8px; }
.selector-sim button { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; padding: 3px 8px; border: 1px solid var(--linea2); border-radius: 6px; color: var(--gris); }
.selector-sim button.on { border-color: var(--oro); color: var(--oro); }
.anillo { width: 112px; height: 112px; border-left: 1px solid var(--linea2); padding-left: 14px; box-sizing: content-box; }
.anillo text { font-family: var(--serif); }
.grafico { width: 100%; height: 76px; display: block; margin: 4px 0 14px; }

/* franja de contexto */
.franja { display: flex; align-items: center; border: 1px solid var(--linea2); border-radius: 12px; background: var(--panel); padding: 11px 12px; font-family: var(--mono); font-size: 12px; gap: 10px; }
.franja > div { flex: 1 1 auto; display: flex; gap: 6px; align-items: baseline; white-space: nowrap; min-width: 0; }
.franja > div.cal { flex: 0 0 auto; align-items: center; color: var(--champan); }
.franja > div + div { border-left: 1px solid var(--linea2); padding-left: 10px; }
.franja .k { color: var(--gris); font-size: 11px; }
.franja .v { font-weight: 600; }
.sube { color: var(--verde); } .baja { color: var(--rojo); } .nd { color: var(--gris2); }

/* títulos y pestañas */
.titulo { display: flex; align-items: center; gap: 16px; margin: 26px 0 14px; }
.titulo h2 { font-family: var(--serif); font-size: 38px; font-weight: 600; }
.titulo::after { content: ''; flex: 1; height: 1px; background: var(--oro2); }
.tabs { display: flex; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--oro2); overflow-x: auto; scrollbar-width: none; }
.tabs button { flex: 1; white-space: nowrap; padding: 8px 10px; border-radius: 999px; font-size: 13px; color: var(--champan); }
.tabs button.on { background: var(--oro); color: #14100a; font-weight: 600; }

/* línea de tiempo de señales */
.linea-tiempo { position: relative; padding: 14px 0 0 58px; }
.linea-tiempo::before { content: ''; position: absolute; left: 50px; top: 18px; bottom: 10px; width: 1px; background: var(--oro2); }
.senal { position: relative; padding: 4px 0 18px; border-bottom: 1px solid var(--linea); margin-bottom: 16px; }
.senal:last-child { border-bottom: 0; }
.senal .hora { position: absolute; left: -58px; top: 8px; width: 40px; font-family: var(--mono); font-size: 11px; color: var(--gris); text-align: right; line-height: 1.3; }
.senal .punto { position: absolute; left: -12px; top: 11px; width: 9px; height: 9px; border-radius: 50%; background: var(--oro); }
.senal .cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.senal .sim { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1; }
.senal .tipo { font-size: 10px; letter-spacing: .26em; margin-top: 5px; font-weight: 500; }
.t-rango .tipo { color: var(--oro); }  .t-rango .punto { background: var(--oro); }
.t-estructura15 .tipo { color: var(--champan); } .t-estructura15 .punto { background: var(--champan); }
.t-estructura .tipo { color: var(--bronce); } .t-estructura .punto { background: var(--bronce); }
.lado { font-size: 12px; font-weight: 700; letter-spacing: .1em; padding: 6px 14px; border-radius: 8px; }
.lado.compra { background: var(--verde); color: #04140a; } .lado.venta { background: #df5f5f; color: #1d0606; }
.niveles { display: grid; grid-template-columns: 1fr 1fr; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linea2); font-size: 13px; }
.niveles > div { display: grid; grid-template-columns: 62px 1fr; row-gap: 3px; }
.niveles > div + div { border-left: 1px solid var(--linea2); padding-left: 18px; }
.niveles .k { color: var(--champan); } .niveles .v { font-family: var(--mono); font-weight: 600; }
.niveles .v.tocado { color: var(--verde); } .niveles .v.tocado-sl { color: var(--rojo); }
.rr { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.rr .barra { flex: 1; height: 4px; border-radius: 2px; display: flex; overflow: hidden; position: relative; }
.rr .riesgo { background: var(--rojo); } .rr .premio { background: linear-gradient(90deg, #5c7a46, var(--verde)); }
.rr .marca-e { position: absolute; top: -3px; width: 2px; height: 10px; background: var(--hueso); }
.rr span { font-family: var(--mono); font-size: 11px; color: var(--gris); white-space: nowrap; } .rr b { color: var(--hueso); }
.estado { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; font-size: 10.5px; }
.chip { border: 1px solid var(--linea2); border-radius: 6px; padding: 3px 8px; color: var(--champan); font-family: var(--mono); }
.chip.ok { border-color: #2c6b45; color: var(--verde); } .chip.mal { border-color: #6b2c2c; color: var(--rojo); }
.chip.aviso { border-color: var(--oro2); color: var(--oro); } .chip.demo { border-style: dashed; color: var(--gris); }
.vacio { color: var(--gris); font-size: 14px; padding: 30px 0; text-align: center; line-height: 1.6; }

/* frase */
.frase { display: flex; align-items: center; gap: 16px; margin: 22px 0 10px; }
.frase .q { font-family: var(--serif); font-size: 56px; color: var(--oro); line-height: .6; padding-top: 18px; }
.frase p { border-left: 1px solid var(--oro2); padding-left: 16px; font-family: var(--serif); font-style: italic; font-size: 22px; }
.riesgo-aviso { font-size: 10.5px; color: var(--gris); line-height: 1.6; margin: 14px 0 6px; border-top: 1px solid var(--linea); padding-top: 12px; }

/* historial */
.semana-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-family: var(--mono); font-size: 12px; color: var(--champan); }
.semana-nav button { border: 1px solid var(--linea2); border-radius: 8px; width: 34px; height: 30px; color: var(--oro); }
.semana-nav button:disabled { opacity: .3; }
.totales { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.totales div { background: var(--panel); border: 1px solid var(--linea2); border-radius: 12px; padding: 12px; }
.totales span { font-size: 10px; letter-spacing: .2em; color: var(--gris); } .totales b { display: block; font-family: var(--serif); font-size: 34px; }
.fila-tipo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--linea); font-size: 13px; }
.fila-tipo .n { font-size: 10px; letter-spacing: .22em; font-weight: 500; }
.fila-tipo .c { font-family: var(--mono); font-size: 12px; text-align: right; }
.panel { background: var(--panel); border: 1px solid var(--linea2); border-radius: 12px; padding: 14px; margin-bottom: 12px; font-size: 13px; line-height: 1.6; color: var(--champan); }
.panel h3 { font-family: var(--serif); font-size: 22px; color: var(--hueso); font-weight: 600; margin-bottom: 4px; }
.btn { border: 1px solid var(--oro); color: var(--oro); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-top: 10px; }

/* navegación inferior */
nav.abajo { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom)); width: calc(100% - 24px); max-width: 456px; display: flex; background: rgba(15,14,12,.96); border: 1px solid var(--linea2); border-radius: 22px; padding: 10px 6px 8px; z-index: 10; }
nav.abajo button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 13px; color: var(--champan); position: relative; padding-bottom: 6px; }
nav.abajo svg { width: 26px; height: 26px; }
nav.abajo button.on { color: var(--oro); }
nav.abajo button.on::after { content: ''; position: absolute; bottom: 0; width: 60%; height: 3px; border-radius: 2px; background: var(--oro); }
[hidden] { display: none !important; }
@media (max-width: 380px) { .heroe .precio { font-size: 42px; } .anillo { width: 92px; height: 92px; } .franja { font-size: 11px; } }