/* ════════════════════════════════════════════════════════════════════════════
   Pana theme — ProSolar Solar Calc
   Fuente de verdad: Figma "ProSolar Brand Identity" → 01b Pana Product Brand,
   02 Components & Icons, 03 Solar Calc (generado 2026-09-27).

   Cómo funciona: redefine los tokens que ya usa baseLayout (--bg, --surface,
   --border, --text, --accent…) a partir de los tokens FIJOS de Figma que define
   pana-kit.css (--pana-canvas, --pana-surface, --pana-border, --pana-text…), así TODAS
   las pantallas que ya consumen tokens cambian sin tocar server.ts. No hay paleta
   editable (D-30): los hex viven solo en pana-kit.css.
   --accent-ink = color de TEXTO de acento: navy en claro (el azul de marca sobre blanco
   da 3:1 y no pasa AA), azul de marca en oscuro.

   Carga: solo con el diseño Pana (v2), después del <style> de tokens y de pana-kit.css.
   Tema (convención de la app): <html> sin clase = Dark · <html class="light"> = Light.
   El toggle existente (toggleTheme → html.light + localStorage sc_theme) no cambia.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Marca, semánticos y componentes: en pana-kit.css (siempre cargado) ── */
:root{
  /* la app ya usa estos nombres en todo el CSS: basta con redefinirlos */
  --font-sans:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* radios Pana: control 6 · chip 8 · card 12 · pill 999 */
  --radius-sm:6px; --radius-md:8px; --radius-lg:12px;
  --ease:cubic-bezier(.2,0,0,1); --ease-out:cubic-bezier(.2,.8,.2,1); --dur:180ms;
}

/* ── 2. Apariencia · Dark (por defecto: <html> sin clase) ───────────────────
   Tokens de Figma (ProSolar Appearance, modo Dark); los intermedios salen de mezclarlos. */
:root{
  --bg:var(--pana-canvas);
  --bg-elev:var(--pana-surface);
  --surface:var(--pana-surface);
  --surface2:var(--pana-surface-subtle);
  --surface3:color-mix(in srgb,var(--pana-surface-subtle) 70%,var(--pana-border));
  --border:var(--pana-border);
  --border2:color-mix(in srgb,var(--pana-border) 75%,var(--pana-text-muted));
  --glass-border:rgba(255,255,255,.08);
  --text:var(--pana-text); --text2:color-mix(in srgb,var(--pana-text) 82%,var(--pana-text-muted));
  --muted:var(--pana-text-muted); --muted2:color-mix(in srgb,var(--pana-text-muted) 80%,var(--pana-canvas));
  --accent:var(--pana-blue); --accent-deep:var(--pana-navy); --accent-ink:var(--pana-blue);
  --accent-lo:color-mix(in srgb,var(--pana-blue) 16%,transparent);
  --accent-mid:color-mix(in srgb,var(--pana-blue) 40%,transparent);
  --accent-glow:color-mix(in srgb,var(--pana-blue) 28%,transparent);
  --orange:#fb923c; --red:#f87171; --blue:#60a5fa; --violet:#a78bfa; --glass-blur:10px;
  --glass-bg:color-mix(in srgb,var(--surface) 78%,transparent);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 6px 20px -6px rgba(0,0,0,.45); --shadow-lg:0 18px 44px -12px rgba(0,0,0,.55);
  --ring:0 0 0 2px var(--pana-blue);
  --grad-hero:linear-gradient(135deg,color-mix(in srgb,var(--pana-green) 10%,transparent),color-mix(in srgb,var(--pana-blue) 12%,transparent));
  --pana-focus:var(--pana-blue);
}
/* ── 3. Apariencia · Light (<html class="light">) ───────────────────────────
   Tokens de Figma (ProSolar Appearance, modo Light). Texto primario sobre canvas: 17:1. */
html.light{
  --bg:var(--pana-canvas); --bg-elev:var(--pana-surface);
  --surface:var(--pana-surface);
  --surface2:var(--pana-surface-subtle);
  --surface3:color-mix(in srgb,var(--pana-surface-subtle) 70%,var(--pana-border));
  --border:var(--pana-border);
  --border2:color-mix(in srgb,var(--pana-border) 75%,var(--pana-text-muted));
  --glass-border:color-mix(in srgb,var(--pana-navy) 10%,transparent);
  --text:var(--pana-text);
  --text2:color-mix(in srgb,var(--pana-text) 82%,var(--pana-text-muted));
  --muted:var(--pana-text-muted);
  --muted2:color-mix(in srgb,var(--pana-text-muted) 80%,var(--pana-surface));
  --accent:var(--pana-blue); --accent-deep:var(--pana-navy); --accent-ink:var(--pana-navy);
  --accent-lo:color-mix(in srgb,var(--pana-blue) 10%,transparent);
  --accent-mid:color-mix(in srgb,var(--pana-blue) 32%,transparent);
  --accent-glow:color-mix(in srgb,var(--pana-blue) 22%,transparent);
  --orange:#ea580c; --red:#dc2626; --blue:#2563eb; --violet:#7c3aed;
  --glass-bg:rgba(255,255,255,.8); --glass-blur:10px;
  --shadow-sm:0 1px 2px color-mix(in srgb,var(--pana-navy) 8%,transparent);
  --shadow-md:0 6px 20px -6px color-mix(in srgb,var(--pana-navy) 16%,transparent);
  --shadow-lg:0 18px 44px -12px color-mix(in srgb,var(--pana-navy) 24%,transparent);
  --ring:0 0 0 2px var(--pana-blue);
  --grad-hero:linear-gradient(135deg,color-mix(in srgb,var(--pana-green) 10%,transparent),color-mix(in srgb,var(--pana-blue) 10%,transparent));
  --pana-focus:var(--pana-blue);
}

/* ── 4. Base ─────────────────────────────────────────────────────────────── */
body{font-family:var(--pana-font);background:var(--bg);color:var(--text)}
code,pre,kbd,.mono,.dt-num,[data-mono]{font-family:var(--pana-mono);font-variant-numeric:tabular-nums}
:where(a,button,[role="button"],input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--pana-focus);outline-offset:2px}

/* ── 14. Adaptadores para clases existentes de la app (server.ts / datatable) ─
   Los ítems del sidebar llevan AMBAS clases ("ls-item pana-nav"), así que estas reglas
   deben ganar a `.ls-item.active` y a `html.light .ls-item.active` (specificity 0,3,1)
   del CSS base de server.ts. Por eso se declaran con `html`/`html.light` delante. */
html{background:var(--bg)}
body{font-family:var(--font-sans)}
html .ls-item,html.light .ls-item{border-radius:var(--radius-md);font-weight:500;border-left:0;margin:1px .5rem;padding:.5rem .7rem;gap:.65rem;color:var(--text2);width:auto}
/* Hover (Figma 191:318 State=Hover): superficie sutil + texto primario. */
html .ls-item:hover,html.light .ls-item:hover{background:var(--pana-surface-subtle);color:var(--pana-text);transform:none;box-shadow:none}
html .ls-item:hover .icon,html.light .ls-item:hover .icon{transform:none}
/* Activo (Figma 01b · Interaction states): baldosa del resaltado, texto en negrita del color legible sobre
   ella (--pana-on-sun) y marca de 4 px. Sin sombra, degradado ni escalado. Un solo activo por pantalla. */
html .ls-item.active,html.light .ls-item.active,
html .pana-nav[aria-current="page"],html.light .pana-nav[aria-current="page"]{background:var(--pana-sun);color:var(--pana-on-sun);font-weight:700;box-shadow:none;border-left-color:transparent}
html .ls-item.active .icon,html.light .ls-item.active .icon{color:var(--pana-on-sun)!important;stroke:currentColor}
html .ls-item.active::before,html.light .ls-item.active::before{display:none}
html .ls-item.active::after,html.light .ls-item.active::after{content:"";margin-left:auto;width:4px;height:20px;border-radius:2px;background:var(--pana-on-sun);box-shadow:none}
html .ls-item.active span[style*="margin-left:auto"]{margin-left:.5rem!important;color:var(--pana-on-sun);opacity:.8}
.ls-section-hdr span{color:var(--muted)}
/* Botón principal: sólido en el color de acción (el base lleva un degradado verde de la v1) */
html .btn-primary,html.light .btn-primary{background:var(--pana-navy);background-image:none;color:var(--pana-on-navy);box-shadow:var(--shadow-sm)}
html .btn-primary:hover,html.light .btn-primary:hover{background:color-mix(in srgb,var(--pana-navy) 86%,#ffffff);background-image:none;box-shadow:var(--shadow-md);filter:none}
/* DataTable: página activa con texto claro sobre el acento; filas seleccionadas en tinte */
.dt-pg.active{color:#fff;box-shadow:none}
.dt-cm-btn.pri,.dt-cm-btn.pri:hover{color:#fff}
/* Botón de tema y foco */
.pw-eye:focus-visible{outline-color:var(--pana-focus)}
/* Teléfono: la marca Pana (logo + divisor + hoja + nombre) y los controles no caben en 375 px;
   queda la hoja con el nombre, y salen el wordmark, la versión y la sede. */
@media (max-width:600px){
  .nav-brand .nav-logo,.nav-brand-div,.nav-ver,.nav-socio-tag{display:none!important}
  .nav-admin span{display:none}
  .nav-brand-pana{font-size:.92rem!important}
}

/* ── 15. Figma 01b/02 en toda la app (1-oct) ─────────────────────────────────
   Foco: azul en claro, verde en oscuro. Pasos de las calculadoras = "amanecer": verde hecho,
   resaltado en curso, contorno pendiente. Estados vacíos con el triángulo cinético en los márgenes. */
html:not(.light){--pana-focus:var(--pana-green)}
html .wz-dot.done .wz-dot-n{background:var(--pana-success);border-color:var(--pana-success);color:#fff}
html .wz-conn.done{background:var(--pana-success)}
html .wz-dot.active .wz-dot-n{background:var(--pana-sun);border-color:var(--pana-sun);color:var(--pana-on-sun);box-shadow:0 0 0 4px color-mix(in srgb,var(--pana-sun) 22%,transparent)}
html .mk-blank,html .wz-empty{position:relative;overflow:hidden}
html .mk-blank::before,html .mk-blank::after{content:"";position:absolute;pointer-events:none;clip-path:polygon(50% 4%,96% 90%,4% 90%)}
html .mk-blank::before{width:56px;height:56px;left:9%;top:18px;background:var(--pana-sun);opacity:var(--pana-motif-m);transform:rotate(14deg)}
html .mk-blank::after{width:34px;height:34px;right:11%;bottom:16px;background:var(--pana-blue);opacity:var(--pana-motif-s);transform:rotate(-24deg)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}