/* ============================================================
   IMSO · Gestión y Calidad de la Energía (GCE)
   DESIGN SYSTEM v1.0 — TOKENS
   ------------------------------------------------------------
   Arquitectura IMSO v1.1 (aprobada). Base visual: Design System v0.1.
   "Instrumento, no tienda": navy + ámbar, IBM Plex Sans/Mono,
   lenguaje de analizador de calidad de energía.

   CONVENCIONES
   - Custom properties namespaced --gce-*  (no colisiona con imso-productos.css)
   - Clases de componente: .imso-<bloque>, .imso-<bloque>__<el>, .imso-<bloque>--<mod>
   - Todo el contenido crítico es SSR; el JS es mejora progresiva.
   - Tema claro/oscuro por prefers-color-scheme + override .imso-gce[data-theme].
   ============================================================ */

:root{
  /* --- marca --- */
  --gce-navy:#0A1930; --gce-navy-900:#081324; --gce-navy-800:#0f2038;
  --gce-navy-700:#16294a; --gce-navy-600:#21406e; --gce-navy-500:#33578c;
  --gce-amber:#E8A33D; --gce-amber-deep:#c8842a; --gce-amber-hi:#f6c874; --gce-amber-tint:#faedd4;
  --gce-signal:#37a7b4;

  /* --- acero (neutros, sesgo navy) --- */
  --gce-bg:#EDF0F4; --gce-paper:#FFFFFF; --gce-panel:#F6F8FB; --gce-sunken:#E7ECF2;
  --gce-ink:#0C1622; --gce-ink-2:#2C3A4B; --gce-muted:#586475; --gce-faint:#8A95A5;
  --gce-line:#D8DEE7; --gce-line-2:#E7EBF1; --gce-grid:#CFD8E3;

  /* --- funnel (semántico) --- */
  --gce-tofu:#2F7D88; --gce-mofu:#B9791F; --gce-bofu:#B24A2C;
  /* --- estado (semántico, separado del acento) --- */
  --gce-ok:#2C7A52; --gce-warn:#B9791F; --gce-crit:#B23A2C; --gce-info:#2f6d7a;

  /* --- tipos de contenido --- */
  --gce-ct-problema:#B24A2C; --gce-ct-sintoma:#8a5a86; --gce-ct-servicio:#2f6d7a;
  --gce-ct-solucion:#2c6a4a; --gce-ct-tecnologia:#355a9c; --gce-ct-producto:#1b4f8a;
  --gce-ct-comparativa:#8a6d1f; --gce-ct-recurso:#5a6475; --gce-ct-caso:#7a5a2c; --gce-ct-norma:#556070;
  --gce-ct-concepto:#2b8ca0;

  /* --- elevación --- */
  --gce-sh-1:0 1px 2px rgba(10,25,48,.05),0 4px 12px -8px rgba(10,25,48,.22);
  --gce-sh-2:0 1px 3px rgba(10,25,48,.08),0 16px 34px -20px rgba(10,25,48,.38);
  --gce-sh-3:0 2px 6px rgba(10,25,48,.10),0 30px 60px -30px rgba(10,25,48,.5);

  /* --- geometría / escala --- */
  --gce-r-1:6px; --gce-r-2:10px; --gce-r-3:16px; --gce-r-pill:100px;
  --gce-sp-1:4px; --gce-sp-2:8px; --gce-sp-3:12px; --gce-sp-4:16px; --gce-sp-5:24px; --gce-sp-6:32px; --gce-sp-7:48px; --gce-sp-8:64px;
  --gce-maxw:1200px; --gce-readw:70ch;

  /* --- tipografía --- */
  --gce-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gce-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gce-fs-xs:.72rem; --gce-fs-sm:.84rem; --gce-fs-base:1rem; --gce-fs-md:1.12rem;
  --gce-fs-lg:1.3rem; --gce-fs-xl:1.9rem; --gce-fs-2xl:clamp(2rem,4.4vw,3.1rem);
  --gce-lh:1.6; --gce-lh-tight:1.16;

  /* --- motion --- */
  --gce-t-fast:.12s; --gce-t:.18s;

  /* --- breakpoints (referencia; usados en media queries) ---
     sm:480 · md:640 · lg:860 · xl:1000 · 2xl:1200 */
}

/* ---- tema oscuro: por sistema (sin override) ---- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --gce-bg:#080f1c; --gce-paper:#0e1a2e; --gce-panel:#111f36; --gce-sunken:#0a1424;
    --gce-ink:#e9eff7; --gce-ink-2:#c2cddc; --gce-muted:#93a0b4; --gce-faint:#65728a;
    --gce-line:#20324c; --gce-line-2:#182740; --gce-grid:#1c2f4b;
    --gce-navy:#060e1b; --gce-navy-900:#050b16; --gce-navy-800:#0a1524;
    --gce-navy-700:#132340; --gce-navy-600:#1d3358; --gce-navy-500:#2c4a78;
    --gce-amber:#f0b04f; --gce-amber-deep:#e8a33d; --gce-amber-hi:#f6c874; --gce-amber-tint:#2a2314;
    --gce-signal:#49bccb;
    --gce-tofu:#4fa3ae; --gce-mofu:#d69a3a; --gce-bofu:#d47250;
    --gce-ok:#4fa87a; --gce-warn:#d69a3a; --gce-crit:#d4614f; --gce-info:#5a9aa8;
    --gce-ct-problema:#d47250; --gce-ct-sintoma:#b487af; --gce-ct-servicio:#5a9aa8; --gce-ct-solucion:#5aa07a;
    --gce-ct-tecnologia:#6e93d6; --gce-ct-producto:#5a8fd0; --gce-ct-comparativa:#c8a94a;
    --gce-ct-recurso:#94a0b3; --gce-ct-caso:#c0965a; --gce-ct-norma:#8a97ab; --gce-ct-concepto:#56b6c9;
    --gce-sh-1:0 1px 2px rgba(0,0,0,.4),0 6px 16px -10px rgba(0,0,0,.6);
    --gce-sh-2:0 2px 6px rgba(0,0,0,.5),0 18px 38px -22px rgba(0,0,0,.75);
    --gce-sh-3:0 3px 8px rgba(0,0,0,.55),0 34px 64px -32px rgba(0,0,0,.85);
  }
}
/* ---- tema oscuro: override explícito (toggle o preferencia del sitio) ---- */
:root[data-theme="dark"]{
  --gce-bg:#080f1c; --gce-paper:#0e1a2e; --gce-panel:#111f36; --gce-sunken:#0a1424;
  --gce-ink:#e9eff7; --gce-ink-2:#c2cddc; --gce-muted:#93a0b4; --gce-faint:#65728a;
  --gce-line:#20324c; --gce-line-2:#182740; --gce-grid:#1c2f4b;
  --gce-navy:#060e1b; --gce-navy-900:#050b16; --gce-navy-800:#0a1524;
  --gce-navy-700:#132340; --gce-navy-600:#1d3358; --gce-navy-500:#2c4a78;
  --gce-amber:#f0b04f; --gce-amber-deep:#e8a33d; --gce-amber-hi:#f6c874; --gce-amber-tint:#2a2314;
  --gce-signal:#49bccb;
  --gce-tofu:#4fa3ae; --gce-mofu:#d69a3a; --gce-bofu:#d47250;
  --gce-ok:#4fa87a; --gce-warn:#d69a3a; --gce-crit:#d4614f; --gce-info:#5a9aa8;
  --gce-ct-problema:#d47250; --gce-ct-sintoma:#b487af; --gce-ct-servicio:#5a9aa8; --gce-ct-solucion:#5aa07a;
  --gce-ct-tecnologia:#6e93d6; --gce-ct-producto:#5a8fd0; --gce-ct-comparativa:#c8a94a;
  --gce-ct-recurso:#94a0b3; --gce-ct-caso:#c0965a; --gce-ct-norma:#8a97ab;
  --gce-sh-1:0 1px 2px rgba(0,0,0,.4),0 6px 16px -10px rgba(0,0,0,.6);
  --gce-sh-2:0 2px 6px rgba(0,0,0,.5),0 18px 38px -22px rgba(0,0,0,.75);
  --gce-sh-3:0 3px 8px rgba(0,0,0,.55),0 34px 64px -32px rgba(0,0,0,.85);
}

/* ============================================================
   BASE — se aplica dentro del contenedor .imso-gce para no
   afectar al resto del sitio (Hello Elementor / product pages).
   ============================================================ */
.imso-gce{
  font-family:var(--gce-sans);
  color:var(--gce-ink);
  background:var(--gce-bg);
  font-size:16px;
  line-height:var(--gce-lh);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern" 1;
}
.imso-gce *,.imso-gce *::before,.imso-gce *::after{box-sizing:border-box}
.imso-gce h1,.imso-gce h2,.imso-gce h3,.imso-gce h4,.imso-gce h5{
  margin:0;line-height:var(--gce-lh-tight);letter-spacing:-.012em;font-weight:700;text-wrap:balance;color:var(--gce-ink);
}
.imso-gce p{margin:0 0 1em}
/* Color de enlace SOLO para enlaces de texto, nunca para botones (.imso-btn):
   si no se excluyen, la regla de enlace en modo oscuro (mayor especificidad)
   pinta el texto del botón ámbar del mismo color que su fondo → invisible. */
.imso-gce a:not(.imso-btn){color:var(--gce-amber-deep);text-decoration:none}
.imso-gce a:not(.imso-btn):hover{text-decoration:underline}
:root[data-theme="dark"] .imso-gce a:not(.imso-btn){color:var(--gce-amber)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .imso-gce a:not(.imso-btn){color:var(--gce-amber)}}
.imso-gce img{max-width:100%;display:block}
.imso-gce code,.imso-gce .gce-mono{font-family:var(--gce-mono)}
.imso-gce :focus-visible{outline:2px solid var(--gce-amber);outline-offset:2px;border-radius:3px}

/* utilidades mínimas */
.imso-gce .gce-wrap{max-width:var(--gce-maxw);margin:0 auto;padding:0 var(--gce-sp-4)}
.imso-gce .gce-read{max-width:var(--gce-readw)}
.imso-gce .gce-mut{color:var(--gce-muted)}
.imso-gce .gce-lbl{font-family:var(--gce-mono);font-size:var(--gce-fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--gce-faint)}
.imso-gce .gce-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.imso-gce .gce-num{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion: reduce){
  .imso-gce *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}