/* ============================================================
   CYVIX — DESIGN TOKENS  (Liquid Glass · iOS / visionOS)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Instrument+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ── TYPOGRAPHY ── */
  --font-display: 'Instrument Serif', Georgia, serif;
  --font:         'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans:    var(--font);
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* ── BASE COLORS ── */
  /* gris cool estil Legora (fons web + pop-up de consulta) */
  --bg:      #eceef2;
  --bg-warm: #f0e8e0;
  --bg-cool: #dce4ea;

  /* ── GLASS TINT ──
     Triplete RGB del cristal. En claro = blanco (cristal sobre fondo claro).
     En oscuro se reemplaza por un gris pizarra (cristal sobre fondo oscuro),
     de modo que TODOS los rgba(var(--glass-rgb), x) se re-tintan a la vez
     sin tocar el modo claro. */
  --glass-rgb: 255, 255, 255;

  /* ── GLASS SURFACES ── */
  /* (--bg-2 / --bg-3 intentionally semi-transparent for glass layering) */
  --bg-2: rgba(var(--glass-rgb), 0.62);   /* panels, cards — glass strong  */
  --bg-3: rgba(var(--glass-rgb), 0.38);   /* inputs, hover, inset — glass soft */

  /* ── TEXT ── */
  --text-1: #0a0e14;
  --text-2: rgba(10, 14, 20, 0.62);
  --text-3: rgba(10, 14, 20, 0.42);
  --text-4: rgba(10, 14, 20, 0.18);

  /* ── INK BORDERS (subtle dark, for dividers inside glass) ── */
  --border:   rgba(10, 14, 20, 0.08);
  --border-2: rgba(10, 14, 20, 0.14);

  /* ── SURFACES (semantic whites) ──
     Tokens semánticos para diferenciar uso: futuro tint hacia sage no rompe nada. */
  --surface-white:    #ffffff;                       /* texto sobre fondos oscuros (botones primarios, badges) */
  --surface-card:     #ffffff;                       /* fondo sólido de tarjetas internas (home-panel, pv-nav-card) */
  --surface-cloud:    rgba(255, 255, 255, 0.72);     /* glass líquido de sidebar y main-area */
  --surface-cloud-2:  rgba(255, 255, 255, 0.55);     /* glass suave (componentes secundarios) */

  /* ── GLASS EDGES ── */
  --glass-bg:          rgba(255, 255, 255, 0.42);
  --glass-bg-strong:   rgba(255, 255, 255, 0.62);
  --glass-bg-soft:     rgba(255, 255, 255, 0.28);
  --glass-border:      rgba(255, 255, 255, 0.72);
  --glass-border-soft: rgba(255, 255, 255, 0.45);

  /* ── ACCENT (sage green) ── */
  --accent:       #1f3d2e;
  --accent-glow:  #4a8268;
  --accent-dim:   rgba(31, 61, 46, 0.08);
  --accent-hover: #2a5040;

  /* ── PRIMARY ACTION ── */
  --action:       #0a0e14;
  --action-hover: #1f3d2e;
  --action-text:  #ffffff;

  /* ── SEMANTIC ── */
  --amber:    #F97316;
  --amber-bg: rgba(249, 115, 22, 0.10);
  --green:    #22C55E;
  --green-bg: rgba(34, 197, 94, 0.10);
  --coral:    #E8501A;
  --coral-bg: rgba(232, 80, 26, 0.08);

  /* ── STATUS BADGES ── */
  --status-published-bg:   rgba(34, 197, 94, 0.10);
  --status-published-text: #166534;
  --status-draft-bg:       rgba(249, 115, 22, 0.10);
  --status-draft-text:     #9A3412;

  /* ── SOIL BADGES ── */
  --badge-residential-bg:   rgba(30, 64, 175, 0.08);
  --badge-residential-text: #1E40AF;
  --badge-industrial-bg:    rgba(154, 52, 18, 0.08);
  --badge-industrial-text:  #9A3412;
  --badge-green-bg:         rgba(22, 101, 52, 0.08);
  --badge-green-text:       #166534;
  --badge-dotacional-bg:    rgba(91, 33, 182, 0.08);
  --badge-dotacional-text:  #5B21B6;
  --badge-special-bg:       rgba(133, 77, 14, 0.08);
  --badge-special-text:     #854D0E;

  /* ── SHADOWS ── */
  --shadow-sm:   0 1px 3px rgba(15, 25, 40, 0.06), 0 1px 2px rgba(15, 25, 40, 0.04);
  --shadow:      0 4px 16px rgba(15, 25, 40, 0.08), 0 2px 6px rgba(15, 25, 40, 0.04);
  --shadow-lg:   0 16px 48px rgba(15, 25, 40, 0.14);
  --shadow-glass:
    0 1px 1px rgba(255, 255, 255, 0.62) inset,
    0 -1px 1px rgba(0, 0, 0, 0.04) inset,
    0 8px 32px rgba(15, 25, 40, 0.08),
    0 2px 8px rgba(15, 25, 40, 0.04);
  --shadow-cta:
    0 2px 8px rgba(31, 61, 46, 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.22);
  --focus-ring: rgba(74, 130, 104, 0.18);

  /* ── LAYOUT ── */
  --sidebar-collapsed: 56px;
  --sidebar-expanded:  280px;
  --topbar-h:          56px;
  --topbar-height:     56px;
  --app-padding:       10px;

  /* ── SPACING ── */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px;  --sp-6: 24px;

  /* ── RADII ── */
  --r-pill: 100px;
  --r-2xl:  28px;
  --r-xl:   22px;
  --r-lg:   16px;
  --r:      12px;
  --r-md:   12px;
  --r-sm:    9px;
  --r-xs:    6px;     /* iconos pequeños, chips, mini badges */

  /* ── TYPE SCALE ── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;

  /* ── LETTER SPACING ── */
  --tracking-tight:  -0.025em;
  --tracking-normal: -0.010em;
  --tracking-wide:    0.050em;
  --tracking-caps:    0.100em;

  /* ── BREAKPOINTS (sólo para referencia, los media queries no aceptan var()) ──
     --bp-mobile: 480px;   ≤ móvil
     --bp-tablet: 720px;   ≤ tablet vertical
     --bp-medium: 900px;   ≤ portátil pequeño / tablet horizontal
     --bp-desktop: 1100px; ≤ desktop estándar
  */

  /* ── TRANSITIONS ── */
  --t-hover: 0.15s ease;
  --t-fast:  0.15s ease;
  --t:       0.20s ease;
  --t-panel: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --t-modal: 0.30s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:  0.30s ease;

  /* ── BLUR TOKENS (performance-tuned) ── */
  --blur-xs:   blur(4px);
  --blur-sm:   blur(8px);
  --blur-md:   blur(12px);
  --blur-lg:   blur(16px);
  --blur-soft: blur(8px);
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  /* Cristal pizarra: re-tinta todos los rgba(var(--glass-rgb), x) hardcodeados.
     Es más claro que el fondo → a más opacidad, panel/borde más visible. */
  --glass-rgb: 150, 167, 192;

  --bg:      #0a0e14;
  --bg-warm: #14110d;
  --bg-cool: #0d1218;
  --bg-2: rgba(var(--glass-rgb), 0.10);
  --bg-3: rgba(var(--glass-rgb), 0.06);

  --text-1: #f0eee8;
  --text-2: rgba(240, 238, 232, 0.65);
  --text-3: rgba(240, 238, 232, 0.42);
  --text-4: rgba(240, 238, 232, 0.18);

  --border:   rgba(var(--glass-rgb), 0.12);
  --border-2: rgba(var(--glass-rgb), 0.20);

  --glass-bg:          rgba(var(--glass-rgb), 0.08);
  --glass-bg-strong:   rgba(var(--glass-rgb), 0.12);
  --glass-bg-soft:     rgba(var(--glass-rgb), 0.05);
  --glass-border:      rgba(var(--glass-rgb), 0.16);
  --glass-border-soft: rgba(var(--glass-rgb), 0.10);

  /* Superficies semánticas (antes quedaban blancas en oscuro · causa del bug) */
  --surface-white:   #f0eee8;                      /* texto/icono sobre fondos de acento */
  --surface-card:    #161c26;                      /* tarjetas sólidas internas */
  --surface-cloud:   rgba(var(--glass-rgb), 0.07); /* glass sidebar / main-area */
  --surface-cloud-2: rgba(var(--glass-rgb), 0.05);

  --accent:       #6ba88a;
  --accent-glow:  #8fc5a8;
  --accent-dim:   rgba(107, 168, 138, 0.14);
  --accent-hover: #7fbf9d;

  --action:       #6ba88a;
  --action-hover: #7fbf9d;
  --action-text:  #0a0e14;

  --focus-ring:   rgba(107, 168, 138, 0.30);

  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow:      0 4px 16px rgba(0, 0, 0, 0.40);
  --shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.55);
  --shadow-glass:
    0 1px 1px rgba(var(--glass-rgb), 0.10) inset,
    0 8px 32px rgba(0, 0, 0, 0.32),
    0 2px 8px rgba(0, 0, 0, 0.22);
}

/* ============================================================
   GLOBAL RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font);
  font-size: var(--text-base);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hidden { display: none !important; }

/* ── A11Y: focus visible ── */
/* Foco consistente para teclado: anillo verde difuso del accent.
   Solo aparece con teclado (no con click), gracias a :focus-visible. */
:where(button, a, [role="button"], [tabindex], input, textarea, select):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── A11Y: reduced motion ──
   Si el usuario pidió menos movimiento, apagamos animaciones decorativas.
   Mantenemos transiciones esenciales muy cortas para que el feedback no desaparezca. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── UTILITIES ── */
.heading-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-3);
}