/* =====================================================================
   OPTIONS INTELLIGENCE · WEB4.0 — Diseño "GRAFITO"
   =====================================================================
   Ni negro ni el blanco de finviz: gris azulado intermedio. Lo que se buscaba,
   tomado de finviz, es que quepan dieciocho oportunidades en pantalla en vez de
   tres, y que las cifras se comparen en vertical de un vistazo.

   Cuatro decisiones que gobiernan todo lo demás:

   1. **Densidad.** Base 13 px en vez de 15, filas apretadas, y la tabla sustituye
      a las tarjetas grandes. Se lee más rápido porque hay menos que recorrer.
   2. **El color solo significa.** Verde y rojo quedan reservados para dirección y
      para compra/venta de insiders. Nada decorativo lleva color: si algo está
      teñido, es porque quiere decir algo.
   3. **Cifras en monoespaciada y alineadas a la derecha.** Es lo que permite
      comparar una columna de precios sin leerla número a número.
   4. **Esquinas apenas redondeadas.** La versión anterior forzaba `border-radius:0`
      en todo, que se lee como austero pero también como viejo. 3 px basta para
      modernizar sin perder seriedad.
   ===================================================================== */

:root{
  /* --- superficies: grafito, gris azulado, nunca negro puro --- */
  --bg:        #1e232b;
  --bg-soft:   #212730;
  --panel:     #242a33;
  --panel-2:   #2a313b;
  --line:      #2f3742;
  --line-hot:  #3b4553;

  /* --- texto --- */
  --text:      #dfe3e8;
  --muted:     #9aa3b0;
  --faint:     #7b8593;

  --accent:    #cdd4dd;
  --accent-soft: rgba(205,212,221,.07);
  --accent-2:  #96a0ad;

  /* --- semánticos: los únicos colores con significado --- */
  --call:      #3bbd85;
  --call-strong: #4ecf94;
  --call-soft: rgba(78,207,148,.11);
  --put:       #de5871;
  --put-strong: #f0637a;
  --put-soft:  rgba(240,99,122,.11);
  --wait:      #cf9b3f;
  --wait-strong: #e6ad48;
  --wait-soft: rgba(230,173,72,.11);
  --danger:    #de5871;
  --spark:     #4aa8e0;
  --spark-soft: rgba(74,168,224,.14);

  /* La capa AI conserva su violeta: distingue lo interpretado de lo calculado. */
  --ai:        #8b7cf6;
  --ai-strong: #a897ff;
  --ai-line:   rgba(139,124,246,.34);

  --font:      -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  --mono:      ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  /* Escala de densidad. Cambiar estos tres reajusta el sitio entero. */
  --fs:        13px;
  --fs-sm:     11px;
  --fs-xs:     9.5px;
  --row-y:     7px;
  --r:         3px;
}

*{box-sizing:border-box}
/* La versión anterior forzaba esquinas rectas en todo con !important. Se quita el
   martillo y se pone un radio pequeño por defecto; los elementos que deben seguir
   siendo rectos (celdas de tabla, franjas) lo declaran ellos. */
button,input,select,textarea,.nx-card,.nx-chip,.thumb-card,.ai-result{border-radius:var(--r)}
html{scroll-behavior:smooth}
body.nx-body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:var(--fs);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none!important}
a{color:var(--accent);text-decoration:none}
small{color:var(--muted)}
::selection{background:var(--accent);color:#101113}

/* ============================== TOPBAR ============================== */
.nx-topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(16,17,19,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-hot);
}
.nx-topbar-inner{
  max-width:1560px;margin:0 auto;padding:10px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.nx-identity{display:flex;align-items:center;gap:12px;min-width:0}
.nx-logo{
  width:40px;height:40px;overflow:hidden;flex:0 0 auto;
  border:1px solid var(--line-hot);
  display:grid;place-items:center;background:var(--panel-2);
}
.nx-logo img{width:100%;height:100%;object-fit:cover;display:block}
.nx-logo span{display:none;font-weight:700;color:var(--accent);font-size:15px;font-family:var(--mono)}
.nx-identity-copy{display:flex;flex-direction:column;min-width:0}
.nx-name{font-weight:700;letter-spacing:.8px;font-size:13.5px;white-space:nowrap}
.nx-role{color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-topbar-meta,.nx-footer-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nx-chip{
  display:inline-flex;align-items:center;
  border:1px solid var(--line-hot);
  background:var(--panel);color:var(--muted);
  font-size:11px;letter-spacing:.5px;font-weight:600;
  padding:5px 12px;font-family:var(--mono);
}
.nx-chip b{color:var(--text);font-weight:700}
.nx-version{color:#101113;background:var(--accent);border-color:var(--accent);font-weight:700}
.nx-version b{color:#101113}
.nx-health{color:var(--call)}
.nx-admin{color:var(--text);border-color:var(--line-hot);transition:.15s}
.nx-admin:hover{border-color:var(--accent);background:var(--accent-soft)}

/* ======================= SHELL: SIDEBAR + MAIN ====================== */
.nx-shell{
  max-width:1560px;margin:0 auto;padding:20px 22px 50px;
  display:grid;grid-template-columns:330px minmax(0,1fr);gap:20px;
  align-items:start;
}
.nx-right{min-width:0;display:grid;gap:16px;align-content:start}

/* ----------------------------- SIDEBAR ----------------------------- */
.nx-sidebar{
  position:sticky;top:76px;
  display:grid;gap:14px;
  max-height:calc(100vh - 96px);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line-hot) transparent;
}
.nx-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-top:2px solid var(--accent);
  padding:16px;
}
.nx-card-h{
  margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--text);font-family:var(--mono);
  padding-bottom:10px;border-bottom:1px solid var(--line);
}
.nx-label{
  display:block;font-size:11px;font-weight:600;letter-spacing:.6px;
  color:var(--muted);margin:12px 0 5px;text-transform:uppercase;
}
.nx-label:first-of-type{margin-top:0}
.nx-label small{color:var(--faint);font-weight:500;text-transform:none;letter-spacing:.2px}

textarea,input[type=number],input[type=text]{
  width:100%;background:var(--bg-soft);border:1px solid var(--line-hot);
  color:var(--text);
  font-family:var(--mono);font-size:14px;padding:9px 11px;outline:none;
  transition:border-color .15s;
}
textarea:focus,input:focus{border-color:var(--accent)}
textarea{resize:vertical;min-height:52px}

/* Presupuesto y tiempo */
.nx-money-input{position:relative;display:flex;align-items:center}
.nx-money-input span{position:absolute;left:11px;font-family:var(--mono);color:var(--accent);font-weight:700;font-size:15px}
.nx-money-input input{padding-left:25px;font-size:17px;font-weight:700}
.nx-dte-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.nx-dte-fields input{font-weight:700;text-align:center}
.nx-preset{
  width:auto;margin-top:10px;
  border:1px dashed var(--line-hot);background:transparent;color:var(--muted);
  font-family:var(--mono);font-size:11px;font-weight:600;
  padding:8px 10px;cursor:pointer;transition:.15s;
}
.nx-preset:hover{border-color:var(--accent);color:var(--accent)}

/* Guía DTE: zonas coloreadas por calidad, igual que la barra de horas */
.dte-guide{margin-top:14px}
.dte-track-wrap{padding-top:24px}
.dte-track{position:relative;height:14px;display:flex;background:var(--bg-soft);border:1px solid var(--line-hot);box-shadow:0 0 12px rgba(0,0,0,.45) inset}
.dte-zone{height:100%;opacity:1}
.dte-zone.ultra{flex-grow:7;background:var(--put-strong)}          /* 1–7 días: theta brutal */
.dte-zone.short{flex-grow:13;background:var(--wait-strong)}        /* 8–20 días: apurado */
.dte-zone.starter{flex-grow:25;background:var(--call-strong)}      /* 21–45: balanceado */
.dte-zone.medium{flex-grow:45;background:#2c9b76}           /* 46–90: aceptable */
.dte-zone.long{flex-grow:90;background:var(--wait-strong)}         /* 91+: prima cara */
.dte-selected-range{
  position:absolute;top:-3px;height:18px;
  background:transparent;border-left:2px solid var(--text);border-right:2px solid var(--text);
  box-shadow:inset 0 0 0 9999px rgba(232,233,234,.18);
}
.dte-zone-labels{display:flex;margin-top:5px}
.dte-zone-labels span{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.3px;color:var(--faint);
  text-align:center;overflow:hidden;white-space:nowrap;
}
.dte-zone-labels span.good{color:var(--call);font-weight:700}
.dte-zone-labels span.bad{color:var(--put)}
.dte-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:7px;font-size:10px;color:var(--faint);font-family:var(--mono)}
.dte-legend i{display:inline-block;width:8px;height:8px;margin-right:5px;vertical-align:middle}
.dte-legend .good i{background:var(--call-strong)}
.dte-legend .mid i{background:var(--wait-strong)}
.dte-legend .bad i{background:var(--put-strong)}
.dte-marker{
  position:absolute;top:-24px;transform:translateX(-50%);
  background:var(--panel-2);border:1px solid var(--line-hot);
  padding:0 6px;font-family:var(--mono);font-size:10.5px;color:var(--text);
  white-space:nowrap;z-index:2;line-height:1.7;
}
.dte-marker.min{border-bottom:2px solid var(--accent)}
.dte-marker.max{border-bottom:2px solid var(--accent-2)}
.dte-sliders{margin-top:12px;display:grid;gap:6px}
.dte-slider-row{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:center}
.dte-slider-label{display:flex;justify-content:space-between;gap:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:1px;color:var(--faint)}
.dte-slider-label strong{color:var(--text);font-size:10.5px}
input[type=range].dte-range-slider{
  -webkit-appearance:none;appearance:none;width:100%;height:3px;background:var(--line-hot);outline:none;
}
input[type=range].dte-range-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:12px;height:16px;
  background:var(--accent);cursor:pointer;border:1px solid var(--bg);
}
input[type=range].dte-range-slider.max::-webkit-slider-thumb{background:var(--accent-2)}
input[type=range].dte-range-slider::-moz-range-thumb{width:12px;height:16px;background:var(--accent);border:1px solid var(--bg);cursor:pointer}
.dte-scale{display:none}
.dte-advice{margin-top:10px;font-size:12px;color:var(--muted)}
.dte-advice:empty{display:none}

/* Dirección */
.direction-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.direction-choice{
  position:relative;cursor:pointer;border:1px solid var(--line-hot);
  background:var(--bg-soft);padding:9px 6px;text-align:center;
  transition:.15s;user-select:none;
}
.direction-choice input{position:absolute;opacity:0;pointer-events:none}
.direction-choice span{font-weight:700;font-size:11.5px;letter-spacing:1px;font-family:var(--mono);color:var(--muted)}
.direction-choice small{display:none}
.direction-choice:hover{border-color:var(--accent)}
.direction-choice.auto.active{border-color:var(--accent);background:var(--accent-soft)}
.direction-choice.auto.active span{color:var(--accent)}
.direction-choice.call.active{border-color:var(--call);background:var(--call-soft)}
.direction-choice.call.active span{color:var(--call)}
.direction-choice.put.active{border-color:var(--put);background:var(--put-soft)}
.direction-choice.put.active span{color:var(--put)}
.nx-direction-note{margin-top:10px;font-size:12px;color:var(--muted);border-left:2px solid var(--line-hot);padding:4px 10px}

/* Filtros del contrato (siempre visibles) */
.nx-filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nx-field small{display:block;margin-top:4px;font-size:10.5px;color:var(--faint)}

/* Botones */
.analysis-actions{display:flex;gap:10px;flex-wrap:wrap}
.analysis-actions button{
  position:relative;overflow:hidden;
  border:none;cursor:pointer;width:auto;min-width:150px;flex:1;
  text-align:left;padding:12px 16px;transition:.18s;
}
.analysis-actions .btn-main{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--font);font-weight:800;font-size:13.5px;letter-spacing:.3px;
}
.analysis-actions .btn-main i{font-style:normal;font-family:var(--mono);transition:transform .2s}
.analysis-actions .btn-sub{display:block;margin-top:2px;font-size:10.5px;opacity:.75}
#scanButton{background:var(--accent);color:#101113}
#scanButton:hover{background:#fff}
#scanButton:hover .btn-main i{transform:translateX(4px)}
#scanButton::after{
  content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transition:left .5s;
}
#scanButton:hover::after{left:120%}
#sweepButton{background:transparent;color:var(--text);border:1px solid var(--line-hot)}
#sweepButton:hover{border-color:var(--accent)}
#sweepButton:hover .btn-main i{transform:rotate(90deg)}
#sweepButton .btn-sub{color:var(--faint)}
.analysis-actions button:disabled{opacity:.45;cursor:wait}

.nx-rule{margin:0;color:var(--faint);font-size:11.5px;line-height:1.5}
.nx-rule strong{color:var(--wait)}

/* --------------------------- CONTENIDO ----------------------------- */
.nx-content{min-width:0;display:grid;gap:16px;align-content:start;justify-items:stretch}
.nx-content-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:14px;
}
.nx-content-head h1{margin:0;font-size:21px;font-weight:700;letter-spacing:-.2px}
.nx-content-head p{margin:4px 0 0;color:var(--muted);font-size:13px}

.summary{
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  padding:12px 18px;color:var(--muted);font-size:13.5px;
}
.summary strong{color:var(--text)}
.loading{
  display:flex;align-items:center;gap:14px;color:var(--muted);
  background:var(--panel);border:1px solid var(--line);
  padding:16px 20px;font-size:13.5px;
}
.spinner{
  width:18px;height:18px;flex:0 0 auto;
  border:2px solid var(--line-hot);border-top-color:var(--accent);
  animation:nx-spin .7s linear infinite;
}
@keyframes nx-spin{to{transform:rotate(360deg)}}
.error-box{
  background:var(--put-soft);border:1px solid var(--line);border-left:3px solid var(--put);
  color:var(--muted);padding:11px 16px;margin:0 0 8px;font-size:13px;
}
.error-box strong{color:var(--put)}
.empty{text-align:center;color:var(--muted);padding:40px 20px;border:1px dashed var(--line-hot)}

/* Franja de índices (solo desktop): cada índice en su cajita, sin cortar texto */
.nx-indices{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;
}
.nx-index{
  display:flex;flex-direction:column;gap:5px;min-width:0;
  border:1px solid var(--line);border-top:2px solid var(--spark);
  background:var(--panel);padding:9px 12px;font-family:var(--mono);
}
.nx-index.up{border-top-color:var(--call)}
.nx-index.down{border-top-color:var(--put)}
.nx-index-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.nx-index-top b{
  font-size:9.5px;letter-spacing:1px;color:var(--faint);font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nx-index-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.nx-index-val{font-size:15px;font-weight:700;color:var(--text);white-space:nowrap}
.nx-index-chg{font-size:10.5px;font-weight:700;white-space:nowrap;flex:0 0 auto}
.nx-index-chg.up{color:var(--call)}
.nx-index-chg.down{color:var(--put)}
.nx-index-spark{
  width:46px;height:20px;display:block;flex:0 0 auto;
  border:1px solid var(--line);background:var(--bg-soft);padding:1px;
}
.nx-indices-loading{font-size:11px;color:var(--faint);font-family:var(--mono)}

/* Presets de presupuesto */
.money-presets{display:flex;gap:6px;margin-top:8px}
.money-preset{
  flex:1;border:1px solid var(--line-hot);background:var(--bg-soft);color:var(--muted);
  font-family:var(--mono);font-size:12px;font-weight:700;padding:7px 0;cursor:pointer;transition:.15s;
}
.money-preset:hover{border-color:var(--accent);color:var(--text)}
.money-preset.active{background:var(--accent);border-color:var(--accent);color:#101113}

/* Mejor hora para escanear */
.nx-hours-best{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.nx-hours-best strong{color:var(--call);font-family:var(--mono)}
.hours-labels{display:flex;margin-top:4px}
.hours-labels span{font-family:var(--mono);font-size:9px;letter-spacing:.4px;color:var(--faint);text-align:center;overflow:hidden;white-space:nowrap}
.hours-labels span.good{color:var(--call);font-weight:700}
.nx-hours-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.nx-hours-now{font-family:var(--mono);font-size:12px;font-weight:700}
.nx-hours-now.good{color:var(--call)}
.nx-hours-now.mid{color:var(--wait)}
.nx-hours-now.bad{color:var(--put)}
.hours-bar{position:relative;display:flex;height:16px;margin:18px 0 6px;border:1px solid var(--line-hot);box-shadow:0 0 14px rgba(0,0,0,.45) inset}
.hours-seg{height:100%;opacity:1}
.hours-seg.good{background:var(--call-strong)}
.hours-seg.mid{background:var(--wait-strong)}
.hours-seg.bad{background:var(--put-strong)}
.hours-arrow{
  position:absolute;top:-12px;transform:translateX(-50%);z-index:2;
  width:0;height:0;border:8px solid transparent;border-top-color:#fff;border-bottom:none;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.85));
}
.hours-scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;color:var(--faint)}
.hours-legend{display:flex;gap:14px;margin-top:8px;flex-wrap:wrap;font-size:10.5px;color:var(--faint)}
.hours-legend i{display:inline-block;width:9px;height:9px;margin-right:5px;vertical-align:middle}
.hours-legend .good i{background:var(--call-strong)}
.hours-legend .mid i{background:var(--wait-strong)}
.hours-legend .bad i{background:var(--put-strong)}
.nx-hours-advice{margin:10px 0 0;font-size:12.5px;color:var(--muted);line-height:1.55}

/* Barras dentro de scores compactos */
.thumb-score .meter{height:4px;margin-top:7px}
.thumb-score .meter-fill{border-right-width:2px}
.option-score .score-gauge{min-width:120px;max-width:170px;margin:10px auto 0}
.preferred-detail .meter{max-width:260px;margin-top:8px}

/* ------------------------ TARJETAS RESULTADO ------------------------ */
.thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:12px}
.thumb-card{
  position:relative;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);
  padding:14px;transition:border-color .15s;
  display:flex;flex-direction:column;gap:0;
}
.thumb-card:hover{border-color:var(--accent)}
.thumb-card.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.thumb-card.call{border-top:2px solid var(--call)}
.thumb-card.put{border-top:2px solid var(--put)}
.thumb-card.wait{border-top:2px solid var(--wait)}

/* Cinta de mejor oportunidad: bloque propio, nunca tapa el contenido */
.preferred-badge{
  position:static;display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  margin:-14px -14px 12px;padding:6px 14px;
  background:var(--accent);color:#0c1015;
}
.preferred-badge span{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:1.2px}
.preferred-badge small{color:rgba(12,16,21,.75);font-family:var(--mono);font-size:9.5px;font-weight:600}
.preferred-badge.watch{background:var(--wait)}

.thumb-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.thumb-symbol{font-family:var(--mono);font-weight:800;font-size:18px;letter-spacing:.5px}
.thumb-price{font-size:12px;color:var(--muted);font-family:var(--mono);margin-top:2px}
.thumb-price small{color:var(--faint);font-family:var(--font)}
.thumb-bias{font-size:11px;color:var(--faint);margin-top:2px}
.thumb-score{
  font-family:var(--mono);font-weight:800;font-size:20px;
  background:var(--bg-soft);border:1px solid var(--line);
  min-width:52px;text-align:center;padding:7px 9px;flex:0 0 auto;
}
.thumb-card.call .thumb-score{color:var(--call)}
.thumb-card.put .thumb-score{color:var(--put)}
.thumb-card.wait .thumb-score{color:var(--wait)}
.thumb-chart{margin:10px -2px}
.sparkline-svg{width:100%;height:64px;display:block}
.spark-grid line{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4}
.thumb-affordability{display:grid;gap:8px;margin-bottom:10px}
.thumb-minimum{display:flex;flex-direction:column;gap:2px;border-bottom:1px dotted var(--line);padding-bottom:6px}
.thumb-minimum>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.thumb-minimum span{font-size:9.5px;letter-spacing:.6px;color:var(--faint);font-weight:600;text-transform:uppercase}
.thumb-minimum strong{font-family:var(--mono);font-size:13.5px;font-weight:700}
.thumb-minimum small{font-size:10.5px;color:var(--faint);line-height:1.45}
.thumb-minimum.affordable strong{color:var(--call)}
.thumb-minimum.unaffordable strong{color:var(--put)}
.thumb-minimum.unavailable{color:var(--faint)}
.thumb-status{
  margin-top:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:1px;color:var(--faint);
  border-top:1px solid var(--line);padding-top:8px;
}

/* ------------------------- VISTA DE DETALLE ------------------------- */
#detailView{display:grid;gap:16px}
.result-card{
  background:var(--panel);border:1px solid var(--line);
  padding:24px;
}
.result-card h3{
  margin:26px 0 4px;font-size:17px;font-weight:700;letter-spacing:-.2px;
}
.result-card h4{margin:18px 0 8px;font-size:14px;font-weight:700;color:var(--text)}
.card-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px;
}
.ticker{font-family:var(--mono);font-weight:800;font-size:25px;letter-spacing:.5px}
.description,.company-info{color:var(--muted);font-size:13px;margin-top:2px}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.badge,.pill{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.8px;
  padding:4px 10px;border:1px solid var(--line-hot);
  background:var(--bg-soft);color:var(--muted);text-transform:uppercase;
}
.badge.call,.pill.call{color:var(--call);border-color:var(--call);background:var(--call-soft)}
.badge.put,.pill.put{color:var(--put);border-color:var(--put);background:var(--put-soft)}
.badge.wait,.pill.wait{color:var(--wait);border-color:var(--wait);background:var(--wait-soft)}
.pill.preferred-pill{color:#0c1015;background:var(--accent);border-color:var(--accent)}
.preferred-detail{padding:12px 16px;margin:10px 0;font-size:13px;color:var(--muted);background:var(--bg-soft)}
.preferred-detail.opportunity{border-left:3px solid var(--accent)}
.preferred-detail.watch{border-left:3px solid var(--wait)}
.confidence-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.confidence-chip{
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.8px;
  padding:3px 9px;background:var(--bg-soft);border:1px solid var(--line-hot);color:var(--accent);
}
.grade{
  font-family:var(--mono);font-weight:600;font-size:9.5px;letter-spacing:.8px;
  color:var(--faint);text-transform:uppercase;white-space:nowrap;
}

/* Métricas: etiqueta arriba, valor grande debajo, nota a la derecha */
.metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:10px;margin:14px 0}
.card-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:20px;margin:14px 0;align-items:start}
.metric{background:var(--bg-soft);border:1px solid var(--line);padding:12px 14px}
.metric-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px}
.metric-head>div:first-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.metric-head span{font-size:10px;letter-spacing:.8px;color:var(--faint);font-weight:600;text-transform:uppercase}
.metric-head strong{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--text)}
.meter{
  position:relative;height:9px;overflow:visible;margin-top:8px;
  background:linear-gradient(90deg,var(--put-strong) 0%,var(--wait-strong) 42%,var(--call-strong) 100%);
  box-shadow:0 0 10px rgba(0,0,0,.5) inset;
}
.meter-fill{
  height:100%;background:rgba(0,0,0,.55);
  border-right:3px solid #fff;
  box-shadow:0 0 8px rgba(255,255,255,.7);
  margin-left:auto;position:absolute;right:0;top:0;
}

/* Recomendación */
.recommendation{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--bg-soft);padding:14px 18px;margin:14px 0}
.rec-line{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin:4px 0}
.rec-tag{
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:1px;
  padding:3px 9px;text-transform:uppercase;border:1px solid;
}
.rec-tag.call{color:var(--call);border-color:var(--call);background:var(--call-soft)}
.rec-tag.put{color:var(--put);border-color:var(--put);background:var(--put-soft)}
.rec-tag.wait{color:var(--wait);border-color:var(--wait);background:var(--wait-soft)}
.analysis{color:var(--muted);font-size:13.5px}
.analysis strong{color:var(--text)}
.warning,.filter-warning{
  border-left:3px solid var(--wait);background:var(--wait-soft);
  color:var(--muted);padding:9px 14px;margin:8px 0;font-size:12.5px;
}

/* Gráficas */
.chart-stack{display:grid;gap:16px;margin:16px 0}
.chart-panel{position:relative;background:var(--bg-soft);border:1px solid var(--line);padding:16px;overflow:hidden}
.chart-panel.outcome-gain{border:2px solid var(--call-strong);box-shadow:inset 0 0 0 1px rgba(53,227,156,.16)}
.chart-panel.outcome-loss{border:2px solid var(--put-strong);box-shadow:inset 0 0 0 1px rgba(255,95,120,.16)}
.chart-panel.outcome-neutral{border:2px solid var(--wait-strong);box-shadow:inset 0 0 0 1px rgba(255,183,49,.14)}
.chart-panel.outcome-gain .chart-kicker{color:var(--call-strong)}
.chart-panel.outcome-loss .chart-kicker{color:var(--put-strong)}
.chart-panel.outcome-neutral .chart-kicker{color:var(--wait-strong)}
.chart-kicker{
  font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--accent);font-weight:700;
  text-transform:uppercase;margin-right:8px;
}
.chart-toolbar{
  display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:10px;
}
.chart-fullscreen-button,[data-chart-fullscreen]{
  border:1px solid var(--line-hot);background:var(--panel-2);color:var(--muted);
  font-family:var(--mono);font-size:10px;letter-spacing:1px;
  padding:6px 12px;cursor:pointer;transition:.15s;text-transform:uppercase;
}
.chart-fullscreen-button:hover,[data-chart-fullscreen]:hover{border-color:var(--accent);color:var(--accent)}
.chart{width:100%}
.chart-panel.is-fullscreen{padding:8px;background:#090c10;border:none}
.chart-panel.is-fullscreen .chart-guide,
.chart-panel.is-fullscreen .chart-level-strip,
.chart-panel.is-fullscreen .chart-toolbar{display:none}
.chart-panel:fullscreen .modebar-container{display:none!important}
.chart-panel:fullscreen{background:#090c10}
.fullscreen-exit{
  position:fixed;top:14px;right:16px;z-index:99;
  border:1px solid var(--line-hot);background:rgba(12,16,21,.95);color:var(--text);
  font-family:var(--mono);font-size:16px;
  width:36px!important;height:36px;padding:0;display:grid;place-items:center;cursor:pointer;
}
.chart-guide{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.chart-guide-head{font-size:12.5px;color:var(--muted);margin-bottom:8px}
.chart-guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.guide-card{
  background:var(--panel-2);border:1px solid var(--line);padding:10px 12px;
  display:flex;flex-direction:column;gap:4px;
}
.guide-card strong{font-size:12px;color:var(--text)}
.guide-card span{font-size:11.5px;color:var(--muted);line-height:1.5}
.chart-level-strip{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.chart-level-strip>*{
  font-family:var(--mono);font-size:10.5px;
  background:var(--panel-2);border:1px solid var(--line);
  padding:5px 10px;color:var(--muted);
}
.chart-level.placeholder{opacity:.45}

/* Contratos */
.option-list{display:grid;gap:12px;margin:14px 0}
.option-card{background:var(--bg-soft);border:1px solid var(--line);padding:18px;transition:.15s}
.option-card:hover{border-color:var(--accent)}
.option-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.contract{font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:.4px}
.option-score{text-align:center;background:var(--panel-2);border:1px solid var(--line-hot);padding:8px 14px}
.option-score-number{font-family:var(--mono);font-weight:800;font-size:19px;color:var(--accent)}
.option-metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:10px}
.option-education{margin-top:12px;border-top:1px dashed var(--line-hot);padding-top:12px;font-size:12.5px;color:var(--muted)}
.option-education-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:8px}

/* Tarjetas de proyección: etiqueta / valor / descripción en columna */
.projection-panel{border:1px solid var(--line);background:var(--bg-soft);padding:18px;margin:14px 0}
.projection-panel.call{border-left:3px solid var(--call)}
.projection-panel.put{border-left:3px solid var(--put)}
.projection-panel.wait{border-left:3px solid var(--wait)}
.projection-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin-bottom:10px;border-bottom:1px solid var(--line);padding-bottom:10px;
}
.projection-summary{color:var(--muted);font-size:13.5px;line-height:1.6}
.projection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px;margin-top:12px}
.projection-grid.one{grid-template-columns:1fr}
.projection-card{
  background:var(--panel-2);border:1px solid var(--line);padding:13px 15px;
  display:flex;flex-direction:column;gap:5px;
}
.projection-card small{font-size:10px;letter-spacing:.8px;color:var(--faint);font-weight:600;text-transform:uppercase}
.projection-card strong{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--text)}
.projection-card span{font-size:11.5px;color:var(--muted);line-height:1.5}
.projection-card.emphasis{border-color:var(--accent);border-left-width:3px}
.projection-card.profit{border-left:3px solid var(--call)}
.projection-card.target-pnl.positive{border-left:3px solid var(--call)}
.projection-card.target-pnl.positive strong{color:var(--call)}
.projection-card.target-pnl.negative{border-left:3px solid var(--put)}
.projection-card.target-pnl.negative strong{color:var(--put)}
.projection-card.target-pnl.neutral{border-left:3px solid var(--wait)}
.projection-card.target-pnl.neutral strong{color:var(--wait)}

/* Simulación histórica */
.history-simulation{border:1px solid var(--line);background:var(--bg-soft);padding:18px;margin:14px 0}
.history-simulation.unavailable{opacity:.7}
.simulation-head{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline;
  border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:12px;
}
.simulation-kicker{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--accent);font-weight:700;text-transform:uppercase}
.simulation-budget{font-family:var(--mono);color:var(--muted);font-size:12px}
.simulation-contract-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin:12px 0}
.simulation-contract-grid>div{
  background:var(--panel-2);border:1px solid var(--line);padding:10px 12px;
  display:flex;flex-direction:column;gap:3px;
}
.simulation-contract-grid small{font-size:9.5px;letter-spacing:.6px;color:var(--faint);font-weight:600;text-transform:uppercase}
.simulation-contract-grid strong{font-family:var(--mono);font-size:14.5px;font-weight:700}
.simulation-explain,.simulation-note{color:var(--muted);font-size:13px;line-height:1.6}
.realized-result{font-family:var(--mono);font-weight:700}
.realized-result.no-trade{color:var(--faint)}

/* Ecuación de capital: cajas iguales, centradas, valor protagonista */
.historical-equation{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin:14px 0}
.equation-card{
  flex:1;min-width:160px;background:var(--panel-2);border:1px solid var(--line);
  padding:14px 16px;text-align:center;
  display:flex;flex-direction:column;gap:5px;justify-content:center;
}
.equation-card small{font-size:9.5px;letter-spacing:1px;color:var(--faint);font-weight:700;text-transform:uppercase}
.equation-card strong{font-family:var(--mono);font-size:20px;font-weight:800;color:var(--text)}
.equation-card span{font-size:11px;color:var(--muted);line-height:1.4}
.equation-card.capital{border-top:2px solid var(--accent)}
.equation-card.total{border-top:2px solid var(--accent-2)}
.equation-card.positive,.equation-card.gain{background:var(--call-soft);border-color:var(--call)}
.equation-card.positive strong,.equation-card.gain strong{color:var(--call)}
.equation-card.negative,.equation-card.loss{background:var(--put-soft);border-color:var(--put)}
.equation-card.negative strong,.equation-card.loss strong{color:var(--put)}
.equation-card.neutral{background:var(--wait-soft);border-color:var(--wait)}
.equation-card.neutral strong{color:var(--wait)}
.target-profit-panel.positive .target-profit-result strong{color:var(--call)}
.target-profit-panel.negative .target-profit-result strong{color:var(--put)}
.target-profit-panel.neutral .target-profit-result strong{color:var(--wait)}
.equation-operator{align-self:center;font-size:20px;font-weight:700;color:var(--faint);font-family:var(--mono)}
.equation-detail{font-size:11px;color:var(--faint);margin-top:2px}

/* Escenarios y score */
.scenario-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:12px 0}
.scenario-box{
  background:var(--panel-2);border:1px solid var(--line);padding:12px 14px;
  display:flex;flex-direction:column;gap:4px;
}
.scenario-stat{font-family:var(--mono);font-weight:800;font-size:16px}
.scenario-caption{font-size:11px;color:var(--faint)}
.score-box{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:12px 0}
.score-header{font-family:var(--mono);font-size:10px;letter-spacing:1.2px;color:var(--faint);font-weight:700;text-transform:uppercase}
.score-gauge{
  position:relative;flex:1;min-width:200px;max-width:340px;height:10px;
  background:linear-gradient(90deg,var(--put-strong) 0%,var(--wait-strong) 42%,var(--call-strong) 100%);
  margin-top:10px;box-shadow:0 0 12px rgba(0,0,0,.45) inset;
}
.gauge-arrow{
  position:absolute;top:-10px;transform:translateX(-50%);
  width:0;height:0;border:8px solid transparent;border-top-color:#fff;border-bottom:none;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.8));transition:left .4s;
}
.gauge-labels{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;color:var(--faint)}
.score-value{font-family:var(--mono);font-weight:800;font-size:24px}
.score-caption{font-size:11.5px;color:var(--muted)}

/* Resultado al objetivo / payoff */
.target-profit-head{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-end;
  margin-bottom:12px;border-bottom:1px solid var(--line);padding-bottom:12px;
}
.target-profit-head>div{display:flex;flex-direction:column;gap:4px}
.target-profit-head small{font-size:9.5px;letter-spacing:1px;color:var(--faint);font-weight:700;text-transform:uppercase}
.target-profit-head strong{font-family:var(--mono);font-size:18px;font-weight:800}
.target-profit-result{text-align:right}
.target-profit-grid,.target-profit-grid.six{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:10px;margin:12px 0}
.target-profit-grid>div{
  background:var(--panel-2);border:1px solid var(--line);padding:11px 13px;
  display:flex;flex-direction:column;gap:4px;
}
.target-profit-grid>div small{font-size:9.5px;letter-spacing:.6px;color:var(--faint);font-weight:600;text-transform:uppercase}
.target-profit-grid>div strong{font-family:var(--mono);font-size:15px;font-weight:700}
.target-profit-panel{background:var(--bg-soft);border:1px solid var(--line);padding:18px 20px;margin:14px 0}
.target-profit-panel.positive{border-left:3px solid var(--call)}
.target-profit-panel.negative{border-left:3px solid var(--put)}
.target-profit-panel.neutral{border-left:3px solid var(--wait)}
.target-profit-panel.reference{border-style:dashed}
.payoff-wrap{background:var(--panel-2);border:1px solid var(--line);padding:12px;margin:12px 0}
.payoff-svg{width:100%;display:block}
.payoff-marker{font-family:var(--mono);font-size:10px}
.swatch{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:middle}
.swatch.actual{background:var(--accent)}
.swatch.breakeven{background:var(--wait)}
.swatch.strike{background:var(--accent-2)}

/* Explicaciones: párrafos y listas legibles */
.result-card p{margin:10px 0;line-height:1.65;color:var(--muted)}
.result-card p strong{color:var(--text)}
.result-card ul{margin:12px 0;padding-left:20px;display:grid;gap:6px}
.result-card li{color:var(--muted);line-height:1.55}
.result-card li strong,.result-card li b{color:var(--text);font-family:var(--mono)}

/* Franja de proyección bajo la gráfica */
.projection-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;
  margin-top:12px;border-top:1px solid var(--line);padding-top:12px;
}
.projection-strip>div{
  background:var(--panel-2);border:1px solid var(--line);padding:9px 12px;
  display:flex;flex-direction:column;gap:3px;
}
.projection-strip>div small{font-size:9px;letter-spacing:.7px;color:var(--faint);font-weight:700;text-transform:uppercase}
.projection-strip>div strong{font-family:var(--mono);font-size:13px;font-weight:700;white-space:nowrap}
.projection-strip.positive>div:first-child{border-left:3px solid var(--call)}
.projection-strip.negative>div:first-child{border-left:3px solid var(--put)}
.projection-strip.neutral>div:first-child{border-left:3px solid var(--wait)}
.projection-strip strong.positive{color:var(--call)}
.projection-strip strong.negative{color:var(--put)}
.projection-strip strong.neutral{color:var(--wait)}
.chart-panel.is-fullscreen .projection-strip{display:none}

/* Estados genéricos */
.negative{color:var(--put)}
.positive{color:var(--call)}
.caution{color:var(--wait)}
.danger{color:var(--danger)}

/* =============================== PIE ================================ */
.nx-footer{border-top:1px solid var(--line-hot);background:var(--panel);margin-top:30px}
.nx-footer-inner{
  max-width:1560px;margin:0 auto;padding:24px 22px 30px;
  display:grid;grid-template-columns:auto auto;gap:16px;align-items:center;justify-content:space-between;
}
.nx-disclaimer{
  grid-column:1 / -1;margin:4px 0 0;color:var(--faint);font-size:11.5px;line-height:1.6;
  border-top:1px solid var(--line);padding-top:14px;
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1120px){
  .nx-shell{grid-template-columns:1fr}
  .nx-indices{display:none}
  .nx-right{order:-1}
  #scanHours{order:-1}
  .nx-sidebar{position:static;max-height:none;overflow:visible}
}
@media (max-width: 1250px){
  .card-grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  body.nx-body{font-size:14px}
  .nx-topbar-inner{justify-content:center;padding:8px 12px}
  .nx-role{display:none}
  .nx-shell{padding:12px 12px 40px}
  .nx-content-head h1{font-size:18px}
  .result-card{padding:14px}
  .nx-footer-inner{grid-template-columns:1fr;justify-items:center;text-align:center}
  .thumb-grid{grid-template-columns:1fr 1fr}
  .nx-filter-grid{grid-template-columns:1fr 1fr}
  .projection-strip{grid-template-columns:1fr 1fr}
  .historical-equation{flex-direction:column}
  .equation-operator{transform:rotate(90deg)}
  .metrics{grid-template-columns:1fr 1fr}
  .target-profit-grid,.target-profit-grid.six{grid-template-columns:1fr 1fr}
  .simulation-contract-grid{grid-template-columns:1fr 1fr}
  input[type=number],textarea{font-size:16px} /* evita zoom automático de iOS */
}
@media (max-width: 480px){
  .thumb-grid{grid-template-columns:1fr}
  .nx-topbar-meta{gap:5px}
  .nx-chip{padding:4px 8px;font-size:10px}
  .projection-strip{grid-template-columns:1fr}
  .card-head{flex-direction:column}
}


/* =============================== ADMIN ============================== */
.admin-body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
.simulation-kicker{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--accent);font-weight:700;text-transform:uppercase}

/* Login */
.admin-login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.admin-login-card{
  width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);
  border-top:2px solid var(--accent);padding:34px 32px;text-align:center;
}
.admin-login-logo{width:74px;height:74px;margin:0 auto 16px;overflow:hidden;border:1px solid var(--line-hot);display:grid;place-items:center;background:var(--panel-2)}
.admin-login-logo img{width:100%;height:100%;object-fit:cover;display:block}
.admin-login-logo span{display:none;font-family:var(--mono);font-weight:800;font-size:22px;color:var(--accent)}
.admin-login-card h1{margin:8px 0 4px;font-size:26px;letter-spacing:2px;font-family:var(--mono)}
.admin-login-card p{margin:0 0 20px;color:var(--muted);font-size:12.5px}
.admin-login-form{display:grid;gap:10px;text-align:left}
.admin-login-form label{font-size:10.5px;letter-spacing:1px;color:var(--muted);font-weight:700;text-transform:uppercase}
.password-field{position:relative;display:flex;align-items:center}
.password-field input{width:100%;background:var(--bg-soft);border:1px solid var(--line-hot);color:var(--text);font-family:var(--mono);font-size:15px;padding:11px 42px 11px 12px;outline:none}
.password-field input:focus{border-color:var(--accent)}
.password-toggle{position:absolute;right:6px;background:none;border:none;cursor:pointer;padding:6px;display:grid;place-items:center}
.password-toggle svg{width:18px;height:18px;fill:none;stroke:var(--faint);stroke-width:1.6}
.password-toggle:hover svg{stroke:var(--text)}
.admin-login-submit{
  margin-top:6px;border:none;background:var(--accent);color:#101113;cursor:pointer;
  font-weight:800;font-size:13.5px;letter-spacing:.5px;padding:12px;transition:.15s;
}
.admin-login-submit:hover{background:#fff}
.admin-login-submit:disabled{opacity:.5}
.admin-login-error{margin-top:14px;background:var(--put-soft);border:1px solid var(--put);border-left:3px solid var(--put);color:#e6aab4;padding:10px 14px;font-size:12.5px;text-align:left}
.admin-back-link{display:inline-block;margin-top:18px;color:var(--muted);font-size:12.5px}
.admin-back-link:hover{color:var(--accent)}

/* Panel */
.brand-strip.admin-topbar{
  position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  background:rgba(16,17,19,.94);border-bottom:1px solid var(--line-hot);padding:10px 22px;
}
.brand-left{display:flex;align-items:center;gap:12px}
.brand-logo{width:40px;height:40px;overflow:hidden;border:1px solid var(--line-hot);display:grid;place-items:center;background:var(--panel-2);flex:0 0 auto}
.brand-logo img{width:100%;height:100%;object-fit:cover;display:block}
.brand-logo span{display:none;font-family:var(--mono);font-weight:800;color:var(--accent)}
.brand-name{font-weight:700;letter-spacing:.8px;font-size:13.5px}
.brand-subtitle{color:var(--muted);font-size:11px;font-family:var(--mono);letter-spacing:.5px}
.admin-top-actions{display:flex;gap:8px;align-items:center}
.admin-secondary-button,.admin-logout-button{
  display:inline-flex;align-items:center;border:1px solid var(--line-hot);background:var(--panel);
  color:var(--text);font-family:var(--mono);font-size:11px;letter-spacing:.8px;font-weight:700;
  padding:7px 14px;cursor:pointer;text-transform:uppercase;transition:.15s;
}
.admin-secondary-button:hover{border-color:var(--accent)}
.admin-logout-button{border-color:var(--put);color:var(--put)}
.admin-logout-button:hover{background:var(--put-soft)}
.admin-main{max-width:1280px;margin:0 auto;padding:26px 22px 60px;display:grid;gap:18px}
.admin-heading h1{margin:4px 0 2px;font-size:22px}
.admin-heading p{margin:0;color:var(--muted);font-size:13px}
.admin-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.admin-stat-card{
  background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--accent);
  padding:16px 18px;display:flex;flex-direction:column;gap:4px;
}
.admin-stat-card small{font-size:9.5px;letter-spacing:1.2px;color:var(--faint);font-weight:700}
.admin-stat-card strong{font-family:var(--mono);font-size:26px;font-weight:800}
.admin-stat-card span{font-size:11.5px;color:var(--muted)}
.admin-panel{background:var(--panel);border:1px solid var(--line);padding:18px 20px}
.admin-section-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px;border-bottom:1px solid var(--line);padding-bottom:10px}
.admin-section-head h2{margin:0;font-size:15px}
.admin-section-head p{margin:0;color:var(--faint);font-size:12px}
.visitor-map{width:100%;min-height:320px;background:var(--bg-soft);border:1px solid var(--line)}
.admin-empty-map{display:grid;place-items:center;min-height:200px;color:var(--faint);border:1px dashed var(--line-hot)}
.admin-table-wrap{overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse;font-size:12.5px}
.admin-table th{
  text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--faint);
  text-transform:uppercase;border-bottom:1px solid var(--line-hot);padding:8px 10px;white-space:nowrap;
}
.admin-table td{border-bottom:1px solid var(--line);padding:9px 10px;color:var(--muted);vertical-align:top}
.admin-table tr:hover td{background:var(--accent-soft);color:var(--text)}
.admin-ip{font-family:var(--mono);color:var(--text);font-weight:600}
.admin-device-name{color:var(--accent-2);font-size:11px}
.admin-visit-badge{
  display:inline-block;font-family:var(--mono);font-weight:700;font-size:11px;
  background:var(--panel-2);border:1px solid var(--line-hot);padding:2px 9px;color:var(--text);
}
.admin-security-panel .admin-password-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.admin-password-change-form{display:grid;gap:12px}
.admin-password-change-form label{font-size:10.5px;letter-spacing:1px;color:var(--muted);font-weight:700;text-transform:uppercase;display:block;margin-bottom:5px}
.admin-password-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.admin-password-message{font-size:12.5px;color:var(--muted)}
.admin-password-message.positive{color:var(--call)}
.admin-password-message.negative{color:var(--put)}
.admin-privacy-note{color:var(--faint);font-size:11.5px;line-height:1.6}
@media (max-width:720px){
  .brand-strip.admin-topbar{justify-content:center}
  .admin-main{padding:14px 12px 40px}
}


/* ===================== TOQUE DE COLOR (acento cian) ==================== */
/* Línea superior viva en la barra y el pie */
.nx-topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,var(--spark),transparent 42%);
}
.nx-topbar{position:sticky}
.nx-footer::after{
  content:"";position:absolute;top:-1px;left:0;width:200px;height:2px;background:var(--spark);
}
.nx-footer{position:relative}

/* Punto vivo junto a los títulos de tarjeta y al estado EN LÍNEA */
.nx-card-h::before{
  content:"";display:inline-block;width:6px;height:6px;margin-right:8px;
  background:var(--spark);vertical-align:middle;
  box-shadow:0 0 8px var(--spark);
}
.nx-health::before{
  content:"";display:inline-block;width:6px;height:6px;margin-right:7px;
  background:var(--call);box-shadow:0 0 7px var(--call);
}

/* Borde superior de tarjetas y foco de inputs con el acento */
.nx-card{border-top-color:var(--spark)}
.admin-login-card,.admin-stat-card{border-top-color:var(--spark)}
textarea:focus,input:focus{border-color:var(--spark);box-shadow:0 0 0 2px var(--spark-soft)}
.money-preset.active{background:var(--spark);border-color:var(--spark);color:#0b1013}
#scanButton{background:var(--spark);color:#08131a}
#scanButton:hover{background:#5fd7f7}
.nx-version{background:var(--spark);border-color:var(--spark);color:#08131a}
.nx-version b{color:#08131a}
.nx-content-head{position:relative}
.nx-content-head::after{
  content:"";position:absolute;left:0;bottom:-1px;width:64px;height:2px;background:var(--spark);
}
.thumb-card.active{border-color:var(--spark);box-shadow:inset 0 0 0 1px var(--spark)}
.thumb-card:hover{border-color:var(--spark)}
.preferred-badge{background:var(--spark);color:#08131a}
.simulation-kicker,.chart-kicker,.nx-kicker{color:var(--spark)}
.dte-selected-range{background:var(--spark)}
input[type=range].dte-range-slider::-webkit-slider-thumb{background:var(--spark)}
.option-score-number{color:var(--spark)}
.meter-fill{border-right-color:#fff}

/* =====================================================================
   CAPA DE ANÁLISIS AI LOCAL
   Deliberadamente distinta del resto de la interfaz: banda violeta y fondo
   propio, para que a simple vista quede claro dónde terminan los cálculos
   deterministas y dónde empieza la interpretación de un modelo.
   ===================================================================== */
:root{
  --ai:        #a78bfa;
  --ai-strong: #c4b5fd;
  --ai-soft:   rgba(167,139,250,.09);
  --ai-line:   rgba(167,139,250,.32);
}

/* Indicador de estado en la barra superior */
.nx-ai{color:var(--faint)}
.nx-ai.ready{color:var(--ai-strong);border-color:var(--ai-line)}
.nx-ai.cold{color:var(--ai)}
.nx-ai.down{color:var(--danger)}
.nx-ai.off{color:var(--faint)}

/* Contenedor */
.ai-panel{
  margin:18px 0;padding:0;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-left:3px solid var(--ai);
}
.ai-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:14px 18px;border-bottom:1px solid var(--line);background:var(--ai-soft);
}
.ai-head h3{margin:0 0 6px;font-size:14px;letter-spacing:.4px;color:var(--ai-strong);display:flex;align-items:center;gap:10px}
.ai-badge{
  font-family:var(--mono);font-size:9.5px;letter-spacing:1px;font-weight:700;
  text-transform:uppercase;color:#12101a;background:var(--ai);padding:3px 8px;
}
.ai-disclaimer{margin:0;font-size:11.5px;line-height:1.6;color:var(--muted);max-width:74ch}
.ai-disclaimer strong{color:var(--ai-strong)}
.ai-body{padding:16px 18px}

/* Estados transitorios */
.ai-idle{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.ai-idle p{margin:0;color:var(--muted);font-size:13px}
.ai-loading{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:13px}
.ai-loading .spinner{border-top-color:var(--ai)}
.ai-loading strong{display:block;color:var(--text);font-size:13.5px}
.ai-loading small{color:var(--faint);font-size:11.5px}
.ai-error{border-left:3px solid var(--danger);background:var(--put-soft);padding:12px 16px}
.ai-error strong{color:var(--danger);font-size:13px}
.ai-error p{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
.ai-fallback-note{color:var(--faint)!important;font-size:11.5px!important;font-style:italic}

/* Botón */
button.ai-run{
  border:1px solid var(--ai-line);background:var(--ai-soft);color:var(--ai-strong);
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;padding:9px 16px;cursor:pointer;transition:.15s;
}
button.ai-run:hover{background:var(--ai);color:#12101a;border-color:var(--ai)}
button.ai-run.ghost{padding:5px 11px;font-size:10px;opacity:.75}
button.ai-run.ghost:hover{opacity:1}

/* Veredicto */
.ai-verdict{
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  padding:12px 16px;border:1px solid var(--line);background:var(--panel);margin-bottom:14px;
}
.ai-signal{
  font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:1.2px;
  padding:9px 16px;border:1px solid var(--line-hot);
}
.ai-signal.bullish{color:var(--call-strong);border-color:var(--call);background:var(--call-soft)}
.ai-signal.bearish{color:var(--put-strong);border-color:var(--put);background:var(--put-soft)}
.ai-signal.neutral{color:var(--wait-strong);border-color:var(--wait);background:var(--wait-soft)}
.ai-confidence span,.ai-quality span{
  display:block;font-size:9.5px;letter-spacing:.9px;color:var(--faint);
  font-weight:600;text-transform:uppercase;
}
.ai-confidence strong,.ai-quality strong{font-family:var(--mono);font-size:17px;color:var(--text)}
.ai-confidence.high strong{color:var(--call-strong)}
.ai-confidence.mid strong{color:var(--wait-strong)}
.ai-confidence.low strong{color:var(--put-strong)}
.ai-quality{text-align:right}

.ai-summary{
  margin:0 0 16px;font-size:14px;line-height:1.65;color:var(--text);
  border-left:2px solid var(--ai-line);padding-left:14px;
}

/* Listas y prosa */
.ai-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:14px}
.ai-list,.ai-prose{border:1px solid var(--line);background:var(--panel);padding:11px 15px}
.ai-list h5,.ai-prose h5,.ai-conclusion h5{
  margin:0 0 8px;font-size:9.5px;letter-spacing:1px;text-transform:uppercase;
  color:var(--faint);font-weight:700;
}
.ai-list ul{margin:0;padding-left:17px}
.ai-list li{font-size:12.5px;line-height:1.6;color:var(--muted);margin-bottom:5px}
.ai-list li::marker{color:var(--faint)}
.ai-prose p{margin:0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.ai-list.positive{border-left:2px solid var(--call)}
.ai-list.positive h5{color:var(--call)}
.ai-list.negative{border-left:2px solid var(--put)}
.ai-list.negative h5{color:var(--put)}
.ai-list.contradiction{border-left:2px solid var(--wait);margin-bottom:14px}
.ai-list.contradiction h5{color:var(--wait-strong)}
.ai-list.invalidation{border-left:2px solid var(--danger);margin-bottom:14px}
.ai-list.invalidation h5{color:var(--danger)}
/* La información faltante se destaca: es la señal de que hay que desconfiar. */
.ai-list.missing{border:1px dashed var(--wait);background:var(--wait-soft);margin-bottom:14px}
.ai-list.missing h5{color:var(--wait-strong)}
.ai-list.missing li{color:var(--text)}

.ai-conclusion{border:1px solid var(--ai-line);background:var(--ai-soft);padding:13px 16px;margin-bottom:14px}
.ai-conclusion p{margin:0;font-size:13.5px;line-height:1.65;color:var(--text)}

/* Procedencia */
.ai-footer{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.4px;color:var(--faint);
}
.ai-footer strong{color:var(--muted);font-weight:600}
.ai-flag{color:var(--wait);border:1px solid var(--line-hot);padding:2px 8px}

@media (max-width:720px){
  .ai-verdict{grid-template-columns:1fr;gap:12px;text-align:left}
  .ai-quality{text-align:left}
  .ai-head{flex-direction:column;gap:10px}
}

/* ---------- Interruptor de encendido/apagado de la AI ---------- */
.nx-ai-toggle{
  cursor:pointer;gap:8px;font-family:var(--mono);transition:.15s;
  background:var(--panel);border:1px solid var(--line-hot);color:var(--faint);
}
.nx-ai-toggle:hover{border-color:var(--ai);color:var(--ai-strong)}
.nx-ai-toggle:disabled{opacity:.5;cursor:progress}
.nx-ai-toggle:focus-visible{outline:2px solid var(--ai);outline-offset:2px}
/* El led hace obvio el estado sin tener que leer la etiqueta. */
.nx-ai-led{
  width:8px;height:8px;flex:0 0 auto;
  background:var(--faint);box-shadow:none;transition:.15s;
}
.nx-ai-toggle.on{color:var(--ai-strong);border-color:var(--ai-line);background:var(--ai-soft)}
.nx-ai-toggle.on .nx-ai-led{background:var(--ai-strong);box-shadow:0 0 7px var(--ai)}
.nx-ai-toggle.off{color:var(--faint)}
.nx-ai-toggle.off .nx-ai-led{background:var(--line-hot)}

/* ---------- Franja de AI en cada miniatura ---------- */
.thumb-ai{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:9px;padding-top:9px;border-top:1px dashed var(--line-hot);
  font-family:var(--mono);font-size:10px;letter-spacing:.4px;
}
.thumb-ai.idle{justify-content:stretch}
button.thumb-ai-btn{
  flex:1 1 auto;
  border:1px solid var(--ai-line);background:var(--ai-soft);color:var(--ai-strong);
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.7px;
  text-transform:uppercase;padding:7px 10px;cursor:pointer;transition:.15s;
}
button.thumb-ai-btn:hover{background:var(--ai);color:#12101a;border-color:var(--ai)}
button.thumb-ai-btn.ghost{flex:0 0 auto;padding:4px 8px;font-size:11px;line-height:1}

.thumb-ai.loading{color:var(--ai)}
.thumb-ai-spin{
  width:11px;height:11px;flex:0 0 auto;
  border:2px solid var(--line-hot);border-top-color:var(--ai);
  animation:nx-spin .7s linear infinite;
}
.thumb-ai.failed{color:var(--danger)}
.thumb-ai.failed span{flex:1 1 auto;cursor:help}

.thumb-ai.done .thumb-ai-signal{font-weight:700;color:var(--ai-strong)}
.thumb-ai.done.bullish .thumb-ai-signal{color:var(--call-strong)}
.thumb-ai.done.bearish .thumb-ai-signal{color:var(--put-strong)}
.thumb-ai.done.neutral .thumb-ai-signal{color:var(--wait-strong)}
.thumb-ai-conf{border:1px solid var(--line-hot);padding:2px 7px;color:var(--muted)}
.thumb-ai-conf.high{color:var(--call-strong);border-color:var(--call)}
.thumb-ai-conf.mid{color:var(--wait-strong);border-color:var(--wait)}
.thumb-ai-conf.low{color:var(--put-strong);border-color:var(--put)}
.thumb-ai-quality{color:var(--faint);flex:1 1 auto}

/* ---------- Bombillos de estado M1 / M4 en la barra superior ---------- */
.nx-nodes{gap:16px;font-family:var(--mono);padding:5px 14px}
.nx-node{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:11px;cursor:help}
/* `display:block` explícito: <i> es inline por defecto y ahí width/height se
   ignoran. Como hijo flex normalmente funcionaría, pero no vale la pena
   depender de eso para el elemento más visible de la barra. */
.nx-led{
  display:block;width:10px;height:10px;flex:0 0 auto;
  border-radius:50%!important;transition:.2s;
  /* Estado por defecto ya visible: un gris apagado con borde, para que nunca
     quede un hueco invisible si el JS todavía no ha respondido. */
  background:var(--panel-2);border:1.5px solid var(--faint);box-sizing:border-box;
}
/* Verde con halo y latido suave cuando el nodo está vivo. */
.nx-node.on{color:var(--call-strong)}
.nx-node.on .nx-led{
  background:var(--call-strong);border-color:var(--call-strong);
  box-shadow:0 0 9px var(--call-strong);animation:nx-pulse 2.4s ease-in-out infinite;
}
.nx-node.warn{color:var(--wait-strong)}
.nx-node.warn .nx-led{
  background:var(--wait-strong);border-color:var(--wait-strong);box-shadow:0 0 8px var(--wait);
}
.nx-node.off{color:var(--danger)}
.nx-node.off .nx-led{
  background:var(--danger);border-color:var(--danger);
  box-shadow:0 0 8px var(--danger);animation:nx-blink 1.3s step-end infinite;
}
@keyframes nx-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes nx-blink{0%,49%{opacity:1}50%,100%{opacity:.25}}

/* ---------- Robot pensando ---------- */
.ai-thinking{display:flex;align-items:flex-start;gap:16px;padding:6px 0}
.ai-robot{flex:0 0 auto;width:54px;height:58px}
.ai-robot svg{width:100%;height:100%;overflow:visible}
.ai-robot .r-head,.ai-robot .r-body{fill:var(--panel-2);stroke:var(--ai);stroke-width:1.6}
.ai-robot .r-antenna,.ai-robot .r-arm{stroke:var(--ai);stroke-width:1.6;stroke-linecap:round}
.ai-robot .r-spark{fill:var(--ai-strong);animation:r-spark 1.1s ease-in-out infinite}
.ai-robot .r-eye{fill:var(--ai-strong);animation:r-scan 2.2s ease-in-out infinite}
.ai-robot .r-eye.left{transform-origin:17px 22.5px}
.ai-robot .r-eye.right{transform-origin:31px 22.5px}
.ai-robot .r-eye.right{animation-delay:.15s}
.ai-robot .r-bar{fill:var(--ai-strong);animation:r-talk .9s ease-in-out infinite}
.ai-robot .r-bar.b1{transform-origin:17.5px 33px}
.ai-robot .r-bar.b2{transform-origin:22.5px 33px}
.ai-robot .r-bar.b3{transform-origin:27.5px 33px}
.ai-robot .r-bar.b2{animation-delay:.15s}
.ai-robot .r-bar.b3{animation-delay:.3s}
.ai-robot .r-arm.left{transform-origin:9px 42px;animation:r-wave-l 1.8s ease-in-out infinite}
.ai-robot .r-arm.right{transform-origin:39px 42px;animation:r-wave-r 1.8s ease-in-out infinite}
/* transform en vez de `r`: el radio es una propiedad geométrica SVG2 y su
   soporte por CSS es desigual. El escalado se comporta igual visualmente. */
.ai-robot .r-spark{transform-origin:24px 3px}
@keyframes r-spark{0%,100%{opacity:.3;transform:scale(.75)}50%{opacity:1;transform:scale(1.25)}}
/* Los "ojos" se estrechan y ensanchan: parece que lee de lado a lado. */
@keyframes r-scan{0%,100%{transform:scaleX(1);opacity:1}45%{transform:scaleX(.35);opacity:.6}}
@keyframes r-talk{0%,100%{transform:scaleY(1)}50%{transform:scaleY(2.6)}}
@keyframes r-wave-l{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-12deg)}}
@keyframes r-wave-r{0%,100%{transform:rotate(0deg)}50%{transform:rotate(12deg)}}

.ai-thinking-copy{flex:1 1 auto;min-width:0}
.ai-thinking-copy strong{display:block;color:var(--text);font-size:13.5px;margin-bottom:6px}
/* Tres puntos que aparecen en secuencia, el gesto universal de "escribiendo". */
.ai-dots{display:inline-flex;gap:3px;margin-left:5px;vertical-align:baseline}
.ai-dots i{width:4px;height:4px;background:var(--ai-strong);border-radius:50%!important;animation:ai-dot 1.4s ease-in-out infinite}
.ai-dots i:nth-child(2){animation-delay:.2s}
.ai-dots i:nth-child(3){animation-delay:.4s}
@keyframes ai-dot{0%,80%,100%{opacity:.2;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

.ai-thinking-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-bottom:9px;
}
.ai-elapsed{
  color:var(--ai-strong);font-weight:700;font-size:13px;
  border:1px solid var(--ai-line);padding:1px 9px;min-width:52px;text-align:center;
}
/* Pasados 90 s se avisa en ámbar en vez de dejarlo contando en silencio. */
.ai-elapsed.slow{color:var(--wait-strong);border-color:var(--wait)}
.ai-thinking-hint{font-style:italic}

/* Enlace M1 -> M4. No es una barra de progreso: no conocemos la duración, así
   que en vez de fingir un porcentaje se muestra el hecho real, que los datos
   viajaron al iMac y este está calculando. */
.ai-link{max-width:320px;margin-top:2px}
.ai-link svg{width:100%;height:34px;overflow:visible;display:block}
.ai-link .lnk-node rect{fill:var(--panel);stroke:var(--ai-line);stroke-width:1.2}
.ai-link .lnk-node text{
  fill:var(--muted);font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.5px;
}
/* El M4 late y se resalta: es el que está trabajando de verdad. */
.ai-link .lnk-node.m4 rect{stroke:var(--ai-strong);animation:lnk-work 1.5s ease-in-out infinite}
.ai-link .lnk-node.m4 text{fill:var(--ai-strong)}
.ai-link .lnk-wire{stroke:var(--line-hot);stroke-width:1.4;stroke-dasharray:3 4}
.ai-link .lnk-pkt{fill:var(--ai-strong);animation:lnk-travel 1.9s linear infinite}
.ai-link .lnk-pkt.p2{animation-delay:.63s}
.ai-link .lnk-pkt.p3{animation-delay:1.26s}
@keyframes lnk-travel{
  0%{transform:translateX(0);opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{transform:translateX(164px);opacity:0}
}
@keyframes lnk-work{
  0%,100%{stroke-width:1.2;filter:none}
  50%{stroke-width:2.2;filter:drop-shadow(0 0 4px var(--ai))}
}

.thumb-ai-elapsed{
  margin-left:auto;color:var(--ai-strong);font-weight:700;
  border:1px solid var(--ai-line);padding:1px 6px;
}
.thumb-ai-elapsed.slow{color:var(--wait-strong);border-color:var(--wait)}

/* Respeto por quien pide menos movimiento en el sistema. */
@media (prefers-reduced-motion: reduce){
  .ai-robot *,.ai-dots i,.nx-led,.ai-link *{animation:none!important}
  .ai-link .lnk-pkt{opacity:1}
}

/* ---------- Fila de preajustes de DTE ---------- */
.nx-preset-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:stretch}
.nx-preset-friday{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  border-color:var(--spark);color:var(--spark);white-space:nowrap;
}
.nx-preset-friday:hover{background:var(--spark-soft);border-color:var(--spark)}
.nx-preset-friday .nx-preset-main{font-weight:700;letter-spacing:.4px}
.nx-preset-friday small{color:var(--faint);font-size:9.5px;font-family:var(--mono);letter-spacing:.2px}
@media (max-width:520px){.nx-preset-row{grid-template-columns:1fr}}

/* Subtítulo y sello del enlace privado en la animación de análisis */
.ai-thinking-sub{font-size:11.5px;color:var(--muted);margin:-2px 0 7px}
.ai-thinking-secure{color:var(--ai);letter-spacing:.3px}

/* =====================================================================
   UN ENLACE ANIMADO POR ANALISTA
   =====================================================================
   Las tres filas cuentan lo mismo —el M1 mandó los datos y espera— y se
   distinguen por el destino del cable y su color. Eso hace que el dibujo diga
   por sí solo lo que más importa: si el dato salió de tu red o no.

   Las marcas de ChatGPT y Claude son dibujos geométricos propios, no los
   logotipos oficiales (son marcas registradas). Los colores sí son los de cada
   servicio, que es lo que permite reconocerlos de un vistazo.

   Todo el movimiento usa `transform` y `opacity`. Las propiedades geométricas de
   SVG2 (`cx`, `r`) no se animan de forma fiable en todos los navegadores; ya nos
   costó una entrega y `tests/test_ai_animation.py` lo vigila. Cada pieza que rota
   lleva su `transform-origin`: sin él, el navegador gira desde el origen del SVG
   y la figura sale disparada fuera del recuadro.
   ===================================================================== */

:root{
  --mk-openai:    #10a37f;   /* verde teal */
  --mk-openai-dim: rgba(16,163,127,.22);
  --mk-anthropic: #d97757;   /* coral cálido */
  --mk-anthropic-dim: rgba(217,119,87,.22);
}

.ai-thinking{display:block;padding:6px 0}
.ai-thinking-head{margin-bottom:12px}
.ai-thinking-head strong{display:block;color:var(--text);font-size:13.5px;margin-bottom:6px}

.ai-rows{display:grid;gap:10px}
.ai-rows.multi{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

.ai-row{
  padding:10px 12px;border-radius:9px;
  background:var(--panel);border:1px solid var(--line);
}
.ai-row-copy{min-width:0}
.ai-row-copy strong{
  display:block;font-size:12.5px;color:var(--text);
  letter-spacing:.2px;margin-bottom:3px;
}
.ai-row-meta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-bottom:4px}
.ai-row-model{
  font-family:var(--mono);font-size:10px;color:var(--faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.ai-row-note{font-size:10px;font-family:var(--mono);letter-spacing:.2px;white-space:nowrap}
.ai-row-note.cloud{color:var(--wait)}
.ai-row-note.casa{color:var(--ai)}

/* Un borde del color de cada analista: se distinguen sin leer el nombre. */
.ai-row.local{border-color:var(--ai-line)}
.ai-row.openai{border-color:var(--mk-openai-dim)}
.ai-row.openai .ai-row-copy strong{color:var(--mk-openai)}
.ai-row.anthropic{border-color:var(--mk-anthropic-dim)}
.ai-row.anthropic .ai-row-copy strong{color:var(--mk-anthropic)}

/* ---------- El cable, común a los tres ---------- */
/* En los de nube va del color del servicio y con el símbolo de nube encima. */
.ai-link.openai .lnk-wire{stroke:var(--mk-openai-dim)}
.ai-link.openai .lnk-pkt{fill:var(--mk-openai)}
.ai-link.anthropic .lnk-wire{stroke:var(--mk-anthropic-dim)}
.ai-link.anthropic .lnk-pkt{fill:var(--mk-anthropic)}
.ai-link .lnk-cloud{font-size:11px;fill:var(--wait)}
.ai-link .lnk-dest{overflow:visible}

/* ---------- Destino de ChatGPT: roseta de seis pétalos girando ---------- */
.ai-link.openai .mk-rose{
  transform-origin:24px 24px;
  animation:mk-rose-spin 7s linear infinite;
}
.ai-link.openai .mk-petal{
  fill:none;stroke:var(--mk-openai);stroke-width:1.7;
  opacity:.5;animation:mk-breathe 2.6s ease-in-out infinite;
}
/* El desfase entre pétalos crea una onda que recorre la flor. */
.ai-link.openai .mk-petal.p2{animation-delay:.18s}
.ai-link.openai .mk-petal.p3{animation-delay:.36s}
.ai-link.openai .mk-petal.p4{animation-delay:.54s}
.ai-link.openai .mk-petal.p5{animation-delay:.72s}
.ai-link.openai .mk-petal.p6{animation-delay:.90s}
.ai-link.openai .mk-core{
  fill:var(--mk-openai);transform-origin:24px 24px;
  animation:mk-core-pulse 1.6s ease-in-out infinite;
}
@keyframes mk-rose-spin{to{transform:rotate(360deg)}}
@keyframes mk-breathe{0%,100%{opacity:.28}50%{opacity:1}}
@keyframes mk-core-pulse{
  0%,100%{transform:scale(.82);opacity:.75}
  50%    {transform:scale(1.12);opacity:1}
}

/* ---------- Destino de Claude: radios que laten desde el centro ---------- */
.ai-link.anthropic .mk-ray{
  stroke:var(--mk-anthropic);stroke-width:2.3;stroke-linecap:round;
  transform-origin:24px 24px;
  animation:mk-ray-beat 1.9s ease-in-out infinite;
}
/* Retardo creciente: el pulso da la vuelta al círculo como un faro. */
.ai-link.anthropic .mk-ray.r1 {animation-delay:0s}
.ai-link.anthropic .mk-ray.r2 {animation-delay:.08s}
.ai-link.anthropic .mk-ray.r3 {animation-delay:.16s}
.ai-link.anthropic .mk-ray.r4 {animation-delay:.24s}
.ai-link.anthropic .mk-ray.r5 {animation-delay:.32s}
.ai-link.anthropic .mk-ray.r6 {animation-delay:.40s}
.ai-link.anthropic .mk-ray.r7 {animation-delay:.48s}
.ai-link.anthropic .mk-ray.r8 {animation-delay:.56s}
.ai-link.anthropic .mk-ray.r9 {animation-delay:.64s}
.ai-link.anthropic .mk-ray.r10{animation-delay:.72s}
.ai-link.anthropic .mk-ray.r11{animation-delay:.80s}
.ai-link.anthropic .mk-ray.r12{animation-delay:.88s}
.ai-link.anthropic .mk-pulse{
  fill:none;stroke:var(--mk-anthropic);stroke-width:1.5;
  transform-origin:24px 24px;
  animation:mk-halo 1.9s ease-out infinite;
}
@keyframes mk-ray-beat{
  0%,100%{transform:scale(.72);opacity:.3}
  45%    {transform:scale(1);opacity:1}
}
@keyframes mk-halo{
  0%  {transform:scale(.5);opacity:.9}
  70% {transform:scale(1.9);opacity:0}
  100%{transform:scale(1.9);opacity:0}
}

/* Sin movimiento: los destinos siguen siendo legibles, solo se quedan quietos. */
@media (prefers-reduced-motion: reduce){
  .ai-link .mk-rose,.ai-link .mk-petal,.ai-link .mk-core,
  .ai-link .mk-ray,.ai-link .mk-pulse{animation:none!important}
  .ai-link.openai .mk-petal{opacity:.6}
  .ai-link.anthropic .mk-ray{opacity:.85;transform:scale(1)}
  .ai-link.anthropic .mk-pulse{opacity:.35}
}

@media (max-width:520px){
  .ai-rows.multi{grid-template-columns:1fr}
}

/* =====================================================================
   VARIOS ANALISTAS: interruptores, origen de los datos y comparación
   ===================================================================== */
.nx-ai-toggles{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.nx-ai-toggle{
  cursor:pointer;gap:7px;font-family:var(--mono);transition:.15s;
  background:var(--panel);border:1px solid var(--line-hot);color:var(--faint);
}
.nx-ai-toggle:hover:not(:disabled){border-color:var(--ai);color:var(--ai-strong)}
.nx-ai-toggle:disabled{opacity:.5;cursor:progress}
.nx-ai-toggle:focus-visible{outline:2px solid var(--ai);outline-offset:2px}
.nx-ai-led{
  display:block;width:8px;height:8px;flex:0 0 auto;border-radius:50%!important;
  background:var(--panel-2);border:1.5px solid var(--faint);box-sizing:border-box;transition:.2s;
}
/* Encendido y respondiendo */
.nx-ai-toggle.on{color:var(--ai-strong);border-color:var(--ai-line);background:var(--ai-soft)}
.nx-ai-toggle.on .nx-ai-led{background:var(--call-strong);border-color:var(--call-strong);box-shadow:0 0 8px var(--call-strong);animation:nx-pulse 2.4s ease-in-out infinite}
/* Encendido pero sin responder */
.nx-ai-toggle.down{color:var(--danger);border-color:var(--danger)}
.nx-ai-toggle.down .nx-ai-led{background:var(--danger);border-color:var(--danger);box-shadow:0 0 7px var(--danger);animation:nx-blink 1.3s step-end infinite}
/* Apagado a propósito */
.nx-ai-toggle.off{color:var(--faint)}
/* Sin clave de API: no se puede encender */
.nx-ai-toggle.nokey{color:var(--wait);border-style:dashed}
.nx-ai-toggle.nokey .nx-ai-led{background:transparent;border-color:var(--wait)}
.nx-ai-shield{color:var(--call);font-style:normal;font-size:12px}
.nx-ai-cloud{color:var(--wait);font-style:normal;font-size:12px}

/* Sello de origen en cada lectura: lo que más importa saber de un vistazo */
.ai-origin{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.5px;padding:2px 8px;
  border:1px solid;text-transform:uppercase;font-weight:700;
}
.ai-origin.local{color:var(--call-strong);border-color:var(--call);background:var(--call-soft)}
.ai-origin.cloud{color:var(--wait-strong);border-color:var(--wait);background:var(--wait-soft)}

/* Consenso entre analistas */
.ai-consensus{
  display:flex;flex-direction:column;gap:4px;padding:11px 15px;margin-bottom:14px;
  border:1px solid var(--line);border-left:3px solid var(--ai);background:var(--panel);
}
.ai-consensus.agree{border-left-color:var(--call)}
.ai-consensus.disagree{border-left-color:var(--wait);background:var(--wait-soft)}
.ai-consensus strong{font-size:13px;color:var(--text)}
.ai-consensus.agree strong{color:var(--call-strong)}
.ai-consensus.disagree strong{color:var(--wait-strong)}
.ai-consensus span{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.ai-consensus small{font-size:11px;color:var(--faint);font-style:italic}

/* Lecturas lado a lado */
.ai-results{display:grid;gap:14px}
.ai-results.multi{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.ai-result{border:1px solid var(--line);background:var(--bg-soft);padding:13px 15px}
.ai-result.ok{border-top:2px solid var(--ai)}
.ai-result.failed{border-top:2px solid var(--danger);opacity:.85}
.ai-res-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding-bottom:9px;margin-bottom:11px;border-bottom:1px solid var(--line);
}
.ai-res-head strong{font-size:13.5px;color:var(--ai-strong);letter-spacing:.3px}
.ai-res-error strong{color:var(--danger);font-size:12.5px}
.ai-res-error p{margin:5px 0 0;font-size:12px;color:var(--muted)}
.ai-rerun{margin-top:12px;text-align:right}
/* En comparación las columnas van estrechas: una sola columna interna */
.ai-results.multi .ai-columns{grid-template-columns:1fr}
.ai-results.multi .ai-verdict{grid-template-columns:auto 1fr;gap:12px}
.ai-results.multi .ai-quality{text-align:left;grid-column:1/-1}

.thumb-ai.done.split .thumb-ai-signal{color:var(--wait-strong)}
.thumb-ai-count{color:var(--faint);font-size:9.5px}

/* ---------- Análisis incompleto ----------
   Un análisis al que le faltó un apartado se muestra igual: contiene la señal, la
   confianza y el resto de la lectura, y en los de nube la consulta ya se pagó.
   Tirarlo entero para mostrar un error era la peor de las dos opciones. Pero se
   avisa, y el hueco se queda vacío: rellenarlo con texto propio sería presentar
   nuestras palabras como el juicio del modelo. */
.ai-result.ok.partial{border-color:var(--wait)}
.ai-res-partial{
  display:flex;flex-direction:column;gap:2px;
  margin:0 0 10px;padding:8px 10px;border-radius:7px;
  background:var(--wait-soft);border:1px solid var(--wait);
}
.ai-res-partial strong{font-size:11.5px;color:var(--wait-strong);letter-spacing:.2px}
.ai-res-partial span{font-size:11px;color:var(--muted);line-height:1.5}
.ai-conclusion .ai-absent{color:var(--faint);font-style:italic;font-size:11.5px}

/* =====================================================================
   DIAL CIRCULAR DEL SCORE
   =====================================================================
   Anillo de rojo a verde, aguja en el valor y número en el centro. El anillo son
   segmentos con color propio y no un degradado: un `linearGradient` sobre el trazo
   de un arco mapea el color por posición horizontal, no por ángulo, y el rojo y el
   verde acabarían arriba y abajo en lugar de en los extremos del recorrido.
   ===================================================================== */
.score-dial{position:relative;width:100%;max-width:96px;aspect-ratio:1;margin:0 auto}
.score-dial svg{width:100%;height:100%;display:block;overflow:visible}

.score-dial .dial-seg{
  fill:none;stroke-width:6;stroke-linecap:butt;
  opacity:.16;transition:opacity .3s ease;
}
/* Los segmentos hasta el valor van a plena intensidad: el color dice la escala y
   la opacidad dice dónde estás dentro de ella. */
.score-dial .dial-seg.on{opacity:1}

/* La flecha se apoya en el anillo y no cruza el centro: como aguja de radio
   completo tapaba el número, que era justo el problema a resolver. */
.score-dial .dial-arrow{fill:var(--text);opacity:.9}
.score-dial .dial-needle{
  /* Sin transform-origin el navegador rota desde el origen del SVG y la flecha se
     va fuera del dial. El ángulo viaja en --dial-angle, puesto en línea, para no
     generar un @keyframes por cada valor posible. */
  transform-origin:50px 50px;
  transform:rotate(var(--dial-angle,135deg));
  animation:dial-swing .7s cubic-bezier(.22,1.2,.36,1) both;
}
@keyframes dial-swing{
  from{transform:rotate(135deg);opacity:.3}
  to  {transform:rotate(var(--dial-angle,135deg));opacity:1}
}

/* El número manda: grande, blanco y centrado de verdad. Antes iba del color de la
   rampa —que en el tramo rojo o ámbar contrasta mal sobre el panel oscuro— y
   desplazado hacia abajo para esquivar la aguja. Quitada la aguja del centro, se
   centra y se agranda. */
.score-dial .dial-center{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;pointer-events:none;
}
.dial-center strong{
  font-family:var(--mono);font-size:30px;line-height:.95;font-weight:700;
  color:#fff;letter-spacing:-1px;
}
.dial-center small{
  font-size:8px;color:var(--faint);letter-spacing:.7px;text-transform:uppercase;
}

@media (prefers-reduced-motion: reduce){
  .score-dial .dial-needle{animation:none}
}

/* =====================================================================
   VEREDICTO DE LOS ANALISTAS
   =====================================================================
   Lo calcula el sitio con una regla fija, no un modelo. Por eso se muestran las
   condiciones una por una: un veredicto que no se puede auditar no sirve para
   decidir nada.
   ===================================================================== */
.ai-verdict-box{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  margin:0 0 12px;padding:13px 15px;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--line-hot);border-left-width:3px;
  border-radius:0 10px 10px 0;
}
.ai-verdict-box.si{border-left-color:var(--call);background:var(--call-soft)}
.ai-verdict-box.reservas{border-left-color:var(--wait);background:var(--wait-soft)}
.ai-verdict-box.no{border-left-color:var(--put);background:var(--put-soft)}

.ai-verdict-box .score-dial{max-width:86px;grid-row:span 2}
.ai-verdict-box .avb-head{grid-column:2}
.avb-tag{
  display:block;font-size:15px;font-weight:700;letter-spacing:.2px;line-height:1.2;
}
.ai-verdict-box.si .avb-tag{color:var(--call-strong)}
.ai-verdict-box.reservas .avb-tag{color:var(--wait-strong)}
.ai-verdict-box.no .avb-tag{color:var(--put-strong)}
.avb-sub{display:block;font-size:10.5px;color:var(--faint);font-family:var(--mono);margin-top:2px}

.ai-verdict-box .avb-body{grid-column:2}
.avb-why{font-size:12px;color:var(--text);margin:7px 0 8px;line-height:1.55}
.avb-cond{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.avb-cond li{
  display:grid;grid-template-columns:14px 1fr;gap:6px;align-items:start;
  font-size:11.5px;line-height:1.45;color:var(--muted);
}
.avb-cond li i{font-style:normal;font-weight:700;text-align:center}
.avb-cond li.cumple i{color:var(--call-strong)}
.avb-cond li.falla i{color:var(--put-strong)}
.avb-cond li.falla{color:var(--text)}
.avb-rule{
  font-size:10px;color:var(--faint);line-height:1.5;margin:9px 0 0;
  padding-top:8px;border-top:1px solid var(--line);
}
@media (max-width:560px){
  .ai-verdict-box{grid-template-columns:1fr}
  .ai-verdict-box .score-dial{grid-row:auto;margin:0 0 4px}
  .ai-verdict-box .avb-head,.ai-verdict-box .avb-body{grid-column:1}
}

/* En el veredicto el dial es algo menor, así que el número se ajusta para no
   comerse el anillo. */
.ai-verdict-box .dial-center strong{font-size:27px}

/* ---------- Convivencia con la barra de telemetría ----------
   La barra (proyecto NAS_BAR) mide 38 px y empuja la página hacia abajo, pero un
   elemento con `position:fixed` se queda anclado al viewport y se le mete debajo.
   El único de este sitio es el botón de salir de pantalla completa.

   El desplazamiento va condicionado a `.con-barra-nas`, que la plantilla solo pone
   cuando la barra se inyecta de verdad: sin esto, las visitas desde internet —que
   no reciben la barra— tendrían el botón 38 px más abajo sin motivo. */
.con-barra-nas .fullscreen-exit{top:52px}

/* =====================================================================
   WEB4.0 · TABLA DE OPORTUNIDADES
   =====================================================================
   Sustituye a la rejilla de tarjetas. El motivo no es estético: un sweep devuelve
   hasta 18 oportunidades y en tarjetas cabían tres. En tabla caben todas y, sobre
   todo, las cifras quedan alineadas en vertical y se comparan de un vistazo.
   ===================================================================== */
.t-opps{width:100%;border-collapse:collapse;table-layout:fixed;font-size:var(--fs-sm)}
.t-opps th{
  font-size:var(--fs-xs);letter-spacing:.9px;text-transform:uppercase;color:var(--faint);
  font-weight:500;text-align:right;padding:6px 9px;white-space:nowrap;
  border-bottom:1px solid var(--line);background:var(--bg-soft);
  position:sticky;top:0;z-index:2;
}
.t-opps th.l,.t-opps td.l{text-align:left}
.t-opps td{
  padding:var(--row-y) 9px;text-align:right;white-space:nowrap;
  border-bottom:1px solid var(--line);overflow:hidden;text-overflow:ellipsis;
}
.t-row{cursor:pointer;transition:background .12s}
.t-row:hover{background:var(--panel)}
/* La fila activa se marca con un filete a la izquierda del color de su señal:
   ocupa menos que un fondo y no compite con el color de las cifras. */
.t-row.active{background:var(--panel-2);box-shadow:inset 2px 0 0 var(--accent)}
.t-row.call.active{box-shadow:inset 2px 0 0 var(--call)}
.t-row.put.active{box-shadow:inset 2px 0 0 var(--put)}
.t-row.wait.active{box-shadow:inset 2px 0 0 var(--wait)}
.t-row.preferred .t-sym::after{content:'★';color:var(--wait-strong);font-size:9px;margin-left:4px;vertical-align:super}

.t-sym{font-size:13.5px;font-weight:600;color:#fff;letter-spacing:.2px}
.t-sub{font-size:var(--fs-xs);color:var(--faint);font-weight:400}
.t-none{color:var(--faint)}
.t-tag{font-size:var(--fs-xs);padding:2px 6px;border-radius:var(--r);letter-spacing:.5px;font-weight:500}
.t-tag.call{background:var(--call-soft);color:var(--call-strong)}
.t-tag.put{background:var(--put-soft);color:var(--put-strong)}
.t-tag.wait{background:var(--wait-soft);color:var(--wait-strong)}
.t-score{font-size:13px;font-weight:600;color:#fff}
.t-bar{display:inline-block;width:34px;height:3px;background:var(--line);border-radius:2px;overflow:hidden;margin-left:6px;vertical-align:middle}
.t-bar i{display:block;height:100%}
.t-ai{width:76px}
.up{color:var(--call-strong)}
.dn{color:var(--put-strong)}
.ot{color:var(--faint)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- Detalle en dos columnas: ficha + contexto ---------- */
.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
.detail-main{min-width:0}
.detail-rail{display:grid;gap:12px;position:sticky;top:12px}
.ctx-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.ctx-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.ctx-h span{font-size:var(--fs-xs);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.ctx-h small{font-size:var(--fs-xs);color:var(--faint);font-family:var(--mono)}
.ctx-none{margin:0;font-size:var(--fs-sm);color:var(--faint);line-height:1.5}
.ctx-load{font-size:var(--fs-sm);color:var(--faint);padding:10px 12px}
.ctx-ins{width:100%;border-collapse:collapse;font-size:10.5px}
.ctx-ins td{padding:5px 0;text-align:right;border-bottom:1px solid var(--line);vertical-align:top}
.ctx-ins td.l{text-align:left}
.ctx-foot{font-size:var(--fs-sm);color:var(--muted);margin-top:7px}
/* La nota explica por qué un ejercicio de opciones no suma al saldo. Va aquí y no
   en la documentación porque es donde surge la duda al ver la fila marcada OTRO. */
.ctx-note{font-size:var(--fs-xs);color:var(--faint);line-height:1.5;margin:7px 0 0;padding-top:7px;border-top:1px solid var(--line)}
.ctx-nw{display:block;padding:6px 0;border-bottom:1px solid var(--line);text-decoration:none}
.ctx-nw:last-child{border-bottom:none}
.ctx-nw p{margin:0;font-size:10.5px;line-height:1.45;color:var(--text)}
.ctx-nw span{font-size:var(--fs-xs);color:var(--faint)}
.ctx-nw:hover p{color:var(--spark)}

/* ---------- Pantalla pequeña ----------
   Pendiente el trabajo fino de móvil, pero lo mínimo para que no se rompa: el
   contexto pasa debajo y la tabla oculta las columnas menos decisivas antes que
   obligar a hacer scroll horizontal. */
@media (max-width:900px){
  .detail-grid{grid-template-columns:1fr}
  .detail-rail{position:static}
}
@media (max-width:700px){
  .t-opps th:nth-child(5),.t-opps td:nth-child(5),
  .t-opps th:nth-child(6),.t-opps td:nth-child(6),
  .t-opps th:nth-child(7),.t-opps td:nth-child(7){display:none}
}

/* Un contrato de referencia no es operable: se atenúa y se dice por qué al pasar
   el ratón. Mostrarlo igual que uno filtrado haría creer que hay algo que comprar. */
.t-opps td.ref{color:var(--faint);font-style:italic}
.t-opps td.ref .t-sub{color:var(--wait)}