/* ═══════════════════════════════════════════════════════════════════════════
 * tokens.css — Sistema de diseño IA+ Tech (paleta oficial)
 * Aplica a: webs IA+ propias y dashboards admin/escribanía/cliente.
 * NO aplicar a sitios cliente (Sueño Urbano, Eucarías, Las Heras tienen
 * paletas propias intocables).
 * ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&f[]=satoshi@500,700,900&display=swap');

:root {
  /* ── Fondos (azul muy oscuro) ─────────────────────────────────────────── */
  --bg:         #050A1A;
  --surface-1:  #0B1628;
  --surface-2:  #111D35;
  --surface-3:  #182745;

  /* ── Acentos ──────────────────────────────────────────────────────────── */
  --cyan:       #67E8F9;
  --blue:       #3B82F6;
  --green:      #4ADE80;
  --amber:      #FBBF24;
  --red:        #EF4444;

  /* ── Texto ────────────────────────────────────────────────────────────── */
  --text:       #F8FAFC;
  --text-muted: #94A3B8;
  --text-dim:   #64748B;

  /* ── Bordes ───────────────────────────────────────────────────────────── */
  --border:      #1F2937;
  --border-soft: #1A2235;

  /* ── Gradiente firma ──────────────────────────────────────────────────── */
  --grad: linear-gradient(135deg, #67E8F9 0%, #3B82F6 100%);

  /* ── Sombras ──────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);

  /* ── Radios ───────────────────────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* ── Spacing ──────────────────────────────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;

  /* ── Tipografías ──────────────────────────────────────────────────────── */
  --font-body:    'General Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Satoshi', 'General Sans', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ── Tamaños ──────────────────────────────────────────────────────────── */
  --fs-xs:  0.75rem;
  --fs-sm:  0.875rem;
  --fs-md:  1rem;
  --fs-lg:  1.125rem;
  --fs-xl:  1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 2rem;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --maxw:       1280px;
  --header-h:   64px;
  --sidebar-w:  240px;

  /* ── Aliases (compat páginas que usan otros nombres) ──────────────────── */
  --gap-1: var(--s-1);
  --gap-2: var(--s-2);
  --gap-3: var(--s-3);
  --gap-4: var(--s-4);
  --gap-5: 20px;
  --gap-6: var(--s-6);
  --gap-7: 28px;
  --gap-8: var(--s-8);
  --gradient: var(--grad);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* S6.69 — Color scheme dark fuerza al browser a no usar autofill blanco
   ni placeholders gris claro que se vuelven invisibles sobre dark. */
html { color-scheme: dark; }

/* Defaults seguros para inputs/selects/textareas que NO tengan clase .input.
   Evita bug donde un <input type="text"> queda con fondo blanco del browser
   y texto blanco heredado del body → invisible. */
input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
select, textarea {
  background-color: var(--surface-1);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 4px);
  font-family: inherit;
  font-size: inherit;
}
input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):focus,
select:focus, textarea:focus {
  outline: 2px solid rgba(103,232,249,0.35);
  outline-offset: 0;
  border-color: var(--cyan);
}
input::placeholder, textarea::placeholder { color: var(--text-dim); opacity: 0.7; }

/* Autofill (Chrome/Edge fuerzan fondo amarillo claro). Lo overrideamos con
   inset shadow para mantener el theme dark — no se puede setear background
   directo del autofill, hay que usar este truco. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--surface-1) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
  transition: background-color 5000s ease-in-out 0s;
}

/* Headings */
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.2; }
h1 { font-size: var(--fs-3xl); font-weight: 700; }
h2 { font-size: var(--fs-2xl); font-weight: 700; }
h3 { font-size: var(--fs-xl); font-weight: 600; }
h4 { font-size: var(--fs-lg); font-weight: 600; }

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--blue); }

/* Scrollbars custom */
::-webkit-scrollbar      { width: 10px; height: 10px; }
::-webkit-scrollbar-track    { background: var(--surface-1); }
::-webkit-scrollbar-thumb    { background: var(--surface-3); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue); }