/* ───────────────────────────────────────────────────────────────────────────
   GroupBuild — Design System (estilos compartidos del back: admin / leads / geo / mis / milote…).
   FUENTE ÚNICA del look de GB. El rebrand se hace ACÁ (tokens), no hardcodeando en cada página.

   ESTRUCTURA (arrancada 2026-09-10; migración pendiente — ver PENDIENTES tema 5):
   - Tokens abajo = el vocabulario. Próxima sesión: mover los `style="..."` estáticos (grupo A) y los
     bloques <style> por página a clases que usen estos tokens.
   - Pendiente de desacople de UWA: como-vivir.html, onboarding.html, onboarding2.html aún linkean
     uwa-design-system.css. Migrarlas a gb-ui.css cuando sus estilos estén cubiertos acá.
   - NO mover: estilos dinámicos (p.ej. background-image con thumb) ni swatches de color de la leyenda
     del mapa (color-dato por muestra).
   ─────────────────────────────────────────────────────────────────────────── */

:root{
  /* Color */
  --ink:#111; --paper:#fff; --muted:#666; --faint:#999;
  --line:#e6e6e6; --wash:#f6f6f6;
  --blue:#2f6fed; --red:#e23b3b; --ok:#1f9d55; --amber:#c77d00;

  /* Tipografía */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-serif:'Fraunces',Georgia,serif;
  --fs-xs:10px; --fs-sm:12px; --fs-smd:12.5px; --fs-md:13px; --fs-base:14px; --fs-lg:18px; --fs-xl:24px;
  --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* Espaciado (escala observada en los inline actuales) */
  --sp-1:4px; --sp-2:6px; --sp-3:8px; --sp-4:12px; --sp-5:16px; --sp-6:18px; --sp-7:28px; --sp-8:32px;

  /* Radios */
  --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:10px; --r-pill:100px;

  /* Sombras */
  --sh-1:0 2px 6px rgba(0,0,0,.28);
  --sh-2:0 4px 14px rgba(0,0,0,.12);

  /* Z-index (capas del mapa y paneles) */
  --z-map-ctrl:5; --z-panel:6; --z-overlay:10;

  /* ── Panel brutalist blueprint (DISEÑO-PANEL.md §6) — aditivo, no altera el look actual ── */
  --font-chivo:'Chivo',-apple-system,sans-serif;      /* UI / labels / datos */
  --font-archivo:'Archivo',-apple-system,sans-serif;  /* textos (usar peso 300/400 = "light") */
  --gb-ink:#0A0A0A;        /* tinta del panel (más dura que --ink) */
  --gb-paper:#FFFFFF;      /* papel near-white */
  --gb-surface:#F0F0F0; --gb-surface-2:#D8D8D8;
  --pleno-bg:#0A0A0A; --pleno-fg:#FFFFFF;             /* bloque sólido (logros/CTA/felicitaciones) */
  --cad-line:#0A0A0A; --cad-fill:#90A890; --cad-fill-dark:#789078;  /* dibujo axonométrico */
  --gb-hair:1px;           /* líneas técnicas */
}

*{ margin:0; padding:0; box-sizing:border-box; }
body{ font-family:var(--font-sans); background:var(--paper); color:var(--ink); min-height:100vh; }

/* Encabezado común (marca + navegación) */
header{ padding:var(--sp-5) var(--sp-7); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); }
.eyebrow{ font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:var(--fw-semibold); }
.brand{ font-family:var(--font-serif); font-weight:var(--fw-semibold); font-size:var(--fs-lg); }
.brand span{ color:var(--blue); }
.back{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--ink); text-decoration:none; }
.back:hover{ opacity:.6; }

[hidden]{ display:none!important; }

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTES BLUEPRINT (RE-ESTETICA.md · Fase 0) — vocabulario reusable B&N.
   Aditivo: clases nuevas con prefijo .gb-, construidas SOLO con tokens --gb-*/--pleno-*/
   --font-chivo/archivo. No pisan nada existente. Las páginas que migren (público/captura,
   editor0/onboarding) deben cargar las fuentes Chivo+Archivo. Admin NO usa esto (queda como está).
   Reglas del sistema: 0px de radio (salvo .gb-pill), sin sombras/gradientes, jerarquía por línea+pleno+peso.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tipografía */
.gb-eyebrow{ font-family:var(--font-chivo); font-weight:var(--fw-bold); font-size:var(--fs-xs);
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.gb-title{ font-family:var(--font-chivo); font-weight:var(--fw-bold); letter-spacing:-.01em; line-height:1.05; color:var(--gb-ink); }
.gb-text{ font-family:var(--font-archivo); font-weight:300; color:var(--muted); line-height:1.55; }

/* Botones — pleno (default) y fantasma (outline). 0px, Chivo, mayúsculas. */
.gb-btn{ font-family:var(--font-chivo); font-weight:var(--fw-bold); font-size:var(--fs-sm); text-transform:uppercase;
  letter-spacing:.06em; padding:12px 18px; border:var(--gb-hair) solid var(--gb-ink); background:var(--gb-ink);
  color:var(--gb-paper); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
  gap:8px; transition:background .15s, color .15s; }
.gb-btn:hover{ background:var(--gb-paper); color:var(--gb-ink); }
.gb-btn--ghost{ background:var(--gb-paper); color:var(--gb-ink); }
.gb-btn--ghost:hover{ background:var(--gb-ink); color:var(--gb-paper); }
.gb-btn--block{ width:100%; }

/* Campos de formulario */
.gb-label{ display:block; font-family:var(--font-chivo); font-weight:var(--fw-medium); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:6px; }
.gb-field{ width:100%; box-sizing:border-box; font-family:var(--font-chivo); font-size:var(--fs-base);
  padding:11px 12px; border:var(--gb-hair) solid var(--gb-ink); background:var(--gb-paper); color:var(--gb-ink); }
.gb-field:focus{ outline:2px solid var(--gb-ink); outline-offset:-1px; }

/* Contenedores */
.gb-card{ border:var(--gb-hair) solid var(--gb-ink); background:var(--gb-paper); padding:var(--sp-6); }
.gb-pleno{ background:var(--pleno-bg); color:var(--pleno-fg); padding:var(--sp-6); }
.gb-pleno a{ color:var(--pleno-fg); }
.gb-hr{ border:0; border-top:var(--gb-hair) solid var(--gb-ink); }

/* Única forma redonda: pill (avatar/logo) */
.gb-pill{ border-radius:var(--r-pill); }