<!--
  ARCHIVO: index.html
  RUTA: / (raíz del proyecto — reemplaza el index.html actual del repo)
  ÚLTIMA ACTUALIZACIÓN: 1 de octubre de 2026 — v29

  PROPÓSITO: App completa de Quick Solar Solution — landing, login (OTP por correo),
  wizard de dimensionamiento fotovoltaico, guardado de proyectos, planes Free/Uso
  único/Pro (Paddle), i18n ES/EN, gate de Términos de Servicio, y el Paso 4 (Resultado)
  reconstruido como híbrido de las dos maquetas de referencia del proyecto.

  CAMBIOS DE ESTA VERSIÓN (v29 — 01/10/2026) — SEGURIDAD S0 (ENDURECIMIENTO SIN COSTO):
  · Origen: tarea S0 de la sección S del plan maestro (prioridad fijada por el usuario: primero lo
    que no cuesta nada). Revisión manual del código real: los 14 puntos que asignan innerHTML, los
    manejadores en línea, los atributos con interpolación, los destinos de enlaces y todos los
    lugares donde entra texto de la persona (nombre de proyecto, nombre de aparato, ciudad) o de
    una API externa (la ciudad que devuelve Open-Meteo).
  · Revisado y correcto, sin cambios: el nombre de proyecto en la lista de proyectos y el nombre de
    aparato en su fila YA se escapaban; el mensaje de PSH con la ciudad externa se pinta con
    innerText (texto, no HTML); lo demás que se inserta como HTML son constantes, números
    calculados y textos i18n; los destinos de compra salen de encodeURIComponent sobre
    https://www.amazon.com/; los 3 enlaces con target blank ya llevan rel noopener noreferrer.
  · HALLAZGO S0-1 (real, severidad baja, reproducido en un navegador antes de corregir): los
    aparatos de un proyecto GUARDADO se cargaban de la base tal cual y sus números (potencia,
    horas, cantidad) se pintaban sin tratar: un registro adulterado, escrito directo contra la API
    de Supabase, podía ejecutar código al abrir ese proyecto. Solo contra la propia cuenta (RLS
    aísla a cada persona), por eso baja. Causa raíz: lo que vuelve de la base se trataba como
    confiable. Corrección en el punto de entrada: `sanitizeAppliance()` (texto como texto de hasta
    80 caracteres, números acotados, solo los 5 campos que existen), `loadProjectData()` ignora
    datos que no son un objeto y limita a 500 aparatos, `escapeHtml()` ya no falla con null o con
    números, y el identificador de la lista de proyectos también se escapa.
  · No se tocó: ninguna fórmula, el diagrama (v28), el inspector, los planes, Paddle ni Supabase;
    un proyecto guardado con datos normales se carga exactamente igual que antes (probado).
  · Probado con el código REAL de este archivo: 329 verificaciones en Node sin fallos (el diagrama
    horizontal y su regresión de v28, el listener de resize, el archivo completo y 29 nuevas de S0:
    escapeHtml con entradas hostiles, sanitizeAppliance con datos normales idénticos y 13.824
    combinaciones hostiles que siempre dan tipos y rangos válidos). En un Chromium real, cargando la
    página de verdad y llamando a loadProjectData: v28 ejecutaba el código del registro adulterado (por: hours, power, qty); v29 no ejecuta nada y deja intacta la fila de TV; y un proyecto con datos normales se
    pinta idéntico en v28 y v29 (texto y datos).
  · NO probado: la lista de proyectos (necesita Supabase real; su cambio es solo escapar el
    identificador, verificado en el código) ni la página con las claves reales.

  CAMBIOS DE v28 — 29/09/2026 — DIAGRAMA HORIZONTAL DEL PASO 4 (PC):
  · Origen: tarea 1-ter.7 del plan maestro, ya confirmada por el usuario el 21/09/2026. En PC el
    diagrama eléctrico ocupaba una columna angosta (~340 px, dentro de un tope de 400 px de la
    grilla) al lado de mucho espacio vacío. Se conserva el ORDEN DE LECTURA de siempre
    (paneles → controlador → batería → inversor → cargas, con las mismas fichas de protección
    entre etapas), ahora en una fila de izquierda a derecha — no el "inversor al centro" de la
    propuesta inicial, que el usuario descartó.
  · Nueva `buildConnectionDiagramWide(d)`: dibuja el MISMO diagrama en horizontal (viewBox de
    1080 px de ancho; en modo híbrido suma espacio arriba para la red pública, que baja hacia
    el inversor). Las posiciones salen de una sola tabla (ancho de cada pieza + separación),
    no de coordenadas sueltas. Reutiliza SIN CAMBIOS `panelBox`, `screenBox`, `batteryBox`,
    `loadBox` y `protectionChip`, los mismos textos i18n (ninguna clave nueva), las mismas
    clases CSS de flujo/capas (`pv-flow-dc`, `pv-flow-dc-neg`, `pv-flow-ac`, `pv-flow-ground`,
    `pv-flow-grid`) y los mismos `inspectDiagramComponent(...)`: el interruptor de capas
    (Energía/Herramientas/Tierra), el inspector y los cálculos siguen igual. La tierra corre
    como un peine horizontal bajo la fila (paneles, batería e inversor → barra común →
    varilla), saliendo por el costado de cada caja para no cruzar sus rótulos.
  · Cuándo se usa: `renderDiagram()` dibuja en horizontal solo si la vista es "Diagrama
    Eléctrico" Y la pantalla es de PC (≥ 1024 px, el mismo corte `lg` que ya usa toda la app).
    En celular / tablet vertical el diagrama vertical de siempre queda EXACTAMENTE igual (mismo
    SVG que en v27, comprobado), y la "Maqueta 3D ISO" no cambia en ningún tamaño. Al cruzar
    ese ancho (girar la tablet, achicar la ventana) se vuelve a dibujar solo, con un retardo de
    200 ms (debounce) y SOLO si de verdad cambió el trazado que corresponde (en celular el evento
    resize también salta al esconderse la barra del navegador al hacer scroll: redibujar ahí
    podría perder un toque); el componente ya elegido en el inspector se conserva (el
    inspector no depende del dibujo).
  · Layout de la sección: con el diagrama horizontal, el inspector / asistente pasa DEBAJO del
    diagrama (ancho completo, con tope de 820 px y centrado) en vez de a su derecha, porque una
    fila ancha no cabe en la columna de 400 px. Lo hace una clase (`diagram-wide`) que
    `renderDiagram()` pone o quita en la grilla (id nuevo `diagramGrid`), igual que el
    `step4-wide` de v19. Con la Maqueta 3D ISO y en celular se conserva el layout de antes.
  · No se tocó: ninguna fórmula del motor de cálculo, `getComponentInfo`, el inspector, la
    Instalación Guiada, los planes, Paddle ni Supabase. Tampoco se usan todavía los campos extra
    de Clima Global (temperatura máxima, viento, inclinación recomendada): decisión del usuario
    del 29/09/2026 — quedan anotados en el backlog para procesarlos más adelante. Sin cambios:
    el diagrama sigue dibujando un solo controlador, igual que en v27.
  · Code review interno (paso nuevo de la metodología, pedido por el usuario el 29/09/2026), hecho
    sobre este mismo código antes de darlo por cerrado. HALLAZGO 1 (real, corregido): el listener
    de resize redibujaba el diagrama en CADA evento resize, y en celular ese evento salta al
    esconderse o mostrarse la barra del navegador mientras se hace scroll: el SVG se habría
    reemplazado en pleno gesto (posible toque perdido, animación de flujo reiniciada). Ahora solo
    redibuja si cambió el trazado que corresponde. Revisado y sin hallazgos: la función nueva solo
    interpola números y textos i18n que calcula la propia app (ningún texto libre del usuario ni de
    una API externa entra al SVG, mismo criterio que el vertical); ningún eval ni new Function en
    los bloques de script; ningún nombre nuevo choca con uno existente; el estado nuevo se declara
    antes de usarse (sin riesgo de orden de carga).
  · Probado en Node ejecutando el código REAL de este archivo (funciones extraídas tal cual, no
    copias): 284 verificaciones sin fallos. El diagrama horizontal en ES y EN con 4 casos (con y
    sin red pública; valores chicos y muy cargados: 125 cargas, 1000 A, 35 mm²): sin
    undefined/NaN, orden de lectura, piezas centradas y a igual separación, cajas sin
    superponerse ni salirse del viewBox, cada flecha uniendo justo el borde de una pieza con el
    de la siguiente sin cruzar cajas, colores de flujo por tramo, tierra (3 ramas, barra común y
    varilla) sin cruzar cajas ni rótulos, textos que caben en su caja, red pública centrada sobre
    el inversor, y los mismos textos, componentes y líneas de flujo que el vertical. El vertical
    produce el MISMO SVG que en v27 (8 casos ES/EN) y 14 funciones quedaron idénticas (cajas,
    fichas, ISO, inspector, capas, selección de calibres). `renderDiagram` en 7 anchos de
    pantalla (320 a 1920 px), Maqueta 3D ISO, ausencia de parámetros y cambio de ancho en vivo.
    Resize: 50 eventos seguidos → un solo redibujo a los 200 ms al cruzar los 1024 px; con el
    ancho constante (celular, barra del navegador) → ningún redibujo. Sintaxis de los 3
    bloques de script propios sin errores; llaves CSS 135/135 (eran 133/133: +2 reglas nuevas),
    etiquetas div 152/152 sin cambio; el diff contra v27 toca exactamente 6 zonas.
  · Revisado a ojo en un Chromium sin pantalla, con el CSS real del diagrama y el SVG real
    generado (ES y EN, capa Energía y capa Tierra, con y sin red pública), a 918 px y a 1046 px
    de ancho disponible (estimado para pantallas de 1024 y de 1280 px): cajas ordenadas, textos
    dentro de sus cajas, tierra sin cruzar rótulos. Aun a 918 px (escala 0,85) el texto más
    chico (rótulos de las fichas de protección) queda pequeño pero legible.
  · NO probado: la página completa en un navegador real (aquí no hay salida a internet, así que
    no carga Tailwind ni la tipografía Inter): el inspector debajo del diagrama, el tema oscuro
    y el aspecto en tu pantalla de PC hay que mirarlos en vivo. Si algún texto queda chico cerca
    de 1024 px o las cajas se ven sueltas, son ajustes de 1-2 números en esa función.

  CAMBIOS DE v27 — 26/09/2026 — PSH REAL VÍA CLIMA GLOBAL:
  · Origen: propuesta técnica ya elaborada (INTEGRACION-CLIMA-GLOBAL.md; ver plan maestro,
    1-sexies) para usar la otra app del mismo autor, Clima Global (ya en producción), como
    fuente de PSH real por ubicación — evita depender de NASA POWER (investigado en v26, sin
    CORS confirmado) y resuelve el problema de latitud/longitud que esa vía tenía abierto. El
    usuario eligió esta integración como siguiente paso, antes del diagrama horizontal del
    Paso 4.
  · Nuevo botón junto al campo "Ciudad" del Paso 1 (`#btnAutoPSH`): al tocarlo, geocodifica el
    texto de ese campo con la API pública de Open-Meteo (gratis, sin key; admite fetch directo
    desde el navegador — CORS abierto) y, con esas coordenadas, le pide a Clima Global
    (`CLIMA_GLOBAL_API`, endpoint propio del autor, CORS abierto, cachea 7 días) el HSP
    histórico mes a mes. Se usa el MES MÁS DESFAVORABLE (`worst_month.peak_sun_hours`), no el
    promedio anual — es justo lo que la nota del propio Paso 1 ya le pedía al usuario que
    considerara a mano. El resultado precarga `#pshManual` (y limpia `#pshSelect`, para que no
    quede un preset viejo mostrado junto al valor real).
  · Es un agregado, no un reemplazo: el selector de 4 zonas y el campo manual siguen
    funcionando exactamente igual que antes. Si el usuario no escribe ciudad, si Open-Meteo no
    la encuentra, o si Clima Global no responde (caído, sin datos para esa zona, dato
    inválido, sin señal): un mensaje corto bajo el botón lo explica, no se toca ningún campo y
    el wizard sigue sin bloquearse — nada obliga a usar este botón. Todo del lado del cliente:
    sin backend nuevo, sin tabla nueva de Supabase (por lo tanto sin GRANT nuevos; ver el aviso
    de Supabase del 30/10/2026 en el plan maestro, 1-sexies.1) y sin tocar Paddle.
  · Decisiones de detalle que no estaban en la propuesta:
    - El mensaje muestra la ciudad YA GEOCODIFICADA (con país, si viene), no el texto tal cual
      lo tipeó el usuario: hay varias ciudades "Kingston" en el mundo con PSH muy distinto
      (Jamaica, Ontario, UK), y mostrar cuál se usó evita confiar en la equivocada.
    - Clima Global devuelve el mes en español; en la interfaz en inglés se traduce
      (`monthLabel`) para no mezclar idiomas en la misma frase, y si el usuario cambia ES/EN
      después de calcular, el mensaje se vuelve a dibujar (`applyLanguage` llama a
      `renderAutoPshStatus`).
    - Tiempo límite de 10 s (geocodificación) y 20 s (Clima Global): con señal mala, una
      petición colgada dejaría "Consultando…" y el botón deshabilitados para siempre.
    - El dato se valida (número > 0 y ≤ 12 h/día) antes de escribirlo en el campo: un PSH
      imposible por un error del servicio no debe llegar al dimensionado.
    - Un error HTTP de Open-Meteo (p. ej. límite de uso) se avisa como fallo del servicio, no
      como "ciudad no encontrada". El aviso de fallo invita a reintentar.
  · Probado en Node con `fetch` simulado, ejecutando el código REAL de este archivo (extraído
    tal cual, no una copia): éxito con el ejemplo de Kingston/Jamaica de la propuesta (ES y EN),
    cambio de idioma después de calcular, ciudad no encontrada, error HTTP de geocodificación,
    Clima Global caído (502), valores inválidos (0, negativo, > 12, texto, ausente), bordes
    válidos (0,1 y 12), campo vacío, geocodificación sin país, mes desconocido, los 12 meses,
    tiempo límite, error de red, JSON inválido, botón deshabilitado durante la petición y
    paridad de claves ES/EN: 80 verificaciones sin fallos. Sintaxis de los 7 bloques de script
    sin errores; balance de llaves CSS 133/133, de etiquetas div 152/152. No se tocó ninguna
    fórmula del motor de cálculo.
  · NO probado contra el endpoint real: desde el entorno de desarrollo el código no tiene
    salida a internet, así que no se probó `CLIMA_GLOBAL_API` desde un navegador (ni su CORS).
    Al consultarlo por otra vía respondió 502 en dos pruebas (Kingston y Madrid): la app lo
    maneja con el aviso corto, pero conviene abrir la URL en el navegador del celular y, si da
    502, revisar la función en Vercel. También confirmar que ese dominio sea el del deploy
    vigente: si cambió, se corrige SOLO la constante `CLIMA_GLOBAL_API`.
  · Pendiente (fuera de alcance de hoy, sin cambios): el diagrama horizontal del Paso 4 sigue
    dibujando un solo controlador.

  CAMBIOS DE v26 — 24/09/2026 — BUG REAL DE v25 + PULIDO DE LAYOUT:
  · BUG (reportado por el usuario con capturas del celular y el TXT exportado de un proyecto
    real, "Casa123"): el aviso de auto-cambio de voltaje mostraba literalmente "{vFrom}"/
    "{vTo}" sin sustituir en vez de los números. Causa real: `m(key, vars)` sustituía cada
    placeholder con `s.replace('{'+k+'}', valor)`, y en JavaScript `.replace()` con un string
    (no una regex /g) SOLO reemplaza la PRIMERA aparición. El texto de `warn.voltageAuto`
    repite {vFrom} tres veces y {vTo} dos veces (a propósito, para que se lea natural) — así
    que solo la 1ª de cada una se sustituía, dejando el resto como texto literal. Se cambió a
    `s.replaceAll(...)` (reemplaza TODAS las apariciones); se revisó el diccionario ES/EN
    completo y esta fue la ÚNICA entrada con placeholders repetidos, así que ningún otro
    mensaje estaba afectado. Probado en Node con el texto real y las variables del propio caso
    reportado (117,2 A / 24 V → 70,3 A / 48 V): la salida ya no contiene ninguna llave sin
    sustituir.
  · De paso: `APP_VERSION` estaba en 'v22' desde antes del tema oscuro y la regla de voltaje —
    aparecía como "Versión de la app" en cada informe exportado, aunque el motor ya corría v25.
    Corregido a v26 (y de aquí en más se actualiza en cada entrega).
  · LAYOUT — cabecera: en celular, los 3 botones (🌙 tema, 📖 glosario, EN idioma) apretaban el
    título contra el margen y lo hacían envolver en 3 líneas (reportado con capturas). La
    cabecera pasa a columna en celular (logo+título arriba, a todo el ancho; los 3 botones
    abajo, en su propia fila) y vuelve a una sola fila en pantallas md+ como antes.
  · LAYOUT — capas del diagrama: "⚡ Energía"/"🔧 Herramientas" cabían en una fila pero "🌍
    Tierra" quedaba solo, envuelto en su propia fila con espacio vacío al lado (`flex-wrap`
    dejando un huérfano). Se cambió a `grid grid-cols-3` (y `grid-cols-2` en la fila de
    Diagrama Eléctrico/Maqueta 3D, mismo criterio): siempre en una sola fila, columnas
    iguales, sin huérfanos.
  · Investigado (no implementado esta sesión): NASA POWER API para radiación solar real por
    ubicación. No se encontró confirmación explícita de CORS en su documentación ni en
    proyectos de terceros (todos los ejemplos hallados son server-side: Python/R/Ruby, ninguno
    hace fetch() directo desde un navegador) — es plausible que lo permita, al ser una API
    pública sin API key, pero no se pudo confirmar con certeza sin probarla en vivo. Además se
    detectó un requisito no anotado antes: la API pide latitud/longitud, no el texto libre de
    "Ubicación/Ciudad" que hoy tiene el Paso 1 — hace falta geolocalización del navegador o un
    paso de geocodificación (con su propia pregunta de CORS/clave), no es un cambio trivial de
    una sola llamada. Detalle completo y recomendación en el plan maestro (1-quater.5).
  · Sintaxis de los 7 bloques de script sin errores; balance de llaves CSS 133/133, de
    etiquetas div 152/152. No se tocó ninguna fórmula del motor de cálculo.

  CAMBIOS DE v25 — 22/09/2026 — REGLA AUTOMÁTICA DE VOLTAJE/CONTROLADOR:
  · Origen: auditoría externa (Gemini) sobre v22, verificada y anotada en el plan maestro
    (1-quater) — confirmaba un pendiente ya anotado desde el 19/09/2026. El usuario decidió
    que el ajuste sea AUTOMÁTICO, no un botón para aceptar: "quiero que esta aplicación ayude
    a las personas que no tienen conocimiento a instalar sus sistemas correctamente" — pedirle
    a alguien sin conocimiento técnico que acepte un cambio que no sabe evaluar no cumple eso.
  · `decideVoltageAndSize()` (nueva, junto a `computeSizing`): si a menos de 48 V la corriente
    del controlador supera 70 A, recalcula automáticamente a 48 V (misma potencia, mitad de
    corriente) y sincroniza el selector del Paso 3 para que quede consistente con el informe.
    Si NI SIQUIERA a 48 V un solo controlador comercial realista (~80 A) alcanza, en vez de
    devolver un número que nadie vende, informa cuántos controladores en paralelo hacen falta
    y de qué corriente cada uno (mismo criterio si el usuario ya elegía 48 V de entrada).
  · Dos avisos nuevos reemplazan al viejo `warn.voltage48` (que solo sugería, sin actuar):
    uno informativo cuando el auto-cambio resuelve el problema (con las cifras "antes/después"
    para quien ya tenga equipo del voltaje original), y uno de advertencia cuando hace falta
    repartir en varios controladores.
  · `computeSizing` es una función pura (sin DOM ni estado global) — probarla dos veces con
    distinto voltaje no tiene costo real ni efectos secundarios; por eso la solución es "probar
    y comparar" en vez de duplicar fórmulas.
  · Probado en Node contra el ejemplo real de la auditoría (7.380 Wh/día, PSH 4,3, elegido
    24 V): antes 140,6 A y cable 400 MCM; ahora auto-cambia a 48 V, 70,3 A, cable 1/0 AWG. Un
    caso de carga normal (600 Wh/día) confirma que no se activa nada. Un caso extremo (20.000
    Wh/día) confirma el aviso de reparto en 3 controladores de ~54,7 A. Sintaxis de los 7
    bloques de script sin errores; balance de llaves CSS 133/133, de etiquetas div 150/150. NO se
    tocó ninguna otra fórmula del motor de cálculo.
  · Pendiente para más adelante, fuera de alcance de hoy: el diagrama del Paso 4 sigue
    dibujando UN controlador — cuando hacen falta varios, el aviso de texto lo explica con
    números reales, pero el dibujo todavía no se redibuja con N cajas de controlador.

  CAMBIOS DE v24 — 22/09/2026 — TEMA OSCURO REAL:
  · Se quita el forzado `color-scheme: only light`. En su lugar, un script inline al principio
    del <head> decide el tema ANTES de pintar (preferencia guardada > prefers-color-scheme del
    sistema > claro por defecto), evitando el parpadeo del tema equivocado.
  · Botón 🌙/☀️ nuevo en la cabecera (junto al glosario y el idioma): alterna la clase `dark` en
    `<html>`, persiste la elección en localStorage (`qss_theme`) y no depende de recalcular nada.
  · Paleta oscura real con contraste verificado (script Node ad-hoc, no incluido en el archivo):
    texto principal/secundario/muted ≥ 4.5:1, texto discreto (400)/placeholder ≈ 4:1 (mismo
    criterio que el propio tema claro ya usa para esos tonos), bordes con la misma sutileza
    relativa que ya tienen hoy en tema claro (ahí tampoco llegan a 3:1: es el mismo lenguaje
    visual de bordes suaves + sombra, no un descuido nuevo).
  · Técnica: en vez de agregar `dark:` de Tailwind elemento por elemento (alto riesgo de
    regresión en un archivo de este tamaño), se reutiliza el mismo patrón que ya usa el tema
    claro — repintar el SIGNIFICADO de las clases de Tailwind ya usadas, con el selector
    `html.dark` — el mismo espíritu que `body .text-slate-700{...}` de v21.
  · Diagrama SVG (el que se veía roto en Samsung Internet): las etiquetas de título/subtítulo
    de paneles, batería y la ficha de protección ahora usan `fill="var(--pv-label-title/sub)"` y
    su halo `var(--pv-label-halo)`, así que cambian solas con el tema sin volver a dibujar el
    SVG. Los cuerpos ya saturados (panel azul marino, batería verde, chips de protección,
    botones de color sólido) NO se tocaron a propósito: ya se leen bien en cualquier fondo.
  · Probado en Node: sintaxis de los 7 bloques de script sin errores; `panelBox`/`batteryBox`/
    `protectionChip` generan el SVG esperado con las variables bien interpoladas; balance de
    llaves del CSS correcto (133/133). NO se tocó ninguna función del motor de cálculo.
  · Pendiente de tu revisión en el celular real (no se puede fotografiar el efecto desde acá):
    hay ~10 clases de acento de baja frecuencia (algún badge rojo/azul/esmeralda puntual) que se
    dejaron sin variante oscura a propósito, por ser colores sólidos que deberían leerse bien
    igual; avisa si alguno se ve mal y se ajusta puntual.

  CAMBIOS DE v23 — 21/09/2026:
  · PSH de los 4 presets del Paso 1 corregidos con datos reales de referencia (antes estaban por
    debajo de los promedios reales de cada zona — ver plan maestro sección 1-ter.1): Nublado/alta
    latitud 1.5→2.8, Templado 3→4.3, Subtropical/Caribe 4→5.0, Desértico 5.5→6.3 h/día. Se agregó
    una nota aclarando que son promedios anuales, no el peor mes del año (recomendable dimensionar
    con el mes más débil si el sistema debe funcionar todo el año sin excepción).
  · Glosario de siglas eléctricas nuevo (📖 en la cabecera, junto al selector de idioma): PSH, DoD,
    MPPT, Voc, Vmp, Isc, AWG/mm², Ah, Wp, RCD, kWh, Voc en frío — con definición, cómo se mide/de
    dónde sale, y para qué se usa en esta app. Junto a los campos PSH, DoD y los del bloque de
    panel/controlador del Paso 3 hay un ícono ⓘ que abre el glosario directo en ese término.
  · BUG CORREGIDO: el único ícono de ayuda que existía (el "?" del título del Paso 1) llamaba a una
    función `t(key)` que ignoraba `key` y siempre devolvía el mismo texto fijo, sin importar qué se
    tocara. Se quitó ese ícono roto y se reemplazó por el bloque de ayuda nuevo de cada paso (ver
    debajo), que sí es específico.
  · Ayuda contextual por paso ("¿Qué se hace aquí?"): los Pasos 1, 2 y 3 tienen ahora un
    desplegable con el objetivo del paso, qué se hace y qué se necesita, sin ocupar espacio hasta
    que se abre.
  · Aclaración 12 V / 24 V / 48 V: desplegable junto al selector de voltaje del sistema explicando
    qué es, por qué importa y una guía de cuándo conviene cada uno.
  · Patrón "Atrás" como etiqueta (el que ya gustó en el Paso 4) extendido a los Pasos 2 y 3: el
    botón grande de "Atrás" se reemplaza por un enlace "← Atrás" arriba, junto al rótulo pequeño
    de la sección — el espacio que antes quedaba vacío arriba de "Volver al inicio" ahora se usa
    para eso. El botón de avanzar queda solo, a todo el ancho.

  CAMBIOS DE v22 — 20/09/2026:
  · BUG CORREGIDO (visto en tus capturas): el inspector de componentes mostraba "undefined A" en
    "Fusible principal" y "Protección DC" y "—" en los cables. Causa: el inspector recibía los
    parámetros del cálculo sin los valores derivados que se agregaron en v21. Ahora esos valores
    se guardan en el mismo objeto que lee el inspector.
  · Tipografía de títulos: se vuelve a Sora (más técnica); se mantiene el resto del diseño.
  · Alineación: todos los campos y selectores miden lo mismo; las etiquetas del bloque de panel
    quedan alineadas; el formulario de "añadir electrodoméstico" es una cuadrícula ordenada;
    los botones de navegación de los pasos 1–3 tienen el mismo alto y ancho en celular.
  · Paso 3: el bloque "Panel, controlador y voltaje AC" ahora explica para qué sirve, qué hacer si
    empiezas de cero, qué hacer cuando ya elegiste los componentes (reemplazar y recalcular) y
    de dónde sacar cada dato.
  · "Asistente 0 a 100" pasa a llamarse "Instalación Guiada", con tips por fase y comprobaciones
    reales con valores de TU informe (fusible, breaker, cables, Voc esperado, voltaje AC).
  · Informe TXT reescrito: ahora incluye proyecto, fecha, ubicación, lista de cargas, todos los
    parámetros de entrada, datos del panel/controlador, arreglo, protecciones, cables con su
    criterio, avisos, fórmulas y constantes usadas, y advertencia de pre-diseño.
  · Guardar/abrir proyecto: ahora se guarda el PSH efectivo (antes, si elegías solo la zona
    climática, al reabrir el proyecto se usaba 4 h/día).

  CAMBIOS DE v21 — 19/09/2026 — COHERENCIA ELÉCTRICA + REDISEÑO VISUAL:
  MOTOR (auditoría del 19/09/2026, hallazgos F1–F6 del plan maestro):
  · F1/F2 corregidos: el breaker DC y el cable "lado paneles" ya NO usan la corriente del lado
    batería. Ahora se calcula el arreglo (paneles totales, strings en serie/paralelo, Voc en
    frío, Isc del arreglo) y de ahí el breaker DC (Isc×1,25×1,25), el fusible por string (si hay
    3 o más strings) y el cable. Nuevos campos en el Paso 3: Wp, Voc, Vmp e Isc del panel y Voc
    máximo del controlador (precargados con valores TÍPICOS de un panel de 450 W y un controlador
    de 150 V; los resultados avisan mientras sigan siendo los típicos).
  · F5 corregido: el calibre de cable ignoraba la distancia (solo miraba la corriente). Ahora es el
    mayor entre lo que soporta el breaker/fusible y la sección mínima por caída de tensión
    (S = 2·L·I·ρ / (3 % · V)). El lado batería se coordina con el fusible principal.
  · F3 corregido: la protección AC usaba 120 V fijos sin decirlo. Nuevo selector "Voltaje AC de
    salida" en el Paso 3 (por defecto 120 V, como antes).
  · F4: aviso cuando la corriente del controlador supera ~70 A en un sistema de menos de 48 V.
  · Aviso de autonomía > 3 días con el tamaño real del banco (caso 8 días = 1875 Ah = 45 kWh).
  · F6 (solo anotado): la autonomía se aplica también en híbrido aunque el rótulo diga "solo aislado".
  VISUAL:
  · Nuevo lenguaje visual: fondo crema, títulos en serif, etiquetas pequeñas espaciadas, tarjetas
    y botones más redondeados, contraste de textos secundarios mejorado.
  · Barra de acciones del Paso 4 rediseñada: "← Atrás" pasa a enlace discreto arriba; "Exportar"
    e "Imprimir" del mismo tamaño en una fila; "Guardar proyecto" como acción principal.
  · Botones de navegación de los pasos 1–3 unificados.

  CAMBIOS DE v20 — 19/09/2026 — PULIDO VISUAL MÓVIL (sin tocar cálculos):
  · Evidencia (capturas del celular): la app no define ningún tema oscuro; el aspecto "oscuro
    y apagado" viene del modo oscuro forzado del navegador del teléfono, que invierte colores
    (fichas 80A/20A ilegibles, logo casi invisible). Se declara `color-scheme: only light`
    para que el navegador no invierta los colores. (Un tema oscuro real, diseñado, queda como
    tarea aparte en el plan maestro.)
  · Logo "Q" ya no se aplasta en pantallas angostas (shrink-0).
  · Se ocultó la barra de scroll horizontal de las pestañas (se veía como una píldora blanca
    debajo de las pestañas; las flechas ‹ › ya avisan que hay más).
  · Botones del Paso 4 en celular: "Guardar proyecto" (acción principal) ocupa todo el ancho
    y va primero; el resto en rejilla. En PC quedan como antes.
  · Diagrama eléctrico: la línea de flujo ya no atraviesa los textos "Paneles solares",
    "Banco de baterías", "DC", "Fus."; se dibuja detrás y los textos llevan halo.
  · Tabla de Materiales: ahora tiene estilo (antes no tenía ningún CSS) y en celular cada fila
    se muestra como tarjeta (componente arriba, especificación abajo).
  · El aviso final del Asistente 0 a 100 ya no es un alert() del navegador: es un aviso dentro
    de la app.
  · Configuración opcional en un archivo aparte `config.js` (ver config.example.js): si existe,
    sus valores reemplazan los "PEGA_AQUI" de este archivo, para no tener que volver a pegar
    las credenciales cada vez que se actualiza index.html. Si no existe, todo funciona igual
    que antes.

  CAMBIOS DE v19 — 19/09/2026 — REDISTRIBUCIÓN DEL PASO 4 (solo layout, sin tocar cálculos):
  · Se ELIMINÓ la tarjeta de resumen fija (sticky): en celular tapaba ~40% de la pantalla y
    "viajaba" encima del contenido; en PC quedaba metida en una columna angosta. Ahora es una
    tarjeta normal, compacta, que se desplaza con la página.
  · En el Paso 4 la página usa TODO el ancho (antes quedaba una columna vacía a la derecha
    porque el resumen lateral se ocultaba pero su espacio no).
  · Pestaña "Diagrama e Instalación": en PC, diagrama a la izquierda e inspector/asistente a la
    derecha, lado a lado (sin tener que bajar); en celular sigue apilado. Mientras no hay un
    componente seleccionado, la columna derecha muestra una guía en vez de un hueco en blanco.
  · Resumen: 4 cifras principales + 4 datos secundarios en cuadrícula ordenada (2x2 en celular,
    4 columnas en PC), en vez de un párrafo corrido.

  CAMBIOS DE v18 — 14/09/2026:
  · 🔴 FIX CRÍTICO (auditoría técnica): la fórmula de paneles dividía por segunda vez la
    eficiencia del panel (Wp ya la incluye), inflando el arreglo requerido ~5x — presente
    desde antes de este proyecto. Ejemplo real auditado: 7.450 Wh/día a PSH 5,5 daba 8.949 Wp
    (y 466A de MPPT); con el fix da 1.790 Wp (93A) — el valor técnicamente correcto.
  · 🔴 FIX: la tabla de calibre de cable no tenía ninguna respuesta real por encima de 55A
    (mostraba "2 AWG o mayor" igual para 56A que para 466A) — se extendió con calibres reales
    hasta ~230A, y de ahí en adelante avisa que hace falta dividir en paralelo.
  · 🔴 FIX: el fusible principal de batería solo se dimensionaba con la corriente de descarga
    del inversor, ignorando que por ese mismo punto también entra la corriente de CARGA del
    MPPT — ahora se dimensiona con la mayor de las dos corrientes reales.
  · 🔴 FIX: el breaker DC, el fusible de batería y el breaker AC, cuando la corriente
    necesaria superaba toda su tabla de valores estándar, devolvían el valor más alto de la
    tabla igual, en silencio (ej. sugerir 63A para 466A reales) — ahora calculan el valor real
    en vez de taparlo.
  · Se creó un único motor de cálculo compartido (`computeSizing`/`computeTotalWh`) que usan
    tanto un cálculo nuevo como la carga de un proyecto guardado, para que un futuro fix de
    fórmula no pueda quedar aplicado en un solo lado. Los proyectos guardados ANTES de este
    fix se recalculan solos (con la fórmula corregida) la próxima vez que se abren.
  · Nuevo dato real: área de techo aproximada (con la eficiencia del panel, que antes se leía
    pero no se usaba para nada correcto).
  · Diagrama eléctrico reconstruido para copiar literalmente la composición visual de las
    maquetas de referencia (no un ícono propio reinterpretado): paneles = caja azul marino
    con 2 celdas azules; batería = caja verde con 2 módulos y terminales +/-; inversor =
    caja clara con "pantalla" interna; breaker DC, fusible de batería y breaker AC ahora se
    dibujan como fichas pequeñas de color con el amperaje adentro, clicables, tal como en las
    maquetas (antes esa info solo vivía escondida en el inspector). La vista "Maqueta 3D ISO"
    no se tocó (ya coincidía exactamente con la referencia).
  · Resumen del Paso 4 fusionado en una sola tarjeta fija (sticky) arriba — el resumen lateral
    "en tiempo real" ya no se repite en este paso (se sigue mostrando en los Pasos 1-3, donde
    es el único resumen en vivo).
  · La barra de pestañas del Paso 4 ahora muestra flechas con degradado a los lados cuando hay
    más pestañas fuera de pantalla, para que no pase desapercibido que "Fórmulas"/"Consejos"
    existen.

  HISTORIAL (resumen; ver conversación completa para detalle de v2-v13):
  - v13: sistema de idioma ES/EN completo, login por código OTP, fix crítico de
    orden de inicialización (TDZ de currentPlan rompía todo el script).
  - v14 — depurada con ayuda de otra IA + revisión de seguridad:
    · Trigger de creación de perfil corregido para esperar email confirmado
      (evita perfiles huérfanos con el login OTP)
    · Fix: código OTP admite hasta 10 caracteres (Supabase estaba enviando 8,
      el campo solo aceptaba 6)
    · Fix: horas/día de electrodomésticos ahora se recortan en vivo a máx. 24
    · Fix: guardado de proyectos ya no bloquea a usuarios de "Uso único" que
      compran y guardan más de una vez (el límite de 1 solo debía aplicar a
      Free, que de todas formas nunca llega a esta pantalla)
    · SEGURIDAD: el descuento de crédito de "Uso único" ya NO se hace con un
      update() directo desde el navegador (eso requería una política RLS de
      UPDATE que cualquiera podía explotar desde la consola del navegador para
      auto-asignarse plan Pro gratis). Ahora se hace vía sb.rpc('consume_single_use_credit'),
      una función blindada en Supabase que solo puede restar, nunca sumar ni
      cambiar a "pro". Requiere correr el SQL de la función + quitar la política
      "Permitir actualizar propio perfil" (ver conversación).
  - v15: diagrama de conexión interactivo — cada componente (paneles,
    MPPT, batería, inversor, cargas) es clicable y abre un panel con: explicación
    en lenguaje simple, specs con tooltip "ⓘ", diagnóstico de fallas comunes, y un
    enlace a Amazon con búsqueda armada dinámicamente a partir de los valores REALES
    calculados (no genérica). También se agregó el cálculo de potencia sugerida del
    inversor (antes no existía) y su fila correspondiente en la tabla de componentes.
    Requiere configurar AMAZON_AFFILIATE_TAG (cuenta de Amazon Associates) para que
    generes comisión — funciona igual sin eso, solo que sin comisión para ti.
  - v16: capas Energía/Herramientas/Tierra sobre el diagrama, íconos por componente
    (versión propia, no calcada de las maquetas todavía), animación de flujo de
    corriente, e inspector con pestañas Especificaciones/Diagnóstico.
  - v17 (13/09/2026): modelo de cargas con campo "Cantidad" y potencia pico simultánea
    real (antes un margen plano de 1.25× sin distinguir cargas con motor). Paso 4
    reconstruido por completo en pestañas (Diagrama e Instalación/Materiales/
    Fórmulas/Consejos) — se acabó el scroll infinito de esa versión. Modo Libre/
    Instalación Guiada (wizard de 5 fases con checklist y modal "BATERÍAS PRIMERO",
    visible para todos los planes pero solo habilitado si es Pro). Selector de vista
    Diagrama Eléctrico/Maqueta 3D ISO con valores reales inyectados; el tipo de
    sistema (Aislado/Híbrido) empezó a leerse de verdad del Paso 3 (antes no se leía).
    Tooltips ⓘ táctiles reales (antes usaban title=, que no abre al tocar en móvil).
    Cada componente con 2 enlaces de Amazon (componente + herramienta), y 3
    protecciones nuevas calculadas de verdad (breaker DC, fusible batería, breaker AC).
-->
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="light dark" />
<meta name="theme-color" content="#FAF7F2" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#12171D" media="(prefers-color-scheme: dark)" />
<script>
  // v24: se decide el tema ANTES de pintar nada, para no mostrar un parpadeo del tema
  // equivocado. Prioridad: preferencia guardada por el usuario > prefers-color-scheme del
  // sistema > claro por defecto. No se fuerza "only light": ahora la app SÍ define colores
  // reales para modo oscuro, así que ya no depende de que el navegador "invente" un oscuro
  // (que era lo que rompía el diagrama en Samsung Internet).
  (function(){
    try{
      var saved = localStorage.getItem('qss_theme');
      var dark = saved ? saved === 'dark' : window.matchMedia('(prefers-color-scheme: dark)').matches;
      if(dark) document.documentElement.classList.add('dark');
      document.documentElement.style.colorScheme = dark ? 'dark' : 'light';
    }catch(e){}
  })();
</script>
<title>Quick Solar Solution — Dimensionador Solar Fotovoltaico</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          ink: '#1D2B33',
          slate: { 850: '#172436' },
          brand: { 50:'#FFF7EC',100:'#FEECC8',200:'#FCD98F',300:'#FAC259',400:'#F2A82E',500:'#DB8A12',600:'#B76D0A',700:'#93540B',800:'#78440F',900:'#65390F' },
          teal: { 50:'#EEFBFA',100:'#D2F4F1',200:'#A8E8E3',300:'#72D5CE',400:'#3FB8B0',500:'#219A93',600:'#177C77',700:'#166462',800:'#164F4F',900:'#153F40' }
        },
        fontFamily: {
          display: ['Sora','system-ui','sans-serif'],
          body: ['Inter','system-ui','sans-serif'],
          mono: ['"JetBrains Mono"','ui-monospace','monospace']
        }
      }
    }
  }
</script>
<style>
  /* v19: en el Paso 4 no hay aside lateral -> una sola columna a todo el ancho */
  #appGrid.step4-wide{grid-template-columns:minmax(0,1fr) !important}
  /* v28: en PC, con el diagrama eléctrico HORIZONTAL, el inspector/asistente va debajo (ancho completo con tope) */
  #diagramGrid.diagram-wide{grid-template-columns:minmax(0,1fr) !important}
  #diagramGrid.diagram-wide > div:nth-child(2){max-width:820px;width:100%;margin-left:auto;margin-right:auto}
  /* v24: la app ahora define su propio tema oscuro real (ver bloque html.dark más abajo);
     color-scheme ya no se fuerza aquí, lo controla el script de arriba y toggleTheme(). */
  /* v20: la barra de pestañas del Paso 4 no muestra scrollbar (las flechas ya avisan) */
  #step4TabScroll{ scrollbar-width:none; -ms-overflow-style:none; }
  #step4TabScroll::-webkit-scrollbar{ display:none; }
  /* v20: tabla de Materiales (antes sin estilo) */
  table.spec{ width:100%; border-collapse:collapse; font-size:14px; }
  table.spec th{ text-align:left; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:#64748b; padding:8px 10px; border-bottom:2px solid #e2e8f0; }
  table.spec td{ padding:10px; border-bottom:1px solid #eef2f6; vertical-align:top; color:#334155; }
  table.spec td:first-child{ font-weight:600; color:#0F2138; white-space:nowrap; }
  @media (max-width:640px){
    table.spec, table.spec tbody, table.spec tr, table.spec td{ display:block; width:100%; }
    table.spec tr:first-child{ display:none; }
    table.spec tr{ background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:10px 12px; margin-bottom:8px; }
    table.spec td{ border:0; padding:0; }
    table.spec td:first-child{ white-space:normal; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#64748b; margin-bottom:2px; }
  }

  /* ===== v21: lenguaje visual (crema + serif + etiquetas espaciadas + redondeo) ===== */
  body{ background:
    radial-gradient(1000px 380px at 100% -10%, rgba(33,154,147,0.06), transparent),
    radial-gradient(800px 300px at -10% 0%, rgba(219,138,18,0.07), transparent),
    #FAF7F2 !important; }
  .font-display{ letter-spacing:-.01em; }
  .eyebrow{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#93540B; font-weight:600; }
  body .text-slate-400{ color:#7A7466; } body .text-slate-500{ color:#655F52; }
  body .text-slate-600{ color:#4E4A40; } body .text-slate-700{ color:#3A372F; }
  .bg-ink .text-slate-400{ color:#A9B4AE; } .bg-ink .text-slate-200{ color:#E3E9E5; }
  body .border-slate-100{ border-color:#F3EEE4; } body .border-slate-200{ border-color:#EDE6DA; }
  body .border-slate-300{ border-color:#DDD3C2; } .bg-ink .border-slate-700{ border-color:#3A4A44; }
  body .bg-slate-50{ background-color:#FAF6EF; } body .bg-slate-100{ background-color:#F3EDE2; }
  body .rounded-2xl{ border-radius:1.5rem; } body .rounded-xl{ border-radius:1.15rem; } body .rounded-lg{ border-radius:.9rem; }
  input:focus, select:focus{ outline:none; border-color:#DB8A12 !important; box-shadow:0 0 0 3px rgba(219,138,18,.18); }
  main.bg-white{ box-shadow:0 1px 2px rgba(60,45,20,.04), 0 12px 32px -16px rgba(60,45,20,.12); }
  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; height:2.9rem; padding:0 1.3rem;
    border-radius:9999px; font-weight:600; font-size:.9rem; white-space:nowrap; transition:background .15s, box-shadow .15s; }
  .btn-primary{ background:#A85F07; color:#fff; } .btn-primary:hover{ background:#8F5006; }   /* contraste texto/fondo ≈ 4.9:1 */
  .btn-secondary{ background:#fff; border:1px solid #DDD3C2; color:#3A372F; } .btn-secondary:hover{ background:#FAF6EF; }
  .btn-ghost{ height:2.3rem; padding:0 .9rem; color:#655F52; border-radius:9999px; font-weight:500; font-size:.85rem; }
  .btn-ghost:hover{ background:#F3EDE2; }
  .btn-teal{ background:#1B7F79; color:#fff; } .btn-teal:hover:not(:disabled){ background:#146A65; }
  .btn-ink{ background:#1D2B33; color:#fff; } .btn-ink:hover:not(:disabled){ background:#2A3B45; }
  .btn:disabled{ background:#D9D2C3; color:#fff; cursor:not-allowed; }
  /* v22: todos los campos y selectores con el mismo alto */
  main input:not([type=checkbox]):not([type=radio]), main select{ min-height:3rem; box-sizing:border-box; }
  /* v23: glosario + ayuda contextual */
  .gloss-hint{ display:inline-flex; align-items:center; justify-content:center; width:1.05rem; height:1.05rem;
    border-radius:9999px; border:1px solid #B4A88E; color:#8A6D1F; font-size:10px; line-height:1; margin-left:.3rem;
    cursor:pointer; vertical-align:middle; background:#FFFBF0; }
  .gloss-hint:hover{ background:#FDECC8; }
  #glossaryModal{ position:fixed; inset:0; background:rgba(29,43,51,.55); z-index:70; display:none;
    align-items:flex-start; justify-content:center; padding:4vh 1rem; overflow-y:auto; }
  #glossaryModal.open{ display:flex; }
  #glossaryPanel{ background:#fff; border-radius:1.25rem; max-width:640px; width:100%; padding:1.25rem 1.25rem 1.5rem;
    box-shadow:0 20px 60px rgba(0,0,0,.3); }
  .gloss-entry{ padding:.75rem 0; border-bottom:1px solid #F0E9D8; scroll-margin-top:1rem; }
  .gloss-entry:last-child{ border-bottom:none; }
  .gloss-entry.gloss-highlight{ background:#FFF6DE; border-radius:.6rem; padding:.75rem .6rem; }
  details.qss-help summary{ cursor:pointer; list-style:none; }
  details.qss-help summary::-webkit-details-marker{ display:none; }
  details.qss-help[open] summary .chev{ transform:rotate(90deg); }
  .qss-help summary .chev{ display:inline-block; transition:transform .15s; }
  .qss-note{ font-size:13px; line-height:1.45; border-radius:1rem; padding:.7rem .9rem; border:1px solid; }
  .qss-note-info{ background:#F4F1EA; border-color:#E4DCCB; color:#4E4A40; }
  .qss-note-warn{ background:#FFF6E5; border-color:#F2D9A1; color:#7A4B08; }
  .qss-note-danger{ background:#FDECEA; border-color:#F3B7B0; color:#8B1E14; }
  /* v20: aviso dentro de la app (reemplaza alert()) */
  #appToast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); max-width:92vw; background:#0F2138; color:#fff;
    padding:12px 18px; border-radius:12px; font-size:14px; box-shadow:0 8px 24px rgba(0,0,0,.25); z-index:60; display:none; }
  body{ background:
    radial-gradient(1200px 400px at 100% -10%, rgba(33,154,147,0.07), transparent),
    radial-gradient(900px 300px at -10% 0%, rgba(219,138,18,0.06), transparent),
    #F7F8FA;
  }
  .tabular{ font-variant-numeric: tabular-nums; }
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-thumb{background:#D6DBE1;border-radius:8px}

  /* --- Diagrama de conexión: flujo animado + capas (Energía/Herramientas/Tierra) --- */
  .pv-flow-dc{ stroke:#ef4444; stroke-dasharray:6; animation:pvFlow 1s linear infinite; }
  .pv-flow-dc-neg{ stroke:#3b82f6; stroke-dasharray:6; animation:pvFlow 1s linear infinite; }
  .pv-flow-ac{ stroke:#219A93; stroke-dasharray:6; animation:pvFlow .8s linear infinite; }
  .pv-flow-ground{ stroke:#DB8A12; stroke-dasharray:4; stroke-width:3; opacity:0; transition:opacity .25s ease; }
  @keyframes pvFlow{ to{ stroke-dashoffset:-12; } }

  #diagramArea.layer-ground .pv-flow-ground{ opacity:1; }
  #diagramArea.layer-ground .pv-flow-dc,
  #diagramArea.layer-ground .pv-flow-dc-neg,
  #diagramArea.layer-ground .pv-flow-ac{ opacity:.12; }

  #diagramArea .pv-comp{ cursor:pointer; transition:filter .15s ease; }
  #diagramArea .pv-comp:hover,
  #diagramArea .pv-comp:active{ filter:drop-shadow(0 3px 6px rgba(33,154,147,.45)); }

  .pv-flow-grid{ stroke:#8b5cf6; stroke-dasharray:6; animation:pvFlow .8s linear infinite; opacity: 1; }
  #diagramArea.layer-ground .pv-flow-grid{ opacity:.12; }

  /* Tooltip táctil real para las especificaciones (reemplaza el atributo title=, que no
     dispara con un toque en móvil) */
  .pv-tip-wrap{ position:relative; display:inline-flex; }
  .pv-tip-bubble{ display:none; position:absolute; right:0; bottom:100%; margin-bottom:6px; width:220px;
    background:#0F2138; color:#fff; font-size:11px; line-height:1.4; padding:8px 10px; border-radius:8px;
    box-shadow:0 6px 16px rgba(0,0,0,.25); z-index:40; }
  .pv-tip-bubble.pv-tip-open{ display:block; }

  /* ============================================================================
     v24 — TEMA OSCURO REAL
     Antes: `color-scheme: only light` forzado — en navegadores que igual imponen
     oscuro (visto en Samsung Internet) el resultado eran fichas y el diagrama SVG
     ilegibles, porque la app nunca definía colores propios para ese caso: era el
     navegador "adivinando" un oscuro sin saber qué invertir.
     Ahora: paleta oscura real, verificada por contraste (script Node ad-hoc, no
     incluido en el archivo) — texto principal/secundario/muted ≥ 4.5:1, texto
     "faint"(400)/placeholder ≈ 4:1 (mismo criterio de sutileza que el propio tema
     claro ya usa para esos tonos discretos), bordes con la misma sutileza relativa
     que ya tienen hoy en tema claro (tampoco llegan a 3:1 ahí: es un criterio de
     diseño existente — bordes suaves + sombra en vez de bordes marcados — no un
     descuido nuevo). Se activa agregando la clase "dark" a <html> (toggleTheme()),
     decidida ANTES de pintar por el script inline del <head> para evitar parpadeo.
     Técnica: se reutiliza el mismo patrón que ya usa el tema claro (repintar el
     SIGNIFICADO de las clases de Tailwind ya usadas en el HTML mediante selectores
     más específicos, en vez de agregar `dark:` a cada elemento uno por uno) —
     mismo espíritu que `body .text-slate-700{...}` de v21, con el prefijo
     `html.dark` en vez de `body`. Los colores YA saturados (paneles del diagrama,
     batería verde, chips de protección, botones bg-brand-500/teal-600/etc., badges
     rojo/azul/esmeralda) no se tocan: se leen bien en cualquier fondo, tocarlos
     agregaría riesgo sin necesidad.
     ============================================================================ */
  :root{
    /* Únicos colores del diagrama SVG que sí varían por tema: las etiquetas de
       título/subtítulo que se dibujan flotando sobre el fondo de la tarjeta (con
       su halo a juego para que se lean sobre el diagrama). Los cuerpos de los
       componentes (panel, batería, chips) son colores fijos saturados: no usan
       estas variables porque no necesitan cambiar. */
    --pv-label-title: #0F2138;
    --pv-label-sub: #475569;
    --pv-label-halo: #F8FAFC;
  }
  html.dark{
    color-scheme: dark;
    --pv-label-title: #F4EFE6;
    --pv-label-sub: #C9C2B3;
    --pv-label-halo: #1B222A;
  }

  html.dark body{
    background:
      radial-gradient(1200px 400px at 100% -10%, rgba(95,207,199,0.09), transparent),
      radial-gradient(900px 300px at -10% 0%, rgba(242,168,46,0.07), transparent),
      #12171D !important;
  }
  html.dark .eyebrow{ color:#F2A82E; }

  /* texto */
  html.dark .text-ink{ color:#F4EFE6; }
  html.dark .text-slate-800{ color:#F4EFE6; }
  html.dark body .text-slate-700{ color:#F4EFE6; }
  html.dark body .text-slate-600{ color:#CFC7B6; }
  html.dark body .text-slate-500{ color:#9C9484; }
  html.dark body .text-slate-400{ color:#867F6E; }
  html.dark .text-slate-100{ color:#E7E2D6; }
  html.dark .text-brand-700, html.dark .text-brand-600{ color:#F2A82E; }
  html.dark .text-teal-700, html.dark .text-teal-800{ color:#5FCFC7; }

  /* fondos */
  html.dark .bg-white{ background-color:#1B222A; }
  html.dark body .bg-slate-50{ background-color:#222B34; }
  html.dark body .bg-slate-100{ background-color:#29323C; }
  html.dark .bg-slate-300{ background-color:#48545F; }
  html.dark .bg-slate-800{ background-color:#29323C; }
  html.dark .bg-slate-900{ background-color:#0D1116; }
  html.dark .bg-brand-50{ background-color:rgba(242,168,46,.10); }
  html.dark .bg-amber-50{ background-color:rgba(242,168,46,.10); }
  html.dark .bg-teal-50{ background-color:rgba(95,207,199,.10); }

  /* bordes */
  html.dark body .border-slate-100{ border-color:#333E48; }
  html.dark body .border-slate-200{ border-color:#3A4550; }
  html.dark body .border-slate-300{ border-color:#48545F; }
  html.dark .border-slate-700{ border-color:#48545F; }
  html.dark .border-brand-200, html.dark .border-brand-400, html.dark .border-brand-500{ border-color:#8A5A12; }
  html.dark .border-teal-200{ border-color:#1F6A64; }
  html.dark .border-amber-200{ border-color:#8A5A12; }

  /* componentes propios de la app */
  html.dark .btn-secondary{ background:#1B222A; border-color:#48545F; color:#F4EFE6; }
  html.dark .btn-secondary:hover{ background:#222B34; }
  html.dark .btn-ghost{ color:#9C9484; }
  html.dark .btn-ghost:hover{ background:#222B34; }
  html.dark main.bg-white{ box-shadow:0 1px 0 rgba(255,255,255,.05), 0 16px 40px -20px rgba(0,0,0,.65); }
  html.dark main input:not([type=checkbox]):not([type=radio]), html.dark main select{ background-color:#222B34; color:#F4EFE6; }
  html.dark ::placeholder{ color:#8A8373; opacity:1; }

  html.dark .qss-note-info{ background:#222B34; border-color:#3A4550; color:#CFC7B6; }
  html.dark .qss-note-warn{ background:#332715; border-color:#7A5A17; color:#F2C572; }
  html.dark .qss-note-danger{ background:#3A1D1A; border-color:#8B3A31; color:#F3AFA6; }

  html.dark .gloss-hint{ border-color:#5A5140; color:#F2A82E; background:#2B2515; }
  html.dark .gloss-hint:hover{ background:#3A3018; }
  html.dark #glossaryPanel{ background:#1B222A; }
  html.dark .gloss-entry{ border-bottom-color:#333E48; }
  html.dark .gloss-entry.gloss-highlight{ background:#3A3018; }

  html.dark table.spec th{ color:#9C9484; border-bottom-color:#3A4550; }
  html.dark table.spec td{ border-bottom-color:#29323C; color:#CFC7B6; }
  html.dark table.spec td:first-child{ color:#F4EFE6; }
  @media (max-width:640px){
    html.dark table.spec tr{ background:#1B222A; border-color:#3A4550; }
  }

  html.dark ::-webkit-scrollbar-thumb{ background:#3A4550; }
</style>
</head>
<body class="min-h-screen font-body text-ink antialiased">
<div class="max-w-6xl mx-auto px-4 py-6 md:py-10">

  <header class="flex flex-col md:flex-row md:items-center gap-3 md:gap-4">
    <div class="flex items-center gap-4">
      <div class="w-12 h-12 shrink-0 rounded-xl bg-gradient-to-br from-brand-400 to-teal-500 flex items-center justify-center text-white font-display font-bold text-lg shadow-sm">Q</div>
      <div>
        <div class="eyebrow" data-i18n="header.eyebrow">Dimensionador solar</div>
        <h1 class="font-display font-bold text-2xl md:text-3xl text-ink leading-tight" data-i18n="header.title">Quick Solar Solution</h1>
        <p class="text-sm text-slate-500 mt-0.5" data-i18n="header.subtitle">Dimensionamiento técnico de sistemas fotovoltaicos aislados e híbridos.</p>
      </div>
    </div>
    <div class="flex justify-end gap-2 md:ml-auto md:shrink-0">
      <button id="themeToggleBtn" type="button" onclick="toggleTheme()" class="text-xs font-semibold border border-slate-300 text-slate-600 px-3 py-1.5 rounded-lg hover:bg-slate-50">🌙</button>
      <button type="button" class="text-xs font-semibold border border-slate-300 text-slate-600 px-3 py-1.5 rounded-lg hover:bg-slate-50" onclick="openGlossary()" title="Glosario">📖</button>
      <button id="langToggleBtn" type="button" class="text-xs font-semibold border border-slate-300 text-slate-600 px-3 py-1.5 rounded-lg hover:bg-slate-50">EN</button>
    </div>
  </header>

  <!-- LANDING -->
  <section id="landingScreen" class="mt-10 md:mt-16 max-w-xl mx-auto text-center">
    <span class="inline-block text-xs font-semibold tracking-wide uppercase text-teal-700 bg-teal-50 border border-teal-200 rounded-full px-3 py-1" data-i18n="landing.badge">Dimensionamiento fotovoltaico profesional</span>
    <h2 class="font-display font-bold text-3xl md:text-4xl text-ink mt-4 leading-tight" data-i18n="landing.h2">Dimensiona tu sistema solar con precisión técnica</h2>
    <p class="text-slate-500 mt-3" data-i18n="landing.p">Paneles, baterías, controlador MPPT y calibre de cable — calculado y guardado en tu cuenta.</p>

    <div class="mt-8 bg-white border border-slate-200 rounded-2xl shadow-sm p-6 text-left">
      <div class="flex items-start gap-2 pb-4 mb-4 border-b border-slate-100">
        <input id="termsCheckbox" type="checkbox" class="mt-1 w-auto" />
        <label for="termsCheckbox" class="text-sm text-slate-600">
          <span data-i18n="terms.checkboxLabel1">He leído y acepto los</span>
          <button type="button" id="openTermsModal" class="text-teal-700 underline font-semibold" data-i18n="terms.checkboxLink">Términos de Servicio</button>.
          <span data-i18n="terms.checkboxLabel2">Entiendo que Quick Solar Solution es una herramienta de orientación y estimación, y que la decisión de implementar cualquier sistema es mi responsabilidad.</span>
        </label>
      </div>
      <label class="block mb-1.5 text-sm font-semibold text-slate-700" data-i18n="auth.emailLabel">Correo electrónico</label>
      <input id="authEmail" type="text" placeholder="tu@email.com" data-i18n-placeholder="auth.emailPlaceholder" disabled class="w-full border border-slate-300 rounded-lg px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-brand-400 disabled:bg-slate-50 disabled:text-slate-400" />
      <button id="sendMagicLink" type="button" disabled class="w-full mt-3 bg-ink text-white text-sm font-semibold px-4 py-2.5 rounded-lg hover:bg-slate-800 transition disabled:bg-slate-300 disabled:cursor-not-allowed" data-i18n="auth.submitBtn">Entrar / Crear cuenta</button>
      <p id="authMsg" class="text-xs text-slate-500 mt-2 min-h-[1rem]"></p>
      <p class="text-xs text-slate-400 mt-3" data-i18n="auth.hint">Sin contraseña: te enviamos un código de verificación a tu correo. Si es tu primera vez, la cuenta se crea automáticamente.</p>

      <div id="codeStep" style="display:none" class="mt-4 pt-4 border-t border-slate-100">
        <label class="block mb-1.5 text-sm font-semibold text-slate-700" data-i18n="auth.codeLabel">Código de verificación</label>
        <input id="authCode" type="text" inputmode="numeric" pattern="[0-9]*" maxlength="10" placeholder="••••••••" data-i18n-placeholder="auth.codePlaceholder" class="w-full border border-slate-300 rounded-lg px-3 py-2.5 text-center tracking-[0.3em] font-mono text-lg focus:outline-none focus:ring-2 focus:ring-brand-400" />
        <button id="verifyCodeBtn" type="button" class="w-full mt-3 bg-brand-500 text-white text-sm font-semibold px-4 py-2.5 rounded-lg hover:bg-brand-600 transition" data-i18n="auth.verifyBtn">Verificar código</button>
        <button id="backToEmailBtn" type="button" class="w-full mt-2 text-xs text-slate-400 hover:text-slate-600" data-i18n="auth.backToEmail">Usar otro correo</button>
      </div>
    </div>

    <!-- MODAL TÉRMINOS -->
    <div id="termsModal" style="display:none" class="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4">
      <div class="bg-white rounded-2xl shadow-xl max-w-2xl w-full max-h-[80vh] flex flex-col">
        <div class="p-5 border-b border-slate-200 flex items-center justify-between">
          <h3 class="font-display font-bold text-lg" data-i18n="terms.modalTitle">Términos de Servicio de Quick Solar Solution</h3>
          <button id="closeTermsModal" type="button" class="text-slate-400 hover:text-slate-700 text-xl leading-none">&times;</button>
        </div>
        <div class="p-5 overflow-y-auto text-sm text-slate-600 space-y-3 text-left">
          <p class="text-xs text-slate-400" data-i18n="terms.updated">Última actualización: 25/08/2026 — Versión 1.0</p>

          <p data-i18n-html="terms.c1"><strong>1. Aceptación de los Términos.</strong> Al marcar la casilla de aceptación y/o utilizar Quick Solar Solution ("la Plataforma"), usted declara haber leído, entendido y aceptado íntegramente estos Términos. Si no está de acuerdo, no debe utilizar el Servicio.</p>

          <p data-i18n-html="terms.c2"><strong>2. Descripción del Servicio.</strong> Quick Solar Solution es una herramienta de estimación y orientación para el dimensionamiento preliminar de sistemas fotovoltaicos. Los resultados son estimaciones basadas en fórmulas de ingeniería de uso general y en los datos que el propio Usuario introduce. Quick Solar Solution <strong>no</strong> constituye un diseño de ingeniería certificado, una garantía de rendimiento o seguridad, ni sustituye la evaluación de un ingeniero eléctrico o electricista licenciado.</p>

          <p data-i18n-html="terms.c3"><strong>3. Solo orientación — responsabilidad del Usuario.</strong> Las decisiones de implementar, adquirir equipos o contratar instaladores con base en los resultados de la Plataforma son responsabilidad exclusiva del Usuario. Antes de energizar cualquier instalación eléctrica, el Usuario debe validar los resultados con un profesional licenciado en su localidad y cumplir toda normativa aplicable. Sistemas mal dimensionados o mal instalados pueden causar incendios, descargas eléctricas, daños o lesiones; Quick Solar Solution no asume responsabilidad por tales consecuencias.</p>

          <p data-i18n-html="terms.c4"><strong>4. Exclusión de garantías.</strong> El Servicio se ofrece "tal cual" y "según disponibilidad", sin garantías expresas o implícitas de exactitud, integridad o ausencia de errores en los cálculos.</p>

          <p data-i18n-html="terms.c5"><strong>5. Limitación de responsabilidad.</strong> En la máxima medida permitida por la ley, Quick Solar Solution no será responsable por daños directos, indirectos, incidentales o consecuentes derivados del uso del Servicio o de decisiones tomadas con base en él. La responsabilidad total acumulada no excederá el monto pagado por el Usuario en los últimos 12 meses.</p>

          <p data-i18n-html="terms.c6"><strong>6. Indemnización.</strong> El Usuario acepta indemnizar a Quick Solar Solution frente a reclamos derivados del incumplimiento de estos Términos o de daños a terceros originados en la implementación de un sistema sin la debida validación profesional.</p>

          <p data-i18n-html="terms.c7"><strong>7. Sin relación profesional.</strong> El uso de la Plataforma no crea una relación de ingeniería, consultoría certificada ni asesoría técnica licenciada entre el Usuario y Quick Solar Solution.</p>

          <p data-i18n-html="terms.c8"><strong>8. Registro de aceptación.</strong> Al marcar la casilla, el Usuario otorga su consentimiento expreso. Este registro se almacena junto con la fecha, hora y su identificador de cuenta.</p>

          <p data-i18n-html="terms.c9"><strong>9. Propiedad intelectual.</strong> El código, diseño, algoritmos y marca "Quick Solar Solution" son propiedad de sus titulares. Queda prohibida su copia, ingeniería inversa o explotación comercial sin autorización previa y por escrito.</p>

          <p data-i18n-html="terms.c10"><strong>10. Pagos y suscripciones.</strong> Los pagos son procesados por un tercero proveedor de pagos. Las suscripciones se renuevan automáticamente salvo cancelación por el Usuario.</p>

          <p data-i18n-html="terms.c11"><strong>11. Modificaciones.</strong> Quick Solar Solution podrá modificar estos Términos en cualquier momento; el uso continuado tras su publicación constituye aceptación de los nuevos Términos.</p>

          <p data-i18n-html="terms.c12"><strong>12. Ley aplicable.</strong> [Pendiente de completar con la jurisdicción real del titular del negocio, con asesoría legal local.]</p>

          <p data-i18n-html="terms.c13"><strong>13. Contacto.</strong> [Pendiente: email de contacto del negocio.]</p>
        </div>
        <div class="p-4 border-t border-slate-200 text-right">
          <button id="closeTermsModal2" type="button" class="bg-ink text-white text-sm font-semibold px-4 py-2 rounded-lg hover:bg-slate-800" data-i18n="terms.closeBtn">Cerrar</button>
        </div>
      </div>
    </div>

    <!-- COMPARACIÓN DE PLANES -->
    <div class="mt-8 grid grid-cols-1 sm:grid-cols-3 gap-4 text-left">
      <div class="bg-white border border-slate-200 rounded-2xl p-5">
        <h4 class="font-display font-bold text-ink" data-i18n="pricing.freeTitle">Free</h4>
        <p class="text-xs text-slate-400 mb-3" data-i18n="pricing.freeSub">Explora la herramienta</p>
        <ul class="text-sm text-slate-600 space-y-1.5">
          <li data-i18n="pricing.freeLi1">✓ Recorre todo el wizard</li>
          <li data-i18n="pricing.freeLi2">✓ Ve qué datos pide cada paso</li>
          <li class="text-slate-400" data-i18n="pricing.freeLi3">✗ Calcular el dimensionado</li>
        </ul>
      </div>
      <div class="bg-white border-2 border-brand-400 rounded-2xl p-5 relative">
        <span class="absolute -top-3 right-4 bg-brand-500 text-white text-xs font-semibold px-2 py-0.5 rounded-full" data-i18n="pricing.singleBadge">1 pago</span>
        <h4 class="font-display font-bold text-ink" data-i18n="pricing.singleTitle">Uso único</h4>
        <p class="text-xs text-slate-400 mb-3" data-i18n="pricing.singleSub">Para un proyecto puntual</p>
        <ul class="text-sm text-slate-600 space-y-1.5">
          <li data-i18n="pricing.singleLi1">✓ 1 cálculo completo</li>
          <li data-i18n="pricing.singleLi2">✓ Diagrama de conexión</li>
          <li data-i18n="pricing.singleLi3">✓ Guardar y exportar ese resultado</li>
        </ul>
      </div>
      <div class="bg-white border border-slate-200 rounded-2xl p-5">
        <h4 class="font-display font-bold text-ink" data-i18n="pricing.proTitle">Pro</h4>
        <p class="text-xs text-slate-400 mb-3" data-i18n="pricing.proSub">Para instaladores, uso frecuente</p>
        <ul class="text-sm text-slate-600 space-y-1.5">
          <li data-i18n="pricing.proLi1">✓ Cálculos ilimitados</li>
          <li data-i18n="pricing.proLi2">✓ Proyectos ilimitados guardados</li>
          <li data-i18n="pricing.proLi3">✓ Comparador de escenarios</li>
          <li data-i18n="pricing.proLi4">✓ Exportar PDF con tu marca</li>
        </ul>
      </div>
    </div>
    <p class="text-xs text-slate-400 mt-3" data-i18n="pricing.footnote">Puedes empezar gratis y comprar un uso único o Pro cuando quieras, desde dentro de la app.</p>
  </section>

  <!-- APP -->
  <div id="appScreen" style="display:none">
    <div class="mt-6 bg-white rounded-xl border border-slate-200 shadow-sm p-4 flex flex-wrap gap-3 items-center justify-between">
      <span class="text-sm text-slate-600"><span data-i18n="session.label">Sesión:</span> <strong id="authEmailShown" class="text-ink"></strong>
        <span id="planBadge" class="ml-2 text-xs font-semibold px-2 py-0.5 rounded-full bg-slate-100 text-slate-500">Plan: —</span>
        <span id="paymentStatusMsg" class="ml-2 text-xs text-brand-600 font-semibold"></span>
      </span>
      <div class="flex gap-2 flex-wrap">
        <button id="buySingleUseBtn" style="display:none" type="button" class="text-sm border border-brand-400 text-brand-700 font-semibold px-3 py-1.5 rounded-lg hover:bg-brand-50" data-i18n="session.buySingle">Comprar 1 uso</button>
        <button id="upgradeBtn" style="display:none" type="button" class="text-sm bg-brand-500 text-white font-semibold px-3 py-1.5 rounded-lg hover:bg-brand-600" data-i18n="session.upgrade">Actualizar a Pro</button>
        <button id="showMyProjects" type="button" class="text-sm border border-slate-300 text-slate-600 px-3 py-1.5 rounded-lg hover:bg-slate-50" data-i18n="session.myProjects">Mis proyectos</button>
        <button id="signOut" type="button" class="text-sm border border-slate-300 text-slate-600 px-3 py-1.5 rounded-lg hover:bg-slate-50" data-i18n="session.signOut">Cerrar sesión</button>
      </div>
    </div>
    <div id="myProjectsBox" style="display:none" class="mt-3 bg-white rounded-xl border border-slate-200 shadow-sm p-4">
      <h4 class="font-display font-semibold text-sm mb-2" data-i18n="session.myProjectsHeading">Mis proyectos guardados</h4>
      <div id="myProjectsList" class="text-sm text-slate-500">Cargando…</div>
    </div>

    <div id="appGrid" class="mt-6 grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-6">
    <main class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6 md:p-8">

      <div class="flex items-center justify-between mb-4 flex-wrap gap-2">
        <button id="topResetBtn" type="button" class="text-xs border border-slate-300 text-slate-500 px-3 py-1.5 rounded-lg hover:bg-slate-50" data-i18n="nav.reset">Volver al inicio</button>
      </div>
      <div id="steps" class="flex flex-wrap gap-2 mb-6">
        <button type="button" data-step="0" class="step-badge cursor-pointer px-3 py-1.5 rounded-full bg-brand-50 text-brand-700 text-xs font-semibold border border-brand-200" data-i18n="nav.step1">1. Información básica</button>
        <button type="button" data-step="1" class="step-badge cursor-pointer px-3 py-1.5 rounded-full bg-slate-50 text-slate-500 text-xs font-semibold border border-slate-200" data-i18n="nav.step2">2. Cargas</button>
        <button type="button" data-step="2" class="step-badge cursor-pointer px-3 py-1.5 rounded-full bg-slate-50 text-slate-500 text-xs font-semibold border border-slate-200" data-i18n="nav.step3">3. Preferencias</button>
        <button type="button" data-step="3" class="step-badge cursor-pointer px-3 py-1.5 rounded-full bg-slate-50 text-slate-500 text-xs font-semibold border border-slate-200" data-i18n="nav.step4">4. Resultado</button>
      </div>

      <form id="wizard" onsubmit="return false">

        <!-- STEP 1 -->
        <div id="step-1" class="step-content">
          <div class="eyebrow" data-i18n="step1.eyebrow">Paso 1 de 4</div>
          <h3 class="font-display font-bold text-lg text-ink" data-i18n="step1.title">1) Información básica</h3>
          <p class="text-sm text-slate-500 mt-1" data-i18n="step1.desc">Si no conoces parámetros técnicos, usa los estimados por defecto.</p>
          <div id="step1Help"></div>

          <label class="block mt-5 mb-1.5 text-sm font-semibold text-slate-700" data-i18n="step1.projectNameLabel">Nombre del proyecto / vivienda</label>
          <input id="projectName" type="text" placeholder="Ej: Casa - San Pedro" data-i18n-placeholder="step1.projectNamePlaceholder" class="w-full border border-slate-300 rounded-lg px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-brand-400" />

          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            <div>
              <label class="block mb-1.5 text-sm font-semibold text-slate-700" data-i18n="step1.cityLabel">Ubicación / Ciudad (opcional)</label>
              <input id="city" type="text" placeholder="Ej: Kingston, Jamaica" data-i18n-placeholder="step1.cityPlaceholder" class="w-full border border-slate-300 rounded-lg px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-brand-400" />
              <button type="button" id="btnAutoPSH" class="mt-2 text-xs font-semibold text-brand-600 hover:text-brand-700 underline underline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline disabled:text-slate-400" data-i18n="step1.autoPshBtn">☀ Calcular PSH real para esta ciudad</button>
              <p id="autoPshStatus" class="text-xs text-slate-400 mt-1 min-h-[1rem]"></p>
            </div>
            <div>
              <label class="block mb-1.5 text-sm font-semibold text-slate-700"><span data-i18n="step1.pshLabel">Zona climática / Radiación (PSH)</span><span class="gloss-hint" onclick="openGlossary('psh')" title="¿Qué es PSH?">ℹ</span></label>
              <select id="pshSelect" class="w-full border border-slate-300 rounded-lg px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-brand-400 bg-white">
                <option value="" data-i18n="step1.pshOpt0">-- elegir o ingresa manual --</option>
                <option value="2.8" data-i18n="step1.pshOpt1">Nublado / Alta latitud (~2.8 h/día)</option>
                <option value="4.3" data-i18n="step1.pshOpt2">Templado (~4.3 h/día)</option>
                <option value="5" data-i18n="step1.pshOpt3">Subtropical / Caribe (~5 h/día)</option>
                <option value="6.3" data-i18n="step1.pshOpt4">Desértico / Región muy soleada (~6.3 h/día)</option>
              </select>
              <p class="text-xs text-slate-400 mt-1.5" data-i18n="step1.pshNote">Son promedios anuales orientativos, no el mes más débil del año (normalmente invierno). Si el sistema debe funcionar todo el año sin excepción, dimensiona con la radiación del mes más bajo de tu zona, no con el promedio.</p>
            </div>
          </div>

          <label class="block mt-4 mb-1.5 text-sm font-semibold text-slate-700" data-i18n="step1.pshManualLabel">Si conoces la radiación (PSH) h/d</label>
          <input id="pshManual" type="number" step="0.1" min="0" placeholder="Ej: 4" data-i18n-placeholder="step1.pshManualPlaceholder" class="w-full border border-slate-300 rounded-lg px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-brand-400" />

          <label class="block mt-4 mb-1.5 text-sm font-semibold text-slate-700" data-i18n="step1.voltageLabel">Voltaje de sistema preferido</label>
          <select id="systemVoltage" class="w-full border border-slate-300 rounded-lg px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-brand-400 bg-white">
            <option value="12" data-i18n="step1.voltOpt12">12 V (pequeños)</option>
            <option value="24" selected data-i18n="step1.voltOpt24">24 V (común)</option>
            <option value="48" data-i18n="step1.voltOpt48">48 V (más eficiente en potencias mayores)</option>
          </select>
          <p class="text-xs text-slate-400 mt-2" data-i18n="step1.voltageHint">Si tu sistema necesita más de ~70 A, la app sube el voltaje a 48 V automáticamente al calcular (y te avisa por qué) — no hace falta que lo cambies vos mismo.</p>
          <div id="voltageHelp"></div>

          <div class="flex gap-2 mt-6">
            <button id="to-step-2" class="btn btn-primary w-full sm:w-auto" data-i18n="step1.nextBtn">Siguiente: Cargas</button>
          </div>
        </div>

        <!-- STEP 2 -->
        <div id="step-2" class="step-content" style="display:none">
          <div class="flex items-start justify-between gap-3">
            <div>
              <div class="eyebrow" data-i18n="step2.eyebrow">Paso 2 de 4</div>
              <h3 class="font-display font-bold text-lg text-ink" data-i18n="step2.title">2) Cargas / Electrodomésticos</h3>
            </div>
            <button id="back-step-1" type="button" class="btn btn-ghost shrink-0" data-i18n="nav.backArrow">← Atrás</button>
          </div>
          <p class="text-sm text-slate-500 mt-1" data-i18n="step2.desc">Agrega electrodomésticos: potencia (W) y horas de uso diarias.</p>
          <div id="step2Help"></div>

          <label class="block mt-4 mb-1.5 text-sm font-semibold text-slate-700" data-i18n="step2.presetLabel">Usar lista predefinida rápida</label>
          <select id="presetLoads" class="w-full border border-slate-300 rounded-lg px-3 py-2.5 bg-white focus:outline-none focus:ring-2 focus:ring-brand-400">
            <option value="" data-i18n="step2.presetOpt0">-- elegir preset --</option>
            <option value="basicHouse" data-i18n="step2.presetOpt1">Casa pequeña (iluminación + TV + nevera pequeña)</option>
            <option value="familyHome" data-i18n="step2.presetOpt2">Casa familiar media</option>
            <option value="office" data-i18n="step2.presetOpt3">Pequeña oficina</option>
          </select>

          <div id="appliances" class="mt-5">
            <h4 class="text-sm font-semibold text-slate-700 mb-2" data-i18n="step2.listTitle">Lista de electrodomésticos</h4>
            <div id="applianceList" class="space-y-2"></div>

            <div class="grid grid-cols-2 sm:grid-cols-6 gap-2 mt-3 items-center bg-slate-50 border border-slate-200 rounded-lg p-3">
              <input id="appName" type="text" placeholder="Nombre (Ej: Bombilla LED 10W)" data-i18n-placeholder="step2.appNamePlaceholder" class="col-span-2 sm:col-span-6 w-full border border-slate-300 rounded-lg px-3 text-sm" />
              <input id="appPower" type="number" placeholder="Potencia (W)" data-i18n-placeholder="step2.appPowerPlaceholder" class="w-full border border-slate-300 rounded-lg px-3 text-sm" />
              <!-- Restricción de horas a máximo 24 h/día -->
              <input id="appHours" type="number" step="0.1" min="0.1" max="24" placeholder="Horas/día" data-i18n-placeholder="step2.appHoursPlaceholder" class="w-full border border-slate-300 rounded-lg px-3 text-sm" />
              <input id="appQty" type="number" step="1" min="1" value="1" title="Cantidad" data-i18n-placeholder="step2.appQtyPlaceholder" placeholder="Cant." class="w-full border border-slate-300 rounded-lg px-3 text-sm" />
              <label class="text-sm text-slate-600 flex items-center gap-2 h-12 sm:col-span-2"><input id="appInductive" type="checkbox" class="w-5 h-5" /> <span data-i18n="step2.inductiveLabel">Motor/arranque</span></label>
              <button id="addAppliance" type="button" class="btn btn-ink col-span-2 sm:col-span-1 w-full" data-i18n="step2.addBtn">Añadir</button>
            </div>
            <p class="text-xs text-slate-400 mt-2" data-i18n="step2.inductiveHint">Marca "Motor/arranque" para bombas, neveras o compresores.</p>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mt-4">
              <div>
                <label class="block mb-1.5 text-sm font-semibold text-slate-700" data-i18n="step2.haveLabel">¿Tienes baterías / inversor ya?</label>
                <select id="haveComponents" class="w-full border border-slate-300 rounded-lg px-3 py-2.5 bg-white">
                  <option value="none" data-i18n="step2.haveOpt0">No</option>
                  <option value="some" data-i18n="step2.haveOpt1">Algunos (indicar abajo)</option>
                  <option value="all" data-i18n="step2.haveOpt2">Sí, ya tengo todo</option>
                </select>
              </div>
              <div>
                <label class="block mb-1.5 text-sm font-semibold text-slate-700" data-i18n="step2.haveNotesLabel">Modelo / Capacidad (opcional)</label>
                <input id="haveNotes" type="text" class="w-full border border-slate-300 rounded-lg px-3 py-2.5" />
              </div>
            </div>

            <div id="loadSummary" style="display:none" class="mt-4 bg-teal-50 border border-teal-200 text-teal-800 rounded-lg p-3 text-sm"></div>

            <div class="mt-6">
              <button id="to-step-3" class="btn btn-primary w-full" data-i18n="step2.nextBtn">Siguiente: Preferencias</button>
            </div>
          </div>
        </div>

        <!-- STEP 3 -->
        <div id="step-3" class="step-content" style="display:none">
          <div class="flex items-start justify-between gap-3">
            <div>
              <div class="eyebrow" data-i18n="step3.eyebrow">Paso 3 de 4</div>
              <h3 class="font-display font-bold text-lg text-ink" data-i18n="step3.title">3) Preferencias del sistema</h3>
            </div>
            <button id="back-step-2" type="button" class="btn btn-ghost shrink-0" data-i18n="nav.backArrow">← Atrás</button>
          </div>
          <div id="step3Help"></div>

          <label class="block mt-4 mb-1.5 text-sm font-semibold text-slate-700" data-i18n="step3.modeLabel">Sistema aislado o híbrido</label>
          <select id="systemMode" class="w-full border border-slate-300 rounded-lg px-3 py-2.5 bg-white">
            <option value="isolated" data-i18n="step3.modeIsolated">Aislado — Solo batería + panel</option>
            <option value="hybrid" selected data-i18n="step3.modeHybrid">Híbrido — Red + panel (ahorro)</option>
          </select>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            <div>
              <label class="block mb-1.5 text-sm font-semibold text-slate-700" data-i18n="step3.autonomyLabel">Días de autonomía (solo aislado)</label>
              <input id="autonomyDays" type="number" min="1" value="2" class="w-full border border-slate-300 rounded-lg px-3 py-2.5" />
            </div>
            <div>
              <label class="block mb-1.5 text-sm font-semibold text-slate-700"><span data-i18n="step3.dodLabel">Profundidad de descarga (DoD)</span><span class="gloss-hint" onclick="openGlossary('dod')" title="¿Qué es DoD?">ℹ</span></label>
              <select id="dod" class="w-full border border-slate-300 rounded-lg px-3 py-2.5 bg-white">
                <option value="0.5" data-i18n="step3.dodOpt50">50% (plomo ácido estándar)</option>
                <option value="0.8" selected data-i18n="step3.dodOpt80">80% (LiFePO4 moderno)</option>
                <option value="0.6" data-i18n="step3.dodOpt60">60%</option>
              </select>
            </div>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            <div>
              <label class="block mb-1.5 text-sm font-semibold text-slate-700" data-i18n="step3.invEffLabel">Eficiencia del inversor (%)</label>
              <input id="invEff" type="number" step="1" min="60" max="99" value="90" class="w-full border border-slate-300 rounded-lg px-3 py-2.5" />
            </div>
            <div>
              <label class="block mb-1.5 text-sm font-semibold text-slate-700" data-i18n="step3.panelEffLabel">Eficiencia del panel / STC (%)</label>
              <input id="panelEff" type="number" step="1" min="10" max="25" value="20" class="w-full border border-slate-300 rounded-lg px-3 py-2.5" />
            </div>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            <div>
              <label class="block mb-1.5 text-sm font-semibold text-slate-700" data-i18n="step3.sysLossLabel">Pérdidas del sistema (%)</label>
              <input id="systemLoss" type="number" step="0.1" min="0" max="60" value="14" class="w-full border border-slate-300 rounded-lg px-3 py-2.5" />
            </div>
            <div>
              <label class="block mb-1.5 text-sm font-semibold text-slate-700" data-i18n="step3.tempDerateLabel">Derate por temperatura (%)</label>
              <input id="tempDerate" type="number" step="1" min="0" max="30" value="12" class="w-full border border-slate-300 rounded-lg px-3 py-2.5" />
            </div>
          </div>

          <label class="block mt-4 mb-1.5 text-sm font-semibold text-slate-700" data-i18n="step3.cableDistLabel">Distancia paneles → controlador (m)</label>
          <input id="cableDistance" type="number" step="1" min="1" value="10" class="w-full border border-slate-300 rounded-lg px-3 py-2.5" />

          <div class="mt-6 p-4 md:p-5 rounded-2xl border border-[#EADFCB] bg-[#FFFBF4]">
            <h4 class="font-display font-semibold text-lg text-ink" data-i18n="step3.arrayTitle">Panel, controlador y voltaje AC</h4>
            <p class="text-sm text-slate-600 mt-1" data-i18n="step3.arrayHint">Estos datos sirven para dimensionar el lado de los paneles: cuántos paneles van en serie y en paralelo, qué breaker y qué cable necesita esa parte, si el controlador aguanta el voltaje de tus paneles y qué protección lleva la salida AC.</p>
            <div class="mt-3 rounded-xl bg-white/70 border border-[#EADFCB] p-3 text-sm text-slate-600 space-y-2">
              <p><strong class="text-slate-800" data-i18n="step3.stage1Title">¿Empiezas desde cero?</strong> <span data-i18n="step3.stage1Text">Deja los valores precargados (un panel típico de 450 W y un controlador de 150 V). Te dan un dimensionado orientativo para decidir qué comprar.</span></p>
              <p><strong class="text-slate-800" data-i18n="step3.stage2Title">¿Ya elegiste tus componentes?</strong> <span data-i18n="step3.stage2Text">Reemplaza los valores por los de tus equipos y vuelve a pulsar «Calcular dimensionado»: el informe se recalcula con tus datos reales y verás breaker, cable y strings exactos. Después usa «Guardar proyecto» para conservar el resultado.</span></p>
            </div>
            <details class="mt-3">
              <summary class="cursor-pointer text-sm font-semibold text-brand-700" data-i18n="step3.whereSummary">¿De dónde saco cada dato?</summary>
              <ul class="mt-2 text-sm text-slate-600 space-y-2 list-disc pl-5">
                <li><strong class="text-slate-800" data-i18n="step3.whereWpT">Potencia, Voc, Vmp e Isc del panel:</strong> <span data-i18n="step3.whereWpX">están en la etiqueta pegada en la parte trasera del panel y en su hoja de datos (datasheet), en la tabla de condiciones estándar «STC»: busca Pmax (potencia), Voc, Vmp e Isc.</span></li>
                <li><strong class="text-slate-800" data-i18n="step3.whereMpptT">Voc máx. del controlador:</strong> <span data-i18n="step3.whereMpptX">está en la ficha técnica del controlador MPPT, como «Max. PV open circuit voltage» (o «Voc máx.»). Si aún no tienes controlador, deja 150 V y elige uno que soporte más que el Voc en frío que calcula el informe.</span></li>
                <li><strong class="text-slate-800" data-i18n="step3.whereAcT">Voltaje AC de salida:</strong> <span data-i18n="step3.whereAcX">es el voltaje de la red eléctrica de tu país (el de un tomacorriente de tu casa, por ejemplo 120 V o 230 V) y debe coincidir con el del inversor que compres. Si dudas, pregunta a tu compañía eléctrica o mídelo con un multímetro en V AC, con cuidado.</span></li>
              </ul>
            </details>
            <div class="grid grid-cols-2 md:grid-cols-3 gap-x-4 gap-y-3 mt-4">
              <div><label class="flex items-end min-h-[2.75rem] md:min-h-[1.5rem] mb-1.5 text-sm font-semibold text-slate-700 leading-tight" data-i18n="step3.panelWpLabel">Potencia del panel (Wp)</label>
                <input id="panelUnitWp" type="number" step="1" min="50" value="450" class="w-full border border-slate-300 rounded-lg px-3" /></div>
              <div><label class="flex items-end min-h-[2.75rem] md:min-h-[1.5rem] mb-1.5 text-sm font-semibold text-slate-700 leading-tight"><span data-i18n="step3.panelVocLabel">Voc del panel (V)</span><span class="gloss-hint" onclick="openGlossary('voc')" title="¿Qué es Voc?">ℹ</span></label>
                <input id="panelVoc" type="number" step="0.1" min="5" value="49.5" class="w-full border border-slate-300 rounded-lg px-3" /></div>
              <div><label class="flex items-end min-h-[2.75rem] md:min-h-[1.5rem] mb-1.5 text-sm font-semibold text-slate-700 leading-tight"><span data-i18n="step3.panelVmpLabel">Vmp del panel (V)</span><span class="gloss-hint" onclick="openGlossary('vmp')" title="¿Qué es Vmp?">ℹ</span></label>
                <input id="panelVmp" type="number" step="0.1" min="5" value="41.5" class="w-full border border-slate-300 rounded-lg px-3" /></div>
              <div><label class="flex items-end min-h-[2.75rem] md:min-h-[1.5rem] mb-1.5 text-sm font-semibold text-slate-700 leading-tight"><span data-i18n="step3.panelIscLabel">Isc del panel (A)</span><span class="gloss-hint" onclick="openGlossary('isc')" title="¿Qué es Isc?">ℹ</span></label>
                <input id="panelIsc" type="number" step="0.1" min="1" value="11.5" class="w-full border border-slate-300 rounded-lg px-3" /></div>
              <div><label class="flex items-end min-h-[2.75rem] md:min-h-[1.5rem] mb-1.5 text-sm font-semibold text-slate-700 leading-tight"><span data-i18n="step3.mpptVocLabel">Voc máx. del controlador (V)</span><span class="gloss-hint" onclick="openGlossary('mppt')" title="¿Qué es MPPT?">ℹ</span></label>
                <input id="mpptVocMax" type="number" step="1" min="20" value="150" class="w-full border border-slate-300 rounded-lg px-3" /></div>
              <div><label class="flex items-end min-h-[2.75rem] md:min-h-[1.5rem] mb-1.5 text-sm font-semibold text-slate-700 leading-tight" data-i18n="step3.acVoltLabel">Voltaje AC de salida (V)</label>
                <select id="acVoltage" class="w-full border border-slate-300 rounded-lg px-3 bg-white">
                  <option value="100">100 V</option><option value="110">110 V</option><option value="115">115 V</option>
                  <option value="120" selected>120 V</option><option value="127">127 V</option>
                  <option value="220">220 V</option><option value="230">230 V</option><option value="240">240 V</option>
                </select></div>
            </div>
          </div>

          <div class="mt-6">
            <button id="calcAll" disabled class="btn btn-teal w-full" data-i18n="step3.calcBtn">Calcular dimensionado</button>
          </div>
          <p id="calcGateMsg" class="text-xs text-slate-500 mt-2"></p>
        </div>

        <!-- STEP 4 -->
        <div id="step-4" class="step-content" style="display:none">
          <div class="flex items-start justify-between gap-3">
            <div>
              <div class="eyebrow" data-i18n="step4.eyebrow">Resultado</div>
              <h3 class="font-display font-bold text-2xl text-ink" data-i18n="step4.title">4) Resultado &amp; Materiales</h3>
            </div>
            <button id="back-step-3" type="button" class="btn btn-ghost shrink-0" data-i18n="nav.backArrow">← Atrás</button>
          </div>

          <!-- Resumen compacto (v19: ya NO es sticky; se desplaza con la página) -->
          <div id="resultsArea" class="mt-4"></div>

          <!-- Acciones (v21): Guardar = acción principal; Exportar/Imprimir mismo tamaño en una fila -->
          <div class="grid grid-cols-2 gap-2 mt-4 sm:flex sm:flex-wrap sm:items-center">
            <button id="saveProject" type="button" class="btn btn-primary col-span-2 order-first sm:order-last sm:col-span-1 sm:ml-auto" data-i18n="step4.saveBtn">💾 Guardar proyecto</button>
            <button id="exportReport" type="button" class="btn btn-secondary" data-i18n="step4.exportBtn">⬇ Exportar TXT</button>
            <button id="printReport" type="button" class="btn btn-secondary" data-i18n="step4.printBtn">🖨 Imprimir</button>
          </div>
          <div id="saveMsg" class="text-xs text-slate-500 mt-2"></div>

          <!-- Pestañas principales: nada de scroll infinito, cada cosa en su lugar.
               Los degradados con flecha avisan si hay más pestañas fuera de pantalla. -->
          <div class="relative mt-6">
            <div id="step4TabScroll" class="flex gap-1 border-b border-slate-200 overflow-x-auto" onscroll="updateTabScrollHint()">
              <button type="button" onclick="setStep4Tab('diagram')" id="s4tab-diagram" class="px-3 py-2 text-sm font-semibold border-b-2 border-brand-500 text-brand-700 whitespace-nowrap" data-i18n="step4.tabDiagram">Diagrama e Instalación</button>
              <button type="button" onclick="setStep4Tab('materials')" id="s4tab-materials" class="px-3 py-2 text-sm font-semibold border-b-2 border-transparent text-slate-500 whitespace-nowrap" data-i18n="step4.tabMaterials">Materiales</button>
              <button type="button" onclick="setStep4Tab('formulas')" id="s4tab-formulas" class="px-3 py-2 text-sm font-semibold border-b-2 border-transparent text-slate-500 whitespace-nowrap" data-i18n="step4.tabFormulas">Fórmulas</button>
              <button type="button" onclick="setStep4Tab('tips')" id="s4tab-tips" class="px-3 py-2 text-sm font-semibold border-b-2 border-transparent text-slate-500 whitespace-nowrap" data-i18n="step4.tabTips">Consejos</button>
            </div>
            <div id="tabScrollHintLeft" style="display:none" class="pointer-events-none absolute left-0 top-0 bottom-2 w-8 bg-gradient-to-r from-white to-transparent flex items-center">
              <span class="text-slate-400 text-base">‹</span>
            </div>
            <div id="tabScrollHintRight" style="display:none" class="pointer-events-none absolute right-0 top-0 bottom-2 w-8 bg-gradient-to-l from-white to-transparent flex items-center justify-end">
              <span class="text-slate-400 text-base">›</span>
            </div>
          </div>

          <!-- TAB: Diagrama e Instalación -->
          <div id="s4panel-diagram" class="mt-4">

            <div class="flex gap-2 mb-3">
              <button type="button" onclick="setDiagramMode('free')" id="dmode-free" class="flex-1 sm:flex-none px-4 py-2 text-sm font-semibold rounded-lg bg-ink text-white transition" data-i18n="diagram.modeFree">Libre</button>
              <button type="button" onclick="setDiagramMode('wizard')" id="dmode-wizard" class="flex-1 sm:flex-none px-4 py-2 text-sm font-semibold rounded-lg bg-slate-100 text-slate-500 transition">
                <span data-i18n="diagram.modeWizard">Instalación Guiada</span>
                <span class="ml-1 text-[10px] font-bold bg-brand-500 text-white px-1.5 py-0.5 rounded align-middle">PRO</span>
              </button>
            </div>

            <div id="diagramFreeControls">
              <div class="grid grid-cols-3 gap-2 mb-2">
                <button type="button" onclick="setDiagramLayer('energy')" id="dlayer-energy" class="px-2 py-1.5 text-xs font-semibold rounded-lg bg-ink text-white transition">⚡ <span data-i18n="diagram.layerEnergy">Energía</span></button>
                <button type="button" onclick="setDiagramLayer('tools')" id="dlayer-tools" class="px-2 py-1.5 text-xs font-semibold rounded-lg bg-slate-100 text-slate-500 transition">🔧 <span data-i18n="diagram.layerTools">Herramientas</span></button>
                <button type="button" onclick="setDiagramLayer('ground')" id="dlayer-ground" class="px-2 py-1.5 text-xs font-semibold rounded-lg bg-slate-100 text-slate-500 transition">🌍 <span data-i18n="diagram.layerGround">Tierra</span></button>
              </div>
              <div class="grid grid-cols-2 gap-2 mb-3">
                <button type="button" onclick="setDiagramView('electrical')" id="dview-electrical" class="px-2 py-1.5 text-xs font-semibold rounded-lg bg-teal-600 text-white transition" data-i18n="diagram.viewElectrical">Diagrama Eléctrico</button>
                <button type="button" onclick="setDiagramView('iso')" id="dview-iso" class="px-2 py-1.5 text-xs font-semibold rounded-lg bg-slate-100 text-slate-500 transition" data-i18n="diagram.viewIso">Maqueta 3D ISO</button>
              </div>
            </div>

            <!-- v19: en PC el diagrama va a la izquierda y el inspector/asistente a la derecha;
                 en celular se apilan (diagrama arriba, inspector debajo). -->
            <!-- v28: con el diagrama eléctrico horizontal (PC) esta grilla pasa a una sola columna (clase diagram-wide,
                 la pone renderDiagram): diagrama arriba, inspector debajo. Maqueta 3D ISO y celular conservan lo de v19. -->
            <div id="diagramGrid" class="grid grid-cols-1 lg:grid-cols-[minmax(0,400px)_minmax(0,1fr)] gap-4 items-start">
            <div>
            <!-- El diagrama vive fuera de los dos modos: siempre visible en ambos -->
            <div id="diagramArea" class="bg-slate-50 border border-slate-200 rounded-xl p-3"></div>
            <p class="lg:hidden text-xs text-slate-400 mt-2 text-center" data-i18n="diagram.tapHint">👆 Toca cualquier componente del diagrama para ver una explicación sencilla</p>
            </div>

            <div>
            <!-- MODO LIBRE: inspector -->
            <div id="diagramModeFree">
              <!-- Guía visible solo en PC mientras no hay componente seleccionado (evita el hueco en blanco) -->
              <div id="inspPlaceholder" class="hidden lg:flex flex-col items-center justify-center text-center bg-slate-50 border border-dashed border-slate-300 rounded-xl p-10 text-slate-400 text-sm">
                <span class="text-3xl mb-2">👆</span>
                <span data-i18n="diagram.tapHint">👆 Toca cualquier componente del diagrama para ver una explicación sencilla</span>
              </div>
              <div id="diagramInspector" style="display:none" class="mt-3 lg:mt-0 bg-white border border-brand-200 rounded-xl p-4">
                <h5 id="inspTitle" class="font-display font-bold text-ink"></h5>
                <p id="inspDesc" class="text-sm text-slate-600 mt-1"></p>

                <div class="flex border-b border-slate-200 mt-3 gap-1">
                  <button type="button" onclick="setInspectorTab('specs')" id="inspTabSpecs" class="pb-2 px-2 text-xs font-semibold border-b-2 border-brand-500 text-brand-700">Especificaciones</button>
                  <button type="button" onclick="setInspectorTab('diag')" id="inspTabDiag" class="pb-2 px-2 text-xs font-semibold border-b-2 border-transparent text-slate-500">Diagnóstico</button>
                </div>

                <ul id="inspSpecs" class="text-sm text-slate-700 mt-3 space-y-2"></ul>
                <div id="inspDiag" style="display:none" class="mt-3 bg-amber-50 border border-amber-200 text-amber-800 text-xs rounded-lg p-3"></div>

                <div class="mt-4 grid grid-cols-1 gap-2">
                  <a id="inspBuyComponent" href="#" target="_blank" rel="noopener noreferrer" style="display:none" class="flex items-center justify-between gap-3 bg-teal-700 hover:bg-teal-800 text-white rounded-lg p-3 transition">
                    <span id="inspBuyComponentText" class="text-xs font-semibold"></span>
                    <span class="bg-[#FF9900] text-white text-xs font-bold px-2.5 py-1 rounded shrink-0">🛒 Amazon</span>
                  </a>
                  <a id="inspBuyTool" href="#" target="_blank" rel="noopener noreferrer" style="display:none" class="flex items-center justify-between gap-3 bg-ink hover:bg-slate-800 text-white rounded-lg p-3 transition">
                    <span id="inspToolText" class="text-xs font-semibold"></span>
                    <span class="bg-[#FF9900] text-white text-xs font-bold px-2.5 py-1 rounded shrink-0">🛒 Amazon</span>
                  </a>
                </div>
                <p id="inspGround" style="display:none" class="mt-2 text-xs text-brand-700"></p>
              </div>
            </div>

            <!-- MODO ASISTENTE: visible para todos, solo habilitado si es Pro -->
            <div id="diagramModeWizard" style="display:none" class="mt-3 lg:mt-0">
              <div id="wizardProLock" style="display:none" class="bg-amber-50 border border-amber-200 rounded-xl p-4 text-center mb-3">
                <p class="font-display font-bold text-ink" data-i18n="wizard.proLockTitle">🔒 Función exclusiva del plan Pro</p>
                <p class="text-sm text-slate-600 mt-1" data-i18n="wizard.proLockDesc">La Instalación Guiada paso a paso está disponible solo para el plan Pro.</p>
              </div>

              <div class="bg-white border border-slate-200 rounded-xl overflow-hidden">
                <div class="bg-blue-600 p-4 text-white">
                  <h4 class="font-display font-bold" data-i18n="wizard.title">📋 Instalación Guiada</h4>
                  <div class="w-full bg-blue-800 rounded-full h-2 mt-2">
                    <div id="wizardProgress" class="bg-emerald-400 h-2 rounded-full transition-all duration-500" style="width:20%"></div>
                  </div>
                  <p class="text-[11px] text-blue-200 mt-1.5 text-right" id="wizardStepCounter">Paso 1 de 5</p>
                </div>
                <div class="p-4" id="wizardContent"></div>
                <div class="p-4 border-t border-slate-200 bg-slate-50">
                  <button id="wizardNextBtn" type="button" onclick="nextWizardStep()" class="w-full bg-slate-300 text-slate-500 font-bold py-3 text-sm rounded-lg cursor-not-allowed" disabled data-i18n="wizard.completeChecklist">Completar Checklists para Continuar</button>
                </div>
              </div>
            </div>
            </div><!-- /columna derecha -->
            </div><!-- /grid diagrama + inspector -->
          </div>

          <!-- TAB: Materiales -->
          <div id="s4panel-materials" class="mt-4" style="display:none">
            <div id="componentsExplain" class="text-sm"></div>
          </div>

          <!-- TAB: Fórmulas -->
          <div id="s4panel-formulas" class="mt-4" style="display:none">
            <pre id="formulas" class="whitespace-pre-wrap bg-slate-900 text-slate-100 text-xs rounded-lg p-4 overflow-auto font-mono">// Energía diaria (Wh) = Σ(Potencia_W * horas/día * cantidad)
// Energía útil necesaria = Energía diaria / (η_inversor * (1 - pérdidas_sistema))
// Potencia de paneles requerida (Wp) = Energía diaria / (PSH * η_panel * (1 - derate_temp) * (1 - pérdidas_sistema))
// Capacidad batería (Ah) = (Energía diaria * Días_autonomía) / (V_sistema * DoD)
// Corriente MPPT (A, salida hacia la batería) = (Wp_INSTALADO * 1.25) / V_sistema   (Wp instalado = paneles enteros × Wp del panel)
// Paneles N = ceil(Wp_requerido / Wp_panel) ; Voc_frío = Voc * 1.12
// Ns_max = floor(Voc_máx_controlador / Voc_frío) ; Ns_min = ceil((1.2 * V_batería + 5) / Vmp)
// Se elige Ns entre Ns_min y Ns_max con menos paneles totales (empate: más en serie) ; Np = ceil(N / Ns)
// Isc_arreglo = Np * Isc ; Breaker DC = Isc_arreglo * 1.25 * 1.25 (a valor estándar) ; fusible por string si Np &gt;= 3
// Cable lado paneles = mayor entre: soporta el breaker Y sección &gt;= 2 * L * I * 0.0175 / (3% * V_string)
// Cable lado batería = soporta el fusible principal (ampacidad &gt;= fusible)
// Protección AC (A) = (P_inversor / V_AC) * 1.25, con V_AC elegido en el Paso 3
// Potencia pico simultánea (W) = Σ(Potencia*cantidad) + excedente de arranque SOLO de la carga inductiva mayor (Potencia*cantidad*(factor_pico-1))
// Potencia sugerida del inversor = Potencia pico simultánea * 1.15, redondeado a 100W</pre>
          </div>

          <!-- TAB: Consejos -->
          <div id="s4panel-tips" class="mt-4" style="display:none">
            <div id="practicalTips" class="text-sm text-slate-600"></div>
          </div>
        </div>

<div id="glossaryModal" onclick="if(event.target===this) closeGlossary()">
  <div id="glossaryPanel">
    <div class="flex items-start justify-between gap-3 mb-2">
      <h3 class="font-display font-bold text-xl text-ink" data-i18n="glossary.title">📖 Glosario de siglas eléctricas</h3>
      <button type="button" class="btn btn-ghost" onclick="closeGlossary()" data-i18n="glossary.close">Cerrar</button>
    </div>
    <div id="glossaryBody"></div>
  </div>
</div>
        <!-- Modal de seguridad del Asistente Pro -->
        <div id="securityModal" style="display:none" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
          <div class="bg-white rounded-xl shadow-2xl max-w-md w-full p-6 border-t-4 border-red-500">
            <div class="flex items-center gap-3 mb-3">
              <span class="text-2xl">⚠️</span>
              <h3 class="text-lg font-display font-bold text-slate-800" data-i18n="wizard.modalTitle">¡Regla de Oro Crítica!</h3>
            </div>
            <p class="text-sm text-slate-600 mb-4" data-i18n="wizard.modalText">El Inversor/Controlador puede dañarse si recibe energía de los paneles sin antes haber detectado las baterías conectadas.</p>
            <div class="bg-slate-50 p-3 rounded-lg border border-slate-200 mb-4 text-xs font-semibold text-slate-700" data-i18n="wizard.modalOrder">✅ Orden obligatorio: BATERÍAS PRIMERO.</div>
            <button type="button" onclick="closeSecurityModal()" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 rounded-lg transition" data-i18n="wizard.modalBtn">Entendido, asumo la responsabilidad</button>
          </div>
        </div>

      </form>
    </main>

    <!-- ASIDE -->
    <aside id="liveSummaryAside" class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6 h-fit lg:sticky lg:top-6">
      <h3 class="font-display font-semibold text-sm text-slate-700" data-i18n="aside.title">Resumen en tiempo real</h3>
      <div id="summaryBox" class="text-xs text-slate-400 mt-1" data-i18n="aside.placeholder">Rellena los pasos para ver resultados.</div>

      <div class="mt-5">
        <span class="text-xs font-semibold text-slate-500 uppercase tracking-wide" data-i18n="aside.energyLabel">Energía diaria</span>
        <div id="quickEnergy" class="font-mono tabular text-lg font-bold text-ink mt-1">—</div>
      </div>
      <div class="mt-4 pt-4 border-t border-slate-100">
        <span class="text-xs font-semibold text-slate-500 uppercase tracking-wide" data-i18n="aside.panelsLabel">Paneles sugeridos</span>
        <div id="quickPanels" class="font-mono tabular text-lg font-bold text-brand-600 mt-1">—</div>
      </div>
      <div class="mt-4 pt-4 border-t border-slate-100">
        <span class="text-xs font-semibold text-slate-500 uppercase tracking-wide" data-i18n="aside.battLabel">Batería sugerida</span>
        <div id="quickBatt" class="font-mono tabular text-lg font-bold text-teal-700 mt-1">—</div>
      </div>
      <div class="mt-4 pt-4 border-t border-slate-100">
        <span class="text-xs font-semibold text-slate-500 uppercase tracking-wide" data-i18n="aside.mpptLabel">MPPT / Cable</span>
        <div id="quickMppt" class="font-mono tabular text-sm font-bold text-ink mt-1">—</div>
      </div>

      <div class="mt-6 pt-4 border-t border-slate-100 text-xs text-slate-400" data-i18n="aside.examples">
        Ejemplos: Bombilla LED 10W · TV 100W · Nevera 150–300W · Microondas 1000W · Bomba 750W
      </div>
    </aside>
  </div>
  </div>

  <footer class="text-center text-xs text-slate-400 mt-8" data-i18n="footer.text">Quick Solar Solution — motor de cálculo técnico, cuentas y guardado de proyectos.</footer>
</div>

<script src="config.js" onerror="void 0"></script>
<script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script>
  let currentLang = (navigator.language||'es').toLowerCase().startsWith('en') ? 'en' : 'es';
  let lastRenderParams = null;
  const ORIGINAL_ES = {};
  const ORIGINAL_ES_HTML = {};

  // v23: se quitó HELP_TEXT/t() (código muerto de la ayuda rota) — reemplazado por STEP_HELP + GLOSSARY.

  const EN_UI = {
    'glossary.title':'📖 Electrical acronym glossary','glossary.close':'Close',
    'header.eyebrow':'Solar sizer','step1.eyebrow':'Step 1 of 4','step2.eyebrow':'Step 2 of 4','step3.eyebrow':'Step 3 of 4','header.title':'Quick Solar Solution','step3.arrayTitle':'Panel, controller and AC voltage','step3.arrayHint':'This data is used to size the panel side: how many panels go in series and in parallel, which breaker and cable that part needs, whether the controller can handle your panels\' voltage, and which protection the AC output gets.','step3.stage1Title':'Starting from zero?','step3.stage1Text':'Keep the pre-filled values (a typical 450 W panel and a 150 V controller). They give you an indicative sizing to decide what to buy.','step3.stage2Title':'Already chose your components?','step3.stage2Text':'Replace the values with those of your equipment and press "Calculate sizing" again: the report is recalculated with your real data and you get exact breaker, cable and strings. Then use "Save project" to keep the result.','step3.whereSummary':'Where do I find each value?','step3.whereWpT':'Panel power, Voc, Vmp and Isc:','step3.whereWpX':'they are on the label on the back of the panel and in its datasheet, in the "STC" (standard test conditions) table: look for Pmax (power), Voc, Vmp and Isc.','step3.whereMpptT':'Controller max. Voc:','step3.whereMpptX':'it is in the MPPT controller datasheet as "Max. PV open circuit voltage" (or "Max Voc"). If you have no controller yet, keep 150 V and pick one that handles more than the cold Voc the report calculates.','step3.whereAcT':'AC output voltage:','step3.whereAcX':'it is your country\'s mains voltage (what a wall outlet at home delivers, e.g. 120 V or 230 V) and must match the inverter you buy. If unsure, ask your utility or measure it with a multimeter on V AC, carefully.','step3.panelWpLabel':'Panel power (Wp)','step3.panelVocLabel':'Panel Voc (V)','step3.panelVmpLabel':'Panel Vmp (V)','step3.panelIscLabel':'Panel Isc (A)','step3.mpptVocLabel':'Controller max. Voc (V)','step3.acVoltLabel':'AC output voltage (V)',
    'header.subtitle':'Technical sizing for off-grid and hybrid solar power systems.',
    'landing.badge':'Professional solar PV sizing',
    'landing.h2':'Design your own solar system with technical precision',
    'landing.p':'Panels, batteries, MPPT controller and cable gauge — calculated and saved to your account.',
    'terms.checkboxLabel1':'I have read and accept the',
    'terms.checkboxLink':'Terms of Service',
    'terms.checkboxLabel2':'I understand that Quick Solar Solution is a guidance and estimation tool, and that the decision to implement any system is my own responsibility.',
    'auth.emailLabel':'Email address',
    'auth.emailPlaceholder':'you@email.com',
    'auth.submitBtn':'Sign in / Create account',
    'auth.hint':"No password: we'll email you a verification code. If it's your first time, your account is created automatically.",
    'auth.codeLabel':'Verification code','auth.codePlaceholder':'000000','auth.verifyBtn':'Verify code','auth.backToEmail':'Use a different email',
    'terms.modalTitle':'Quick Solar Solution Terms of Service',
    'terms.updated':'Last updated: 08/25/2026 — Version 1.0',
    'terms.closeBtn':'Close',
    'pricing.freeTitle':'Free','pricing.freeSub':'Explore the tool',
    'pricing.freeLi1':'✓ Browse the entire wizard','pricing.freeLi2':'✓ See what data each step asks for','pricing.freeLi3':'✗ Calculate the sizing',
    'pricing.singleBadge':'1 payment','pricing.singleTitle':'Single use','pricing.singleSub':'For a one-off project',
    'pricing.singleLi1':'✓ 1 full calculation','pricing.singleLi2':'✓ Connection diagram','pricing.singleLi3':'✓ Save and export that result',
    'pricing.proTitle':'Pro','pricing.proSub':'For installers, frequent use',
    'pricing.proLi1':'✓ Unlimited calculations','pricing.proLi2':'✓ Unlimited saved projects','pricing.proLi3':'✓ Scenario comparison','pricing.proLi4':'✓ Export branded PDF',
    'pricing.footnote':'You can start for free and buy a single use or Pro anytime, from inside the app.',
    'session.label':'Session:','session.buySingle':'Buy 1 use','session.upgrade':'Upgrade to Pro','session.myProjects':'My projects','session.signOut':'Sign out',
    'session.myProjectsHeading':'My saved projects',
    'nav.reset':'Start over','nav.step1':'1. Basic info','nav.step2':'2. Loads','nav.step3':'3. Preferences','nav.step4':'4. Result','nav.back':'Back',
    'step1.title':'1) Basic info','step1.desc':"If you don't know the technical parameters, use the defaults.",
    'step1.projectNameLabel':'Project / home name','step1.projectNamePlaceholder':'E.g.: San Pedro House',
    'step1.cityLabel':'Location / City (optional)','step1.cityPlaceholder':'E.g.: Kingston, Jamaica',
    'step1.autoPshBtn':'☀ Calculate real PSH for this city',
    'step1.pshLabel':'Climate zone / Irradiance (PSH)',
    'step1.pshOpt0':'-- choose or enter manually --','step1.pshOpt1':'Cloudy / High latitude (~2.8 h/day)','step1.pshOpt2':'Temperate (~4.3 h/day)','step1.pshOpt3':'Subtropical / Caribbean (~5 h/day)','step1.pshOpt4':'Desert / Very sunny region (~6.3 h/day)',
    'step1.pshManualLabel':'If you know the irradiance (PSH) h/d','step1.pshManualPlaceholder':'E.g.: 4','step1.pshNote':'These are indicative annual averages, not the weakest month of the year (usually winter). If the system must run year-round without exception, size using your area\'s lowest-radiation month, not the average.',
    'step1.voltageLabel':'Preferred system voltage','step1.voltOpt12':'12 V (small)','step1.voltOpt24':'24 V (common)','step1.voltOpt48':'48 V (more efficient at higher power)',
    'step1.voltageHint':'If your system needs more than ~70 A, the app automatically raises the voltage to 48 V when calculating (and tells you why) — no need to change it yourself.',
    'step1.nextBtn':'Next: Loads',
    'step2.title':'2) Loads / Appliances','step2.desc':'Add appliances: power (W) and daily hours of use.',
    'step2.presetLabel':'Use a quick preset list','step2.presetOpt0':'-- choose preset --','step2.presetOpt1':'Small house (lighting + TV + small fridge)','step2.presetOpt2':'Average family home','step2.presetOpt3':'Small office',
    'step2.listTitle':'Appliance list',
    'step2.appNamePlaceholder':'Name (e.g.: 10W LED bulb)','step2.appPowerPlaceholder':'Power (W)','step2.appHoursPlaceholder':'Hours/day','step2.appQtyPlaceholder':'Qty.',
    'step2.inductiveLabel':'Motor/startup','step2.addBtn':'Add','step2.inductiveHint':'Check "Motor/startup" for pumps, fridges or compressors.',
    'step2.haveLabel':'Do you already have batteries / inverter?','step2.haveOpt0':'No','step2.haveOpt1':'Some (specify below)','step2.haveOpt2':'Yes, I have it all',
    'step2.haveNotesLabel':'Model / Capacity (optional)','step2.nextBtn':'Next: Preferences',
    'step3.title':'3) System preferences','step3.modeLabel':'Off-grid or hybrid system',
    'step3.modeIsolated':'Off-grid — Battery + panel only','step3.modeHybrid':'Hybrid — Grid + panel (savings)',
    'step3.autonomyLabel':'Days of autonomy (off-grid only)','step3.dodLabel':'Depth of discharge (DoD)',
    'step3.dodOpt50':'50% (standard lead-acid)','step3.dodOpt80':'80% (modern LiFePO4)','step3.dodOpt60':'60%',
    'step3.invEffLabel':'Inverter efficiency (%)','step3.panelEffLabel':'Panel / STC efficiency (%)',
    'step3.sysLossLabel':'System losses (%)','step3.tempDerateLabel':'Temperature derate (%)',
    'step3.cableDistLabel':'Distance panels → controller (m)','step3.calcBtn':'Calculate sizing',
    'step4.title':'4) Result & Materials','step4.exportBtn':'⬇ Export TXT','step4.printBtn':'🖨 Print','step4.saveBtn':'💾 Save project','step4.eyebrow':'Result','nav.backArrow':'← Back',
    'step4.formulasHeading':'Formulas and parameters used','step4.componentsHeading':'Components and connection',
    'step4.diagramHeading':'Connection diagram','step4.tipsHeading':'Practical tips',
    'aside.title':'Live summary','aside.placeholder':'Fill in the steps to see results.',
    'aside.energyLabel':'Daily energy','aside.panelsLabel':'Suggested panels','aside.battLabel':'Suggested battery','aside.mpptLabel':'MPPT / Cable',
    'aside.examples':'Examples: 10W LED bulb · 100W TV · 150–300W fridge · 1000W microwave · 750W pump',
    'diagram.tapHint':'👆 Tap any component in the diagram for a simple explanation',
    'diagram.modeFree':'Free','diagram.modeWizard':'Guided Installation',
    'diagram.layerEnergy':'Energy','diagram.layerTools':'Tools','diagram.layerGround':'Ground',
    'diagram.viewElectrical':'Electrical Diagram','diagram.viewIso':'3D ISO Mockup',
    'step4.tabDiagram':'Diagram & Installation','step4.tabMaterials':'Materials','step4.tabFormulas':'Formulas','step4.tabTips':'Tips',
    'wizard.title':'📋 Guided Installation','wizard.completeChecklist':'Complete Checklists to Continue',
    'wizard.proLockTitle':'🔒 Pro plan exclusive feature',
    'wizard.proLockDesc':'The step-by-step Guided Installation is available only on the Pro plan.',
    'wizard.modalTitle':'Critical Golden Rule!',
    'wizard.modalText':'The inverter/controller can be damaged if it receives energy from the panels without first detecting the connected batteries.',
    'wizard.modalOrder':'✅ Mandatory order: BATTERIES FIRST.',
    'wizard.modalBtn':'Understood, I take responsibility',
    'footer.text':'Quick Solar Solution — technical sizing engine, accounts and saved projects.'
  };

  const EN_HTML = {
    'terms.c1':'<strong>1. Acceptance of Terms.</strong> By checking the acceptance box and/or using Quick Solar Solution ("the Platform"), you declare that you have read, understood, and fully accepted these Terms. If you do not agree, you must not use the Service.',
    'terms.c2':'<strong>2. Service Description.</strong> Quick Solar Solution is an estimation and guidance tool for preliminary sizing of photovoltaic systems. Results are estimates based on general-purpose engineering formulas and the data the User enters. Quick Solar Solution does <strong>not</strong> constitute a certified engineering design, a guarantee of performance or safety, nor does it replace the assessment of a licensed electrical engineer or electrician.',
    'terms.c3':'<strong>3. Guidance only — User responsibility.</strong> Decisions to implement, purchase equipment, or hire installers based on the Platform\'s results are the User\'s sole responsibility. Before energizing any electrical installation, the User must validate the results with a professional licensed in their locality and comply with all applicable regulations. Poorly sized or poorly installed systems can cause fires, electric shock, damage, or injury; Quick Solar Solution assumes no responsibility for such consequences.',
    'terms.c4':'<strong>4. Disclaimer of warranties.</strong> The Service is provided "as is" and "as available," without express or implied warranties of accuracy, completeness, or freedom from errors in the calculations.',
    'terms.c5':'<strong>5. Limitation of liability.</strong> To the maximum extent permitted by law, Quick Solar Solution will not be liable for direct, indirect, incidental, or consequential damages arising from use of the Service or decisions made based on it. Total accumulated liability will not exceed the amount paid by the User in the last 12 months.',
    'terms.c6':'<strong>6. Indemnification.</strong> The User agrees to indemnify Quick Solar Solution against claims arising from breach of these Terms or from damages to third parties caused by implementing a system without proper professional validation.',
    'terms.c7':'<strong>7. No professional relationship.</strong> Use of the Platform does not create an engineering, certified consulting, or licensed technical advisory relationship between the User and Quick Solar Solution.',
    'terms.c8':'<strong>8. Record of acceptance.</strong> By checking the box, the User grants express consent. This record is stored together with the date, time, and account identifier.',
    'terms.c9':'<strong>9. Intellectual property.</strong> The code, design, algorithms, and "Quick Solar Solution" mark are the property of their owners. Copying, reverse engineering, or commercial exploitation without prior written authorization is prohibited.',
    'terms.c10':'<strong>10. Payments and subscriptions.</strong> Payments are processed by a third-party payment provider. Subscriptions renew automatically unless canceled by the User.',
    'terms.c11':'<strong>11. Changes.</strong> Quick Solar Solution may modify these Terms at any time; continued use after publication constitutes acceptance of the new Terms.',
    'terms.c12':'<strong>12. Governing law.</strong> [To be completed with the business owner\'s actual jurisdiction, with local legal advice.]',
    'terms.c13':'<strong>13. Contact.</strong> [Pending: business contact email.]'
  };

  const MSG = {
    es: {
      'stepHelp.summary':'¿Qué se hace en este paso?','stepHelp.goal':'Objetivo','stepHelp.what':'Qué se hace','stepHelp.need':'Qué necesitas',
      'voltHelp.summary':'¿Qué diferencia hay entre 12 V, 24 V y 48 V?',
      'results.dailyEnergy':'Energía diaria','results.usefulEnergy':'Energía útil (post inversor/pérdidas)',
      'results.battSuggested':'Batería sugerida','results.panelsRequired':'Paneles requeridos',
      'results.mpptEstimated':'Corriente MPPT estimada','results.cableSuggestedWithDist':'Cable lado paneles ({d} m)',
      'results.peakSimultaneous':'Potencia pico simultánea','results.inverterPower':'Potencia de inversor sugerida',
      'results.energyPerDay':'{wh} Wh/día','results.panelsApprox':'{wp} Wp aprox.',
      'table.component':'Componente','table.spec':'Especificación estimada',
      'table.panelArray':'Arreglo de paneles','table.panelArraySpec':'{n} paneles de {u} Wp = {tot} Wp · {np} string(s) de {ns} en serie · Voc en frío ≈ {voc} V · Vmp ≈ {vmp} V · Isc del arreglo {isc} A',
      'table.battBank':'Banco de baterías','table.battBankSpec':'{ah} Ah a {v} V (DoD aplicado ya incluido)',
      'table.mppt':'Controlador MPPT','table.mpptSpec':'Corriente mínima recomendada: {a} A (deja margen del 20-25% adicional)',
      'table.inverter':'Inversor','table.inverterSpec':'Potencia continua sugerida: {w} W (con margen de seguridad para arranques)',
      'table.wiringPanel':'Cableado DC lado paneles','table.wiringPanelSpec':'{gauge} para {d} m — soporta el breaker de {a} A y cumple caída de tensión ≤ 3 %','table.wiringPanelSpecDrop':'{gauge} para {d} m — lo define la caída de tensión ≤ 3 % (sección mínima {mm2} mm²)',
      'table.wiringBatt':'Cableado DC lado batería','table.wiringBattSpec':'{gauge} — soporta el fusible de {a} A (batería ↔ controlador ↔ inversor). Mantén estos cables lo más cortos posible: la app no pide esa distancia.',
      'table.stringFuse':'Fusible por string','table.stringFuseSpec':'Fusible de {a} A en cada uno de los {np} strings en paralelo',
      'wizard.tipsTitle':'💡 Tips de esta fase',
      'warn.autonomy':'Autonomía de {d} días: el banco resultante es de {nom} kWh nominales ({use} kWh utilizables). Es mucho para una vivienda: cada día extra encarece el sistema; revisa si de verdad lo necesitas (lo habitual son 2–3 días).',
      'warn.voltageAuto':'Se ajustó el voltaje del sistema de {vFrom} V a {vTo} V: a {vFrom} V la corriente del controlador habría sido de {aFrom} A, más de lo que ofrece un solo controlador comercial. A {vTo} V baja a {aTo} A (misma potencia, mitad de corriente). Si ya tienes equipo de {vFrom} V, puedes volver a elegirlo en el Paso 3 y recalcular — vas a necesitar repartir el arreglo en varios controladores.',
      'warn.voltageMulti':'A {v} V la corriente del controlador ({a} A) sigue superando lo que ofrece un solo controlador MPPT comercial. Este dimensionado necesita repartir el arreglo en {count} controladores en paralelo, de ~{each} A cada uno.',
      'warn.vocTooHigh':'El Voc en frío de un solo panel ({voc} V) supera el máximo de tu controlador ({max} V): con ese controlador no es seguro conectar ese panel.',
      'warn.noStringFits':'Ninguna combinación de paneles en serie cumple a la vez el voltaje mínimo de arranque y el Voc máximo del controlador (se usaron {ns} en serie). Revisa el modelo de panel o de controlador.',
      'warn.defaultPanel':'El lado paneles se calculó con datos TÍPICOS de un panel de 450 W y un controlador de 150 V. Reemplázalos en el Paso 3 por los de tu etiqueta/ficha y vuelve a pulsar «Calcular dimensionado» para que breaker, cable y strings sean exactos.',
      'pshAuto.needCity':'Escribe una ciudad primero.',
      'pshAuto.geocoding':'Buscando la ubicación…',
      'pshAuto.fetching':'Consultando datos solares reales…',
      'pshAuto.success':'☀ PSH real: {psh} h/día (mes más desfavorable: {month}, {city})',
      'pshAuto.cityNotFound':'No se encontró esa ciudad. Puedes seguir con el selector o escribir el PSH manual.',
      'pshAuto.serviceError':'No se pudo obtener el dato ahora mismo. Puedes intentarlo de nuevo, o seguir con el selector o escribir el PSH manual.',
      'tips.derateNote':'El derate térmico y las pérdidas del sistema se calculan por separado.',
      'tips.inductiveYes':'Detectamos cargas con motor/arranque: dimensiona el inversor considerando al menos 2-3x la potencia nominal.',
      'tips.inductiveNo':'No se marcaron cargas inductivas; si agregas bombas o neveras, márcalas para mayor precisión.',
      'tips.preDesignNote':'Esta es una estimación de pre-diseño. Para instalación final, valida con datos reales.',
      'tips.qtyNote':'Recuerda: la cantidad de cada carga (ej. "2 ventiladores") ya se multiplica automáticamente en el cálculo.',
      'wizard.stepCounter':'Paso {n} de {total}','wizard.confirmNext':'Confirmar y Siguiente Paso','wizard.finished':'¡Instalación Finalizada!',
      'wizard.finishedAlert':'¡Felicidades! Sistema fotovoltaico configurado de forma segura.','wizard.proLockBtn':'Actualizar a Pro',
      'wizard.completeChecklist':'Completar Checklists para Continuar',
      'diagram.panels':'Paneles solares','diagram.panelsSub':'{wp} Wp instalados',
      'diagram.mppt':'Controlador MPPT','diagram.mpptSub':'{a} A · {gauge}',
      'diagram.battery':'Banco de baterías','diagram.batterySub':'{ah} Ah @ {v} V',
      'diagram.inverter':'Inversor','diagram.inverterSub':'{p}% eficiencia',
      'diagram.loads':'Cargas del hogar','diagram.loadsSub':'{n} cargas registradas',
      'diagram.grid':'Red Pública AC','diagram.gridSub':'Protección de entrada {a} A','diagram.acPanel':'Tablero AC',
      'table.dcBreaker':'Protección DC (paneles)','table.dcBreakerSpec':'Breaker DC de {a} A (Isc del arreglo {isc} A × 1,25 × 1,25), tensión nominal DC ≥ {voc} V, entre paneles y controlador',
      'table.battFuse':'Fusible principal batería','table.battFuseSpec':'Fusible de {a} A entre batería e inversor',
      'table.acBreaker':'Protección AC (salida)','table.acBreakerSpec':'Diferencial + magnetotérmico de {a} A ({v} V AC) en la salida hacia el tablero de la casa',
      'table.gridBreaker':'Protección entrada red','table.gridBreakerSpec':'Breaker de {a} A ({v} V AC) entre la red pública y el inversor híbrido',
      'cable.veryHighCurrent':'Corriente muy alta para un solo conductor — divide el arreglo en sub-strings o usa varios controladores/inversores en paralelo',
      'plan.free':'Plan: Free (solo exploración)','plan.singleUse':'Plan: Uso único ({n} disponible)','plan.pro':'Plan: Pro',
      'gate.pro':'','gate.singleUse':'Te queda {n} uso disponible. Al calcular, se descuenta automáticamente.',
      'gate.free':'Estás en el plan Free: puedes recorrer todo el wizard, pero calcular el dimensionado requiere comprar 1 uso o el plan Pro.',
      'gate.lastUse':'Este era tu último uso disponible. Para calcular un nuevo dimensionado necesitas comprar otro uso o el plan Pro.',
      'gate.needPlan':'Necesitas comprar 1 uso o el plan Pro para calcular el dimensionado.','gate.needLoad':'Agrega al menos una carga',
      'appliance.noPowerConfirm':'No especificaste potencia (W). ¿Usar estimado de 100 W?','appliance.defaultName':'Carga sin nombre',
      'appliance.remove':'Eliminar','appliance.estimated':'estimado','appliance.summary':'Energía diaria estimada: {wh} Wh/día ({n} cargas)',
      'reset.confirm':'¿Limpiar todos los datos y volver al inicio?',
      'auth.termsRequired':'Debes aceptar los Términos de Servicio para continuar.','auth.enterEmail':'Escribe tu email',
      'auth.sending':'Enviando…','auth.linkSent':'Código enviado. Revisa tu bandeja de entrada y spam.',
      'auth.errorPrefix':'Error: ','auth.unexpectedError':'Error inesperado: ',
      'auth.configIncomplete':'Configuración de Supabase incompleta.',
      'paddle.notLoaded':'Paddle.js no cargó. Revisa tu conexión o bloqueador de anuncios.',
      'paddle.configMissingPro':'Falta configurar PADDLE_PRICE_ID_PRO en el código.',
      'paddle.configMissingSingle':'Falta configurar PADDLE_PRICE_ID_SINGLE_USE en el código.',
      'paddle.processing':'Pago recibido, actualizando tu plan…',
      'projects.loading':'Cargando…','projects.errorPrefix':'Error: ','projects.none':'Aún no tienes proyectos guardados.',
      'projects.noName':'Sin nombre','projects.loadBtn':'Cargar',
      'save.needLogin':'Debes iniciar sesión arriba para guardar.','save.calcFirst':'Primero calcula el dimensionado.',
      'save.configIncomplete':'Configuración de Supabase incompleta.',
      'save.freeLimitReached':'Límite del plan gratis alcanzado. Usa el botón "Actualizar a Pro" para guardar ilimitados.',
      'save.defaultName':'Proyecto sin nombre','save.errorPrefix':'Error al guardar: ','save.ok':'Proyecto guardado ✔',
      'config.missing':'Falta configurar SUPABASE_URL y SUPABASE_ANON_KEY.'
    },
    en: {
      'stepHelp.summary':'What happens in this step?','stepHelp.goal':'Goal','stepHelp.what':'What you do','stepHelp.need':'What you need',
      'voltHelp.summary':'What is the difference between 12 V, 24 V and 48 V?',
      'results.dailyEnergy':'Daily energy','results.usefulEnergy':'Usable energy (after inverter/losses)',
      'results.battSuggested':'Suggested battery','results.panelsRequired':'Panels required',
      'results.mpptEstimated':'Estimated MPPT current','results.cableSuggestedWithDist':'Panel-side cable ({d} m)',
      'results.peakSimultaneous':'Peak simultaneous power','results.inverterPower':'Suggested inverter power',
      'results.energyPerDay':'{wh} Wh/day','results.panelsApprox':'approx. {wp} Wp',
      'table.component':'Component','table.spec':'Estimated specification',
      'table.panelArray':'Panel array','table.panelArraySpec':'{n} panels of {u} Wp = {tot} Wp · {np} string(s) of {ns} in series · cold Voc ≈ {voc} V · Vmp ≈ {vmp} V · array Isc {isc} A',
      'table.battBank':'Battery bank','table.battBankSpec':'{ah} Ah at {v} V (DoD applied)',
      'table.mppt':'MPPT controller','table.mpptSpec':'Minimum recommended current: {a} A',
      'table.inverter':'Inverter','table.inverterSpec':'Suggested continuous power: {w} W (safety margin for startups included)',
      'table.wiringPanel':'DC wiring, panel side','table.wiringPanelSpec':'{gauge} for {d} m — carries the {a} A breaker and meets ≤ 3 % voltage drop','table.wiringPanelSpecDrop':'{gauge} for {d} m — set by the ≤ 3 % voltage drop (minimum section {mm2} mm²)',
      'table.wiringBatt':'DC wiring, battery side','table.wiringBattSpec':'{gauge} — carries the {a} A fuse (battery ↔ controller ↔ inverter). Keep these cables as short as possible: the app does not ask for that distance.',
      'table.stringFuse':'String fuse','table.stringFuseSpec':'{a} A fuse on each of the {np} parallel strings',
      'wizard.tipsTitle':'💡 Tips for this phase',
      'warn.autonomy':'{d} days of autonomy: the resulting bank is {nom} kWh nominal ({use} kWh usable). That is a lot for a home: each extra day makes the system much costlier; check whether you really need it (2–3 days is usual).',
      'warn.voltageAuto':'The system voltage was adjusted from {vFrom} V to {vTo} V: at {vFrom} V the controller current would have been {aFrom} A, more than a single commercial controller offers. At {vTo} V it drops to {aTo} A (same power, half the current). If you already own {vFrom} V equipment, you can re-select it in Step 3 and recalculate — you will need to split the array across several controllers.',
      'warn.voltageMulti':'At {v} V the controller current ({a} A) still exceeds what a single commercial MPPT controller offers. This design needs the array split across {count} parallel controllers, of ~{each} A each.',
      'warn.vocTooHigh':'A single panel cold Voc ({voc} V) exceeds your controller maximum ({max} V): it is not safe to connect that panel to that controller.',
      'warn.noStringFits':'No series combination meets both the minimum start-up voltage and the controller max Voc ({ns} in series were used). Check the panel or controller model.',
      'warn.defaultPanel':'The panel side was calculated with TYPICAL data for a 450 W panel and a 150 V controller. Replace them in Step 3 with your label/datasheet values and press "Calculate sizing" again so breaker, cable and strings are exact.',
      'pshAuto.needCity':'Enter a city first.',
      'pshAuto.geocoding':'Looking up location…',
      'pshAuto.fetching':'Fetching real solar data…',
      'pshAuto.success':'☀ Real PSH: {psh} h/day (worst month: {month}, {city})',
      'pshAuto.cityNotFound':'City not found. You can still use the selector or enter PSH manually.',
      'pshAuto.serviceError':'Could not fetch the data right now. You can try again, or keep using the selector or enter PSH manually.',
      'tips.derateNote':'Thermal derate and system losses are calculated separately.',
      'tips.inductiveYes':'Detected motor/startup loads: size inverter for 2-3x peak.',
      'tips.inductiveNo':'No inductive loads flagged.',
      'tips.preDesignNote':'Preliminary estimate. Validate with real data.',
      'tips.qtyNote':'Remember: each load\'s quantity (e.g. "2 fans") is already multiplied automatically in the calculation.',
      'wizard.stepCounter':'Step {n} of {total}','wizard.confirmNext':'Confirm and Next Step','wizard.finished':'Installation Finished!',
      'wizard.finishedAlert':'Congratulations! PV system safely configured.','wizard.proLockBtn':'Upgrade to Pro',
      'wizard.completeChecklist':'Complete Checklists to Continue',
      'diagram.panels':'Solar panels','diagram.panelsSub':'{wp} Wp installed',
      'diagram.mppt':'MPPT controller','diagram.mpptSub':'{a} A · {gauge}',
      'diagram.battery':'Battery bank','diagram.batterySub':'{ah} Ah @ {v} V',
      'diagram.inverter':'Inverter','diagram.inverterSub':'{p}% efficiency',
      'diagram.loads':'Household loads','diagram.loadsSub':'{n} loads registered',
      'diagram.grid':'Public AC grid','diagram.gridSub':'Input protection {a} A','diagram.acPanel':'AC Panel',
      'table.dcBreaker':'DC protection (panels)','table.dcBreakerSpec':'{a} A DC breaker (array Isc {isc} A × 1.25 × 1.25), DC voltage rating ≥ {voc} V, between panels and controller',
      'table.battFuse':'Main battery fuse','table.battFuseSpec':'{a} A fuse between battery and inverter',
      'table.acBreaker':'AC protection (output)','table.acBreakerSpec':'{a} A RCD + breaker ({v} V AC) on the output to the house panel',
      'table.gridBreaker':'Grid input protection','table.gridBreakerSpec':'{a} A breaker ({v} V AC) between the public grid and the hybrid inverter',
      'cable.veryHighCurrent':'Current too high for a single conductor — split the array into sub-strings or use multiple parallel controllers/inverters',
      'plan.free':'Plan: Free (exploration only)','plan.singleUse':'Plan: Single use ({n} available)','plan.pro':'Plan: Pro',
      'gate.pro':'','gate.singleUse':'You have {n} use left. Deducted automatically upon calculation.',
      'gate.free':"Free plan: browse the wizard, but calculation requires buying 1 use or Pro.",
      'gate.lastUse':'That was your last use. Buy another use or Pro to calculate again.',
      'gate.needPlan':'You need to buy 1 use or Pro to calculate.','gate.needLoad':'Add at least one load',
      'appliance.noPowerConfirm':"No power specified. Use 100 W estimate?",'appliance.defaultName':'Unnamed load',
      'appliance.remove':'Remove','appliance.estimated':'estimated','appliance.summary':'Estimated daily energy: {wh} Wh/day ({n} loads)',
      'reset.confirm':'Clear all data and start over?',
      'auth.termsRequired':'Accept Terms to continue.','auth.enterEmail':'Enter email',
      'auth.sending':'Sending…','auth.linkSent':'Code sent. Check inbox and spam.',
      'auth.errorPrefix':'Error: ','auth.unexpectedError':'Unexpected error: ',
      'auth.configIncomplete':'Supabase configuration incomplete.',
      'paddle.notLoaded':"Paddle.js didn't load.",
      'paddle.configMissingPro':'PADDLE_PRICE_ID_PRO not configured.',
      'paddle.configMissingSingle':'PADDLE_PRICE_ID_SINGLE_USE not configured.',
      'paddle.processing':'Payment received, updating plan…',
      'projects.loading':'Loading…','projects.errorPrefix':'Error: ','projects.none':"No saved projects.",
      'projects.noName':'Unnamed','projects.loadBtn':'Load',
      'save.needLogin':'Sign in to save.','save.calcFirst':'Calculate sizing first.',
      'save.configIncomplete':'Supabase config incomplete.',
      'save.freeLimitReached':'Free plan limit reached.',
      'save.defaultName':'Untitled project','save.errorPrefix':'Error saving: ','save.ok':'Project saved ✔',
      'config.missing':"SUPABASE_URL and SUPABASE_ANON_KEY are missing."
    }
  };

  function m(key, vars){
    let s = (MSG[currentLang] && MSG[currentLang][key] !== undefined) ? MSG[currentLang][key] : key;
    // v26: antes usaba s.replace('{'+k+'}', valor), que en JS SOLO reemplaza la PRIMERA
    // aparición cuando el buscado es un string (no una regex /g). El aviso de voltaje (v25)
    // repite {vFrom}/{vTo} más de una vez en el mismo texto para que se lea natural, y eso
    // dejaba la 2ª/3ª aparición sin sustituir (se veía "{vFrom}" literal) — bug real,
    // reportado con capturas del celular y confirmado también en el TXT exportado.
    // replaceAll con un string (no regex) reemplaza TODAS las apariciones, sin necesidad de
    // escapar nada: es seguro porque las claves siempre son identificadores simples.
    if(vars) Object.keys(vars).forEach(k=>{ s = s.replaceAll('{'+k+'}', vars[k]); });
    return s;
  }

  function captureOriginals(){
    document.querySelectorAll('[data-i18n]').forEach(el=>{ ORIGINAL_ES[el.dataset.i18n] = el.textContent; });
    document.querySelectorAll('[data-i18n-placeholder]').forEach(el=>{ ORIGINAL_ES[el.dataset.i18nPlaceholder] = el.placeholder; });
    document.querySelectorAll('[data-i18n-html]').forEach(el=>{ ORIGINAL_ES_HTML[el.dataset.i18nHtml] = el.innerHTML; });
  }

  function applyLanguage(){
    document.querySelectorAll('[data-i18n]').forEach(el=>{
      const k = el.dataset.i18n;
      el.textContent = currentLang==='es' ? ORIGINAL_ES[k] : (EN_UI[k] || ORIGINAL_ES[k]);
    });
    document.querySelectorAll('[data-i18n-placeholder]').forEach(el=>{
      const k = el.dataset.i18nPlaceholder;
      el.placeholder = currentLang==='es' ? ORIGINAL_ES[k] : (EN_UI[k] || ORIGINAL_ES[k]);
    });
    document.querySelectorAll('[data-i18n-html]').forEach(el=>{
      const k = el.dataset.i18nHtml;
      el.innerHTML = currentLang==='es' ? ORIGINAL_ES_HTML[k] : (EN_HTML[k] || ORIGINAL_ES_HTML[k]);
    });
    renderStepHelp(); renderVoltageHelp(); if(document.getElementById('glossaryModal').classList.contains('open')) renderGlossary();
    document.documentElement.lang = currentLang;
    const langBtn = document.getElementById('langToggleBtn');
    if(langBtn) langBtn.textContent = currentLang==='es' ? 'EN' : 'ES';
    if(typeof updateCalcGate === 'function') updateCalcGate();
    if(typeof renderAutoPshStatus === 'function') renderAutoPshStatus();
    if(lastRenderParams && typeof renderResultsUI === 'function') renderResultsUI(lastRenderParams);
    updateThemeBtn();
  }

  // ====== TEMA CLARO/OSCURO (v24) ======
  // El script inline del <head> ya decidió y aplicó la clase 'dark' en <html> ANTES de pintar
  // (evita el parpadeo del tema equivocado). Estas funciones solo sincronizan el ícono/título
  // del botón con ese estado y manejan el cambio manual. El diagrama SVG NO necesita
  // regenerarse al alternar tema: sus etiquetas usan fill="var(--pv-...)" (ver bloque
  // html.dark en <style>), así que heredan el color nuevo solas con el cambio de clase.
  function isDarkTheme(){ return document.documentElement.classList.contains('dark'); }
  function updateThemeBtn(){
    const btn = document.getElementById('themeToggleBtn');
    if(!btn) return;
    const dark = isDarkTheme();
    btn.textContent = dark ? '☀️' : '🌙';
    btn.title = currentLang==='es'
      ? (dark ? 'Cambiar a tema claro' : 'Cambiar a tema oscuro')
      : (dark ? 'Switch to light theme' : 'Switch to dark theme');
  }
  function toggleTheme(){
    const dark = !isDarkTheme();
    document.documentElement.classList.toggle('dark', dark);
    document.documentElement.style.colorScheme = dark ? 'dark' : 'light';
    try{ localStorage.setItem('qss_theme', dark ? 'dark' : 'light'); }catch(e){}
    updateThemeBtn();
  }

  // ====== CREDENCIALES DE SUPABASE ======
  const APP_VERSION = 'v29';
  const QSS_CFG = window.QSS_CONFIG || {};   // v20: opcional, viene de config.js
  const SUPABASE_URL = QSS_CFG.SUPABASE_URL || "PEGA_AQUI_TU_PROJECT_URL";
  const SUPABASE_ANON_KEY = QSS_CFG.SUPABASE_ANON_KEY || "PEGA_AQUI_TU_ANON_KEY";
  const PADDLE_CLIENT_TOKEN = QSS_CFG.PADDLE_CLIENT_TOKEN || "PEGA_AQUI_TU_CLIENT_SIDE_TOKEN";
  const PADDLE_PRICE_ID_SINGLE_USE = QSS_CFG.PADDLE_PRICE_ID_SINGLE_USE || "PEGA_AQUI_TU_PRICE_ID_USO_UNICO";
  const PADDLE_PRICE_ID_PRO = QSS_CFG.PADDLE_PRICE_ID_PRO || "PEGA_AQUI_TU_PRICE_ID_PRO";
  const PADDLE_ENV = QSS_CFG.PADDLE_ENV || "sandbox";
  const TERMS_VERSION = "1.0";
  // Tag de Amazon Associates — regístrate en affiliate-program.amazon.com y pega tu tag aquí.
  // Si lo dejas como está, los enlaces funcionan igual mostrando productos, solo que sin comisión para ti.
  const AMAZON_AFFILIATE_TAG = QSS_CFG.AMAZON_AFFILIATE_TAG || "PEGA_AQUI_TU_TAG_AMAZON";
  // v27: endpoint propio de Clima Global (otra app del mismo autor, ya en producción) — da el
  // HSP/PSH histórico real por coordenadas. CORS abierto, no requiere key. Si el deploy de
  // Clima Global cambia de dominio, actualizar solo esta línea.
  const CLIMA_GLOBAL_API = "https://clima-info-kappa.vercel.app/api/solar-data";

  if(window.Paddle){
    if(PADDLE_ENV === 'sandbox') Paddle.Environment.set('sandbox');
    Paddle.Initialize({
      token: PADDLE_CLIENT_TOKEN,
      eventCallback: function(data){
        if(data.name === 'checkout.completed'){
          const statusEl = document.getElementById('paymentStatusMsg');
          if(statusEl) statusEl.innerText = m('paddle.processing');
          let attempts = 0;
          const maxAttempts = 8;
          const poll = setInterval(async ()=>{
            attempts++;
            await refreshAuthUI();
            const updated = currentPlan === 'pro' || (currentPlan === 'single_use' && currentCredits > 0);
            if(updated || attempts >= maxAttempts){
              clearInterval(poll);
              if(statusEl) statusEl.innerText = '';
            }
          }, 3000);
        }
      }
    });
  }

  const CONFIG_OK = !SUPABASE_URL.includes('PEGA_AQUI') && !SUPABASE_ANON_KEY.includes('PEGA_AQUI');
  if(!CONFIG_OK){
    const warn = document.createElement('div');
    warn.className = 'max-w-5xl mx-auto mt-3 px-4 py-3 rounded-lg bg-red-50 border border-red-200 text-red-700 text-sm';
    warn.innerText = m('config.missing');
    document.body.insertBefore(warn, document.body.firstChild);
  }
  const sb = CONFIG_OK ? window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY) : null;

  let currentUser = null;
  let currentPlan = 'free';
  let currentCredits = 0;
  let lastCalcData = null;

  // Actualiza dinámicamente el botón y su estilo visual
  function updateCalcGate(){
    const btn = document.getElementById('calcAll');
    const msg = document.getElementById('calcGateMsg');
    if(!btn) return;

    let canCalculate = false;
    if(currentPlan === 'pro'){
      canCalculate = true;
      msg.innerText = '';
    }else if(currentPlan === 'single_use' && currentCredits > 0){
      canCalculate = true;
      msg.innerText = m('gate.singleUse', {n: currentCredits});
    }else{
      canCalculate = false;
      msg.innerText = m('gate.free');
    }

    btn.disabled = !canCalculate;   // v22: el estilo deshabilitado lo pone el CSS (.btn:disabled)
  }

  async function refreshAuthUI(){
    if(!sb){
      document.getElementById('landingScreen').style.display='block';
      document.getElementById('appScreen').style.display='none';
      return;
    }
    const { data:{ session } } = await sb.auth.getSession();
    currentUser = session?.user || null;

    if(!currentUser){
      currentPlan = 'free';
      currentCredits = 0;
      lastCalcData = null;
      document.getElementById('landingScreen').style.display = 'block';
      document.getElementById('appScreen').style.display = 'none';
      updateCalcGate();
      return;
    }

    document.getElementById('landingScreen').style.display = 'none';
    document.getElementById('appScreen').style.display = 'block';
    document.getElementById('authEmailShown').innerText = currentUser.email;

    const { data: profile, error: profileErr } = await sb.from('profiles').select('plan, single_use_credits').eq('id', currentUser.id).single();
    if(profileErr) console.error('Error leyendo perfil:', profileErr);

    currentPlan = profile?.plan || 'free';
    currentCredits = profile?.single_use_credits || 0;

    const badge = document.getElementById('planBadge');
    const upgradeBtn = document.getElementById('upgradeBtn');
    const buySingleUseBtn = document.getElementById('buySingleUseBtn');

    if(currentPlan === 'pro'){
      badge.innerText = m('plan.pro');
      badge.className = 'ml-2 text-xs font-semibold px-2 py-0.5 rounded-full bg-teal-50 text-teal-700';
      upgradeBtn.style.display = 'none';
      buySingleUseBtn.style.display = 'none';
    }else if(currentPlan === 'single_use' && currentCredits > 0){
      badge.innerText = m('plan.singleUse', {n: currentCredits});
      badge.className = 'ml-2 text-xs font-semibold px-2 py-0.5 rounded-full bg-brand-50 text-brand-700';
      upgradeBtn.style.display = 'inline-block';
      buySingleUseBtn.style.display = 'inline-block';
    }else{
      badge.innerText = m('plan.free');
      badge.className = 'ml-2 text-xs font-semibold px-2 py-0.5 rounded-full bg-slate-100 text-slate-500';
      upgradeBtn.style.display = 'inline-block';
      buySingleUseBtn.style.display = 'inline-block';
    }

    updateCalcGate();

    const { data: existingAcceptance } = await sb.from('terms_acceptances')
      .select('id').eq('user_id', currentUser.id).eq('version', TERMS_VERSION).maybeSingle();
    if(!existingAcceptance){
      await sb.from('terms_acceptances').insert({ user_id: currentUser.id, version: TERMS_VERSION });
    }
  }

  const termsCheckbox = document.getElementById('termsCheckbox');
  const authEmailInput = document.getElementById('authEmail');
  const sendMagicLinkBtn = document.getElementById('sendMagicLink');
  termsCheckbox.addEventListener('change', ()=>{
    authEmailInput.disabled = !termsCheckbox.checked;
    sendMagicLinkBtn.disabled = !termsCheckbox.checked;
  });
  document.getElementById('openTermsModal').addEventListener('click', ()=>{ document.getElementById('termsModal').style.display='flex'; });
  document.getElementById('closeTermsModal').addEventListener('click', ()=>{ document.getElementById('termsModal').style.display='none'; });
  document.getElementById('closeTermsModal2').addEventListener('click', ()=>{ document.getElementById('termsModal').style.display='none'; });

  let pendingEmail = '';

  document.getElementById('sendMagicLink').addEventListener('click', async ()=>{
    if(!termsCheckbox.checked){ alert(m('auth.termsRequired')); return; }
    const msgEl = document.getElementById('authMsg');
    if(!sb){ msgEl.innerText = m('auth.configIncomplete'); return; }
    const email = document.getElementById('authEmail').value.trim();
    if(!email){ alert(m('auth.enterEmail')); return; }
    msgEl.innerText = m('auth.sending');
    try{
      const { error } = await sb.auth.signInWithOtp({ email, options:{ shouldCreateUser: true } });
      if(error){
        msgEl.innerText = m('auth.errorPrefix') + error.message;
        console.error('Supabase signInWithOtp error:', error);
      }else{
        pendingEmail = email;
        msgEl.innerText = m('auth.linkSent');
        document.getElementById('codeStep').style.display = 'block';
        document.getElementById('authCode').focus();
      }
    }catch(e){
      msgEl.innerText = m('auth.unexpectedError') + e.message;
      console.error(e);
    }
  });

  document.getElementById('verifyCodeBtn').addEventListener('click', async ()=>{
    const msgEl = document.getElementById('authMsg');
    const code = document.getElementById('authCode').value.trim();
    if(!code){ return; }
    if(!sb){ msgEl.innerText = m('auth.configIncomplete'); return; }
    msgEl.innerText = m('auth.sending');
    try{
      const { error } = await sb.auth.verifyOtp({ email: pendingEmail, token: code, type: 'email' });
      if(error){
        msgEl.innerText = m('auth.errorPrefix') + error.message;
        console.error('Supabase verifyOtp error:', error);
      }
    }catch(e){
      msgEl.innerText = m('auth.unexpectedError') + e.message;
      console.error(e);
    }
  });

  document.getElementById('backToEmailBtn').addEventListener('click', ()=>{
    document.getElementById('codeStep').style.display = 'none';
    document.getElementById('authCode').value = '';
    document.getElementById('authMsg').innerText = '';
  });

  document.getElementById('signOut').addEventListener('click', async ()=>{
    if(!sb) return;
    await sb.auth.signOut();
    currentUser = null;
    currentPlan = 'free';
    currentCredits = 0;
    lastCalcData = null;
    refreshAuthUI();
  });

  document.getElementById('upgradeBtn').addEventListener('click', ()=>{
    if(!currentUser) return;
    if(!window.Paddle){ alert(m('paddle.notLoaded')); return; }
    if(PADDLE_PRICE_ID_PRO.includes('PEGA_AQUI') || PADDLE_CLIENT_TOKEN.includes('PEGA_AQUI')){ alert(m('paddle.configMissingPro')); return; }
    Paddle.Checkout.open({
      items: [{ priceId: PADDLE_PRICE_ID_PRO, quantity: 1 }],
      customer: { email: currentUser.email },
      customData: { user_id: currentUser.id, plan_type: 'pro' }
    });
  });

  document.getElementById('buySingleUseBtn').addEventListener('click', ()=>{
    if(!currentUser) return;
    if(!window.Paddle){ alert(m('paddle.notLoaded')); return; }
    if(PADDLE_PRICE_ID_SINGLE_USE.includes('PEGA_AQUI') || PADDLE_CLIENT_TOKEN.includes('PEGA_AQUI')){ alert(m('paddle.configMissingSingle')); return; }
    Paddle.Checkout.open({
      items: [{ priceId: PADDLE_PRICE_ID_SINGLE_USE, quantity: 1 }],
      customer: { email: currentUser.email },
      customData: { user_id: currentUser.id, plan_type: 'single_use' }
    });
  });

  document.getElementById('showMyProjects').addEventListener('click', async ()=>{
    if(!sb) return;
    const box = document.getElementById('myProjectsBox');
    box.style.display = box.style.display==='none' ? 'block' : 'none';
    if(box.style.display==='none') return;
    const list = document.getElementById('myProjectsList');
    list.innerText = m('projects.loading');
    const { data, error } = await sb.from('proyectos').select('*').order('created_at',{ascending:false});
    if(error){ list.innerText = m('projects.errorPrefix') + error.message; return; }
    if(!data.length){ list.innerText = m('projects.none'); return; }
    list.innerHTML = data.map(p=>`<div class="flex items-center justify-between py-2 border-b border-slate-100 text-slate-700">
      <div><strong>${escapeHtml(p.nombre || m('projects.noName'))}</strong> <span class="text-xs text-slate-400">— ${new Date(p.created_at).toLocaleString()}</span></div>
      <button data-id="${escapeHtml(p.id)}" class="loadProj border border-slate-300 text-slate-600 hover:bg-slate-50 text-xs px-2.5 py-1 rounded-lg">${m('projects.loadBtn')}</button>
    </div>`).join('');
    document.querySelectorAll('.loadProj').forEach(btn=>btn.addEventListener('click', async (e)=>{
      const id = e.target.dataset.id;
      const proj = data.find(p=>p.id===id);
      if(proj) loadProjectData(proj.data);
    }));
  });

  document.getElementById('saveProject').addEventListener('click', async ()=>{
    const msg = document.getElementById('saveMsg');
    if(!sb){ msg.innerText = m('save.configIncomplete'); return; }
    if(!currentUser){ msg.innerText = m('save.needLogin'); return; }
    if(!lastCalcData){ msg.innerText = m('save.calcFirst'); return; }
    // Nota: no hay límite de cantidad de proyectos guardados. El plan Free nunca llega
    // aquí (no puede calcular), y Uso único/Pro deben poder guardar cada resultado que pagaron.
    const nombre = document.getElementById('projectName').value.trim() || m('save.defaultName');
    const { error } = await sb.from('proyectos').insert({ user_id: currentUser.id, nombre, data: lastCalcData });
    msg.innerText = error ? (m('save.errorPrefix') + error.message) : m('save.ok');
  });

  // v29 (S0): un aparato que viene de un proyecto guardado se trata como NO confiable: se normaliza al
  // entrar, igual que si se acabara de teclear (texto como texto, numeros acotados, solo los 5 campos
  // que existen). Asi lo que se pinta despues con innerHTML nunca contiene datos de la base sin tratar.
  function sanitizeAppliance(a){
    const o = (a && typeof a === 'object') ? a : {};
    const num = (v, lo, hi, dflt) => { if(v == null || v === '') return dflt; const n = Number(v); return Number.isFinite(n) ? Math.min(hi, Math.max(lo, n)) : dflt; };
    const power = num(o.power, 0, 10000000, null);
    return {
      name: String(o.name == null ? '' : o.name).trim().slice(0, 80) || m('appliance.defaultName'),
      power: power || null,                    // 0 o invalido = "sin dato", igual que al teclearlo
      hours: num(o.hours, 0.1, 24, 1),
      qty: num(o.qty, 1, 100000, 1),
      inductive: !!o.inductive
    };
  }

  function loadProjectData(data){
    if(!data || typeof data !== 'object') return;   // v29 (S0): lo que vuelve de la base no es confiable
    document.getElementById('projectName').value = data.projectName||'';
    document.getElementById('city').value = data.city||'';
    document.getElementById('pshManual').value = data.pshManual || (data.psh ? String(data.psh) : '');   // v22: si solo se eligió zona, se recupera el PSH efectivo
    document.getElementById('systemVoltage').value = data.systemVoltage||'24';
    document.getElementById('systemMode').value = data.systemMode||'hybrid';
    appliances.length = 0;
    (Array.isArray(data.appliances) ? data.appliances.slice(0, 500) : []).forEach(a=>appliances.push(sanitizeAppliance(a)));
    renderAppliances();
    document.getElementById('autonomyDays').value = data.autonomyDays||2;
    document.getElementById('dod').value = data.dod||'0.8';
    document.getElementById('invEff').value = data.invEff||90;
    document.getElementById('panelEff').value = data.panelEff||20;
    document.getElementById('systemLoss').value = data.systemLoss||14;
    document.getElementById('tempDerate').value = data.tempDerate||12;
    document.getElementById('cableDistance').value = data.cableDistance||10;
    document.getElementById('acVoltage').value = String(data.acVoltage||120);
    document.getElementById('panelUnitWp').value = data.panelUnitWp||PANEL_DEFAULTS.unitWp;
    document.getElementById('panelVoc').value = data.panelVoc||PANEL_DEFAULTS.voc;
    document.getElementById('panelVmp').value = data.panelVmp||PANEL_DEFAULTS.vmp;
    document.getElementById('panelIsc').value = data.panelIsc||PANEL_DEFAULTS.isc;
    document.getElementById('mpptVocMax').value = data.mpptVocMax||PANEL_DEFAULTS.mpptVocMax;
    document.getElementById('myProjectsBox').style.display='none';

    lastCalcData = data;

    if(data.resultados){
      // Recalcula con las fórmulas vigentes (no con los "resultados" guardados) — así un
      // proyecto guardado antes del fix de paneles del 14/09/2026 se autocorrige al abrirlo,
      // en vez de seguir mostrando el número viejo inflado para siempre.
      const totalWh = computeTotalWh(appliances);
      const dod = Number(data.dod)||0.8;
      const autonomy = Number(data.autonomyDays)||2;
      const invEff = (Number(data.invEff)||90)/100;
      const panelEff = (Number(data.panelEff)||20)/100;
      const sysLoss = (Number(data.systemLoss)||14)/100;
      const tempDerate = (Number(data.tempDerate)||12)/100;
      const psh = Number(data.pshManual)||Number(data.psh)||4;
      const { voltage, sizing, voltageNote } =
        decideVoltageAndSize({ totalWh, voltage: Number(data.systemVoltage)||24, dod, autonomy, invEff, panelEff, sysLoss, tempDerate, psh, arrayInputs: readArrayInputs() });
      const { energyUse, battAh, panelWp, mpptCurrent, gauge, roofAreaM2, array } = sizing;
      // v25: si el voltaje guardado ya no alcanza (o el proyecto es de antes de este ajuste),
      // el selector se sincroniza con el voltaje efectivo para que la UI y el informe coincidan.
      const voltSel = document.getElementById('systemVoltage');
      if(voltSel) voltSel.value = String(voltage);

      renderResultsUI({
        totalWh, energyUse, battAh, panelWp, mpptCurrent, gauge, voltage,
        systemMode: data.systemMode||'hybrid', roofAreaM2,
        cableDist: data.cableDistance||10, hasInductive: appliances.some(a=>a.inductive),
        appliancesCount: appliances.length, invEffPct: Math.round(invEff*100), array, autonomy, dod, voltageNote
      });
      showStep(3);
    }else{
      showStep(0);
    }
  }

  refreshAuthUI();
  if(sb) sb.auth.onAuthStateChange(()=>refreshAuthUI());

  // DATA
  const appliances=[];
  const applianceList=document.getElementById('applianceList');
  const addApplianceBtn=document.getElementById('addAppliance');
  const appName=document.getElementById('appName');
  const appPower=document.getElementById('appPower');
  const appHours=document.getElementById('appHours');
  const appQty=document.getElementById('appQty');
  // Clamp en vivo: si escriben más de 24, se recorta automáticamente al soltar/salir del campo.
  appHours.addEventListener('input', ()=>{
    if(Number(appHours.value) > 24) appHours.value = 24;
  });
  const appInductive=document.getElementById('appInductive');
  const presetLoads=document.getElementById('presetLoads');
  const loadSummary=document.getElementById('loadSummary');

  function renderAppliances(){
    applianceList.innerHTML='';
    appliances.forEach((a,i)=>{
      const qty = a.qty||1;
      const div=document.createElement('div');
      div.className='appliance-row flex items-center justify-between gap-2 p-2 bg-slate-50 border border-slate-200 rounded-lg text-sm';
      div.innerHTML=`<div style="flex:1"><strong>${escapeHtml(a.name)}</strong> — ${a.power||m('appliance.estimated')} W × ${qty} · ${a.hours} h/d ${a.inductive?'⚡':''}</div>
      <div style="width:110px;text-align:right">${Math.round((a.power||0)*a.hours*qty)} Wh/d</div>
      <div><button data-i="${i}" class="remove border border-slate-300 text-slate-600 hover:bg-slate-100 text-xs px-2.5 py-1 rounded-lg">${m('appliance.remove')}</button></div>`;
      applianceList.appendChild(div);
    });
    document.querySelectorAll('.remove').forEach(btn=>btn.addEventListener('click',e=>{const i=+e.target.dataset.i;appliances.splice(i,1);renderAppliances();}));
    updateSummaryQuick();
  }

  // Validación de horas <= 24 h/día al añadir
  addApplianceBtn.addEventListener('click',()=>{
    const name=appName.value.trim()||m('appliance.defaultName');
    const power=Number(appPower.value)||null;
    const hours=Number(appHours.value)||1;
    const qty=Math.max(1, Number(appQty.value)||1);
    const inductive=appInductive.checked;

    if(hours <= 0 || hours > 24){
      alert(currentLang==='es' ? 'Las horas de uso diarias deben estar entre 0.1 y 24.' : 'Daily hours must be between 0.1 and 24.');
      return;
    }

    if(!power){if(!confirm(m('appliance.noPowerConfirm'))) return;}
    appliances.push({name,power,hours,qty,inductive});
    appName.value=appPower.value=appHours.value='';
    appQty.value='1';
    appInductive.checked=false;
    renderAppliances();
  });

  const PRESETS = {
    basicHouse: { es:[['Iluminación LED 10W',10,5,5,false],['TV',100,4,1,false],['Nevera pequeña',150,8,1,true]],
                  en:[['10W LED bulb',10,5,5,false],['TV',100,4,1,false],['Small fridge',150,8,1,true]] },
    familyHome: { es:[['Iluminación LED 10W',10,5,10,false],['TV',150,4,1,false],['Nevera mediana',300,10,1,true],['Bomba agua',200,2,1,true]],
                  en:[['10W LED bulb',10,5,10,false],['TV',150,4,1,false],['Medium fridge',300,10,1,true],['Water pump',200,2,1,true]] },
    office:     { es:[['Computadora',200,8,1,false],['Iluminación LED 10W',10,8,8,false],['Impresora',150,2,1,false]],
                  en:[['Computer',200,8,1,false],['10W LED bulb',10,8,8,false],['Printer',150,2,1,false]] }
  };
  presetLoads.addEventListener('change',()=>{
    const v=presetLoads.value;
    if(PRESETS[v]){
      appliances.length=0;
      PRESETS[v][currentLang].forEach(([name,power,hours,qty,inductive])=>appliances.push({name,power,hours,qty,inductive}));
    }
    renderAppliances();
  });

  document.getElementById('pshSelect').addEventListener('change', (e)=>{
    if(e.target.value) document.getElementById('pshManual').value = e.target.value;
  });

  // ====== PSH REAL VÍA CLIMA GLOBAL (v27) ======
  // Ver plan maestro (1-sexies) / INTEGRACION-CLIMA-GLOBAL.md. Dos llamadas del lado del
  // cliente, sin backend propio: 1) Open-Meteo geocodifica el texto libre de #city a lat/lon
  // (gratis, sin key, CORS abierto); 2) con esas coordenadas, CLIMA_GLOBAL_API devuelve el HSP
  // histórico mes a mes — se usa worst_month.peak_sun_hours (el mes más desfavorable, NO el
  // promedio) para precargar #pshManual. Si cualquier paso falla, no se toca #pshManual ni
  // #pshSelect: quedan como estaban, y el mensaje corto bajo el botón explica qué pasó.
  const MONTHS_ES_EN = { enero:'January', febrero:'February', marzo:'March', abril:'April', mayo:'May', junio:'June', julio:'July', agosto:'August', septiembre:'September', setiembre:'September', octubre:'October', noviembre:'November', diciembre:'December' };
  // Clima Global devuelve el nombre del mes en español; en la interfaz en inglés se traduce
  // para no mezclar idiomas dentro de la misma frase. Un nombre desconocido se muestra tal cual.
  function monthLabel(name){
    if(currentLang !== 'en' || !name) return name;
    return MONTHS_ES_EN[String(name).trim().toLowerCase()] || name;
  }
  // Último mensaje mostrado bajo el botón (clave + variables SIN traducir), para volver a
  // dibujarlo en el idioma correcto si el usuario cambia ES/EN después de calcular.
  // `var` a propósito: applyLanguage() puede llamar a renderAutoPshStatus() antes de que se
  // ejecute esta línea, y con `let` eso sería un error (zona muerta temporal).
  var autoPshState = null;
  function renderAutoPshStatus(){
    const el = document.getElementById('autoPshStatus');
    if(!el || !autoPshState) return;
    const vars = autoPshState.vars ? Object.assign({}, autoPshState.vars) : null;
    if(vars && vars.month) vars.month = monthLabel(vars.month);
    el.innerText = m(autoPshState.key, vars);
  }
  function setAutoPshStatus(key, vars){
    autoPshState = { key: key, vars: vars || null };
    renderAutoPshStatus();
  }
  // fetch + lectura del JSON bajo un mismo tiempo límite: en un celular con señal mala, una
  // petición colgada dejaría "Consultando…" y el botón deshabilitados para siempre.
  async function getJsonWithTimeout(url, ms){
    const ctrl = new AbortController();
    const timer = setTimeout(()=>ctrl.abort(), ms);
    try{
      const res = await fetch(url, { signal: ctrl.signal });
      const data = res.ok ? await res.json() : null;
      return { ok: res.ok, data: data };
    }finally{ clearTimeout(timer); }
  }
  async function fetchRealPSH(){
    const cityInput = document.getElementById('city');
    const btn = document.getElementById('btnAutoPSH');
    const cityName = cityInput.value.trim();
    if(!cityName){ setAutoPshStatus('pshAuto.needCity'); cityInput.focus(); return; }

    btn.disabled = true;
    setAutoPshStatus('pshAuto.geocoding');
    try{
      const geoUrl = `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(cityName)}&count=1&language=${currentLang}&format=json`;
      const geo = await getJsonWithTimeout(geoUrl, 10000);
      if(!geo.ok){ setAutoPshStatus('pshAuto.serviceError'); return; }   // p. ej. límite de uso: NO es "ciudad no encontrada"
      if(!geo.data.results || !geo.data.results.length){
        setAutoPshStatus('pshAuto.cityNotFound');
        return;
      }
      const { latitude, longitude, name: geoName, country: geoCountry } = geo.data.results[0];
      // Se muestra el nombre YA GEOCODIFICADO (con país, si viene), no el texto tal cual lo
      // tipeó el usuario: hay varias ciudades "Kingston" en el mundo (Jamaica, Ontario, la
      // propia Kingston upon Thames en UK) con PSH muy distinto — mostrar cuál se usó en
      // realidad evita que el usuario confíe en el dato de la ciudad equivocada.
      const matchedCity = geoCountry ? `${geoName}, ${geoCountry}` : (geoName || cityName);

      setAutoPshStatus('pshAuto.fetching');
      const solar = await getJsonWithTimeout(`${CLIMA_GLOBAL_API}?lat=${latitude}&lon=${longitude}`, 20000);
      if(!solar.ok){ setAutoPshStatus('pshAuto.serviceError'); return; }
      // El dato se valida antes de tocar el campo: un PSH físicamente imposible (por un error
      // del servicio) no debe llegar al dimensionado, que es lo que decide qué se compra.
      const worst = solar.data && solar.data.worst_month;
      const worstPsh = Number(worst && worst.peak_sun_hours);
      if(!(worstPsh > 0 && worstPsh <= 12)){
        setAutoPshStatus('pshAuto.serviceError');
        return;
      }

      const pshRounded = Math.round(worstPsh*10)/10;
      document.getElementById('pshManual').value = pshRounded;
      document.getElementById('pshSelect').value = ''; // evita mostrar un preset viejo junto al valor real
      setAutoPshStatus('pshAuto.success', { psh: pshRounded, month: worst.month, city: matchedCity });
    }catch(e){
      setAutoPshStatus('pshAuto.serviceError');
      console.error('fetchRealPSH error:', e);
    }finally{
      btn.disabled = false;
    }
  }
  document.getElementById('btnAutoPSH').addEventListener('click', fetchRealPSH);

  function escapeHtml(text){return String(text == null ? '' : text).replace(/[&<>"']/g,ch=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#039;"}[ch]));}
  function updateSummaryQuick(){
    if(!appliances.length){
      loadSummary.style.display='none';
      document.getElementById('quickEnergy').innerText = '—';
      return;
    }
    let total=0;
    appliances.forEach(a=>{total+= (a.power||100)*a.hours*(a.qty||1);});
    loadSummary.style.display='block';
    loadSummary.innerHTML = m('appliance.summary', {wh: Math.round(total), n: appliances.length});
    document.getElementById('quickEnergy').innerText = m('results.energyPerDay', {wh: Math.round(total)});
  }

  const steps=['step-1','step-2','step-3','step-4'];
  function showStep(i){
    steps.forEach((s,idx)=>document.getElementById(s).style.display=idx===i?'block':'none');
    document.querySelectorAll('#steps .step-badge').forEach((el,idx)=>{
      el.className = idx===i
        ? 'step-badge px-3 py-1.5 rounded-full bg-brand-50 text-brand-700 text-xs font-semibold border border-brand-200'
        : 'step-badge px-3 py-1.5 rounded-full bg-slate-50 text-slate-500 text-xs font-semibold border border-slate-200';
    });
    // En el Paso 4 la tarjeta de resumen de arriba ya trae fusionado todo lo que mostraba
    // este aside (para no repetir el mismo dato dos veces) — en los pasos 1-3 el aside
    // sigue siendo el único resumen en vivo, así que se mantiene.
    const asideEl = document.getElementById('liveSummaryAside');
    if(asideEl) asideEl.style.display = (i===3) ? 'none' : 'block';
    // v19: en el Paso 4 el contenido usa todo el ancho (sin columna lateral vacía)
    const gridEl = document.getElementById('appGrid');
    if(gridEl) gridEl.classList.toggle('step4-wide', i===3);
    if(i===3) setTimeout(updateTabScrollHint, 0);
  }
  document.getElementById('to-step-2').addEventListener('click',()=>showStep(1));
  document.getElementById('back-step-1').addEventListener('click',()=>showStep(0));
  document.getElementById('to-step-3').addEventListener('click',()=>showStep(2));
  document.getElementById('back-step-2').addEventListener('click',()=>showStep(1));
  document.getElementById('back-step-3').addEventListener('click',()=>showStep(2));

  function resetAll(){if(confirm(m('reset.confirm'))) location.reload();}
  document.getElementById('topResetBtn').addEventListener('click',resetAll);
  document.querySelectorAll('#steps .step-badge').forEach(btn=>{
    btn.addEventListener('click', ()=> showStep(parseInt(btn.dataset.step,10)) );
  });

  // ===== v21: MOTOR ELÉCTRICO — lado paneles vs. lado batería, caída de tensión, voltaje AC =====
  // Valores por defecto del panel/controlador: son TÍPICOS de un panel de 450 W y un controlador
  // de 150 V — NO son datos del usuario. Se muestran en el Paso 3 para que los reemplace por los
  // de su etiqueta/ficha, y los resultados avisan mientras sigan siendo los típicos.
  const PANEL_DEFAULTS = { unitWp:450, voc:49.5, vmp:41.5, isc:11.5, mpptVocMax:150 };
  const COLD_VOC_FACTOR = 1.12;        // constante declarada: aumento del Voc del panel con frío (no es dato del usuario)
  const MPPT_START_MARGIN_V = 5;       // V por encima del voltaje de carga de la batería para que el MPPT trabaje
  const COPPER_RESISTIVITY = 0.0175;   // Ω·mm²/m, cobre a ~20 °C
  const DROP_TARGET_PCT = 3;           // caída de tensión objetivo (%)
  const CABLE_TABLE = [
    { maxA:6,   label:'14 AWG (2.5 mm²)', mm2:2.5 },
    { maxA:10,  label:'12 AWG (4 mm²)',   mm2:4 },
    { maxA:20,  label:'10 AWG (6 mm²)',   mm2:6 },
    { maxA:30,  label:'8 AWG (10 mm²)',   mm2:10 },
    { maxA:40,  label:'6 AWG (16 mm²)',   mm2:16 },
    { maxA:55,  label:'4 AWG (25 mm²)',   mm2:25 },
    { maxA:70,  label:'2 AWG (35 mm²)',   mm2:35 },
    { maxA:95,  label:'1/0 AWG (50 mm²)', mm2:50 },
    { maxA:120, label:'2/0 AWG (70 mm²)', mm2:70 },
    { maxA:145, label:'4/0 AWG (95 mm²)', mm2:95 },
    { maxA:175, label:'250 MCM (120 mm²)',mm2:120 },
    { maxA:230, label:'400 MCM (240 mm²)',mm2:240 }
  ];

  function getAcVoltage(){
    const el = (typeof document !== 'undefined') && document.getElementById('acVoltage');
    const v = el ? Number(el.value) : 120;
    return v > 0 ? v : 120;
  }

  // Sección mínima por caída de tensión: S = 2·L·I·ρ / (ΔV_permitido)
  function minSectionByDrop(lengthM, opAmps, voltageV, dropPct){
    if(!(lengthM > 0) || !(opAmps > 0) || !(voltageV > 0)) return 0;
    return (2 * lengthM * opAmps * COPPER_RESISTIVITY) / (voltageV * (dropPct || DROP_TARGET_PCT) / 100);
  }

  // Cable = el mayor entre (a) el que soporta la corriente que protege su breaker/fusible y
  // (b) el que cumple la caída de tensión objetivo. Devuelve el calibre y cuál criterio lo definió.
  function cableForRun(ampacityA, lengthM, voltageV, opAmps){
    const minMm2 = minSectionByDrop(lengthM, opAmps, voltageV, DROP_TARGET_PCT);
    const byAmp = CABLE_TABLE.find(r => r.maxA >= ampacityA);
    const chosen = CABLE_TABLE.find(r => r.maxA >= ampacityA && r.mm2 >= minMm2);
    if(!chosen) return { label: m('cable.veryHighCurrent'), mm2: null, minMm2: Math.round(minMm2*10)/10, byDrop:false, tooHigh:true };
    return { label: chosen.label, mm2: chosen.mm2, minMm2: Math.round(minMm2*10)/10, byDrop: !!byAmp && chosen.mm2 > byAmp.mm2, tooHigh:false };
  }

  // Configuración del arreglo: cuántos paneles, cuántos en serie (Ns) y cuántos strings en paralelo (Np).
  function computeArrayConfig({ panelWp, battV, unitWp, voc, vmp, isc, mpptVocMax }){
    const u = {
      unitWp: Number(unitWp) > 0 ? Number(unitWp) : PANEL_DEFAULTS.unitWp,
      voc: Number(voc) > 0 ? Number(voc) : PANEL_DEFAULTS.voc,
      vmp: Number(vmp) > 0 ? Number(vmp) : PANEL_DEFAULTS.vmp,
      isc: Number(isc) > 0 ? Number(isc) : PANEL_DEFAULTS.isc,
      mpptVocMax: Number(mpptVocMax) > 0 ? Number(mpptVocMax) : PANEL_DEFAULTS.mpptVocMax
    };
    const isDefault = ['unitWp','voc','vmp','isc','mpptVocMax'].every(k => u[k] === PANEL_DEFAULTS[k]);
    const N = Math.max(1, Math.ceil(panelWp / u.unitWp));
    const vocCold = u.voc * COLD_VOC_FACTOR;
    const nsMax = Math.floor(u.mpptVocMax / vocCold);
    const nsMin = Math.max(1, Math.ceil((battV * 1.2 + MPPT_START_MARGIN_V) / u.vmp));
    const warnings = [];
    let ns;
    if(nsMax < 1){ warnings.push('vocTooHigh'); ns = 1; }
    else if(nsMin > nsMax){ warnings.push('noStringFits'); ns = nsMax; }
    else {
      let best = null;
      for(let k = nsMin; k <= nsMax; k++){
        const total = k * Math.ceil(N / k);
        if(!best || total < best.total || (total === best.total && k > best.ns)) best = { ns:k, total };
      }
      ns = best.ns;
    }
    const np = Math.ceil(N / ns);
    const total = ns * np;
    const iscArray = np * u.isc;
    const impArray = np * (u.unitWp / u.vmp);
    const breakerStd = [6,10,16,20,25,32,40,50,63,80,100,125,150,175,200];
    const breakerA = selectRating(iscArray * 1.25 * 1.25, breakerStd, 25);
    const stringFuseA = np >= 3 ? selectRating(u.isc * 1.25 * 1.25, [10,12,15,20,25,30,32,40], 5) : null;
    const vocString = Math.round(ns * vocCold * 10) / 10;
    const vmpString = Math.round(ns * u.vmp * 10) / 10;
    return {
      unit: u, isDefault, n: total, nRequired: N, ns, np,
      arrayWp: Math.round(total * u.unitWp), vocString, vmpString,
      iscArray: Math.round(iscArray * 10) / 10, impArray: Math.round(impArray * 10) / 10,
      breakerA, stringFuseA, warnings
    };
  }

  // Avisos honestos para el usuario (no bloquean el cálculo).
  function computeWarnings(p, invW){
    const w = [];
    const nomKWh = (p.battAh * p.voltage) / 1000;
    if(p.autonomy > 3){
      w.push({ level:'warn', key:'warn.autonomy', vars:{ d:p.autonomy, nom:nomKWh.toFixed(1), use:(nomKWh*p.dod).toFixed(1) } });
    }
    if(p.voltageNote){
      const n = p.voltageNote;
      if(n.type === 'auto'){
        w.push({ level:'info', key:'warn.voltageAuto', vars:{ vFrom:n.before.voltage, aFrom:n.before.mpptCurrent, vTo:n.after.voltage, aTo:n.after.mpptCurrent } });
      } else if(n.type === 'multi'){
        w.push({ level:'warn', key:'warn.voltageMulti', vars:{ v:n.after.voltage, a:n.after.mpptCurrent, count:n.count, each:n.each } });
      }
    }
    if(p.array){
      if(p.array.warnings.includes('vocTooHigh')) w.push({ level:'danger', key:'warn.vocTooHigh', vars:{ voc:(p.array.unit.voc*COLD_VOC_FACTOR).toFixed(1), max:p.array.unit.mpptVocMax } });
      if(p.array.warnings.includes('noStringFits')) w.push({ level:'danger', key:'warn.noStringFits', vars:{ ns:p.array.ns } });
      if(p.array.isDefault) w.push({ level:'info', key:'warn.defaultPanel', vars:{} });
    }
    return w;
  }

  // Referencia por corriente (misma tabla de siempre, ahora en CABLE_TABLE).
  function cableGauge(current){
    const row = CABLE_TABLE.find(r => r.maxA >= current);
    return row ? row.label : m('cable.veryHighCurrent');
  }

  function computeTotalWh(list){
    let total = 0;
    (list||[]).forEach(a=>{ total += (a.power||100)*a.hours*(a.qty||1); });
    return total;
  }

  // Motor de dimensionado — única fuente de verdad de las fórmulas. Tanto un cálculo nuevo
  // (calcAll) como la carga de un proyecto guardado (loadProjectData) pasan siempre por
  // aquí, para que un futuro fix de fórmula no pueda quedar aplicado en un solo lado.
  function readArrayInputs(){
    const g = id => { const el = document.getElementById(id); return el ? Number(el.value) : NaN; };
    return { unitWp:g('panelUnitWp'), voc:g('panelVoc'), vmp:g('panelVmp'), isc:g('panelIsc'), mpptVocMax:g('mpptVocMax') };
  }

  function computeSizing({ totalWh, voltage, dod, autonomy, invEff, panelEff, sysLoss, tempDerate, psh, arrayInputs }){
    const energyUse = totalWh/(invEff*(1-sysLoss));
    const battAh = Math.round((totalWh*autonomy)/(voltage*dod));
    const panelWp = Math.round(totalWh/(psh*(1-tempDerate)*(1-sysLoss)));
    // v21 (F7): el arreglo instalado se redondea a paneles comerciales enteros; el controlador debe
    // soportar la potencia INSTALADA, no la mínima requerida.
    const array = computeArrayConfig({ panelWp, battV: voltage, ...(arrayInputs || {}) });
    const mpptCurrent = Math.round((array.arrayWp*1.25/voltage)*10)/10;
    const gauge = cableGauge(mpptCurrent);
    const roofAreaM2 = Math.round((panelWp/(panelEff*1000))*10)/10;
    return { energyUse, battAh, panelWp, mpptCurrent, gauge, roofAreaM2, array, autonomy, dod };
  }

  // v25 (1-quater.4 del plan maestro): decide el voltaje EFECTIVO del sistema antes de armar
  // el informe. computeSizing es una función pura (sin DOM ni estado global), así que llamarla
  // de nuevo con otro voltaje no tiene costo real ni efectos secundarios — se usa esa misma
  // propiedad para "probar" 48 V en vez de duplicar fórmulas.
  // Por qué es automático y no un botón para aceptar: el usuario dueño de la app decidió que
  // el objetivo es que alguien SIN conocimiento técnico termine con un sistema instalable de
  // verdad. Pedirle que acepte un cambio de voltaje que no tiene forma de evaluar no cumple eso
  // — el aviso explicando qué cambió y por qué se muestra igual, pero no bloquea el resultado.
  // Quien ya tiene equipo comprado a un voltaje distinto puede leer las cifras "antes/después"
  // en el propio aviso para decidir con esa información.
  function decideVoltageAndSize(baseParams){
    const MPPT_TRIGGER = 70;         // A — a partir de acá, a menos de 48 V, conviene subir
    const SINGLE_MPPT_CEILING = 80;  // A — techo realista de UN controlador MPPT comercial
    const REF_CONTROLLER_A = 60;     // A — tamaño de referencia ampliamente disponible, para repartir

    let voltage = baseParams.voltage;
    let sizing = computeSizing({ ...baseParams, voltage });
    let voltageNote = null;

    if(voltage < 48 && sizing.mpptCurrent > MPPT_TRIGGER){
      const before = { voltage, mpptCurrent: sizing.mpptCurrent };
      voltage = 48;
      sizing = computeSizing({ ...baseParams, voltage });
      if(sizing.mpptCurrent > SINGLE_MPPT_CEILING){
        const count = Math.ceil(sizing.mpptCurrent / REF_CONTROLLER_A);
        const each = Math.round((sizing.mpptCurrent / count) * 10) / 10;
        voltageNote = { type:'multi', before, after:{ voltage, mpptCurrent: sizing.mpptCurrent }, count, each };
      } else {
        voltageNote = { type:'auto', before, after:{ voltage, mpptCurrent: sizing.mpptCurrent } };
      }
    } else if(voltage >= 48 && sizing.mpptCurrent > SINGLE_MPPT_CEILING){
      // Ya estaba en 48 V (el máximo que ofrece esta app) y aun así se pasa del techo de un
      // solo controlador: mismo aviso de reparto, sin nada que auto-cambiar.
      const count = Math.ceil(sizing.mpptCurrent / REF_CONTROLLER_A);
      const each = Math.round((sizing.mpptCurrent / count) * 10) / 10;
      voltageNote = { type:'multi', before:{ voltage, mpptCurrent: sizing.mpptCurrent }, after:{ voltage, mpptCurrent: sizing.mpptCurrent }, count, each };
    }
    return { voltage, sizing, voltageNote };
  }

  let diagramLayer = 'energy';
  let selectedDiagramComponent = null;
  let inspectorTab = 'specs';
  let diagramMode = 'free';     // 'free' | 'wizard'
  let diagramView = 'electrical'; // 'electrical' | 'iso'
  let lastDiagramParams = null;
  let wizardStep = 0;
  let wizardChecklist = [];

  function isProUser(){ return currentPlan === 'pro'; }

  function setDiagramLayer(layer){
    diagramLayer = layer;
    const box = document.getElementById('diagramArea');
    if(box) box.classList.toggle('layer-ground', layer === 'ground');
    ['energy','tools','ground'].forEach(l=>{
      const btn = document.getElementById('dlayer-'+l);
      if(!btn) return;
      btn.className = l === layer
        ? 'px-3 py-1.5 text-xs font-semibold rounded-lg bg-ink text-white transition'
        : 'px-3 py-1.5 text-xs font-semibold rounded-lg bg-slate-100 text-slate-500 transition';
    });
    if(selectedDiagramComponent) inspectDiagramComponent(selectedDiagramComponent);
  }

  function setDiagramView(view){
    diagramView = view;
    document.getElementById('dview-electrical').className = view==='electrical'
      ? 'px-3 py-1.5 text-xs font-semibold rounded-lg bg-teal-600 text-white transition'
      : 'px-3 py-1.5 text-xs font-semibold rounded-lg bg-slate-100 text-slate-500 transition';
    document.getElementById('dview-iso').className = view==='iso'
      ? 'px-3 py-1.5 text-xs font-semibold rounded-lg bg-teal-600 text-white transition'
      : 'px-3 py-1.5 text-xs font-semibold rounded-lg bg-slate-100 text-slate-500 transition';
    renderDiagram();
  }


  // ===== v23: GLOSARIO de siglas el\u00e9ctricas (fuente \u00fanica; los \u2139 en los campos abren la entrada correspondiente) =====
  const GLOSSARY = {
    es: {
      psh:   { term:'PSH \u2014 Horas Sol Pico', def:'La cantidad de horas al d\u00eda en que, si el sol brillara siempre a su m\u00e1xima intensidad est\u00e1ndar (1000 W/m\u00b2), producir\u00edas la misma energ\u00eda que produces en un d\u00eda real completo. Se mide en h/d\u00eda y viene de datos de radiaci\u00f3n solar de tu zona (satelitales o de estaciones meteorol\u00f3gicas). Es el dato que m\u00e1s cambia el tama\u00f1o del arreglo de paneles: a menos PSH, se necesitan m\u00e1s paneles.' },
      dod:   { term:'DoD \u2014 Profundidad de Descarga', def:'Qu\u00e9 porcentaje de la capacidad total de la bater\u00eda se permite usar antes de recargarla. Una bater\u00eda de 100 Ah con DoD 80% te da 80 Ah utilizables reales. Las bater\u00edas de plomo-\u00e1cido suelen limitarse a 50% para durar m\u00e1s; las de litio (LiFePO4) toleran 80-90% sin da\u00f1arse. Viene de la ficha t\u00e9cnica del fabricante de la bater\u00eda.' },
      mppt:  { term:'MPPT \u2014 Seguimiento del Punto de M\u00e1xima Potencia', def:'El tipo de controlador de carga solar que ajusta constantemente el voltaje/corriente que recibe de los paneles para extraer la mayor potencia posible en cada momento (var\u00eda con la luz y la temperatura). Es m\u00e1s eficiente que los controladores PWM m\u00e1s simples, especialmente si el voltaje del arreglo es mayor que el de la bater\u00eda.' },
      voc:   { term:'Voc \u2014 Voltaje de circuito abierto', def:'El voltaje que mide un panel (o un string de paneles) cuando NO est\u00e1 conectado a nada, con luz solar. Es el voltaje m\u00e1s alto que ese panel puede entregar, y sube con el fr\u00edo. Es el dato que hay que comparar contra el voltaje m\u00e1ximo que soporta el controlador, para no da\u00f1arlo. Est\u00e1 en la etiqueta del panel y en su hoja de datos (condiciones STC).' },
      vmp:   { term:'Vmp \u2014 Voltaje en el punto de m\u00e1xima potencia', def:'El voltaje al que el panel entrega su potencia m\u00e1xima real (Wp) en condiciones normales de trabajo, conectado a una carga. Es menor que el Voc. Sirve para calcular cu\u00e1ntos paneles hacen falta en serie para que el arreglo arranque a cargar la bater\u00eda. Est\u00e1 en la etiqueta/hoja de datos del panel.' },
      isc:   { term:'Isc \u2014 Corriente de cortocircuito', def:'La corriente m\u00e1xima que un panel puede entregar si se le hace un cortocircuito (con luz solar). Es la base para calcular el breaker y el cable del lado de los paneles: cuanta m\u00e1s corriente de cortocircuito tenga el arreglo, m\u00e1s grueso debe ser el cable y m\u00e1s alto el breaker. Est\u00e1 en la etiqueta/hoja de datos del panel.' },
      awg:   { term:'AWG / mm\u00b2 \u2014 Calibre del cable', def:'Dos formas distintas de decir el grosor de un cable: AWG (American Wire Gauge, usado en Am\u00e9rica) es un n\u00famero que BAJA cuando el cable es m\u00e1s grueso (2 AWG es m\u00e1s grueso que 10 AWG); mm\u00b2 (secci\u00f3n en mil\u00edmetros cuadrados, usado en la mayor\u00eda de pa\u00edses hispanohablantes) SUBE cuando el cable es m\u00e1s grueso. Un cable m\u00e1s grueso soporta m\u00e1s corriente y pierde menos voltaje en distancias largas.' },
      ah:    { term:'Ah \u2014 Amperios-hora', def:'La unidad en que se mide cu\u00e1nta carga el\u00e9ctrica puede entregar una bater\u00eda. Una bater\u00eda de 100 Ah puede entregar, en teor\u00eda, 1 A durante 100 horas, o 10 A durante 10 horas. Multiplicado por el voltaje de la bater\u00eda (Ah \u00d7 V) da la energ\u00eda total en Wh (o /1000 para kWh).' },
      wp:    { term:'Wp \u2014 Watt pico', def:'La potencia que entrega un panel solar bajo condiciones de laboratorio est\u00e1ndar (STC: 1000 W/m\u00b2 de luz, 25\u00b0C de temperatura de celda). Es la cifra que usan los fabricantes para nombrar sus paneles (\u00abpanel de 450 Wp\u00bb) y NO es lo que el panel entrega todo el tiempo \u2014 en uso real, con menos luz o m\u00e1s calor, entrega menos.' },
      rcd:   { term:'RCD \u2014 Interruptor Diferencial', def:'Un dispositivo de protecci\u00f3n que corta la corriente el\u00e9ctrica autom\u00e1ticamente si detecta que est\u00e1 escapando corriente por un camino que no deber\u00eda (por ejemplo, a trav\u00e9s de una persona). Protege a las personas de electrocutarse, no protege al cableado (para eso est\u00e1 el breaker/magnetot\u00e9rmico). Se prueba con el bot\u00f3n \u00abTEST\u00bb que suele traer.' },
      kwh:   { term:'kWh \u2014 Kilowatt-hora', def:'La unidad con la que las compa\u00f1\u00edas el\u00e9ctricas miden y cobran la energ\u00eda consumida. 1 kWh = 1000 Wh = la energ\u00eda de usar 1000 W durante 1 hora (o 100 W durante 10 horas). Sirve para comparar el tama\u00f1o real de un banco de bater\u00edas: (Ah \u00d7 V) / 1000.' },
      voccold: { term:'Voc en fr\u00edo', def:'El Voc de un panel sube cuando hace fr\u00edo (el efecto contrario al calor). Por eso, para saber si el controlador va a aguantar el voltaje real que puede llegar a dar el arreglo en una ma\u00f1ana fr\u00eda, no basta el Voc de la etiqueta: hay que aplicarle un margen de seguridad. Esta app usa un factor fijo del 12% sobre el Voc de etiqueta como estimaci\u00f3n conservadora.' }
    },
    en: {
      psh:   { term:'PSH \u2014 Peak Sun Hours', def:'The number of hours per day during which, if the sun shone constantly at its standard maximum intensity (1000 W/m\u00b2), you would produce the same energy you actually produce over a full real day. Measured in h/day, it comes from solar radiation data for your area (satellite or weather station data). It is the input that changes the panel array size the most: fewer PSH means more panels needed.' },
      dod:   { term:'DoD \u2014 Depth of Discharge', def:'What percentage of a battery\'s total capacity is allowed to be used before recharging. A 100 Ah battery with 80% DoD gives you 80 Ah of real usable capacity. Lead-acid batteries are usually limited to 50% to last longer; lithium (LiFePO4) batteries tolerate 80-90% without damage. It comes from the battery manufacturer\'s datasheet.' },
      mppt:  { term:'MPPT \u2014 Maximum Power Point Tracking', def:'The type of solar charge controller that constantly adjusts the voltage/current it draws from the panels to extract the most power possible at any moment (which varies with light and temperature). It is more efficient than simpler PWM controllers, especially when the array voltage is higher than the battery voltage.' },
      voc:   { term:'Voc \u2014 Open-circuit voltage', def:'The voltage a panel (or a string of panels) measures when NOT connected to anything, under sunlight. It is the highest voltage that panel can produce, and it rises in cold weather. It is the figure to compare against the controller\'s maximum voltage rating, to avoid damaging it. Found on the panel label and datasheet (STC conditions).' },
      vmp:   { term:'Vmp \u2014 Voltage at maximum power', def:'The voltage at which the panel delivers its real maximum power (Wp) under normal working conditions, connected to a load. It is lower than Voc. Used to calculate how many panels are needed in series so the array starts charging the battery. Found on the panel label/datasheet.' },
      isc:   { term:'Isc \u2014 Short-circuit current', def:'The maximum current a panel can deliver if short-circuited (under sunlight). It is the basis for sizing the breaker and cable on the panel side: the higher the array\'s short-circuit current, the thicker the cable and the higher the breaker must be. Found on the panel label/datasheet.' },
      awg:   { term:'AWG / mm\u00b2 \u2014 Wire gauge', def:'Two different ways of stating a cable\'s thickness: AWG (American Wire Gauge, used across the Americas) is a number that goes DOWN as the cable gets thicker (2 AWG is thicker than 10 AWG); mm\u00b2 (cross-section in square millimeters, used in most Spanish-speaking countries) goes UP as the cable gets thicker. A thicker cable carries more current and loses less voltage over long distances.' },
      ah:    { term:'Ah \u2014 Amp-hours', def:'The unit used to measure how much electrical charge a battery can deliver. A 100 Ah battery can, in theory, deliver 1 A for 100 hours, or 10 A for 10 hours. Multiplied by the battery voltage (Ah \u00d7 V) it gives total energy in Wh (or /1000 for kWh).' },
      wp:    { term:'Wp \u2014 Watt-peak', def:'The power a solar panel delivers under standard laboratory conditions (STC: 1000 W/m\u00b2 of light, 25\u00b0C cell temperature). It is the figure manufacturers use to name their panels (a \u201c450 Wp panel\u201d) and is NOT what the panel delivers all the time \u2014 in real use, with less light or more heat, it delivers less.' },
      rcd:   { term:'RCD \u2014 Residual-Current Device', def:'A protective device that automatically cuts power if it detects current leaking through a path it should not (for example, through a person). It protects people from electrocution, not the wiring itself (that is what the breaker is for). It is tested with its \u201cTEST\u201d button.' },
      kwh:   { term:'kWh \u2014 Kilowatt-hour', def:'The unit utility companies use to measure and bill energy consumption. 1 kWh = 1000 Wh = the energy of using 1000 W for 1 hour (or 100 W for 10 hours). Useful to compare the real size of a battery bank: (Ah \u00d7 V) / 1000.' },
      voccold: { term:'Cold Voc', def:'A panel\'s Voc rises in cold weather (the opposite effect of heat). So, to know whether the controller will handle the real voltage the array can reach on a cold morning, the label Voc alone is not enough: a safety margin must be applied. This app uses a fixed 12% factor over the label Voc as a conservative estimate.' }
    }
  };

  function renderGlossary(){
    const body = document.getElementById('glossaryBody');
    if(!body) return;
    const dict = GLOSSARY[currentLang] || GLOSSARY.es;
    body.innerHTML = Object.keys(dict).map(k => `
      <div class="gloss-entry" id="gloss-${k}">
        <div class="font-semibold text-slate-800">${dict[k].term}</div>
        <div class="text-sm text-slate-600 mt-1">${dict[k].def}</div>
      </div>`).join('');
  }
  function openGlossary(key){
    renderGlossary();
    const modal = document.getElementById('glossaryModal');
    modal.classList.add('open');
    if(key){
      const el = document.getElementById('gloss-'+key);
      if(el){
        el.scrollIntoView({block:'center'});
        el.classList.add('gloss-highlight');
        setTimeout(()=> el.classList.remove('gloss-highlight'), 2200);
      }
    } else {
      document.getElementById('glossaryPanel').scrollTop = 0;
    }
  }
  function closeGlossary(){ document.getElementById('glossaryModal').classList.remove('open'); }

  // ===== v23: ayuda contextual por paso ("\u00bfQu\u00e9 se hace aqu\u00ed?") =====
  const STEP_HELP = {
    es: [
      { obj:'Registrar los datos generales del proyecto: nombre, ubicaci\u00f3n, cu\u00e1nto sol recibe tu zona y a qu\u00e9 voltaje va a trabajar el sistema.',
        que:'Escribe un nombre para identificar el proyecto, elige la zona climática más parecida a la tuya (o pon el dato exacto de radiación si lo conoces) y el voltaje del sistema.',
        nec:'Nada obligatorio salvo el nombre. Si no conoces la radiación solar de tu zona exacta, un preset aproximado es suficiente para empezar; siempre puedes ajustarlo después.' },
      { obj:'Sumar toda la energ\u00eda que tu sistema debe entregar cada d\u00eda: cada aparato que vas a alimentar.',
        que:'Agrega cada electrodoméstico con su potencia (W), cuántas horas al día lo usas y cuántos tienes. Marca "Motor/arranque" en los que tengan compresor o motor (nevera, bomba, lavadora): arrancan pidiendo varias veces su potencia normal, y eso afecta el tamaño del inversor.',
        nec:'La potencia en W de cada aparato (suele estar en su etiqueta o manual) y una estimación realista de horas de uso diarias.' },
      { obj:'Definir cómo se comporta tu sistema (aislado o conectado a la red) y ajustar los parámetros técnicos que afinan el cálculo.',
        que:'Elige si el sistema es aislado (solo batería + panel) o híbrido (con respaldo de la red), cuántos días de autonomía sin sol necesitas, y revisa los datos del panel y del controlador que vas a usar.',
        nec:'Si no conoces tus componentes todavía, deja los valores por defecto y calcula igual: te da un dimensionado orientativo para decidir qué comprar. Cuando ya tengas panel y controlador elegidos, vuelve aquí, reemplaza los datos y pulsa "Calcular dimensionado" de nuevo.' }
    ],
    en: [
      { obj:'Record the project\'s general data: name, location, how much sun your area gets and at what voltage the system will work.',
        que:'Write a name to identify the project, choose the climate zone closest to yours (or enter the exact radiation figure if you know it) and the system voltage.',
        nec:'Nothing is required besides the name. If you don\'t know your exact area\'s solar radiation, an approximate preset is enough to start; you can always adjust it later.' },
      { obj:'Add up all the energy your system has to deliver every day: every appliance you plan to power.',
        que:'Add each appliance with its power (W), how many hours a day you use it and how many you have. Mark "Motor/startup" for ones with a compressor or motor (fridge, pump, washer): they draw several times their normal power at startup, and that affects the inverter size.',
        nec:'The power in W of each appliance (usually on its label or manual) and a realistic estimate of daily hours of use.' },
      { obj:'Define how your system behaves (off-grid or grid-connected) and fine-tune the technical parameters that refine the calculation.',
        que:'Choose whether the system is off-grid (battery + panel only) or hybrid (with grid backup), how many days of autonomy without sun you need, and review the panel and controller data you plan to use.',
        nec:'If you don\'t know your components yet, keep the defaults and calculate anyway: it gives you an indicative sizing to decide what to buy. Once you\'ve chosen panel and controller, come back, replace the data and press "Calculate sizing" again.' }
    ]
  };
  function renderStepHelp(){
    const L = STEP_HELP[currentLang] || STEP_HELP.es;
    L.forEach((h, i) => {
      const box = document.getElementById('step'+(i+1)+'Help');
      if(!box) return;
      box.innerHTML = `<details class="qss-help mt-3 bg-slate-50 border border-slate-200 rounded-lg p-3">
        <summary class="text-sm font-semibold text-brand-700"><span class="chev">\u25b8</span> ${m('stepHelp.summary')}</summary>
        <div class="text-sm text-slate-600 mt-2 space-y-1.5">
          <p><strong class="text-slate-800">${m('stepHelp.goal')}:</strong> ${h.obj}</p>
          <p><strong class="text-slate-800">${m('stepHelp.what')}:</strong> ${h.que}</p>
          <p><strong class="text-slate-800">${m('stepHelp.need')}:</strong> ${h.nec}</p>
        </div>
      </details>`;
    });
  }

  // ===== v23: aclaraci\u00f3n 12 V / 24 V / 48 V =====
  const VOLTAGE_HELP = {
    es: `<p>El voltaje del sistema es el de tu banco de bater\u00edas y de todo el cableado DC (paneles\u2192controlador\u2192bater\u00eda\u2192inversor). A igual potencia, a MAYOR voltaje circula MENOR corriente \u2014 por eso subir de voltaje permite usar cables m\u00e1s finos y perder menos energ\u00eda en el camino.</p>
      <ul class="list-disc pl-5 mt-2 space-y-1">
        <li><strong>12 V:</strong> sistemas muy chicos \u2014 autocaravanas, cabinas de fin de semana, menos de unos 500 W de paneles.</li>
        <li><strong>24 V:</strong> el m\u00e1s com\u00fan para vivienda peque\u00f1a o mediana, hasta aprox. 1300-2000 W de paneles.</li>
        <li><strong>48 V:</strong> conviene desde ah\u00ed en adelante, o si la distancia de cableado es larga \u2014 misma potencia, mitad de corriente que a 24 V.</li>
      </ul>`,
    en: `<p>The system voltage is that of your battery bank and of all the DC wiring (panels\u2192controller\u2192battery\u2192inverter). For the same power, HIGHER voltage means LOWER current \u2014 that is why moving up in voltage lets you use thinner cables and lose less energy along the way.</p>
      <ul class="list-disc pl-5 mt-2 space-y-1">
        <li><strong>12 V:</strong> very small systems \u2014 RVs, weekend cabins, under about 500 W of panels.</li>
        <li><strong>24 V:</strong> the most common for a small or medium home, up to about 1300-2000 W of panels.</li>
        <li><strong>48 V:</strong> worth it from there on, or if the cable run is long \u2014 same power, half the current of 24 V.</li>
      </ul>`
  };
  function renderVoltageHelp(){
    const box = document.getElementById('voltageHelp');
    if(!box) return;
    box.innerHTML = `<details class="qss-help mt-2">
      <summary class="text-xs font-semibold text-brand-700"><span class="chev">\u25b8</span> ${m('voltHelp.summary')}</summary>
      <div class="text-xs text-slate-600 mt-2">${VOLTAGE_HELP[currentLang] || VOLTAGE_HELP.es}</div>
    </details>`;
  }

  function showToast(msg){
    let t = document.getElementById('appToast');
    if(!t){ t = document.createElement('div'); t.id = 'appToast'; document.body.appendChild(t); }
    t.textContent = msg; t.style.display = 'block';
    clearTimeout(showToast._t);
    showToast._t = setTimeout(()=>{ t.style.display = 'none'; }, 4500);
  }

  function setDiagramMode(mode){
    diagramMode = mode;
    document.getElementById('dmode-free').className = mode==='free'
      ? 'flex-1 sm:flex-none px-4 py-2 text-sm font-semibold rounded-lg bg-ink text-white transition'
      : 'flex-1 sm:flex-none px-4 py-2 text-sm font-semibold rounded-lg bg-slate-100 text-slate-500 transition';
    document.getElementById('dmode-wizard').className = mode==='wizard'
      ? 'flex-1 sm:flex-none px-4 py-2 text-sm font-semibold rounded-lg bg-ink text-white transition'
      : 'flex-1 sm:flex-none px-4 py-2 text-sm font-semibold rounded-lg bg-slate-100 text-slate-500 transition';
    document.getElementById('diagramFreeControls').style.display = mode==='free' ? 'block' : 'none';
    document.getElementById('diagramModeFree').style.display = mode==='free' ? 'block' : 'none';
    document.getElementById('diagramModeWizard').style.display = mode==='wizard' ? 'block' : 'none';
    document.getElementById('wizardProLock').style.display = (mode==='wizard' && !isProUser()) ? 'block' : 'none';
    if(mode==='wizard'){
      renderWizard();
    } else {
      setDiagramLayer('energy');
    }
  }

  function setStep4Tab(tab){
    ['diagram','materials','formulas','tips'].forEach(t=>{
      const panel = document.getElementById('s4panel-'+t);
      if(panel) panel.style.display = (t===tab) ? 'block' : 'none';
      const btn = document.getElementById('s4tab-'+t);
      if(btn) btn.className = (t===tab)
        ? 'px-3 py-2 text-sm font-semibold border-b-2 border-brand-500 text-brand-700 whitespace-nowrap'
        : 'px-3 py-2 text-sm font-semibold border-b-2 border-transparent text-slate-500 whitespace-nowrap';
    });
  }

  // Muestra/oculta las flechas de aviso de la barra de pestañas del Paso 4 según cuánto
  // se haya desplazado — así queda claro que "Fórmulas"/"Consejos" existen fuera de pantalla.
  function updateTabScrollHint(){
    const el = document.getElementById('step4TabScroll');
    const left = document.getElementById('tabScrollHintLeft');
    const right = document.getElementById('tabScrollHintRight');
    if(!el || !left || !right) return;
    const atStart = el.scrollLeft <= 2;
    const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 2;
    left.style.display = atStart ? 'none' : 'flex';
    right.style.display = atEnd ? 'none' : 'flex';
  }
  window.addEventListener('resize', updateTabScrollHint);

  function setInspectorTab(tab){
    inspectorTab = tab;
    document.getElementById('inspTabSpecs').className = tab==='specs'
      ? 'pb-2 px-2 text-xs font-semibold border-b-2 border-brand-500 text-brand-700'
      : 'pb-2 px-2 text-xs font-semibold border-b-2 border-transparent text-slate-500';
    document.getElementById('inspTabDiag').className = tab==='diag'
      ? 'pb-2 px-2 text-xs font-semibold border-b-2 border-brand-500 text-brand-700'
      : 'pb-2 px-2 text-xs font-semibold border-b-2 border-transparent text-slate-500';
    document.getElementById('inspSpecs').style.display = tab==='specs' ? 'block' : 'none';
    document.getElementById('inspDiag').style.display = tab==='diag' ? 'block' : 'none';
  }

  // Abre/cierra el popup real de ayuda de una especificación (reemplaza el atributo
  // title=, que no dispara con un toque en móvil — este sí funciona al tocar).
  function togglePvTip(iconEl){
    const bubble = iconEl.nextElementSibling;
    if(!bubble) return;
    document.querySelectorAll('.pv-tip-bubble.pv-tip-open').forEach(b=>{ if(b!==bubble) b.classList.remove('pv-tip-open'); });
    bubble.classList.toggle('pv-tip-open');
  }

  // Construcción de cada caja copiando literalmente la composición visual de las maquetas
  // de referencia (no un ícono propio reinterpretado): paneles = caja azul marino con 2
  // celdas azules y línea conectora; batería = caja verde con 2 módulos y terminales +/-;
  // inversor = caja clara con "pantalla" interna; breakers/fusible = fichas chicas de color
  // con el amperaje escrito adentro. Todo con la etiqueta en el mismo lugar que usan ellas
  // (paneles/batería: debajo de la caja; inversor/cargas: adentro de la caja).
  function panelBox(x, y, w, h, title, subtitle, key){
    const cellW = (w-30)/2, cellH = h-24;
    return `
      <g onclick="inspectDiagramComponent('${key}')" class="pv-comp">
        <rect x="${x}" y="${y}" width="${w}" height="${h}" rx="5" fill="#1e293b"/>
        <rect x="${x+10}" y="${y+12}" width="${cellW}" height="${cellH}" rx="2" fill="#3b82f6"/>
        <rect x="${x+20+cellW}" y="${y+12}" width="${cellW}" height="${cellH}" rx="2" fill="#3b82f6"/>
        <line x1="${x+10+cellW}" y1="${y+h/2}" x2="${x+20+cellW}" y2="${y+h/2}" stroke="#fff" stroke-width="2"/>
        <text stroke="var(--pv-label-halo)" stroke-width="4" stroke-linejoin="round" paint-order="stroke" x="${x+w/2}" y="${y+h+18}" text-anchor="middle" font-size="13" font-weight="700" fill="var(--pv-label-title)" font-family="Inter,system-ui,sans-serif">${title}</text>
        <text stroke="var(--pv-label-halo)" stroke-width="4" stroke-linejoin="round" paint-order="stroke" x="${x+w/2}" y="${y+h+35}" text-anchor="middle" font-size="11" fill="var(--pv-label-sub)" font-family="Inter,system-ui,sans-serif">${subtitle}</text>
      </g>`;
  }
  function batteryBox(x, y, w, h, title, subtitle, key){
    const cellW = (w-30)/2, cellH = h-20;
    return `
      <g onclick="inspectDiagramComponent('${key}')" class="pv-comp">
        <rect x="${x}" y="${y}" width="${w}" height="${h}" rx="5" fill="#10b981"/>
        <rect x="${x+10}" y="${y+10}" width="${cellW}" height="${cellH}" rx="2" fill="#059669"/>
        <rect x="${x+20+cellW}" y="${y+10}" width="${cellW}" height="${cellH}" rx="2" fill="#059669"/>
        <circle cx="${x+22}" cy="${y+18}" r="6" fill="#fff"/><text x="${x+22}" y="${y+22}" text-anchor="middle" font-size="9" font-weight="700" fill="#10b981">+</text>
        <circle cx="${x+w-22}" cy="${y+18}" r="6" fill="#0F2138"/><text x="${x+w-22}" y="${y+22}" text-anchor="middle" font-size="9" font-weight="700" fill="#fff">−</text>
        <text stroke="var(--pv-label-halo)" stroke-width="4" stroke-linejoin="round" paint-order="stroke" x="${x+w/2}" y="${y+h+18}" text-anchor="middle" font-size="13" font-weight="700" fill="var(--pv-label-title)" font-family="Inter,system-ui,sans-serif">${title}</text>
        <text stroke="var(--pv-label-halo)" stroke-width="4" stroke-linejoin="round" paint-order="stroke" x="${x+w/2}" y="${y+h+35}" text-anchor="middle" font-size="11" fill="var(--pv-label-sub)" font-family="Inter,system-ui,sans-serif">${subtitle}</text>
      </g>`;
  }
  function screenBox(x, y, w, h, title, subtitle, key, accent){
    return `
      <g onclick="inspectDiagramComponent('${key}')" class="pv-comp">
        <rect x="${x}" y="${y}" width="${w}" height="${h}" rx="8" fill="#F8FAFC" stroke="${accent}" stroke-width="3"/>
        <rect x="${x+20}" y="${y+14}" width="50" height="30" rx="2" fill="#cbd5e1"/>
        <path d="M${x+28} ${y+29} h8 l4 -8 l5 16 l4 -8 h8" fill="none" stroke="${accent}" stroke-width="1.6"/>
        <text x="${x+w/2}" y="${y+h-26}" text-anchor="middle" font-size="13" font-weight="700" fill="#0F2138" font-family="Inter,system-ui,sans-serif">${title}</text>
        <text x="${x+w/2}" y="${y+h-9}" text-anchor="middle" font-size="11" fill="#475569" font-family="Inter,system-ui,sans-serif">${subtitle}</text>
      </g>`;
  }
  function loadBox(x, y, w, h, title, subtitle, key){
    return `
      <g onclick="inspectDiagramComponent('${key}')" class="pv-comp">
        <rect x="${x}" y="${y}" width="${w}" height="${h}" rx="6" fill="#FFFFFF" stroke="#333" stroke-width="2"/>
        <circle cx="${x+26}" cy="${y+h/2}" r="14" fill="#F8FAFC" stroke="#94A3B8" stroke-width="2"/>
        <path d="M${x+20} ${y+h/2+2} h12 v6 h-12 z M${x+22} ${y+h/2-4} v4 M${x+30} ${y+h/2-4} v4" fill="none" stroke="#0F2138" stroke-width="1.5"/>
        <text x="${x+52}" y="${y+h/2-3}" text-anchor="start" font-size="12" font-weight="700" fill="#0F2138" font-family="Inter,system-ui,sans-serif">${title}</text>
        <text x="${x+52}" y="${y+h/2+13}" text-anchor="start" font-size="10" fill="#475569" font-family="Inter,system-ui,sans-serif">${subtitle}</text>
      </g>`;
  }
  // Ficha chica de protección (breaker/fusible), igual que las de las maquetas: rectángulo
  // pequeño de color con el amperaje escrito adentro. Al tocarla, abre el inspector del
  // componente padre (el dato de esa protección ya vive ahí, con su propio link de compra).
  function protectionChip(x, y, w, h, amps, sub, fill, stroke, parentKey){
    return `
      <g onclick="inspectDiagramComponent('${parentKey}')" class="pv-comp">
        <rect x="${x}" y="${y}" width="${w}" height="${h}" rx="3" fill="${fill}" stroke="${stroke}" stroke-width="2"/>
        <text x="${x+w/2}" y="${y+h/2+4}" text-anchor="middle" font-size="11" font-weight="700" fill="#0F2138">${amps}A</text>
        <text x="${x+w/2}" y="${y+h+13}" text-anchor="middle" font-size="9" fill="var(--pv-label-sub)" stroke="var(--pv-label-halo)" stroke-width="4" stroke-linejoin="round" paint-order="stroke" font-family="Inter,system-ui,sans-serif">${sub}</text>
      </g>`;
  }

  // Calibres estándar para las 3 protecciones que ya no dibujamos como cajas aparte
  // (para no alargar el diagrama) pero sí calculamos con datos reales y enlazamos a Amazon
  // dentro de las especificaciones del componente al que pertenecen.
  //
  // FIX (auditoría 14/09/2026): antes, si la corriente objetivo superaba TODO el valor más
  // alto de la tabla, `std.find(...) || std[std.length-1]` devolvía igual ese valor máximo
  // en silencio — es decir, para 466A podía devolver "63A" como si alcanzara. Ahora, si nada
  // de la tabla alcanza, se calcula el valor real redondeado hacia arriba en vez de taparlo.
  function selectRating(target, std, roundTo){
    const found = std.find(v=>v>=target);
    if(found) return found;
    return Math.ceil(target/roundTo)*roundTo;
  }
  // FIX (auditoría 14/09/2026): antes SOLO consideraba la corriente de descarga del inversor
  // hacia las cargas. Por ese mismo punto (batería↔inversor) también entra la corriente de
  // CARGA del controlador MPPT hacia la batería — el fusible debe soportar la mayor de las
  // dos corrientes reales que pasan por ahí, no solo una.
  function batteryFuseAmps(invW, voltage, mpptCurrent){
    const std=[60,80,100,125,150,175,200,225,250,300,350,400,500,600];
    const dischargeA = invW/voltage;
    const chargeA = mpptCurrent||0;
    const worst = Math.max(dischargeA, chargeA);
    return selectRating(worst*1.25, std, 25);
  }
  function acBreakerAmps(invW){
    const std=[10,16,20,25,32,40,50,63,80,100,125,150,175,200];
    return selectRating((invW/getAcVoltage())*1.25, std, 25);   // v21: voltaje AC elegido en el Paso 3 (antes 120 V fijo)
  }

  function buildConnectionDiagram(d){
    const hybrid = d.systemMode === 'hybrid';
    const invW = d.invW || estimateInverterWatts();
    const dcAmps = d.dcAmps;
    const fuseAmps = d.fuseAmps;
    const acAmps = d.acAmps;
    const arrow = (y1,y2,cls) => `<path d="M 150 ${y1} L 150 ${y2}" fill="none" stroke-width="3" class="${cls}"/>`;
    const groundBranch = (y) => `<path d="M 20 ${y} L 6 ${y} L 6 745 L 150 745" fill="none" class="pv-flow-ground"/>`;
    const accent = hybrid ? '#8b5cf6' : '#94A3B8';

    const gridPart = hybrid ? `
      <g onclick="inspectDiagramComponent('grid')" class="pv-comp">
        <rect x="70" y="-70" width="160" height="44" rx="8" fill="#8b5cf6"/>
        <text x="150" y="-50" text-anchor="middle" font-size="12" font-weight="700" fill="#fff" font-family="Inter,system-ui,sans-serif">${m('diagram.grid')}</text>
        <text x="150" y="-34" text-anchor="middle" font-size="10" fill="#EDE9FE" font-family="Inter,system-ui,sans-serif">${m('diagram.gridSub',{a:acAmps})}</text>
      </g>
      <path d="M 230 -48 L 290 -48 L 290 526 L 280 526" fill="none" stroke-width="3" class="pv-flow-grid"/>` : '';
    const topPad = hybrid ? 90 : 0;

    return `<svg viewBox="0 ${-topPad} 300 ${790+topPad}" xmlns="http://www.w3.org/2000/svg" style="width:100%;max-width:340px;height:auto;display:block;margin:0 auto">
      ${gridPart}
      ${groundBranch(62)}
      ${groundBranch(339)}
      ${groundBranch(526)}
      <g class="pv-flow-ground">
        <line x1="150" y1="745" x2="150" y2="765" stroke="#DB8A12" stroke-width="3"/>
        <line x1="135" y1="765" x2="165" y2="765" stroke="#DB8A12" stroke-width="3"/>
        <line x1="141" y1="772" x2="159" y2="772" stroke="#DB8A12" stroke-width="2"/>
        <line x1="146" y1="778" x2="154" y2="778" stroke="#DB8A12" stroke-width="2"/>
      </g>

      ${arrow(105,145,'pv-flow-dc')}
      ${arrow(179,210,'pv-flow-dc')}
      ${arrow(272,300,'pv-flow-dc')}
      ${arrow(418,425,'pv-flow-dc-neg')}
      ${arrow(459,488,'pv-flow-dc-neg')}
      ${arrow(564,594,'pv-flow-ac')}
      ${arrow(626,655,'pv-flow-ac')}
      ${panelBox(20, 20, 260, 85, m('diagram.panels'), m('diagram.panelsSub',{wp:(d.array?d.array.arrayWp:d.panelWp)}), 'panels')}
      ${protectionChip(125, 145, 50, 34, dcAmps, 'DC', '#cbd5e1', '#64748b', 'mppt')}
      ${screenBox(20, 210, 260, 62, m('diagram.mppt'), m('diagram.mpptSub',{a:d.mpptCurrent, gauge:d.battGauge}), 'mppt', '#F2A82E')}
      ${batteryBox(20, 300, 260, 78, m('diagram.battery'), m('diagram.batterySub',{ah:d.battAh, v:d.voltage}), 'battery')}
      ${protectionChip(127, 425, 46, 34, fuseAmps, 'Fus.', '#fbbf24', '#d97706', 'battery')}
      ${screenBox(20, 488, 260, 76, m('diagram.inverter'), m('diagram.inverterSub',{p:d.invEffPct}), 'inverter', accent)}
      ${protectionChip(115, 594, 70, 32, acAmps, m('diagram.acPanel'), '#cbd5e1', '#64748b', 'inverter')}
      ${loadBox(20, 655, 260, 56, m('diagram.loads'), m('diagram.loadsSub',{n:d.appliancesCount}), 'loads')}
    </svg>`;
  }

  // v28: MISMO diagrama eléctrico en HORIZONTAL — paneles → controlador → batería → inversor →
  // cargas, de izquierda a derecha — para pantallas de PC (>= 1024 px; ver renderDiagram). Solo
  // cambia el reparto de coordenadas: reutiliza SIN cambios las funciones de dibujo de cajas y
  // fichas, los textos i18n y las clases CSS de flujo/capas del diagrama vertical, así que el
  // interruptor de capas, el inspector y los cálculos no se enteran.
  function buildConnectionDiagramWide(d){
    const hybrid = d.systemMode === 'hybrid';
    const dcAmps = d.dcAmps;
    const fuseAmps = d.fuseAmps;
    const acAmps = d.acAmps;
    const accent = hybrid ? '#8b5cf6' : '#94A3B8';

    // Piezas en orden de lectura con su ancho; la x de cada una sale de acumular anchos + separación.
    const MARGIN = 16, GAP = 26, ROW_MID = 130, GROUND_Y = 245, CHIP_H = 32;
    const parts = [['panels',140],['dc',42],['mppt',140],['battery',140],['fuse',42],['inverter',140],['ac',42],['loads',180]];
    const P = {};
    let cx = MARGIN;
    parts.forEach(([k,w])=>{ P[k] = { x:cx, w:w }; cx += w + GAP; });
    const W = cx - GAP + MARGIN;                       // ancho total del viewBox
    const yOf = h => ROW_MID - h/2;                    // todas las piezas centradas en la misma línea media

    // Flecha de flujo entre dos piezas consecutivas (del borde derecho de una al izquierdo de la otra)
    const flow = (a, b, cls) => `<path d="M ${P[a].x + P[a].w} ${ROW_MID} L ${P[b].x} ${ROW_MID}" fill="none" stroke-width="3" class="${cls}"/>`;
    // Rama de tierra: sale por el costado izquierdo de la caja (así no cruza sus rótulos de abajo),
    // baja y se une a la barra común de tierra.
    const groundBranch = (k, y) => `<path d="M ${P[k].x} ${y} L ${P[k].x - 12} ${y} L ${P[k].x - 12} ${GROUND_Y}" fill="none" class="pv-flow-ground"/>`;
    const rodX = P.battery.x + P.battery.w / 2;        // varilla de tierra bajo el banco de baterías

    // Red pública (solo híbrido): arriba del inversor, con su línea bajando hasta él
    const gx = P.inverter.x + P.inverter.w / 2;
    const gridPart = hybrid ? `
      <g onclick="inspectDiagramComponent('grid')" class="pv-comp">
        <rect x="${gx - 85}" y="-70" width="170" height="44" rx="8" fill="#8b5cf6"/>
        <text x="${gx}" y="-50" text-anchor="middle" font-size="12" font-weight="700" fill="#fff" font-family="Inter,system-ui,sans-serif">${m('diagram.grid')}</text>
        <text x="${gx}" y="-34" text-anchor="middle" font-size="10" fill="#EDE9FE" font-family="Inter,system-ui,sans-serif">${m('diagram.gridSub',{a:acAmps})}</text>
      </g>
      <path d="M ${gx} -26 L ${gx} ${yOf(94)}" fill="none" stroke-width="3" class="pv-flow-grid"/>` : '';
    const vy = hybrid ? -90 : 50;                      // sin red pública se recorta el aire sobrante de arriba

    return `<svg viewBox="0 ${vy} ${W} ${300 - vy}" xmlns="http://www.w3.org/2000/svg" style="width:100%;max-width:${W}px;height:auto;display:block;margin:0 auto">
      ${gridPart}
      ${groundBranch('panels', yOf(120) + 105)}
      ${groundBranch('battery', yOf(120) + 105)}
      ${groundBranch('inverter', yOf(94) + 79)}
      <path d="M ${P.panels.x - 12} ${GROUND_Y} L ${P.inverter.x - 12} ${GROUND_Y}" fill="none" class="pv-flow-ground"/>
      <g class="pv-flow-ground">
        <line x1="${rodX}" y1="${GROUND_Y}" x2="${rodX}" y2="${GROUND_Y + 20}" stroke="#DB8A12" stroke-width="3"/>
        <line x1="${rodX - 15}" y1="${GROUND_Y + 20}" x2="${rodX + 15}" y2="${GROUND_Y + 20}" stroke="#DB8A12" stroke-width="3"/>
        <line x1="${rodX - 9}" y1="${GROUND_Y + 27}" x2="${rodX + 9}" y2="${GROUND_Y + 27}" stroke="#DB8A12" stroke-width="2"/>
        <line x1="${rodX - 4}" y1="${GROUND_Y + 33}" x2="${rodX + 4}" y2="${GROUND_Y + 33}" stroke="#DB8A12" stroke-width="2"/>
      </g>

      ${flow('panels','dc','pv-flow-dc')}
      ${flow('dc','mppt','pv-flow-dc')}
      ${flow('mppt','battery','pv-flow-dc')}
      ${flow('battery','fuse','pv-flow-dc-neg')}
      ${flow('fuse','inverter','pv-flow-dc-neg')}
      ${flow('inverter','ac','pv-flow-ac')}
      ${flow('ac','loads','pv-flow-ac')}
      ${panelBox(P.panels.x, yOf(120), P.panels.w, 120, m('diagram.panels'), m('diagram.panelsSub',{wp:(d.array?d.array.arrayWp:d.panelWp)}), 'panels')}
      ${protectionChip(P.dc.x, yOf(CHIP_H), P.dc.w, CHIP_H, dcAmps, 'DC', '#cbd5e1', '#64748b', 'mppt')}
      ${screenBox(P.mppt.x, yOf(94), P.mppt.w, 94, m('diagram.mppt'), m('diagram.mpptSub',{a:d.mpptCurrent, gauge:d.battGauge}), 'mppt', '#F2A82E')}
      ${batteryBox(P.battery.x, yOf(120), P.battery.w, 120, m('diagram.battery'), m('diagram.batterySub',{ah:d.battAh, v:d.voltage}), 'battery')}
      ${protectionChip(P.fuse.x, yOf(CHIP_H), P.fuse.w, CHIP_H, fuseAmps, 'Fus.', '#fbbf24', '#d97706', 'battery')}
      ${screenBox(P.inverter.x, yOf(94), P.inverter.w, 94, m('diagram.inverter'), m('diagram.inverterSub',{p:d.invEffPct}), 'inverter', accent)}
      ${protectionChip(P.ac.x, yOf(CHIP_H), P.ac.w, CHIP_H, acAmps, m('diagram.acPanel'), '#cbd5e1', '#64748b', 'inverter')}
      ${loadBox(P.loads.x, yOf(80), P.loads.w, 80, m('diagram.loads'), m('diagram.loadsSub',{n:d.appliancesCount}), 'loads')}
    </svg>`;
  }

  // Vista "Maqueta 3D ISO": misma información, ilustrada como una casa en isométrico,
  // con los mismos componentes clicables (reutiliza el mismo inspector/datos reales).
  function buildIsoDiagram(d){
    const hybrid = d.systemMode === 'hybrid';
    return `<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" style="width:100%;max-width:340px;height:auto;display:block;margin:0 auto">
      <rect width="400" height="300" fill="#87CEEB" rx="10"/>
      <rect x="0" y="220" width="400" height="80" fill="#4ade80"/>
      <circle cx="42" cy="42" r="20" fill="#fde047"/>

      ${hybrid ? `
      <g onclick="inspectDiagramComponent('grid')" class="pv-comp">
        <rect x="16" y="90" width="8" height="120" fill="#78350f"/>
        <rect x="4" y="98" width="32" height="6" fill="#451a03"/>
        <path d="M 32 100 Q 90 140 128 200" stroke-width="2.5" fill="none" class="pv-flow-grid"/>
      </g>` : ''}

      <polygon points="150,120 330,120 330,220 150,220" fill="#fef3c7" stroke="#d97706" stroke-width="3"/>
      <polygon points="130,120 350,120 240,58" fill="#ef4444" stroke="#b91c1c" stroke-width="3"/>

      <g onclick="inspectDiagramComponent('panels')" class="pv-comp">
        <polygon points="180,103 233,103 248,74 197,74" fill="#1e3a8a" stroke="#fff" stroke-width="1.5"/>
        <polygon points="238,103 291,103 306,74 253,74" fill="#1e3a8a" stroke="#fff" stroke-width="1.5"/>
        <text x="238" y="118" text-anchor="middle" font-size="9" font-weight="700" fill="#0F2138">${m('diagram.panelsSub',{wp:(d.array?d.array.arrayWp:d.panelWp)})}</text>
      </g>

      <rect x="98" y="150" width="64" height="70" fill="#cbd5e1" stroke="#94a3b8" stroke-width="3"/>

      <g onclick="inspectDiagramComponent('mppt')" class="pv-comp">
        <rect x="106" y="158" width="20" height="16" fill="#F2A82E"/>
        <text x="116" y="169" text-anchor="middle" font-size="7" font-weight="700" fill="#0F2138">DC</text>
      </g>
      <g onclick="inspectDiagramComponent('inverter')" class="pv-comp">
        <rect x="130" y="158" width="26" height="34" fill="#fff" stroke="#333" stroke-width="1.5"/>
        <text x="143" y="178" text-anchor="middle" font-size="7" font-weight="700">INV</text>
      </g>
      <g onclick="inspectDiagramComponent('battery')" class="pv-comp">
        <rect x="106" y="198" width="22" height="14" fill="#10b981" stroke="#047857" stroke-width="1.5"/>
        <rect x="132" y="198" width="22" height="14" fill="#10b981" stroke="#047857" stroke-width="1.5"/>
      </g>

      <path d="M 130 138 L 130 150" stroke-width="3" fill="none" class="pv-flow-dc"/>
      <path d="M 162 175 L 200 175" stroke-width="3" fill="none" class="pv-flow-ac"/>

      <g onclick="inspectDiagramComponent('loads')" class="pv-comp">
        <rect x="200" y="150" width="18" height="35" fill="#e2e8f0" stroke="#333"/>
        <circle cx="252" cy="165" r="15" fill="#e2e8f0" stroke="#333"/>
        <circle cx="292" cy="140" r="9" fill="#fde047" stroke="#ca8a04"/>
        <text x="252" y="240" text-anchor="middle" font-size="9" fill="#0F2138" font-weight="600">${m('diagram.loadsSub',{n:d.appliancesCount})}</text>
      </g>
    </svg>`;
  }

  // Escoge la vista activa (Eléctrico o Maqueta 3D ISO) y repinta el diagrama con los
  // últimos valores calculados — se llama cada vez que cambian datos, idioma o vista.
  // v28: trazado dibujado ahora (true = horizontal, false = vertical/ISO); null = aún no se dibujó nada.
  let diagramLastWide = null;

  // v28: ¿pantalla de PC? Mismo corte que el prefijo lg: de Tailwind que ya usa toda la app (1024 px).
  function isWideDiagram(){
    return typeof window !== 'undefined' && window.innerWidth >= 1024;
  }

  function renderDiagram(){
    if(!lastDiagramParams) return;
    // v28: el diagrama eléctrico se dibuja en horizontal en PC y en vertical (el de siempre) en
    // celular / tablet vertical; la Maqueta 3D ISO no cambia con el tamaño de pantalla.
    const wide = diagramView !== 'iso' && isWideDiagram();
    diagramLastWide = wide;
    const html = diagramView === 'iso'
      ? buildIsoDiagram(lastDiagramParams)
      : (wide ? buildConnectionDiagramWide(lastDiagramParams) : buildConnectionDiagram(lastDiagramParams));
    const area = document.getElementById('diagramArea');
    if(area) area.innerHTML = html;
    const grid = document.getElementById('diagramGrid');
    if(grid) grid.classList.toggle('diagram-wide', wide);
  }

  // v28: al cambiar el tamaño de la ventana (o girar la tablet) se vuelve a elegir el dibujo, con
  // retardo (debounce) para no recalcular en cada píxel del arrastre. Solo se redibuja si cambió el
  // trazado que corresponde (cruzar los 1024 px): en celular el evento resize también salta al
  // esconderse/mostrarse la barra del navegador mientras se hace scroll, y reemplazar el SVG en
  // pleno gesto podría perder un toque (hallazgo del code review interno de v28).
  let diagramResizeTimer = null;
  window.addEventListener('resize', function(){
    clearTimeout(diagramResizeTimer);
    diagramResizeTimer = setTimeout(function(){
      if(lastDiagramParams && (diagramView !== 'iso' && isWideDiagram()) !== diagramLastWide) renderDiagram();
    }, 200);
  });

  // Factor de pico de arranque típico para cargas con motor/compresor (nevera, bomba, lavadora).
  // Es una cifra de ingeniería estándar de referencia (no medida), ajustable si el usuario conoce el dato real del equipo.
  const INRUSH_SURGE_FACTOR = 3;

  // Potencia pico simultánea real: suma el consumo nominal de TODO (todo encendido a la vez,
  // ya multiplicado por su cantidad), y le suma el excedente de arranque solo de la carga
  // inductiva más grande (asumir que dos motores arrancan en el mismo instante exacto es
  // un caso extremo poco realista; el peor caso razonable es "todo encendido + un motor arrancando").
  function computePeakSimultaneousW(){
    if(!appliances.length) return 0;
    let steadySum = 0;
    let maxInductiveExtra = 0;
    appliances.forEach(a=>{
      const qty = a.qty||1;
      const steady = (a.power||100)*qty;
      steadySum += steady;
      if(a.inductive){
        const extra = steady*(INRUSH_SURGE_FACTOR-1);
        if(extra > maxInductiveExtra) maxInductiveExtra = extra;
      }
    });
    return steadySum + maxInductiveExtra;
  }

  // Estima la potencia continua del inversor a partir del pico simultáneo real (no solo la suma
  // nominal), con 15% de margen adicional de seguridad — funciona igual al cargar proyectos
  // guardados antiguos que no tenían campo de cantidad (qty por defecto 1 en cada carga).
  function estimateInverterWatts(){
    const peakW = computePeakSimultaneousW();
    if(!peakW) return 0;
    return Math.ceil(peakW*1.15/100)*100;
  }

  function amazonSearchUrl(query){
    const tagParam = AMAZON_AFFILIATE_TAG.includes('PEGA_AQUI') ? '' : ('&tag='+encodeURIComponent(AMAZON_AFFILIATE_TAG));
    return `https://www.amazon.com/s?k=${encodeURIComponent(query)}${tagParam}`;
  }

  // Contenido del inspector por componente — bilingüe, y con los valores REALES del
  // cálculo (d) para que las specs y la búsqueda de Amazon sean precisas, no genéricas.
  function getComponentInfo(key, d){
    const es = currentLang === 'es';
    const invW = estimateInverterWatts();
    const panelsCount = d.array ? d.array.n : Math.max(1, Math.ceil(d.panelWp/450));
    const dcAmps = d.dcAmps;
    const fuseAmps = d.fuseAmps;
    const acAmps = d.acAmps;
    const DB = {
      panels: {
        title: es?'Paneles solares':'Solar panels',
        desc: es?'Convierten la luz del sol en corriente eléctrica continua (DC). Es el punto de partida del sistema.':'Convert sunlight into direct current (DC) electricity. The starting point of the system.',
        specs: [
          { label: es?'Potencia total necesaria':'Total power needed', value: `${d.panelWp} Wp`,
            tip: es?'Wp = "watt pico": la potencia que entrega el panel bajo sol directo, en condiciones de laboratorio estándar.':'Wp = "peak watt": the power the panel delivers under direct sun, standard test conditions.' },
          { label: es?'Paneles sugeridos (aprox.)':'Suggested panels (approx.)', value: `${panelsCount} × 450W`,
            tip: es?'Se reparte la potencia total entre paneles comerciales típicos de 450W. Con otra potencia de panel, el número cambia.':'Total power split across typical 450W commercial panels. A different panel wattage changes this count.' },
          { label: es?'Área de techo aproximada':'Approximate roof area', value: `${d.roofAreaM2||'—'} m²`,
            tip: es?'Estimada con la eficiencia del panel que pusiste en el Paso 3 (Wp ÷ (eficiencia × 1000 W/m²)). Paneles más eficientes ocupan menos techo para la misma potencia.':"Estimated using the panel efficiency you set in Step 3 (Wp ÷ (efficiency × 1000 W/m²)). More efficient panels need less roof for the same power." },
          { label: es?'Protección DC (breaker paneles)':'DC protection (panel breaker)', value: `${dcAmps} A`,
            tip: es?'Interruptor termomagnético de corriente continua entre paneles y controlador, dimensionado con 25% de margen sobre la corriente real.':'DC breaker between panels and controller, sized with a 25% margin over the real current.',
            buyUrl: amazonSearchUrl(`dc miniature circuit breaker ${dcAmps}a solar din`) }
        ],
        diag: es?'Si el sistema no carga: revisa que los conectores entre paneles estén bien encajados y que no haya sombra parcial — una sola celda sombreada puede tumbar todo un string.':'If the system isn\'t charging: check panel connectors are fully seated and there\'s no partial shading — one shaded cell can drop an entire string.',
        amazon: amazonSearchUrl(`${panelsCount} pack 450w monocrystalline solar panel`),
        toolAmazon: amazonSearchUrl('mc4 crimping tool kit solar')
      },
      mppt: {
        title: es?'Controlador MPPT':'MPPT controller',
        desc: es?'Regula la energía que entra de los paneles hacia la batería, evitando sobrecargas y aprovechando mejor el sol.':'Regulates energy from the panels into the battery, preventing overcharge and maximizing solar harvest.',
        specs: [
          { label: es?'Corriente mínima':'Minimum current', value:`${d.mpptCurrent} A`,
            tip: es?'Elige un controlador con al menos esta corriente; un margen extra del 20-25% le da más vida útil al equipo.':'Choose a controller rated for at least this current; a 20-25% extra margin extends equipment life.' },
          { label: es?'Calibre de cable':'Cable gauge', value: d.gauge,
            tip: es?'AWG = calibre de cable: un número más bajo es un cable más grueso, capaz de soportar más corriente sin calentarse.':'AWG = wire gauge: a lower number means a thicker cable, able to carry more current without overheating.' }
        ],
        diag: es?'Si el MPPT no enciende: confirma que conectaste primero la batería y luego los paneles — al revés puede dañar el controlador.':'If the MPPT won\'t power on: confirm you connected the battery first, then the panels — reversing this order can damage the controller.',
        amazon: amazonSearchUrl(`mppt solar charge controller ${Math.ceil(d.mpptCurrent)}a ${d.voltage}v`),
        toolAmazon: amazonSearchUrl('insulated screwdriver set 1000v electrician')
      },
      battery: {
        title: es?'Banco de baterías':'Battery bank',
        desc: es?'Almacena la energía para usarla de noche o cuando no hay sol suficiente.':'Stores energy for use at night or when there isn\'t enough sun.',
        specs: [
          { label: es?'Capacidad':'Capacity', value:`${d.battAh} Ah @ ${d.voltage} V`,
            tip: es?'Ah = amperios-hora: cuánta corriente puede entregar la batería durante una hora. Ya incluye el margen de descarga (DoD) que elegiste.':'Ah = amp-hours: how much current the battery can deliver over one hour. Already includes the depth-of-discharge margin you chose.' },
          { label: es?'Fusible principal':'Main fuse', value: `${fuseAmps} A`,
            tip: es?'Protección ultrarrápida contra cortocircuitos entre la batería y el inversor, dimensionada según la corriente máxima real del inversor.':'Ultra-fast short-circuit protection between the battery and the inverter, sized to the inverter\'s real maximum current.',
            buyUrl: amazonSearchUrl(`anl fuse ${fuseAmps} amp with holder inline`) }
        ],
        diag: es?'Si el sistema se apaga por baja batería antes de lo esperado: revisa que no la estés descargando por debajo del DoD recomendado — eso acorta mucho su vida útil.':'If the system shuts down on low battery earlier than expected: check you\'re not discharging below the recommended DoD — that shortens battery life significantly.',
        amazon: amazonSearchUrl(`lifepo4 battery ${d.voltage}v deep cycle ${d.battAh}ah`),
        toolAmazon: amazonSearchUrl('insulated socket wrench 1000v')
      },
      inverter: {
        title: es?'Inversor':'Inverter',
        desc: es?'Convierte la corriente continua (DC) de las baterías en corriente alterna (AC), la que usan los electrodomésticos normales.':'Converts DC current from the batteries into AC current, the kind normal appliances use.',
        specs: [
          { label: es?'Potencia continua sugerida':'Suggested continuous power', value: invW ? `${invW} W` : '—',
            tip: es?'Debe cubrir el pico simultáneo real de tus cargas (con el mayor arranque de motor incluido), con margen de seguridad.':'Should cover your loads\' real simultaneous peak (including the largest motor startup), with a safety margin.' },
          { label: es?'Eficiencia usada en el cálculo':'Efficiency used in calculation', value:`${d.invEffPct}%`,
            tip: es?'Parte de la energía se pierde como calor al convertir de DC a AC; este es el porcentaje que sí llega útil.':'Some energy is lost as heat converting DC to AC; this is the percentage that actually gets through.' },
          { label: es?'Protección AC de salida (RCD/breaker)':'AC output protection (RCD/breaker)', value: `${acAmps} A`,
            tip: es?'Diferencial + magnetotérmico en la salida hacia el tablero de la casa, dimensionado según la corriente AC real del inversor.':'RCD + circuit breaker on the output to the house panel, sized to the inverter\'s real AC current.',
            buyUrl: amazonSearchUrl(`rcbo breaker ${acAmps}a 30ma din rail`) }
        ],
        diag: es?'Si se apaga al encender la nevera o la lavadora: el pico de arranque (varias veces la potencia normal) puede superar su capacidad — revisa las cargas marcadas "Motor/arranque".':'If it shuts off when the fridge or washer starts: the startup surge (several times normal power) may exceed its capacity — check loads flagged "Motor/startup".',
        amazon: amazonSearchUrl(`pure sine wave inverter ${d.voltage}v ${invW||1000}w`),
        toolAmazon: amazonSearchUrl('insulated screwdriver set 1000v electrician')
      },
      loads: {
        title: es?'Cargas del hogar':'Household loads',
        desc: es?'Todo lo que consume energía en la casa — la suma de esto es lo que el resto del sistema debe poder sostener.':'Everything in the house that consumes power — the sum of this is what the rest of the system has to support.',
        specs: [
          { label: es?'Cargas registradas':'Registered loads', value:`${d.appliancesCount}`,
            tip: es?'Cuantas más cargas marques con datos reales (no estimados) y su cantidad correcta, más preciso será el dimensionado.':'The more loads you enter with real data (not estimates) and the right quantity, the more accurate the sizing.' }
        ],
        diag: es?'Si algo no rinde como debería con el sistema solar: confirma que su consumo real en Watts y su cantidad coinciden con lo que ingresaste — revisa la etiqueta del equipo.':'If something underperforms on solar: confirm its real wattage and quantity match what you entered — check the appliance\'s label.',
        amazon: null,
        toolAmazon: amazonSearchUrl('multimeter dc clamp true rms')
      },
      grid: {
        title: es?'Red Pública AC':'Public AC grid',
        desc: es?'Fuente de respaldo del sistema híbrido: entra en función si las baterías caen bajo cierto nivel, o para bypass directo de algunas cargas.':'Backup source in the hybrid system: kicks in if batteries drop below a certain level, or for direct bypass of some loads.',
        specs: [
          { label: es?'Protección de entrada':'Input protection', value: `${acAmps} A`,
            tip: es?'Interruptor termomagnético entre la red pública y el inversor híbrido, dimensionado según la corriente AC real del inversor.':'Circuit breaker between the public grid and the hybrid inverter, sized to the inverter\'s real AC current.',
            buyUrl: amazonSearchUrl(`ac circuit breaker ${acAmps}a 2 pole`) }
        ],
        diag: es?'Si el inversor no hace transferencia a red: confirma que el modo híbrido/ATS esté habilitado en su configuración y que la red tenga voltaje real.':'If the inverter doesn\'t transfer to grid: confirm hybrid/ATS mode is enabled in its settings and the grid actually has voltage.',
        amazon: null,
        toolAmazon: null
      }
    };


    // v21: lado paneles con datos reales del arreglo (no con la corriente del lado batería)
    if(d.array){
      const A = d.array;
      const roofTip = DB.panels.specs.find(x => /techo|roof/i.test(x.label));
      DB.panels.specs = [
        { label: es?'Potencia total necesaria':'Total power needed', value: `${d.panelWp} Wp`,
          tip: es?'Wp = "watt pico": la potencia que entrega el panel bajo sol directo, en condiciones de laboratorio estándar.':'Wp = "peak watt": the power the panel delivers under direct sun, standard test conditions.' },
        { label: es?'Paneles':'Panels', value: `${A.n} × ${A.unit.unitWp} W`,
          tip: es?`Se reparte la potencia entre paneles de ${A.unit.unitWp} W (dato del Paso 3). Con otro panel, el número cambia.`:`Power is split across ${A.unit.unitWp} W panels (Step 3 input). A different panel changes the count.` },
        { label: es?'Arreglo':'Array', value: es?`${A.np} string(s) de ${A.ns} en serie`:`${A.np} string(s) of ${A.ns} in series`,
          tip: es?'Serie suma voltajes (hasta el máximo del controlador); paralelo suma corrientes. Se elige la combinación que menos paneles requiere.':'Series adds voltage (up to the controller maximum); parallel adds current. The combination needing the fewest panels is chosen.' },
        { label: es?'Voc del string (en frío)':'String Voc (cold)', value: `${A.vocString} V`,
          tip: es?`Debe ser menor que el Voc máximo del controlador (${A.unit.mpptVocMax} V). Incluye un aumento por frío de ×${COLD_VOC_FACTOR} sobre el Voc de la etiqueta.`:`Must stay below the controller max Voc (${A.unit.mpptVocMax} V). Includes a cold-weather ×${COLD_VOC_FACTOR} increase over the label Voc.` },
        { label: es?'Isc del arreglo':'Array Isc', value: `${A.iscArray} A`,
          tip: es?'Corriente de cortocircuito total (Isc de un panel × strings en paralelo). Es la base del breaker y del cable del lado paneles.':'Total short-circuit current (one panel Isc × parallel strings). Basis for the panel-side breaker and cable.' },
        roofTip,
        { label: es?'Protección DC (breaker paneles)':'DC protection (panel breaker)', value: `${d.dcAmps} A`,
          tip: es?`Breaker de corriente continua entre paneles y controlador: Isc del arreglo × 1,25 × 1,25, con tensión nominal DC ≥ ${A.vocString} V.`:`DC breaker between panels and controller: array Isc × 1.25 × 1.25, DC voltage rating ≥ ${A.vocString} V.`,
          buyUrl: amazonSearchUrl(`dc miniature circuit breaker ${d.dcAmps}a solar din`) }
      ].filter(Boolean);
      if(A.stringFuseA){
        DB.panels.specs.push({ label: es?'Fusible por string':'String fuse', value: `${A.stringFuseA} A`,
          tip: es?'Con 3 o más strings en paralelo, cada uno lleva su fusible para que un cortocircuito no reciba la corriente de los demás.':'With 3 or more parallel strings, each carries its own fuse so a fault is not fed by the others.',
          buyUrl: amazonSearchUrl(`solar pv fuse ${A.stringFuseA}a 1000vdc 10x38`) });
      }
      DB.panels.specs.push({ label: es?'Cable lado paneles':'Panel-side cable', value: d.panelGauge || '—',
        tip: es?'El mayor entre lo que soporta el breaker y la sección mínima para no perder más de 3 % de tensión en la distancia que indicaste.':'The larger of what the breaker allows and the minimum section to stay under 3 % voltage drop over the distance you entered.' });
      DB.panels.amazon = amazonSearchUrl(`${A.n} pack ${A.unit.unitWp}w monocrystalline solar panel`);

      DB.mppt.specs = [
        { label: es?'Corriente de salida (a batería)':'Output current (to battery)', value:`${d.mpptCurrent} A`,
          tip: es?'Elige un controlador con al menos esta corriente de carga hacia la batería; un margen extra del 20-25% le da más vida útil.':'Choose a controller rated for at least this battery-charging current; a 20-25% margin extends its life.' },
        { label: es?'Voc máximo del controlador':'Controller max Voc', value:`${A.unit.mpptVocMax} V`,
          tip: es?`Tu arreglo llega a ${A.vocString} V en frío; el controlador debe soportar más que eso.`:`Your array reaches ${A.vocString} V when cold; the controller must handle more than that.` },
        { label: es?'Cable lado batería':'Battery-side cable', value: d.battGauge || '—',
          tip: es?'Se dimensiona para el fusible principal de la batería (no para la corriente de carga sola) y debe ser lo más corto posible.':'Sized for the main battery fuse (not for the charging current alone) and should be kept as short as possible.' }
      ];
      DB.battery.specs.push({ label: es?'Cable batería ↔ inversor':'Battery ↔ inverter cable', value: d.battGauge || '—',
        tip: es?'AWG = calibre: número menor = cable más grueso. Debe soportar al menos lo que protege el fusible principal.':'AWG = gauge: lower number = thicker cable. It must carry at least what the main fuse protects.' });
    }
    if(DB.inverter.specs[2]) DB.inverter.specs[2].value = `${acAmps} A @ ${d.acV || 120} V`;
    if(DB.grid.specs[0]) DB.grid.specs[0].value = `${acAmps} A @ ${d.acV || 120} V`;

    DB.panels.toolName = es ? 'Crimpadora MC4 + multímetro DC' : 'MC4 crimping tool + DC multimeter';
    DB.panels.ground   = es ? 'El marco metálico de cada panel se une con cable desnudo 6-16 mm² a la barra equipotencial.' : "Each panel's metal frame bonds to the equipotential bar with bare 6-16 mm² cable.";

    DB.mppt.toolName = es ? 'Destornillador aislado 1000V' : 'Insulated 1000V screwdriver';
    DB.mppt.ground   = es ? 'El chasis metálico del controlador/inversor se conecta a la misma barra equipotencial.' : "The controller/inverter metal chassis bonds to the same equipotential bar.";

    DB.battery.toolName = es ? 'Llave de tubo dieléctrica 10mm (1000V)' : 'Insulated 10mm socket wrench (1000V)';
    DB.battery.ground   = es ? 'El negativo de la batería NO se conecta a tierra en un sistema flotante; solo el chasis metálico va a la jabalina.' : 'Battery negative is not bonded to ground in a floating system; only the metal enclosure goes to the ground rod.';

    DB.inverter.toolName = es ? 'Destornillador aislado 1000V' : 'Insulated 1000V screwdriver';
    DB.inverter.ground   = es ? 'Punto central de la puesta a tierra del sistema: chasis del inversor a la jabalina principal.' : "System's central grounding point: inverter chassis to the main ground rod.";

    DB.loads.toolName = es ? 'Pinza amperimétrica True RMS' : 'True RMS clamp meter';
    DB.loads.ground   = es ? 'El tablero AC lleva su propio conductor de tierra (verde) hasta la misma barra equipotencial.' : 'The AC panel carries its own ground conductor (green) to the same equipotential bar.';

    DB.grid.toolName = null;
    DB.grid.ground   = es ? 'La acometida de red pública se rige por la puesta a tierra del medidor/tablero de la compañía eléctrica, no por la barra del sistema solar.' : "The public grid feed is grounded via the utility meter/panel, not the solar system's own bar.";

    return DB[key];
  }

  function inspectDiagramComponent(key){
    if(diagramMode !== 'free') return;
    if(!lastRenderParams) return;
    const info = getComponentInfo(key, lastRenderParams);
    if(!info) return;

    selectedDiagramComponent = key;

    document.getElementById('inspTitle').innerText = info.title;
    document.getElementById('inspDesc').innerText = info.desc;

    document.getElementById('inspSpecs').innerHTML = info.specs.map(s=>
      `<li class="flex items-start justify-between gap-2">
         <span><strong>${s.label}:</strong> <span class="font-mono">${s.value}</span></span>
         <span class="flex items-center gap-1.5 shrink-0">
           ${s.buyUrl ? `<a href="${s.buyUrl}" target="_blank" rel="noopener noreferrer" class="text-[#FF9900] hover:text-[#e68a00]" title="Amazon">🛒</a>` : ''}
           <span class="pv-tip-wrap">
             <button type="button" onclick="togglePvTip(this)" class="text-slate-400 hover:text-slate-700" aria-label="info">ⓘ</button>
             <span class="pv-tip-bubble">${s.tip.replace(/"/g,'&quot;')}</span>
           </span>
         </span>
       </li>`
    ).join('');
    document.getElementById('inspDiag').innerText = info.diag;
    setInspectorTab(inspectorTab);

    const buyComponent = document.getElementById('inspBuyComponent');
    const buyComponentText = document.getElementById('inspBuyComponentText');
    if(info.amazon){
      buyComponentText.innerText = (currentLang==='es' ? '🛒 Comprar: ' : '🛒 Buy: ') + info.title;
      buyComponent.href = info.amazon;
      buyComponent.style.display = 'flex';
    } else {
      buyComponent.style.display = 'none';
    }

    const buyTool = document.getElementById('inspBuyTool');
    const toolText = document.getElementById('inspToolText');
    if(info.toolAmazon && info.toolName){
      toolText.innerText = (currentLang==='es' ? '🔧 Herramienta: ' : '🔧 Tool: ') + info.toolName;
      buyTool.href = info.toolAmazon;
      buyTool.style.display = 'flex';
    } else {
      buyTool.style.display = 'none';
    }

    const groundP = document.getElementById('inspGround');
    if(groundP){
      if(diagramLayer === 'ground' && info.ground){
        groundP.innerText = '🌍 ' + info.ground;
        groundP.style.display = 'block';
      } else {
        groundP.style.display = 'none';
      }
    }

    document.getElementById('diagramInspector').style.display = 'block';
    const phEl = document.getElementById('inspPlaceholder');
    if(phEl) phEl.style.display = 'none';
    document.getElementById('diagramInspector').scrollIntoView({behavior:'smooth', block:'nearest'});
  }

  function renderResultsUI(p){
    lastRenderParams = p;
    const peakW = computePeakSimultaneousW();
    const invW = estimateInverterWatts();
    const A = p.array;
    const acV = getAcVoltage();
    // v21: valores derivados una sola vez; tabla, diagrama e inspector leen los mismos números
    const fuseAmps = batteryFuseAmps(invW||1000, p.voltage, p.mpptCurrent);
    const acAmps = acBreakerAmps(invW||1000);
    const battCable = cableForRun(fuseAmps, 0, 0, 0);
    const panelCable = A ? cableForRun(A.breakerA, p.cableDist, A.vmpString, A.impArray) : { label: p.gauge, byDrop:false, minMm2:0 };
    const warns = computeWarnings(p, invW);
    // v22: el inspector lee ESTE objeto (lastRenderParams): los valores derivados deben vivir aquí.
    Object.assign(p, { dcAmps: A ? A.breakerA : 0, fuseAmps, acAmps, acV, invW,
      battGauge: battCable.label, panelGauge: panelCable.label, panelCableInfo: panelCable, battCableInfo: battCable });
    const kpi = (label, val, cls) => `<div class="min-w-0"><div class="text-[10px] uppercase tracking-[.14em] text-slate-400">${label}</div><div class="font-mono tabular text-xl sm:text-2xl font-bold mt-1 ${cls||''}">${val}</div></div>`;
    const sub = (label, val) => `<div class="min-w-0"><div class="text-[10px] uppercase tracking-[.14em] text-slate-400 leading-tight">${label}</div><div class="text-sm font-semibold text-slate-100 mt-0.5">${val}</div></div>`;
    const warnHtml = warns.length ? `<div class="mt-3 space-y-2">${warns.map(w => `<div class="qss-note qss-note-${w.level}">${w.level==='danger'?'⛔':(w.level==='warn'?'⚠️':'ℹ️')} ${m(w.key, w.vars)}</div>`).join('')}</div>` : '';
    document.getElementById('resultsArea').innerHTML=`
      <div class="bg-ink text-white rounded-2xl p-4 sm:p-5">
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-x-4 gap-y-4">
          ${kpi(m('results.dailyEnergy'), Math.round(p.totalWh)+' Wh', '')}
          ${kpi(m('results.peakSimultaneous'), Math.round(peakW)+' W', 'text-brand-300')}
          ${kpi(m('results.panelsRequired'), p.panelWp+' Wp', 'text-teal-300')}
          ${kpi(m('results.battSuggested'), p.battAh+' Ah', 'text-teal-300')}
        </div>
        <div class="mt-4 pt-4 border-t border-slate-700 grid grid-cols-2 lg:grid-cols-4 gap-x-4 gap-y-3">
          ${sub(m('results.usefulEnergy'), Math.round(p.energyUse)+' Wh')}
          ${sub(m('results.mpptEstimated'), p.mpptCurrent+' A')}
          ${sub(m('results.cableSuggestedWithDist',{d:p.cableDist}), panelCable.label)}
          ${sub(m('results.inverterPower'), (invW||'—')+' W')}
        </div>
      </div>${warnHtml}`;

    const wiringPanelText = panelCable.byDrop
      ? m('table.wiringPanelSpecDrop',{gauge:panelCable.label, d:p.cableDist, mm2:panelCable.minMm2})
      : m('table.wiringPanelSpec',{gauge:panelCable.label, d:p.cableDist, a:A?A.breakerA:'—'});
    document.getElementById('componentsExplain').innerHTML=`
      <table class="spec">
        <tr><th>${m('table.component')}</th><th>${m('table.spec')}</th></tr>
        <tr><td>${m('table.panelArray')}</td><td>${A ? m('table.panelArraySpec',{n:A.n,u:A.unit.unitWp,tot:A.arrayWp,ns:A.ns,np:A.np,voc:A.vocString,vmp:A.vmpString,isc:A.iscArray}) : p.panelWp+' Wp'}</td></tr>
        <tr><td>${m('table.dcBreaker')}</td><td>${A ? m('table.dcBreakerSpec',{a:A.breakerA, isc:A.iscArray, voc:A.vocString}) : '—'}</td></tr>
        ${A && A.stringFuseA ? `<tr><td>${m('table.stringFuse')}</td><td>${m('table.stringFuseSpec',{a:A.stringFuseA, np:A.np})}</td></tr>` : ''}
        <tr><td>${m('table.battBank')}</td><td>${m('table.battBankSpec',{ah:p.battAh, v:p.voltage})}</td></tr>
        <tr><td>${m('table.battFuse')}</td><td>${m('table.battFuseSpec',{a:fuseAmps})}</td></tr>
        <tr><td>${m('table.mppt')}</td><td>${m('table.mpptSpec',{a:p.mpptCurrent})}</td></tr>
        <tr><td>${m('table.inverter')}</td><td>${m('table.inverterSpec',{w: invW||'—'})}</td></tr>
        <tr><td>${m('table.acBreaker')}</td><td>${m('table.acBreakerSpec',{a:acAmps, v:acV})}</td></tr>
        ${p.systemMode==='hybrid' ? `<tr><td>${m('table.gridBreaker')}</td><td>${m('table.gridBreakerSpec',{a:acAmps, v:acV})}</td></tr>` : ''}
        <tr><td>${m('table.wiringPanel')}</td><td>${wiringPanelText}</td></tr>
        <tr><td>${m('table.wiringBatt')}</td><td>${m('table.wiringBattSpec',{gauge:battCable.label, a:fuseAmps})}</td></tr>
      </table>`;

    document.getElementById('practicalTips').innerHTML=`
      <ul>
        <li>${m('tips.derateNote')}</li>
        <li>${p.hasInductive ? m('tips.inductiveYes') : m('tips.inductiveNo')}</li>
        <li>${m('tips.qtyNote')}</li>
        <li>${m('tips.preDesignNote')}</li>
      </ul>`;

    document.getElementById('quickPanels').innerText = m('results.panelsApprox', {wp:p.panelWp});
    document.getElementById('quickBatt').innerText = `${p.battAh} Ah`;
    document.getElementById('quickMppt').innerText = `${p.mpptCurrent} A · ${panelCable.label}`;
    document.getElementById('quickEnergy').innerText = m('results.energyPerDay', {wh: Math.round(p.totalWh)});

    lastDiagramParams = {
      panelWp: p.panelWp, mpptCurrent: p.mpptCurrent, gauge: p.gauge, battAh: p.battAh,
      voltage: p.voltage, invEffPct: p.invEffPct, appliancesCount: p.appliancesCount,
      systemMode: p.systemMode || 'hybrid', invW: invW,
      array: A, dcAmps: A ? A.breakerA : 0, fuseAmps: fuseAmps, acAmps: acAmps, acV: acV,
      battGauge: battCable.label, panelGauge: panelCable.label
    };
    renderDiagram();
    if(diagramMode === 'wizard') renderWizard();
  }

  // ===== Instalación Guiada (antes "Asistente 0 a 100") — función exclusiva del plan Pro =====
  const WIZARD_STEPS_I18N = {
    es: [
      { title:'Fase 1: Preparación y Medición', desc:'Herramientas, seguridad y verificar que compraste lo que dice tu informe.',
        tips:[
          'Trabaja siempre con el sistema sin energía y, si puedes, acompañado: para conectar baterías conviene tener a alguien cerca.',
          'Quítate anillos, cadenas y relojes metálicos: un cortocircuito en baterías puede calentar el metal al rojo en segundos.',
          'Los paneles generan voltaje en cuanto reciben luz. Mientras cableas, mantenlos tapados con una lona opaca o con el breaker DC abajo.',
          'Toma fotos del cableado terminado y de las etiquetas de cada equipo: te servirán para garantía y mantenimiento.'
        ],
        checks:[
          'Tengo herramientas con aislamiento dieléctrico (1000 V), lentes y guantes.',
          'Probé el multímetro con una fuente conocida (por ejemplo una pila AA marca ≈ 1,5 V) y está en V DC.',
          'Lo que compré coincide con el informe: fusible de batería {fuse} A, breaker DC {dcA} A (tensión nominal DC ≥ {vocCold} V), breaker AC {acA} A, cable lado paneles {panelGauge} y cable lado batería {battGauge}.',
          'Los datos de las etiquetas de mis paneles y de mi controlador coinciden con los que puse en el Paso 3 (si no, corrígelos y vuelve a calcular).'
        ] },
      { title:'Fase 2: Puesta a Tierra FÍSICA', desc:'Anclaje mecánico sin energía.',
        tips:[
          'La tierra protege a las personas: une los chasis metálicos (marcos de paneles, inversor, estructura) a un mismo punto. La resistencia de tierra y el calibre del conductor los fija la norma de tu país: consúltala o pregunta a un electricista.',
          'Sigue el manual de tu inversor sobre si el negativo de la batería se une o no a tierra; en un sistema flotante no se une.',
          'Protege la unión a la jabalina de la humedad y la corrosión (conector adecuado y sellador).'
        ],
        checks:[
          'Jabalina clavada en tierra húmeda.',
          'Cable verde/amarillo conecta paneles, controlador/inversor y barra equipotencial.',
          'Con el multímetro en continuidad (Ω) hay continuidad entre el chasis del inversor, el marco de los paneles y la barra de tierra.',
          'La unión a la jabalina está apretada y protegida contra humedad y corrosión.'
        ], layer:'ground' },
      { title:'Fase 3: El Corazón (Baterías)', desc:'Conexión y encendido de la inteligencia del sistema.',
        tips:[
          'Con el sistema apagado, mide cada batería antes de unirlas: para conectarlas en paralelo deben tener voltajes casi iguales (diferencias de pocas décimas de voltio).',
          'Instala el fusible principal ({fuse} A) AL FINAL, lo más cerca posible del borne positivo del banco. Es normal ver una chispa pequeña al cerrar el último contacto: son los condensadores del inversor cargándose.',
          'Aprieta los bornes al par que indique el fabricante y usa terminales bien engarzados: una conexión floja se calienta.'
        ],
        checks:[
          'Baterías cableadas según el fabricante (paralelo/serie), con cables del mismo largo y calibre {battGauge}.',
          'Polaridad verificada con el multímetro (punta roja en + marca lectura positiva) ANTES de cerrar el fusible.',
          'Multímetro marca entre ~{battLo} y ~{battHi} V DC en los cables maestros, en reposo (nominal {battNom} V).',
          'Fusible principal de {fuse} A instalado. Conectadas al controlador/inversor y encendidas. Pantalla encendida.'
        ], warning:true },
      { title:'Fase 4: Captura Solar', desc:'Bajada de energía desde el techo.',
        tips:[
          'Mide el Voc con el breaker DC ABAJO y los paneles al sol. Con frío el voltaje sube: tu diseño estima {vocCold} V en frío y el controlador soporta {mpptVocMax} V como máximo.',
          'Si la lectura es la mitad de lo esperado, falta un panel o hay un conector suelto; si marca 0 V, revisa la polaridad y los conectores MC4 (deben ser compatibles entre sí).',
          'Después de subir el breaker, mira la corriente de carga en la pantalla del controlador: el informe recomienda un controlador de al menos {mpptA} A.'
        ],
        checks:[
          'Paneles conectados según el diseño: {np} string(s) de {ns} panel(es) en serie.',
          'Polaridad de cada string verificada (+ con +) antes de conectar al controlador.',
          'Multímetro marca {arrVoc} (Voc del string, con sol) en la entrada del breaker DC, y es MENOR que {mpptVocMax} V.',
          'Subir breaker DC ({dcA} A). El controlador indica "Cargando".'
        ] },
      { title:'Fase 5: Salida a Casa AC', desc:'Manejo del pico de arranque (Inrush Current).',
        tips:[
          'Sube las cargas de menor a mayor. Los motores (nevera, bomba) piden varias veces su potencia al arrancar; por eso se conectan por separado.',
          'Si el inversor se apaga al arrancar un motor, revisa que la potencia sugerida ({invW} W) sea la que instalaste y que esas cargas estén marcadas como «Motor/arranque».',
          'Anota los valores finales (voltaje de batería, voltaje y corriente del arreglo, carga del inversor): son tu referencia para detectar fallos más adelante.',
          'Si tienes un termómetro infrarrojo, revisa la temperatura de bornes y cables tras un rato con carga: no deben estar calientes.'
        ],
        checks:[
          'Todos los breakers de la casa están ABAJO.',
          'Con el inversor encendido y SIN cargas, el multímetro en V AC marca ≈ {acV} V en su salida.',
          'Subir breaker principal AC del inversor.',
          'Probé el botón TEST del diferencial (RCD) y dispara correctamente.',
          'Subir el circuito de iluminación.',
          'Subir las cargas grandes POR SEPARADO (esperar 5 seg entre ellas).',
          'Con las cargas grandes funcionando, el inversor no marca sobrecarga y el voltaje de batería no llega a la alarma de bajo voltaje.',
          'Anoté los valores finales de referencia (V batería, V y A del arreglo, carga del inversor).'
        ] }
    ],
    en: [
      { title:'Phase 1: Preparation & Measurement', desc:'Tools, safety, and checking that what you bought matches your report.',
        tips:[
          'Always work with the system de-energized and, if possible, with someone nearby: connecting batteries is safer with company.',
          'Take off rings, chains and metal watches: a battery short circuit can heat metal red-hot in seconds.',
          'Panels produce voltage as soon as light hits them. While wiring, keep them covered with an opaque tarp or keep the DC breaker OFF.',
          'Take photos of the finished wiring and of each equipment label: they help with warranty and maintenance.'
        ],
        checks:[
          'I have tools with dielectric insulation (1000 V), safety glasses and gloves.',
          'I tested the multimeter on a known source (e.g. an AA cell reads ≈ 1.5 V) and it is set to V DC.',
          'What I bought matches the report: battery fuse {fuse} A, DC breaker {dcA} A (DC voltage rating ≥ {vocCold} V), AC breaker {acA} A, panel-side cable {panelGauge} and battery-side cable {battGauge}.',
          'The labels of my panels and controller match the data I entered in Step 3 (if not, fix it and recalculate).'
        ] },
      { title:'Phase 2: PHYSICAL Grounding', desc:'Mechanical anchoring, no power yet.',
        tips:[
          'Grounding protects people: bond the metal frames (panel frames, inverter, mounting structure) to one point. Ground resistance and conductor size are set by your country\'s code: check it or ask an electrician.',
          'Follow your inverter manual on whether the battery negative is bonded to ground; in a floating system it is not.',
          'Protect the ground-rod connection from moisture and corrosion (proper clamp and sealant).'
        ],
        checks:[
          'Ground rod driven into moist soil.',
          'Green/yellow cable connects panels, controller/inverter and equipotential bar.',
          'With the multimeter on continuity (Ω) there is continuity between the inverter chassis, the panel frame and the ground bar.',
          'The ground-rod connection is tight and protected against moisture and corrosion.'
        ], layer:'ground' },
      { title:'Phase 3: The Heart (Batteries)', desc:'Wiring and powering up the system\'s intelligence.',
        tips:[
          'With everything off, measure each battery before joining them: to wire in parallel they must have almost equal voltages (a few tenths of a volt apart).',
          'Install the main fuse ({fuse} A) LAST, as close as possible to the bank\'s positive terminal. A small spark when closing the last contact is normal: the inverter capacitors are charging.',
          'Tighten terminals to the manufacturer\'s torque and use well-crimped lugs: a loose connection heats up.'
        ],
        checks:[
          'Batteries wired per manufacturer spec (parallel/series), with cables of equal length and gauge {battGauge}.',
          'Polarity verified with the multimeter (red probe on + reads positive) BEFORE closing the fuse.',
          'Multimeter reads between ~{battLo} and ~{battHi} V DC on the master cables, at rest (nominal {battNom} V).',
          'Main fuse of {fuse} A installed. Connected to the controller/inverter and powered on. Display is on.'
        ], warning:true },
      { title:'Phase 4: Solar Capture', desc:'Bringing energy down from the roof.',
        tips:[
          'Measure Voc with the DC breaker OFF and the panels in the sun. Voltage rises in cold weather: your design estimates {vocCold} V when cold and the controller handles {mpptVocMax} V at most.',
          'If the reading is half of what is expected, a panel is missing or a connector is loose; if it reads 0 V, check polarity and the MC4 connectors (they must be compatible with each other).',
          'After raising the breaker, watch the charging current on the controller display: the report recommends a controller of at least {mpptA} A.'
        ],
        checks:[
          'Panels wired per the design: {np} string(s) of {ns} panel(s) in series.',
          'Polarity of each string verified (+ to +) before connecting to the controller.',
          'Multimeter reads {arrVoc} (string Voc, in sun) at the DC breaker input, and it is LOWER than {mpptVocMax} V.',
          'Raise the DC breaker ({dcA} A). Controller shows "Charging".'
        ] },
      { title:'Phase 5: AC Output to the House', desc:'Handling inrush current (startup surge).',
        tips:[
          'Bring loads up from smallest to largest. Motors (fridge, pump) draw several times their rated power at startup; that is why they are connected one at a time.',
          'If the inverter shuts down when a motor starts, check that the suggested power ({invW} W) matches what you installed and that those loads are marked "Motor/startup".',
          'Write down the final values (battery voltage, array voltage and current, inverter load): they are your reference to spot faults later.',
          'If you have an infrared thermometer, check terminal and cable temperature after some time under load: they must not be hot.'
        ],
        checks:[
          'All house breakers are DOWN.',
          'With the inverter on and NO loads, the multimeter on V AC reads ≈ {acV} V at its output.',
          'Raise the inverter\'s main AC breaker.',
          'I pressed the RCD TEST button and it trips correctly.',
          'Raise the lighting circuit.',
          'Raise large loads SEPARATELY (wait 5 sec between them).',
          'With the large loads running, the inverter shows no overload and the battery voltage does not reach the low-voltage alarm.',
          'I wrote down the final reference values (battery V, array V and A, inverter load).'
        ] }
    ]
  };

  // v22: valores REALES del informe para las comprobaciones (si no hay cálculo, texto genérico)
  function wizardTokens(){
    const d = lastRenderParams || {};
    const A = d.array;
    const es = currentLang === 'es';
    const gen = es ? 'el de tu informe' : 'the one in your report';
    const V = d.voltage || 24;
    return {
      battNom: V, battLo: Math.round(V*0.85*10)/10, battHi: Math.round(V*1.15*10)/10,
      fuse: d.fuseAmps ?? gen, dcA: d.dcAmps ?? gen, acA: d.acAmps ?? gen, acV: d.acV ?? 120,
      panelGauge: d.panelGauge || gen, battGauge: d.battGauge || gen,
      arrVoc: A ? `≈ ${Math.round(A.ns*A.unit.voc*10)/10} V` : (es ? 'el voltaje esperado' : 'the expected voltage'),
      vocCold: A ? A.vocString : '—', mpptVocMax: A ? A.unit.mpptVocMax : '—',
      mpptA: d.mpptCurrent ?? '—', ns: A ? A.ns : '—', np: A ? A.np : '—', invW: d.invW ?? '—'
    };
  }
  function fillTokens(text, t){ return text.replace(/\{(\w+)\}/g, (all,k)=> (k in t) ? t[k] : all); }

  function openSecurityModal(){ document.getElementById('securityModal').style.display='flex'; }
  function closeSecurityModal(){ document.getElementById('securityModal').style.display='none'; }

  function renderWizard(){
    document.getElementById('wizardProLock').style.display = isProUser() ? 'none' : 'block';

    const steps = WIZARD_STEPS_I18N[currentLang] || WIZARD_STEPS_I18N.es;
    const stepData = steps[wizardStep];
    wizardChecklist = new Array(stepData.checks.length).fill(false);

    setDiagramLayer(stepData.layer || 'energy');
    if(stepData.warning && wizardStep === 2 && isProUser()) openSecurityModal();

    document.getElementById('wizardStepCounter').innerText = m('wizard.stepCounter', {n: wizardStep+1, total: steps.length});
    document.getElementById('wizardProgress').style.width = `${((wizardStep+1)/steps.length)*100}%`;

    const T = wizardTokens();
    let html = `<h4 class="font-display font-bold text-slate-800 mb-1">${stepData.title}</h4>
                <p class="text-sm text-slate-600 mb-4">${stepData.desc}</p>`;
    if(stepData.tips && stepData.tips.length){
      html += `<div class="qss-note qss-note-info mb-4"><div class="font-semibold mb-1">${m('wizard.tipsTitle')}</div>
               <ul class="list-disc pl-5 space-y-1">${stepData.tips.map(t=>`<li>${fillTokens(t,T)}</li>`).join('')}</ul></div>`;
    }
    html += `<div class="space-y-2.5">`;
    stepData.checks.forEach((check, i)=>{
      const text = fillTokens(check, T);
      html += `<label class="flex items-start p-3 bg-white border border-slate-200 rounded-lg ${isProUser() ? 'cursor-pointer hover:bg-slate-50' : 'opacity-60 cursor-not-allowed'} transition">
        <input type="checkbox" ${isProUser() ? '' : 'disabled'} class="mt-0.5 w-5 h-5 text-blue-600 rounded border-slate-300 shrink-0" onchange="toggleWizardCheck(${i}, this.checked)">
        <span class="ml-3 text-sm text-slate-700 leading-snug">${text}</span>
      </label>`;
    });
    html += `</div>`;
    document.getElementById('wizardContent').innerHTML = html;
    validateWizardButton();
  }

  function toggleWizardCheck(i, checked){
    wizardChecklist[i] = checked;
    validateWizardButton();
  }

  function validateWizardButton(){
    const btn = document.getElementById('wizardNextBtn');
    if(!isProUser()){
      btn.disabled = false;
      btn.className = 'w-full bg-brand-500 hover:bg-brand-600 text-white font-bold py-3 text-sm rounded-lg transition';
      btn.innerText = '🔒 ' + m('wizard.proLockBtn');
      return;
    }
    const steps = WIZARD_STEPS_I18N[currentLang] || WIZARD_STEPS_I18N.es;
    const allChecked = wizardChecklist.every(Boolean);
    if(allChecked){
      btn.disabled = false;
      btn.className = 'w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3 text-sm rounded-lg shadow-lg transition transform hover:-translate-y-0.5';
      btn.innerText = wizardStep === steps.length-1 ? m('wizard.finished') : m('wizard.confirmNext');
    } else {
      btn.disabled = true;
      btn.className = 'w-full bg-slate-300 text-slate-500 font-bold py-3 text-sm rounded-lg cursor-not-allowed';
      btn.innerText = m('wizard.completeChecklist');
    }
  }

  function nextWizardStep(){
    if(!isProUser()){
      document.getElementById('upgradeBtn')?.click();
      return;
    }
    const steps = WIZARD_STEPS_I18N[currentLang] || WIZARD_STEPS_I18N.es;
    if(wizardStep < steps.length - 1){
      wizardStep++;
      renderWizard();
    } else {
      showToast(m('wizard.finishedAlert'));
      setDiagramMode('free');
      wizardStep = 0;
    }
  }

  document.getElementById('calcAll').addEventListener('click', async ()=>{
    if(currentPlan !== 'pro' && !(currentPlan === 'single_use' && currentCredits > 0)){
      alert(m('gate.needPlan'));
      return;
    }
    if(!appliances.length){alert(m('gate.needLoad')); return;}

    const totalWh = computeTotalWh(appliances);

    const chosenVoltage=Number(document.getElementById('systemVoltage').value);
    const systemMode=document.getElementById('systemMode').value;
    const dod=Number(document.getElementById('dod').value);
    const autonomy=Number(document.getElementById('autonomyDays').value)||1;
    const invEff=Number(document.getElementById('invEff').value)/100;
    const panelEff=Number(document.getElementById('panelEff').value)/100;
    const sysLoss=Number(document.getElementById('systemLoss').value)/100;
    const tempDerate=Number(document.getElementById('tempDerate').value)/100;
    const cableDist=Number(document.getElementById('cableDistance').value)||10;
    const psh=Number(document.getElementById('pshManual').value)||Number(document.getElementById('pshSelect').value)||4;
    const pshSelEl=document.getElementById('pshSelect');
    const pshZone=(pshSelEl && pshSelEl.selectedOptions[0]) ? pshSelEl.selectedOptions[0].text : '';

    const { voltage, sizing, voltageNote } =
      decideVoltageAndSize({ totalWh, voltage: chosenVoltage, dod, autonomy, invEff, panelEff, sysLoss, tempDerate, psh, arrayInputs: readArrayInputs() });
    const { energyUse, battAh, panelWp, mpptCurrent, gauge, roofAreaM2, array } = sizing;
    const hasInductive = appliances.some(a=>a.inductive);
    // v25: si se ajustó el voltaje, el selector del Paso 3 queda mostrando el valor real usado
    // en el informe (evita que quede "24 V" a la vista mientras todo se calculó a 48 V).
    if(voltage !== chosenVoltage) document.getElementById('systemVoltage').value = String(voltage);

    renderResultsUI({
      totalWh, energyUse, battAh, panelWp, mpptCurrent, gauge, voltage, systemMode, roofAreaM2,
      cableDist, hasInductive, appliancesCount: appliances.length,
      invEffPct: Math.round(invEff*100), array, autonomy, dod, voltageNote
    });

    lastCalcData = {
      projectName: document.getElementById('projectName').value,
      city: document.getElementById('city').value,
      pshManual: document.getElementById('pshManual').value,
      psh: psh, pshZone: pshZone,
      appVersion: APP_VERSION, savedAt: new Date().toISOString(),
      systemVoltage: voltage,
      systemMode: systemMode,
      appliances: JSON.parse(JSON.stringify(appliances)),
      autonomyDays: autonomy,
      dod: dod,
      invEff: Math.round(invEff*100),
      panelEff: Math.round(panelEff*100),
      systemLoss: Math.round(sysLoss*100),
      tempDerate: Math.round(tempDerate*100),
      cableDistance: cableDist,
      acVoltage: getAcVoltage(), panelUnitWp: array.unit.unitWp, panelVoc: array.unit.voc, panelVmp: array.unit.vmp,
      panelIsc: array.unit.isc, mpptVocMax: array.unit.mpptVocMax,
      resultados: { totalWh, energyUse, battAh, panelWp, mpptCurrent, gauge }
    };
    document.getElementById('saveMsg').innerText='';

    // Descuenta el crédito de forma segura: el navegador solo PIDE el descuento,
    // la función en Supabase (consume_single_use_credit) decide y ejecuta —
    // nunca se le da al navegador permiso de escribir "plan" o "créditos" directamente.
    if(currentPlan === 'single_use' && currentCredits > 0){
      const { data: rpcResult, error: rpcErr } = await sb.rpc('consume_single_use_credit');

      if(rpcErr){
        console.error('Error consumiendo crédito:', rpcErr);
      } else if(rpcResult && rpcResult.success){
        currentCredits = rpcResult.credits;
        currentPlan = currentCredits <= 0 ? 'free' : 'single_use';
      } else {
        console.warn('No se pudo consumir crédito (sin créditos disponibles o plan incorrecto).');
      }

      updateCalcGate();
      if(currentCredits <= 0){
        document.getElementById('calcGateMsg').innerText = m('gate.lastUse');
      }
    }

    showStep(3);
  });

  // v22: informe TXT completo, armado desde los datos (no copiando la pantalla).
  function buildReportText(){
    const p = lastRenderParams, c = lastCalcData;
    if(!p || !c) return null;
    const es = currentLang === 'es';
    const T = (a,b) => es ? a : b;
    const A = p.array;
    const invW = estimateInverterWatts();
    const peakW = computePeakSimultaneousW();
    const acV = p.acV || getAcVoltage();
    const nomKWh = (p.battAh * p.voltage) / 1000;
    const L = [];
    const rule = (ch) => (ch||'-').repeat(72);
    const pad = (x,n) => String(x).padEnd(n);
    const kv = (k,v) => L.push('  ' + pad(k,46) + v);
    const H = (t) => { L.push('', rule('='), ' ' + t, rule('=')); };
    const yes = (b) => b ? T('Sí','Yes') : T('No','No');

    L.push(rule('='), ' QUICK SOLAR SOLUTION — ' + T('INFORME DE DIMENSIONAMIENTO FOTOVOLTAICO','PHOTOVOLTAIC SIZING REPORT'), rule('='));
    kv(T('Proyecto','Project'), c.projectName || T('(sin nombre)','(unnamed)'));
    kv(T('Ubicación','Location'), c.city || T('(no indicada)','(not provided)'));
    kv(T('Fecha del informe','Report date'), new Date().toLocaleString(es ? 'es' : 'en'));
    kv(T('Versión de la app','App version'), APP_VERSION);
    kv(T('Tipo de sistema','System type'), p.systemMode === 'hybrid' ? T('Híbrido (batería + panel + red)','Hybrid (battery + panel + grid)') : T('Aislado (batería + panel)','Off-grid (battery + panel)'));

    H('1. ' + T('RESUMEN DE RESULTADOS','RESULTS SUMMARY'));
    kv(T('Energía diaria consumida','Daily energy consumed'), Math.round(p.totalWh) + ' Wh/' + T('día','day'));
    kv(T('Energía útil requerida (con pérdidas)','Required energy (with losses)'), Math.round(p.energyUse) + ' Wh/' + T('día','day'));
    kv(T('Potencia pico simultánea','Peak simultaneous power'), Math.round(peakW) + ' W');
    kv(T('Inversor sugerido (continua)','Suggested inverter (continuous)'), (invW || '—') + ' W');
    kv(T('Potencia de paneles requerida','Required panel power'), p.panelWp + ' Wp');
    if(A) kv(T('Potencia de paneles instalada','Installed panel power'), A.arrayWp + ' Wp (' + A.n + ' × ' + A.unit.unitWp + ' Wp)');
    kv(T('Banco de baterías','Battery bank'), p.battAh + ' Ah @ ' + p.voltage + ' V  (' + nomKWh.toFixed(1) + ' kWh ' + T('nominales','nominal') + ', ' + (nomKWh * p.dod).toFixed(1) + ' kWh ' + T('utilizables','usable') + ')');
    kv(T('Corriente de salida del controlador','Controller output current'), p.mpptCurrent + ' A');
    kv(T('Área de techo aproximada','Approx. roof area'), (p.roofAreaM2 != null ? p.roofAreaM2 : '—') + ' m²');

    const w = computeWarnings(p, invW);
    if(w.length){
      H('2. ' + T('AVISOS','WARNINGS'));
      w.forEach(x => L.push('  [' + (x.level==='danger' ? T('CRÍTICO','CRITICAL') : (x.level==='warn' ? T('ATENCIÓN','WARNING') : 'INFO')) + '] ' + m(x.key, x.vars)));
    }

    H('3. ' + T('DATOS DE ENTRADA','INPUT DATA'));
    L.push('  ' + T('3.1 Lista de cargas','3.1 Load list'));
    L.push('  ' + pad(T('Equipo','Appliance'),28) + pad('W',8) + pad(T('Cant.','Qty'),7) + pad('h/' + T('día','day'),8) + pad('Wh/' + T('día','day'),10) + T('Motor','Motor'));
    (c.appliances || []).forEach(a => {
      const qty = a.qty || 1;
      L.push('  ' + pad(String(a.name||'').slice(0,26),28) + pad(a.power,8) + pad(qty,7) + pad(a.hours,8) + pad(Math.round(a.power*qty*a.hours),10) + yes(a.inductive));
    });
    L.push('  ' + pad(T('TOTAL','TOTAL'),51) + Math.round(p.totalWh) + ' Wh');
    L.push('', '  ' + T('3.2 Parámetros del sistema','3.2 System parameters'));
    kv(T('Voltaje del sistema (batería)','System (battery) voltage'), p.voltage + ' V');
    kv(T('Radiación solar (PSH)','Solar radiation (PSH)'), (c.psh || c.pshManual || '—') + ' h/' + T('día','day') + (c.pshManual ? T(' (valor manual)',' (manual value)') : (c.pshZone ? ' (' + c.pshZone + ')' : '')));
    kv(T('Días de autonomía','Days of autonomy'), p.autonomy + (p.systemMode==='hybrid' ? T('  (nota: se aplica también en híbrido)','  (note: also applied in hybrid)') : ''));
    kv(T('Profundidad de descarga (DoD)','Depth of discharge (DoD)'), Math.round(p.dod*100) + ' %');
    kv(T('Eficiencia del inversor','Inverter efficiency'), (c.invEff != null ? c.invEff : p.invEffPct) + ' %');
    kv(T('Eficiencia del panel (STC)','Panel efficiency (STC)'), (c.panelEff != null ? c.panelEff : '—') + ' %');
    kv(T('Pérdidas del sistema','System losses'), (c.systemLoss != null ? c.systemLoss : '—') + ' %');
    kv(T('Derate por temperatura','Temperature derate'), (c.tempDerate != null ? c.tempDerate : '—') + ' %');
    kv(T('Distancia paneles → controlador','Distance panels → controller'), p.cableDist + ' m');
    kv(T('Voltaje AC de salida','AC output voltage'), acV + ' V');
    kv(T('¿Ya tiene baterías/inversor?','Already owns batteries/inverter?'), ({none:T('No','No'), some:T('Algunos','Some'), all:T('Sí, todo','Yes, all')})[(document.getElementById('haveComponents')||{}).value] || '—');
    L.push('', '  ' + T('3.3 Panel y controlador','3.3 Panel and controller'));
    if(A){
      kv(T('Potencia del panel','Panel power'), A.unit.unitWp + ' Wp');
      kv('Voc / Vmp / Isc', A.unit.voc + ' V / ' + A.unit.vmp + ' V / ' + A.unit.isc + ' A');
      kv(T('Voc máx. del controlador','Controller max Voc'), A.unit.mpptVocMax + ' V');
      kv(T('¿Son valores típicos precargados?','Are these the pre-filled typical values?'), yes(A.isDefault) + (A.isDefault ? T('  → reemplázalos por los de tu etiqueta/ficha y recalcula','  → replace them with your label/datasheet values and recalculate') : ''));
    }

    if(A){
      H('4. ' + T('ARREGLO FOTOVOLTAICO','PHOTOVOLTAIC ARRAY'));
      kv(T('Paneles','Panels'), A.n + ' × ' + A.unit.unitWp + ' Wp = ' + A.arrayWp + ' Wp');
      kv(T('Configuración','Configuration'), A.np + ' ' + T('string(s) de','string(s) of') + ' ' + A.ns + ' ' + T('en serie','in series'));
      kv(T('Voc del string en frío','String Voc (cold)'), A.vocString + ' V  (' + T('máx. del controlador','controller max') + ': ' + A.unit.mpptVocMax + ' V)');
      kv(T('Vmp del string','String Vmp'), A.vmpString + ' V');
      kv(T('Isc del arreglo','Array Isc'), A.iscArray + ' A');
    }

    H('5. ' + T('PROTECCIONES Y CABLEADO','PROTECTIONS AND WIRING'));
    if(A) kv(T('Breaker DC (paneles → controlador)','DC breaker (panels → controller)'), A.breakerA + ' A, ' + T('tensión nominal DC ≥','DC voltage rating ≥') + ' ' + A.vocString + ' V');
    if(A && A.stringFuseA) kv(T('Fusible por string','String fuse'), A.stringFuseA + ' A ' + T('en cada uno de los','on each of the') + ' ' + A.np + ' strings');
    kv(T('Fusible principal de batería','Main battery fuse'), p.fuseAmps + ' A');
    kv(T('Protección AC de salida (RCD + breaker)','AC output protection (RCD + breaker)'), p.acAmps + ' A @ ' + acV + ' V');
    if(p.systemMode === 'hybrid') kv(T('Breaker entre red e inversor','Grid-to-inverter breaker'), p.acAmps + ' A @ ' + acV + ' V');
    const pc = p.panelCableInfo;
    kv(T('Cable lado paneles','Panel-side cable'), p.panelGauge + ' — ' + p.cableDist + ' m' + (pc ? (pc.byDrop ? T(' (lo define la caída de tensión ≤ 3 %, sección mín. ',' (set by voltage drop ≤ 3 %, min. section ') + pc.minMm2 + ' mm²)' : T(' (soporta el breaker y cumple caída ≤ 3 %)',' (carries the breaker, drop ≤ 3 % met)')) : ''));
    kv(T('Cable lado batería','Battery-side cable'), p.battGauge + ' — ' + T('soporta el fusible de','carries the') + ' ' + p.fuseAmps + ' A ' + T('(mantener lo más corto posible)','fuse (keep as short as possible)'));
    kv(T('Controlador MPPT (mínimo)','MPPT controller (minimum)'), p.mpptCurrent + ' A ' + T('de salida; Voc máx. ≥','output; max Voc ≥') + ' ' + (A ? A.vocString : '—') + ' V');

    H('6. ' + T('FÓRMULAS Y CONSTANTES USADAS','FORMULAS AND CONSTANTS USED'));
    [
      T('Energía diaria = Σ(Potencia × cantidad × horas)','Daily energy = Σ(Power × quantity × hours)'),
      T('Energía útil = Energía diaria / (η_inversor × (1 − pérdidas))','Required energy = Daily energy / (η_inverter × (1 − losses))'),
      T('Wp requeridos = Energía diaria / (PSH × (1 − derate) × (1 − pérdidas))','Required Wp = Daily energy / (PSH × (1 − derate) × (1 − losses))'),
      T('Batería (Ah) = Energía diaria × días / (V_sistema × DoD)','Battery (Ah) = Daily energy × days / (V_system × DoD)'),
      T('Paneles N = ceil(Wp requeridos / Wp del panel)','Panels N = ceil(required Wp / panel Wp)'),
      T('Corriente del controlador = Wp instalados × 1,25 / V_sistema','Controller current = installed Wp × 1.25 / V_system'),
      T('Voc en frío = Voc × ' + COLD_VOC_FACTOR + ' (constante de la app)','Cold Voc = Voc × ' + COLD_VOC_FACTOR + ' (app constant)'),
      T('Strings: se elige el nº en serie entre floor(Voc máx./Voc frío) y ceil((1,2·V_bat + ' + MPPT_START_MARGIN_V + ')/Vmp) que menos paneles requiera','Strings: series count chosen between floor(max Voc/cold Voc) and ceil((1.2·V_bat + ' + MPPT_START_MARGIN_V + ')/Vmp) needing the fewest panels'),
      T('Breaker DC = Isc del arreglo × 1,25 × 1,25 (a valor estándar); fusible por string desde 3 strings','DC breaker = array Isc × 1.25 × 1.25 (to standard rating); string fuse from 3 strings'),
      T('Fusible de batería = máx(corriente de descarga del inversor, corriente del controlador) × 1,25','Battery fuse = max(inverter discharge current, controller current) × 1.25'),
      T('Protección AC = (P_inversor / V_AC) × 1,25','AC protection = (P_inverter / V_AC) × 1.25'),
      T('Cable lado paneles = el mayor entre el que soporta el breaker y S ≥ 2·L·I·' + COPPER_RESISTIVITY + ' / (' + DROP_TARGET_PCT + ' % · V)','Panel-side cable = the larger of what carries the breaker and S ≥ 2·L·I·' + COPPER_RESISTIVITY + ' / (' + DROP_TARGET_PCT + ' % · V)'),
      T('Cable lado batería = soporta el fusible principal (tabla de calibres de la app)','Battery-side cable = carries the main fuse (app gauge table)'),
      T('Factor de arranque de motores (pico) = ' + INRUSH_SURGE_FACTOR + '×; inversor = pico simultáneo × 1,15 redondeado a 100 W','Motor start surge factor = ' + INRUSH_SURGE_FACTOR + '×; inverter = simultaneous peak × 1.15 rounded to 100 W')
    ].forEach(x => L.push('  • ' + x));

    H('7. ' + T('NOTAS IMPORTANTES','IMPORTANT NOTES'));
    [
      T('Este informe es una ESTIMACIÓN de pre-diseño, no un proyecto eléctrico firmado.','This report is a pre-design ESTIMATE, not a signed electrical design.'),
      T('Verifica cada valor con las fichas técnicas de tus equipos y con la norma eléctrica de tu país.','Verify every value against your equipment datasheets and your country\'s electrical code.'),
      T('La instalación final debe ser revisada por un instalador o electricista calificado.','The final installation must be reviewed by a qualified installer or electrician.'),
      T('Los datos de panel y controlador precargados son típicos, no de un modelo específico.','Pre-filled panel and controller data are typical, not from a specific model.')
    ].forEach(x => L.push('  • ' + x));
    L.push('', rule('-'), ' Quick Solar Solution ' + APP_VERSION, rule('-'));
    return '\uFEFF' + L.join('\n');
  }

  document.getElementById('exportReport').addEventListener('click',()=>{
    const text = buildReportText();
    if(!text){ showToast(m('save.calcFirst')); return; }
    const blob = new Blob([text], {type:'text/plain;charset=utf-8'});
    const a = document.createElement('a');
    const safeName = (document.getElementById('projectName').value||'dimensionado').replace(/[^\w\-áéíóúñÁÉÍÓÚÑ ]+/g,'').trim() || 'dimensionado';
    a.href = URL.createObjectURL(blob);
    a.download = safeName + '_' + new Date().toISOString().slice(0,10) + '.txt';
    a.click();
  });
  document.getElementById('printReport').addEventListener('click',()=>window.print());

  captureOriginals();
  applyLanguage();
  document.getElementById('langToggleBtn').addEventListener('click', ()=>{
    currentLang = currentLang === 'es' ? 'en' : 'es';
    applyLanguage();
  });
</script>
</body>
</html>