@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ============================================
   GLOBAL STYLES - Prevo Frontend
   ============================================ */

:root {
  /* Colors — tema oscuro (2026-07-21). El look futurista estrenado en la
     vista Plan se propaga a toda la app vía estos tokens.
     Refresh 2026-07-30: superficies en capas + acento con degradé + glow
     (técnicas del design system de Easy Trader, con la paleta propia de Prevo:
     azul/cian/violeta, no verde). */
  --primary: #38bdf8;
  --primary-dark: #0ea5e9;
  --success: #22c55e;
  --danger: #f43f5e;
  --warning: #fb923c;
  --bg-primary: #0b1120;
  --bg-secondary: #0e1730;
  --text-primary: #e6edf6;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --border: #223049;
  --border-strong: rgba(120, 160, 220, 0.24);
  --surface: #131d34;
  --surface-alt: #0f1830;
  /* Superficies en capas para dar profundidad (las tarjetas dejan de ser un
     tono plano y usan un degradé sutil). */
  --surface-1: #101a30;
  --surface-2: #16223d;
  --surface-3: #1b2a49;
  --brand-gradient: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);

  /* Acento con degradé azul→cian (identidad Prevo, punchy y futurista) +
     violeta como segundo acento (ya presente en el fondo). */
  --accent: #38bdf8;
  --accent-2: #22d3ee;
  --violet: #7c3aed;
  --accent-grad: linear-gradient(100deg, #3b82f6 0%, #22d3ee 100%);
  --accent-dim: rgba(56, 189, 248, 0.12);
  --glow: rgba(56, 189, 248, 0.35);
  --shadow-glow: 0 0 0 1px rgba(56, 189, 248, 0.18), 0 16px 40px -12px rgba(56, 189, 248, 0.22);

  /* Radios (un poco más generosos, estilo ET) */
  --radius-lg: 20px;
  --radius: 14px;
  --radius-sm: 10px;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* Typography */
  --font-primary: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 16px -2px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px -6px rgba(0, 0, 0, 0.55);
}

/* ============================================
   BASE STYLES
   ============================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
}

/* Escala base global (refresh 2026-07-30): 14px en la raíz encoge de forma
   uniforme todo lo basado en rem (tipografía, espaciados, radios) → más
   densidad, menos "todo grande". Los gráficos (canvas/SVG) no dependen de esto. */
html {
  font-size: 14px;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background:
    radial-gradient(120% 60% at 12% 0%, rgba(56, 189, 248, 0.08), transparent 45%),
    radial-gradient(120% 70% at 100% 0%, rgba(124, 58, 237, 0.10), transparent 45%),
    linear-gradient(180deg, #0a0f1e 0%, #0b1120 45%, #090d18 100%);
  background-attachment: fixed;
  line-height: 1.6;
  min-height: 100vh;
}

/* ============================================
   NAVBAR
   ============================================ */

.navbar {
  background: rgba(17, 25, 45, 0.82);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--spacing-md) var(--spacing-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-brand h1 {
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.03em;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.navbar-brand h1::before {
  content: '';
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.4rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #4f86d8 0%, #174ea6 100%);
  box-shadow: 0 0 0 4px rgba(23, 78, 166, 0.08);
}

.navbar-menu {
  display: flex;
  list-style: none;
  gap: var(--spacing-lg);
  flex: 1;
  justify-content: center;
}

.navbar-menu a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease, transform 0.2s ease;
  padding: 0.2rem 0;
}

.navbar-menu .nav-action {
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.navbar-menu a:hover {
  color: var(--primary);
}

.navbar-menu .nav-action:hover {
  color: var(--primary);
}

.navbar-menu a.active {
  color: var(--primary);
  font-weight: 700;
}

/* ============================================
   CONTAINER & LAYOUT
   ============================================ */

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-xl);
  min-height: calc(100vh - 70px);
}

.view {
  display: none;
  animation: fadeIn 0.3s ease;
}

.view.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================
   CARDS & BOXES
   ============================================ */

.card {
  /* Superficie en capas (degradé sutil) en vez de un tono plano → profundidad. */
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: var(--spacing-lg);
  box-shadow: 0 18px 44px -18px rgba(2, 8, 20, 0.7);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.08);
  border-color: rgba(23, 78, 166, 0.18);
}

.card h3 {
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  letter-spacing: -0.02em;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn-primary,
.btn-secondary {
  padding: var(--spacing-sm) var(--spacing-lg);
  border: none;
  border-radius: 12px;
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  font-weight: 600;
}

.btn-primary {
  background: var(--brand-gradient);
  color: white;
}

.btn-primary:hover {
  box-shadow: 0 12px 24px rgba(29, 78, 216, 0.24);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-secondary {
  background-color: var(--surface-alt);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background-color: var(--border);
}

.btn-danger {
  background-color: var(--danger);
  color: white;
}

.btn-danger:hover {
  opacity: 0.9;
}

/* ============================================
   FORMS
   ============================================ */

.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: var(--font-size-base);
  transition: border-color 0.3s ease;
  background: var(--surface);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* ============================================
   TABLES
   ============================================ */

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--spacing-md);
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}

.data-table thead {
  background: linear-gradient(180deg, #16203a 0%, #101a30 100%);
}

.data-table th,
.data-table td {
  padding: var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.data-table th {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.data-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

/* ============================================
   GRIDS
   ============================================ */

.dashboard-grid,
.analysis-container,
.profile-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
  /* Cada tarjeta ocupa SOLO la altura de su contenido: sin esto, la tarjeta
     más alta de la fila estira a todas las demás (rediseño 3.5). */
  align-items: start;
}

/* Tarjeta a ancho completo bajo un grid de 2 columnas (entrenamiento/desempeño
   en Análisis): evita la asimetría de una columna muy larga y otra vacía. */
.analysis-fullwidth {
  margin-top: var(--spacing-lg);
}

.signals-container {
  margin-top: var(--spacing-lg);
}

.analysis-container {
  align-items: start;
}

.dashboard-grid > .card:first-child {
  grid-column: span 1;
}

.dashboard-grid > .card:nth-child(2) {
  grid-column: span 1;
}

.dashboard-grid > .card:nth-child(3),
.dashboard-grid > .card:nth-child(4) {
  grid-column: span 1;
}

.action-row {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-top: var(--spacing-md);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  border: 1px solid transparent;
}

.summary-stack {
  display: grid;
  gap: var(--spacing-lg);
}

.summary-header,
.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.eyebrow {
  margin: 0 0 0.25rem 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.summary-header h4,
.chart-header h4 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.summary-pill,
.chart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Pill de valor neutro (ni positivo ni negativo): fondo gris suave para que
   siempre se lea como badge y no como texto suelto. */
.summary-pill {
  background: var(--surface-muted, rgba(100, 116, 139, 0.12));
  color: var(--text-secondary);
}

.pill-positive {
  background: rgba(22, 163, 74, 0.12);
  color: var(--success);
}

.pill-negative {
  background: rgba(220, 38, 38, 0.12);
  color: var(--danger);
}

.chart-badge {
  background: rgba(29, 78, 216, 0.1);
  color: var(--primary);
}

.summary-grid,
.model-cards {
  display: grid;
  gap: var(--spacing-md);
}

.summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.summary-grid--three {
  /* auto-fit: en tarjetas estrechas colapsa a 2 columnas en vez de apretar 3 */
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.summary-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-card,
.model-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, #141d33 0%, #0f1830 100%);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-sm);
}

.metric-card strong,
.model-card strong {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.metric-label,
.model-card span,
.help-text,
.detail-table th,
.detail-table td {
  color: var(--text-secondary);
}

.metric-card {
  min-width: 0;
}

.metric-card strong {
  /* break-word solo parte palabras si no caben; 'anywhere' partía "Contexto" en "Context o" */
  overflow-wrap: break-word;
}

.metric-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.accent-blue { border-color: rgba(29, 78, 216, 0.18); }
.accent-green { border-color: rgba(22, 163, 74, 0.18); }
.accent-orange { border-color: rgba(234, 88, 12, 0.18); }

.detail-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
}

.detail-table th,
.detail-table td {
  padding: 0.6rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere;
}

.detail-table th {
  width: 42%;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(255, 255, 255, 0.04);
}

.detail-table tr:last-child th,
.detail-table tr:last-child td {
  border-bottom: none;
}

.model-cards {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.model-card--best {
  border-color: var(--success);
  box-shadow: 0 0 0 1px var(--success) inset;
}

.model-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.model-card__head span {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.model-card__head strong {
  font-size: 1rem;
}

.model-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-sm);
}

.model-card__metrics div {
  padding: 0.6rem;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.model-card__metrics span {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.model-card__metrics strong {
  margin-top: 0.25rem;
  font-size: 0.95rem;
}

.chart-shell {
  display: grid;
  gap: var(--spacing-sm);
  text-align: left;
  width: 100%;
  min-width: 0;
}

.chart-shell--interactive {
  gap: 0.6rem;
}

/* ============================================================================
   LEGADO: estilos de la gráfica SVG casera, REMOVIDA del JS (2026-07-31).
   Estas clases (chart-stage, chart-scroll-frame, chart-tooltip, chart-grid-line,
   chart-axis-label, chart-crosshair-*, chart-line*, prediction-*, is-dragging,
   signal-marker-label, etc.) ya no tienen consumidor: la gráfica real es
   TradingView Lightweight Charts (renderLightweightPriceChart).
   Se CONSERVAN a propósito: están interleaved con clases VIVAS (chart-svg,
   chart-bg, chart-legend, legend-swatch--*, lwc-*) y el análisis automático de
   CSS muerto no es confiable acá (llegó a marcar la leyenda visible como muerta).
   CSS muerto es inerte (unos KB); NO investigar de cero — ver CHANGELOG_AI 2026-07-31.
   ============================================================================ */
.chart-stage {
  position: relative;
  width: 100%;
  min-width: 0;
}

.chart-scroll-frame {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  max-width: 100%;
  padding-bottom: 0.45rem;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.6) transparent;
}

.chart-scroll-frame::-webkit-scrollbar {
  height: 10px;
}

.chart-scroll-frame::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45);
  border-radius: 999px;
}

.chart-shell.is-dragging .chart-scroll-frame,
.chart-shell.is-dragging .chart-svg {
  cursor: grabbing;
}

.chart-tooltip {
  position: absolute;
  z-index: 2;
  min-width: 180px;
  max-width: 250px;
  padding: 0.8rem 0.9rem;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.96);
  color: #f8fafc;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.2);
  display: grid;
  gap: 0.15rem;
  pointer-events: none;
}

.chart-tooltip strong {
  font-size: 0.88rem;
  color: #fff;
}

.chart-tooltip span {
  font-size: 0.77rem;
  color: rgba(241, 245, 249, 0.82);
  line-height: 1.35;
}

.chart-footer-note {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: -0.15rem;
}

.chart-meta {
  display: grid;
  justify-items: end;
  gap: 0.25rem;
}

.chart-caption {
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
}

.chart-svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, #141d33 0%, #0f1830 100%);
  border: 1px solid var(--border);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.04);
}

.chart-bg {
  fill: transparent;
}

.chart-grid-line {
  stroke: rgba(148, 163, 184, 0.16);
  stroke-width: 1;
  stroke-dasharray: 5 5;
}

.chart-grid-line--subtle {
  stroke-dasharray: 3 5;
  opacity: 0.4;
}

.chart-divider {
  stroke: rgba(148, 163, 184, 0.22);
  stroke-width: 1;
}

.chart-axis-label {
  fill: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
}

.chart-axis-label--time {
  font-size: 9px;
  letter-spacing: 0.02em;
}

.chart-hitbox {
  cursor: grab;
  pointer-events: all;
}

.chart-crosshair-line {
  stroke: rgba(15, 23, 42, 0.38);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.chart-crosshair-point {
  fill: rgba(15, 23, 42, 0.92);
  stroke: #fff;
  stroke-width: 1.5;
}

.chart-line {
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-line--sma20 {
  stroke: url(#chart-sma20-gradient);
  opacity: 0.9;
}

.chart-line--sma50 {
  stroke: url(#chart-sma50-gradient);
  opacity: 0.85;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.8rem;
  align-items: center;
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.legend-swatch {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  display: inline-block;
}

.legend-swatch--bull { background: linear-gradient(180deg, #25a55b 0%, #17803d 100%); }
.legend-swatch--bear { background: linear-gradient(180deg, #e46d6d 0%, #c53030 100%); }
.legend-swatch--sma20 { background: #e2e8f0; }
.legend-swatch--sma50 { background: #4f86d8; }
.legend-swatch--volume { background: rgba(79, 134, 216, 0.5); }
.legend-swatch--signal { background: rgba(95, 107, 122, 0.88); }
.legend-swatch--poc { background: #7c3aed; }
.legend-swatch--va { background: rgba(37, 99, 235, 0.18); }

/* TradingView Lightweight Charts */
.lwc-host {
  display: block !important;
  width: 100%;
  min-height: 0;
  text-align: left;
  padding: 0;
}
.lwc-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
}
.lwc-caption strong { color: var(--text-primary); font-size: 1.05rem; }
.lwc-canvas { width: 100%; }

/* Prediction overlays */
.prediction-line line {
  stroke-opacity: 0.95;
  stroke-width: 1.5;
}
.prediction-predicted circle {
  stroke: rgba(15, 23, 42, 0.6);
  stroke-width: 1.25;
  filter: drop-shadow(0 2px 4px rgba(2,6,23,0.12));
}
.prediction-line circle {
  stroke: rgba(2,6,23,0.08);
  stroke-width: 1;
  filter: drop-shadow(0 2px 6px rgba(2,6,23,0.08));
}

/* Add prediction legend swatch */
.chart-legend .legend-swatch--prediction {
  background: linear-gradient(180deg, rgba(59,130,246,1) 0%, rgba(99,102,241,1) 100%);
}

.signal-marker-label {
  fill: #0f1830;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.signal-history-strip {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #141d33 0%, #0f1830 100%);
  display: grid;
  gap: var(--spacing-md);
}

.signal-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.signal-history-header h4 {
  margin: 0.15rem 0 0;
  font-size: 1rem;
}

.signal-history-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-sm);
  /* Tope de altura + scroll interno: al acumular señales la caja ya no estira
     la página; las más viejas quedan accesibles con scroll dentro del panel. */
  max-height: 26rem;
  overflow-y: auto;
  padding-right: 0.35rem;
}

/* Scrollbar discreto para la lista de señales (coherente con el tema oscuro). */
.signal-history-list::-webkit-scrollbar {
  width: 8px;
}
.signal-history-list::-webkit-scrollbar-thumb {
  background: rgba(120, 160, 220, 0.28);
  border-radius: 999px;
}
.signal-history-list::-webkit-scrollbar-track {
  background: transparent;
}

.signal-history-item {
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.signal-history-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: 0.45rem;
}

.signal-history-item__head strong {
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.signal-history-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.65rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.45rem;
}

.signal-history-item__status {
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  font-weight: 700;
}

.signal-history-item__body {
  font-size: 0.88rem;
  color: var(--text-primary);
}

body.dark-mode .signal-history-strip,
body.dark-mode .signal-history-item {
  background: rgba(15, 23, 42, 0.95);
}

.mini-bars {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 0.45rem;
  height: 160px;
  padding: 0.75rem;
  border-radius: 16px;
  background: linear-gradient(180deg, #16203a 0%, #101a30 100%);
  border: 1px solid var(--border);
}

.mini-bar {
  border-radius: 999px 999px 8px 8px;
  min-height: 12px;
  background: var(--primary);
  box-shadow: var(--shadow-sm);
}

.bar-positive { background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%); }
.bar-negative { background: linear-gradient(180deg, #fb7185 0%, #ef4444 100%); }

.chart-axis {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.45rem;
  color: var(--text-secondary);
  font-size: 0.75rem;
  text-align: center;
}

.help-text {
  font-size: 0.9rem;
}

.chart-expanded {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  align-items: start;
}

.chart-secondary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-md);
  /* Cada panel mide su propio contenido: sin esto, el panel "Contexto" (muy
     alto) estiraba a "Riesgo" dejando un hueco vacío en su columna. */
  align-items: start;
}

.chart-panel {
  position: relative;
  padding: 0.95rem 1rem 0.9rem;
  border-radius: 18px;
  background: linear-gradient(180deg, #141d33 0%, #0f1830 100%);
  border: 1px solid var(--border);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.035);
  overflow: hidden;
}

.chart-panel::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #0f4c81 0%, #2e6bb5 100%);
}

.chart-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: 0.7rem;
  padding-left: 0.2rem;
}

.chart-panel__head h4 {
  margin: 0.1rem 0 0;
  font-size: 0.96rem;
}

.chart-mini {
  min-height: 160px;
}

.mini-chart-shell {
  display: grid;
  gap: 0.45rem;
}

.mini-chart-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.mini-chart-meta h5 {
  margin: 0.15rem 0 0;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}

.mini-chart-svg {
  width: 100%;
  height: 156px;
  display: block;
}

.mini-chart-bg {
  fill: #0f1830;
}

.mini-chart-line {
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mini-chart-line--primary {
  stroke: #cbd5e1;
}

.mini-chart-line--secondary {
  stroke: #4f86d8;
  opacity: 0.9;
}

.mini-chart-line--risk {
  stroke: #d97706;
}

.mini-chart-average,
.mini-chart-midline {
  stroke: rgba(148, 163, 184, 0.5);
  stroke-dasharray: 4 4;
  stroke-width: 1.2;
}

.mini-chart-axis {
  fill: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
}

.mini-chart-point--primary {
  fill: #cbd5e1;
}

.mini-chart-riskbar {
  fill: #d97706;
}

@media (max-width: 980px) {
  .chart-secondary-grid {
    grid-template-columns: 1fr;
  }

  .chart-section-head {
    flex-direction: column;
  }

  .chart-toolbar {
    justify-content: flex-start;
  }

  .chart-section-note {
    max-width: none;
  }
}

.mini-chart-footer {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.empty-state--compact {
  min-height: 160px;
  border-radius: 16px;
  background: linear-gradient(180deg, #16203a 0%, #101a30 100%);
}

.chart-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.chart-section-head h3 {
  margin-bottom: 0.25rem;
}

.chart-section-note {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
  max-width: 58ch;
}

.chart-toolbar {
  justify-content: flex-end;
  margin-top: 0;
  flex-wrap: wrap;
}

.chart-timeframe-group {
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}

.timeframe-btn {
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  font-size: 0.82rem;
  min-width: 82px;
}

.timeframe-btn.active {
  background: var(--primary);
  color: #04121a;
  border-color: var(--primary);
  box-shadow: 0 8px 18px rgba(56, 189, 248, 0.25);
}

#expanded-price-chart {
  min-height: 540px;
  border-radius: 18px;
  padding: 12px;
  background: linear-gradient(180deg, #141d33 0%, #0f1830 100%);
  border: 1px solid var(--border);
}

#expanded-indicators {
  min-height: 260px;
  border-radius: 18px;
  padding: 12px;
  background: linear-gradient(180deg, #141d33 0%, #0f1830 100%);
  border: 1px solid var(--border);
  overflow-y: auto;
}

.chart-indicators .summary-stack {
  gap: var(--spacing-lg);
}

.chart-indicators .summary-grid--three,
.chart-indicators .summary-grid--four {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.chart-indicators .metric-card,
.chart-indicators .model-card {
  min-height: 92px;
}

.chart-indicators .help-text {
  font-size: 0.84rem;
}

.chart-indicators .summary-grid,
.chart-indicators .model-cards {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.chart-placeholder { min-height: 200px; display:flex; align-items:center; justify-content:center; color:var(--text-secondary);} 

.chart-placeholder {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  align-self: stretch;
  box-sizing: border-box;
}

/* Make expanded SVG taller for better visibility */
#expanded-price-chart .chart-svg { min-height: 450px; height: 450px; }
#expanded-price-chart .chart-scroll-frame { min-height: 450px; }

.empty-state {
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  font-size: 0.95rem;
}

.status-neutral {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-color: var(--border);
}

.status-success {
  background: rgba(22, 163, 74, 0.12);
  color: var(--success);
  border-color: rgba(22, 163, 74, 0.24);
}

.status-error {
  background: rgba(220, 38, 38, 0.12);
  color: var(--danger);
  border-color: rgba(220, 38, 38, 0.24);
}

.status-warning {
  background: rgba(234, 88, 12, 0.12);
  color: var(--warning);
  border-color: rgba(234, 88, 12, 0.24);
}

.activity-log,
.result-panel {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.activity-log strong,
.result-panel strong {
  color: var(--text-primary);
}

/* ============================================
   UTILITIES
   ============================================ */

.info-box,
.features-box,
.signals-box,
.chart-placeholder {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: var(--spacing-lg);
  color: var(--text-secondary);
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.chart-placeholder {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
  .container {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .navbar-container {
    flex-direction: column;
    gap: var(--spacing-md);
    padding-inline: var(--spacing-md);
  }

  .navbar-menu {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .chart-section-head {
    gap: var(--spacing-sm);
  }

  .chart-shell {
    gap: 0.5rem;
  }

  .chart-meta {
    justify-items: start;
  }

  .chart-timeframe-group {
    width: 100%;
    justify-content: space-between;
  }

  .timeframe-btn {
    min-width: 0;
    flex: 1 1 0;
    padding-inline: 0.55rem;
  }

  .chart-toolbar .btn {
    flex: 1 1 calc(50% - 0.5rem);
  }

  .chart-scroll-frame {
    padding-bottom: 0.25rem;
  }

  .chart-tooltip {
    min-width: 160px;
    max-width: min(220px, calc(100vw - 24px));
  }

  .chart-footer-note {
    font-size: 0.75rem;
  }

  #expanded-price-chart .chart-svg {
    min-height: 340px;
    height: 340px;
  }

  #expanded-price-chart .chart-scroll-frame {
    min-height: 340px;
  }

  .dashboard-grid,
  .analysis-container,
  .profile-container,
  .summary-grid,
  .summary-grid--three,
  .summary-grid--four,
  .model-card__metrics,
  .mini-bars,
  .chart-axis,
  .chart-secondary-grid,
  .signal-history-list {
    grid-template-columns: 1fr;
  }

  .chart-expanded {
    gap: var(--spacing-sm);
  }

  .chart-panel {
    padding: 0.85rem 0.85rem 0.75rem;
  }

  .chart-panel__head {
    margin-bottom: 0.55rem;
  }

  .chart-panel__head h4 {
    font-size: 0.92rem;
  }

  .signal-history-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .summary-header,
  .chart-header,
  .model-card__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .chart-meta {
    justify-items: start;
  }

  .data-table th,
  .data-table td {
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
  }

  .detail-table th,
  .detail-table td {
    padding: 0.7rem 0.8rem;
  }

  .card {
    padding: var(--spacing-lg);
  }
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  animation: spin 1s linear infinite;
}


/* ============================================================
   Plan de Operación — tema futurista (SCOPED a .plan-view)
   ============================================================ */
.plan-view { color: #e6edf6; }
.plan-shell {
  position: relative;
  border-radius: 24px;
  padding: clamp(1.2rem, 3vw, 2.2rem);
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(34,211,238,0.10), transparent 55%),
    radial-gradient(120% 90% at 100% 10%, rgba(124,58,237,0.14), transparent 55%),
    linear-gradient(180deg, #0b1120 0%, #070a14 100%);
  border: 1px solid rgba(148,163,184,0.14);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.plan-view .plan-eyebrow { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; color: #7dd3fc; margin: 0 0 0.35rem; }
.plan-hero { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:flex-end; margin-bottom:1.4rem; }
.plan-title { margin:0; font-size: clamp(1.3rem, 2.5vw, 1.9rem); font-weight:800; letter-spacing:-0.01em; color:#f1f5f9; }
.plan-sub { margin:0.35rem 0 0; color:#93a2b8; font-size:0.9rem; }
.plan-tag { display:inline-block; margin-left:0.4rem; padding:0.1rem 0.5rem; border-radius:999px; background:rgba(34,211,238,0.12); color:#67e8f9; font-size:0.72rem; border:1px solid rgba(34,211,238,0.25); }
.plan-controls { display:flex; gap:0.5rem; }
.plan-input { background: rgba(255,255,255,0.05); border:1px solid rgba(148,163,184,0.22); color:#e6edf6; border-radius:12px; padding:0.6rem 0.8rem; width:110px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; }
.plan-input:focus { outline:none; border-color:#22d3ee; box-shadow:0 0 0 3px rgba(34,211,238,0.18); }
.plan-btn { background: linear-gradient(180deg, #22d3ee 0%, #0ea5e9 100%); color:#04121a; font-weight:800; border:none; border-radius:12px; padding:0.6rem 1.1rem; cursor:pointer; box-shadow: 0 8px 24px rgba(14,165,233,0.35); }
.plan-btn:hover { filter:brightness(1.06); }
.plan-stepper { position:relative; margin-bottom:1.6rem; padding-top:0.4rem; }
.plan-stepper__track { position:absolute; left:0; right:0; top:19px; height:2px; background:rgba(148,163,184,0.2); border-radius:2px; }
.plan-stepper__fill { position:absolute; left:0; top:0; height:100%; width:0; background:linear-gradient(90deg,#22d3ee,#7c3aed); border-radius:2px; transition:width .4s ease; box-shadow:0 0 12px rgba(34,211,238,0.6); }
.plan-stepper__steps { position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:0.5rem; }
.plan-step { text-align:center; }
.plan-step__dot { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:#0b1120; border:2px solid rgba(148,163,184,0.3); color:#93a2b8; font-weight:800; font-size:0.85rem; position:relative; z-index:1; transition:all .3s ease; }
.plan-step.is-done .plan-step__dot { border-color:#22d3ee; color:#04121a; background:#22d3ee; box-shadow:0 0 14px rgba(34,211,238,0.6); }
.plan-step.is-active .plan-step__dot { border-color:#7c3aed; color:#e6edf6; box-shadow:0 0 16px rgba(124,58,237,0.7); animation:planPulse 1s infinite; }
.plan-step__label { display:block; margin-top:0.4rem; font-size:0.78rem; font-weight:700; color:#cbd5e1; }
.plan-step__detail { display:block; margin-top:0.15rem; font-size:0.7rem; color:#7387a0; min-height:2.4em; padding:0 0.2rem; opacity:0; transition:opacity .3s ease; }
.plan-step.is-done .plan-step__detail, .plan-step.is-active .plan-step__detail { opacity:1; }
.plan-progress { position:absolute; right:0; top:-2px; font-size:0.8rem; color:#67e8f9; font-weight:800; }
@keyframes planPulse { 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.14);} }
.plan-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:1.1rem; opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; }
.plan-grid.is-ready { opacity:1; transform:none; }
.plan-card { background:rgba(255,255,255,0.035); border:1px solid rgba(148,163,184,0.14); border-radius:18px; padding:1.1rem 1.2rem; }
.plan-side { display:flex; flex-direction:column; gap:1.1rem; }
.plan-card--main { position:relative; overflow:hidden; }
.plan-card--main.is-long { box-shadow: inset 0 0 0 1px rgba(34,197,94,0.25), 0 0 40px rgba(34,197,94,0.08); }
.plan-card--main.is-short { box-shadow: inset 0 0 0 1px rgba(244,63,94,0.25), 0 0 40px rgba(244,63,94,0.08); }
.plan-card__head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.plan-direction { font-size:2.4rem; font-weight:900; letter-spacing:0.02em; line-height:1; margin:0.1rem 0 0.2rem; }
.plan-direction.is-long { color:#4ade80; text-shadow:0 0 24px rgba(34,197,94,0.5); }
.plan-direction.is-short { color:#fb7185; text-shadow:0 0 24px rgba(244,63,94,0.5); }
.plan-direction.is-neutral { color:#94a3b8; }
.conf-ring { position:relative; width:64px; text-align:center; flex:0 0 auto; }
.conf-ring svg { transform:rotate(-90deg); }
.conf-ring__bg { fill:none; stroke:rgba(148,163,184,0.2); stroke-width:6; }
.conf-ring__val { fill:none; stroke:#22d3ee; stroke-width:6; stroke-linecap:round; transition:stroke-dashoffset .8s ease; filter:drop-shadow(0 0 6px rgba(34,211,238,0.6)); }
.conf-ring__num { position:absolute; top:19px; left:0; right:0; font-weight:800; font-size:1rem; color:#e6edf6; }
.conf-ring__num span { font-size:0.6rem; color:#93a2b8; }
.conf-ring__cap { font-size:0.62rem; color:#7387a0; text-transform:uppercase; letter-spacing:0.1em; margin-top:0.2rem; }
.plan-levels { margin-top:1.2rem; display:grid; gap:0.5rem; }
.level-row { display:grid; grid-template-columns:1fr auto auto; align-items:baseline; gap:0.6rem; padding:0.5rem 0.7rem; border-radius:10px; background:rgba(255,255,255,0.03); }
.level-row span { color:#93a2b8; font-size:0.85rem; }
.level-row strong { font-size:1.1rem; font-weight:800; color:#f1f5f9; text-align:right; }
.level-row em { font-style:normal; font-size:0.78rem; color:#7387a0; min-width:3.4em; text-align:right; }
.level-row--sl strong { color:#fb7185; }
.level-row--tp strong { color:#4ade80; }
.level-row--rr strong { color:#67e8f9; }
.level-bar { margin-top:1.1rem; padding:1.7rem 0 0.4rem; }
.level-bar__track { position:relative; height:6px; border-radius:6px; background:rgba(148,163,184,0.18); }
.level-bar__risk { position:absolute; top:0; height:100%; background:rgba(244,63,94,0.5); border-radius:6px; }
.level-bar__reward { position:absolute; top:0; height:100%; background:rgba(34,197,94,0.5); border-radius:6px; }
.level-bar__mark { position:absolute; top:-1.6rem; transform:translateX(-50%); font-size:0.68rem; color:#cbd5e1; white-space:nowrap; }
.level-bar__mark i { display:block; width:2px; height:14px; margin:0 auto 3px; }
.level-bar__mark--sl i { background:#fb7185; } .level-bar__mark--sl { color:#fb7185; }
.level-bar__mark--tp i { background:#4ade80; } .level-bar__mark--tp { color:#4ade80; }
.level-bar__mark--entry i { background:#e6edf6; }
.plan-disclaimer { margin:1.1rem 0 0; font-size:0.75rem; color:#7387a0; }
.market-tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:0.6rem; margin-top:0.4rem; }
.market-tile { background:rgba(255,255,255,0.03); border:1px solid rgba(148,163,184,0.12); border-radius:12px; padding:0.7rem 0.8rem; }
.market-tile span { display:block; font-size:0.72rem; color:#7387a0; text-transform:uppercase; letter-spacing:0.06em; }
.market-tile strong { display:block; font-size:1.25rem; font-weight:800; color:#f1f5f9; margin-top:0.2rem; }
.market-tile em { font-style:normal; font-size:0.75rem; color:#7387a0; }
.market-tile .up { color:#4ade80; } .market-tile .down { color:#fb7185; }
.plan-brief { margin:0.3rem 0 0; color:#b6c2d4; font-size:0.9rem; line-height:1.55; }
@media (max-width: 900px) {
  .plan-grid { grid-template-columns:1fr; }
  .plan-stepper__steps { grid-template-columns:repeat(3,1fr); row-gap:1rem; }
  .plan-stepper__track, .plan-progress { display:none; }
  .plan-hero { align-items:flex-start; }
}

/* ============================================================
   Toques neón (acentos cian) — acercan toda la app al look de Plan
   ============================================================ */
:root { --accent: #38bdf8; --accent-soft: #7dd3fc; }

/* Eyebrows de sección en cian (pops de color en cada tarjeta) */
.eyebrow { color: var(--accent-soft); }

/* Barra de acento a la izquierda de los títulos de página */
.container > .view > h2 {
  position: relative;
  padding-left: 0.95rem;
}
.container > .view > h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #38bdf8, #7c3aed);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
}

/* Línea superior sutil + glow al pasar el cursor en las tarjetas */
.card { position: relative; }
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, transparent 6%, rgba(56, 189, 248, 0.45), rgba(124, 58, 237, 0.35), transparent 94%);
  opacity: 0.7;
  pointer-events: none;
}
.card:hover {
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(56, 189, 248, 0.22);
}

/* Botón primario y navegación activa con glow */
.btn-primary { box-shadow: 0 8px 22px rgba(56, 189, 248, 0.28); }
.navbar-menu a.active {
  color: var(--accent);
  text-shadow: 0 0 14px rgba(56, 189, 248, 0.55);
}

/* Badges y bordes de acento más vivos sobre oscuro */
.chart-badge { background: rgba(56, 189, 248, 0.12); color: var(--accent-soft); }
.accent-blue { border-color: rgba(56, 189, 248, 0.32); }
.accent-green { border-color: rgba(34, 197, 94, 0.32); }
.accent-orange { border-color: rgba(251, 146, 60, 0.32); }
.summary-pill { border: 1px solid rgba(148, 163, 184, 0.14); }
.model-card--best { box-shadow: 0 0 0 1px var(--success) inset, 0 0 22px rgba(34, 197, 94, 0.12); }

/* Score/estado en confluencia y el chart-badge de score con leve glow */
.summary-pill.pill-positive { box-shadow: 0 0 14px rgba(34, 197, 94, 0.12); }

/* ── Banner de nivel de acceso (Fase 3: preview sin pago) ── */
.preview-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 auto 1rem;
  padding: 0.7rem 1.1rem;
  max-width: 1200px;
  border-radius: 10px;
  font-size: 0.92rem;
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.10), rgba(56, 189, 248, 0.03));
  color: var(--text-primary, #e6edf3);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.12);
}
.preview-banner[data-state="exhausted"] {
  border-color: rgba(251, 191, 36, 0.45);
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.03));
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.12);
}
.preview-cta {
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  color: #04121f;
  background: linear-gradient(90deg, #38bdf8, #22d3ee);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.preview-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.5);
}

/* ── Puente a la app principal (DEC-037) ── */
.nav-main-app {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  color: var(--accent, #38bdf8);
  border: 1px solid rgba(56, 189, 248, 0.45);
  background: rgba(56, 189, 248, 0.08);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.nav-main-app:hover {
  background: rgba(56, 189, 248, 0.18);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}

/* ── Bloqueo por plan / cuota, con salida ── */
.upgrade-notice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1.1rem 1.25rem;
  border-radius: 12px;
  border: 1px solid rgba(251, 191, 36, 0.4);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.10), rgba(251, 191, 36, 0.02));
}
.upgrade-notice-title {
  margin: 0;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text-primary, #e6edf3);
}
.upgrade-notice-text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary, #9fb0c0);
}

/* ── Vista "Mi Cuenta" (datos reales de sesión) ── */
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  font-size: 0.92rem;
}
.account-row:last-of-type { border-bottom: none; }
.account-row span { color: var(--text-secondary, #9fb0c0); }
.account-row strong { color: var(--text-primary, #e6edf3); text-align: right; word-break: break-word; }
.account-row + .help-text { margin-top: 0.8rem; }

/* Título del historial propio */
.strip-title {
  margin: 1rem 0 0.5rem;
  font-size: 0.95rem;
  color: var(--text-primary, #e6edf3);
}

/* Estado inicial del Plan (sin maqueta con precios falsos) */
.plan-placeholder {
  padding: 2rem 1.5rem;
  text-align: center;
  border-radius: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.3);
}
.plan-placeholder-title { margin: 0 0 0.5rem; font-weight: 700; font-size: 1.05rem; }
.plan-placeholder-text { margin: 0; font-size: 0.92rem; color: var(--text-secondary, #9fb0c0); }

/* ── Disclaimer de honestidad (§T/§Z): la capa direccional NO garantiza resultados ── */
.model-disclaimer {
  margin: 0.75rem 0;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text-secondary, #9fb0c0);
  background: rgba(251, 191, 36, 0.07);
  border: 1px solid rgba(251, 191, 36, 0.28);
}
.model-disclaimer strong { color: var(--text-primary, #e6edf3); }

/* ── Sizing por riesgo en el Plan (soporte de futuros) ── */
.plan-sizing {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
}
.plan-sizing .plan-eyebrow { margin-bottom: 0.5rem; }
#plan-risk { max-width: 7rem; }

/* ============================================================
   REFRESH VISUAL 2026-07-30
   Técnicas del design system de Easy Trader (superficies en capas,
   tipografía display, tiles cohesivos, glow) con la paleta propia de
   Prevo. NO toca dimensiones de los gráficos ni la vista Plan.
   ============================================================ */

/* Tipografía display en títulos → jerarquía más marcada y aire futurista. */
h1, h2, h3, h4,
.card h3,
.summary-header h4,
.chart-header h4,
.navbar-brand h1 {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}

/* Números de los tiles con display + cifras alineadas (tabular-nums). */
.metric-card strong,
.model-card strong {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Stat-tiles cohesivos: superficie en capas, barra de acento a la izquierda y
   micro-lift al hover. La barra usa un color por variante (azul/verde/naranja). */
.metric-card {
  --tile-accent: rgba(56, 189, 248, 0.55);
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--surface-3) 0%, var(--surface-1) 100%);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.metric-card::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--tile-accent);
  opacity: 0.85;
}
.metric-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -14px rgba(2, 8, 20, 0.8);
}
.accent-blue   { --tile-accent: #38bdf8; }
.accent-green  { --tile-accent: #22c55e; }
.accent-orange { --tile-accent: #fb923c; }

/* Botón secundario: superficie en capas + borde vivo + glow al hover
   (deja de verse plano y hace juego con el primario). */
.btn-secondary {
  background: linear-gradient(180deg, var(--surface-3) 0%, var(--surface-1) 100%);
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover {
  background: linear-gradient(180deg, var(--surface-3) 0%, var(--surface-2) 100%);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.14);
}

/* Densidad: agrupar métricas un poco más juntas (menos huecos muertos). */
.summary-stack { gap: var(--spacing-md); }

/* Tablas: cabecera con acento sutil y filas más legibles. */
.data-table thead th { color: var(--text-secondary); }
.detail-table th { color: var(--text-secondary); font-weight: 600; }

/* ---- Pass 2: más carácter por tarjeta (headers, números hero, glow) ---- */

/* Cada título de tarjeta enmarcado con una barra de acento con glow (mismo
   lenguaje que el título de vista) → toda tarjeta se lee como "diseñada". */
.card h3 {
  position: relative;
  padding-left: 0.85rem;
}
.card h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.12em;
  bottom: 0.12em;
  width: 3px;
  border-radius: 999px;
  background: var(--accent-grad);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

/* Glow interno sutil en las tarjetas (iluminadas desde la esquina, estilo ET). */
.card {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(56, 189, 248, 0.06), transparent 42%),
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%);
}

/* Números hero: presencia sin pasarse de tamaño. */
.metric-card strong,
.model-card strong {
  font-size: 1.2rem;
  line-height: 1.15;
}

/* Título de vista con jerarquía, más contenido. */
.container > .view > h2 {
  font-size: 1.55rem;
}

/* Chip/eyebrow y badges con un pelín más de glow para cohesión. */
.chart-badge {
  border: 1px solid rgba(56, 189, 248, 0.22);
}