:root {
  --primario: #120949;       /* azul marino Obramat */
  --primario-suave: #241a63;
  --acento: #ff671f;         /* naranja Obramat */
  --fondo: #f4f5f8;
  --tarjeta: #ffffff;
  --texto: #1b2430;
  --texto-suave: #5b6572;
  --borde: #dde1ea;
  --naranja: #ff671f;
  --verde: #1f9d55;
  /* --primario es un azul casi negro: perfecto de FONDO (cabecera, botones,
     con texto blanco encima), pero como color de TEXTO sobre una tarjeta
     oscura se vuelve prácticamente invisible — de ahí que en modo oscuro
     apenas se vieran los títulos y la insignia. --primario-texto es el mismo
     azul de marca cuando hay fondo claro, y un azul claro legible cuando el
     fondo es oscuro; se usa en título/texto, --primario se sigue usando tal
     cual para fondos. */
  --primario-texto: var(--primario);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0e1015;
    --tarjeta: #181b23;
    --texto: #edf1f7;
    --texto-suave: #9aa5b3;
    --borde: #2b3542;
    --primario-suave: #2b2170;
    --primario-texto: #a5b4fc;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background-color: var(--fondo);
  background-image:
    linear-gradient(color-mix(in srgb, var(--primario) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--primario) 7%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--primario) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--primario) 4%, transparent) 1px, transparent 1px);
  background-size: 88px 88px, 88px 88px, 22px 22px, 22px 22px;
  background-attachment: fixed;
}

/* ---------- Insignias flotantes (beta / no oficial) ---------- */
.insignia-flotante {
  position: fixed;
  top: 10px;
  z-index: 80;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 5px 11px;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.insignia-no-oficial {
  left: 10px;
  background: var(--tarjeta);
  color: var(--primario-texto);
  border: 1px solid var(--acento);
}
.insignia-version {
  right: 10px;
  background: var(--primario);
  color: #fff;
  cursor: pointer;
  border: none;
}
.panel-changelog {
  position: fixed; top: 40px; right: 10px; z-index: 80;
  width: 260px; max-width: calc(100vw - 20px);
  background: var(--tarjeta); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 12px;
  padding: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  display: none; font-size: .8rem;
}
.panel-changelog.abierto { display: block; }
.panel-changelog h4 { margin: 0 0 8px; font-size: .85rem; color: var(--primario-texto); }
.panel-changelog ul { margin: 0; padding-left: 18px; }
.panel-changelog li { margin-bottom: 8px; }
.panel-changelog .version-num { font-weight: 700; color: var(--acento); }
.panel-changelog .version-fecha { color: var(--texto-suave); font-size: .72rem; }

/* ---------- Cabecera ---------- */
.cabecera {
  background: var(--primario);
  color: #fff;
  padding: 34px 16px 18px;
  text-align: center;
  border-bottom: 4px solid var(--acento);
}

.cabecera nav a { color: #fff !important; opacity: .85; }
.cabecera nav a:hover { opacity: 1; }
.cabecera nav .btn-secundario { border-color: rgba(255, 255, 255, .5); color: #fff; }

.cabecera h1 { margin: 0 0 14px; font-size: 1.4rem; }

/* Marca "Helio 3": celda de la tabla periódica del helio con el número másico 3
   (el isótopo He-3, el de la fusión nuclear). Va dibujada en SVG y no como PNG
   para que quede nítida en cualquier pantalla y herede el color del tema.
   El recuadro no lleva fondo propio: la cabecera ya es azul marino, así que un
   relleno navy encima sería invisible — se deja transparente y manda el marco. */
.marca { display: flex; align-items: center; justify-content: center; gap: 12px; }
.marca-logo { width: 44px; height: 44px; flex: 0 0 44px; }
.marca-logo rect { fill: rgba(255, 255, 255, .06); stroke: var(--acento); stroke-width: 2.6; }
.marca-logo text { font-family: Arial, Helvetica, sans-serif; font-weight: 700; }
.marca-logo-simbolo { font-size: 26px; fill: #fff; }
.marca-logo-sup { font-size: 14px; fill: var(--acento); }
.marca-texto { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.marca-texto small { font-size: .6rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }

@media (max-width: 420px) {
  .marca-texto small { font-size: .55rem; }
}

.progreso { max-width: 480px; margin: 0 auto; }
.progreso-fondo { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.progreso-barra { height: 100%; background: var(--acento); transition: width .25s ease; }
.progreso-texto { display: block; margin-top: 6px; font-size: .8rem; color: rgba(255, 255, 255, .75); }

.contenedor {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 16px 100px;
}

.paso { display: none; animation: aparecer .2s ease; }
.paso.activo { display: block; }

@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

h2 { font-size: 1.2rem; margin-bottom: 6px; color: var(--primario-texto); }
h3 { font-size: 1rem; margin: 18px 0 8px; }
.ayuda { color: var(--texto-suave); margin-top: 0; }

.icono-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}
.icono-grid-grande { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.grupo-titulo { margin-top: 20px; color: var(--texto-suave); text-transform: uppercase; font-size: .75rem; letter-spacing: .04em; }

.grupo-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.grupo-cabecera .grupo-titulo { margin-top: 20px; }
.btn-grupo-todo {
  margin-top: 16px; padding: 4px 12px; border-radius: 999px; font-size: .72rem; font-weight: 600;
  border: 1px solid var(--acento); background: transparent; color: var(--acento); cursor: pointer; white-space: nowrap;
}
.btn-grupo-todo.activo { background: var(--acento); color: #fff; }

.icono-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  border-radius: 14px;
  border: 2px solid var(--borde);
  background: var(--tarjeta);
  color: var(--texto);
  cursor: pointer;
  text-align: center;
  font-size: .85rem;
  transition: border-color .15s ease, transform .1s ease;
}
.icono-btn:hover { border-color: var(--acento); transform: translateY(-1px); }
.icono-btn.seleccionado { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 10%, var(--tarjeta)); }
.icono-svg {
  width: 34px; height: 34px; display: block;
  fill: none; stroke: var(--primario-texto); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.icono-btn.seleccionado .icono-svg { stroke: var(--acento); }

/* ---------- Productos laterales (relleno de márgenes en desktop ancho) ---------- */
.lateral-productos {
  display: none;
  position: fixed; top: 160px; width: 130px; z-index: 5;
  flex-direction: column; gap: 10px;
  opacity: .7;
}
/* El contenido central mide 720px como máximo (.contenedor): la tarjeta tiene
   que quedar despegada de su borde (no pegada) pero visible en una ventana
   de Safari "normal" sin maximizar (~1470px de ancho, no solo en pantalla
   completa). Solo 1 tarjeta por lado, pequeña: es un apunte al margen, no
   una segunda columna de contenido. */
.lateral-izq { left: max(18px, calc(50% - 530px)); }
.lateral-der { right: max(18px, calc(50% - 530px)); }
@media (min-width: 1300px) {
  .lateral-productos { display: flex; }
}
.lateral-producto-card {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 8px;
  padding: 8px; font-size: .68rem;
}
.lateral-titulo { display: block; font-size: .56rem; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-suave); margin-bottom: 3px; }
.lateral-nombre { display: block; font-weight: 600; color: var(--texto); line-height: 1.3; margin-bottom: 4px; }
.lateral-precio { display: block; font-weight: 700; color: var(--acento); }
.lateral-producto-card a { display: inline-block; margin-top: 6px; color: var(--primario-texto); text-decoration: none; font-size: .68rem; font-weight: 600; }
.lateral-producto-card a:hover { text-decoration: underline; }

/* ---------- Boceto evolutivo ---------- */
.boceto-container {
  position: sticky; top: 0; z-index: 20;
  background: var(--tarjeta); border-bottom: 1px solid var(--borde);
  padding: 6px 10px 2px; margin: 0 -16px 10px;
}
.boceto-container svg { border-radius: 10px; display: block; }
/* Mismo lenguaje visual que el esquema de tiradas del paso 5 (plano técnico:
   fondo azul, cuadrícula, trazos finos en blanco/cian), para que todo el
   recorrido del asistente se sienta como un único documento de proyecto. */
.boceto-suelo { stroke: #7ec8ff; stroke-width: 1; opacity: .7; }
.boceto-poste, .boceto-cable { stroke: #9fc2ef; stroke-width: 1.3; fill: none; }
.boceto-cable { stroke-dasharray: 4 3; }
.boceto-sol { fill: none; stroke: #ffb703; stroke-width: 1.4; stroke-linecap: round; }
.boceto-casa { fill: none; stroke: #eaf2ff; stroke-width: 1.6; }
.boceto-tejado { fill: rgba(255,255,255,.05); stroke: #eaf2ff; stroke-width: 1.6; }
.boceto-puerta { fill: none; stroke: #eaf2ff; stroke-width: 1.2; }
.boceto-bateria { fill: rgba(255,255,255,.05); stroke: #7ec8ff; stroke-width: 1.4; }
.boceto-bateria-icono { fill: none; stroke: #7ec8ff; stroke-width: 1.3; }
.boceto-inversor { fill: rgba(255,255,255,.08); stroke: #eaf2ff; stroke-width: 1.4; }
.boceto-etiqueta-inv { fill: #eaf2ff; font: 700 10px 'Courier New', monospace; letter-spacing: .04em; }
.boceto-etiqueta { fill: #9fc2ef; font: 700 11px 'Courier New', monospace; letter-spacing: .03em; }
.boceto-icono-svg { fill: none; stroke: #cfe3ff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Relleno OPACO (el mismo azul del fondo del plano) en vez de translúcido:
   así el panel tapa por sí solo el trazo del tejado/estructura que tiene
   detrás, sin necesidad de dibujar un rectángulo-máscara aparte — que era lo
   que se veía como un "recuadro" borrando el fondo alrededor de los paneles. */
.boceto-panel { fill: #0b2f5c; stroke: #eaf2ff; stroke-width: 1.2; }
.boceto-porche-tejado { fill: rgba(255,255,255,.06); stroke: #eaf2ff; stroke-width: 1.3; }
.boceto-porche-poste { fill: #cfe3ff; }

.opciones-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; max-height: 340px; overflow-y: auto; }
.opcion-radio {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borde);
  background: var(--tarjeta); cursor: pointer;
}
.opcion-radio:has(input:checked) { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 8%, var(--tarjeta)); }

.oculto { display: none; }

.aire-frigorias-bloque {
  margin: -6px 0 16px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--borde); background: color-mix(in srgb, var(--acento) 6%, var(--tarjeta));
}
.aire-frigorias-titulo { margin: 0 0 8px; font-weight: 700; font-size: 14px; }
.opciones-lista-horizontal { flex-direction: row; flex-wrap: wrap; max-height: none; }
.opcion-radio-compacta { padding: 7px 10px; font-size: 13px; }

.tarjeta {
  margin-top: 16px;
  padding: 16px;
  border-radius: 14px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--primario-texto);
}
.tarjeta p { margin: 6px 0; }

.tiradas-lista { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.tirada-fila { display: flex; align-items: center; gap: 8px; }
.tirada-fila span { min-width: 70px; }
.tirada-input { width: 60px; padding: 6px; border-radius: 8px; border: 1px solid var(--borde); text-align: center; }
.btn-mini {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--borde);
  background: var(--tarjeta); color: var(--texto); cursor: pointer; font-size: 1rem;
}
.btn-eliminar { margin-left: auto; color: #c0392b; }

.tiradas-resumen { font-weight: 600; }
.tiradas-resumen.aviso { color: var(--acento); }

.diagrama-container {
  margin-top: 12px; padding: 0; border-radius: 14px;
  overflow-x: auto; overflow-y: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.diagrama-container svg { display: block; min-width: 480px; border-radius: 14px; }

.diagrama-fondo { fill: #0b2f5c; }
.diagrama-marco { fill: none; stroke: #cfe3ff; stroke-width: 1.5; opacity: .8; }
.diagrama-grid-menor { fill: none; stroke: #ffffff; stroke-width: .5; opacity: .06; }
.diagrama-grid-mayor { fill: none; stroke: #ffffff; stroke-width: .7; opacity: .12; }

.diagrama-panel { fill: rgba(255,255,255,.06); stroke: #eaf2ff; stroke-width: 1.4; }
.diagrama-panel-linea { stroke: #eaf2ff; stroke-width: .6; opacity: .55; }
.diagrama-panel-medidas { font: 6.5px 'Courier New', monospace; fill: #9fc2ef; text-anchor: middle; dominant-baseline: middle; letter-spacing: .02em; }

.diagrama-label { font: 700 11px 'Courier New', monospace; fill: #eaf2ff; letter-spacing: .04em; }
.diagrama-label-sub { font: 10px 'Courier New', monospace; fill: #9fc2ef; }

.diagrama-cota-linea { stroke: #7ec8ff; stroke-width: 1; }
.diagrama-flecha { fill: #7ec8ff; }
.diagrama-cota-texto { font: 9px 'Courier New', monospace; fill: #7ec8ff; text-anchor: middle; }

.diagrama-cajetin-linea { stroke: #cfe3ff; stroke-width: 1; opacity: .6; }
.diagrama-cajetin-titulo { font: 700 11px 'Courier New', monospace; fill: #eaf2ff; letter-spacing: .06em; }
.diagrama-cajetin-dato { font: 10px 'Courier New', monospace; fill: #9fc2ef; letter-spacing: .02em; }

.presupuesto-grupo { margin-top: 18px; color: var(--primario-texto); }
.presupuesto-tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.presupuesto-tabla td, .presupuesto-tabla th { padding: 6px 4px; border-bottom: 1px solid var(--borde); }
.presupuesto-tabla th { text-align: left; color: var(--texto-suave); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.presupuesto-tabla td:last-child, .presupuesto-tabla td:nth-child(4),
.presupuesto-tabla th:last-child, .presupuesto-tabla th:nth-child(4) { text-align: right; white-space: nowrap; }
.fila-subtotal td { font-weight: 600; border-bottom: none; border-top: 1px solid var(--borde); }

.presupuesto-total { margin-top: 18px; font-size: 1.3rem; font-weight: 700; color: var(--primario-texto); }
.aviso-legal { color: var(--texto-suave); font-size: .8rem; }
.aviso-faltantes {
  margin-top: 14px; padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--acento) 12%, var(--tarjeta));
  border: 1px solid var(--acento); font-size: .82rem;
}

.presupuesto-layout { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.presupuesto-principal { flex: 3 1 400px; min-width: 0; }
.presupuesto-lateral { flex: 1 1 220px; min-width: 220px; display: flex; flex-direction: column; gap: 12px; }
.tarjeta-lateral { margin-top: 0; }
.encuesta-botones { display: flex; gap: 10px; }
.btn-encuesta {
  flex: 1; font-size: 1.6rem; padding: 10px; border-radius: 10px;
  border: 1px solid var(--borde); background: var(--tarjeta); cursor: pointer;
  transition: transform .1s ease, border-color .15s ease;
}
.btn-encuesta:hover { transform: translateY(-1px); border-color: var(--acento); }
.btn-encuesta.votado { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, var(--tarjeta)); }
.btn-encuesta:disabled { opacity: .6; cursor: default; transform: none; }

.btn-fila-sustituir {
  padding: 3px 8px; font-size: .72rem; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--tarjeta); color: var(--primario-texto); cursor: pointer;
}
.btn-fila-sustituir.sustituido { border-color: var(--acento); color: var(--acento); }
.input-cantidad-fila {
  width: 56px; padding: 3px 4px; border-radius: 6px; border: 1px solid var(--borde);
  text-align: center; background: var(--tarjeta); color: var(--texto);
}

.modal-overlay:not(.oculto) {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px;
}
.modal-caja {
  background: var(--tarjeta); border-radius: 14px; padding: 18px;
  width: 100%; max-width: 480px; max-height: 80vh; display: flex; flex-direction: column;
}
#modal-sustituir-buscar {
  width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--borde);
  background: var(--tarjeta); color: var(--texto); margin-top: 8px;
}
.modal-resultados { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.modal-resultado-item {
  text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--borde);
  background: var(--tarjeta); color: var(--texto); cursor: pointer; font-size: .85rem;
}
.modal-resultado-item:hover { border-color: var(--acento); }
.modal-resultado-item .precio { color: var(--texto-suave); font-size: .78rem; }

.pie-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; gap: 10px;
  padding: 12px 16px; background: var(--tarjeta); border-top: 1px solid var(--borde);
}
.btn-primario, .btn-secundario {
  padding: 12px 22px; border-radius: 10px; font-size: 1rem; cursor: pointer; border: none;
  font-weight: 600;
}
.btn-primario { background: var(--acento); color: #fff; }
.btn-primario:disabled { background: var(--borde); color: var(--texto-suave); cursor: not-allowed; }
.btn-secundario { background: transparent; border: 1px solid var(--borde); color: var(--texto); }
.btn-secundario:disabled { opacity: .4; cursor: not-allowed; }