/* ============================================================
   M2 Energy — LIGHT THEME (versión clara)
   Contraste validado WCAG AA: texto >=4.5:1, texto grande / bordes >=3:1.
   Se carga en todas las páginas DESPUÉS del CSS base; los overrides
   ganan por especificidad (html[data-theme="light"] .x).
   El default sigue siendo la versión oscura; "clara" es opt-in.
   ============================================================ */

/* --amber-ink: ámbar cuando se usa como TEXTO. En oscuro = ámbar vivo;
   en claro = bronce legible. Los rellenos siguen usando --amber vivo. */
/* --amber-ink: ámbar como texto CHICO (>=4.5:1) -> bronce.
   --amber-title: ámbar en TÍTULOS grandes y BORDES (>=3:1) -> oro brillante,
   mucho más cercano al amarillo del relleno. */
:root { --amber-ink: var(--amber); --amber-title: var(--amber); }

html[data-theme="light"] {
  --amber-ink: #7a5a00;
  --amber-title: #a07810;
  --blue: #2b5064;  --blue-hot: #24586f;  --blue-deep: #dbe6ee;
  --bg-0: #ece8e0;  --bg-1: #f5f2ec;  --bg-2: #ffffff;  --bg-panel: #ffffff;
  --ink: #14252f;   --ink-dim: #3d505f;  --ink-mute: #506576;
  --line: rgba(20,37,47,.12);  --line-str: rgba(20,37,47,.22);
  --amber-soft: rgba(246,190,31,.16);
}

/* ---- Nav ---- */
html[data-theme="light"] .nav.scrolled {
  background: rgba(252,250,246,.90); border-bottom-color: var(--line);
}
html[data-theme="light"] .nav-dropdown {
  background: #ffffff; border-color: var(--line); box-shadow: 0 12px 40px -12px rgba(20,37,47,.25);
}
/* Botones rellenos ámbar: canto oro visible contra el papel (WCAG 1.4.11 >=3:1) */
html[data-theme="light"] .nav-cta,
html[data-theme="light"] .btn-primary { border: 1.5px solid var(--amber-title); }
/* Botón secundario (ghost): su borde blanco se perdía -> borde oro grueso + fondo blanco */
html[data-theme="light"] .btn-ghost {
  background: #ffffff; color: var(--ink); border: 2px solid var(--amber-title);
}
html[data-theme="light"] .btn-ghost:hover {
  background: var(--amber-soft); border-color: var(--amber-title);
}

/* En blogs el nav transparente flota sobre una foto oscura: mientras no
   esté "scrolled", su texto va claro. Al hacer scroll el nav toma fondo
   claro y hereda el texto oscuro normal. */
html[data-theme="light"] body:has(.post-hero) .nav:not(.scrolled),
html[data-theme="light"] body:has(.page-hero) .nav:not(.scrolled) {
  --ink: #fafcff; --ink-dim: #cdd8e3; --ink-mute: #8ea0b0;
}

/* ---- Hero: capa de fondo oscura hardcodeada -> papel claro con glows suaves ---- */
html[data-theme="light"] .hero {
  background:
    radial-gradient(1200px 600px at 15% 30%, rgba(53,94,114,.10), transparent 60%),
    radial-gradient(900px 500px at 85% 70%, rgba(246,190,31,.12), transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
}
html[data-theme="light"] .hero::before { background: none; }
html[data-theme="light"] .hero::after  { opacity: .18; }
/* Títulos/números grandes en oro brillante (texto grande => basta 3:1) */
html[data-theme="light"] .hero-title .hl {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--amber-title);
}
html[data-theme="light"] .stat .num span,
html[data-theme="light"] .stat .num span[style],
html[data-theme="light"] h2 .amber { color: var(--amber-title) !important; }

/* ---- Islas oscuras deliberadas: footer y panel SCADA del hero conservan su
   fondo oscuro, por lo que reactivamos la paleta oscura SOLO dentro de ellos. ---- */
html[data-theme="light"] footer,
html[data-theme="light"] .hero-visual,
html[data-theme="light"] .post-hero,      /* hero de blog = foto oscura */
html[data-theme="light"] .page-hero {      /* hero de casos = foto oscura */
  --bg-0: #0e1c28; --bg-1: #13283a; --bg-2: #1a3548; --bg-panel: #162e42;
  --ink: #ffffff;  --ink-dim: #dbe6ef;  --ink-mute: #a7b8c6;
  --blue: #355e72; --blue-hot: #5a9cb8; --blue-deep: #1f3e52;
  --amber-ink: var(--amber); --amber-title: var(--amber);
  --line: rgba(255,255,255,.10); --line-str: rgba(255,255,255,.18);
  color: #ffffff;   /* algunos títulos (p.ej. .page-hero h1) no declaran color y
                       heredan el navy ya computado del body; forzamos blanco aquí */
}
/* panel SCADA del hero: opaco y nítido flotando sobre el papel claro */
html[data-theme="light"] .hero-visual { background: linear-gradient(160deg,#0f1f2b 0%,#0a1824 100%); }
/* el "rayo" animado del canvas resalta demasiado sobre claro: se atenúa */
html[data-theme="light"] .hero canvas.fx { opacity: .5; }

/* ---- Bandas / secciones con fondo oscuro hardcodeado ---- */
html[data-theme="light"] .marquee { background: var(--bg-1); border-color: var(--line); }
html[data-theme="light"] .form-section {
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
}

/* ---- Cajas de contenido: AZUL OSCURO + texto BLANCO PURO (en vez de recuadros
   grises). Se reactiva la paleta oscura dentro para que todo el texto sea blanco
   y los acentos ámbar sigan vivos. ---- */
html[data-theme="light"] .res-card,
html[data-theme="light"] .result-grid .tile,
html[data-theme="light"] .result-actions,
html[data-theme="light"] .why-list li,
html[data-theme="light"] .vs-card,
html[data-theme="light"] .form-card,
html[data-theme="light"] .chip,
html[data-theme="light"] .intro-strip,
html[data-theme="light"] .case-meta,
html[data-theme="light"] .case-lead {
  --bg-0:#0e1c28; --bg-1:#13283a; --bg-2:#1a3548; --bg-panel:#162e42;
  --ink:#ffffff; --ink-dim:#dbe6ef; --ink-mute:#a7b8c6;
  --blue:#5a9cb8; --blue-hot:#8fc4dc;
  --amber-ink:var(--amber); --amber-title:var(--amber);
  --line:rgba(255,255,255,.14); --line-str:rgba(255,255,255,.24);
  background:#173a5a; color:#ffffff; border:1px solid rgba(255,255,255,.14);
}
/* inputs dentro de la caja azul (mini-form de casos): campos legibles */
html[data-theme="light"] .case-lead input {
  background:rgba(255,255,255,.10); color:#ffffff; border-color:rgba(255,255,255,.28);
}
html[data-theme="light"] .case-lead input::placeholder { color:rgba(255,255,255,.6); }

/* ---- Formularios: inputs claros ---- */
html[data-theme="light"] .field input,
html[data-theme="light"] .field select,
html[data-theme="light"] .field textarea {
  background: #ffffff; color: var(--ink); border-color: var(--line-str);
}
html[data-theme="light"] .field input:focus,
html[data-theme="light"] .field select:focus,
html[data-theme="light"] .field textarea:focus {
  background: #ffffff; border-color: var(--amber-ink);
}

/* ---- Overlays de gradiente sobre FOTOS (para legibilidad de texto blanco):
   se dejan oscuros a propósito, no se tocan. (.svc-overlay, .ind-overlay,
   .epc-visual-overlay, #vidModal) ---- */