/* ───────── Tema oscuro (por defecto) ───────── */
:root {
  color-scheme: dark;
  --bg: #070d1a;
  --surface: #101a2e;
  --surface-2: #16233c;
  --glass: rgba(16, 26, 46, 0.72);
  --topbar: rgba(7, 13, 26, 0.8);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --shadow: 0 10px 30px rgba(0, 0, 0, .25);
  --ink: #f0efec;
  --ink-2: #c3c8d4;
  --muted: #8a93a6;
  --grid: #1f2b44;
  --chip: rgba(255, 255, 255, .04);
  --track: rgba(255, 255, 255, .07);
  --accent: #5598e7;
  --glow-a: rgba(57, 135, 229, 0.18);
  --glow-b: rgba(25, 158, 112, 0.10);
  --grid-line: rgba(255, 255, 255, 0.025);

  --hydro: #3987e5; --thermal: #d95926; --renew: #199e70; --gas: #c98500; --import: #9085e9; --export: #d55181;
  --good: #0ca30c; --warning: #fab219; --serious: #ec835a; --critical: #d03b3b;

  /* Ilustraciones SVG */
  --sv-sky1: #0b1424; --sv-sky2: #101d33; --sv-mtn1: #0d182b; --sv-mtn2: #111f36;
  --sv-basin: #0a1222; --sv-basin-stroke: #26334d;
  --sv-water1: #5598e7; --sv-water2: #184f95; --sv-wave-b: #3987e5;
  --sv-dam1: #7d879c; --sv-dam2: #4a5368;
  --sv-pipe: #2b3550; --sv-flow: #9ec5f4; --sv-riverbed: #16335c; --sv-river: #7fb3f0;
  --sv-house: #152038; --sv-house-stroke: #2c3a58;
  --sv-unit-bg: #0c1426; --sv-unit-on: #3987e5; --sv-unit-off: #3b465e; --sv-unit-other: #fab219;
  --sv-blade-on: #9ec5f4; --sv-blade-off: #4a5672;
  --sv-glow: #5598e7; --sv-tower: #5a6680; --sv-line: #3a4560; --sv-pulse: #fab219;
  --sv-text: #f0efec; --sv-text2: #c3c8d4; --sv-halo: #0a1222;
  --th-sky2: #1a1b26; --th-stack-on: #3b2a24; --th-stack-off: #232c3f; --th-stack-off-stroke: #2f3a52; --th-smoke: #8a93a6;
  --th-win-on: #f2a46b; --th-win-off: #2a3348;
  --fl-node: #101a2e; --fl-core: #0c1426;
  --map-na: #2a3348;

  --radius: 16px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ───────── Tema claro ───────── */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --glass: rgba(255, 255, 255, 0.86);
  --topbar: rgba(244, 246, 250, 0.86);
  --border: rgba(11, 11, 11, 0.08);
  --border-strong: rgba(11, 11, 11, 0.16);
  --shadow: 0 8px 24px rgba(16, 26, 46, .07);
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #6f6d68;
  --grid: #e6e5df;
  --chip: rgba(11, 11, 11, .035);
  --track: rgba(11, 11, 11, .07);
  --accent: #256abf;
  --glow-a: rgba(57, 135, 229, 0.14);
  --glow-b: rgba(27, 175, 122, 0.08);
  --grid-line: rgba(11, 11, 11, 0.035);

  --hydro: #2a78d6; --thermal: #eb6834; --renew: #1baf7a; --gas: #eda100; --import: #6250d6; --export: #e87ba4;

  --sv-sky1: #dfeaf8; --sv-sky2: #f2f6fc; --sv-mtn1: #c9d6e8; --sv-mtn2: #dbe4f0;
  --sv-basin: #e6ecf4; --sv-basin-stroke: #b6c3d6;
  --sv-water1: #6da7ec; --sv-water2: #256abf; --sv-wave-b: #86b6ef;
  --sv-dam1: #a3acbc; --sv-dam2: #6f7a8e;
  --sv-pipe: #a9b4c6; --sv-flow: #256abf; --sv-riverbed: #c3d9f3; --sv-river: #2a78d6;
  --sv-house: #ffffff; --sv-house-stroke: #b6c3d6;
  --sv-unit-bg: #ffffff; --sv-unit-on: #2a78d6; --sv-unit-off: #a7b1c2; --sv-unit-other: #c98500;
  --sv-blade-on: #2a78d6; --sv-blade-off: #c3cad6;
  --sv-glow: #6da7ec; --sv-tower: #7d889c; --sv-line: #a9b4c6; --sv-pulse: #c98500;
  --sv-text: #0b0b0b; --sv-text2: #3e3d3a; --sv-halo: #ffffff;
  --th-sky2: #f6efe9; --th-stack-on: #fde3d6; --th-stack-off: #e3e8ef; --th-stack-off-stroke: #c9d1dd; --th-smoke: #9aa3b2;
  --th-win-on: #eb6834; --th-win-off: #dfe5ee;
  --fl-node: #ffffff; --fl-core: #ffffff;
  --map-na: #d5dbe5;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .3s ease, color .3s ease;
}
a { color: var(--accent); }
h1, h2, h3, h4, h5 { margin: 0; line-height: 1.2; }
button { font-family: inherit; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.accent { background: linear-gradient(90deg, #3987e5, #19a98a); -webkit-background-clip: text; background-clip: text; color: transparent; }

.bg-grid {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 500px at 85% -10%, var(--glow-a), transparent 60%),
    radial-gradient(700px 500px at -10% 30%, var(--glow-b), transparent 60%),
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 40px 40px;
}

/* ───────── Barra superior ───────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 24px;
  background: var(--topbar);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-size: 17px; white-space: nowrap; }
.brand svg { width: 22px; height: 22px; fill: var(--warning); filter: drop-shadow(0 0 6px rgba(250,178,25,.5)); }
.brand b { font-weight: 800; }
.nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.nav::-webkit-scrollbar { display: none; }
.nav a { color: var(--ink-2); text-decoration: none; padding: 6px 12px; border-radius: 999px; font-size: 14px; white-space: nowrap; transition: background .2s, color .2s; }
.nav a:hover, .nav a.on { background: rgba(57,135,229,.16); color: var(--ink); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.live { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.live .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.live.ok .dot { background: var(--good); animation: ping 2s infinite; }
.live.stale .dot { background: var(--warning); }
.live.err .dot { background: var(--critical); }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(12,163,12,.6); } 80%, 100% { box-shadow: 0 0 0 10px rgba(12,163,12,0); } }

.countdown {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 6px;
  border-radius: 999px; border: 1px solid var(--border-strong); background: var(--chip);
  color: var(--ink); cursor: pointer; font: 600 12.5px var(--font); white-space: nowrap;
}
.countdown:hover { background: rgba(57,135,229,.12); }
.countdown svg { width: 24px; height: 24px; transform: rotate(-90deg); flex: none; }
.countdown .trk { fill: none; stroke: var(--track); stroke-width: 3; }
.countdown .prg { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.countdown.busy svg { animation: spin 1s linear infinite; }
.countdown .cd-l { color: var(--muted); font-weight: 500; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--chip);
  color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none;
}
.icon-btn:hover { background: rgba(57,135,229,.12); }
.icon-btn svg { width: 17px; height: 17px; }
:root[data-theme="light"] .i-moon, :root:not([data-theme="light"]) .i-sun { display: none; }

main { max-width: 1320px; margin: 0 auto; padding: 0 24px 40px; }
.section { padding: 48px 0 8px; }
.section-h { margin-bottom: 18px; max-width: 880px; }
.section-h h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--accent); margin: 0 0 8px; font-weight: 600; }

/* ───────── Tarjetas ───────── */
.card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  min-width: 0;
  position: relative;
}
.section > * + * { margin-top: 18px; }
.section > .section-h + * { margin-top: 0; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.card-h h2 { font-size: 16px; font-weight: 700; }
.card-h h3 { font-size: 15.5px; font-weight: 700; }
.info { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-strong); background: transparent; color: var(--ink-2); cursor: help; font: 600 12px var(--font); flex: none; }

.grid-2-1, .grid-1-2, .grid-1-1, .grid-2, .grid-3 { display: grid; gap: 18px; }
.grid-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grid-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.grid-1-1, .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.chart { width: 100%; }
.h300 { height: 300px; } .h320 { height: 320px; } .h340 { height: 340px; } .h360 { height: 360px; } .h380 { height: 380px; } .h480 { height: 480px; }

/* Selector segmentado */
.seg { display: inline-flex; background: var(--chip); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; flex-wrap: wrap; max-width: 100%; }
.seg button { border: 0; background: transparent; color: var(--ink-2); padding: 5px 12px; border-radius: 999px; font: 500 12.5px var(--font); cursor: pointer; white-space: nowrap; }
.seg button.on { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border-strong); }
.seg button:focus-visible, .nav a:focus-visible, select:focus-visible, input:focus-visible, .countdown:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ───────── Hero ───────── */
.hero { padding-top: 36px; }
.hero h1 { font-size: clamp(27px, 4.2vw, 46px); font-weight: 800; letter-spacing: -0.03em; max-width: 880px; }
.lede { font-size: clamp(15px, 1.6vw, 17px); color: var(--ink-2); max-width: 880px; margin: 14px 0 0; }
.lede b { color: var(--ink); }
.hero-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 18px; margin-top: 26px; }
.gauge { height: 210px; }
.risk-level { display: flex; align-items: center; justify-content: center; gap: 6px 8px; font-weight: 700; font-size: 15px; margin-top: -8px; flex-wrap: wrap; text-align: center; }
.risk-level svg { width: 18px; height: 18px; }
.risk-parts { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 9px; }
.risk-parts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; font-size: 13px; }
.risk-parts .bar { grid-column: 1 / -1; height: 6px; border-radius: 4px; background: var(--track); overflow: hidden; }
.risk-parts .bar i { display: block; height: 100%; border-radius: 4px; transition: width 1s ease; }
.risk-parts .d { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; align-content: start; }
.kpi { padding: 16px 18px; }
.kpi .lbl { font-size: 12.5px; color: var(--ink-2); display: flex; align-items: center; gap: 7px; }
.kpi .lbl i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: none; }
.kpi .val { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; overflow-wrap: anywhere; }
.kpi .val small { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-left: 4px; display: inline-block; }
.kpi .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.kpi .sub .badge { margin-right: 4px; }
.kpi .meter { height: 5px; background: var(--track); border-radius: 4px; margin-top: 10px; overflow: hidden; }
.kpi .meter i { display: block; height: 100%; border-radius: 4px; transition: width 1.2s ease; }

/* ───────── Flujo ───────── */
.flow-card { padding: 8px; }
.flow svg { width: 100%; height: auto; display: block; }
.flow[data-layout="v"] svg { max-width: 520px; margin: 0 auto; }
.flow .lbl { fill: var(--ink); font: 600 14px var(--font); }
.flow .val { fill: var(--ink-2); font: 500 12.5px var(--font); }
.flow .lbl.sm { font-size: 12.5px; }
.flow .val.sm { font-size: 12.5px; font-weight: 600; fill: var(--ink); }
.flow .val.xs { font-size: 11.5px; }
.flow .big { fill: var(--ink); font: 800 22px var(--font); }
.flow-v .big { font-size: 19px; }
.fl-node { fill: var(--fl-node); stroke: var(--border-strong); }
.fl-core { fill: var(--fl-core); stroke: rgba(85,152,231,.5); stroke-width: 1.5; }
.fl-ring { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 10; }
.flow-path { fill: none; stroke-linecap: round; opacity: .28; }
.flow-dash { fill: none; stroke-linecap: round; stroke-dasharray: 2 16; animation: dash linear infinite; }
@keyframes dash { to { stroke-dashoffset: -180; } }

/* ───────── Ilustraciones (clases de color por tema) ───────── */
.sv-sky1 { stop-color: var(--sv-sky1); } .sv-sky2 { stop-color: var(--sv-sky2); } .th-sky2 { stop-color: var(--th-sky2); }
.sv-water1 { stop-color: var(--sv-water1); stop-opacity: .95; } .sv-water2 { stop-color: var(--sv-water2); }
.sv-dam1 { stop-color: var(--sv-dam1); } .sv-dam2 { stop-color: var(--sv-dam2); }
.sv-glow1 { stop-color: var(--sv-glow); stop-opacity: .9; } .sv-glow2 { stop-color: var(--sv-glow); stop-opacity: 0; }
.sv-mtn1 { fill: var(--sv-mtn1); } .sv-mtn2 { fill: var(--sv-mtn2); }
.sv-basin { fill: var(--sv-basin); stroke: var(--sv-basin-stroke); stroke-width: 1; }
.sv-wave-b { fill: var(--sv-wave-b); }
.sv-pipe { fill: none; stroke: var(--sv-pipe); stroke-linecap: round; }
.sv-flow { stroke: var(--sv-flow); }
.sv-riverbed { fill: none; stroke: var(--sv-riverbed); stroke-linecap: round; }
.sv-river { stroke: var(--sv-river); }
.sv-house { fill: var(--sv-house); stroke: var(--sv-house-stroke); }
.sv-unit-bg { fill: var(--sv-unit-bg); stroke-width: 1.6; }
.unit-on .sv-unit-ring { stroke: var(--sv-unit-on); } .unit-off .sv-unit-ring { stroke: var(--sv-unit-off); } .unit-other .sv-unit-ring { stroke: var(--sv-unit-other); stroke-dasharray: 3 2; }
.unit-on .sv-unit-hub { fill: var(--sv-unit-on); } .unit-off .sv-unit-hub { fill: var(--sv-unit-off); } .unit-other .sv-unit-hub { fill: var(--sv-unit-other); }
.sv-blade-on { fill: var(--sv-blade-on); } .sv-blade-off { fill: var(--sv-blade-off); }
.sv-tower { fill: none; stroke: var(--sv-tower); stroke-width: 1.6; }
.sv-line { fill: none; stroke: var(--sv-line); stroke-width: 1.4; }
.sv-pulse { fill: var(--sv-pulse); }
.sv-text { fill: var(--sv-text); } .sv-text2 { fill: var(--sv-text2); } .sv-muted { fill: var(--muted); }
.sv-mw { fill: var(--sv-pulse); }
.sv-lim { fill: var(--muted); } .sv-lim-line { stroke: var(--muted); stroke-width: 1; opacity: .75; }
.sv-min, .sv-alarm { fill: var(--critical); } .sv-min-line { stroke: var(--critical); stroke-width: 1; opacity: .8; }
.th-stack-on { fill: var(--th-stack-on); stroke: var(--thermal); stroke-width: 1; }
.th-stack-off { fill: var(--th-stack-off); stroke: var(--th-stack-off-stroke); stroke-width: 1; }
.th-fire { fill: var(--thermal); } .th-smoke { fill: var(--th-smoke); }
.th-win-on { fill: var(--th-win-on); opacity: .9; } .th-win-off { fill: var(--th-win-off); }
.plant-svg text, .coca-svg text, .thermal-card text { font-family: var(--font); paint-order: stroke; stroke: var(--sv-halo); stroke-width: 3px; stroke-linejoin: round; }

/* ───────── Centrales hidro ───────── */
.chain-title { font-size: 17px; margin: 26px 0 0; }
.section > .chain-title + * { margin-top: 12px; }
.cascade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; position: relative; }
.cascade > .plant { position: relative; }
.cascade > .plant > .card { height: 100%; }
.grid-2 > div > .card { height: 100%; }
.cascade > .plant:not(:last-child)::after {
  content: "→"; position: absolute; right: -16px; top: 92px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border-strong);
  display: grid; place-items: center; color: var(--accent); font-weight: 800; font-size: 14px;
}
.plant-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.plant h4 { margin: 0; font-size: 17px; font-weight: 800; }
.plant .role { font-size: 12px; color: var(--muted); }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; vertical-align: middle; }
.badge svg { width: 12px; height: 12px; flex: none; }
.badge.good { color: var(--good); } .badge.warning { color: #c78a00; } .badge.serious { color: var(--serious); } .badge.critical { color: var(--critical); }
:root:not([data-theme="light"]) .badge.warning { color: var(--warning); }
:root[data-theme="light"] .badge.serious { color: #c4501f; }
.badge.neutral { color: var(--ink-2); }
.plant-svg { margin: 10px -6px 4px; }
.plant-svg svg, .coca-svg svg { width: 100%; height: auto; display: block; }
.plant { container-type: inline-size; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.coca .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (max-width: 520px) { .stats, .coca .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { background: var(--chip); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.stat .k { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .v { font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .v small { font-size: 11px; color: var(--ink-2); font-weight: 500; }
.sparks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin-top: 10px; }
.spark { height: 74px; }
.spark-t { font-size: 11px; color: var(--muted); margin-bottom: -4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note { font-size: 12px; color: var(--muted); margin-top: 10px; border-left: 2px solid var(--border-strong); padding-left: 10px; }
.note b { color: var(--ink-2); }
.units-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.units-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; border: 2px solid; }
.units-legend .on { border-color: var(--sv-unit-on); background: var(--sv-unit-on); }
.units-legend .off { border-color: var(--sv-unit-off); }
.units-legend .other { border-color: var(--sv-unit-other); border-style: dashed; }

/* Coca Codo (tarjeta destacada) */
.coca { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 8px 22px; }
.coca .plant-h { grid-column: 1 / -1; }
.coca-svg { margin: 4px -6px 0; align-self: start; }
.coca .side { display: grid; gap: 10px; align-content: start; min-width: 0; }
.coca .note { grid-column: 1 / -1; }
.qbar { margin-top: 2px; }
.qbar .spark-t { margin-bottom: 8px; font-size: 12px; color: var(--ink-2); }
.qbar .track { position: relative; height: 10px; border-radius: 6px; background: var(--track); overflow: visible; }
.qbar .fill { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--hydro); transition: width 1.2s ease; }
.qbar .mark { position: absolute; top: -4px; width: 2px; height: 18px; background: var(--ink-2); border-radius: 1px; }
.qbar .mark.n { background: var(--muted); }
.qbar .lbls { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 6px; gap: 8px; flex-wrap: wrap; }

/* Animaciones de la planta */
.spin { transform-box: fill-box; transform-origin: center; animation: spin linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.wave { animation: wave 6s linear infinite; }
.wave.b { animation-duration: 9s; animation-direction: reverse; opacity: .5; }
@keyframes wave { to { transform: translateX(-80px); } }
.river { fill: none; stroke-linecap: round; stroke-dasharray: 6 10; animation: dash linear infinite; }
.bolt { animation: bolt 1.6s ease-in-out infinite; }
@keyframes bolt { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.unit-on .glow { animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
.alarm { animation: alarm 1.2s ease-in-out infinite; }
@keyframes alarm { 50% { opacity: .35; } }
.smoke { animation: smoke 3.2s ease-out infinite; transform-box: fill-box; transform-origin: center bottom; }
@keyframes smoke { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: .55; } 100% { transform: translateY(-46px) scale(1.8); opacity: 0; } }

.mini-plants { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.mini { padding: 14px 16px; }
.mini h5 { margin: 0; font-size: 14.5px; }
.mini .cf { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--ink-2); margin-top: 8px; flex-wrap: wrap; }
.mini .now { font-size: 22px; font-weight: 800; margin-top: 6px; }
.mini .now small { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.mini .meter { height: 7px; border-radius: 4px; background: var(--track); margin-top: 6px; overflow: hidden; }
.mini .meter i { display: block; height: 100%; background: var(--hydro); border-radius: 4px; transition: width 1.2s ease; }
.mini .turbines { display: flex; gap: 6px; margin-top: 10px; }

/* ───────── Térmica ───────── */
.thermal-card { display: flex; align-items: center; }
.thermal-card > div { width: 100%; }
.thermal-card svg { width: 100%; height: auto; display: block; }

/* ───────── Mapa ───────── */
.map svg { width: 100%; height: auto; display: block; max-height: 520px; }
.map path { stroke: var(--bg); stroke-width: 1.2; transition: opacity .2s, filter .2s; cursor: pointer; }
.map path.map-na { fill: var(--map-na); }
@media (hover: hover) {
  .map svg:hover path { opacity: .55; }
  .map svg path:hover { opacity: 1; filter: brightness(1.15); }
}
.legend-seq { display: flex; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--muted); margin-top: 8px; flex-wrap: wrap; }
.legend-seq .sw { display: inline-flex; align-items: center; gap: 4px; }
.legend-seq .sw i { width: 22px; height: 10px; display: block; border-radius: 2px; }
.legend-seq .map-na-sw { background: var(--map-na); }

/* ───────── Histórico ───────── */
.filters { display: flex; gap: 12px 16px; align-items: flex-end; flex-wrap: wrap; }
.filters label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
select, input[type="date"] {
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 8px 10px; font: 500 14px var(--font); min-width: 180px; max-width: 100%;
}
.multiples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.multiples .card h3 { font-size: 14.5px; margin-bottom: 4px; }
.multiples .chart { height: 260px; }
.multiples .empty { height: 260px; display: grid; place-items: center; color: var(--muted); font-size: 13px; text-align: center; }
.is-loading { opacity: .5; transition: opacity .2s; }

/* ───────── Predicción ───────── */
.proj-text { font-size: 15px; color: var(--ink-2); margin: 0 0 6px; max-width: 900px; }
.proj-text b { color: var(--ink); }
.ai { display: grid; gap: 18px; }
.ai-head { display: flex; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; align-items: center; }
.ai-head h3 { font-size: 18px; display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.ai-head h3 svg { width: 22px; height: 22px; fill: none; stroke: var(--import); stroke-width: 1.8; flex: none; }
.ai-meta { font-size: 12px; color: var(--muted); }
.ai-summary { font-size: 16px; line-height: 1.65; color: var(--ink); margin: 12px 0 0; }
.ai-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ai-num .val { font-size: clamp(22px, 2.6vw, 34px); font-weight: 800; overflow-wrap: anywhere; }
.ai-num .lbl { font-size: 12.5px; color: var(--ink-2); }
.ai-num .ring { height: 120px; }
.scen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.scen .card { border-top: 3px solid var(--border-strong); }
.scen h4 { margin: 0 0 4px; font-size: 15px; display: flex; justify-content: space-between; gap: 8px; }
.scen p { margin: 6px 0; font-size: 13.5px; color: var(--ink-2); }
.scen dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; margin: 8px 0 0; font-size: 13px; }
.scen dt { color: var(--muted); } .scen dd { margin: 0; font-weight: 700; text-align: right; }
.lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lists ul { margin: 8px 0 0; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.lists li { font-size: 14px; color: var(--ink-2); display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 6px; }
.lists li b { color: var(--ink); }
.lists li svg { width: 16px; height: 16px; margin-top: 3px; }
.ai-empty { text-align: center; padding: 34px 20px; }
.ai-empty h3 { display: flex; justify-content: center; align-items: center; gap: 8px; }
.ai-empty h3 svg { width: 22px; height: 22px; fill: none; stroke: var(--import); stroke-width: 1.8; }
.ai-empty code { background: var(--surface-2); padding: 2px 6px; border-radius: 6px; font-size: 13px; }
.ai-empty pre { text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 12.5px; overflow-x: auto; max-width: 620px; margin: 14px auto 0; }
.loader { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--track); border-top-color: var(--accent); animation: spin 1s linear infinite; margin: 0 auto 12px; }

/* Tabla accesible */
.table-toggle { margin-top: 6px; }
.table-toggle > button { background: none; border: 0; color: var(--accent); font: 500 12.5px var(--font); cursor: pointer; padding: 4px 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { padding: 5px 8px; border-bottom: 1px solid var(--grid); text-align: right; white-space: nowrap; }
.data-table th:first-child, .data-table td:first-child { text-align: left; }
.data-table th { color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--surface); }
.table-wrap { max-height: 320px; overflow: auto; -webkit-overflow-scrolling: touch; }

.tooltip {
  position: fixed; z-index: 100; pointer-events: none; max-width: min(300px, calc(100vw - 24px));
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 8px 11px; font-size: 12.5px; color: var(--ink); box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.tooltip b { display: block; margin-bottom: 2px; }
.toast {
  position: fixed; z-index: 120; left: 50%; bottom: 22px; transform: translate(-50%, 20px); opacity: 0;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border-strong); border-left: 4px solid var(--good);
  border-radius: 12px; padding: 10px 16px; font-size: 13.5px; box-shadow: 0 12px 30px rgba(0,0,0,.3);
  transition: opacity .35s ease, transform .35s ease; max-width: calc(100vw - 28px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ───────── PWA: sugerencia de instalación ───────── */
.install {
  position: fixed; z-index: 130; left: 50%; bottom: 0; width: min(560px, 100%);
  transform: translate(-50%, 110%); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border-strong); border-bottom: 0;
  border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .35);
  padding: 20px 20px calc(18px + env(safe-area-inset-bottom));
}
.install.show { transform: translate(-50%, 0); }
.install img { border-radius: 13px; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.install h4 { font-size: 17px; font-weight: 800; margin: 2px 28px 4px 0; }
.install p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.install-steps { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.install-steps li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.install-steps li b { color: var(--ink); }
.install-steps .ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--chip); border: 1px solid var(--border); color: var(--accent); font-weight: 800; }
.install-steps .ico svg { width: 17px; height: 17px; }
.install-steps .ico.ok { color: var(--good); }
.install-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.install-x { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--chip); color: var(--ink-2); font-size: 20px; line-height: 1; cursor: pointer; }
.btn-primary { border: 0; border-radius: 999px; padding: 10px 20px; background: var(--accent); color: #fff; font: 700 14px var(--font); cursor: pointer; }
:root[data-theme="light"] .btn-primary { background: #2a78d6; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { border: 1px solid var(--border-strong); border-radius: 999px; padding: 9px 18px; background: transparent; color: var(--ink); font: 600 14px var(--font); cursor: pointer; }
.install-hint { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--glass); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.install-hint[hidden] { display: none; }
.install-hint img { border-radius: 9px; }
.install-hint span { flex: 1 1 180px; color: var(--ink); font-weight: 600; }
@media (min-width: 900px) { .install { bottom: 18px; border-radius: 20px; border-bottom: 1px solid var(--border-strong); } }

/* Abierta como app instalada: respeta las zonas seguras (muesca, barra de inicio) */
.is-app .topbar { padding-top: max(10px, env(safe-area-inset-top)); }
.is-app .footer { padding-bottom: max(40px, env(safe-area-inset-bottom)); }

.footer { max-width: 1320px; margin: 30px auto 0; padding: 26px 24px 40px; border-top: 1px solid var(--border); display: grid; gap: 8px; font-size: 13.5px; color: var(--ink-2); }

/* ───────── Responsive ───────── */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .cascade { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .cascade > .plant:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -24px; transform: translateX(50%); }
  .ai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coca { grid-template-columns: minmax(0, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .grid-2-1, .grid-1-2, .grid-1-1, .grid-2, .grid-3, .multiples, .scen, .lists { grid-template-columns: minmax(0, 1fr); }
  .topbar { flex-wrap: wrap; gap: 8px 12px; padding: 8px 16px; }
  .top-actions { margin-left: auto; }
  .nav { order: 3; flex-basis: 100%; margin: 0 -8px; }
  html { scroll-padding-top: 110px; }
  .h480 { height: 520px; }
}
@media (max-width: 600px) {
  body { font-size: 14.5px; }
  main { padding: 0 14px 30px; }
  .footer { padding: 22px 14px 34px; }
  .section { padding-top: 34px; }
  .section-h h2 { font-size: 23px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 12px 13px; }
  .kpi .val small { font-size: 12px; }
  .kpi .lbl { font-size: 12px; }
  .card { padding: 14px; border-radius: 14px; }
  .live .lv-t { display: none; }
  .countdown { padding: 0 10px 0 5px; }
  .countdown .cd-l { display: none; }
  .brand { font-size: 16px; }
  .filters label { flex: 1 1 140px; }
  select, input[type="date"] { min-width: 0; width: 100%; }
  .h360 { height: 320px; } .h380 { height: 340px; } .h340 { height: 360px; }
  .gauge { height: 190px; }
  .seg button { padding: 5px 10px; font-size: 12px; }
  .ai-num .ring { height: 100px; }
  .plant-svg { margin: 8px -4px 2px; }
  .sparks { gap: 4px 10px; }
  .spark { height: 64px; }
}
@media (max-width: 380px) {
  .kpi-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}