/* ═══════════════════════════════════════════════════════════════════════
   Refacciones de Occidente — Sistema de diseño compartido (tokens + componentes)
   Marca: rojo RO sobre negro/grafito, plata para texto.
   Tipografía: Barlow Condensed (display) + Inter (UI).
   Una sola fuente de verdad → todas las páginas se ven uniformes.
   Fuentes (cargar en el <head> de cada página):
   <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Marca (un solo acento) */
  --brand:        #D7141C;
  --brand-strong: #A80F15;
  --brand-soft:   #FCE8E9;   /* fondo suave para chips/estados de marca */

  /* Neutros grafito (fríos, para que el rojo destaque) */
  --bg:           #F4F4F5;
  --surface:      #FFFFFF;
  --surface-2:    #EEEEF0;
  --surface-hover:#E6E6E9;
  --border:       #E2E2E6;
  --border-strong:#C9CAD0;
  --text:         #141518;
  --text-muted:   #5E626B;

  /* Gamificación (uso medido, solo en elementos de juego/recompensa) */
  --xp:     #6C5CE7;   /* niveles / XP */
  --coin:   #E6A417;   /* MTL coins */
  --streak: #F2683C;   /* racha */

  /* Semánticos (separados del acento) */
  --success: #17976B;
  --warning: #E0A020;
  --danger:  #D8443F;
  --info:    #2C7BD1;

  /* Tipografía */
  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Barlow Condensed', 'Inter', system-ui, sans-serif;
  --fs-xs:    0.75rem;   --fs-sm:   0.8125rem; --fs-base: 0.9375rem;
  --fs-md:    1.0625rem; --fs-lg:   1.375rem;  --fs-xl:   1.875rem;
  --fs-2xl:   2.5rem;    --fs-display: 3.25rem;
  --lh-tight: 1.15;      --lh-body: 1.55;

  /* Espaciado (ritmo 4/8) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Radios y sombras (redondeado medio, sombras discretas) */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(16,33,29,.06), 0 1px 3px rgba(16,33,29,.04);
  --shadow-2: 0 4px 16px rgba(16,33,29,.08);
  --ring: 0 0 0 3px rgba(215,20,28,.28);
}

/* Tema oscuro: solo se redefinen los TOKENS (los componentes usan los tokens) */
@media (prefers-color-scheme: dark) {
  :root {
    --brand: #F0262D; --brand-strong: #C4141B; --brand-soft: #2A1214;
    --bg: #0C0E12; --surface: #15181D; --surface-2: #1B1F25; --surface-hover: #232830;
    --border: #262B33; --border-strong: #353B45; --text: #ECEDEF; --text-muted: #9097A1;
    --xp: #8B7DF0; --coin: #F0B93E; --streak: #FF7B52;
    --success: #35C08C; --warning: #E9B54A; --danger: #EC5C57; --info: #4E9BE6;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 6px 22px rgba(0,0,0,.5);
    --ring: 0 0 0 3px rgba(240,38,45,.38);
  }
}
:root[data-theme="light"] {
  --brand:#D7141C; --brand-strong:#A80F15; --brand-soft:#FCE8E9;
  --bg:#F4F4F5; --surface:#FFFFFF; --surface-2:#EEEEF0; --surface-hover:#E6E6E9;
  --border:#E2E2E6; --border-strong:#C9CAD0; --text:#141518; --text-muted:#5E626B;
  --xp:#6C5CE7; --coin:#E6A417; --streak:#F2683C;
  --success:#17976B; --warning:#E0A020; --danger:#D8443F; --info:#2C7BD1;
  --shadow-1:0 1px 2px rgba(16,33,29,.06),0 1px 3px rgba(16,33,29,.04);
  --shadow-2:0 4px 16px rgba(16,33,29,.08); --ring:0 0 0 3px rgba(215,20,28,.28);
  --accent:var(--brand); --accent-2:var(--xp); --gold:var(--coin); --fire:var(--streak); --shadow-lg:var(--shadow-2);
}
:root[data-theme="dark"] {
  --brand:#F0262D; --brand-strong:#C4141B; --brand-soft:#2A1214;
  --bg:#0C0E12; --surface:#15181D; --surface-2:#1B1F25; --surface-hover:#232830;
  --border:#262B33; --border-strong:#353B45; --text:#ECEDEF; --text-muted:#9097A1;
  --xp:#8B7DF0; --coin:#F0B93E; --streak:#FF7B52;
  --success:#35C08C; --warning:#E9B54A; --danger:#EC5C57; --info:#4E9BE6;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 6px 22px rgba(0,0,0,.5); --ring:0 0 0 3px rgba(240,38,45,.38);
  --accent:var(--brand); --accent-2:var(--xp); --gold:var(--coin); --fire:var(--streak); --shadow-lg:var(--shadow-2);
}

/* ═══════════════════════════════════════════════════════════════════════
   ALIAS de compatibilidad — mapea los nombres de tokens VIEJOS que ya usan las
   51 páginas hacia la paleta nueva. Así, con solo cargar theme.css (después del
   <style> de la página), TODA la página adopta el look nuevo sin tocar sus
   componentes. Referencian tokens theme-aware → funcionan en claro y oscuro con
   una sola definición. (Los nombres que ya coinciden —bg, surface, text, border,
   danger, info— los sobreescribe theme.css con sus nuevos valores.)
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --accent:    var(--brand);
  --accent-2:  var(--xp);
  --gold:      var(--coin);
  --fire:      var(--streak);
  --shadow-lg: var(--shadow-2);
  /* escala tipográfica que algunas páginas ya nombran */
  --fs-base:    0.9375rem;
  --fs-section: var(--fs-lg);
  --fs-stat:    var(--fs-2xl);
  --fs-title:   var(--fs-xl);
}

/* ── Base ── */
.mtl { font-family: var(--font-ui); color: var(--text); background: var(--bg); font-size: var(--fs-base); line-height: var(--lh-body); }
.mtl-title   { font-family: var(--font-display); font-weight: 800; line-height: var(--lh-tight); letter-spacing:.3px; text-wrap: balance; }
.mtl-label   { font-size: var(--fs-xs); font-weight: 700; letter-spacing:.05em; text-transform: uppercase; color: var(--text-muted); }
.mtl-num     { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── Botones ── */
.mtl-btn { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-base);
  border: 1px solid transparent; border-radius: var(--r-md); padding: 10px 18px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; transition: transform .06s ease, background .15s, box-shadow .15s; }
.mtl-btn:active { transform: translateY(1px); }
.mtl-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.mtl-btn--primary   { background: var(--brand); color: #fff; box-shadow: var(--shadow-1); }
.mtl-btn--primary:hover { background: var(--brand-strong); }
.mtl-btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.mtl-btn--secondary:hover { background: var(--surface-2); }
.mtl-btn--ghost     { background: transparent; color: var(--brand); }
.mtl-btn--ghost:hover { background: var(--brand-soft); }

/* ── Card ── */
.mtl-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: var(--sp-3); }

/* ── Pills / badges (semánticos) ── */
.mtl-pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700;
  padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-muted); }
.mtl-pill--brand  { background: var(--brand-soft); color: var(--brand-strong); }
.mtl-pill--success{ background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.mtl-pill--warning{ background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.mtl-pill--danger { background: color-mix(in srgb, var(--danger) 15%, transparent);  color: var(--danger); }
.mtl-pill--info   { background: color-mix(in srgb, var(--info) 14%, transparent);    color: var(--info); }

/* ── Stat tile (número grande Barlow + label) ── */
.mtl-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); box-shadow: var(--shadow-1); }
.mtl-stat .v { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-2xl); line-height: 1; font-variant-numeric: tabular-nums; }
.mtl-stat .k { margin-top: 4px; }

/* ── Input ── */
.mtl-input { width: 100%; font-family: var(--font-ui); font-size: var(--fs-base); color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 10px 12px; }
.mtl-input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }

/* ── Barra de progreso (gamificación, con color por rol) ── */
.mtl-bar { height: 10px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; }
.mtl-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }

@media (prefers-reduced-motion: reduce) { .mtl-btn { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   PULIDO GLOBAL — detalles que leen "diseñado", aplicados en toda la app.
   Aditivos y de baja especificidad: no cambian layouts ni fuentes de las páginas.
   ═══════════════════════════════════════════════════════════════════════ */

/* Render de tipografía más limpio (no toca la fuente que ya usa cada página) */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* Foco visible consistente (accesibilidad + look pro), solo en teclado */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* Scrollbar sutil con la marca (detalle que se nota) */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Marca RO en los encabezados de cada módulo ── */
.logo-box.logo-ro { width: 34px; height: 34px; border-radius: 8px; display: flex;
  background: #0C0E12; padding: 0; overflow: hidden; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.08); text-decoration: none; }
.logo-box.logo-ro img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Celular: sin zoom ni desplazamiento lateral ──
   (el viewport de cada página fija la escala; esto evita que algo ancho
   empuje la página hacia los lados y que iOS haga zoom al escribir) */
html, body { max-width: 100%; overflow-x: clip; }  /* clip (no hidden): no rompe position: sticky */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: pan-x pan-y; overscroll-behavior-x: none; }
@media (max-width: 760px) {
  input, select, textarea { font-size: 16px !important; }  /* <16px hace que iOS acerque al enfocar */
}