/*
 * CoreIT Solar — tokens del sistema de diseño.
 * Identidad CoreIT: el degradado magenta-violeta vive solo en el logotipo e isotipo. La interfaz
 * usa un acento técnico cobalto (#2563EB) y la acción principal es un sólido slate (#0F172A en
 * claro, cobalto en oscuro).
 * Tema claro por defecto (#F8FAFC / #FFFFFF); [data-theme="dark"] en <html> activa slate oscuro
 * (tema.js lo persiste en localStorage). Contrastes verificados (WCAG 2.1): texto >= 4.5:1
 * en todas las superficies; --border-control >= 3:1; texto blanco sobre --accent 5.17:1 y sobre --cta 17.8:1.
 */

@font-face { font-family: "Geist"; font-weight: 400; font-display: swap; src: url("../fonts/Geist-400.ttf") format("truetype"); }
@font-face { font-family: "Geist"; font-weight: 500; font-display: swap; src: url("../fonts/Geist-500.ttf") format("truetype"); }
@font-face { font-family: "Geist"; font-weight: 600; font-display: swap; src: url("../fonts/Geist-600.ttf") format("truetype"); }
@font-face { font-family: "Geist"; font-weight: 700; font-display: swap; src: url("../fonts/Geist-700.ttf") format("truetype"); }
@font-face { font-family: "Geist"; font-weight: 800; font-display: swap; src: url("../fonts/Geist-800.ttf") format("truetype"); }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-display: swap; src: url("../fonts/GeistMono-400.ttf") format("truetype"); }
@font-face { font-family: "Geist Mono"; font-weight: 500; font-display: swap; src: url("../fonts/GeistMono-500.ttf") format("truetype"); }

:root {
  color-scheme: light;

  /* Superficies: grises fríos */
  --bg:             #F8FAFC;
  --surface:        #FFFFFF;
  --surface-2:      #F1F5F9;
  --ink:            #0B1220;   /* superficie oscura de contraste (documento, HUD) */
  --on-ink:         #F5F7FA;
  --on-ink-2:       #A9B3C3;

  /* Bordes */
  --border-subtle:  #E2E8F0;
  --border-strong:  #CBD5E1;
  --border-control: #7C8798;

  /* Texto */
  --text:   #0B1220;
  --text-2: #475569;
  --text-3: #5B6577;

  /* Acento técnico: cobalto (selección, foco, gráficas, cifras destacadas) */
  --accent:       #2563EB;
  --accent-hover: #1D4ED8;
  --accent-text:  #1D4ED8;
  --accent-tint:  rgba(37, 99, 235, 0.08);
  --on-accent:    #FFFFFF;

  /* Acción principal (CTA): sólido sobrio */
  --cta:       #0F172A;
  --cta-hover: #1E293B;
  --on-cta:    #FFFFFF;

  /* Documento (portada de la propuesta): hoja elevada, nunca invertida */
  --doc:        #FFFFFF;
  --doc-border: #E2E8F0;
  --mesa:       #EEF2F6;   /* superficie sobre la que descansa la hoja */
  --rejilla:      rgba(15, 23, 42, 0.07);   /* plano técnico del paso 3: líneas mayores cada 40 px */
  --rejilla-fina: rgba(15, 23, 42, 0.035);  /* y menores cada 8 px */
  --modulo:       #0B1E4A;   /* media celda TOPCon: azul marino profundo */
  --modulo-fondo: #233A70;   /* backsheet visible entre celdas */
  --modulo-marco: #B8C1CE;   /* marco de aluminio anodizado */
  --icono-descarga: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 3v8m0 0L6 8m3 3 3-3M3.5 13.5v1h11v-1' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icono-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9h10m-4-4 4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --shadow-doc: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px -12px rgba(15, 23, 42, 0.14);

  /* Resultado positivo (ahorro) y alerta */
  --ok:    #047857;
  --warn:  #B45309;
  --error: #B91C1C;

  /* Escalones tarifarios: tres tonos con contraste claro entre sí */
  --escalon-1: #BFD3FB;
  --escalon-2: #2563EB;
  --escalon-3: #D97706;

  /* Profundidad: una sola sombra contenida para el objeto protagonista */
  --shadow-hero: 0 1px 2px rgba(11, 18, 32, 0.05), 0 24px 48px -24px rgba(11, 18, 32, 0.22);
  --shadow-float: 0 1px 2px rgba(11, 18, 32, 0.06), 0 8px 24px -12px rgba(11, 18, 32, 0.25);

  /* Tipografía */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Escala con saltos dramáticos: etiqueta 12 · cuerpo 15 · título 28-40 · métrica 72-152 */
  --fs-eyebrow: 12px;
  --fs-small:   13px;
  --fs-body:    15px;
  --fs-lead:    18px;
  --fs-h2:      20px;
  --fs-h1:      clamp(28px, 3.2vw, 40px);
  --fs-metric:  clamp(40px, 5vw, 64px);
  --fs-monumental: clamp(72px, 11vw, 152px);

  /* Espaciado (base 4 px) y forma */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-24: 96px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;
  --t-fast: 140ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:             #0F141C;
  --surface:        #151B25;
  --surface-2:      #1B2230;
  --ink:            #F5F7FA;
  --on-ink:         #0B1220;
  --on-ink-2:       #4B5565;
  --border-subtle:  #263042;
  --border-strong:  #334055;
  --border-control: #6B778C;
  --text:   #ECEFF4;
  --text-2: #A9B3C3;
  --text-3: #8B96A8;
  --accent:       #2563EB;
  --accent-hover: #1D4ED8;
  --accent-text:  #8AB4FF;
  --accent-tint:  rgba(138, 180, 255, 0.12);
  --on-accent:    #FFFFFF;
  --cta:       #2563EB;
  --cta-hover: #1D4ED8;
  --on-cta:    #FFFFFF;
  --doc:        #1E232D;
  --doc-border: #2C3442;
  --mesa:       #0B1018;
  --rejilla:      rgba(255, 255, 255, 0.055);
  --rejilla-fina: rgba(255, 255, 255, 0.025);
  --modulo:       #10275E;
  --modulo-fondo: #2C4688;
  --modulo-marco: #7D889A;
  --shadow-doc: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px -16px rgba(0, 0, 0, 0.55);
  --ok:    #34D399;
  --warn:  #F59E0B;
  --error: #F87171;
  --escalon-1: #2B3F6B;
  --escalon-2: #3B82F6;
  --escalon-3: #F59E0B;
  --shadow-hero: 0 1px 2px rgba(0, 0, 0, 0.3), 0 24px 48px -24px rgba(0, 0, 0, 0.6);
  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }

[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* ── Roles tipográficos ──────────────────────────────────────────────── */
.eyebrow    { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.h1         { font-size: var(--fs-h1); line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; }
.h2         { font-size: var(--fs-h2); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.lead       { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); }
.small      { font-size: var(--fs-small); color: var(--text-2); }
.num        { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.metrica    { font-size: var(--fs-metric); line-height: 1; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.monumental { font-size: var(--fs-monumental); line-height: 0.88; font-weight: 800; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.unidad     { white-space: nowrap; font-size: max(0.24em, 14px); font-weight: 500; letter-spacing: -0.01em; color: var(--text-3); margin-left: 0.15em; }
.mono       { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.c-2 { color: var(--text-2); }
.c-3 { color: var(--text-3); }
.c-ok { color: var(--ok); }
.c-accent { color: var(--accent-text); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
           clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }