/* ============================================================
   BeMaverick — tokens.css · v1 (Fase 1 · rediseño 2.0.1 · ago 2026)
   Fuente única de paleta y tipografía del design system Maverick.
   Se importa desde styles-mobile.css (@import) — las páginas del
   portal lo heredan; la landing lo linkeará directo en su fase.

   Regla de oro: el ORO es relleno (con texto tinta encima).
   Como color de texto pequeño solo se usa --accent-text (#8A6C12, AA).
   Semántica financiera: positivo = slate, negativo = terracota.
   ============================================================ */

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

:root {
  /* ---- Primitivas (Figma Maverick) ---- */
  --ink: #1B1B1B;            /* headings, wordmark, nav activo */
  --graphite: #343434;       /* texto de cuerpo */
  --gold: #E6B31E;           /* relleno de CTA y acentos */
  --gold-deep: #B38B17;      /* hover / pressed / focus ring */
  --gold-text: #8A6C12;      /* oro como texto (4.9:1 AA) */
  --gold-soft: #F1D88C;      /* chips, segmento activo */
  --slate: #526D82;          /* cifras positivas, links, gráfica */
  --slate-light: #90ACBF;
  --slate-mist: #CDD9E0;     /* bordes de card */
  --terracotta: #B4553F;     /* pérdidas, rescates, errores */
  --terracotta-soft: #EFD9D3;
  --cream: #FCFAF1;          /* fondo de página */
  --gray-10: #F5F5F5;        /* hairline, fondos sutiles */

  /* ---- Semánticas (nombres que ya consume el portal — nuevo valor) ---- */
  --white: #FFFFFF;
  --black: var(--ink);
  --txt-sec: #535353;        /* antes #888 (3.5:1) → 7.5:1 AAA */
  --txt-ter: #767676;        /* antes #AAA (2.3:1) → 4.5:1 AA */
  --accent: var(--gold);
  --accent-text: var(--gold-text);
  --accent-bg: #FDF5DC;
  --border: var(--slate-mist);
  --border-hairline: var(--gray-10);
  --bg-subtle: var(--gray-10);
  --page-bg: var(--cream);
  --positive: var(--slate);
  --positive-light: var(--slate-light);
  --negative: var(--terracotta);
  --radius: 15px;

  /* ---- Tipografía — dos voces ---- */
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Sombra única (reposo = borde; sombra en hover/popover) ---- */
  --shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05);
  --shadow-pop: 0 12px 40px rgba(27,38,44,.18);
}

/* Foco visible global (antes no existía ningún estilo de foco) */
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

/* Montos alineados en columnas en todo el portal */
html { font-variant-numeric: tabular-nums; }

/* Skeleton de carga (.sk): silueta del contenido, sin spinner */
.sk {
  position: relative; overflow: hidden;
  background: var(--bg-subtle); border-radius: 8px;
  color: transparent !important; user-select: none; pointer-events: none;
}
.sk::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: sk-shimmer 1.4s infinite;
}
@keyframes sk-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } }