/* Pana kit: tokens de marca (--pana-*) y clases de componentes (.pana-*).
   Se carga SIEMPRE, también con el diseño clásico (v1): son nombres nuevos que no pisan nada.
   El re-skin (colores, fuentes, radios, sidebar) vive en pana-theme.css y solo se carga en Pana (v2). */

/* ── 1. Marca y semánticos (iguales en ambos modos) ───────────────────────── */
:root{
  --pana-green:#50e358; --pana-blue:#009fdf; --pana-navy:#202b74; --pana-mint:#a2eaa3;
  --pana-sun:#f2cd00; --pana-white:#ffffff;
  --pana-gradient:linear-gradient(135deg,#50e358 0%,#009fdf 100%);
  --pana-success:#15a85a; --pana-success-bg:#dcfce7;
  --pana-warning:#f97316; --pana-warning-bg:#ffedd5;
  --pana-error:#ef4444;   --pana-error-bg:#fee2e2;
  --pana-info:#3b82f6;    --pana-info-bg:#dbeafe;

  /* fuentes y foco siguen al diseño activo (pana-theme.css las fija en Pana) */
  --pana-font:var(--font-sans);
  --pana-mono:var(--font-mono); --pana-focus:var(--accent);

  --pana-pill:999px;

  /* texto legible sobre los fondos de marca (la paleta de Admin -> App los recalcula si cambia los colores, D-41) */
  --pana-on-navy:var(--pana-white); --pana-on-sun:var(--pana-navy);

  /* sombra de tarjeta de los frames (KPI 150:20717, tarjeta del lanzador 150:20736) */
  --pana-shadow-card:0 10px 30px color-mix(in srgb,var(--pana-navy) 7%,transparent);

  /* motif (Motif/Kinetic Triangle): L 118 · M 56 · S 34 */
  --pana-motif-l:.14; --pana-motif-m:.20; --pana-motif-s:.12;
}

/* ── 2. Apariencia (Figma, colección "ProSolar Appearance": modo Light 37:0 · Dark 37:1) ─────
   Dark = <html> sin clase; Light = html.light (D-07). pana-theme.css mapea los tokens de la app
   (--bg, --surface, --border, --text…) a estos; ningún otro archivo define hex de Pana (D-30).
   Cada línea lleva la variable de Figma de la que sale (tabla en docs/design/PANA_THEME.md). */
:root{
  --pana-canvas:#0c1020;          /* color/canvas */
  --pana-surface:#171d3f;         /* color/surface */
  --pana-surface-subtle:#1d2550;  /* color/surface-subtle */
  --pana-border:#2b3466;          /* color/border */
  --pana-text:#eef1fb;            /* color/text-primary */
  --pana-text-muted:#8e98bf;      /* color/text-muted */
  --pana-on-blue:var(--pana-canvas); /* iniciales sobre brand-blue (195:6371): text-primary daría 2.9:1 en Dark */
  --pana-emphasis:var(--pana-text);  /* D-56: cifra enfasis — texto en Dark, navy en Light */
}
html.light{
  --pana-canvas:#f4f6fb;          /* color/canvas */
  --pana-surface:#ffffff;         /* color/surface */
  --pana-surface-subtle:#eef1f8;  /* color/surface-subtle */
  --pana-border:#d7deed;          /* color/border */
  --pana-emphasis:var(--pana-navy);  /* D-56: cifra enfasis — navy en Light */
  --pana-text:#101426;            /* color/text-primary */
  --pana-text-muted:#5f6886;      /* color/text-muted (D-33: antes #6a7392, bajo AA) */
  --pana-on-blue:var(--pana-text); /* = color/text-primary del frame 195:6371 */
}


/* Escala tipográfica = estilos Figma "Solar Calc/*" */
.pana-display{font:700 30px/1.5 var(--pana-font)} .pana-h1{font:700 24px/1.5 var(--pana-font)}
.pana-h2{font:700 20px/1.5 var(--pana-font)}      .pana-h3{font:600 18px/1.5 var(--pana-font)}
.pana-h4{font:600 16px/1.5 var(--pana-font)}      .pana-title{font:700 14px/1.5 var(--pana-font)}
.pana-body{font:400 12px/1.5 var(--pana-font)}    .pana-body-sm{font:400 11px/1.5 var(--pana-font)}
.pana-caption{font:600 10px/1.5 var(--pana-font);letter-spacing:.04em;text-transform:uppercase}
.pana-micro{font:600 9px/1.5 var(--pana-font)}
.pana-eyebrow{display:flex;align-items:center;gap:10px;color:var(--pana-success)}
.pana-eyebrow::before{content:"";width:36px;height:4px;border-radius:2px;background:var(--pana-sun)}

/* ── 5. Navigation/Sidebar item ──────────────────────────────────────────── */
.pana-nav{display:flex;align-items:center;gap:10px;width:100%;height:40px;padding:10px 12px;border:0;border-radius:var(--radius-md);
  background:none;color:var(--muted);font:400 12px var(--pana-font);cursor:pointer;text-align:left;text-decoration:none;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.pana-nav svg{width:20px;height:20px;flex:0 0 20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pana-nav span{flex:1}
/* Figma 191:318: Hover = surface-subtle · Active = baldosa sun, icono y texto navy en negrita, marcador 4×20 navy */
.pana-nav:hover{background:var(--pana-surface-subtle);color:var(--pana-text)}
.pana-nav[aria-current="page"],.pana-nav.is-active{background:var(--pana-sun);color:var(--pana-on-sun);font-weight:700}
.pana-nav[aria-current="page"]::after,.pana-nav.is-active::after{content:"";width:4px;height:20px;border-radius:2px;background:var(--pana-on-sun)}
.pana-nav.is-rail{width:40px;height:40px;padding:0;justify-content:center;border-radius:10px}
.pana-nav.is-rail span,.pana-nav.is-rail::after{display:none}

/* ── 6. Route stepper (sustituye la tira "1 → 2 → 3") ───────────────────── */
.pana-stepper{padding:11px 18px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.pana-stepper ol{list-style:none;margin:0;padding:0;display:flex;gap:8px}
.pana-stepper li{flex:1;display:flex;flex-direction:column;gap:6px;font:400 10px var(--pana-font);color:var(--muted)}
.pana-stepper .bar{height:4px;border-radius:var(--pana-pill);background:var(--border)}
.pana-stepper .is-done .bar{background:var(--pana-success)} .pana-stepper .is-done{color:var(--text)}
.pana-stepper .is-current .bar{background:var(--pana-sun)} .pana-stepper .is-current{color:var(--text);font-weight:600}
.pana-stepper .is-current label::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pana-sun);margin-right:6px;vertical-align:middle}
@media (max-width:720px){.pana-stepper ol{flex-wrap:wrap}.pana-stepper li{flex:0 0 calc(33.333% - 6px)}}

/* ── 7. Badge/* (estado) ─────────────────────────────────────────────────── */
.pana-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:var(--pana-pill);border:1px solid currentColor;font:600 9px var(--pana-font);white-space:nowrap}
.pana-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pana-badge.success{color:var(--pana-success)} .pana-badge.warning{color:var(--pana-warning)}
.pana-badge.error{color:var(--pana-error)}     .pana-badge.info{color:var(--pana-info)} .pana-badge.neutral{color:var(--muted)}
/* Badge/Status (22:11982): fondo surface, borde 1.5 px y punto en el tono, texto --text (tablas y encabezados V2). */
.pana-badge.status{gap:6px;padding:6px 10px;border:1.5px solid var(--tone);background:var(--surface);color:var(--text);font:700 10px var(--pana-font)}
.pana-badge.status::before{background:var(--tone)}
.pana-badge.status.success{--tone:var(--pana-success)} .pana-badge.status.warning{--tone:var(--pana-warning)} .pana-badge.status.error{--tone:var(--pana-error)}
.pana-badge.status.info{--tone:var(--pana-info)} .pana-badge.status.neutral{--tone:var(--muted)}
/* chip seleccionable (route chooser) */
.pana-chip{display:inline-flex;padding:6px 12px;border-radius:var(--pana-pill);border:1px solid var(--border);background:var(--surface2);color:var(--text);font:600 11px var(--pana-font);cursor:pointer}
.pana-chip.is-selected{background:color-mix(in srgb,var(--pana-sun) 14%,var(--surface));border-color:var(--pana-sun);color:var(--text);font-weight:700}

/* ── 8. Tarjetas / KPI ───────────────────────────────────────────────────── */
.pana-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);position:relative;overflow:hidden}
/* KPI card (Figma "Summary metrics" 150:20716 / 224:6170): superficie lisa, borde semántico sólido y sombra suave */
.pana-kpi{display:flex;flex-direction:column;gap:7px;padding:14px;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border);box-shadow:var(--pana-shadow-card)}
.pana-kpi small{font:700 10px var(--pana-font);color:var(--muted);text-transform:uppercase}
.pana-kpi b{display:block;font:700 12px var(--pana-mono);font-variant-numeric:tabular-nums;color:var(--text)}
.pana-kpi em{font:700 10px var(--pana-font);font-style:normal;color:var(--text)}
.pana-kpi.blue{border-color:var(--pana-blue)}
.pana-kpi.success{border-color:var(--pana-success)}
.pana-kpi.warning{border-color:var(--pana-warning)}
.pana-kpi.lg b{font-size:2rem;line-height:1.05} /* D-49 */
.pana-kpi.hero b{font-size:64px;line-height:1;letter-spacing:-.02em} /* D-53 */

/* Brand/Vendor tile (Figma 221:6396): baldosa blanca 96×56 en ambos modos, el único lugar con el color del vendor (D-13) */
.pana-vendor-tile{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:96px;height:56px;padding:8px 10px;background:var(--pana-white);border:1px solid var(--pana-border);border-radius:var(--radius-lg);overflow:hidden}
.pana-vendor-tile img{display:block;max-width:100%;max-height:100%;object-fit:contain}

/* ── 9. Progress/Segmented Solar Arc (el SVG lo genera lib/pana/ui.ts) ───── */
.pana-arc{display:block;width:100%;max-width:560px;margin:0 auto}
.pana-arc .seg-done{fill:var(--pana-success);stroke:var(--pana-success)}
.pana-arc .seg-current{fill:var(--pana-sun);stroke:var(--pana-sun)}
.pana-arc .seg-upcoming{fill:none;stroke:var(--border)}
.pana-arc .horizon{stroke:var(--border)}
.pana-arc .sun{fill:var(--pana-sun);stroke:#fff;stroke-width:2}
.pana-arc .pct{font:700 38px var(--pana-mono);fill:var(--text)}
.pana-arc .ms{font:600 11px var(--pana-font);fill:var(--muted)}
.pana-milestones{display:flex;justify-content:space-between;gap:8px;padding:0 24px 16px}
.pana-milestones .ms{display:flex;flex-direction:column;align-items:center;gap:6px;font:400 10px var(--pana-font);text-align:center}
.pana-milestones .ms i{width:22px;height:22px;border-radius:6px;border:1px solid var(--border)}
.pana-milestones .is-done i{background:var(--pana-success);border-color:var(--pana-success)}
.pana-milestones .is-current i{background:var(--pana-sun);border-color:var(--pana-sun)} .pana-milestones .is-current{font-weight:700}
@media (max-width:720px){.pana-milestones{flex-wrap:wrap}.pana-milestones .ms{flex:0 0 calc(33.333% - 6px)}}

/* ── 10. Tu equipo ProSolar (portal cliente) ─────────────────────────────── */
.pana-team{padding:12px 14px;border-color:var(--pana-green)}
.pana-team h3{margin:4px 0 8px;font:700 14px var(--pana-font)}
.pana-member{display:flex;align-items:center;gap:10px;width:100%;padding:4px;border:0;background:none;color:inherit;border-radius:var(--radius-md);cursor:pointer;text-align:left;font:inherit}
.pana-member:hover{background:var(--surface2)}
.pana-avatar{width:28px;height:28px;border-radius:50%;background:var(--pana-blue);display:grid;place-items:center;color:#fff;font:700 10px var(--pana-font);border:2px solid transparent;overflow:hidden;flex:0 0 auto}
.pana-avatar img{width:100%;height:100%;object-fit:cover}
.pana-member .cp{flex:1;min-width:0} .pana-member .cp b{display:block;font:600 12px var(--pana-font)} .pana-member .cp small{font:400 10px var(--pana-font);color:var(--muted)}

/* ── 11. Modal miembro + drawer cuenta ───────────────────────────────────── */
.pana-scrim{position:fixed;inset:0;background:rgba(32,43,116,.55);display:none;place-items:center;padding:16px;z-index:200}
.pana-scrim.is-open{display:grid}
.pana-modal{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.pana-modal .portrait{height:240px;background:var(--surface2);display:grid;place-items:center;font:700 30px var(--pana-font);color:var(--pana-navy);position:relative;background-size:cover;background-position:50% 35%}
.pana-modal .portrait::after{content:"";position:absolute;inset:auto 0 0 0;height:120px;background:linear-gradient(to top,rgba(16,20,38,.7),transparent)}
.pana-modal .close{position:absolute;right:16px;top:16px;z-index:1;width:32px;height:32px;border-radius:var(--radius-md);border:1px solid var(--border);background:#fff;color:#575756;font-size:18px;cursor:pointer}
.pana-modal .body{padding:20px 24px 24px;display:flex;flex-direction:column;gap:14px}
.pana-modal h2{margin:0;font:700 20px var(--pana-font)} .pana-modal .role{font:600 12px var(--pana-font);color:var(--muted)} .pana-modal .team{font:600 10px var(--pana-font);color:var(--accent-ink,var(--pana-blue))}
.pana-contact{background:var(--surface2);border-radius:var(--radius-lg);padding:14px;display:flex;flex-direction:column;gap:8px}
.pana-contact small{display:block;font:600 9px var(--pana-font);color:var(--muted)} .pana-contact b{font:600 12px var(--pana-font)}
.pana-actions{display:flex;gap:10px} .pana-actions a,.pana-actions button{flex:1;text-align:center;padding:10px 16px;border-radius:var(--radius-md);font:700 12px var(--pana-font);text-decoration:none;cursor:pointer;border:1px solid transparent}
.pana-btn-primary{background:var(--pana-navy);color:var(--pana-on-navy)} .pana-btn-primary:hover{opacity:.92}
/* Blanco sobre --pana-error puro da 3.8:1; mezclado con navy llega a 4.97:1 (AA para 12 px), en Light y en Dark. */
.pana-btn-danger{background:color-mix(in srgb,var(--pana-error) 80%,var(--pana-navy));color:var(--pana-white)} .pana-btn-danger:hover{opacity:.92}
.pana-actions button:disabled,.pana-actions button:disabled:hover{opacity:.45;cursor:not-allowed}
.pana-btn-secondary{border-color:var(--border)!important;color:var(--text);background:var(--surface)} .pana-btn-secondary:hover{border-color:var(--pana-blue)!important;color:var(--accent-ink,var(--pana-blue))}
/* "Ver como" (5-oct): aviso fijo en el header mientras un admin previsualiza otro rol (solo lectura); un clic vuelve
   a su rol. En teléfono queda el ojo solo (el rol va en title / aria-label). */
.pana-viewas{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--pana-pill);border:1.5px solid var(--pana-warning);background:color-mix(in srgb,var(--pana-warning) 14%,var(--surface));color:var(--text);font:600 11px var(--pana-font);cursor:pointer;white-space:nowrap}
.pana-viewas svg{width:14px;height:14px} .pana-viewas .va-x{color:var(--muted);text-decoration:underline}
.pana-viewas:hover{background:color-mix(in srgb,var(--pana-warning) 14%,var(--surface2))}
.pana-viewas:focus-visible{outline:2px solid var(--pana-focus);outline-offset:2px}
@media (max-width:900px){.pana-viewas .va-l,.pana-viewas .va-x{display:none}}
@media (max-width:600px){.pana-viewas{padding:6px}.pana-viewas b{display:none}}
/* Button/Logout 757:19768 (D-38): cierre de sesión del header, siempre visible. Label (757:19757) desde 1024 px,
   Icon (757:19763) por debajo con el tooltip "Salir" (title). */
.pana-btn-logout{display:inline-flex;align-items:center;gap:6px;padding:8px 12px 8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);font:600 11px var(--pana-font);color:var(--text);cursor:pointer;white-space:nowrap;transition:background .12s}
.pana-btn-logout:hover{background:var(--surface2)} .pana-btn-logout svg{width:16px;height:16px}
@media (max-width:1023px){.pana-btn-logout{padding:8px}.pana-btn-logout span{display:none}}
.pana-drawer{position:fixed;top:0;right:0;bottom:0;width:360px;max-width:100%;background:var(--surface);border-left:1px solid var(--border);padding:24px;overflow:auto;z-index:201;transform:translateX(100%);transition:transform 240ms var(--ease-out)}
.pana-drawer.is-open{transform:none}
@media (max-width:720px){.pana-drawer{top:auto;left:0;width:100%;height:100dvh;border-radius:16px 16px 0 0;transform:translateY(100%)}.pana-drawer.is-open{transform:none}}

/* ── 12. Motif/Kinetic Triangle ──────────────────────────────────────────── */
.pana-motif{position:absolute;pointer-events:none}
.pana-motif.l{width:118px;height:118px;opacity:var(--pana-motif-l)} .pana-motif.m{width:56px;height:56px;opacity:var(--pana-motif-m)} .pana-motif.s{width:34px;height:34px;opacity:var(--pana-motif-s)}
.pana-motif.blue polygon{fill:var(--pana-blue)} .pana-motif.sun polygon{fill:var(--pana-sun)}

/* ── 13. Login story overlay (fijo, no cambia con el tema) ───────────────── */
.pana-story-card{background:var(--pana-navy);box-shadow:inset 0 0 0 999px rgba(0,0,0,.45);border-radius:var(--radius-lg);padding:20px;color:#fff}
.pana-story-card .campaign{font:700 10px var(--pana-font);color:var(--pana-sun);letter-spacing:.04em}


/* (14–23 son del kit del issue 19, D-37.) ── 24. Choice card: una opción de un grupo de radios (Admin → App · Diseño). Seleccionada = el estado de la
   tarjeta de pago V2 (.pv2 .sig-pay.on): borde 2 px sun y marca ✓ en sun. El <input type="radio"> va dentro,
   invisible pero enfocable: flechas y Tab nativos. ── */
.pana-choice{position:relative;display:block;flex:1 1 200px;padding:12px 40px 12px 14px;border:1px solid var(--border2);border-radius:var(--radius-md);background:var(--surface2);color:var(--text);cursor:pointer;transition:background var(--dur) var(--ease)}
.pana-choice input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pana-choice:hover{background:var(--surface3)}
.pana-choice:has(input:focus-visible){outline:2px solid var(--pana-focus);outline-offset:2px}
.pana-choice:has(input:checked){border:2px solid var(--pana-sun);background:var(--surface);padding:11px 39px 11px 13px}
.pana-choice:has(input:checked):hover{background:var(--surface2)}
.pana-choice:has(input:checked)::after{content:"✓";position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:var(--pana-pill);background:var(--pana-sun);color:var(--pana-on-sun);font:700 12px/20px var(--pana-font);text-align:center}
.pana-choice:has(input:disabled){cursor:default;opacity:.7}
.pana-choice b{display:block;font:700 14px/1.4 var(--pana-font)}
.pana-choice small{display:block;margin-top:4px;font:400 12px/1.45 var(--pana-font);color:var(--muted)}

/* ── 25. Paletas de Admin → App (D-41). No las pinta ningún selector: server.ts las lee al arrancar
   (lib/pana/palette.ts) para los botones de "Colores de Pana". Principal y acción por paleta; el resaltado
   es siempre --pana-sun (D-04/D-05) y el tinte, el principal. La de Figma son --pana-blue / --pana-navy.
   La acción es el navy de marca salvo en Verde energía, cuyo verde profundo evita navy sobre verde. ── */
:root{
  --pana-pal-prosolar-accent:#0b72b5; --pana-pal-prosolar-deep:var(--pana-navy);
  --pana-pal-verde-accent:#15803d;    --pana-pal-verde-deep:#14352a;
  --pana-pal-calido-accent:#b45309;   --pana-pal-calido-deep:var(--pana-navy);
}
/* Espacios de Pana (14-oct): "Workspace | Academia Solar" en el header (V1 y V2). Pista en surface2; la pestaña activa
   con el lenguaje de estado (sol + navy), el hover sube a surface. Bajo 1100 px quedan solo los iconos (el nombre sigue para lectores de pantalla);
   en teléfono se esconden y Academia entra por el menú lateral (.ls-academia, que en escritorio no se ve). */
.pana-spaces{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--pana-pill);background:var(--surface2);border:1px solid var(--border);flex:none}
.pana-space{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:var(--pana-pill);font:600 13px var(--pana-font);color:var(--muted);text-decoration:none;white-space:nowrap;transition:background 120ms var(--ease,ease),color 120ms var(--ease,ease)}
.pana-space svg{width:16px;height:16px;flex:none}
.pana-space:hover{background:var(--surface);color:var(--text)}
.pana-space[aria-current="page"]{background:var(--pana-sun);color:var(--pana-on-sun)}
.pana-space:focus-visible{outline:2px solid var(--pana-focus);outline-offset:2px}
.nav-links .pana-spaces{margin-left:12px}
@media (max-width:1100px){.pana-space{padding:6px 9px}.pana-space span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media (max-width:640px){.pana-spaces{display:none}}
@media (min-width:641px){.ls-academia{display:none}}