:root {
      --bg: #07111f;
      --panel: rgba(15, 23, 42, 0.82);
      --panel-strong: rgba(15, 23, 42, 0.96);
      --line: rgba(148, 163, 184, 0.18);
      --muted: #94a3b8;
      --text: #e5e7eb;
      --soft: #cbd5e1;
      --accent: #38bdf8;
      --accent-2: #22c55e;
      --danger: #fb7185;
      --warning: #fbbf24;
      --shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
      --radius: 22px;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at 12% 8%, rgba(56, 189, 248, 0.22), transparent 34%),
        radial-gradient(circle at 88% 10%, rgba(34, 197, 94, 0.16), transparent 30%),
        radial-gradient(circle at 50% 92%, rgba(99, 102, 241, 0.16), transparent 36%),
        var(--bg);
    }

    button, input { font: inherit; }
    button { border: 0; cursor: pointer; }

    .app-shell {
      width: min(1480px, calc(100% - 36px));
      margin: 0 auto;
      padding: 28px 0 44px;
    }

    .topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      margin-bottom: 22px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 250px;
    }

    .brand-mark {
      width: 46px;
      height: 46px;
      flex-shrink: 0;
      border-radius: 16px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(56,189,248,.96), rgba(34,197,94,.88));
      box-shadow: 0 14px 42px rgba(56, 189, 248, 0.24);
      font-weight: 900;
      font-size: 13px;
      color: #06111f;
      letter-spacing: -0.04em;
    }

    .brand h1 { font-size: 18px; margin: 0; letter-spacing: -0.02em; }
    .brand p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }

    .search-card {
      flex: 1;
      max-width: 620px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px;
      border: 1px solid var(--line);
      background: rgba(2, 6, 23, 0.44);
      backdrop-filter: blur(18px);
      border-radius: 18px;
      box-shadow: var(--shadow);
    }

    .search-card input {
      width: 100%;
      border: 0;
      outline: 0;
      color: var(--text);
      background: transparent;
      font-size: 16px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 12px 10px;
    }

    .search-card input::placeholder {
      color: rgba(203, 213, 225, 0.52);
      text-transform: none;
      letter-spacing: 0;
      font-weight: 500;
    }

    .primary-btn {
      border-radius: 14px;
      padding: 12px 18px;
      background: linear-gradient(135deg, rgba(56, 189, 248, 0.96), rgba(34, 197, 94, 0.88));
      color: #06111f;
      font-weight: 900;
      box-shadow: 0 16px 34px rgba(56, 189, 248, 0.18);
      transition: transform 160ms ease, filter 160ms ease;
      white-space: nowrap;
    }

    .primary-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
    .primary-btn:disabled { opacity: 0.55; cursor: wait; transform: none; }

    .tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 18px;
      overflow-x: auto;
      padding-bottom: 4px;
    }

    .tab {
      padding: 10px 14px;
      border: 1px solid var(--line);
      background: rgba(15, 23, 42, 0.56);
      border-radius: 999px;
      color: var(--muted);
      font-weight: 700;
      white-space: nowrap;
    }

    .tab.active {
      color: var(--text);
      border-color: rgba(56, 189, 248, 0.38);
      background: rgba(56, 189, 248, 0.14);
    }

    .tab.disabled { opacity: 0.48; cursor: not-allowed; }

    .status-banner {
      display: none;
      margin-bottom: 18px;
      padding: 14px 16px;
      border-radius: 18px;
      border: 1px solid rgba(148, 163, 184, 0.18);
      background: rgba(15, 23, 42, 0.66);
      color: var(--soft);
      font-size: 14px;
      line-height: 1.45;
    }
    .status-banner.success { border-color: rgba(34, 197, 94, 0.26); background: rgba(34, 197, 94, 0.10); color: #bbf7d0; }
    .status-banner.warning { border-color: rgba(251, 191, 36, 0.28); background: rgba(251, 191, 36, 0.10); color: #fde68a; }
    .status-banner.error { border-color: rgba(251, 113, 133, 0.30); background: rgba(251, 113, 133, 0.11); color: #fecdd3; }

    .grid { display: grid; gap: 16px; }
    .overview-grid { grid-template-columns: 1.08fr 0.92fr; align-items: stretch; margin-bottom: 16px; }
    .detail-grid { grid-template-columns: 1fr 1fr; align-items: start; }
    .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
    .quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }

    .hero-card,
    .panel,
    .metric-card {
      border: 1px solid var(--line);
      background: var(--panel);
      backdrop-filter: blur(22px);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .hero-card {
      padding: 22px;
      position: relative;
      overflow: hidden;
      min-height: 250px;
    }

    .hero-card::after {
      content: "";
      position: absolute;
      width: 280px;
      height: 280px;
      border-radius: 50%;
      background: rgba(56, 189, 248, 0.11);
      filter: blur(4px);
      right: -94px;
      top: -110px;
      pointer-events: none;
    }

    .asset-pill {
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(56, 189, 248, 0.13);
      border: 1px solid rgba(56, 189, 248, 0.24);
      color: #bae6fd;
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 18px;
    }

    .asset-title { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
    .asset-title h2 { margin: 0; font-size: clamp(42px, 6vw, 72px); letter-spacing: -0.08em; line-height: 0.96; }
    .asset-title span { color: var(--muted); font-size: 14px; font-weight: 700; }
    .asset-name { margin: 0 0 22px; color: var(--soft); font-size: 18px; max-width: 760px; line-height: 1.4; }

    .price-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
    .price { font-size: clamp(34px, 4.4vw, 54px); font-weight: 900; letter-spacing: -0.06em; }
    .change {
      padding: 9px 12px;
      border-radius: 999px;
      font-weight: 900;
      background: rgba(148, 163, 184, 0.10);
      color: var(--soft);
      margin-bottom: 8px;
    }
    .change.positive { color: #bbf7d0; background: rgba(34, 197, 94, 0.14); }
    .change.negative { color: #fecdd3; background: rgba(251, 113, 133, 0.14); }

    .meta-line { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; color: var(--muted); font-size: 13px; }
    .meta-line span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(2, 6, 23, 0.20); }

    .panel { padding: 18px; }
    .panel-title { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
    .panel-title h3 { margin: 0; font-size: 17px; letter-spacing: -0.02em; }
    .panel-title p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

    .metric-card { padding: 16px; min-height: 126px; }
    .metric-card label { display: block; margin-bottom: 10px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; }
    .metric-card strong { display: block; font-size: 23px; line-height: 1.1; letter-spacing: -0.04em; word-break: break-word; }
    .metric-card small { display: block; margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.35; }
    .metric-card .positive { color: #bbf7d0; }
    .metric-card .negative { color: #fecdd3; }
    .metric-card .warning { color: #fde68a; }

    .side-stack { display: grid; gap: 16px; }
    .mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

    .range-buttons { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
    .range-btn {
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(148, 163, 184, 0.12);
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
    }
    .range-btn.active { color: #06111f; background: linear-gradient(135deg, rgba(56, 189, 248, 0.95), rgba(34, 197, 94, 0.88)); }

    .chart-wrap { width: 100%; height: 500px; }

    .table-list { display: grid; gap: 10px; }
    .table-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(148, 163, 184, 0.10); }
    .table-row:last-child { border-bottom: 0; }
    .table-row span { color: var(--muted); font-size: 13px; }
    .table-row strong { font-size: 14px; text-align: right; max-width: 56%; }

    .insight-list { display: grid; gap: 12px; }
    .insight { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 12px; border: 1px solid rgba(148, 163, 184, 0.14); border-radius: 16px; background: rgba(2, 6, 23, 0.24); }
    .insight-icon { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: rgba(56, 189, 248, 0.15); color: #bae6fd; font-weight: 900; }
    .insight-icon.positive { background: rgba(34, 197, 94, 0.16); color: #bbf7d0; }
    .insight-icon.negative { background: rgba(251, 113, 133, 0.16); color: #fecdd3; }
    .insight-icon.warning { background: rgba(251, 191, 36, 0.16); color: #fde68a; }
    .insight strong { display: block; font-size: 14px; margin-bottom: 4px; }
    .insight span { display: block; color: var(--muted); font-size: 13px; line-height: 1.42; }

    .loader { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; background: rgba(2, 6, 23, 0.45); backdrop-filter: blur(6px); }
    .loader.show { display: grid; }
    .loader-card { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--panel-strong); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--soft); }
    .spinner { width: 18px; height: 18px; border: 3px solid rgba(148, 163, 184, 0.28); border-top-color: var(--accent); border-radius: 50%; animation: spin 850ms linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }

    @media (max-width: 1080px) {
      .topbar { flex-direction: column; align-items: stretch; }
      .search-card { max-width: none; }
      .overview-grid, .detail-grid { grid-template-columns: 1fr; }
      .kpi-grid, .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 640px) {
      .app-shell { width: min(100% - 24px, 1480px); padding-top: 18px; }
      .mini-grid, .kpi-grid, .quick-grid { grid-template-columns: 1fr; }
      .panel-title { flex-direction: column; align-items: flex-start; }
      .range-buttons { justify-content: flex-start; }
      .chart-wrap { height: 380px; }
      .search-card { flex-direction: column; align-items: stretch; }
      .primary-btn { width: 100%; }
      .table-row { align-items: flex-start; }
      .table-row strong { max-width: 62%; }
    }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.empty-panel {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
  color: var(--soft);
  margin-bottom: 16px;
}

.empty-panel h2 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: clamp(26px, 4vw, 42px);
  letter-spacing: -0.05em;
}

.empty-panel p { margin: 0 0 12px; color: var(--muted); line-height: 1.5; }
.empty-panel span { color: #bae6fd; font-weight: 800; }
.empty-panel.error-state { border-color: rgba(251, 113, 133, 0.30); background: rgba(251, 113, 133, 0.08); }

.fundamentals-hero { margin-bottom: 16px; }
.fundamentals-hero h2 {
  margin: 6px 0 6px;
  font-size: clamp(34px, 5vw, 58px);
  letter-spacing: -0.07em;
  line-height: 1;
}
.fundamentals-hero p { margin: 0; color: var(--soft); font-size: 17px; line-height: 1.45; }

.fundamentals-section { margin-bottom: 16px; }
.fundamentals-metric-grid { margin-bottom: 0; }
.fundamentals-statements { grid-template-columns: 1fr; margin-top: 16px; }
.statement-panel { overflow: hidden; }
.statement-scroll { overflow-x: auto; }

.fundamental-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  font-size: 13px;
}

.fundamental-table th,
.fundamental-table td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.11);
  text-align: right;
  white-space: nowrap;
}

.fundamental-table th:first-child,
.fundamental-table td:first-child {
  text-align: left;
  color: var(--soft);
  font-weight: 800;
}

.fundamental-table th {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 11px;
}

.empty-mini {
  padding: 18px;
  border: 1px dashed rgba(148, 163, 184, 0.25);
  border-radius: 16px;
  color: var(--muted);
  background: rgba(2, 6, 23, 0.18);
}

/* Fase 3 - gráficos financieros y semáforo de fundamentales */
.metric-legend-panel {
  margin-bottom: 16px;
  padding: 14px 16px;
}

.metric-legend-panel p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.metric-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  color: var(--soft);
  font-size: 13px;
  font-weight: 800;
}

.metric-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  background: rgba(148, 163, 184, 0.78);
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.10);
}

.status-dot.positive { background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14); }
.status-dot.warning { background: #fbbf24; box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.14); }
.status-dot.negative { background: #fb7185; box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.14); }
.status-dot.neutral { background: #94a3b8; box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.10); }
.status-dot.unknown { background: #64748b; box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.10); }

.metric-eval {
  position: relative;
  overflow: hidden;
}

.metric-eval::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: rgba(148, 163, 184, 0.42);
}

.metric-eval.positive {
  border-color: rgba(34, 197, 94, 0.34);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(15, 23, 42, 0.82));
}
.metric-eval.positive::before { background: #22c55e; }
.metric-eval.positive strong { color: #bbf7d0; }

.metric-eval.warning {
  border-color: rgba(251, 191, 36, 0.34);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.11), rgba(15, 23, 42, 0.82));
}
.metric-eval.warning::before { background: #fbbf24; }
.metric-eval.warning strong { color: #fde68a; }

.metric-eval.negative {
  border-color: rgba(251, 113, 133, 0.36);
  background: linear-gradient(135deg, rgba(251, 113, 133, 0.12), rgba(15, 23, 42, 0.82));
}
.metric-eval.negative::before { background: #fb7185; }
.metric-eval.negative strong { color: #fecdd3; }

.metric-eval.neutral,
.metric-eval.unknown {
  border-color: rgba(148, 163, 184, 0.18);
}

.metric-eval-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.metric-eval-head label {
  margin-bottom: 0;
}

.metric-badge {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(148, 163, 184, 0.12);
  color: var(--muted);
  border: 1px solid rgba(148, 163, 184, 0.15);
}

.metric-badge.positive { color: #bbf7d0; background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.26); }
.metric-badge.warning { color: #fde68a; background: rgba(251, 191, 36, 0.13); border-color: rgba(251, 191, 36, 0.28); }
.metric-badge.negative { color: #fecdd3; background: rgba(251, 113, 133, 0.14); border-color: rgba(251, 113, 133, 0.28); }
.metric-badge.neutral { color: #cbd5e1; background: rgba(148, 163, 184, 0.11); }
.metric-badge.unknown { color: #cbd5e1; background: rgba(100, 116, 139, 0.11); }

.financial-charts-panel { margin-bottom: 16px; }
.financial-charts-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.financial-chart {
  width: 100%;
  height: 390px;
  min-height: 390px;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 18px;
  background: rgba(2, 6, 23, 0.20);
  padding: 12px;
  overflow: hidden;
}

.chart-message {
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
}

@media (max-width: 1080px) {
  .financial-charts-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .financial-chart { height: 340px; min-height: 340px; }
  .metric-eval-head { flex-direction: column; gap: 6px; }
}

/* Fase 5 - Tab Dividendos */
.dividends-hero { margin-bottom: 16px; }
.dividends-section { margin-bottom: 16px; }
.dividend-charts-panel { margin-bottom: 16px; }
.dividend-charts-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.dividend-chart {
  width: 100%;
  height: 380px;
  min-height: 380px;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 18px;
  background: rgba(2, 6, 23, 0.20);
  padding: 12px;
  overflow: hidden;
}
.dividends-tables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chart-message span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 1080px) {
  .dividend-charts-grid,
  .dividends-tables { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .dividend-chart { height: 330px; min-height: 330px; }
}

/* Fase 6 - Tab Riesgo */
.risk-hero { margin-bottom: 16px; }
.risk-hero h2 {
  margin: 6px 0 6px;
  font-size: clamp(34px, 5vw, 58px);
  letter-spacing: -0.07em;
  line-height: 1;
}
.risk-hero p { margin: 0 0 14px; color: var(--soft); font-size: 17px; line-height: 1.45; }
.risk-section { margin-bottom: 16px; }
.risk-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin: 14px 0 10px;
}
.risk-controls label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.risk-controls input,
.risk-controls select {
  min-width: 120px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.34);
  color: var(--text);
  padding: 11px 12px;
  outline: none;
  font-weight: 900;
}
.risk-controls input { text-transform: uppercase; letter-spacing: 0.06em; }
.risk-refresh-btn { padding: 11px 15px; }
.risk-charts-panel { margin-bottom: 16px; }
.risk-charts-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.risk-chart {
  width: 100%;
  height: 380px;
  min-height: 380px;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 18px;
  background: rgba(2, 6, 23, 0.20);
  padding: 12px;
  overflow: hidden;
}
.risk-chart-wide { grid-column: 1 / -1; }

@media (max-width: 1080px) {
  .risk-charts-grid { grid-template-columns: 1fr; }
  .risk-chart-wide { grid-column: auto; }
}

@media (max-width: 640px) {
  .risk-chart { height: 330px; min-height: 330px; }
  .risk-controls { align-items: stretch; }
  .risk-controls label,
  .risk-refresh-btn { width: 100%; }
}

/* Hotfix Fase 6: asegurar render real de gráficos de riesgo */
.risk-charts-grid {
  display: grid;
}
.risk-chart {
  position: relative;
  display: block;
  width: 100%;
  height: 390px;
  min-height: 390px;
}
.risk-chart > div,
.risk-chart canvas {
  max-width: 100%;
}
.chart-message {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #cbd5e1;
  text-align: center;
  padding: 18px;
}
.chart-message strong {
  display: block;
  color: #e5e7eb;
  margin-bottom: 6px;
}
.chart-message span {
  display: block;
  color: #94a3b8;
  font-size: 13px;
}

/* Fase 7 - Tab Comparación */
.comparison-hero { margin-bottom: 16px; }
.comparison-hero h2 {
  margin: 6px 0 6px;
  font-size: clamp(34px, 5vw, 58px);
  letter-spacing: -0.07em;
  line-height: 1;
}
.comparison-hero p { margin: 0 0 14px; color: var(--soft); font-size: 17px; line-height: 1.45; }
.comparison-section { margin-bottom: 16px; }
.comparison-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin: 14px 0 10px;
}
.comparison-controls label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.comparison-controls input,
.comparison-controls select {
  min-width: 150px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.34);
  color: var(--text);
  padding: 11px 12px;
  outline: none;
  font-weight: 900;
}
.comparison-controls input {
  min-width: min(440px, 70vw);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.comparison-refresh-btn { padding: 11px 15px; }
.comparison-warning { margin-bottom: 16px; }
.comparison-charts-panel { margin-bottom: 16px; }
.comparison-charts-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.comparison-chart {
  width: 100%;
  height: 400px;
  min-height: 400px;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 18px;
  background: rgba(2, 6, 23, 0.20);
  padding: 12px;
  overflow: hidden;
}
.comparison-chart-wide { grid-column: 1 / -1; }
.comparison-table td:first-child span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.positive-soft { color: #bbf7d0; font-weight: 900; }
.negative-soft { color: #fecdd3; font-weight: 900; }

@media (max-width: 1080px) {
  .comparison-charts-grid { grid-template-columns: 1fr; }
  .comparison-chart-wide { grid-column: auto; }
}

@media (max-width: 640px) {
  .comparison-chart { height: 340px; min-height: 340px; }
  .comparison-controls input { min-width: 100%; width: 100%; }
}

/* Fase 8A: Portafolio personal */
.ghost-btn {
  border-radius: 14px;
  padding: 12px 16px;
  background: rgba(15, 23, 42, 0.72);
  color: var(--soft);
  border: 1px solid var(--line);
  font-weight: 900;
  white-space: nowrap;
}
.ghost-btn:hover { filter: brightness(1.08); }
.ghost-btn:disabled { opacity: .55; cursor: wait; }

.portfolio-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 18px;
  margin-bottom: 16px;
  align-items: stretch;
}
.portfolio-hero-text h2 {
  margin: 10px 0 8px;
  font-size: clamp(34px, 5vw, 58px);
  letter-spacing: -0.07em;
  line-height: 1;
}
.portfolio-hero-text p {
  color: var(--soft);
  font-size: 16px;
  line-height: 1.5;
  max-width: 780px;
}
.portfolio-upload-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, .16);
  background: rgba(2, 6, 23, .24);
  border-radius: 18px;
  align-self: start;
}
.portfolio-file-label {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 14px;
  padding: 12px 16px;
  background: rgba(56, 189, 248, .12);
  color: #bae6fd;
  border: 1px dashed rgba(56, 189, 248, .45);
  font-weight: 900;
  cursor: pointer;
}
#portfolioFileInput { display: none; }
.portfolio-upload-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.portfolio-section { margin-bottom: 16px; }
.portfolio-warning,
.warning-box {
  margin-bottom: 16px;
  border: 1px solid rgba(251, 191, 36, .28);
  background: rgba(251, 191, 36, .10);
  color: #fde68a;
  border-radius: 18px;
  padding: 14px 16px;
  font-weight: 700;
}
.loading-box {
  color: var(--soft);
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(2, 6, 23, .24);
}
.portfolio-insights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.portfolio-insight {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(2, 6, 23, .25);
}
.portfolio-insight strong { display: block; margin-bottom: 6px; }
.portfolio-insight p { margin: 0; color: var(--soft); line-height: 1.45; }
.portfolio-insight.good { border-color: rgba(34, 197, 94, .32); background: rgba(34, 197, 94, .09); }
.portfolio-insight.warning { border-color: rgba(251, 191, 36, .34); background: rgba(251, 191, 36, .09); }
.portfolio-insight.alert { border-color: rgba(251, 113, 133, .34); background: rgba(251, 113, 133, .09); }
.portfolio-kpi-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 16px;
}
.portfolio-kpi.good { border-color: rgba(34, 197, 94, .34); }
.portfolio-kpi.warning { border-color: rgba(251, 191, 36, .34); }
.portfolio-kpi.alert { border-color: rgba(251, 113, 133, .34); }
.portfolio-charts-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.portfolio-chart-card {
  border: 1px solid rgba(148, 163, 184, .13);
  border-radius: 18px;
  background: rgba(2, 6, 23, .20);
  padding: 14px;
  min-width: 0;
}
.portfolio-chart-card h4 {
  margin: 0 0 8px;
  color: var(--soft);
  font-size: 14px;
  letter-spacing: -0.02em;
}
.portfolio-chart {
  width: 100%;
  height: 380px;
  min-height: 380px;
  overflow: hidden;
}
.chart-empty {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 260px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed rgba(148, 163, 184, .18);
  border-radius: 16px;
  padding: 20px;
}
.table-scroll {
  width: 100%;
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, .14);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1180px;
  background: rgba(2, 6, 23, .20);
}
.data-table th,
.data-table td {
  padding: 12px 13px;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
  text-align: left;
  white-space: nowrap;
}
.data-table th {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: rgba(15, 23, 42, .54);
}
.data-table td { color: var(--soft); font-size: 13px; }
.data-table tr:hover td { background: rgba(56, 189, 248, .045); }

@media (max-width: 1200px) {
  .portfolio-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-charts-grid { grid-template-columns: 1fr; }
  .portfolio-hero { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .portfolio-kpi-grid { grid-template-columns: 1fr; }
  .portfolio-insights { grid-template-columns: 1fr; }
  .portfolio-chart { height: 330px; min-height: 330px; }
}

/* Fase 8B: VIX / Market Sentiment */
.vix-panel {
  margin-bottom: 16px;
  border-color: rgba(56, 189, 248, .20);
}
.vix-updated {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.vix-layout {
  display: grid;
  grid-template-columns: minmax(320px, .95fr) minmax(0, 1.05fr);
  gap: 16px;
  align-items: stretch;
}
.vix-thermometer-card {
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 18px;
  background: rgba(2, 6, 23, .24);
  padding: 16px;
}
.vix-thermometer {
  position: relative;
  height: 34px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .22);
  background: linear-gradient(90deg, rgba(34,197,94,.18), rgba(251,191,36,.16), rgba(251,113,133,.16));
  margin: 4px 0 24px;
}
.vix-thermometer-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  transition: width .45s ease;
  background: linear-gradient(90deg, rgba(34,197,94,.86), rgba(251,191,36,.88), rgba(251,113,133,.92));
}
.vix-thermometer-fill.good { background: linear-gradient(90deg, rgba(34,197,94,.75), rgba(34,197,94,.92)); }
.vix-thermometer-fill.neutral { background: linear-gradient(90deg, rgba(56,189,248,.72), rgba(14,165,233,.9)); }
.vix-thermometer-fill.warning { background: linear-gradient(90deg, rgba(251,191,36,.72), rgba(245,158,11,.92)); }
.vix-thermometer-fill.alert { background: linear-gradient(90deg, rgba(251,113,133,.72), rgba(244,63,94,.96)); }
.vix-thermometer-fill.unknown { background: rgba(100,116,139,.45); }
.vix-thermometer-needle {
  position: absolute;
  top: -3px;
  left: 0%;
  width: 3px;
  height: 40px;
  background: #f8fafc;
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(248,250,252,.10);
  transform: translateX(-50%);
  transition: left .45s ease;
}
.vix-scale {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  transform: translateY(22px);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.vix-number-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}
.vix-number-row strong {
  display: block;
  font-size: clamp(38px, 6vw, 72px);
  letter-spacing: -0.08em;
  line-height: .9;
}
.vix-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  color: var(--soft);
  background: rgba(15,23,42,.6);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.vix-status.good { color: #bbf7d0; border-color: rgba(34,197,94,.28); background: rgba(34,197,94,.10); }
.vix-status.neutral { color: #bae6fd; border-color: rgba(56,189,248,.28); background: rgba(56,189,248,.10); }
.vix-status.warning { color: #fde68a; border-color: rgba(251,191,36,.30); background: rgba(251,191,36,.11); }
.vix-status.alert { color: #fecdd3; border-color: rgba(251,113,133,.30); background: rgba(251,113,133,.11); }
.vix-thermometer-card p,
.vix-context-box p {
  color: var(--soft);
  line-height: 1.48;
  margin: 12px 0 0;
}
.vix-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.vix-context-box {
  margin-bottom: 16px;
  border-color: rgba(56,189,248,.18);
  background: rgba(2,6,23,.28);
}
.vix-context-box.good { border-color: rgba(34,197,94,.26); }
.vix-context-box.neutral { border-color: rgba(56,189,248,.24); }
.vix-context-box.warning { border-color: rgba(251,191,36,.28); }
.vix-context-box.alert { border-color: rgba(251,113,133,.30); }
.vix-context-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.vix-context-header h3 {
  margin: 8px 0 0;
  font-size: 22px;
  letter-spacing: -0.04em;
}
.vix-context-box small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.45;
}
.metric-badge.good { color: #bbf7d0; background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.26); }
.metric-badge.alert { color: #fecdd3; background: rgba(251, 113, 133, 0.14); border-color: rgba(251, 113, 133, 0.28); }

@media (max-width: 960px) {
  .vix-layout { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .vix-stats-grid { grid-template-columns: 1fr; }
  .vix-number-row { align-items: flex-start; flex-direction: column; }
  .vix-context-header { flex-direction: column; }
}

/* Fase 8C - EPS histórico en Overview */
.overview-context-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.eps-panel {
  min-height: 100%;
}

.eps-summary-card {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  padding: 14px;
  background: rgba(15, 23, 42, 0.34);
  margin-bottom: 12px;
}

.eps-number-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.eps-number-row strong {
  color: #e5e7eb;
  font-size: clamp(28px, 4vw, 46px);
  letter-spacing: -0.05em;
}

.eps-status {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  white-space: nowrap;
}

.eps-status.positive { color: #bbf7d0; border-color: rgba(34,197,94,.28); background: rgba(34,197,94,.10); }
.eps-status.warning { color: #fde68a; border-color: rgba(251,191,36,.30); background: rgba(251,191,36,.11); }
.eps-status.negative { color: #fecdd3; border-color: rgba(251,113,133,.30); background: rgba(251,113,133,.11); }
.eps-status.neutral { color: #bae6fd; border-color: rgba(56,189,248,.28); background: rgba(56,189,248,.10); }

.eps-summary-card p {
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

.eps-mini-chart {
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 18px;
  height: 210px;
  min-height: 210px;
  margin-bottom: 12px;
  overflow: hidden;
  padding: 4px;
}

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

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

@media (max-width: 680px) {
  .eps-stats-grid { grid-template-columns: 1fr; }
  .eps-number-row { align-items: flex-start; flex-direction: column; }
}

/* Macrotrends manual fallback link for EPS history */
.macrotrends-link-wrap {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.macrotrends-link,
.eps-panel a.macrotrends-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border: 1px solid rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.10);
  color: #bfdbfe;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.macrotrends-link:hover,
.eps-panel a.macrotrends-link:hover {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(96, 165, 250, 0.55);
}

.macrotrends-reason,
.macrotrends-link-wrap small {
  display: block;
  margin-top: 4px;
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.35;
}

/* Fase 8E - P/E relativo en Overview */
.overview-market-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.pe-panel {
  border-color: rgba(168, 85, 247, 0.20);
  margin-bottom: 0;
}

.pe-summary-card {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  padding: 14px;
  background: rgba(15, 23, 42, 0.34);
  margin-bottom: 12px;
}

.pe-summary-card p {
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

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

@media (max-width: 680px) {
  .pe-stats-grid { grid-template-columns: 1fr; }
}

/* Fase 10A - Últimos tickers consultados */
.portfolio-table-title-row {
  align-items: flex-start;
  gap: 16px;
}

.small-btn {
  padding: 8px 12px;
  font-size: 0.82rem;
  white-space: nowrap;
}

.recent-tickers-empty {
  border: 1px dashed rgba(148, 163, 184, 0.28);
  border-radius: 16px;
  padding: 16px;
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.35);
}

.recent-tickers-table td,
.recent-tickers-table th {
  white-space: nowrap;
}

.ticker-link-btn {
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: rgba(14, 165, 233, 0.12);
  color: #7dd3fc;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.02em;
}

.ticker-link-btn:hover {
  background: rgba(14, 165, 233, 0.22);
  border-color: rgba(125, 211, 252, 0.75);
  color: #e0f2fe;
}

/* Fase 11A - Sentimiento de mercado */
.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px;
  padding: 10px 13px;
  background: rgba(56, 189, 248, 0.12);
  color: #bae6fd;
  border: 1px solid rgba(56, 189, 248, 0.26);
  font-weight: 900;
  transition: transform .18s ease, filter .18s ease, background .18s ease;
}
.secondary-btn:hover { transform: translateY(-1px); filter: brightness(1.08); background: rgba(56, 189, 248, 0.18); }
.compact-btn { padding: 8px 10px; font-size: 12px; white-space: nowrap; }
.muted-note { color: var(--soft); margin: 0; line-height: 1.5; }

.sentiment-overview-panel { border-color: rgba(168, 85, 247, 0.18); }
.sentiment-overview-card {
  cursor: pointer;
  border-radius: 18px;
  padding: 14px;
  background: rgba(15, 23, 42, 0.34);
  border: 1px solid rgba(148, 163, 184, 0.16);
}
.sentiment-overview-card:focus-visible {
  outline: 2px solid rgba(56,189,248,.8);
  outline-offset: 3px;
}
.sentiment-overview-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}
.sentiment-intro-panel { margin-bottom: 16px; }
.sentiment-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.sentiment-hero-panel { margin-bottom: 16px; }
.sentiment-tone-positive { border-color: rgba(34, 197, 94, 0.28); }
.sentiment-tone-warning { border-color: rgba(251, 191, 36, 0.28); }
.sentiment-tone-negative { border-color: rgba(251, 113, 133, 0.30); }
.sentiment-score-layout {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
  gap: 16px;
  align-items: stretch;
}
.sentiment-score-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: rgba(2, 6, 23, 0.24);
}
.sentiment-score-card label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
}
.sentiment-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sentiment-score-row strong {
  font-size: clamp(42px, 6vw, 76px);
  letter-spacing: -.08em;
  line-height: .92;
}
.sentiment-score-row strong span {
  color: var(--muted);
  font-size: 22px;
  letter-spacing: -.02em;
  margin-left: 4px;
}
.sentiment-meter {
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(148, 163, 184, .14);
  border: 1px solid rgba(148, 163, 184, .16);
  margin: 14px 0 12px;
}
.sentiment-meter-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: rgba(148, 163, 184, .65);
}
.sentiment-meter-fill.positive { background: linear-gradient(90deg, rgba(34,197,94,.68), rgba(34,197,94,.95)); }
.sentiment-meter-fill.warning { background: linear-gradient(90deg, rgba(251,191,36,.72), rgba(245,158,11,.95)); }
.sentiment-meter-fill.negative { background: linear-gradient(90deg, rgba(251,113,133,.70), rgba(244,63,94,.96)); }
.sentiment-score-card p,
.sentiment-summary-copy p {
  color: var(--soft);
  line-height: 1.55;
  margin: 0;
}
.sentiment-summary-copy {
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 18px;
  background: rgba(2, 6, 23, 0.20);
  padding: 16px;
}
.sentiment-summary-copy h4 { margin: 0 0 8px; font-size: 26px; letter-spacing: -.04em; }
.sentiment-summary-copy small {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  line-height: 1.45;
}
.sentiment-setup-box {
  border: 1px dashed rgba(56, 189, 248, .32);
  border-radius: 18px;
  background: rgba(56, 189, 248, .08);
  padding: 16px;
}
.sentiment-setup-box h4 { margin: 0 0 8px; }
.sentiment-setup-box p,
.sentiment-setup-box small { color: var(--soft); line-height: 1.5; }
.sentiment-setup-box code {
  display: block;
  margin: 12px 0;
  padding: 12px;
  border-radius: 12px;
  background: rgba(2, 6, 23, .55);
  border: 1px solid rgba(148, 163, 184, .16);
  color: #e5e7eb;
  overflow-x: auto;
}
.sentiment-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
}
.sentiment-main-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 16px;
}
.sentiment-chart {
  height: 320px;
  min-height: 320px;
}
.sentiment-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sentiment-tag-list span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border-radius: 999px;
  padding: 8px 10px;
  background: rgba(15, 23, 42, .58);
  border: 1px solid rgba(148, 163, 184, .16);
  color: var(--soft);
  font-size: 13px;
  font-weight: 800;
}
.sentiment-tag-list strong { color: var(--text); }
.sentiment-article-list { display: grid; gap: 12px; }
.sentiment-article {
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 18px;
  padding: 14px;
  background: rgba(2, 6, 23, .22);
}
.sentiment-article.sentiment-positive { border-color: rgba(34,197,94,.22); }
.sentiment-article.sentiment-negative { border-color: rgba(251,113,133,.24); }
.sentiment-article h4 { margin: 8px 0 8px; font-size: 17px; letter-spacing: -.02em; }
.sentiment-article h4 a { color: var(--text); text-decoration: none; }
.sentiment-article h4 a:hover { color: #bae6fd; text-decoration: underline; }
.sentiment-article p { margin: 0; color: var(--soft); line-height: 1.55; }
.sentiment-article-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
@media (max-width: 1100px) {
  .sentiment-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sentiment-score-layout,
  .sentiment-main-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .sentiment-kpi-grid { grid-template-columns: 1fr; }
  .sentiment-actions { justify-content: flex-start; }
  .sentiment-score-row { align-items: flex-start; flex-direction: column; }
}

/* Fase 11B - Configuración Alpha Vantage desde la app */
.topbar-actions {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}
.topbar-actions .search-card { flex: 1; }
.settings-btn {
  min-height: 52px;
  border-radius: 16px;
  white-space: nowrap;
}
.settings-btn.settings-connected {
  border-color: rgba(34, 197, 94, 0.32);
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.12);
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 6, 23, 0.76);
  backdrop-filter: blur(12px);
}
.modal-backdrop.active { display: flex; }
.settings-modal {
  width: min(720px, 100%);
  max-height: min(92vh, 820px);
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 26px;
  background: rgba(15, 23, 42, 0.98);
  box-shadow: 0 30px 120px rgba(0, 0, 0, 0.58);
}
.settings-modal-header,
.settings-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}
.settings-modal-footer {
  border-bottom: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  justify-content: flex-end;
}
.settings-modal h3,
.settings-modal h4 { margin: 0; letter-spacing: -0.03em; }
.settings-modal-header p,
.settings-section-title p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.45;
}
.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--text);
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.18);
  font-size: 24px;
  line-height: 1;
}
.settings-section { padding: 22px; }
.settings-section-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.settings-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: var(--soft);
  background: rgba(148, 163, 184, 0.10);
}
.settings-status-pill.positive {
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(34, 197, 94, 0.12);
}
.settings-status-pill.warning {
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.30);
  background: rgba(251, 191, 36, 0.11);
}
.settings-current-key {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  margin-bottom: 14px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(2, 6, 23, 0.30);
}
.settings-current-key span,
.settings-current-key strong { overflow-wrap: anywhere; }
.settings-current-key span { color: var(--muted); }
.settings-current-key strong { color: var(--text); }
.settings-input-label {
  display: block;
  margin: 0 0 8px;
  color: var(--soft);
  font-weight: 800;
}
.settings-input {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.22);
  outline: 0;
  border-radius: 16px;
  padding: 14px 14px;
  color: var(--text);
  background: rgba(2, 6, 23, 0.44);
}
.settings-input:focus {
  border-color: rgba(56, 189, 248, 0.48);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.10);
}
.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}
.settings-help-box,
.sentiment-setup-guide {
  border: 1px solid rgba(56, 189, 248, 0.20);
  background: rgba(56, 189, 248, 0.08);
}
.settings-help-box {
  border-radius: 18px;
  padding: 16px;
  color: var(--soft);
}
.settings-help-box ol,
.sentiment-setup-guide ol {
  margin: 10px 0 0 20px;
  padding: 0;
  line-height: 1.65;
}
.settings-help-box a,
.sentiment-setup-guide a:not(.primary-btn) {
  color: #bae6fd;
  font-weight: 800;
}
.settings-message {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  color: var(--soft);
  background: rgba(148, 163, 184, 0.09);
  border: 1px solid rgba(148, 163, 184, 0.12);
}
.settings-message.positive {
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.22);
  background: rgba(34, 197, 94, 0.10);
}
.settings-message.warning {
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.24);
  background: rgba(251, 191, 36, 0.10);
}
.sentiment-setup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 8px;
}
.sentiment-setup-actions a.primary-btn { text-decoration: none; }
@media (max-width: 860px) {
  .topbar-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .settings-btn { width: 100%; }
  .settings-section-title,
  .settings-current-key { flex-direction: column; align-items: flex-start; }
}


/* Fase 10B: resumen ejecutivo compacto de Portafolio */
.portfolio-kpi-grid-compact {
  grid-template-columns: repeat(5, minmax(160px, 1fr));
}

.portfolio-kpi-grid-compact .portfolio-kpi strong {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
}

@media (max-width: 1100px) {
  .portfolio-kpi-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .portfolio-kpi-grid-compact {
    grid-template-columns: 1fr;
  }
}

/* Fase 10C: refinamiento layout Portafolio */
.portfolio-kpi-grid-compact {
  grid-template-columns: repeat(6, minmax(145px, 1fr));
}

.portfolio-charts-grid-v2 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
}

.portfolio-chart-card-pie,
.portfolio-performance-card,
.portfolio-chart-card-wide,
.portfolio-chart-card-half {
  grid-column: span 3;
}

.portfolio-chart-card-third {
  grid-column: span 2;
}

.portfolio-chart-card-full {
  grid-column: span 6;
}

.portfolio-performance-card {
  min-height: 100%;
}

.portfolio-performance-leaders {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-height: 380px;
}

.portfolio-performance-block {
  border: 1px solid rgba(148, 163, 184, .13);
  border-radius: 16px;
  background: rgba(15, 23, 42, .26);
  padding: 12px;
}

.portfolio-performance-title {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.portfolio-performance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid rgba(148, 163, 184, .11);
}

.portfolio-performance-row:first-of-type {
  border-top: 0;
}

.portfolio-performance-row strong {
  display: block;
  color: var(--text);
  font-size: 14px;
}

.portfolio-performance-row small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.portfolio-performance-row span {
  font-size: 14px;
  white-space: nowrap;
}

.portfolio-performance-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 10px 0;
}

.portfolio-performance-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 1200px) {
  .portfolio-kpi-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-charts-grid-v2 { grid-template-columns: 1fr; }
  .portfolio-chart-card-pie,
  .portfolio-performance-card,
  .portfolio-chart-card-wide,
  .portfolio-chart-card-half,
  .portfolio-chart-card-full,
  .portfolio-chart-card-third { grid-column: auto; }
}

@media (max-width: 640px) {
  .portfolio-kpi-grid-compact { grid-template-columns: 1fr; }
}

/* Fase 10D - Integración de posiciones en Configuración */
.portfolio-status-hero {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  align-items: stretch;
}
.portfolio-status-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, .16);
  background: rgba(2, 6, 23, .24);
  border-radius: 18px;
}
.portfolio-status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.portfolio-status-header strong {
  color: #bbf7d0;
  font-size: 12px;
  border: 1px solid rgba(34, 197, 94, .26);
  background: rgba(34, 197, 94, .10);
  padding: 6px 10px;
  border-radius: 999px;
}
.empty-portfolio-guide .settings-help-box { margin-top: 6px; }
.settings-portfolio-section {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}
#portfolioSettingsFileInput.settings-input {
  padding: 11px 14px;
}
#portfolioSettingsFileInput::file-selector-button {
  margin-right: 12px;
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  color: #bae6fd;
  background: rgba(56, 189, 248, .14);
  font-weight: 900;
  cursor: pointer;
}
.portfolio-kpi-grid-compact {
  grid-template-columns: repeat(6, minmax(145px, 1fr));
}
@media (max-width: 1180px) {
  .portfolio-kpi-grid-compact { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
}
@media (max-width: 860px) {
  .portfolio-status-hero { grid-template-columns: 1fr; }
  .portfolio-kpi-grid-compact { grid-template-columns: 1fr; }
}

/* Fase 10E - Salud de la cartera con radar multidimensional */
.portfolio-health-card {
  min-height: 460px;
}

.portfolio-health-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.portfolio-health-header h4 {
  margin-bottom: 4px;
}

.portfolio-health-header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.portfolio-health-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 16px;
  align-items: stretch;
}

.portfolio-health-chart {
  min-height: 400px;
}

.portfolio-health-score {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 400px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .13);
  border-radius: 18px;
  background: rgba(15, 23, 42, .24);
}

.portfolio-health-score-main {
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(59, 130, 246, .18), rgba(34, 197, 94, .12));
  border: 1px solid rgba(148, 163, 184, .18);
}

.portfolio-health-score-main span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.portfolio-health-score-main strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
}

.portfolio-health-score-main small {
  display: block;
  margin-top: 6px;
  color: #cbd5e1;
}

.portfolio-health-lists {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.portfolio-health-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid rgba(148, 163, 184, .11);
}

.portfolio-health-row:first-of-type {
  border-top: 0;
}

.portfolio-health-row span {
  color: var(--text);
  font-size: 13px;
}

.portfolio-health-row strong {
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .portfolio-health-layout {
    grid-template-columns: 1fr;
  }

  .portfolio-health-score,
  .portfolio-health-chart {
    min-height: 320px;
  }
}

/* Fase 10E.2 - Indicadores complementarios de salud de cartera */
.portfolio-advanced-indicators {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(15, 23, 42, .42), rgba(2, 6, 23, .22));
}

.portfolio-advanced-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.portfolio-advanced-header h3 {
  margin: 8px 0 0;
  font-size: 18px;
  letter-spacing: -0.03em;
}

.portfolio-advanced-header small {
  color: var(--muted);
  line-height: 1.4;
  max-width: 360px;
  text-align: right;
}

.portfolio-health-kpi-grid {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  margin-bottom: 0;
}

.portfolio-health-kpi-grid .portfolio-kpi strong {
  font-size: clamp(1.02rem, 1.55vw, 1.25rem);
}

@media (max-width: 1200px) {
  .portfolio-health-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-advanced-header { flex-direction: column; }
  .portfolio-advanced-header small { text-align: left; max-width: none; }
}

@media (max-width: 640px) {
  .portfolio-health-kpi-grid { grid-template-columns: 1fr; }
}

/* Hotfix 10H - Portafolio compacto sin lectura VIX */
.portfolio-metrics-panel {
  margin-bottom: 18px;
}

.portfolio-metrics-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.portfolio-metrics-header h3 {
  margin: 8px 0 0;
  font-size: 18px;
  letter-spacing: -0.03em;
}

.portfolio-metrics-header small {
  color: var(--muted);
  line-height: 1.4;
  max-width: 420px;
  text-align: right;
}

.portfolio-metrics-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.portfolio-metric-card {
  min-height: 104px;
  padding: 12px 13px;
  border: 1px solid rgba(148, 163, 184, .14);
  background: rgba(2, 6, 23, .22);
}

.portfolio-metric-card.main {
  background: linear-gradient(135deg, rgba(15, 23, 42, .46), rgba(2, 6, 23, .24));
}

.portfolio-metric-card.health {
  background: rgba(15, 23, 42, .18);
}

.portfolio-metric-card label {
  margin-bottom: 8px;
  font-size: 10.5px;
  letter-spacing: .065em;
}

.portfolio-metric-card strong {
  font-size: clamp(1rem, 1.28vw, 1.28rem);
}

.portfolio-metric-card small {
  margin-top: 7px;
  font-size: 11px;
}

@media (max-width: 1280px) {
  .portfolio-metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .portfolio-metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portfolio-metrics-header { flex-direction: column; }
  .portfolio-metrics-header small { text-align: left; max-width: none; }
}

@media (max-width: 640px) {
  .portfolio-metrics-panel { padding: 14px; }
  .portfolio-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .portfolio-metric-card { min-height: 92px; padding: 10px 11px; border-radius: 14px; }
  .portfolio-metric-card label { font-size: 9.5px; margin-bottom: 6px; }
  .portfolio-metric-card strong { font-size: 1rem; }
  .portfolio-metric-card small { font-size: 10px; line-height: 1.25; }
}


/* Fase 10T.1 - Simulador de próxima compra */
.portfolio-simulator-panel {
  margin-bottom: 18px;
}

.portfolio-simulator-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 14px;
}

.portfolio-simulator-header h3 {
  margin: 8px 0 4px;
  font-size: 18px;
  letter-spacing: -0.03em;
}

.portfolio-simulator-header p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.portfolio-simulator-max,
.portfolio-simulation-max-card {
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 14px;
  border: 1px solid rgba(56, 189, 248, .20);
  background: rgba(56, 189, 248, .08);
  border-radius: 18px;
}

.portfolio-simulator-max span,
.portfolio-simulation-max-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.portfolio-simulator-max strong,
.portfolio-simulation-max-card strong {
  color: var(--text);
  font-size: clamp(1.2rem, 2vw, 1.65rem);
}

.portfolio-simulator-max small,
.portfolio-simulation-max-card small {
  color: var(--muted);
  line-height: 1.35;
}

.portfolio-simulator-form {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(130px, .8fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}

.portfolio-simulator-form label {
  display: grid;
  gap: 6px;
}

.portfolio-simulator-form label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.portfolio-simulator-result {
  min-height: 58px;
}

.portfolio-simulator-empty {
  padding: 14px;
  border: 1px dashed rgba(148, 163, 184, .22);
  border-radius: 16px;
  color: var(--muted);
  background: rgba(15, 23, 42, .18);
}

.portfolio-simulation-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 14px;
  align-items: stretch;
  margin-bottom: 12px;
}

.portfolio-simulation-summary h4 {
  margin: 8px 0 4px;
  font-size: 18px;
  letter-spacing: -0.03em;
}

.portfolio-simulation-summary p {
  margin: 0;
  color: var(--muted);
}

.portfolio-simulation-max-card.good {
  border-color: rgba(34, 197, 94, .24);
  background: rgba(34, 197, 94, .08);
}

.portfolio-simulation-max-card.warning {
  border-color: rgba(245, 158, 11, .28);
  background: rgba(245, 158, 11, .10);
}

.portfolio-simulation-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.portfolio-simulation-card {
  min-height: 98px;
  padding: 12px 13px;
}

.portfolio-simulation-card label {
  font-size: 10px;
  letter-spacing: .065em;
}

.portfolio-simulation-card strong {
  font-size: clamp(1rem, 1.25vw, 1.22rem);
}

.portfolio-simulation-card small {
  font-size: 11px;
  line-height: 1.3;
}

.portfolio-simulation-reading {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1080px) {
  .portfolio-simulator-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-simulator-form button { min-height: 44px; }
  .portfolio-simulation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-simulation-reading { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .portfolio-simulator-header,
  .portfolio-simulation-summary {
    grid-template-columns: 1fr;
  }
  .portfolio-simulator-form {
    grid-template-columns: 1fr;
  }
  .portfolio-simulation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .portfolio-simulation-card {
    min-height: 90px;
    padding: 10px 11px;
  }
  .portfolio-simulation-card label { font-size: 9.5px; }
  .portfolio-simulation-card strong { font-size: 1rem; }
  .portfolio-simulation-card small { font-size: 10px; }
}

@media (max-width: 420px) {
  .portfolio-simulation-grid { grid-template-columns: 1fr; }
}

/* Fase 10H.1 - Gráficos responsive reales en Portafolio */
.portfolio-charts-grid-v2,
.portfolio-chart-card,
.portfolio-health-card,
.portfolio-chart-card-pie,
.portfolio-chart-card-wide,
.portfolio-chart-card-half,
.portfolio-chart-card-full,
.portfolio-chart-card-third {
  min-width: 0;
}

.portfolio-chart {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.portfolio-chart > div,
.portfolio-chart canvas {
  max-width: 100% !important;
}

@media (max-width: 760px) {
  .portfolio-charts-grid,
  .portfolio-charts-grid-v2 {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px;
  }

  .portfolio-chart-card,
  .portfolio-health-card {
    padding: 12px;
    border-radius: 16px;
  }

  .portfolio-chart-card h4,
  .portfolio-health-header h4 {
    font-size: 13px;
  }

  .portfolio-health-header {
    flex-direction: column;
    gap: 8px;
  }

  .portfolio-health-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .portfolio-chart {
    height: 380px;
    min-height: 380px;
  }

  .portfolio-health-chart,
  #portfolioHealthChart {
    height: 430px;
    min-height: 430px;
  }

  #portfolioWeightsTickerChart,
  #portfolioAssetTypeChart {
    height: 390px;
    min-height: 390px;
  }

  #portfolioGainLossChart {
    height: 460px;
    min-height: 460px;
  }

  #portfolioRiskWeightChart {
    height: 430px;
    min-height: 430px;
  }

  .portfolio-health-score {
    min-height: auto;
  }

  .portfolio-performance-leaders {
    min-height: auto;
  }
}

@media (max-width: 420px) {
  .portfolio-chart-card,
  .portfolio-health-card {
    padding: 10px;
  }

  .portfolio-chart {
    height: 400px;
    min-height: 400px;
  }

  .portfolio-health-chart,
  #portfolioHealthChart {
    height: 450px;
    min-height: 450px;
  }

  #portfolioGainLossChart {
    height: 480px;
    min-height: 480px;
  }

  #portfolioRiskWeightChart {
    height: 450px;
    min-height: 450px;
  }
}

/* Fase 10H.2 - Vista ampliada de gráficos del Portafolio */
.portfolio-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.portfolio-chart-header h4 {
  margin: 0;
}

.portfolio-chart-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.chart-expand-btn {
  border: 1px solid rgba(56, 189, 248, .28);
  background: rgba(56, 189, 248, .10);
  color: #bae6fd;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.chart-expand-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(56, 189, 248, .50);
  background: rgba(56, 189, 248, .16);
}

.portfolio-fullscreen-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.portfolio-fullscreen-modal.open {
  display: flex;
}

.portfolio-fullscreen-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, .82);
  backdrop-filter: blur(12px);
}

.portfolio-fullscreen-panel {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  max-height: min(92dvh, 920px);
  display: grid;
  grid-template-rows: auto minmax(420px, 1fr) auto;
  gap: 12px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(15, 23, 42, .98), rgba(2, 6, 23, .98));
  box-shadow: 0 28px 90px rgba(0, 0, 0, .45);
  padding: 18px;
  overflow: hidden;
}

.portfolio-fullscreen-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.portfolio-fullscreen-header h3 {
  margin: 8px 0 4px;
  color: var(--text);
  font-size: clamp(1.05rem, 2vw, 1.55rem);
  letter-spacing: -0.03em;
}

.portfolio-fullscreen-header p,
.portfolio-fullscreen-help {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.portfolio-fullscreen-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 999px;
  background: rgba(15, 23, 42, .68);
  color: var(--text);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.portfolio-fullscreen-chart {
  width: 100%;
  height: min(72dvh, 680px);
  min-height: 460px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 18px;
  background: rgba(2, 6, 23, .20);
}

.portfolio-fullscreen-chart > div,
.portfolio-fullscreen-chart canvas {
  max-width: 100% !important;
}

body.modal-open {
  overflow: hidden;
}

@media (max-width: 760px) {
  .portfolio-chart-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .portfolio-chart-actions {
    width: 100%;
    justify-content: space-between;
  }

  .chart-expand-btn {
    padding: 7px 9px;
    font-size: 10.5px;
  }

  .portfolio-fullscreen-modal {
    padding: 10px;
    align-items: stretch;
  }

  .portfolio-fullscreen-panel {
    width: 100%;
    max-height: calc(100dvh - 20px);
    grid-template-rows: auto minmax(520px, 1fr) auto;
    padding: 12px;
    border-radius: 20px;
  }

  .portfolio-fullscreen-header {
    gap: 10px;
  }

  .portfolio-fullscreen-header p,
  .portfolio-fullscreen-help {
    font-size: 12px;
  }

  .portfolio-fullscreen-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    font-size: 24px;
  }

  .portfolio-fullscreen-chart {
    height: 72dvh;
    min-height: 520px;
    border-radius: 16px;
  }
}

@media (max-width: 420px) {
  .portfolio-fullscreen-panel {
    grid-template-rows: auto minmax(560px, 1fr) auto;
  }

  .portfolio-fullscreen-chart {
    min-height: 560px;
  }
}

/* Fase 10T.2 - Simulación visual avanzada */
.portfolio-simulation-visuals {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 20px;
  background: rgba(15, 23, 42, .18);
}

.portfolio-simulation-visuals-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.portfolio-simulation-visuals-header h4 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 16px;
  letter-spacing: -0.03em;
}

.portfolio-simulation-visuals-header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.portfolio-simulation-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.portfolio-simulation-chart-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 18px;
  background: rgba(2, 6, 23, .22);
}

.portfolio-simulation-chart-card-full {
  grid-column: 1 / -1;
}

.portfolio-simulation-chart-card h5 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  letter-spacing: -0.01em;
}

.portfolio-simulation-chart {
  width: 100%;
  height: 340px;
  min-height: 340px;
  min-width: 0;
  overflow: hidden;
}

.portfolio-simulation-chart-radar {
  height: 390px;
  min-height: 390px;
}

.portfolio-simulation-chart > div,
.portfolio-simulation-chart canvas {
  max-width: 100% !important;
}

@media (max-width: 760px) {
  .portfolio-simulation-visuals {
    padding: 11px;
    border-radius: 18px;
  }

  .portfolio-simulation-visuals-header {
    flex-direction: column;
    gap: 8px;
  }

  .portfolio-simulation-charts-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .portfolio-simulation-chart-card {
    padding: 10px;
    border-radius: 16px;
  }

  .portfolio-simulation-chart {
    height: 390px;
    min-height: 390px;
  }

  .portfolio-simulation-chart-radar {
    height: 430px;
    min-height: 430px;
  }
}

@media (max-width: 420px) {
  .portfolio-simulation-chart {
    height: 410px;
    min-height: 410px;
  }

  .portfolio-simulation-chart-radar {
    height: 450px;
    min-height: 450px;
  }
}

/* UI-1.1 - Mac App Shell base responsive */
:root {
  --shell-sidebar-width: 236px;
  --shell-gap: 18px;
  --shell-toolbar-height: 74px;
}

.app-shell {
  width: min(1680px, calc(100% - 36px));
  display: grid;
  grid-template-columns: var(--shell-sidebar-width) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas:
    "sidebar toolbar"
    "sidebar status"
    "sidebar content";
  gap: var(--shell-gap);
  align-items: start;
  padding: 18px 0 44px;
}

.topbar {
  grid-area: toolbar;
  position: sticky;
  top: 18px;
  z-index: 45;
  min-height: var(--shell-toolbar-height);
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 24px;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(22px);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.26);
}

.topbar .brand { min-width: 210px; }
.topbar .brand-mark {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 14px;
}
.topbar .brand h1 { font-size: 17px; }
.topbar .brand p { font-size: 12px; }

.tabs.app-navigation {
  grid-area: sidebar;
  position: sticky;
  top: 18px;
  height: calc(100dvh - 36px);
  margin: 0;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(2, 6, 23, 0.76));
  backdrop-filter: blur(24px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}

.tabs.app-navigation::before {
  content: "Investment Portfolio Management";
  display: block;
  margin: 2px 8px 14px;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.tabs.app-navigation::after {
  content: "Local dashboard · Mac App Shell";
  display: block;
  margin-top: auto;
  padding: 14px 8px 2px;
  color: rgba(148, 163, 184, 0.72);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.tabs.app-navigation .tab {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 16px;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  text-align: left;
  white-space: normal;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.tabs.app-navigation .tab:hover {
  color: var(--soft);
  background: rgba(148, 163, 184, 0.08);
  transform: translateX(1px);
}

.tabs.app-navigation .tab.active {
  color: var(--text);
  border-color: rgba(56, 189, 248, 0.24);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(34, 197, 94, 0.10));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.tab-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(148, 163, 184, 0.10);
  color: var(--soft);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

.tab.active .tab-icon {
  color: #06111f;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.96), rgba(34, 197, 94, 0.88));
}

.tab-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 850;
}

.status-banner {
  grid-area: status;
  margin: 0;
}

.tab-panel {
  grid-area: content;
  min-width: 0;
}

.tab-panel.active {
  display: block;
}

.topbar-actions {
  max-width: 920px;
}

.search-card {
  max-width: none;
  box-shadow: none;
  background: rgba(2, 6, 23, 0.36);
}

.settings-btn span[aria-hidden="true"] {
  font-size: 16px;
}

/* Se evita que el app shell rompa los modales existentes. */
.modal-backdrop,
.portfolio-fullscreen-modal {
  grid-area: auto;
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .tabs.app-navigation {
    padding: 14px 10px;
  }

  .tabs.app-navigation::before {
    content: "DF";
    text-align: center;
    margin-inline: 4px;
  }

  .tabs.app-navigation::after {
    display: none;
  }

  .tabs.app-navigation .tab {
    justify-content: center;
    padding: 10px;
  }

  .tabs.app-navigation .tab-label {
    display: none;
  }

  .tab-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: 18px;
  }

  .topbar .brand {
    min-width: 170px;
  }
}

@media (max-width: 860px) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .app-shell {
    width: min(100% - 20px, 1480px);
    display: block;
    padding: 12px 0 calc(98px + env(safe-area-inset-bottom));
  }

  .topbar {
    top: 8px;
    min-height: 0;
    margin-bottom: 14px;
    padding: 12px;
    border-radius: 22px;
    flex-direction: column;
    align-items: stretch;
  }

  .topbar .brand {
    min-width: 0;
  }

  .topbar-actions {
    width: 100%;
    max-width: none;
    flex-direction: column;
    align-items: stretch;
  }

  .topbar-actions .search-card {
    flex: 1;
  }

  .search-card {
    flex-direction: column;
    align-items: stretch;
  }

  .primary-btn,
  .settings-btn {
    width: 100%;
  }

  .tabs.app-navigation {
    position: fixed;
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    top: auto;
    z-index: 70;
    height: auto;
    max-height: 76px;
    padding: 8px;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 24px;
    background: rgba(15, 23, 42, 0.92);
    box-shadow: 0 18px 70px rgba(0, 0, 0, 0.38);
  }

  .tabs.app-navigation::before,
  .tabs.app-navigation::after {
    display: none;
  }

  .tabs.app-navigation .tab {
    min-width: 78px;
    min-height: 58px;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 7px 9px;
    border-radius: 18px;
  }

  .tabs.app-navigation .tab-label {
    display: block;
    max-width: 78px;
    font-size: 10.5px;
    line-height: 1.1;
    text-align: center;
  }

  .tab-icon {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
    border-radius: 10px;
    font-size: 15px;
  }

  .status-banner {
    margin-bottom: 14px;
  }
}

@media (max-width: 420px) {
  .tabs.app-navigation .tab {
    min-width: 72px;
  }

  .tabs.app-navigation .tab-label {
    max-width: 72px;
    font-size: 10px;
  }

  .tab-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    font-size: 15px;
  }
}

@media (min-width: 861px) {
  .topbar {
    flex-direction: row;
    align-items: center;
  }

  .topbar-actions {
    flex-direction: row;
    align-items: center;
  }

  .search-card {
    flex-direction: row;
    align-items: center;
  }

  .primary-btn,
  .settings-btn {
    width: auto;
  }
}

#auth-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, 0.92);
  backdrop-filter: blur(6px);
}

.auth-gate-card {
  width: min(360px, 90vw);
  padding: 32px;
  border-radius: 20px;
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #f8fafc;
  text-align: center;
}

.auth-gate-card h1 { font-size: 20px; margin: 0 0 8px; }
.auth-gate-card p { color: rgba(226, 232, 240, 0.75); font-size: 13px; margin: 0 0 20px; }
.auth-gate-card form { display: flex; flex-direction: column; gap: 10px; }

.auth-gate-card input {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(15, 23, 42, 0.6);
  color: #f8fafc;
  font-size: 14px;
}

.auth-gate-actions { display: flex; gap: 8px; margin-top: 4px; }

.auth-gate-actions button {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  font-weight: 700;
  cursor: pointer;
}

#auth-gate-signin-btn {
  background: linear-gradient(135deg, rgba(56,189,248,.96), rgba(34,197,94,.88));
  color: #06111f;
}

#auth-gate-signup-btn {
  background: rgba(148, 163, 184, 0.16);
  color: #f8fafc;
}

#auth-gate-message {
  min-height: 16px;
  font-size: 12px;
  color: rgba(248, 113, 113, 0.9);
  margin: 8px 0 0;
}