/* ============================================================
   APEX — Shell de la aplicación: sidebar, topbar, hero, gauge y loaders
   Extraído de index.html sin cambios de estilo. El ORDEN de
   carga de las hojas (ver <link> en index.html) es significativo:
   las reglas posteriores refinan a las anteriores.
   ============================================================ */

/* ============================================================
   PREMIUM OVERLAY — componente reutilizable (ver renderPremiumOverlay
   en el script) para bloquear con elegancia cualquier función Pro sin
   esconderla: el contenido real se sigue renderizando debajo, solo se
   difumina y se cubre con esta capa que invita a actualizar a Pro.
   ============================================================ */
/* El recorte redondeado vive en .premium-locked-content, NO en
   .premium-locked: un overflow:hidden en el contenedor lo convierte en el
   "scrollport" de cualquier position:sticky de dentro, y entonces
   .premium-overlay-inner se anclaría a una caja que nunca se desplaza —
   es decir, dejaría de seguir al scroll de la página. */
.premium-locked{position:relative;border-radius:var(--r-lg);}
.premium-locked-content{filter:blur(6px) saturate(.75);pointer-events:none;user-select:none;-webkit-user-select:none;border-radius:inherit;overflow:hidden;}
.premium-overlay{
  position:absolute;inset:0;z-index:2;
  background:var(--navblur-bg);border-radius:inherit;
}
/* height:100svh acotado por max-height:100% — si la sección bloqueada es
   más corta que la pantalla, el bloque mide lo mismo que la capa y sticky
   no hace nada; si es más larga (el caso de Progreso), mide una pantalla y
   acompaña al scroll dentro de los límites de la sección. */
.premium-overlay-inner{
  position:sticky;top:0;
  height:100vh;height:100svh;max-height:100%;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:40px 28px;
}
.premium-overlay-icon{
  width:52px;height:52px;border-radius:50%;background:var(--blue-soft);color:var(--blue);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:var(--shadow-sm);
}
.premium-overlay-title{font-family:var(--font-display);font-size:var(--text-h3-size);font-weight:var(--text-h3-weight);letter-spacing:var(--text-h3-ls);margin-bottom:var(--space-2);}
.premium-overlay-desc{font-size:var(--text-body-sm-size);color:var(--muted);max-width:360px;line-height:1.55;margin-bottom:22px;}
.premium-overlay-btn{width:auto;margin-top:0;padding:12px 28px;}

/* HISTORIAL / BIBLIOTECA — ver public/styles/analysis.css para la barra
   de carpetas, los filtros y la lista (.hist-table / .hist-row): viven
   ahí junto al resto de reglas del historial, esta hoja es solo el
   shell general de la app. */
/* ANALIZAR — selector de modalidad (gráfico / decisión / fundamental).
   auto-fit en vez de un número fijo de columnas: con 2 tarjetas ocupan
   la mitad cada una igual que antes, con 3 (o una cuarta el día de
   mañana) se reparten solas sin tocar esta regla. */
.amode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-3);margin-bottom:var(--space-7);}
/* Tarjeta de modo — fila (icono + copy), no columna: se lee como una
   decisión entre dos opciones de un mismo flujo, no como dos cards de
   dashboard sueltas. El estado activo es solo un tinte de borde/fondo
   de un paso, nunca un relleno saturado. */
.amode-card{
  display:flex;align-items:flex-start;gap:14px;text-align:left;
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);
  padding:16px 18px;cursor:pointer;font-family:var(--font-body);position:relative;
  transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
  box-shadow:var(--shadow-xs);
}
.amode-card:hover{border-color:var(--muted2);transform:translateY(-1px);}
.amode-card:active{transform:translateY(0);}
.amode-card:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.amode-card.active{
  border-color:var(--blue-soft-border);
  background:color-mix(in srgb, var(--blue) 6%, var(--surface));
  box-shadow:var(--shadow-sm);
}
.amode-icon{
  flex-shrink:0;width:38px;height:38px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  background:var(--surface2);color:var(--muted);
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.amode-card.active .amode-icon{background:var(--blue-soft);color:var(--blue);}
.amode-copy{display:flex;flex-direction:column;gap:3px;min-width:0;}
.amode-name{font-weight:650;font-size:var(--text-h4-size);color:var(--text);letter-spacing:-0.005em;}
.amode-desc{font-size:var(--text-caption-size);color:var(--muted);line-height:1.45;}
@media (max-width:560px){ .amode-grid{grid-template-columns:1fr;} }

/* ANALIZAR DECISIÓN — formulario (mismo lenguaje visual que Trade
   Tracker: combo de activo, toggle de dirección, inputs en USD y
   grid de cálculo automático, con más aire y jerarquía) */
.field-block{margin-bottom:var(--space-6);}
.field-block .field-label{margin-top:0;}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-3);margin-bottom:var(--space-5);}
@media (max-width:560px){ .row3{grid-template-columns:1fr;} }
.dm-action-toggle{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:var(--space-2);}
.dm-action-toggle.dir-toggle{grid-template-columns:1fr 1fr;}
.dm-action-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 10px;border-radius:var(--r-sm);border:1.5px solid var(--border);background:var(--surface);color:var(--muted);font-family:var(--font-body);font-size:var(--text-body-sm-size);font-weight:650;cursor:pointer;transition:all var(--dur-fast) var(--ease-out);}
.dm-action-btn:hover{border-color:var(--muted2);}
.dm-action-btn.is-buy.active{background:var(--green-soft);border-color:var(--green-soft-border);color:var(--green);box-shadow:var(--shadow-xs);}
.dm-action-btn.is-sell.active{background:var(--red-soft);border-color:var(--red-soft-border);color:var(--red);box-shadow:var(--shadow-xs);}
.dm-action-btn.is-wait.active{background:var(--amber-soft);border-color:var(--amber-soft-border);color:var(--amber);box-shadow:var(--shadow-xs);}
.depth-toggle .dm-action-btn.active{background:var(--surface2);border-color:var(--border-soft);color:var(--text);box-shadow:var(--shadow-xs);}
.dm-price-fields{transition:opacity var(--dur-fast) var(--ease-out);}
.dm-price-fields.is-optional{opacity:.72;}
.dm-calc-hint{font-size:var(--text-caption-size);color:var(--muted2);margin:-2px 0 var(--space-3);}
.dm-mood-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--space-2);}
.dm-mood-chip{padding:8px 14px;border-radius:var(--r-pill);border:1.5px solid var(--border);background:var(--surface);color:var(--muted);font-family:var(--font-body);font-size:var(--text-body-sm-size);font-weight:600;cursor:pointer;transition:all var(--dur-fast) var(--ease-out);}
.dm-mood-chip:hover{border-color:var(--muted2);}
.dm-mood-chip.active{background:var(--violet-soft);border-color:var(--violet-soft-border);color:var(--violet);}
.dm-section-label{font-size:var(--text-label-size);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted2);margin:0 0 var(--space-3);}
.dm-divider{height:1px;background:var(--border-soft);margin:var(--space-6) 0;}

/* ANALIZAR DECISIÓN — resultado de APEX: breve, jerárquico, legible
   en 5-10 segundos. Veredicto arriba, luego "Por qué" en puntos,
   "Qué haría" y "Qué hacer ahora" como cierre accionable. */
.dm-verdict{border-radius:var(--r-xl);padding:var(--space-8) var(--space-7);margin-bottom:var(--space-6);box-shadow:var(--shadow-md);position:relative;overflow:hidden;padding-left:calc(var(--space-7) + 3px);}
.dm-verdict:before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;}
.dm-verdict.is-green{background:var(--green-soft);border:1px solid var(--green-soft-border);}
.dm-verdict.is-green:before{background:var(--green);}
.dm-verdict.is-amber{background:var(--amber-soft);border:1px solid var(--amber-soft-border);}
.dm-verdict.is-amber:before{background:var(--amber);}
.dm-verdict.is-red{background:var(--red-soft);border:1px solid var(--red-soft-border);}
.dm-verdict.is-red:before{background:var(--red);}
.dm-verdict-eyebrow{font-family:var(--font-mono);font-size:var(--text-label-size);font-weight:700;text-transform:uppercase;letter-spacing:.09em;opacity:.85;margin-bottom:8px;}
.dm-verdict.is-green .dm-verdict-eyebrow, .dm-verdict.is-green .dm-verdict-title{color:var(--green);}
.dm-verdict.is-amber .dm-verdict-eyebrow, .dm-verdict.is-amber .dm-verdict-title{color:var(--amber);}
.dm-verdict.is-red .dm-verdict-eyebrow, .dm-verdict.is-red .dm-verdict-title{color:var(--red);}
.dm-verdict-title{font-family:var(--font-display);font-size:clamp(26px,4vw,36px);font-weight:700;margin:0 0 10px;letter-spacing:-0.025em;line-height:1.1;}
.dm-verdict-meta{font-family:var(--font-mono);font-size:var(--text-caption-size);color:var(--text);opacity:.75;margin:0;}
.dm-why-card .section-title{margin-bottom:var(--space-3);}
.dm-points{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;}
.dm-points li{position:relative;padding-left:18px;font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--text);}
.dm-points li::before{content:'';position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--muted2);}
.dm-would-box{background:var(--surface2);border:1px solid var(--border-soft);border-radius:var(--r-md);padding:var(--space-5);margin-top:var(--space-6);}
.dm-would-box .dm-action-eyebrow{font-size:var(--text-label-size);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:6px;}
.dm-would-box p{margin:0;font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--text);}
.dm-optimized-card{margin-top:var(--space-6);}
.dm-now-box{border-radius:var(--r-md);padding:var(--space-5);margin-top:var(--space-6);border:1px solid var(--border-soft);}
.dm-now-box.is-green{background:var(--green-soft);border-color:var(--green-soft-border);}
.dm-now-box.is-amber{background:var(--amber-soft);border-color:var(--amber-soft-border);}
.dm-now-box.is-red{background:var(--red-soft);border-color:var(--red-soft-border);}
.dm-now-eyebrow{font-size:var(--text-label-size);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:6px;}
.dm-now-box p{margin:0;font-size:var(--text-body-size);font-weight:650;line-height:var(--text-body-lh);color:var(--text);}

/* "Estrategia optimizada" — cómo ajustaría APEX la operación: misma
   tarjeta base que "Por qué" (.card), mismas filas de plan que ya usa
   el resto de la app (.plan-hero-row) y el mismo patrón de bloque de
   texto que "Qué haría"/"Qué hacer ahora", sin estética nueva. */
.dm-optimized-eyebrow{font-size:var(--text-label-size);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:4px;}
.dm-optimized-sub{margin:0;font-size:var(--text-body-sm-size);color:var(--muted2);}
.dm-optimized-plan{margin-top:var(--space-4);}
.dm-optimized-empty{margin:var(--space-2) 0 0;font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--text);}
.dm-optimized-sub-block{margin-top:var(--space-5);}
.dm-optimized-sub-title{font-size:var(--text-label-size);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:6px;}
.dm-optimized-sub-block p{margin:0;font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--text);}
.dm-hist-badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-label-size);font-weight:600;padding:3px 9px;border-radius:var(--r-2xs);background:var(--violet-soft);color:var(--violet);}

/* ============================================================
   ANÁLISIS FUNDAMENTAL — mismo lenguaje visual que "Analizar
   decisión" (.dm-*, .card, gaugeSvg): Fundamental Score → Diagnóstico
   → Lo mejor → Riesgos → Valoración → APEX opina → Qué hacer ahora.
   ============================================================ */
.fn-field-hint{font-size:var(--text-caption-size);color:var(--muted2);margin-top:6px;}
.fn-position-toggle{grid-template-columns:1fr 1fr 1fr;}
.fn-position-extra{margin-top:var(--space-4);}

.fn-hero{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-xl);
  padding:var(--space-7);margin-bottom:var(--space-6);box-shadow:var(--shadow-md);
}
.fn-hero-top{display:flex;align-items:center;gap:var(--space-6);}
.fn-hero-gauge{flex-shrink:0;}
.fn-hero-id{min-width:0;}
.fn-hero-ticker{font-family:var(--font-display);font-size:clamp(22px,3.6vw,30px);font-weight:700;letter-spacing:-0.02em;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;}
.fn-hero-name{font-family:var(--font-body);font-size:var(--text-body-sm-size);font-weight:500;color:var(--muted);letter-spacing:0;}
.fn-hero-meta{font-size:var(--text-caption-size);color:var(--muted2);margin-top:3px;}
.fn-hero-price{font-family:var(--font-mono);font-size:var(--text-body-size);color:var(--text);margin-top:10px;font-variant-numeric:tabular-nums;}
.fn-hero-change{font-weight:650;}
.fn-hero-change.is-good{color:var(--green);}
.fn-hero-change.is-bad{color:var(--red);}
.fn-hero-change.is-neutral{color:var(--muted2);}
.fn-hero-cap{color:var(--muted2);}
.fn-hero-label{margin-top:var(--space-5);font-size:var(--text-label-size);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted2);}
@media(max-width:520px){ .fn-hero-top{flex-direction:column;align-items:flex-start;gap:var(--space-4);} }

.fn-diagnosis-text{margin:0;font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--text);}

.fn-point-list{display:flex;flex-direction:column;gap:10px;}
.fn-point-card{border-radius:var(--r-md);padding:var(--space-4) var(--space-5);border:1px solid var(--border-soft);background:var(--surface2);}
.fn-point-good{border-left:3px solid var(--green);}
.fn-point-risk{border-left:3px solid var(--red);}
.fn-point-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.fn-point-title{font-weight:650;font-size:var(--text-body-size);color:var(--text);}
.fn-point-detail{margin:4px 0 0;font-size:var(--text-body-sm-size);line-height:var(--text-body-lh);color:var(--muted);}
.fn-sev{flex-shrink:0;font-size:var(--text-label-size);font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:3px 8px;border-radius:var(--r-2xs);}
.fn-sev.is-high{background:var(--red-soft);color:var(--red);}
.fn-sev.is-mid{background:var(--amber-soft);color:var(--amber);}
.fn-sev.is-low{background:var(--surface3);color:var(--muted2);}

.fn-valuation-badge{display:inline-flex;align-items:center;font-size:var(--text-body-sm-size);font-weight:700;padding:6px 14px;border-radius:var(--r-pill);border:1px solid var(--fn-border,var(--border-soft));margin-bottom:var(--space-3);}
.fn-valuation-text{margin:0;font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--text);}

.fn-opinion-text{margin:0;font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--text);}

/* Fortalezas + Riesgos en una sola tarjeta (dos columnas en escritorio):
   menos tarjetas que leer de arriba a abajo, más aire entre secciones. */
.fn-sr-card{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7);}
.fn-sr-col + .fn-sr-col{padding-left:var(--space-7);border-left:1px solid var(--border-soft);}
@media(max-width:640px){
  .fn-sr-card{grid-template-columns:1fr;gap:var(--space-5);}
  .fn-sr-col + .fn-sr-col{padding-left:0;border-left:none;padding-top:var(--space-5);border-top:1px solid var(--border-soft);}
}

/* Más aire entre las tarjetas del resultado del Análisis Fundamental que
   en el resto de la app: es contenido denso en cifras, respirar entre
   bloques ayuda más aquí que en otras vistas. */
#fnResultsArea .dm-reveal-group > .card + .card,
#fnResultsArea .dm-reveal-group > .card + details,
#fnResultsArea .dm-reveal-group > details + .card,
#fnResultsArea .dm-reveal-group > .card + .dm-why-card,
#fnResultsArea .dm-reveal-group > .dm-verdict,
#fnResultsArea .dm-reveal-group > .dm-now-box,
#fnResultsArea .dm-reveal-group > .dm-would-box{margin-top:var(--space-8);}
#fnResultsArea .card{padding:var(--space-7) var(--space-7);}

.fn-data-news{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--border-soft);}
.fn-data-news-title{font-size:var(--text-label-size);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted2);margin-bottom:var(--space-3);}
.fn-data-news-item{padding:8px 0;border-bottom:1px solid var(--border-soft);}
.fn-data-news-item:last-child{border-bottom:none;}
.fn-data-news-item a{color:var(--text);font-size:var(--text-body-sm-size);font-weight:600;text-decoration:none;}
.fn-data-news-item a:hover{text-decoration:underline;}
.fn-data-news-meta{display:block;font-size:var(--text-caption-size);color:var(--muted2);margin-top:2px;}

.fn-data-acc{padding:0;}
.fn-data-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-6);}
@media(max-width:560px){ .fn-data-grid{grid-template-columns:1fr;} }
.fn-data-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--border-soft);}
.fn-data-row:last-child{border-bottom:none;}
/* Filas con una lista larga (posiciones principales, peso por sector en
   ETF/fondo): ocupan las dos columnas del grid y el valor pasa debajo
   de la etiqueta en vez de intentar alinearse a la derecha en una sola
   línea, que con varias posiciones/sectores se volvía ilegible. */
.fn-data-row-wide{grid-column:1 / -1;flex-direction:column;align-items:flex-start;gap:4px;}
.fn-data-row-wide .fn-data-v{text-align:left;font-weight:600;line-height:1.5;}
.fn-data-k{font-size:var(--text-body-sm-size);color:var(--muted);}
.fn-data-v{font-family:var(--font-mono);font-size:var(--text-body-sm-size);font-weight:650;color:var(--text);font-variant-numeric:tabular-nums;text-align:right;}
.fn-data-missing{font-size:var(--text-caption-size);color:var(--muted2);margin:var(--space-4) 0 0;}
.fn-data-source{font-size:var(--text-caption-size);color:var(--muted2);margin:var(--space-3) 0 0;}
.score-pill.is-green{background:var(--green-soft);color:var(--green);border-color:var(--green-soft-border);}
.score-pill.is-amber{background:var(--amber-soft);color:var(--amber);border-color:var(--amber-soft-border);}
.score-pill.is-red{background:var(--red-soft);color:var(--red);border-color:var(--red-soft-border);}

.score-pill{font-family:var(--font-mono);font-size:var(--text-caption-size);padding:5px 11px;border-radius:var(--r-xs);background:var(--surface2);border:1px solid var(--border-soft);}
.outcome-pill{font-size:var(--text-label-size);padding:4px 9px;border-radius:var(--r-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.02em;}
.out-acertado{background:var(--green-soft);color:var(--green);}
.out-parcial{background:var(--amber-soft);color:var(--amber);}
.out-fallido{background:var(--red-soft);color:var(--red);}
.out-pendiente{background:var(--surface3);color:var(--muted2);}

.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:var(--text-body-sm-size);cursor:pointer;margin-bottom:20px;font-weight:500;}
.back-link:hover{color:var(--text);}

.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px;}
@media(max-width:640px){.stat-grid{grid-template-columns:1fr 1fr;}}
.stat-box{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-md);padding:var(--space-5);box-shadow:var(--shadow-sm);}
.stat-box .sv{font-family:var(--font-mono);font-size:24px;font-weight:650;letter-spacing:-0.01em;font-variant-numeric:tabular-nums;}
.stat-box .sl{font-size:var(--text-label-size);color:var(--muted2);margin-top:4px;text-transform:uppercase;letter-spacing:.04em;}

.outcome-form{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.outcome-form select{width:auto;flex:0 0 160px;}
.outcome-form textarea{flex:1;min-width:180px;}

.badge-warn{background:var(--amber-soft);color:var(--amber);font-size:var(--text-label-size);padding:3px 8px;border-radius:var(--r-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.03em;}
.toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%);
  background:#1d1d1f;border:1px solid rgba(255,255,255,.08);color:#fff;
  padding:11px 20px;border-radius:var(--r-pill);font-size:var(--text-body-sm-size);box-shadow:var(--shadow-lg);
  z-index:200;animation:toastin .25s var(--ease);
}
@keyframes toastin{from{opacity:0;transform:translate(-50%,10px);}to{opacity:1;transform:translate(-50%,0);}}
/* En móvil el toast deja de estar centrado por translateX (pasa a
   left/right fijos, ver la media query de progress.css). Necesita su
   propio keyframe: si reutilizara `toastin`, la animación seguiría
   aplicando translate(-50%,…) —lo animado gana sobre el transform
   estático— y al terminar volvería de golpe a transform:none, con un
   salto lateral de media anchura a la vista. */
@keyframes toastinFlush{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* ============================================================
   V2 — APP SHELL (sidebar + content), hero, gauge, report nav,
   premium loading, icons and microinteractions.
   ============================================================ */

.app-shell{display:flex;align-items:flex-start;min-height:100vh;}

/* Colapsar el sidebar en escritorio, con el mismo icono "panel" y la
   misma pastilla de tooltip que ChatGPT: un botón cuadrado en la propia
   barra (visible con la barra abierta) y su gemelo flotando sobre el
   contenido (visible con la barra cerrada) — nunca los dos a la vez.
   En móvil el sidebar es el drawer (ver navigation.js), que ya tiene su
   propia X; este botón no aplica ahí y se oculta. */
.sb-toggle-btn{
  display:none;flex:0 0 auto;position:relative;
  width:32px;height:32px;padding:0;
  border:0;border-radius:var(--r-md);
  background:transparent;color:var(--muted);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.sb-toggle-btn svg{display:block;margin:auto;}
.sb-toggle-btn:hover{background:var(--surface2);color:var(--text);}
.sb-toggle-floating{
  position:fixed;top:var(--space-5);left:var(--space-5);z-index:20;
  border:1px solid var(--border-soft);background:var(--surface);box-shadow:var(--shadow-sm);
}
/* Pastilla de tooltip, como en ChatGPT: aparece debajo del botón al
   pasar el cursor, nunca al foco por teclado únicamente (evita un
   tooltip pegado tras un clic). Sin JS: solo CSS sobre data-tooltip. */
.sb-toggle-btn[data-tooltip]:hover::after{
  content:attr(data-tooltip);
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  padding:6px 10px;border-radius:var(--r-sm);
  background:var(--text);color:var(--bg);
  font-family:var(--font-body);font-size:11px;font-weight:600;white-space:nowrap;
  pointer-events:none;z-index:30;
  box-shadow:var(--shadow-md);
}
/* Flotando pegado al borde izquierdo de la pantalla, la pastilla
   centrada se saldría por fuera del viewport (ver `left` del propio
   botón): se ancla a la izquierda del icono en vez de centrarla. */
.sb-toggle-floating[data-tooltip]:hover::after{left:0;transform:none;}
@media(min-width:901px){
  .sb-toggle-btn{display:grid;place-items:center;}
  .sb-toggle-floating{display:none;}
  .app-shell.is-sidebar-collapsed .sidebar{display:none;}
  .app-shell.is-sidebar-collapsed .sb-toggle-floating{display:grid;place-items:center;}
}

.sidebar{
  width:232px;flex-shrink:0;position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;padding:var(--space-5) var(--space-3);
  border-right:1px solid var(--border-soft);background:var(--surface);
  /* Sin esto, .sidebar-nav podía crecer más allá de los 100vh del
     propio .sidebar (muchas pestañas, o zoom del navegador por debajo
     de 100%) y empujaba .sidebar-account fuera de la pantalla — la
     única forma de verlo entero era reducir el zoom. overflow:hidden
     aquí, combinado con min-height:0 más abajo, es lo que le permite
     al hijo del medio (.sidebar-nav) encogerse y scrollear por su
     cuenta en vez de estirar todo el sidebar. */
  overflow:hidden;
}
/* Identidad minimalista tipo "producto", no banner: solo imagotipo +
   "APEX" en desktop, sin tagline ni insignia de plan — el plan ya se
   ve en el botón de cuenta al fondo del sidebar (.auth-plan-badge). */
.sidebar-top{padding:4px 6px 0;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.sidebar .brand{display:flex;align-items:center;gap:8px;}
.sidebar .brand .mark{
  width:22px;height:22px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.sidebar .brand .mark img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 2px 6px rgba(200,16,46,.18));}
.sidebar .brand .name{
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-display);font-weight:650;font-size:14px;letter-spacing:-0.01em;color:var(--text);
}

/* margin-bottom:auto empuja el bloque de cuenta (auth/plan/tema/pie) al
   fondo como un único grupo, en vez de dejarlo pegado justo debajo del
   nav con un hueco enorme antes del pie — así el sidebar lee como dos
   zonas claras (navegación arriba, cuenta abajo), no como una lista de
   piezas sueltas. */
.sidebar-nav{
  display:flex;flex-direction:column;gap:3px;margin-top:var(--space-6);
  /* flex:1 1 auto + min-height:0 es lo que deja que ESTE hijo (y no
     .sidebar-top ni .sidebar-account, que se quedan flex-shrink:0 /
     margin-top:auto de siempre) sea el único que se encoge y scrollea
     cuando la lista de pestañas no cabe entera — el mismo truco que
     .content-scroll ya usa para el área principal. */
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  /* Firefox: sin scrollbar-color, scrollbar-width:thin por sí solo
     sigue pintando la barra gris/blanca del sistema — es lo que se
     veía "genérico". Con los dos colores fijados aquí, el hueco vacío
     del canal (segundo color) queda transparente y el propio pulgar
     usa el token de tema en vez del gris del SO. */
  scrollbar-width:thin;scrollbar-color:var(--muted2) transparent;
  /* Un pelín de aire a los lados para que el scrollbar no tape el
     texto de las pestañas ni quede pegado al borde del hover. */
  margin-left:-4px;margin-right:-4px;padding-left:4px;padding-right:4px;
}
.sidebar-nav::-webkit-scrollbar{width:7px;}
.sidebar-nav::-webkit-scrollbar-track{background:transparent;}
/* El truco del borde del color del propio fondo + background-clip
   recorta el pulgar hacia dentro del canal, así flota como una
   píldora fina en vez de pegarse borde con borde — el mismo lenguaje
   "discreto, no una barra de sistema" que ya usa .news-cats. */
.sidebar-nav::-webkit-scrollbar-thumb{
  background:var(--muted2);border-radius:var(--r-pill);
  border:2px solid var(--surface);background-clip:padding-box;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover{background:var(--muted);}

/* Etiquetas de grupo (Workspace/Trading/Intelligence/Learn): texto
   eyebrow entre filas de navegación, no un contenedor nuevo — así el
   sidebar lee como un producto organizado en vez de una lista plana,
   sin envolver los .tab existentes ni tocar su mecanismo de order. */
.nav-group-label{
  display:block;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:var(--muted2);padding:0 10px;
  margin:var(--space-5) 0 var(--space-1);
}
.nav-group-label:first-child{margin-top:0;}
.nav-group-label-secondary{margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--border-soft);}

/* Grupo de cuenta (línea + perfil/plan + créditos + tema + nota): se
   ancla de forma robusta al fondo del drawer con margin-top:auto en el
   propio contenedor, en vez de depender de un margin-bottom:auto en el
   nav — así queda pegado al borde inferior aunque el contenido de
   arriba cambie de alto. */
.sidebar-account{margin-top:auto;flex-shrink:0;}
/* Un único estilo de "fila de menú" para toda la navegación: sin fondo
   ni borde propio en reposo, solo una superficie de hover/activo. Nada
   debe leerse como tarjeta independiente aquí. */
.tab{
  display:flex;align-items:center;gap:11px;text-align:left;
  padding:10px 11px;border-radius:var(--r-md);font-size:14px;font-weight:510;color:var(--muted);
  cursor:pointer;transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);
  border:1px solid transparent;background:transparent;
  font-family:var(--font-body);position:relative;width:100%;letter-spacing:-0.005em;
}
.tab svg{flex-shrink:0;width:19px;height:19px;opacity:.7;transition:opacity .16s;}
.tab:hover{background:var(--surface2);color:var(--text);}
.tab:hover svg{opacity:1;}
.tab.active{background:var(--blue-soft);color:var(--blue);font-weight:600;}
.tab.active svg{opacity:1;}
.tab:focus-visible{outline:none;box-shadow:var(--shadow-focus);}

/* APEX Copilot — la única fila del sidebar que NO cambia de vista sino
   que abre otra superficie (la extensión). Hereda el ritmo de .tab
   (mismo alto, mismo gap, mismo hover) para no introducir un lenguaje
   nuevo, y toda su distinción está en la flecha: discreta en reposo,
   se desplaza un pelo en hover. Sin color de marca, sin fondo propio,
   sin insignia: es un acceso, no una promoción. Nunca lleva estado
   activo — no hay ninguna vista de la app a la que corresponda. */
.nav-external{
  display:flex;align-items:center;gap:11px;text-align:left;
  padding:10px 11px;border-radius:var(--r-md);font-size:14px;font-weight:510;color:var(--muted);
  cursor:pointer;transition:background .16s var(--ease),color .16s var(--ease);
  border:1px solid transparent;background:transparent;
  font-family:var(--font-body);position:relative;width:100%;letter-spacing:-0.005em;
}
.nav-external svg{flex-shrink:0;width:19px;height:19px;opacity:.7;transition:opacity .16s;}
.nav-external:hover{background:var(--surface2);color:var(--text);}
.nav-external:hover svg{opacity:1;}
.nav-external:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.nav-external-arrow{
  margin-left:auto;font-size:12px;line-height:1;color:var(--muted2);
  transition:transform .16s var(--ease),color .16s var(--ease);
}
.nav-external:hover .nav-external-arrow{transform:translate(1px,-1px);color:var(--text);}
@media (prefers-reduced-motion:reduce){
  .nav-external:hover .nav-external-arrow{transform:none;}
}

/* "Nuevo análisis" — mismo peso visual que el resto de la navegación,
   sin ningún tratamiento propio: ni color fijo, ni filo de acento, ni
   fondo distinto. Se apoya solo en .tab/.tab.active, igual que Panel,
   Historial, etc. Un pelín más de espacio debajo para separarlo del
   resto del grupo Workspace. */
.tab-primary{margin-bottom:10px;}

/* Insignia PRO junto a "Progreso": centrada en la línea de texto de la
   fila, nunca flotando por encima o por debajo. Sin height fijo aquí
   (viviría en conflicto con el padding de la regla base) — el tamaño
   lo da el padding simétrico + line-height:1. */
.tab-badge-pro{align-self:center;}

/* BETA — etiqueta de early access, compartida por navegación, títulos y
   tarjetas. Es deliberadamente más ligera que una insignia de plan: no
   compite con el contenido ni cambia el tamaño de los controles. */
.beta-badge{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  margin-left:4px;padding:2px 5px;border:1px solid var(--violet-soft-border);
  border-radius:var(--r-2xs);background:var(--violet-soft);color:var(--violet);
  font-family:var(--font-mono);font-size:9px;font-weight:700;line-height:1.15;
  letter-spacing:.08em;vertical-align:middle;white-space:nowrap;
}
.stg-nav-item .beta-badge{flex:0 0 auto;width:auto;overflow:visible;text-overflow:clip;}
.mx-beta-card-label{
  display:flex;align-items:center;gap:3px;margin-bottom:var(--space-3);
  color:var(--muted2);font-family:var(--font-mono);font-size:var(--text-label-size);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}

/* Bloque de cuenta: una sola zona visual, separada del nav por un
   divisor sutil arriba de auth-box (el primer elemento del grupo). */
.auth-box{padding-top:var(--space-4);border-top:1px solid var(--border-soft);margin-top:0;}

/* ---- Mobile-only chrome: topbar, drawer backdrop, drawer close button.
   Hidden by default; the <900px query below is what actually activates
   the off-canvas drawer pattern (see there for the full explanation). ---- */
.mobile-topbar{display:none;}
.sidebar-backdrop{display:none;}
.sidebar-close{display:none;}
.bottom-nav{display:none;}

.content-scroll{flex:1;min-width:0;}

/* ---- Hero (landing moment inside "Nuevo análisis") ---- */
.hero{padding:var(--space-2) var(--space-1) var(--space-8);max-width:620px;}
.hero-kicker{
  display:inline-flex;align-items:center;gap:7px;font-size:var(--text-caption-size);font-weight:600;color:var(--blue);
  background:var(--blue-soft);border:1px solid var(--blue-soft-border);padding:5px 12px 5px 10px;border-radius:var(--r-pill);margin-bottom:20px;
}
.hero-kicker .pulse{width:6px;height:6px;border-radius:50%;background:var(--blue);animation:pulse 1.6s infinite ease-in-out;}
.hero-title{
  font-family:var(--font-display);font-weight:var(--text-display-weight);font-size:var(--text-display-size);
  line-height:var(--text-display-lh);letter-spacing:var(--text-display-ls);margin:0 0 var(--space-4);color:var(--text);
}
p.hero-lede{font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--muted);margin:0 0 var(--space-8);max-width:520px;}
.hero-metrics{display:flex;gap:0;flex-wrap:wrap;padding-top:var(--space-6);border-top:1px solid var(--border-soft);}
.hero-metric{display:flex;flex-direction:column;padding-right:28px;margin-right:28px;border-right:1px solid var(--border-soft);}
.hero-metric:last-child{border-right:none;margin-right:0;padding-right:0;}
.hero-metric .num{font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:-0.02em;color:var(--text);}
.hero-metric .lbl{font-size:var(--text-caption-size);color:var(--muted2);margin-top:3px;}

/* ---- Dashboard: la app ya no vende, solo hace una pregunta ---- */
.dash-intro{padding:var(--space-9) var(--space-1) var(--space-7);max-width:600px;}
.dash-title{
  font-family:var(--font-display);font-weight:var(--text-h1-weight);font-size:clamp(24px,3.2vw,38px);
  line-height:var(--text-h1-lh);letter-spacing:var(--text-h1-ls);margin:0 0 var(--space-2);color:var(--text);
}
p.dash-sub{font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--muted);margin:0;}

/* La tarjeta principal de Fundamental y del formulario de Analizar
   decisión, con el radio/padding de Panel/Market (--r-xl, más aire) en
   vez del --r-lg/--space-7 genérico de .card — misma escala visual,
   sin tocar .card en general (la usan decenas de tarjetas internas que
   esta pasada no toca). */
.card-workspace{
  display:flex;flex-direction:column;
  padding:clamp(var(--space-7),4vw,var(--space-8));
  border-radius:var(--r-xl);
}
.workspace-status{display:flex;justify-content:flex-end;margin-bottom:var(--space-4);}
.workspace-pill{
  font-size:var(--text-label-size);font-weight:600;color:var(--muted);background:var(--surface2);
  border:1px solid var(--border-soft);padding:4px 11px;border-radius:var(--r-pill);
}
.workspace-pill.ready{color:var(--green);background:var(--green-soft);border-color:var(--green-soft-border);}
.dropzone-lg{padding:64px 24px;}

/* ---- Gauge ring (signature component) ---- */
.gauge-ring-fill{transition:stroke-dashoffset .8s var(--ease);}
.gauge-wrap{display:flex;align-items:center;gap:12px;}
.gauge-caption{display:flex;flex-direction:column;}
.gauge-caption .gauge-label{font-size:var(--text-label-size);color:var(--muted2);text-transform:uppercase;letter-spacing:.05em;}
.gauge-caption .gauge-sub{font-size:var(--text-caption-size);color:var(--muted);margin-top:2px;}

/* ---- Barra de navegación flotante — SOLO móvil (ver media query
   max-width:900px). En escritorio no se renderiza: hay espacio de
   sobra y una barra fija solo agrega ruido visual. ---- */
.report-nav-dock{display:none;}
.report-nav{
  display:flex;align-items:center;justify-content:center;gap:2px;
  padding:6px;min-height:52px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 40%),
    var(--navblur-bg);
  background-blend-mode:overlay;
  backdrop-filter:blur(22px) saturate(190%);-webkit-backdrop-filter:blur(22px) saturate(190%);
  border:1px solid var(--report-nav-border);border-radius:var(--r-pill);box-shadow:var(--report-nav-shadow);
  transition:box-shadow var(--dur-med) var(--ease-out);
}
html[data-theme="dark"] .report-nav{background-blend-mode:soft-light;}
.report-nav.is-scrolled{box-shadow:var(--report-nav-shadow-scrolled);}
.report-nav-items{position:relative;display:flex;gap:2px;min-width:0;width:100%;}
.report-nav-indicator{
  position:absolute;top:0;left:0;height:100%;border-radius:var(--r-pill);
  background:var(--surface2);box-shadow:inset 0 0 0 1px var(--border-soft),var(--shadow-xs);
  transform:translateX(var(--nav-ind-x,0));width:var(--nav-ind-w,0);
  transition:transform .38s var(--ease),width .38s var(--ease),opacity .2s var(--ease-out);
  opacity:0;pointer-events:none;will-change:transform,width;
}
.report-nav-items.is-ready .report-nav-indicator{opacity:1;}
.report-nav-item{
  position:relative;z-index:1;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:44px;padding:6px 4px;border-radius:var(--r-pill);font-size:10.5px;font-weight:600;color:var(--muted);
  text-decoration:none;white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-out);
}
.report-nav-item svg{opacity:.7;transition:opacity var(--dur-fast) var(--ease-out);flex-shrink:0;}
.report-nav-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.report-nav-item:active{transform:scale(.96);}
.report-nav-item.active{color:var(--text);}
.report-nav-item.active svg{opacity:1;}

.result-group-head{display:flex;align-items:flex-start;gap:14px;margin:0 0 16px;padding:0 2px;flex-wrap:wrap;row-gap:8px;}
.result-group-icon{
  width:36px;height:36px;border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:var(--surface2);border:1px solid var(--border-soft);color:var(--blue);
}
/* flex:1;min-width:0 es lo que evita que este bloque entero "salte" a su
   propia línea en pantallas estrechas: sin min-width:0 un hijo flex nunca
   se encoge por debajo de su ancho de contenido, así que con un título +
   descripción largos (como "Ver los datos") el bloque completo no cabía
   junto al icono y a la flecha (que lleva margin-left:auto) — el icono
   quedaba solo en una fila, el bloque en la siguiente y la flecha suelta
   al final. Con min-width:0 es el TEXTO el que envuelve dentro del
   espacio disponible, icono/título/flecha se quedan en la misma fila. */
.result-group-titles{display:flex;flex-direction:column;gap:2px;padding-top:2px;flex:1 1 0%;min-width:0;}
.result-group-eyebrow{font-family:var(--font-mono);font-size:var(--text-label-size);color:var(--muted2);letter-spacing:.08em;text-transform:uppercase;}
.result-group-title{font-family:var(--font-display);font-weight:var(--text-h3-weight);font-size:var(--text-h3-size);letter-spacing:var(--text-h3-ls);}
.result-group-desc{font-size:var(--text-body-sm-size);color:var(--muted);margin-top:2px;max-width:440px;line-height:1.5;}

.reveal{opacity:0;animation:revealUp .55s var(--ease) forwards;}
@keyframes revealUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
/* El resultado se siente como una conclusión que acaba de formarse, no
   como una tabla que aparece de golpe: cada bloque llega un poco
   después del anterior (Verdict primero, detalles al final). Tope en
   9 para no alargar la espera percibida en informes muy largos. */
.reveal:nth-of-type(1){animation-delay:.02s;}
.reveal:nth-of-type(2){animation-delay:.08s;}
.reveal:nth-of-type(3){animation-delay:.14s;}
.reveal:nth-of-type(4){animation-delay:.2s;}
.reveal:nth-of-type(5){animation-delay:.26s;}
.reveal:nth-of-type(6){animation-delay:.32s;}
.reveal:nth-of-type(7){animation-delay:.38s;}
.reveal:nth-of-type(8){animation-delay:.44s;}
.reveal:nth-of-type(9){animation-delay:.5s;}

/* ---- APEX INTELLIGENCE — pantalla de espera premium (análisis) ----
   Transmite que APEX está trabajando en profundidad, no que la
   pantalla está cargando: sin cronómetro visible, sin porcentaje,
   sin barra de progreso — solo un checklist de pasos (○→◌→✓), una
   animación central discreta y copy que rota despacio. Reutiliza
   únicamente tokens existentes del sistema
   (--surface,--border-soft,--r-*,--shadow-*,--blue,--green,--gold si
   existe) para mantener la identidad visual de APEX. Prefijo "av-"
   (APEX Vision) para no chocar con clases previas. */
/* Material: la tarjeta se lee como un instrumento flotando sobre la
   página, no como otro bloque de contenido — cristal esmerilado con
   un borde superior que "atrapa la luz" (mismo lenguaje que
   .toolbar/.navblur en el resto de APEX), en vez de una superficie
   opaca plana. Con prefers-reduced-transparency cae a --surface
   sólido; sin soporte de backdrop-filter, la regla base ya deja un
   fondo sólido como valor por defecto. */
.av-card{
  position:relative;background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--r-lg);padding:var(--space-6) var(--space-6) var(--space-7);
  box-shadow:var(--shadow-md);margin-top:14px;overflow:hidden;
  opacity:0;filter:blur(6px);transform:scale(.97);
  animation:avMaterialize .55s var(--ease) forwards;
}
@keyframes avMaterialize{to{opacity:1;filter:blur(0);transform:scale(1);}}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .av-card{background:color-mix(in srgb, var(--surface) 88%, transparent);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border-top-color:var(--border);}
}
@media (prefers-reduced-transparency: reduce){
  .av-card{background:var(--surface) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
}
/* Resplandor radial muy sutil, centrado detrás del orbe/diagrama —
   es lo que separa "tarjeta con contenido" de "instrumento en vivo". */
.av-card::before{
  content:"";position:absolute;left:50%;top:96px;width:340px;height:340px;margin:-170px 0 0 -170px;
  background:radial-gradient(circle,var(--blue-soft) 0%,transparent 62%);opacity:.5;pointer-events:none;
}
.av-card.is-max::before{background:radial-gradient(circle,var(--mx-gold-soft,var(--blue-soft)) 0%,transparent 62%);}
.av-card > *{position:relative;}

.av-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px;}
.av-live{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:var(--text-label-size);letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);}
.av-live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;box-shadow:0 0 0 0 var(--green-soft);animation:avLiveDot 1.7s ease-in-out infinite;}
@keyframes avLiveDot{0%,100%{opacity:1;box-shadow:0 0 0 0 var(--green-soft);}50%{opacity:.45;box-shadow:0 0 0 5px var(--green-soft);}}
.av-badge{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted2);border:1px solid var(--border-soft);border-radius:var(--r-pill);padding:4px 10px;background:var(--surface2);}
.av-card.is-max .av-badge{color:var(--mx-gold,var(--muted2));border-color:var(--mx-gold-line,var(--border-soft));background:var(--mx-gold-soft,var(--surface2));}

/* ============================================================
   EL INSTRUMENTO — núcleo + cuatro dimensiones reales (mercado,
   decisión, evidencia, historial) dispuestas como una brújula
   alrededor de un núcleo que sintetiza. Nada de tarjetas/pills
   flotando sueltas (eso es lo que hacía que la versión anterior se
   sintiera como un dashboard de IA genérico): aquí los nodos son
   marcas de instrumento — un punto y una etiqueta mínima — sobre el
   propio fondo de la tarjeta, sin chrome propio.

   Color: dorado/ámbar (--mx-gold, ya definido en :root como el
   "champán" de Max) como único acento de "inteligencia trabajando" en
   TODA la tarjeta — no solo en Max — porque esta pantalla no es una
   función de plan, es la identidad de APEX pensando. El verde marca
   una dimensión ya cruzada; el rojo de marca no aparece aquí (no
   significa nada en este contexto, ver CLAUDE.md). */
.av-card{--av-accent:var(--mx-gold);--av-accent-line:var(--mx-gold-line,var(--border));--av-accent-soft:var(--mx-gold-soft,var(--blue-soft));}
.av-card.is-max{--av-accent:var(--mx-gold-hi,var(--mx-gold));}

.av-core{position:relative;width:100%;max-width:264px;aspect-ratio:1/1;margin:4px auto 2px;}
.av-core.is-simple{max-width:150px;margin-bottom:8px;}
.av-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
/* Trazo inicial: cada línea se dibuja una vez al montar (pathLength
   normaliza el dasharray aunque las cuatro midan lo mismo aquí), con
   un pequeño escalonado por dimensión — la brújula "aparece", no
   hace pop. En reposo queda tenue; se ilumina solo con estado real. */
.av-link{
  stroke:var(--muted2);stroke-width:1;opacity:.22;stroke-dasharray:1;stroke-dashoffset:1;
  animation:avLinkDraw .7s var(--ease) forwards;
  transition:stroke .5s var(--ease),opacity .5s var(--ease),stroke-width .3s var(--ease);
}
@keyframes avLinkDraw{to{stroke-dashoffset:0;}}
.av-link:nth-of-type(1){animation-delay:.1s;} .av-link:nth-of-type(2){animation-delay:.22s;}
.av-link:nth-of-type(3){animation-delay:.34s;} .av-link:nth-of-type(4){animation-delay:.46s;}
.av-link.is-active{stroke:var(--av-accent);opacity:.9;stroke-width:1.4;stroke-dasharray:.06 .05;animation:avLinkDraw .7s var(--ease) forwards,avLinkFlow 1.1s linear .7s infinite;}
@keyframes avLinkFlow{to{stroke-dashoffset:-1;}}
.av-link.is-done{stroke:var(--green);opacity:.4;}
.av-core.is-verdict .av-link{stroke:var(--av-accent);opacity:.55;stroke-dasharray:1;animation:none;}

/* El núcleo: instrumento propio, no un icono. Anillo fijo + esfera
   punteada que gira muy despacio (siempre "analizando", nunca un
   spinner rápido) + un punto de señal que respira. */
.av-hub{position:absolute;left:50%;top:50%;width:26%;height:26%;transform:translate(-50%,-50%);border-radius:50%;transition:transform .6s var(--ease-arrive),width .5s var(--ease),height .5s var(--ease);}
.av-hub-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--border-soft);transition:border-color .6s var(--ease),box-shadow .5s var(--ease);}
.av-hub-dial{position:absolute;inset:14%;border-radius:50%;border:1px dashed var(--border);opacity:.55;animation:avDialSpin 42s linear infinite;}
@keyframes avDialSpin{to{transform:rotate(360deg);}}
.av-hub-core{position:absolute;left:50%;top:50%;width:14%;height:14%;margin:-7% 0 0 -7%;border-radius:50%;background:var(--av-accent);box-shadow:0 0 0 0 var(--av-accent-soft);animation:avCorePulse 2.4s var(--ease) infinite;}
@keyframes avCorePulse{0%,100%{box-shadow:0 0 0 0 var(--av-accent-soft);}50%{box-shadow:0 0 0 8px transparent;}}
.av-core.is-verdict .av-hub{transform:translate(-50%,-50%) scale(1.16);}
.av-core.is-verdict .av-hub-ring{border-color:var(--av-accent);box-shadow:0 0 0 5px var(--av-accent-soft);}
.av-core.is-verdict .av-hub-dial{animation-play-state:paused;opacity:.8;}

/* Marcas de dimensión — punto + etiqueta, sin tarjeta ni borde
   propio: son parte del instrumento, no widgets sueltos. */
.av-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:5px;opacity:0;animation:avNodeIn .45s var(--ease) forwards;animation-delay:var(--av-node-delay,0s);}
@keyframes avNodeIn{to{opacity:1;}}
.av-node-dot{width:6px;height:6px;border-radius:50%;border:1px solid var(--muted2);background:transparent;transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease-arrive);}
.av-node-label{font-family:var(--font-mono);font-size:8.5px;font-weight:600;letter-spacing:.1em;color:var(--muted2);transition:color .35s var(--ease);}
.av-node.is-active .av-node-dot{background:var(--av-accent);border-color:var(--av-accent);box-shadow:0 0 0 4px var(--av-accent-soft);transform:scale(1.2);animation:avNodePing 1.6s var(--ease) infinite;}
@keyframes avNodePing{0%,100%{box-shadow:0 0 0 3px var(--av-accent-soft);}50%{box-shadow:0 0 0 7px transparent;}}
.av-node.is-active .av-node-label{color:var(--av-accent);}
.av-node.is-done .av-node-dot{background:var(--green);border-color:var(--green);opacity:.75;}
.av-node.is-done .av-node-label{color:var(--muted);}
.av-core.is-verdict .av-node .av-node-dot{background:var(--green);border-color:var(--green);opacity:.75;transform:none;box-shadow:none;animation:none;}
.av-core.is-verdict .av-node .av-node-label{color:var(--muted);}

.av-copy{margin-top:6px;}
.av-phase{display:flex;align-items:center;justify-content:center;gap:2px;font-family:var(--font-display);font-weight:600;font-size:var(--text-h4-size);letter-spacing:-.01em;line-height:1.25;color:var(--text);min-height:22px;text-align:center;padding:2px 0 6px;}
.av-phase-txt.is-swapping{animation:tickerFade .6s var(--ease-out);}
.av-caret{display:inline-block;width:2px;height:1em;background:var(--av-accent);animation:avBlink 1s step-end infinite;}
@keyframes avBlink{0%,49%{opacity:1;}50%,100%{opacity:0;}}
.av-micro{min-height:18px;font-size:13px;color:var(--muted2);text-align:center;line-height:1.5;max-width:38ch;margin:0 auto;}
.av-micro.is-swapping{animation:avMicroFade .5s var(--ease-out);}
@keyframes avMicroFade{from{opacity:0;transform:translateY(2px);}to{opacity:1;transform:translateY(0);}}

.av-status-msg{display:flex;align-items:center;gap:9px;font-size:var(--text-body-sm-size);color:var(--muted);padding:14px 4px;}
.av-status-msg::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;animation:avLiveDot 1.7s ease-in-out infinite;}

/* Mobile: el núcleo se reduce y las etiquetas se aprietan un poco,
   pero la composición (brújula + copy debajo) NO cambia — sigue
   contando la misma historia, solo más compacta. */
@media (max-width:560px){
  .av-card{padding:var(--space-5) var(--space-4) var(--space-6);}
  .av-core{max-width:208px;}
  .av-core.is-simple{max-width:128px;}
  .av-node-label{font-size:8px;letter-spacing:.07em;}
  .av-phase{font-size:calc(var(--text-h4-size) - 1px);}
  .av-micro{font-size:12.5px;max-width:32ch;}
}

/* ---- Barrido sobre la captura (Analyze with Chart) ----
   Overlay puro de UI sobre #previewWrap: no procesa ni modifica la
   imagen. Respeta el border-radius/overflow ya existente de
   .preview-wrap. Un degradado translúcido muy sutil que recorre la
   imagen de arriba a abajo — nada de líneas verdes tipo "hacker". */
.preview-wrap.is-scanning::after{
  content:"";position:absolute;left:0;right:0;height:38%;top:-38%;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,var(--blue-soft) 45%,transparent 100%);
  opacity:.55;animation:avScanSweep 3.2s ease-in-out infinite;
}
.preview-wrap.is-scanning::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--blue-soft);opacity:.6;
}
@keyframes avScanSweep{0%{top:-38%;}100%{top:100%;}}
.scan-caption{
  position:absolute;left:0;right:0;bottom:0;padding:8px 12px;text-align:center;
  font-size:11.5px;letter-spacing:.02em;color:#f5efe6;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);
  animation:fadein .4s var(--ease);pointer-events:none;
}

/* Skeletons en resultsArea — anticipan la forma del informe
   (cabecera + gauge + bloques) mientras se genera de verdad. */
.apex-skel-wrap{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-5);}
.apex-skel-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:var(--space-6);box-shadow:var(--shadow-xs);opacity:0;animation:fadein .5s var(--ease) forwards;}
.apex-skel-line{height:12px;border-radius:var(--r-2xs);background:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 37%,var(--surface2) 63%);background-size:400% 100%;animation:tpShimmer 1.4s ease infinite;}
.apex-skel-line + .apex-skel-line{margin-top:10px;}
.apex-skel-head{display:flex;align-items:center;gap:14px;}
.apex-skel-circle{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 37%,var(--surface2) 63%);background-size:400% 100%;animation:tpShimmer 1.4s ease infinite;}

/* ============================================================
   ONBOARDING / COACH MARKS — overlay no intrusivo

   Dos modos de presentación, decididos en JS (ui/onboarding.js):
   - Anclado: la tarjeta flota junto al elemento que señala, con un
     anillo (.coach-spotlight) alrededor.
   - Centrado (.coach-card.is-centered): cuando el elemento no está
     visible (vive en otra pestaña) o en móvil, la tarjeta se centra
     como un modal normal — anclar a algo oculto es lo que dejaba la
     tarjeta sin posición real, encajada en una esquina.
   En los dos casos hay un fondo oscuro uniforme detrás (antes solo
   existía si el anillo del spotlight llegaba a dibujarse).
   ============================================================ */
.coach-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  /* Mismo tono/opacidad que .tt-modal-backdrop (tracker.css): no varía
     por tema, es un velo de oscurecimiento, no una superficie. */
  background: rgba(20,12,6,.6);
  pointer-events: none;
  opacity: 0;
  transition: opacity 250ms var(--ease-out);
}
.coach-overlay.is-visible{
  opacity: 1;
  pointer-events: auto;
}
.coach-spotlight{
  position: fixed;
  border: 2px solid var(--blue);
  border-radius: 10px;
  pointer-events: none;
  transition: all 300ms var(--ease-out);
  opacity: 0;
}
.coach-card{
  position: fixed;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100vh - var(--space-7));
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5) var(--space-6) var(--space-6);
  /* `pointer-events` SE HEREDA de .coach-overlay (none por defecto,
     auto solo con .is-visible) — no fijarlo aquí a "auto": si se
     fija, la tarjeta sigue interceptando clics aunque el overlay ya
     esté cerrado (is-visible quitado), porque queda en el DOM en su
     última posición y una propiedad heredable con valor explícito
     deja de heredar del padre. Eso dejaba zonas de la pantalla
     "muertas" al clic después de cerrar los coach marks. */
  z-index: 1;
  animation: coachCardIn 300ms var(--ease-out);
}
/* Modo centrado (sin objetivo visible, o en móvil): position:fixed
   con solo top/left en 50% ya la centra, sin depender de que
   positionCard() calcule nada — por eso es el fallback seguro. */
.coach-card.is-centered{ top: 50% !important; left: 50% !important; transform: translate(-50%,-50%); }
@keyframes coachCardIn{
  from{opacity: 0; transform: translateY(8px) scale(.98);}
  to{opacity: 1; transform: translateY(0) scale(1);}
}
.coach-card.is-centered{ animation-name: coachCardInCentered; }
@keyframes coachCardInCentered{
  from{opacity: 0; transform: translate(-50%,-50%) translateY(8px) scale(.98);}
  to{opacity: 1; transform: translate(-50%,-50%) translateY(0) scale(1);}
}
.coach-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.coach-progress{
  font-family: var(--font-mono);
  font-size: var(--text-caption-size);
  color: var(--muted2);
}
.coach-close{
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--surface2);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.coach-close:hover{ background: var(--surface3); color: var(--text); }
.coach-close:focus-visible{ outline: none; box-shadow: var(--shadow-focus); }
.coach-title{
  font-family: var(--font-display);
  font-size: var(--text-h4-size);
  font-weight: var(--text-h4-weight);
  margin: 0 0 var(--space-2);
  color: var(--text);
}
.coach-body{
  font-size: var(--text-body-sm-size);
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 var(--space-6);
}
.coach-body strong{ color: var(--text); }
.coach-actions{
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.coach-actions .btn{ width: auto; margin-top: 0; flex: 1; min-width: 0; }
.coach-skip{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  background: none;
  border: none;
  color: var(--muted2);
  font-size: var(--text-caption-size);
  cursor: pointer;
  padding: var(--space-2) 0;
  text-align: center;
  transition: color var(--dur-fast);
}
.coach-skip:hover{ color: var(--muted); }
.coach-skip:hover .coach-skip-box{ border-color: var(--muted); }
.coach-skip:focus-visible{ outline: none; box-shadow: var(--shadow-focus); }
.coach-skip-box{
  flex-shrink: 0;
  width: 14px; height: 14px;
  border: 1.5px solid var(--muted2);
  border-radius: 4px;
  transition: border-color var(--dur-fast);
}
@media (prefers-reduced-motion: reduce){
  .coach-overlay, .coach-spotlight, .coach-card{ transition: none !important; animation: none !important; }
}
.coach-active{ overflow: hidden; }
@media (max-width: 640px){
  /* Por debajo del breakpoint que usa positionCard() para forzar el
     modo centrado (ver COACH_MOBILE_BREAKPOINT en onboarding.js): la
     tarjeta ya llega centrada por JS; el ancho fluido (min(380px,
     100vw-32px)) ya la ajusta a la pantalla, aquí solo se reduce el
     padding para pantallas realmente estrechas. */
  .coach-card{ padding: var(--space-5); }
}

/* ============================================================
   FIRST WEEK CHECKLIST — "Tu primera semana en APEX"
   ============================================================ */
.fw-checklist{
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  margin-top: var(--space-6);
}
.fw-header{
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
}
.fw-title{
  font-family: var(--font-display);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  margin: 0;
  color: var(--text);
}
.fw-progress-wrap{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.fw-progress-bar{
  flex: 1;
  min-width: 120px;
  height: 8px;
  background: var(--surface3);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.fw-progress-fill{
  display: block;
  height: 100%;
  background: var(--green);
  border-radius: var(--r-pill);
  transition: width .5s var(--ease-out);
}
.fw-progress-text{
  font-family: var(--font-mono);
  font-size: var(--text-caption-size);
  color: var(--muted);
  white-space: nowrap;
}
.fw-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.fw-item{
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  transition: all var(--dur-fast) var(--ease-out);
}
.fw-item:hover{
  border-color: var(--muted2);
  background: var(--surface3);
}
.fw-item.fw-done{
  border-color: var(--green-soft-border);
  background: var(--green-soft);
}
.fw-icon{
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.fw-content{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fw-label{
  font-weight: 600;
  font-size: var(--text-body-size);
  color: var(--text);
}
.fw-desc{
  font-size: var(--text-body-sm-size);
  line-height: 1.5;
  color: var(--muted);
}
.fw-done .fw-label{ color: var(--green); }
.fw-done .fw-desc{ color: var(--muted); }
.fw-check{
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.fw-cta{
  width: auto;
  margin-top: 0;
  flex-shrink: 0;
}
.fw-note{
  margin: var(--space-5) 0 0;
  font-size: var(--text-caption-size);
  color: var(--muted2);
  text-align: center;
}

@media (prefers-reduced-motion: reduce){
  .fw-progress-fill{ transition: none !important; }
}

/* ============================================================
   BREADCRUMBS — navegación contextual
   ============================================================ */
.breadcrumbs{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--surface2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  margin-bottom: var(--space-5);
  font-size: var(--text-body-sm-size);
  animation: slideDown 250ms var(--ease-out);
}
@keyframes slideDown{
  from{ opacity: 0; transform: translateY(-8px); }
  to{ opacity: 1; transform: translateY(0); }
}
.bc-item{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
}
.bc-sep{
  color: var(--muted2);
  font-weight: 600;
  flex-shrink: 0;
}
.bc-link{
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  transition: all var(--dur-fast) var(--ease-out);
}
.bc-link:hover{
  color: var(--blue);
  background: var(--blue-soft);
  text-decoration: none;
}
.bc-link:focus-visible{ outline: none; box-shadow: var(--shadow-focus); }
.bc-current{
  color: var(--text);
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce){
  .breadcrumbs{ animation: none; }
}
@media (max-width: 560px){
  .breadcrumbs{ padding: var(--space-2) var(--space-3); font-size: var(--text-caption-size); }
  .bc-item{ gap: var(--space-1); }
}