/* ═══════════════════════════════════════════════════════════════
   MKT SLIM GAME — Design System v2.0
   "Bloomberg Terminal meets Notion — Premium B2B Edition"
   Dark mode, Inter + JetBrains Mono + Glassmorphism refinado
═══════════════════════════════════════════════════════════════ */

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

/* ─── TOKENS ──────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-primary: #080A12;
  --bg-surface: #101420;
  --bg-elevated: #181E2E;
  --bg-hover: #1F2840;
  --bg-input: #0C0F1A;

  /* Accents — originales */
  --accent-blue: #3B82F6;
  --accent-blue-dim: #1D4ED8;
  --accent-amber: #F59E0B;
  --accent-emerald: #10B981;
  --accent-rose: #F43F5E;
  --accent-violet: #8B5CF6;

  /* ── NEW: Paleta B2B Neón Suave ───────────────────────────── */
  /* Por qué: Los fondos profundos (#080A12) necesitan acentos con
     luminosidad elevada pero saturación controlada para no fatigarse.
     Estos "soft-neon" funcionan con glassmorphism sin quemar la retina. */
  --accent-neon-mint:   #00E5A0;   /* KPIs positivos extremos, rank #1 glow */
  --accent-neon-blue:   #38BDF8;   /* Highlight de turno activo, links */
  --accent-neon-violet: #A78BFA;   /* IA Árbitro, badges especiales */
  --accent-neon-amber:  #FCD34D;   /* Warnings de deadline crítico */

  /* Segment Colors */
  --seg-economico: #64748B;
  --seg-medio: #3B82F6;
  --seg-lujo: #F59E0B;

  /* Text */
  --text-primary: #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --text-dim: #475569;

  /* Borders — refinados para glassmorphism */
  --border: rgba(255, 255, 255, 0.07);
  --border-bright: rgba(255, 255, 255, 0.14);
  --border-glass: rgba(255, 255, 255, 0.10);  /* NEW: borde específico para glass */

  /* Typography */
  --font-ui: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* Shadows — ampliados */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow-blue: 0 0 24px rgba(59, 130, 246, 0.18);
  --shadow-glow-amber: 0 0 24px rgba(245, 158, 11, 0.18);
  --shadow-glow-mint:  0 0 28px rgba(0, 229, 160, 0.22);  /* NEW: rank #1 */
  --shadow-glow-violet: 0 0 20px rgba(139, 92, 246, 0.20); /* NEW: IA */

  /* Transitions */
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);  /* NEW: tab switches */
}


/* ─── LIGHT THEME ──────────────────────────────────────────── */
[data-theme="light"] {
  /* Backgrounds */
  --bg-primary: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-elevated: #F1F5F9;
  --bg-hover: #E2E8F0;
  --bg-input: #FFFFFF;

  /* Accents — adjusted for light contrast */
  --accent-blue: #2563EB;
  --accent-blue-dim: #1E40AF;
  --accent-amber: #D97706;
  --accent-emerald: #059669;
  --accent-rose: #E11D48;
  --accent-violet: #7C3AED;

  /* Segment Colors */
  --seg-economico: #475569;
  --seg-medio: #2563EB;
  --seg-lujo: #D97706;

  /* Text */
  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-muted: #64748B;
  --text-dim: #94A3B8;

  /* Borders */
  --border: rgba(0, 0, 0, 0.08);
  --border-bright: rgba(0, 0, 0, 0.15);

  /* Shadows */
  --shadow-card: 0 1px 8px rgba(0, 0, 0, 0.06), 0 4px 24px rgba(0, 0, 0, 0.04);
  --shadow-glow-blue: 0 0 20px rgba(37, 99, 235, 0.1);
  --shadow-glow-amber: 0 0 20px rgba(217, 119, 6, 0.1);
}

/* Light-specific overrides for components that use hardcoded colors */
[data-theme="light"] .topnav {
  background: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .topnav__wordmark {
  background: linear-gradient(135deg, #2563EB, #7C3AED);
  -webkit-background-clip: text;
  background-clip: text;
}

[data-theme="light"] .sidebar {
  background: #FFFFFF;
  border-right-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .sidebar__link.active {
  background: rgba(37, 99, 235, 0.08);
  color: #2563EB;
}

[data-theme="light"] .sidebar__link:hover:not(.active) {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .card,
[data-theme="light"] .metric-tile,
[data-theme="light"] .product-card,
[data-theme="light"] .event-card {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .table thead th {
  background: #F8FAFC;
  color: #475569;
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .table tbody td {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .table tbody tr:hover {
  background: rgba(37, 99, 235, 0.03);
}

[data-theme="light"] .badge {
  background: rgba(0, 0, 0, 0.05);
  color: #334155;
}

[data-theme="light"] .badge--success {
  background: rgba(5, 150, 105, 0.1);
  color: #059669;
}

[data-theme="light"] .badge--warning {
  background: rgba(217, 119, 6, 0.1);
  color: #D97706;
}

[data-theme="light"] .badge--danger {
  background: rgba(225, 29, 72, 0.1);
  color: #E11D48;
}

[data-theme="light"] .btn--ghost {
  border-color: rgba(0, 0, 0, 0.15);
  color: #334155;
}

[data-theme="light"] .btn--ghost:hover {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .form-input,
[data-theme="light"] select.form-input {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.15);
  color: #0F172A;
}

[data-theme="light"] .form-input:focus {
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

[data-theme="light"] .arbiter-card {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .metric-tile__accent {
  opacity: 0.8;
}

[data-theme="light"] .timer {
  color: #059669;
}

[data-theme="light"] .timer--urgent {
  color: #E11D48;
}

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border-bright);
  background: var(--bg-elevated);
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.2s;
  line-height: 1;
}

.theme-toggle:hover {
  background: var(--bg-hover);
  transform: scale(1.05);
}

/* ─── RESET ────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-ui);
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

/* ─── LAYOUT ───────────────────────────────────────────────── */
.app-shell {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.page {
  padding: 32px 0 64px;
}

/* ─── TOP NAV ──────────────────────────────────────────────── */
.topnav {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
}

.topnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 24px;
  max-width: 1280px;
  margin: 0 auto;
}

.topnav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.topnav__wordmark {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #3B82F6, #8B5CF6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.topnav__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.topnav__turn {
  font-family: var(--font-mono);
  background: var(--bg-elevated);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.75rem;
}

/* ─── SIDEBAR NAV ──────────────────────────────────────────── */
.layout-sidebar {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  min-height: calc(100vh - 60px);
}

.sidebar {
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  padding: 20px 12px;
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
}

.sidebar__label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0 12px;
  margin-bottom: 8px;
  margin-top: 20px;
}

.sidebar__label:first-child {
  margin-top: 0;
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all var(--transition);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.sidebar__link:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.sidebar__link.active {
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent-blue);
}

.sidebar__link .icon {
  font-size: 1rem;
  width: 20px;
  text-align: center;
}

.main-content {
  padding: 32px 32px 64px;
  overflow-y: auto;
}

/* ─── CARDS ────────────────────────────────────────────────── */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
}

.card--elevated {
  background: var(--bg-elevated);
}

.card--glow-blue {
  box-shadow: var(--shadow-glow-blue);
  border-color: rgba(59, 130, 246, 0.2);
}

.card--glow-amber {
  box-shadow: var(--shadow-glow-amber);
  border-color: rgba(245, 158, 11, 0.25);
}

.card__title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── METRIC TILES ─────────────────────────────────────────── */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.metric-tile {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition);
}

.metric-tile:hover {
  border-color: var(--border-bright);
}

.metric-tile__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.metric-tile__value {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.metric-tile__delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 6px;
  font-family: var(--font-mono);
}

.metric-tile__delta--up {
  color: var(--accent-emerald);
}

.metric-tile__delta--down {
  color: var(--accent-rose);
}

.metric-tile__delta--flat {
  color: var(--text-muted);
}

.metric-tile__accent {
  position: absolute;
  width: 3px;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

/* ─── BADGES ───────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.badge--economico {
  background: rgba(100, 116, 139, 0.15);
  color: var(--seg-economico);
  border: 1px solid rgba(100, 116, 139, 0.3);
}

.badge--medio {
  background: rgba(59, 130, 246, 0.12);
  color: var(--seg-medio);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.badge--lujo {
  background: rgba(245, 158, 11, 0.12);
  color: var(--seg-lujo);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge--success {
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent-emerald);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.badge--warning {
  background: rgba(245, 158, 11, 0.12);
  color: var(--accent-amber);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.badge--danger {
  background: rgba(244, 63, 94, 0.12);
  color: var(--accent-rose);
  border: 1px solid rgba(244, 63, 94, 0.25);
}

/* ─── BUTTONS ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn--primary {
  background: var(--accent-blue);
  color: #fff;
}

.btn--primary:hover {
  background: var(--accent-blue-dim);
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.35);
  transform: translateY(-1px);
}

.btn--amber {
  background: var(--accent-amber);
  color: #0A0C14;
}

.btn--amber:hover {
  background: #D97706;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.35);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-bright);
}

.btn--ghost:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.btn--danger {
  background: rgba(244, 63, 94, 0.15);
  color: var(--accent-rose);
  border: 1px solid rgba(244, 63, 94, 0.2);
}

.btn--danger:hover {
  background: rgba(244, 63, 94, 0.25);
}

.btn--sm {
  padding: 6px 14px;
  font-size: 0.8rem;
}

.btn--lg {
  padding: 14px 28px;
  font-size: 1rem;
}

.btn--full {
  width: 100%;
  justify-content: center;
}

/* ─── FORM ELEMENTS ────────────────────────────────────────── */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  padding: 9px 12px;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.form-input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.form-input--mono {
  font-family: var(--font-mono);
}

/* Slider */
.slider-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

input[type="range"] {
  flex: 1;
  accent-color: var(--accent-blue);
  height: 4px;
  cursor: pointer;
}

.slider-value {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent-blue);
  min-width: 32px;
  text-align: right;
}

/* Select */
select.form-input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748B' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* ─── DECISION TABLE (Decision Sheet) ──────────────────────── */
.decision-sheet {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.decision-sheet__header {
  background: var(--bg-elevated);
  padding: 14px 20px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

.decision-sheet__label-cell {
  background: var(--bg-surface);
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.decision-sheet__label-category {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-blue);
  margin-bottom: 2px;
}

.decision-sheet__label-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
}

.decision-sheet__label-range {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.decision-sheet__input-cell {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
}

.decision-sheet__input-cell:last-child {
  border-right: none;
}

.decision-sheet__calc-cell {
  background: var(--bg-input);
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
}

.decision-sheet__calc-cell:last-child {
  border-right: none;
}

.calc-value {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
}

.calc-value--positive {
  color: var(--accent-emerald);
}

.calc-value--negative {
  color: var(--accent-rose);
}

.calc-value--neutral {
  color: var(--text-secondary);
}

.decision-sheet__section-divider {
  grid-column: 1 / -1;
  background: rgba(59, 130, 246, 0.05);
  border-top: 2px solid rgba(59, 130, 246, 0.15);
  border-bottom: 1px solid var(--border);
  padding: 8px 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-blue);
}

/* ─── LEADERBOARD / TABLE ───────────────────────────────────── */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table th {
  text-align: left;
  padding: 10px 16px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

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

.table tr:hover td {
  background: var(--bg-elevated);
  transition: background var(--transition);
}

.table__rank {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-dim);
}

.table__rank--1 {
  color: var(--accent-amber);
}

.table__rank--2 {
  color: var(--seg-economico);
}

.table__rank--3 {
  color: #92400E;
}

.table__you {
  font-weight: 700;
  color: var(--accent-blue);
}

.table__mono {
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

/* Right-aligned numeric cell — use on both <th> and <td> */
.table__num {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Center-aligned cell (e.g. rank, status icons) */
.table__ctr {
  text-align: center;
}

/* Wrapper that gives a .table horizontal scroll on small screens */
.table--scrollable {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ─── MARKET FIT SCORE ─────────────────────────────────────── */
.mfs-bar-wrapper {
  padding: 12px 0;
}

.mfs-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 0.78rem;
}

.mfs-bar-label span:first-child {
  color: var(--text-muted);
  font-weight: 500;
}

.mfs-bar-score {
  font-family: var(--font-mono);
  font-weight: 700;
}

.mfs-bar-track {
  height: 6px;
  background: var(--bg-elevated);
  border-radius: 99px;
  overflow: hidden;
}

.mfs-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-violet));
}

.mfs-bar-fill--low {
  background: linear-gradient(90deg, var(--accent-rose), #F97316);
}

.mfs-bar-fill--mid {
  background: linear-gradient(90deg, var(--accent-amber), #CA8A04);
}

.mfs-bar-fill--high {
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-emerald));
}

/* ─── PIPELINE VISUAL ──────────────────────────────────────── */
.pipeline {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 16px 0;
}

.pipeline-stage {
  flex: 1;
  text-align: center;
}

.pipeline-stage__label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.pipeline-stage__bar {
  height: 8px;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 0 4px;
}

.pipeline-stage__fill {
  height: 100%;
  background: var(--accent-blue);
  border-radius: var(--radius-sm);
  transition: width 0.6s ease;
}

.pipeline-stage__count {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 6px;
}

.pipeline-arrow {
  color: var(--text-dim);
  font-size: 1.2rem;
  padding: 0 4px;
  flex-shrink: 0;
}

/* ─── EVENT CARD ───────────────────────────────────────────── */
.event-card {
  background: rgba(245, 158, 11, 0.05);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.event-card__icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.event-card__title {
  font-weight: 700;
  color: var(--accent-amber);
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.event-card__desc {
  font-size: 0.83rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.event-card--incoming {
  background: rgba(244, 63, 94, 0.05);
  border-color: rgba(244, 63, 94, 0.25);
}

.event-card--incoming .event-card__title {
  color: var(--accent-rose);
}

/* ─── ARBITER REPORT ───────────────────────────────────────── */
.arbiter-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.arbiter-card__header {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.08));
  border-bottom: 1px solid var(--border);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.arbiter-card__verdict {
  padding: 24px;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--text-secondary);
}

/* ─── TIMER ─────────────────────────────────────────────────── */
.timer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-amber);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
}

.timer--urgent {
  color: var(--accent-rose);
  background: rgba(244, 63, 94, 0.08);
  border-color: rgba(244, 63, 94, 0.2);
}

/* ─── TABS ──────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.tab-btn {
  padding: 12px 20px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 7px;
}

.tab-btn:hover {
  color: var(--text-primary);
}

.tab-btn.active {
  color: var(--accent-blue);
  border-bottom-color: var(--accent-blue);
}

.tab-panel {
  display: none;
}

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

/* ─── STATUS INDICATORS ─────────────────────────────────────── */
.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot--green {
  background: var(--accent-emerald);
  box-shadow: 0 0 6px var(--accent-emerald);
}

.status-dot--amber {
  background: var(--accent-amber);
  box-shadow: 0 0 6px var(--accent-amber);
}

.status-dot--red {
  background: var(--accent-rose);
}

.status-dot--gray {
  background: var(--text-dim);
}

/* ─── PAGE HEADER ───────────────────────────────────────────── */
.page-header {
  margin-bottom: 28px;
}

.page-header__eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-header__title {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--text-primary);
  line-height: 1.2;
}

.page-header__subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 6px;
}

/* ─── PRODUCT CARDS ─────────────────────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.product-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.product-card:hover {
  border-color: var(--border-bright);
  box-shadow: var(--shadow-card);
}

.product-card__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.product-card__name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
}

.product-card__id {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  background: var(--bg-elevated);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.product-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.product-card__stat label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  display: block;
  margin-bottom: 3px;
}

.product-card__stat .val {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* ─── AI SUGGEST BOX ─────────────────────────────────────────── */
.ai-suggest-box {
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-top: 12px;
}

.ai-suggest-box__header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent-violet);
  margin-bottom: 10px;
}

.ai-suggest-box__json {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-secondary);
  background: var(--bg-input);
  padding: 12px;
  border-radius: var(--radius-sm);
  white-space: pre;
  overflow-x: auto;
  line-height: 1.7;
}

.ai-suggest-box__actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

/* ─── BUDGET GAUGE ─────────────────────────────────────────── */
.budget-gauge {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 24px;
}

.budget-gauge__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.budget-gauge__title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.budget-gauge__numbers {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.budget-track {
  height: 8px;
  background: var(--bg-elevated);
  border-radius: 99px;
  overflow: hidden;
}

.budget-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent-emerald), #059669);
  transition: width 0.4s ease, background 0.3s;
}

.budget-fill--warn {
  background: linear-gradient(90deg, var(--accent-amber), #D97706);
}

.budget-fill--crit {
  background: linear-gradient(90deg, var(--accent-rose), #E11D48);
}

/* ─── SPARKLINE ─────────────────────────────────────────────── */
.sparkline-wrap {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.sparkline {
  width: 100%;
  height: 36px;
  display: block;
  overflow: visible;
}

/* ─── TREND BARS ─────────────────────────────────────────────── */
.trend-chart {
  padding: 16px 20px;
}

.trend-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 60px;
}/* Staggered animation for children — extendido a 9 elementos */
.stagger > * {
  opacity: 0;
  animation: fadeInUp 0.4s ease forwards;
}

.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.10s; }
.stagger > *:nth-child(3) { animation-delay: 0.15s; }
.stagger > *:nth-child(4) { animation-delay: 0.20s; }
.stagger > *:nth-child(5) { animation-delay: 0.25s; }
.stagger > *:nth-child(6) { animation-delay: 0.30s; }
.stagger > *:nth-child(7) { animation-delay: 0.35s; }
.stagger > *:nth-child(8) { animation-delay: 0.40s; }
.stagger > *:nth-child(9) { animation-delay: 0.45s; }

/* ─── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-bright); }


/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2.0 — PREMIUM B2B ADDITIONS
   "Por qué cada decisión está documentada inline"
═══════════════════════════════════════════════════════════════ */


/* ─── GLASSMORPHISM REFINADO ──────────────────────────────────
   Por qué: El blur anterior era solo 8px (topnav). Para tarjetas
   que flotan sobre fondos con gradientes de color (run-turn-bar,
   leaderboard headers), necesitamos saturate(180%) que intensifica
   los colores subyacentes y los hace visibles a través del vidrio.
   backdrop-filter: blur(20px) saturate(180%) crea un efecto Premium
   similar a macOS Sonoma / Linear App.
──────────────────────────────────────────────────────────────── */
.card--glass {
  background: rgba(16, 20, 32, 0.65);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.card--glass:hover {
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* Variante por segmento — tinte de color + glass */
.card--glass-economico {
  background: rgba(100, 116, 139, 0.08);
  border-color: rgba(100, 116, 139, 0.20);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.card--glass-medio {
  background: rgba(59, 130, 246, 0.07);
  border-color: rgba(59, 130, 246, 0.18);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.08), 0 8px 28px rgba(0,0,0,0.4);
}

.card--glass-lujo {
  background: rgba(245, 158, 11, 0.07);
  border-color: rgba(245, 158, 11, 0.18);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.08), 0 8px 28px rgba(0,0,0,0.4);
}


/* ─── TABLA PREMIUM — JERARQUÍA VISUAL REFINADA ──────────────
   Por qué del hover con acento izquierdo: Las tablas de datos son
   el core del panel del profesor. Un simple background-hover hace
   que la fila "parpadee" sin mostrar qué columna importa.
   La barra izquierda de color + translateX(2px) en el contenido
   da una sensación de "selección activa" similar a VS Code o Linear.
──────────────────────────────────────────────────────────────── */

/* Números financieros con alineación de columnas perfecta */
.table td.num,
.table th.num {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  /* tabular-nums: todos los dígitos tienen el mismo ancho →
     las columnas de ARR, CAC, etc. se alinean perfectamente
     sin importar cuántos dígitos tiene el número */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Hover con acento izquierdo — micro-interacción */
.table tbody tr {
  position: relative;
  transition: background var(--transition);
}

.table tbody tr::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent-blue);
  border-radius: 0 2px 2px 0;
  opacity: 0;
  transform: scaleY(0.3);
  transition: opacity var(--transition), transform var(--transition);
}

.table tbody tr:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

.table tbody tr:hover td {
  background: rgba(59, 130, 246, 0.05);
  /* Deslizamiento sutil del contenido al hacer hover */
  padding-left: 20px;
  transition: background var(--transition), padding-left var(--transition);
}

/* Cabeceras sticky mejoradas */
.table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.table thead th {
  background: rgba(16, 20, 32, 0.92);
  border-bottom: 2px solid rgba(59, 130, 246, 0.15);
}

/* Rank badges con jerarquía visual fuerte */
.table__rank--1 {
  color: var(--accent-neon-mint);
  text-shadow: 0 0 12px rgba(0, 229, 160, 0.6);
  font-size: 1rem;
}

.table__rank--2 {
  color: var(--accent-neon-blue);
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

.table__rank--3 {
  color: var(--accent-neon-amber);
  text-shadow: 0 0 8px rgba(252, 211, 77, 0.4);
}

/* Fila destacada para el primer lugar */
.table tbody tr.rank-1-row td {
  background: rgba(0, 229, 160, 0.04);
}

.table tbody tr.rank-1-row::before {
  background: var(--accent-neon-mint);
  opacity: 0.6;
  transform: scaleY(1);
}


/* ─── ANIMACIONES DE TAB-SWITCH ──────────────────────────────
   Por qué: El cambio de panel actual no tiene animación. El
   contenido "teletransporta", rompiendo la continuidad espacial.
   Un fade+scale de entrada da al usuario el contexto de que
   el contenido cambió sin ser disruptivo.
──────────────────────────────────────────────────────────────── */

@keyframes tabEnter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
  animation: tabEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}


/* ─── MICRO-INTERACCIÓN: FILTER FLASH ────────────────────────
   Por qué: Al aplicar un filtro en las tablas de historial,
   el usuario no sabe qué filas cambiaron. Un flash de color
   en las filas que resultan del filtro confirma visualmente
   que "algo pasó", reduciendo la carga cognitiva.
──────────────────────────────────────────────────────────────── */

@keyframes rowFlash {
  0%   { background: rgba(59, 130, 246, 0.18); }
  100% { background: transparent; }
}

.table tbody tr.filter-highlight td {
  animation: rowFlash 0.6s ease forwards;
}

/* Clase aplicable con JS al cambiar filtros */
.table--filtering tbody {
  opacity: 0.4;
  transition: opacity 0.15s;
}

.table--filtered tbody {
  opacity: 1;
  transition: opacity 0.2s;
}


/* ─── RANK BADGE PULSE (Top-3 Leaderboard) ───────────────────
   Por qué: El top-3 en un leaderboard merece ser distinto.
   Un pulso lento de box-shadow en el rank #1 atrae la atención
   sin ser intrusivo — es el mismo patrón que Discord usa para
   "en vivo" o que Linear usa para el ítem fijado.
──────────────────────────────────────────────────────────────── */

@keyframes rankPulse1 {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 160, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(0, 229, 160, 0.12); }
}

@keyframes rankPulse2 {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.10); }
}

.lb-rank-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8rem;
}

.lb-rank-medal--1 {
  background: rgba(0, 229, 160, 0.12);
  color: var(--accent-neon-mint);
  border: 1px solid rgba(0, 229, 160, 0.35);
  animation: rankPulse1 2.5s ease infinite;
}

.lb-rank-medal--2 {
  background: rgba(56, 189, 248, 0.10);
  color: var(--accent-neon-blue);
  border: 1px solid rgba(56, 189, 248, 0.30);
  animation: rankPulse2 3s ease infinite;
}

.lb-rank-medal--3 {
  background: rgba(252, 211, 77, 0.10);
  color: var(--accent-neon-amber);
  border: 1px solid rgba(252, 211, 77, 0.28);
}

.lb-rank-medal--other {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
}


/* ─── LEADERBOARD CARD POR SEGMENTO (Panel Profesor) ─────────
   Por qué: Actualmente los 3 leaderboards del panel del profesor
   usan el mismo fondo plano. Diferenciarlos visualmente con
   glass + tinte de color permite al profesor identificar de un
   vistazo a qué mercado corresponde cada columna.
──────────────────────────────────────────────────────────────── */

.seg-leaderboard-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-slow), transform var(--transition-slow);
}

.seg-leaderboard-card:hover {
  transform: translateY(-2px);
}

.seg-leaderboard-card--economico {
  background: rgba(100, 116, 139, 0.07);
  border: 1px solid rgba(100, 116, 139, 0.18);
}

.seg-leaderboard-card--economico:hover {
  box-shadow: 0 8px 32px rgba(100, 116, 139, 0.15);
}

.seg-leaderboard-card--medio {
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.16);
}

.seg-leaderboard-card--medio:hover {
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.16);
}

.seg-leaderboard-card--lujo {
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.16);
}

.seg-leaderboard-card--lujo:hover {
  box-shadow: 0 8px 32px rgba(245, 158, 11, 0.15);
}

.seg-leaderboard-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.seg-leaderboard-header--economico { background: rgba(100, 116, 139, 0.10); border-bottom-color: rgba(100, 116, 139, 0.20); }
.seg-leaderboard-header--medio     { background: rgba(59, 130, 246, 0.08);  border-bottom-color: rgba(59, 130, 246, 0.18); }
.seg-leaderboard-header--lujo      { background: rgba(245, 158, 11, 0.08);  border-bottom-color: rgba(245, 158, 11, 0.18); }


/* ─── RUN-TURN BAR — GLASSMORPHISM ───────────────────────────
   Por qué: La barra de avance de turno es el action element más
   importante del panel del profesor. Necesita destacar visualmente
   sobre el resto del contenido. Glass + glow azul-violeta lo
   identifica como "zona de acción" inmediatamente.
──────────────────────────────────────────────────────────────── */

.run-turn-bar {
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.20);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: box-shadow var(--transition-slow), border-color var(--transition-slow);
}

.run-turn-bar:hover {
  border-color: rgba(59, 130, 246, 0.32);
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.12),
    0 12px 32px rgba(59, 130, 246, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}


/* ─── BADGE NEON — NUEVAS VARIANTES ──────────────────────────
   Variantes de badge que usan la nueva paleta neon.
──────────────────────────────────────────────────────────────── */

.badge--neon-mint {
  background: rgba(0, 229, 160, 0.10);
  color: var(--accent-neon-mint);
  border: 1px solid rgba(0, 229, 160, 0.28);
  box-shadow: 0 0 8px rgba(0, 229, 160, 0.12);
}

.badge--neon-blue {
  background: rgba(56, 189, 248, 0.10);
  color: var(--accent-neon-blue);
  border: 1px solid rgba(56, 189, 248, 0.28);
}

.badge--neon-violet {
  background: rgba(167, 139, 250, 0.10);
  color: var(--accent-neon-violet);
  border: 1px solid rgba(167, 139, 250, 0.28);
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.10);
}

.badge--live {
  background: rgba(0, 229, 160, 0.10);
  color: var(--accent-neon-mint);
  border: 1px solid rgba(0, 229, 160, 0.28);
  animation: rankPulse1 2s ease infinite;
}


/* ─── METRIC TILE v2 — HOVER CON GLOW ────────────────────────
   Por qué: Los metric tiles del panel del profesor son la primera
   cosa que ve el profesor al abrir el dashboard. Un glow de color
   específico en hover (guiado por el color del accent stripe)
   hace que cada KPI tenga identidad visual propia.
──────────────────────────────────────────────────────────────── */

.metric-tile {
  cursor: default;
  transition:
    border-color var(--transition),
    box-shadow var(--transition-slow),
    transform var(--transition);
}

.metric-tile:hover {
  border-color: var(--border-bright);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Número principal con animación de contador */
@keyframes metricPop {
  0%   { transform: scale(0.92); opacity: 0.5; }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1);    opacity: 1; }
}

.metric-tile__value--animate {
  animation: metricPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}


/* ─── PROGRESS BAR v2 — ANIMACIÓN SHIMMER ────────────────────
   Por qué: Una barra de progreso estática no comunica "en proceso".
   El shimmer (brillo que atraviesa la barra) indica actividad
   y hace que la barra de "Envíos Recibidos" se sienta viva.
──────────────────────────────────────────────────────────────── */

@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

.progress-bar-fill {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-violet));
}

.progress-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: shimmer 2.2s ease infinite;
}


/* ─── ACTION BAR (for decisions) ───────────────────────────── */
.action-bar {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.action-bar__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.action-bar__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.action-bar__budget {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.action-bar__budget span {
  color: var(--accent-amber);
}

/* ─── MISC ──────────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}

.flex {
  display: flex;
}

.flex--between {
  justify-content: space-between;
}

.flex--center-y {
  align-items: center;
}

.flex--gap-sm {
  gap: 8px;
}

.flex--gap-md {
  gap: 16px;
}

.mt-sm {
  margin-top: 8px;
}

.mt-md {
  margin-top: 16px;
}

.mt-lg {
  margin-top: 24px;
}

.mb-md {
  margin-bottom: 16px;
}

.mb-lg {
  margin-bottom: 24px;
}

.text-mono {
  font-family: var(--font-mono);
}

.text-muted {
  color: var(--text-muted);
}

.text-sm {
  font-size: 0.8rem;
}

.section-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-glow {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: fadeInUp 0.45s ease forwards;
}

.animate-pulse {
  animation: pulse-glow 2s ease infinite;
}

/* Staggered animation for children */
.stagger>* {
  opacity: 0;
  animation: fadeInUp 0.4s ease forwards;
}

.stagger>*:nth-child(1) {
  animation-delay: 0.05s;
}

.stagger>*:nth-child(2) {
  animation-delay: 0.1s;
}

.stagger>*:nth-child(3) {
  animation-delay: 0.15s;
}

.stagger>*:nth-child(4) {
  animation-delay: 0.2s;
}

.stagger>*:nth-child(5) {
  animation-delay: 0.25s;
}

/* ─── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--bg-hover);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-bright);
}

/* ════════════════════════════════════════════════════════════
 * v2.1 — Componentes de "Contexto del Mercado" para el alumno
 * Estos estilos son ADITIVOS — NO modifican selectores existentes.
 * ════════════════════════════════════════════════════════════ */

/* ── Panel de contexto del segmento (decisions) ─────────────── */
/* Card compacto que muestra al alumno qué segmento estima el motor
 * para su producto y cuáles son los targets/rangos esperados. Va al
 * lado del MFS bar de cada producto. */
.context-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.context-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.context-card__title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.context-card__rows {
  display: grid;
  gap: 6px;
}

.context-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.context-row__label {
  color: var(--text-muted);
}

.context-row__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-primary);
}

.context-row__value--good   { color: var(--accent-emerald); }
.context-row__value--warn   { color: var(--accent-amber); }
.context-row__value--bad    { color: var(--accent-rose); }

/* Pill grande de segmento detectado: A → Lujo, B → Medio… */
.segment-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: var(--font-sans);
}

.segment-pill--economico {
  background: rgba(100, 116, 139, 0.12);
  border: 1px solid rgba(100, 116, 139, 0.3);
  color: var(--seg-economico);
}

.segment-pill--medio {
  background: rgba(59, 130, 246, 0.10);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: var(--seg-medio);
}

.segment-pill--lujo {
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--seg-lujo);
}

/* ── Banner "Tu portafolio" — A vs B side-by-side ──────────── */
/* Bloque que aparece arriba del decision-sheet mostrando de un vistazo
 * los 2 productos y sus segmentos detectados (pueden ser distintos!). */
.portfolio-banner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: stretch;
  background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 20px;
}

.portfolio-banner__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.portfolio-banner__divider {
  width: 1px;
  background: var(--border);
}

.portfolio-banner__product-tag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.portfolio-banner__name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.portfolio-banner__meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

.portfolio-banner__meta-item {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.portfolio-banner__meta-item strong {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-weight: 600;
}

/* Indicador visual cuando ambos productos quedan en el mismo segmento.
 * Aparece como badge sutil en el divider. */
.portfolio-banner__same-segment {
  align-self: center;
  font-size: 0.7rem;
  color: var(--accent-amber);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 700;
}

/* ── Slider con marcador del target del segmento ────────────── */
/* Envuelve un <input type="range"> agregando una zona destacada
 * (target-band) y un punto (target-marker) sobre la posición que el
 * segmento espera. Compatible con .slider-wrapper existente. */
.slider-with-target {
  position: relative;
  width: 100%;
}

.slider-with-target__track-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  pointer-events: none;
}

.slider-with-target__band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(16, 185, 129, 0.16);
  border-left: 1px dashed rgba(16, 185, 129, 0.45);
  border-right: 1px dashed rgba(16, 185, 129, 0.45);
  border-radius: 3px;
}

.slider-with-target__target {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-emerald);
  border: 2px solid var(--bg-primary);
  box-shadow: 0 0 0 2px var(--accent-emerald);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Etiqueta arriba del slider mostrando el rango ideal del segmento. */
.slider-target-hint {
  display: flex;
  justify-content: space-between;
  font-size: 0.66rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}

.slider-target-hint__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 999px;
  color: var(--accent-emerald);
  font-weight: 600;
  font-size: 0.66rem;
}

/* ── Distancia precio ↔ target (chip al lado del input precio) ── */
.price-distance-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  font-family: var(--font-mono);
  margin-left: 8px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.price-distance-chip--ok {
  color: var(--accent-emerald);
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.22);
}

.price-distance-chip--warn {
  color: var(--accent-amber);
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.22);
}

.price-distance-chip--bad {
  color: var(--accent-rose);
  background: rgba(244, 63, 94, 0.08);
  border-color: rgba(244, 63, 94, 0.22);
}

/* ── Tooltip de ayuda inline (?  con popover) ──────────────── */
.help-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.65rem;
  font-weight: 700;
  cursor: help;
  margin-left: 6px;
  position: relative;
  user-select: none;
}

.help-tip:hover {
  color: var(--accent-blue);
  border-color: var(--accent-blue);
}

.help-tip[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  white-space: pre-wrap;
  width: max-content;
  max-width: 240px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  z-index: 50;
  pointer-events: none;
  text-align: left;
  line-height: 1.4;
}

.help-tip[data-tip]:hover::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  z-index: 49;
}

/* ── Gráfico de trayectoria multi-turno (dashboard) ────────── */
/* SVG que muestra la evolución del equipo a través de los turnos.
 * Más informativo que sparklines individuales por tile. */
.trajectory-chart {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}

.trajectory-chart__legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.trajectory-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.trajectory-chart__legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.trajectory-chart__svg {
  width: 100%;
  height: 220px;
  display: block;
}

/* ── Matriz de posicionamiento 3×3 (segmentos × productos) ── */
/* Tabla mini estilo heatmap mostrando dónde está cada producto del
 * equipo respecto a los 3 segmentos. Útil cuando A y B están en
 * segmentos distintos del mismo mercado. */
.position-matrix {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  font-size: 0.74rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
}

.position-matrix__cell {
  padding: 8px 6px;
  text-align: center;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.position-matrix__cell--head {
  background: transparent;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.position-matrix__cell--row-label {
  background: transparent;
  text-align: left;
  color: var(--text-secondary);
  font-weight: 600;
  font-family: var(--font-sans);
  text-transform: capitalize;
}

.position-matrix__cell--filled {
  background: rgba(59, 130, 246, 0.18);
  color: var(--accent-blue);
  font-weight: 700;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.position-matrix__cell--filled.position-matrix__cell--lujo    { background: rgba(245, 158, 11, 0.18); color: var(--seg-lujo); border-color: rgba(245, 158, 11, 0.4); }
.position-matrix__cell--filled.position-matrix__cell--economico { background: rgba(100, 116, 139, 0.22); color: var(--seg-economico); border-color: rgba(100, 116, 139, 0.45); }

/* ── Banda de promedio de segmento (results / financial-trend) ── */
/* Línea horizontal punteada que representa el promedio del segmento
 * para superponer en el gráfico financial. */
.segment-average-line {
  stroke: var(--accent-violet);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  fill: none;
  opacity: 0.7;
}

.segment-average-band {
  fill: rgba(139, 92, 246, 0.06);
  stroke: none;
}

/* ════════════════════════════════════════════════════════════
 * Fin v2.1
 * ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
 * v2.2 — Micro-charts con escala y referencias para metric-tiles
 * Reemplazan los sparklines "tendencia ciega" por gráficos con:
 *   · eje Y con etiquetas de min/max
 *   · banda de "zona saludable" según semántica de la métrica
 *   · línea de referencia (target o promedio histórico)
 *   · punto actual destacado + valor anotado
 *   · etiquetas de turno en X
 *   · footer con stats: actual, mejor, promedio
 * ════════════════════════════════════════════════════════════ */

.metric-chart-wrap {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.metric-chart-wrap__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.66rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
  margin-bottom: 6px;
}

.metric-chart-wrap__label-help {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

.metric-chart {
  width: 100%;
  height: 78px;
  display: block;
  overflow: visible;
}

/* Banda de zona "saludable" (verde tenue) o "riesgo" (rojo tenue) */
.metric-chart__band-good {
  fill: rgba(16, 185, 129, 0.08);
  stroke: none;
}

.metric-chart__band-bad {
  fill: rgba(244, 63, 94, 0.06);
  stroke: none;
}

/* Línea horizontal de referencia (target o promedio histórico) */
.metric-chart__refline {
  stroke: var(--text-dim);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  fill: none;
  opacity: 0.7;
}

.metric-chart__refline-label {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--text-dim);
  font-weight: 600;
}

/* Eje Y: ticks min/max */
.metric-chart__axis-label {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--text-dim);
}

/* Eje X: turnos */
.metric-chart__x-label {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--text-dim);
}

.metric-chart__x-label--current {
  fill: var(--accent-blue);
  font-weight: 700;
}

/* Línea de la serie y puntos */
.metric-chart__line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.metric-chart__dot {
  stroke: var(--bg-surface);
  stroke-width: 1.5;
}

.metric-chart__dot--last {
  stroke-width: 2;
  filter: drop-shadow(0 0 4px currentColor);
}

/* Anotación del valor actual al lado del último punto */
.metric-chart__annotation {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}

/* Footer del tile: stats compactos (mejor, promedio, peor) */
.metric-tile__stats {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 0.66rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.metric-tile__stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex: 1;
}

.metric-tile__stats-item__label {
  font-size: 0.58rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}

.metric-tile__stats-item__value {
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.metric-tile__stats-item__value--good { color: var(--accent-emerald); }
.metric-tile__stats-item__value--bad  { color: var(--accent-rose); }

/* ════════════════════════════════════════════════════════════
 * Fin v2.2
 * ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
 * v2.3 — Consolidación CSS: tokens de espaciado, estados de
 * formulario/botón, spinner, layout auth/landing, page-mark,
 * bg-grid, role-card, stats-row.
 *
 * 100% aditivo: NO modifica ni redeclara selectores existentes.
 * El objetivo es que index.html / student-login.html /
 * professor-login.html (y futuros) puedan eliminar los <style>
 * inline duplicados sin cambios visuales.
 * ════════════════════════════════════════════════════════════ */

/* ─── SPACING TOKENS ─────────────────────────────────────────
   Escala 4-base. Usar en gap, padding, margin antes que valores
   hardcoded. No reemplazo valores existentes del design-system
   para evitar regresiones; aplicar gradualmente en código nuevo. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 56px;
  --space-10: 64px;
}

/* ─── FORM STATES ────────────────────────────────────────────
   Extensiones del .form-input ya existente. Por qué:
   - .form-input--error refuerza la validación inline en v2.5.
   - aria-invalid="true" cubre el caso a11y sin requerir clase extra. */
.form-input--error,
.form-input[aria-invalid="true"] {
  border-color: var(--accent-rose);
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.10);
}
.form-input--error:focus,
.form-input[aria-invalid="true"]:focus {
  border-color: var(--accent-rose);
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.18);
}
.form-input--success {
  border-color: var(--accent-emerald);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.10);
}
[data-theme="light"] .form-input--error,
[data-theme="light"] .form-input[aria-invalid="true"] {
  border-color: #E11D48;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}
[data-theme="light"] .form-input--success {
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12);
}

/* Texto bajo un input: ayuda neutral o error con icono */
.field-hint {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.4;
}
.field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--accent-rose);
  margin-top: 6px;
  line-height: 1.4;
}
.field-error::before {
  content: "⚠";
  font-size: 0.9em;
  line-height: 1;
}

/* ─── BUTTON STATES ──────────────────────────────────────────
   Extensiones del .btn ya existente. !important sólo en transform
   y box-shadow para neutralizar el hover de las variantes (que
   aplican translateY y glow). */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover {
  /* anula el cambio de background del hover de cada variante */
  filter: none;
}

/* Estado loading: oculta el texto y muestra spinner centrado.
   Reusa el color del botón (currentColor) y por eso el .btn--ghost
   tiene su override. */
.btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn--loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn--amber.btn--loading::after { border-color: #0A0C14; border-top-color: transparent; }
.btn--ghost.btn--loading::after { border-color: var(--text-primary); border-top-color: transparent; }
.btn--danger.btn--loading::after { border-color: var(--accent-rose); border-top-color: transparent; }

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

/* Spinner standalone (para skeletons / loaders inline) */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-bright);
  border-top-color: var(--accent-blue);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}
.spinner--sm { width: 12px; height: 12px; border-width: 1.5px; }
.spinner--lg { width: 28px; height: 28px; border-width: 3px; }
.spinner--amber   { border-top-color: var(--accent-amber); }
.spinner--emerald { border-top-color: var(--accent-emerald); }
.spinner--violet  { border-top-color: var(--accent-violet); }

/* ─── LAYOUT: PÁGINAS CENTRADAS (auth / landing) ─────────────
   Body utility para páginas que se montan centradas en el viewport.
   Antes este patrón vivía duplicado en 3 <style> inline. */
.page-centered {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* Fondo decorativo de cuadrícula (fijo, no interactivo).
   Variantes de color tinte. Default: azul (landing).
   Promovido desde index.html / student-login.html / professor-login.html. */
.bg-grid {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}
.bg-grid--emerald {
  background-image:
    linear-gradient(rgba(16, 185, 129, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 185, 129, 0.02) 1px, transparent 1px);
}
.bg-grid--amber {
  background-image:
    linear-gradient(rgba(245, 158, 11, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 158, 11, 0.02) 1px, transparent 1px);
}

/* ─── PAGE MARK — Logo/icono grande del hero de la página ───
   Promovido desde .logo-mark (index.html) y .login-icon
   (student-login / professor-login). Mismo tamaño y forma:
   sólo cambia el gradiente. Variantes explícitas en lugar de
   inline custom-styles. */
.page-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  font-size: 2rem;
  margin-bottom: 24px;
  /* Defaults (azul-violeta) por si se usa sin modifier */
  background: linear-gradient(135deg, #3B82F6, #8B5CF6);
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.35);
  line-height: 1;
}
.page-mark--blue {
  background: linear-gradient(135deg, #3B82F6, #8B5CF6);
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.35);
}
.page-mark--emerald {
  background: linear-gradient(135deg, #10B981, #059669);
  box-shadow: 0 8px 32px rgba(16, 185, 129, 0.35);
}
.page-mark--amber {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  box-shadow: 0 8px 32px rgba(245, 158, 11, 0.35);
}

/* Animación de "sacudida" para feedback de error (promovido del
   .login-icon.shake en professor-login.html). Aplica con JS al
   fallar login: page-mark.classList.add('shake'). */
@keyframes pageMarkShake {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-8deg); }
  75%      { transform: rotate(8deg); }
}
.page-mark.shake { animation: pageMarkShake 0.4s ease; }

/* ─── AUTH PAGE COMPONENTS ──────────────────────────────────
   Contenedor + título + subtítulo + card para login/onboarding.
   Promovidos desde student-login.html y professor-login.html.
   El font-family de inputs dentro de .auth-card lo decide cada
   página (algunas quieren mono, otras UI) — no se fuerza aquí. */
.auth-container {
  position: relative;
  z-index: 1;
  max-width: 480px;
  width: 100%;
  padding: 40px 24px;
  text-align: center;
  animation: fadeInUp 0.6s ease forwards;
}
.auth-container--narrow { max-width: 420px; }

.auth-title {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.2;
}
.auth-subtitle {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 28px;
}

.auth-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px 24px;
  text-align: left;
}

.auth-footer {
  margin-top: 22px;
  font-size: 0.78rem;
  color: var(--text-dim);
  text-align: center;
}
.auth-footer a {
  color: var(--text-muted);
  text-decoration: none;
}
.auth-footer a:hover { color: var(--text-secondary); }

/* Divider horizontal con texto en medio ("o", "ingresa con", etc.) */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  color: var(--text-dim);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-bright);
}

/* Caja de error inline (login failure). Visible cuando se agrega .visible */
.auth-error {
  display: none;
  padding: 10px 14px;
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(244, 63, 94, 0.25);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--accent-rose);
  margin-bottom: 14px;
}
.auth-error.visible {
  display: block;
  animation: fadeInUp 0.3s ease forwards;
}

/* Pequeño chip de seguridad ("🛡️ Sesión cifrada") */
.security-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 99px;
  border: 1px solid rgba(16, 185, 129, 0.3);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-emerald);
  background: rgba(16, 185, 129, 0.08);
}

/* ─── LANDING (index.html) ──────────────────────────────────
   Componentes específicos de la página de entrada. Promovidos del
   <style> inline de index.html para que futuras versiones del
   landing puedan reusarlos. */
.landing {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 680px;
  width: 100%;
  padding: 40px 24px;
  animation: fadeInUp 0.6s ease forwards;
}
.landing__wordmark {
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -1.5px;
  background: linear-gradient(135deg, #F1F5F9, #94A3B8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 6px;
}
[data-theme="light"] .landing__wordmark {
  background: linear-gradient(135deg, #0F172A, #475569);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.landing__tagline {
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 12px;
}
.landing__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.landing__meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 99px;
  border: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-surface);
}
.landing__footer {
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* Role cards — dos botones grandes "Soy Alumno" / "Soy Profesor" */
.role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}
.role-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px 24px;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden;
}
.role-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--transition);
  border-radius: var(--radius-xl);
}
.role-card--student::before {
  background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 60%);
}
.role-card--professor::before {
  background: radial-gradient(circle at top left, rgba(245, 158, 11, 0.12), transparent 60%);
}
.role-card:hover {
  border-color: var(--border-bright);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.role-card:hover::before { opacity: 1; }
.role-card--student:hover {
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: var(--shadow-glow-blue);
}
.role-card--professor:hover {
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: var(--shadow-glow-amber);
}
.role-card__icon {
  font-size: 2.2rem;
  margin-bottom: 16px;
  display: block;
}
.role-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.role-card__desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.role-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}
.role-card--student .role-card__arrow { color: var(--accent-blue); }
.role-card--professor .role-card__arrow { color: var(--accent-amber); }

/* Stats row debajo del landing (3 cifras destacadas) */
.stats-row {
  display: flex;
  gap: 32px;
  justify-content: center;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.stats-row__item { text-align: center; }
.stats-row__num {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  display: block;
}
.stats-row__label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
 * Fin v2.3
 * ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
 * v2.4 — Responsive (mobile / tablet refinement)
 *
 * Breakpoints (referencia, no se usan en @media — CSS no soporta
 * vars en media queries; se documentan aquí y se hardcodean abajo):
 *   ≤1024px  Tablet landscape y menores
 *   ≤768px   Tablet portrait y menores
 *   ≤600px   Phablet
 *   ≤480px   Smartphone
 *
 * Convención: usar @media (max-width: …) para que el look desktop
 * existente quede intacto y cada query sea una adaptación explícita
 * a pantallas más pequeñas. 100% aditivo.
 * ════════════════════════════════════════════════════════════ */

:root {
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/* ─── UTILITIES RESPONSIVE ──────────────────────────────────── */

/* Envuelve una tabla para darle scroll horizontal en pantallas
   estrechas sin desbordar el viewport. */
.table-scroll-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Visibilidad por viewport */
.show-mobile { display: none; }
.show-tablet { display: none; }

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: revert !important; }
}
@media (max-width: 1024px) {
  .hide-tablet { display: none !important; }
  .show-tablet { display: revert !important; }
}

/* Stack utility: pasa flex-row a flex-column en mobile */
@media (max-width: 768px) {
  .stack-mobile {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* Touch targets mínimos (44×44 — Apple HIG / WCAG 2.5.5) */
@media (max-width: 768px) {
  .btn,
  .tab-btn,
  .role-card__arrow,
  .sidebar__link {
    min-height: 44px;
  }
  .btn--sm {
    min-height: 36px; /* Pequeños quedan al menos 36px */
  }
}

/* ─── LAYOUT / SHELL ─────────────────────────────────────────── */

@media (max-width: 768px) {
  .container { padding: 0 16px; }
  .page { padding: 20px 0 48px; }
  .main-content { padding: 20px 16px 48px; }
}
@media (max-width: 480px) {
  .container { padding: 0 12px; }
  .main-content { padding: 16px 12px 40px; }
}

/* ─── TOPNAV ─────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .topnav__inner {
    height: 52px;
    padding: 0 16px;
  }
  .topnav__wordmark { font-size: 0.95rem; }
  .topnav__meta {
    gap: 8px;
    font-size: 0.72rem;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .topnav__turn { padding: 3px 8px; font-size: 0.7rem; }
}

@media (max-width: 480px) {
  .topnav__inner { height: 48px; padding: 0 12px; }
  /* En smartphones reducimos el wordmark al máximo */
  .topnav__wordmark { font-size: 0.85rem; }
  .topnav__meta .btn--sm {
    padding: 4px 10px;
    font-size: 0.72rem;
  }
}

/* ─── SIDEBAR ────────────────────────────────────────────────── */

/* En tablet/mobile, sidebar deja de ser columna fija y pasa a barra
   horizontal scrollable arriba del contenido. */
@media (max-width: 1024px) {
  .layout-sidebar {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 10px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    gap: 4px;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar__label {
    /* Etiquetas de sección no caben en horizontal */
    display: none;
  }
  .sidebar__link {
    flex-shrink: 0;
    padding: 9px 14px;
  }
}

/* ─── METRICS GRID (4 → 2 → 1) ──────────────────────────────── */

@media (max-width: 1024px) {
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .metrics-grid { grid-template-columns: 1fr; }
}

/* ─── PRODUCTS GRID (1fr 1fr → 1fr stack) ──────────────────── */

@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ─── LANDING / ROLE CARDS ─────────────────────────────────── */

@media (max-width: 768px) {
  .landing {
    padding: 24px 16px;
  }
  .landing__wordmark { font-size: 2.2rem; letter-spacing: -1px; }
  .landing__meta { gap: 8px; margin-bottom: 32px; }
}

@media (max-width: 600px) {
  .role-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .landing__wordmark { font-size: 1.7rem; letter-spacing: -0.5px; }
  .landing__tagline { font-size: 0.9rem; }
  .role-card { padding: 24px 20px; }
  .role-card__icon { font-size: 1.8rem; }
  .role-card__title { font-size: 1rem; }
}

/* ─── STATS ROW ─────────────────────────────────────────────── */

@media (max-width: 768px) {
  .stats-row {
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 32px;
    padding-top: 24px;
  }
  .stats-row__item { flex: 1 0 40%; }
}
@media (max-width: 480px) {
  .stats-row__num { font-size: 1.3rem; }
  .stats-row__label { font-size: 0.66rem; }
}

/* ─── PAGE MARK ─────────────────────────────────────────────── */

@media (max-width: 480px) {
  .page-mark {
    width: 60px;
    height: 60px;
    font-size: 1.6rem;
    margin-bottom: 16px;
    border-radius: 16px;
  }
}

/* ─── AUTH CONTAINER / CARD ─────────────────────────────────── */

@media (max-width: 480px) {
  .auth-container { padding: 24px 16px; }
  .auth-card { padding: 20px 16px; }
  .auth-title { font-size: 1.4rem; }
  .auth-subtitle { font-size: 0.85rem; margin-bottom: 20px; }
}

/* ─── PAGE HEADER ───────────────────────────────────────────── */

@media (max-width: 768px) {
  .page-header__title { font-size: 1.5rem; letter-spacing: -0.5px; }
  .page-header__subtitle { font-size: 0.85rem; }
}

/* ─── RUN TURN BAR (panel profesor) ─────────────────────────── */

@media (max-width: 768px) {
  .run-turn-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px 18px;
  }
}

/* ─── DECISION SHEET / TABLE ────────────────────────────────── */

@media (max-width: 768px) {
  .decision-sheet {
    grid-template-columns: 1fr;
  }
  .decision-sheet__label-cell,
  .decision-sheet__input-cell,
  .decision-sheet__calc-cell {
    border-right: none;
    padding: 10px 16px;
  }
}

/* ─── ACTION BAR ────────────────────────────────────────────── */

@media (max-width: 768px) {
  .action-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 18px;
  }
}

/* ─── TABS (scroll horizontal en mobile) ────────────────────── */

@media (max-width: 768px) {
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px 16px;
    padding: 0 16px;
    flex-wrap: nowrap;
  }
  .tab-btn {
    flex-shrink: 0;
    padding: 10px 14px;
    font-size: 0.8rem;
  }
}

/* ─── TABLES (cuando viven envueltas en .table-scroll-wrap) ──── */

@media (max-width: 768px) {
  .table { font-size: 0.8rem; }
  .table th,
  .table td { padding: 8px 10px; }
  .table-scroll-wrap .table { min-width: 640px; }
}

/* ─── PORTFOLIO BANNER ──────────────────────────────────────── */

@media (max-width: 768px) {
  .portfolio-banner {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .portfolio-banner__divider {
    width: 100%;
    height: 1px;
  }
}

/* ─── POSITION MATRIX (compacto en phones) ──────────────────── */

@media (max-width: 480px) {
  .position-matrix {
    font-size: 0.66rem;
    gap: 3px;
    padding: 10px 8px;
  }
  .position-matrix__cell { padding: 6px 4px; }
}

/* ─── SLIDERS: thumb más grande para touch ──────────────────── */

@media (max-width: 768px) {
  input[type="range"] { height: 6px; }
  input[type="range"]::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
  }
  input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
  }
}

/* ─── HELP TIP TOOLTIP ──────────────────────────────────────── */

@media (max-width: 480px) {
  .help-tip[data-tip]:hover::after {
    max-width: 200px;
    font-size: 0.7rem;
  }
}

/* ─── CONTEXT CARD / PORTFOLIO META ─────────────────────────── */

@media (max-width: 480px) {
  .context-card { padding: 12px 14px; }
  .context-row { font-size: 0.74rem; }
}

/* ─── SEGMENT LEADERBOARD CARDS (profesor) ──────────────────── */

@media (max-width: 768px) {
  .seg-leaderboard-card { border-radius: var(--radius-md); }
  .seg-leaderboard-header { padding: 12px 14px; }
}

/* ─── REDUCED MOTION RESPECT ────────────────────────────────── */

/* Respeta a usuarios que prefieren menos animación. v2.6 lo
   profundizará; aquí cubrimos las animaciones más visibles. */
@media (prefers-reduced-motion: reduce) {
  .stagger > *,
  .animate-fade-up,
  .animate-pulse,
  .lb-rank-medal--1,
  .lb-rank-medal--2,
  .badge--live,
  .progress-bar-fill::after {
    animation: none !important;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════
 * Fin v2.4
 * ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
 * v2.5 — Rediseño UX: jerarquía de pantallas clave
 *
 * Cada pantalla del simulador debe tener un mensaje principal
 * claro y la próxima acción evidente. Estos componentes son las
 * piezas para reordenar la jerarquía de:
 *   - Landing (index): preview de mercados
 *   - Dashboard alumno: estado del turno + CTA primario
 *   - Decisiones alumno: sticky bar inferior + autosave visible
 *   - Resultados alumno: storytelling antes que tabla
 *
 * 100% aditivo. Ninguno reemplaza un componente existente.
 * ════════════════════════════════════════════════════════════ */

/* ─── HERO CARD ──────────────────────────────────────────────
   Card hero para el tope de una página: eyebrow (estado), título
   prominente, meta secundaria (deadline, etc.) y CTA primario.
   Usado en student-dashboard para destacar el estado del turno. */
.hero-card {
  background: linear-gradient(135deg,
    rgba(59, 130, 246, 0.08) 0%,
    rgba(139, 92, 246, 0.06) 100%);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  margin-bottom: 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Acento luminoso en la esquina superior izquierda */
.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%,
    rgba(59, 130, 246, 0.15) 0%,
    transparent 50%);
  pointer-events: none;
}

.hero-card__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-card__eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-neon-blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-card__title {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--text-primary);
  line-height: 1.2;
}

.hero-card__meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 6px;
}
.hero-card__meta strong {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-weight: 600;
}

.hero-card__cta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* Variantes por estado del turno (semántica del color) */
.hero-card--success {
  background: linear-gradient(135deg,
    rgba(16, 185, 129, 0.08) 0%,
    rgba(56, 189, 248, 0.04) 100%);
  border-color: rgba(16, 185, 129, 0.25);
}
.hero-card--success::before {
  background: radial-gradient(circle at 0% 0%,
    rgba(16, 185, 129, 0.15) 0%, transparent 50%);
}
.hero-card--success .hero-card__eyebrow { color: var(--accent-neon-mint); }

.hero-card--warning {
  background: linear-gradient(135deg,
    rgba(245, 158, 11, 0.08) 0%,
    rgba(244, 63, 94, 0.04) 100%);
  border-color: rgba(245, 158, 11, 0.30);
}
.hero-card--warning::before {
  background: radial-gradient(circle at 0% 0%,
    rgba(245, 158, 11, 0.18) 0%, transparent 50%);
}
.hero-card--warning .hero-card__eyebrow { color: var(--accent-neon-amber); }

@media (max-width: 768px) {
  .hero-card {
    grid-template-columns: 1fr;
    padding: 22px 20px;
    gap: 16px;
  }
  .hero-card__cta { align-items: stretch; }
  .hero-card__title { font-size: 1.3rem; }
  .hero-card__meta { gap: 10px; font-size: 0.78rem; }
}

/* ─── MARKETS GRID — Mini cards de mercados ─────────────────
   Tira visual del landing mostrando los 3 mercados (Moda, Autos,
   Casas) con su icono, nombre y meta. */
.markets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
}

.market-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  text-align: center;
  transition: border-color var(--transition), transform var(--transition);
}
.market-card:hover {
  border-color: var(--border-bright);
  transform: translateY(-2px);
}

.market-card__icon {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 8px;
}

.market-card__name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.market-card__meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

@media (max-width: 600px) {
  .markets-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .market-card { padding: 16px 14px; }
}

/* ─── NARRATIVE SUMMARY — Storytelling card ─────────────────
   Resumen narrativo arriba del reporte de resultados.
   "Quedaste #3 en Lujo · ARR +12% · CAC bajó".
   El alumno entiende el resultado antes de bajar a la tabla. */
.narrative-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-neon-blue);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  margin-bottom: 24px;
}

.narrative-summary__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: rgba(56, 189, 248, 0.10);
  color: var(--accent-neon-blue);
  font-size: 1.5rem;
  font-weight: 700;
  flex-shrink: 0;
}

.narrative-summary__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.narrative-summary__eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.narrative-summary__headline {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
}
.narrative-summary__headline strong {
  color: var(--accent-neon-blue);
}

.narrative-summary__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.narrative-summary__fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.narrative-summary__fact strong {
  font-family: var(--font-mono);
  font-weight: 700;
}
.narrative-summary__fact--up    strong { color: var(--accent-emerald); }
.narrative-summary__fact--down  strong { color: var(--accent-rose); }
.narrative-summary__fact--flat  strong { color: var(--text-muted); }

/* Variantes según rango (rank 1-3 vs resto) */
.narrative-summary--top {
  border-left-color: var(--accent-neon-mint);
}
.narrative-summary--top .narrative-summary__mark {
  background: rgba(0, 229, 160, 0.10);
  color: var(--accent-neon-mint);
}
.narrative-summary--top .narrative-summary__headline strong {
  color: var(--accent-neon-mint);
}

.narrative-summary--warn {
  border-left-color: var(--accent-amber);
}
.narrative-summary--warn .narrative-summary__mark {
  background: rgba(245, 158, 11, 0.10);
  color: var(--accent-amber);
}
.narrative-summary--warn .narrative-summary__headline strong {
  color: var(--accent-amber);
}

@media (max-width: 768px) {
  .narrative-summary {
    grid-template-columns: 1fr;
    padding: 18px 20px;
    gap: 12px;
  }
  .narrative-summary__mark { width: 40px; height: 40px; font-size: 1.3rem; }
  .narrative-summary__headline { font-size: 1rem; }
  .narrative-summary__facts { gap: 6px 14px; font-size: 0.78rem; }
}

/* ─── STICKY BAR (acción persistente abajo) ─────────────────
   Barra que vive sticky al fondo del viewport mientras el alumno
   completa la hoja de decisiones. Muestra estado de borrador y
   permite enviar sin scrollear hasta el final. */
.sticky-bar {
  position: sticky;
  bottom: 16px;
  z-index: 50;
  background: rgba(16, 20, 32, 0.85);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .sticky-bar {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.50);
}

.sticky-bar__info {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.sticky-bar__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.sticky-bar__status--ok      { color: var(--accent-emerald); }
.sticky-bar__status--pending { color: var(--accent-amber); }
.sticky-bar__status--error   { color: var(--accent-rose); }

.sticky-bar__divider {
  width: 1px;
  height: 18px;
  background: var(--border);
}

.sticky-bar__actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-left: auto;
}

@media (max-width: 768px) {
  .sticky-bar {
    flex-direction: column;
    align-items: stretch;
    bottom: 8px;
    padding: 12px 14px;
    gap: 10px;
  }
  .sticky-bar__actions {
    margin-left: 0;
    justify-content: stretch;
  }
  .sticky-bar__actions .btn { flex: 1; justify-content: center; }
}

/* ─── SAVE INDICATOR (chip de autosave) ─────────────────────
   "Guardado hace 3s", "Guardando…", "Error al guardar".
   Compacto, neutral por default, semántico vía modifiers. */
.save-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  font-family: var(--font-mono);
  background: rgba(148, 163, 184, 0.10);
  color: var(--text-muted);
  border: 1px solid var(--border);
  transition: background var(--transition), color var(--transition);
}

.save-indicator__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

.save-indicator--saving {
  background: rgba(56, 189, 248, 0.10);
  color: var(--accent-neon-blue);
  border-color: rgba(56, 189, 248, 0.28);
}
.save-indicator--saving .save-indicator__dot {
  animation: pulse-glow 1s ease infinite;
}

.save-indicator--saved {
  background: rgba(16, 185, 129, 0.10);
  color: var(--accent-emerald);
  border-color: rgba(16, 185, 129, 0.28);
}

.save-indicator--error {
  background: rgba(244, 63, 94, 0.10);
  color: var(--accent-rose);
  border-color: rgba(244, 63, 94, 0.28);
}

/* ─── EMPTY STATE ───────────────────────────────────────────
   Placeholder cuando una sección no tiene datos. Más amable
   que un "Sin datos" pelado: icono + título + acción. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  background: var(--bg-surface);
  border: 1px dashed var(--border-bright);
  border-radius: var(--radius-lg);
  gap: 10px;
}

.empty-state__icon {
  font-size: 2.2rem;
  opacity: 0.7;
  margin-bottom: 4px;
}

.empty-state__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.empty-state__desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  max-width: 380px;
  line-height: 1.55;
}

.empty-state__cta {
  margin-top: 10px;
}

/* ─── CTA STACK ─────────────────────────────────────────────
   Bloque de botones primario + secundario con jerarquía visual
   clara. Usado en el hero-card cuando hay 1-2 acciones. */
.cta-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}
.cta-stack__hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

@media (max-width: 768px) {
  .cta-stack { align-items: stretch; }
  .cta-stack__hint { text-align: center; }
}

/* ════════════════════════════════════════════════════════════
 * Fin v2.5
 * ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
 * v2.6 — Pulido: microinteracciones, estados y a11y básica
 *
 * Capa de "se siente bien": skeletons, toasts, focus accesible,
 * tap feedback, prefers-reduced-motion ampliado. Aditivo: no
 * reemplaza selectores existentes (focus-visible es una
 * pseudo-clase nueva, no entra en conflicto con :focus).
 * ════════════════════════════════════════════════════════════ */

/* ─── SKELETONS (placeholders de carga) ──────────────────────
   Pantalla mientras DataStore o el motor termina de cargar.
   Animación shimmer reutiliza el @keyframes shimmer ya definido
   en v2.0. Variantes para texto / círculo / bloque. */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  display: inline-block;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.06),
    transparent);
  animation: shimmer 1.6s ease infinite;
  transform: translateX(-100%);
}

.skeleton--text {
  height: 0.9em;
  width: 100%;
  border-radius: 4px;
}
.skeleton--text.skeleton--short { width: 40%; }
.skeleton--text.skeleton--medium { width: 70%; }

.skeleton--circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.skeleton--block {
  width: 100%;
  height: 80px;
  border-radius: var(--radius-md);
}

.skeleton--tile {
  width: 100%;
  height: 110px;
  border-radius: var(--radius-md);
}

/* Grupos: stack vertical con gap pequeño */
.skeleton-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-theme="light"] .skeleton {
  background: rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .skeleton::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.04),
    transparent);
}


/* ─── TOAST SYSTEM (notificaciones globales) ─────────────────
   Estructura: un .toast-stack montado en <body> contiene N .toast.
   El JS de js/ui-toast.js inserta/remueve nodos. Aquí solo estilos. */

.toast-stack {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  background: rgba(16, 20, 32, 0.92);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 12px;
  pointer-events: auto;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    0 10px 36px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: toastSlideIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.45;
  position: relative;
  overflow: hidden;
}

.toast--leaving {
  animation: toastSlideOut 0.22s ease forwards;
}

@keyframes toastSlideIn {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes toastSlideOut {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(110%); opacity: 0; }
}

.toast__icon {
  font-size: 1.1rem;
  line-height: 1.3;
  flex-shrink: 0;
}

.toast__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0; /* permite que el texto haga wrap dentro del grid */
}

.toast__title {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.toast__message {
  color: var(--text-secondary);
  word-wrap: break-word;
}

.toast__close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  transition: color var(--transition);
}
.toast__close:hover { color: var(--text-primary); }

/* Barra de progreso para auto-dismiss (visible cuando el toast
   se va a auto-cerrar). Ancho controlado vía --duration. */
.toast__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.6;
  animation: toastBar var(--toast-duration, 4s) linear forwards;
}
@keyframes toastBar {
  from { width: 100%; }
  to   { width: 0%; }
}

/* Variantes semánticas */
.toast--success {
  border-color: rgba(16, 185, 129, 0.40);
  color: var(--accent-emerald);
}
.toast--success .toast__title { color: var(--accent-neon-mint); }

.toast--warning {
  border-color: rgba(245, 158, 11, 0.40);
  color: var(--accent-amber);
}
.toast--warning .toast__title { color: var(--accent-neon-amber); }

.toast--error {
  border-color: rgba(244, 63, 94, 0.40);
  color: var(--accent-rose);
}
.toast--error .toast__title { color: var(--accent-rose); }

.toast--info {
  border-color: rgba(56, 189, 248, 0.40);
  color: var(--accent-neon-blue);
}
.toast--info .toast__title { color: var(--accent-neon-blue); }

[data-theme="light"] .toast {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.50);
}

@media (max-width: 600px) {
  .toast-stack {
    top: 64px;
    right: 12px;
    left: 12px;
    width: auto;
  }
  .toast { font-size: 0.82rem; padding: 10px 12px; gap: 10px; }
}


/* ─── FOCUS VISIBLE — accesibilidad de teclado ──────────────
   Antes muchos componentes hacían outline:none sin sustituto.
   Esta capa global activa un ring azul cuando el navegador
   considera que el foco vino por teclado (no click).
   :focus-visible es soportado en todos los navegadores modernos. */

/* Quita el outline default en elementos focuseados por mouse,
   pero asegura ring visible cuando llega por teclado. */
:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Botones, links y form controls: ring más prominente */
.btn:focus-visible,
.sidebar__link:focus-visible,
.tab-btn:focus-visible,
.role-card:focus-visible,
.market-card:focus-visible,
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

/* Inputs ya tienen su propio focus blue + box-shadow; reforzamos
   con outline cuando viene por teclado */
.form-input:focus-visible,
.form-select:focus-visible {
  outline: 2px solid transparent; /* el border-color es el indicador */
  outline-offset: 0;
}

/* Light theme: usar blue light-mode */
[data-theme="light"] :focus-visible {
  outline-color: #2563EB;
}
[data-theme="light"] .btn:focus-visible {
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}


/* ─── TAP FEEDBACK MÓVIL ────────────────────────────────────
   :active scale-down sutil. iOS/Android responden con esta
   micro-interacción de forma nativa; emularla mejora la
   sensación táctil. */
@media (hover: none) and (pointer: coarse) {
  .btn:active,
  .role-card:active,
  .market-card:active,
  .tab-btn:active,
  .sidebar__link:active {
    transform: scale(0.97);
    transition: transform 0.08s ease;
  }
}


/* ─── PREFERS-REDUCED-MOTION (ampliación de v2.4) ────────────
   Cubrir animaciones nuevas de v2.5 y v2.6: hero-card glow,
   narrative-summary, toast slides, skeleton shimmer. */
@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast--leaving,
  .toast__bar,
  .skeleton::after,
  .save-indicator--saving .save-indicator__dot,
  .hero-card::before {
    animation: none !important;
  }
  .toast { transform: none; }
}


/* ─── ICON BUTTONS — utility con a11y mínima ─────────────────
   Para botones que sólo muestran un icono (cerrar, configurar,
   etc.). Asegura touch-target y permite aria-label sin ruido. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}
.icon-btn:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.icon-btn:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
.icon-btn--sm { width: 28px; height: 28px; font-size: 0.85rem; }

/* En mobile el touch target debe ser ≥44px */
@media (max-width: 768px) {
  .icon-btn { width: 44px; height: 44px; }
  .icon-btn--sm { width: 36px; height: 36px; }
}


/* ─── SR-ONLY (texto sólo para lectores de pantalla) ─────────
   Para añadir contexto a un icono/botón sin afectar la vista. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ════════════════════════════════════════════════════════════
 * Fin v2.6
 * ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
 * v2.7 — Excel-Parity: Results / Charts / Shares
 *
 * Replica visualmente las 3 pestañas clave del Excel de referencia
 * (Marketing-Sim-Game.xlsx) dentro de student-results.html:
 *
 *   Results : tabla comparativa firma × KPI (10×~20)
 *   Charts  : grid 2×2 con 4 bar-charts comparativos
 *   Shares  : tablas 10×3 (firmas × segmentos) Market Share + Unit Sales
 *
 * Reusa .table, .table__num, .table__you, .table-scroll-wrap (v2.4),
 * .tabs/.tab-panel (v2.0), .badge--{eco,medio,lujo}. 100% aditivo.
 * ════════════════════════════════════════════════════════════ */

/* ─── Sección competitive-results contenedora ──────────────── */
.competitive-results {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin: 24px 0;
}
.competitive-results__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.competitive-results__title-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-left: auto;
}

/* ─── Results table — Excel "Results" tab ─────────────────── */
.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  /* min-width junto con .table-scroll-wrap habilita scroll-x en mobile */
  min-width: 640px;
}
.results-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  text-align: right;
  padding: 8px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  z-index: 1;
}
.results-table thead th:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--bg-elevated);
  z-index: 2;
}
.results-table tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-secondary);
}
.results-table tbody td:first-child {
  position: sticky;
  left: 0;
  background: var(--bg-surface);
  text-align: left;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}
.results-table tbody tr:hover td:first-child {
  background: var(--bg-elevated);
}

/* Columnas de la firma del alumno destacadas en azul */
.results-table td.results-table__col--self,
.results-table th.results-table__col--self {
  background: rgba(59, 130, 246, 0.06);
  color: var(--accent-blue);
  font-weight: 700;
}
[data-theme="light"] .results-table td.results-table__col--self,
[data-theme="light"] .results-table th.results-table__col--self {
  background: rgba(37, 99, 235, 0.08);
}

/* Filas de TOTAL y Net Profit con énfasis */
.results-table__row--total td {
  background: var(--bg-elevated);
  font-weight: 700;
  color: var(--text-primary);
}
.results-table__row--total td:first-child {
  background: var(--bg-elevated);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.72rem;
}
.results-table__row--leader td {
  background: rgba(0, 229, 160, 0.06);
  color: var(--accent-neon-mint);
}
.results-table__row--leader td:first-child {
  color: var(--accent-neon-mint);
  background: rgba(0, 229, 160, 0.10);
}

/* Filas separadoras entre grupos (volumen / ingreso / costos / utilidad) */
.results-table__divider td {
  background: transparent;
  border-bottom: 2px solid var(--border-bright);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  padding: 4px 10px;
  font-weight: 700;
  font-family: var(--font-ui);
  text-align: left !important;
}

/* Indicador delta inline en celdas (▲ / ▼) */
.results-table__delta {
  font-size: 0.7em;
  margin-left: 4px;
}
.results-table__delta--up   { color: var(--accent-emerald); }
.results-table__delta--down { color: var(--accent-rose); }
.results-table__delta--flat { color: var(--text-dim); }


/* ─── Charts grid — Excel "Charts" tab ────────────────────── */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 768px) {
  .charts-grid { grid-template-columns: 1fr; }
}

.bar-chart-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bar-chart-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.bar-chart-card__title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.bar-chart-card__subtitle {
  font-size: 0.7rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.bar-chart-card__bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bar-chart-card__row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 22px;
}

.bar-chart-card__row-label {
  font-size: 0.74rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bar-chart-card__row-bar {
  position: relative;
  height: 14px;
  background: var(--bg-input);
  border-radius: 3px;
  overflow: hidden;
}
.bar-chart-card__row-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent-blue);
  border-radius: 3px 0 0 3px;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bar-chart-card__row-value {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 64px;
  text-align: right;
}

/* Firma propia destacada */
.bar-chart-card__row--self .bar-chart-card__row-label {
  color: var(--accent-blue);
  font-weight: 700;
}
.bar-chart-card__row--self .bar-chart-card__row-value {
  color: var(--accent-blue);
}
.bar-chart-card__row--self .bar-chart-card__row-fill {
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.35);
}

/* Variantes de color por tipo de chart (sobre .bar-chart-card) */
.bar-chart-card--units    .bar-chart-card__row-fill { background: var(--accent-blue); }
.bar-chart-card--revenue  .bar-chart-card__row-fill { background: var(--accent-emerald); }
.bar-chart-card--profit   .bar-chart-card__row-fill { background: var(--accent-amber); }
.bar-chart-card--profit-c .bar-chart-card__row-fill { background: var(--accent-neon-mint); }
.bar-chart-card--profit-c .bar-chart-card__row-fill[data-leader="1"] {
  box-shadow: 0 0 18px rgba(0, 229, 160, 0.50);
}

/* Valor negativo (Net Profit en pérdida) en rosa */
.bar-chart-card__row-value--negative { color: var(--accent-rose); }
.bar-chart-card__row--negative .bar-chart-card__row-fill {
  background: var(--accent-rose);
  opacity: 0.7;
}


/* ─── Shares section — Excel "Shares" tab ─────────────────── */
.shares-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 900px) {
  .shares-section { grid-template-columns: 1fr; }
}

.shares-table-wrap {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.shares-table-wrap__title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.shares-table-wrap__title-meta {
  font-size: 0.7rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.shares-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.shares-table thead th {
  text-align: right;
  padding: 6px 8px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.shares-table thead th:first-child,
.shares-table thead th:nth-child(2) {
  text-align: left;
}
.shares-table tbody td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text-secondary);
}
.shares-table tbody td:first-child,
.shares-table tbody td:nth-child(2) {
  text-align: left;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.shares-table__brand-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--bg-input);
  color: var(--text-secondary);
  margin-right: 4px;
}
.shares-table__brand-tag--a { background: rgba(59, 130, 246, 0.18); color: var(--accent-blue); }
.shares-table__brand-tag--b { background: rgba(139, 92, 246, 0.18); color: var(--accent-violet); }

/* Fila propia destacada */
.shares-table__row--self td:first-child,
.shares-table__row--self td:nth-child(2),
.shares-table__row--self td {
  color: var(--accent-blue);
  font-weight: 700;
  background: rgba(59, 130, 246, 0.05);
}

/* Celda destacada cuando la firma tiene >30% en ese segmento (líder del segmento) */
.shares-table__cell--leader {
  color: var(--accent-neon-mint) !important;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(0, 229, 160, 0.30);
}
.shares-table__cell--strong {
  color: var(--accent-emerald);
  font-weight: 600;
}
.shares-table__cell--zero {
  color: var(--text-dim);
  opacity: 0.55;
}

/* Fila Total al pie */
.shares-table__row--total td {
  background: var(--bg-input);
  font-weight: 700;
  color: var(--text-primary);
  border-top: 2px solid var(--border-bright);
  border-bottom: none;
}
.shares-table__row--total td:first-child {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.5px;
}

/* Empty state — modo demo recién creado donde aún no hay turnos procesados */
.competitive-results__empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
  border: 1px dashed var(--border-bright);
  border-radius: var(--radius-md);
}

/* Light theme tweaks */
[data-theme="light"] .bar-chart-card__row-bar { background: rgba(0, 0, 0, 0.06); }
[data-theme="light"] .results-table__row--leader td { background: rgba(5, 150, 105, 0.06); }

/* Responsive del título de la sección competitive en mobile */
@media (max-width: 600px) {
  .competitive-results { padding: 16px 14px; }
  .competitive-results__title { flex-wrap: wrap; }
  .competitive-results__title-meta { margin-left: 0; flex-basis: 100%; }
  .bar-chart-card__row { grid-template-columns: 70px 1fr auto; gap: 6px; }
  .bar-chart-card__row-label { font-size: 0.68rem; }
  .bar-chart-card__row-value { min-width: 52px; font-size: 0.72rem; }
}

/* ════════════════════════════════════════════════════════════
 * Fin v2.7
 * ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
 * v2.8 — Line charts y página de analítica dedicada
 *
 * Estilos para los gráficos de evolución temporal usados por
 * js/charts.js: Charts.line y Charts.area. También el grid de
 * la nueva página student-analytics.html.
 *
 * 100% aditivo. Reusa tokens existentes (font-mono, accents,
 * border, bg-elevated, etc.).
 * ════════════════════════════════════════════════════════════ */

/* ─── Contenedor de un line chart individual ─────────────── */
.line-chart {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.line-chart__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.line-chart__title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.line-chart__subtitle {
  font-size: 0.7rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.line-chart__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* Grid horizontal del eje Y */
.line-chart__grid {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.5;
}

/* Línea cero (cuando hay valores negativos) */
.line-chart__zero {
  stroke: var(--text-dim);
  stroke-width: 1;
  opacity: 0.6;
}

/* Etiquetas de ejes */
.line-chart__axis-label {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--text-dim);
}
.line-chart__axis-label--current {
  fill: var(--accent-blue);
  font-weight: 700;
}

/* Path de cada serie */
.line-chart__series {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
  transition: opacity var(--transition);
}
.line-chart__series--self {
  stroke-width: 2.5;
  opacity: 1;
}

/* Dots */
.line-chart__dot {
  stroke-width: 1;
}
.line-chart__dot--last {
  filter: drop-shadow(0 0 4px currentColor);
}
.line-chart__dot--self {
  stroke-width: 1.5;
}

/* Anotación de valor al final */
.line-chart__annotation {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}

/* Leyenda */
.line-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 0.72rem;
  color: var(--text-muted);
  padding-top: 4px;
}

.line-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.line-chart__legend-item--self {
  color: var(--text-primary);
  font-weight: 700;
}

.line-chart__legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.line-chart__empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  border: 1px dashed var(--border-bright);
  border-radius: var(--radius-sm);
}

/* ─── Grid de varios charts (en student-results y analytics) ─── */
.charts-evolution-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 16px;
}
@media (max-width: 900px) {
  .charts-evolution-grid { grid-template-columns: 1fr; }
}

/* ─── Página student-analytics ──────────────────────────── */

/* Card de cada visualización en la página analytics */
.analytics-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 20px;
}

.analytics-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.analytics-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.analytics-card__hint {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.analytics-card__hint strong {
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

/* Grid lateral en analytics (charts más pequeños, lado a lado) */
.analytics-pair-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 10px;
}
@media (max-width: 900px) {
  .analytics-pair-grid { grid-template-columns: 1fr; }
}

/* Filtros simples del analytics (mercado, segmento) */
.analytics-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  margin-bottom: 18px;
  padding: 12px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.analytics-filters__label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Cuando un line-chart vive dentro de un analytics-card,
   removemos el fondo doble (el card ya lo provee). */
.analytics-card .line-chart {
  background: var(--bg-input);
  border-color: var(--border);
}

[data-theme="light"] .analytics-card .line-chart {
  background: var(--bg-elevated);
}

/* ════════════════════════════════════════════════════════════
 * Fin v2.8
 * ════════════════════════════════════════════════════════════ */