:root {
  --primario: #120949;       /* azul marino Obramat */
  --primario-suave: #2b2170;
  --acento: #ff671f;         /* naranja Obramat */
  /* La página es oscura siempre (ver el degradado del body): un tema claro
     encima de un fondo que va de azul a negro dejaría los textos que van
     directamente sobre el fondo —títulos de paso, ayudas, etiquetas— sin
     contraste. Estos eran los valores del modo oscuro y ahora son los únicos. */
  --fondo: #120e2c;
  --tarjeta: #1c1740;
  --texto: #edf1f7;
  --texto-suave: #c3cedb;
  --borde: #362e63;
  --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: #a5b4fc;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background-color: #05030f;
  /* Dos capas:
     1) El espectro de emisión del helio. Cada línea vertical está en la
        posición de su longitud de onda dentro del visible (380-750 nm) y lleva
        su color. Son las nueve líneas reales del He I (fuente: NIST Atomic
        Spectra Database); la amarilla de 587,6 nm va más gruesa porque es la
        línea D3, la que se vio en el espectro del Sol en 1868 y la que hizo
        que al elemento se le llamara helio. Va FIJA a la ventana.
     2) El degradado de la página: azul de la cabecera arriba y casi negro
        abajo. Va con attachment scroll y alto 100%, así que recorre el
        documento entero — de lo más bajo de la página hasta la cabecera— en
        vez de repetirse en cada pantalla. La propia cabecera no lleva fondo
        propio (ver .cabecera), de modo que todo es una sola pieza continua. */
  background-image:
linear-gradient(90deg,
      transparent calc(2.405% - 0.70px),
      rgba(154,107,240,0.20) calc(2.405% - 0.70px),
      rgba(154,107,240,0.20) calc(2.405% + 0.70px),
      transparent calc(2.405% + 0.70px),
      transparent calc(18.135% - 0.80px),
      rgba(92,104,255,0.27) calc(18.135% - 0.80px),
      rgba(92,104,255,0.27) calc(18.135% + 0.80px),
      transparent calc(18.135% + 0.80px),
      transparent calc(24.676% - 0.70px),
      rgba(79,150,255,0.22) calc(24.676% - 0.70px),
      rgba(79,150,255,0.22) calc(24.676% + 0.70px),
      transparent calc(24.676% + 0.70px),
      transparent calc(30.324% - 0.70px),
      rgba(42,208,230,0.24) calc(30.324% - 0.70px),
      rgba(42,208,230,0.24) calc(30.324% + 0.70px),
      transparent calc(30.324% + 0.70px),
      transparent calc(32.865% - 0.80px),
      rgba(62,224,138,0.28) calc(32.865% - 0.80px),
      rgba(62,224,138,0.28) calc(32.865% + 0.80px),
      transparent calc(32.865% + 0.80px),
      transparent calc(56.108% - 1.40px),
      rgba(255,210,63,0.46) calc(56.108% - 1.40px),
      rgba(255,210,63,0.46) calc(56.108% + 1.40px),
      transparent calc(56.108% + 1.40px),
      transparent calc(77.784% - 0.90px),
      rgba(255,92,77,0.30) calc(77.784% - 0.90px),
      rgba(255,92,77,0.30) calc(77.784% + 0.90px),
      transparent calc(77.784% + 0.90px),
      transparent calc(88.243% - 0.70px),
      rgba(232,80,63,0.22) calc(88.243% - 0.70px),
      rgba(232,80,63,0.22) calc(88.243% + 0.70px),
      transparent calc(88.243% + 0.70px),
      transparent calc(94.081% - 0.60px),
      rgba(200,64,47,0.16) calc(94.081% - 0.60px),
      rgba(200,64,47,0.16) calc(94.081% + 0.60px),
      transparent calc(94.081% + 0.60px)),
    linear-gradient(180deg,
      #2e1e9c 0%,
      #281884 24%,
      #201269 50%,
      #170d4c 74%,
      #0d0730 100%);
  background-size: 100% 100vh, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, scroll;
}


/* ---------- Insignias flotantes (beta / no oficial) ---------- */
.insignia-flotante {
  /* absolute, no fixed: en fixed se quedaban clavadas arriba de la pantalla y,
     al bajar por el presupuesto, se plantaban encima de las filas de material
     tapando referencias e importes. En absolute se ven al entrar, que es
     cuando hacen falta, y se van con el scroll. */
  position: absolute;
  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 ---------- */
/* La cabecera es la única superficie oscura de la web, así que es donde el
   espectro del helio se ve como se ve de verdad: líneas de emisión brillando
   sobre fondo negro. Las líneas caen en el mismo porcentaje de ancho que las
   del fondo de la página, así que se prolongan sin cortarse al pasar de una a
   otra. Debajo, un degradado vertical que da profundidad en vez del azul plano,
   y un halo cálido detrás del logo haciendo de sol. */
.cabecera {
  position: relative;
  color: #fff;
  padding: 34px 16px 20px;
  text-align: center;
  /* Sin fondo propio: el degradado azul→negro lo pinta ya la página entera
     (ver body), y si la cabecera repitiera aquí su propio degradado se vería
     un corte justo donde termina. Solo conserva sus líneas de emisión, más
     brillantes que las del resto de la página, y el halo cálido del logo. */
  background-color: transparent;
  background-image:
    linear-gradient(90deg,
      transparent calc(2.405% - 0.70px),
      rgba(154,107,240,0.34) calc(2.405% - 0.70px),
      rgba(154,107,240,0.34) calc(2.405% + 0.70px),
      transparent calc(2.405% + 0.70px),
      transparent calc(18.135% - 0.80px),
      rgba(92,104,255,0.46) calc(18.135% - 0.80px),
      rgba(92,104,255,0.46) calc(18.135% + 0.80px),
      transparent calc(18.135% + 0.80px),
      transparent calc(24.676% - 0.70px),
      rgba(79,150,255,0.38) calc(24.676% - 0.70px),
      rgba(79,150,255,0.38) calc(24.676% + 0.70px),
      transparent calc(24.676% + 0.70px),
      transparent calc(30.324% - 0.70px),
      rgba(42,208,230,0.42) calc(30.324% - 0.70px),
      rgba(42,208,230,0.42) calc(30.324% + 0.70px),
      transparent calc(30.324% + 0.70px),
      transparent calc(32.865% - 0.80px),
      rgba(62,224,138,0.48) calc(32.865% - 0.80px),
      rgba(62,224,138,0.48) calc(32.865% + 0.80px),
      transparent calc(32.865% + 0.80px),
      transparent calc(56.108% - 1.40px),
      rgba(255,210,63,0.80) calc(56.108% - 1.40px),
      rgba(255,210,63,0.80) calc(56.108% + 1.40px),
      transparent calc(56.108% + 1.40px),
      transparent calc(77.784% - 0.90px),
      rgba(255,92,77,0.52) calc(77.784% - 0.90px),
      rgba(255,92,77,0.52) calc(77.784% + 0.90px),
      transparent calc(77.784% + 0.90px),
      transparent calc(88.243% - 0.70px),
      rgba(232,80,63,0.38) calc(88.243% - 0.70px),
      rgba(232,80,63,0.38) calc(88.243% + 0.70px),
      transparent calc(88.243% + 0.70px),
      transparent calc(94.081% - 0.60px),
      rgba(200,64,47,0.28) calc(94.081% - 0.60px),
      rgba(200,64,47,0.28) calc(94.081% + 0.60px),
      transparent calc(94.081% + 0.60px)),
    radial-gradient(ellipse 42% 130% at 50% 6%, rgba(255, 103, 31, .20), transparent 68%);
  box-shadow: 0 10px 26px -18px rgba(11, 4, 48, .85);
}

/* Filete inferior: en vez de una franja naranja maciza de lado a lado, una
   línea que nace y muere en los bordes, con un pelo de luz encima. */
.cabecera::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background:
    linear-gradient(90deg, transparent, var(--acento) 16%, var(--acento) 84%, transparent);
}
.cabecera::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
}

.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-caja { position: relative; display: block; flex: 0 0 44px; line-height: 0; }
.marca-logo { width: 44px; height: 44px; display: block; position: relative; z-index: 1; }

/* Núcleo: el plasma girando detrás del símbolo. Es un degradado cónico (una
   rueda de color) muy desenfocado que da una vuelta cada 24 s — no cambia de
   forma, solo rota, así que se lee como materia arrastrándose alrededor del
   núcleo y no como un parpadeo. Va por debajo del logo (z-index -1) y no
   captura el ratón. */
.nucleo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 132px;
  height: 132px;
  margin: -66px 0 0 -66px;
  border-radius: 50%;
  pointer-events: none;
  /* z-index 0, no -1: ni .cabecera ni la caja del logo crean contexto de
     apilamiento, así que un índice negativo mandaría el núcleo por detrás del
     propio fondo de la cabecera y no se vería. Se queda en 0 y es el logo el
     que sube a 1. */
  z-index: 0;
  background: conic-gradient(from 0deg,
    rgba(255, 103, 31, 0) 0deg,
    rgba(255, 103, 31, .55) 55deg,
    rgba(255, 190, 90, .22) 130deg,
    rgba(255, 103, 31, 0) 195deg,
    rgba(255, 103, 31, .40) 275deg,
    rgba(255, 103, 31, 0) 360deg);
  filter: blur(17px);
  animation: nucleo-gira 24s linear infinite;
}
@keyframes nucleo-gira { to { transform: rotate(360deg); } }

/* Quien haya pedido menos animación en el sistema ve el núcleo quieto. */
@media (prefers-reduced-motion: reduce) {
  .nucleo { animation: none; }
}
.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) ---------- */
/* Columnas laterales. El contenido central mide 720px como máximo
   (.contenedor), así que solo aparecen cuando sobra margen de verdad a ambos
   lados; por debajo de 1300px se ocultan enteras y no estorban. */
.lateral {
  display: none;
  /* 223px: justo donde arranca el esquema del paso. A 150px las tarjetas
     se montaban sobre la barra superior (la cabecera termina en ~162px). */
  position: fixed; top: 223px; width: 210px; z-index: 5;
  flex-direction: column; gap: 12px;
  /* deja el mismo aire de antes (~70px) sobre la barra de Atrás/Siguiente */
  max-height: calc(100vh - 293px); overflow: auto;
}
.lateral-izq { left: max(16px, calc(50% - 588px)); }
.lateral-der { right: max(16px, calc(50% - 588px)); }
@media (min-width: 1300px) {
  .lateral { display: flex; }
}

.lateral-panel {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: 10px; padding: 11px 12px;
}
.lateral-titulo {
  display: block; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-suave); margin-bottom: 8px;
}

/* --- Resumen en vivo de lo que llevas decidido --- */
.resumen-lista { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.resumen-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .72rem; }
.resumen-fila dt { color: var(--texto-suave); }
.resumen-fila dd { margin: 0; font-weight: 600; text-align: right; color: var(--texto); }
.resumen-vacio { font-size: .72rem; color: var(--texto-suave); margin: 0; }

/* --- Ficha del elemento --- */
.ficha-celda {
  position: relative; border: 1.5px solid var(--acento); border-radius: 8px;
  padding: 8px 10px 6px; text-align: center; margin-bottom: 10px;
}
.ficha-z { position: absolute; top: 4px; left: 7px; font-size: .6rem; font-weight: 700; color: var(--texto-suave); }
.ficha-simbolo { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: var(--primario-texto); }
.ficha-simbolo i { font-size: .8rem; font-style: normal; vertical-align: super; color: var(--acento); }
.ficha-nombre { display: block; font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--texto-suave); }
.ficha-datos { display: flex; flex-direction: column; gap: 5px; margin: 0 0 9px; font-size: .68rem; }
.ficha-datos dt { color: var(--texto-suave); }
.ficha-datos dd { margin: 0 0 2px; font-weight: 600; }
.ficha-nota { margin: 0; font-size: .64rem; line-height: 1.45; color: var(--texto-suave); }

/* --- Producto de catálogo, debajo de cada panel --- */
.lateral-producto-card {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px;
  padding: 9px 11px; font-size: .68rem; opacity: .78;
}

.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 ---------- */
/* Con el presupuesto en pantalla el boceto deja de ir pegado arriba: si sigue
   sticky, las filas de material se meten por debajo y quedan medio tapadas. */
body.paso-presupuesto .boceto-container { position: static; }

.boceto-container {
  position: sticky; top: 0; z-index: 20;
  /* Sin fondo ni relleno propios: el plano ya es una superficie opaca, y el
     fondo de tarjeta con su borde y sus 10px de relleno dibujaba un marco
     negro alrededor que lo separaba del degradado de la página. Como va pegado
     arriba y el contenido le pasa por debajo al hacer scroll, el relleno tiene
     que ser 0: cualquier hueco transparente dejaría ver el texto moviéndose
     por detrás. El propio SVG tapa toda la caja. */
  background: transparent;
  border-bottom: none;
  padding: 0;
  margin: 0 0 10px;
}
.boceto-container svg { border-radius: 10px; display: block; }

/* Sin plano todavía, el contenedor solo lleva la frase de aviso: ahí el fondo
   de tarjeta y la línea inferior sobran, porque dibujan una franja oscura de
   lado a lado que parte el degradado de la página justo debajo de la cabecera.
   El fondo solo hace falta cuando sostiene el plano, que va pegado arriba y
   necesita tapar el contenido que pasa por debajo al hacer scroll. */
.boceto-container.boceto-vacio { margin-bottom: 4px; }

/* ---------- Alzado técnico (boceto que evoluciona) ----------
   Mismo lenguaje EXACTO que el esquema de tiradas del paso 5 (ver
   .diagrama-* más abajo): azul de plano #0b2f5c, cuadrícula tenue, trazos en
   blanco/cian y tipografía monoespaciada. Los dos dibujos tienen que leerse
   como dos láminas del mismo proyecto, así que comparten paleta y no cambian
   con el modo claro/oscuro del dispositivo — igual que un plano impreso. */
/* El fondo de los planos es el MISMO degradado azul lila de la cabecera
   (#1b0f6b -> #150b56 -> #0b0430), no un azul suelto: así el dibujo y la barra
   superior son el mismo color y la página no se parte en dos ambientes. */
.plano-fondo { fill: url(#planoDegradado); }
.plano-marco { fill: none; stroke: #cfe3ff; stroke-width: 1.7; opacity: .8; }
.plano-grid-menor { fill: none; stroke: #ffffff; stroke-width: .5; opacity: .06; }
.plano-grid-mayor { fill: none; stroke: #ffffff; stroke-width: .7; opacity: .12; }

.plano-terreno { stroke: #7ec8ff; stroke-width: 1.6; }
.plano-achurado { stroke: #7ec8ff; stroke-width: .5; opacity: .6; fill: none; }
.plano-muro { fill: none; stroke: #eaf2ff; stroke-width: 1.6; }
.plano-muro-rayado { stroke: #eaf2ff; stroke-width: .35; opacity: .3; fill: none; }
.plano-cubierta { fill: none; stroke: #eaf2ff; stroke-width: 1.8; }
.plano-cubierta-linea { stroke: #eaf2ff; stroke-width: .8; opacity: .45; }
.plano-estructura { stroke: #eaf2ff; stroke-width: 1.8; fill: none; }
.plano-estructura-poste { stroke: #eaf2ff; stroke-width: 1.2; fill: none; }
.plano-acometida { stroke: #9fc2ef; stroke-width: .9; stroke-dasharray: 5 3; }

/* Relleno translúcido, el mismo que .diagrama-panel: sobre un fondo en
   degradado un relleno de color fijo dejaría de coincidir según la altura a la
   que caiga el panel, y se vería el recorte. */
.plano-panel { fill: rgba(255, 255, 255, .06); }
.plano-panel-borde { fill: none; stroke: #eaf2ff; stroke-width: 1.1; }

.plano-equipo { fill: rgba(255,255,255,.06); stroke: #eaf2ff; stroke-width: 1.3; }
.plano-equipo-cod { fill: #eaf2ff; font: 700 9px 'Courier New', monospace; text-anchor: middle; letter-spacing: .04em; }
.plano-guia { fill: none; stroke: #9fc2ef; stroke-width: .6; }
.plano-guia-punto { fill: #9fc2ef; }
.plano-etiqueta-guia { fill: #dfeaff; font: 10.5px 'Courier New', monospace; text-anchor: end; }
.plano-etiqueta { fill: #dfeaff; font: 10.5px 'Courier New', monospace; }

.plano-cota { stroke: #7ec8ff; stroke-width: 1; fill: none; }
.plano-flecha { fill: none; stroke: #7ec8ff; stroke-width: 1; }
.plano-cota-texto { fill: #b6e2ff; font: 10.5px 'Courier New', monospace; text-anchor: middle; }

.plano-escala-llena { fill: #7ec8ff; stroke: #7ec8ff; stroke-width: .6; }
.plano-escala-vacia { fill: none; stroke: #7ec8ff; stroke-width: .6; }
.plano-nota { fill: #cfe3ff; font: 9px 'Courier New', monospace; letter-spacing: .06em; }
.plano-nota-mini { fill: #cfe3ff; font: 8.5px 'Courier New', monospace; }

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

.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: url(#diagramaDegradado); }
.diagrama-marco { fill: none; stroke: #cfe3ff; stroke-width: 1.7; 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: 7px 'Courier New', monospace; fill: #cfe3ff; 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: #cfe3ff; }

.diagrama-cota-linea { stroke: #7ec8ff; stroke-width: 1; }
.diagrama-flecha { fill: #7ec8ff; }
.diagrama-cota-texto { font: 9px 'Courier New', monospace; fill: #b6e2ff; 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: #cfe3ff; letter-spacing: .02em; }

/* El presupuesto es la única pantalla con tablas densas de datos y va directo
   sobre el fondo de la página: las líneas del espectro cruzaban por detrás de
   referencias e importes y lo ensuciaban. Se le da superficie opaca propia,
   igual que a las tarjetas del asistente. */
.presupuesto-principal {
  background: var(--tarjeta);
  /* Red de seguridad: si alguna tabla no cupiera (un nombre de producto muy
     largo, un importe de cinco cifras), se desplaza DENTRO de la tarjeta en
     vez de salirse por el borde derecho, que es lo que hacía que los
     subtotales aparecieran fuera de la burbuja. */
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 14px 16px 18px;
}

.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); }

/* En pantalla estrecha la tabla no cabe: seis columnas necesitan ~550px y un
   móvil tiene 375, así que se salía por la derecha y la columna del botón
   "Cambiar" quedaba fuera, con scroll horizontal para llegar. Aquí cada línea
   de material pasa a ser una ficha apilada, con el nombre de la columna
   delante de cada dato. */
@media (max-width: 620px) {
  .presupuesto-tabla, .presupuesto-tabla tr, .presupuesto-tabla td { display: block; width: 100%; }
  .presupuesto-tabla .fila-cabecera { display: none; }
  .presupuesto-tabla tr {
    border: 1px solid var(--borde); border-radius: 10px;
    padding: 8px 10px; margin-bottom: 10px;
  }
  .presupuesto-tabla td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 3px 0; border-bottom: none; text-align: right;
  }
  .presupuesto-tabla td::before {
    content: attr(data-etiqueta);
    flex: 0 0 auto;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .03em;
    color: var(--texto-suave);
  }
  /* El nombre del producto manda: ocupa toda la línea y sin etiqueta delante. */
  .presupuesto-tabla td.celda-producto {
    display: block; text-align: left; font-weight: 600; margin-bottom: 4px;
  }
  .presupuesto-tabla td.celda-producto::before { content: none; }
  .presupuesto-tabla td:last-child { justify-content: flex-end; padding-top: 6px; }
  .presupuesto-tabla td:last-child::before { content: none; }
  .presupuesto-tabla .fila-subtotal {
    border: none; padding: 0; display: flex; justify-content: space-between;
    font-weight: 700; margin-bottom: 16px;
  }
  .presupuesto-tabla .fila-subtotal td { width: auto; display: block; border-top: none; }
  .presupuesto-tabla .fila-subtotal td::before { content: none; }
  .input-cantidad-fila { max-width: 70px; }
}

.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;
}

/* Las herramientas del presupuesto NUNCA van al lado de la tabla. Cuando iban
   en una columna a su derecha, la tabla de material no cabía en lo que le
   quedaba, se desbordaba y sus filas pasaban por debajo de las tarjetas
   tapando precios y los botones "Cambiar". Solo hay dos sitios válidos: el
   margen libre de la derecha si la ventana da para ello, o debajo del
   presupuesto si no. */
.presupuesto-layout { display: block; }
.presupuesto-principal { min-width: 0; }
.presupuesto-lateral { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }

/* Ventana intermedia: no hay margen libre, pero sí ancho de sobra para poner
   las tres tarjetas en fila debajo en vez de una encima de otra. */
@media (min-width: 620px) and (max-width: 1299px) {
  .presupuesto-lateral { flex-direction: row; align-items: flex-start; }
  .presupuesto-lateral > * { flex: 1 1 0; min-width: 0; }
}
.tarjeta-lateral { margin-top: 0; }

/* Con sitio de sobra a los lados, las herramientas del presupuesto (guardar,
   copiar referencias, valoración) se van al margen derecho en vez de robarle
   ancho a la tabla: apretaban la columna de material hasta el punto de que las
   filas se metían por debajo de estas tarjetas y tapaban los botones
   "Cambiar". Así la tabla se queda con los 720px enteros del contenedor.
   Por debajo de 1300px no hay margen libre, así que vuelven a su sitio de
   siempre, debajo del presupuesto. */
@media (min-width: 1300px) {
  /* La animación de entrada del paso usa translateY, y un elemento con
     transform pasa a ser el bloque contenedor de sus hijos position:fixed: las
     herramientas se anclaban a la sección en vez de a la ventana y se quedaban
     encima de la tabla. En el presupuesto se prescinde de esa animación. */
  body.paso-presupuesto .paso.activo { animation: none; }
  body.paso-presupuesto .presupuesto-lateral {
    position: fixed;
    margin-top: 0;
    /* mismo arranque que .lateral: a la altura del esquema, no sobre la cabecera */
    top: 223px;
    right: max(16px, calc(50% - 588px));
    width: 210px;
    min-width: 0;
    max-height: calc(100vh - 293px);
    overflow: auto;
    z-index: 5;
  }
  /* En el margen derecho solo cabe una cosa: con el presupuesto en pantalla
     mandan las herramientas, no la ficha del elemento. */
  body.paso-presupuesto .lateral-der { display: none; }
}
.encuesta-botones { display: flex; gap: 10px; }
.btn-encuesta {
  flex: 1; padding: 10px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--borde); background: var(--tarjeta); cursor: pointer;
  color: var(--texto-suave);
  transition: transform .1s ease, border-color .15s ease, color .15s ease;
}
/* Manos robóticas propias en vez del emoji del sistema: el emoji se pintaba
   amarillo y con el estilo de cada sistema operativo, distinto en iPhone,
   Android y Mac. Al ser imagen no se puede recolorear, así que el estado se
   marca con opacidad y con el borde del botón. */
.icono-voto {
  width: 58px; height: 58px; display: block;
  opacity: .78;
  transition: opacity .15s ease, transform .1s ease;
}
.btn-encuesta:hover .icono-voto { opacity: 1; }
.btn-encuesta.votado .icono-voto { opacity: 1; transform: scale(1.06); }
.btn-encuesta:hover { transform: translateY(-1px); border-color: var(--acento); color: var(--acento); }
.btn-encuesta.votado { 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; }