/* ============================================================
   Calculadora de desempeño de ventanas Deceuninck
   ------------------------------------------------------------
   PALETA CORPORATIVA — Lineamientos corporativos Deceuninck
   LATAM, revisión 10 de febrero de 2020, capítulo 2 «Colores».

     Azul        PANTONE 286   RAL 5002   #005CA9   (primario)
     Blanco                    RAL 9003   #FFFFFF
     Gris oscuro Cool Gray 10  RAL 7012   #6F6F6F
     Gris claro  Cool Gray 1   RAL 7047   #EDEDED
     Verde       PANTONE 2242  RAL 6033   #43A27F   (secundario)

   Los tonos derivados (--dece-osc, --dece-cla…) son sombras y
   tintas del azul corporativo para estados de interfaz; el color
   de marca que se imprime y se ve en bloques llenos es siempre
   #005CA9 exacto.

   TIPOGRAFÍA — capítulo 4: Open Sans es la familia principal y
   Roboto la sustituta. Las dos van incrustadas en `css/fuentes.css`
   (base64, no CDN) para que el aplicativo se vea igual con doble
   clic y sin internet, sin depender de lo que tenga instalado el
   equipo. El reparto que marca la imagen de marca es:

     Títulos, guías y sublíneas ...... Roboto Light  (--fuente-tit)
     Subtítulos ...................... Roboto Light  (--fuente-tit)
     Copy, listas y viñetas .......... Open Sans     (--fuente)
     Citas ........................... Open Sans Light itálica
   ============================================================ */

:root{
  /* --- Colores corporativos exactos --- */
  --dece:#005CA9;
  --gris-osc:#6F6F6F;
  --gris-cla:#EDEDED;
  --verde:#43A27F;
  --blanco:#fff;

  /* --- Derivados de interfaz --- */
  --dece-osc:#004480;
  --dece-cla:#E6EFF7;
  --dece-cla2:#F3F7FB;
  --cian:#4D8FC4;
  --ahorro:#43A27F;
  --ahorro-cla:#E7F3EE;
  --calor:#E8683C;
  --calor-cla:#FDEDE7;
  --aviso:#C77700;
  --aviso-cla:#FFF6E5;
  --texto:#1D2A38;
  --suave:#6F6F6F;
  --linea:#DCE1E7;
  --fondo:#F7F8FA;
  --r:12px;
  --sombra:0 1px 2px rgba(29,42,56,.06), 0 6px 20px rgba(29,42,56,.07);
  --fuente:"Open Sans",Roboto,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --fuente-tit:Roboto,"Open Sans","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
/* El atributo hidden debe ganarle a cualquier display de clase
   (.navbar es flex, .grid2 es grid: sin esto se seguirían viendo). */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--fuente);color:var(--texto);background:var(--fondo);
  font-size:15px;line-height:1.55;padding-bottom:96px;
}
body.sin-perfil{padding-bottom:24px}
/* Títulos y subtítulos en Roboto; el copy, las listas y los formularios
   se quedan en Open Sans, que es lo que reparte la imagen de marca. */
h1,h2,h3,h4{font-family:var(--fuente-tit);line-height:1.25;margin:0 0 .5em}
p{margin:0 0 .8em}
a{color:var(--dece)}
img{max-width:100%}
/* Guías: los rótulos cortos en versalitas que acompañan a un título. */
.eyebrow,.pc-sub,.rc-eyebrow,.rep-tag,.hdr-tit,.etd-lbl,.hi-ano,.grupo-ruido h4{
  font-family:var(--fuente-tit);
}
/* Citas: Open Sans Light itálica. */
blockquote,.cita{font-family:var(--fuente);font-weight:300;font-style:italic}

/* ---------------- Cabecera ----------------
   Bloque de marca de la propuesta de diseño: logotipo, filete azul,
   el nombre del aplicativo en versalitas y, a la derecha, los dos
   sellos de origen y el acceso de administración. */
header.app{
  background:var(--blanco);border-bottom:3px solid var(--dece);
  padding:9px 30px;display:flex;align-items:center;gap:16px;
  position:sticky;top:0;z-index:40;box-shadow:0 1px 12px rgba(29,42,56,.05);
}
/* El SVG oficial lleva su propia zona de amortiguación (1/4 del ancho
   del logo por cada lado, cap. 1), así que la caja se ve más alta que
   la letra: por eso la altura de imagen es mayor que la óptica. */
header.app .logo{height:54px;width:auto;display:block;margin:-11px 0;flex:none}
header.app .hdr-barra{
  width:1.5px;height:20px;background:var(--dece);flex:none;opacity:.75;
}
header.app .hdr-tit{
  font-size:15px;font-weight:500;margin:0;color:var(--dece);
  text-transform:uppercase;letter-spacing:.055em;line-height:1.2;
}
header.app .hdr-der{display:flex;align-items:center;gap:12px;margin-left:auto}
header.app .sello{height:40px;width:40px;display:block;flex:none}

/* ---------------- Progreso ---------------- */
/* El desplazamiento superior tiene que ser exactamente el alto de la
   cabecera pegajosa; si sobra, se ve el contenido colándose por el hueco. */
.progreso{background:var(--blanco);border-bottom:1px solid var(--linea);position:sticky;top:61px;z-index:35}
.progreso .barra{height:4px;background:var(--dece-cla)}
.progreso .barra i{display:block;height:100%;background:var(--dece);transition:width .3s ease}
.pasos{display:flex;gap:6px;overflow-x:auto;padding:9px 26px;scrollbar-width:thin}
.paso-nav{
  border:0;background:transparent;color:var(--suave);font:inherit;font-size:13px;
  padding:6px 13px;border-radius:20px;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:8px;
}
.paso-nav .pn-n{
  width:21px;height:21px;border-radius:50%;background:var(--linea);color:var(--suave);
  display:grid;place-items:center;font-size:11.5px;font-weight:700;flex:none;
}
.paso-nav.act{background:var(--dece-cla);color:var(--dece-osc);font-weight:650}
.paso-nav.act .pn-n{background:var(--dece);color:#fff}
.paso-nav.hecho{color:var(--ahorro)}
.paso-nav.hecho .pn-n{background:var(--ahorro);color:#fff}
.paso-nav:disabled{opacity:.45;cursor:default}

/* ---------------- Contenido ---------------- */
main{max-width:1180px;margin:0 auto;padding:26px 24px}
.paso{background:var(--blanco);border-radius:14px;box-shadow:var(--sombra);padding:30px 34px;margin-bottom:20px}
.paso>h2{
  font-size:26px;font-weight:300;color:var(--dece);
  display:flex;align-items:center;gap:12px;margin-bottom:.35em;
}
/* El ícono del título va a la altura óptica de la mayúscula, no de la
   caja de texto: por eso lleva su propio tamaño y no hereda el 1 em. */
.paso>h2 svg{width:29px;height:29px;flex:none}
.paso .sub{color:var(--texto);font-size:14.5px;max-width:78ch}
.sec-h{
  margin-top:28px;padding-top:20px;border-top:1px solid var(--linea);
  font-size:19px;font-weight:400;color:var(--dece);
}
.sub-h{margin-top:20px;font-size:16px;font-weight:400;color:var(--dece)}

/* ---------------- Portada ----------------
   La tarjeta de portada abre con la fotografía de la ventana a sangre:
   el texto va sobre la pared, que en la foto es gris liso, y un velo
   del mismo gris lo sostiene para que se lea a cualquier ancho. */
.paso.intro{padding:0;overflow:hidden}
.hero-banner{
  position:relative;min-height:300px;display:flex;align-items:center;
  background-color:#D3D4D8;
  background-image:url("../img/hero-ventana.jpg");
  background-repeat:no-repeat;background-position:right center;background-size:cover;
}
.hero-banner::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#D3D4D8 0%,rgba(211,212,216,.96) 34%,rgba(211,212,216,0) 66%);
}
.hb-txt{position:relative;padding:34px 44px;max-width:100%}
.hb-corona{display:block;color:var(--dece);margin-bottom:22px}
.hb-corona svg{width:30px;height:30px;display:block}
.hb-tit{font-size:34px;line-height:1.15;font-weight:300;color:var(--dece);margin:0 0 16px}
/* El titular va en una sola línea mientras quepa; el texto de apoyo se
   corta antes para no meterse debajo de la ventana de la fotografía. */
.hb-lead{font-size:15px;color:var(--texto);margin:0;max-width:min(52ch,100%)}
.intro-cuerpo{padding:30px 34px 34px}

/* Antetítulo centrado de la portada */
.eyebrow{
  text-align:center;font-size:15px;font-weight:400;color:var(--cian);
  text-transform:uppercase;letter-spacing:.18em;margin:8px 0 10px;
}
.eyebrow-sub{text-align:center;font-size:15.5px;color:var(--texto);margin:0 0 28px}

.perfiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.perfil-card{
  text-align:left;background:var(--blanco);border:1.5px solid var(--linea);border-radius:var(--r);
  padding:24px;cursor:pointer;font:inherit;color:inherit;display:flex;flex-direction:column;gap:7px;
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.perfil-card:hover{border-color:var(--dece);transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,92,169,.13)}
.perfil-card.sel{border-color:var(--dece);background:var(--dece-cla2)}
.pc-ico{display:block;line-height:0;color:var(--dece);margin-bottom:9px}
.pc-ico svg{width:38px;height:38px;display:block}
.pc-sub{font-size:11.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--cian)}
.perfil-card h3{font-size:20px;margin:0;color:var(--dece-osc);font-weight:400}
.perfil-card p{font-size:14px;color:var(--texto);margin:0}
.pc-nivel{font-size:13px;color:var(--suave);background:var(--fondo);border-radius:10px;padding:11px 13px;margin-top:6px}
.pc-cta{margin-top:auto;padding-top:14px;font-size:15px;color:var(--dece)}
.intro-notas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:26px}
.nota-card{background:var(--fondo);border-radius:10px;padding:18px 20px}
.nota-card h4{font-size:14px;margin:0 0 8px;color:var(--dece);font-weight:400}
.nota-card p{font-size:13.5px;color:var(--suave);margin:0}

/* ---------------- Formularios ---------------- */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:14px 0}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin:14px 0}
.campo{display:flex;flex-direction:column;gap:5px}
.campo .lbl{font-size:13px;font-weight:600}
.campo .lbl em{font-weight:400;color:var(--suave);font-style:normal}
.campo input,.campo select{
  font:inherit;font-size:14.5px;padding:9px 11px;border:1.5px solid var(--linea);border-radius:9px;
  background:var(--blanco);color:var(--texto);width:100%;
}
.campo input:focus,.campo select:focus{outline:0;border-color:var(--dece);box-shadow:0 0 0 3px rgba(0,92,169,.13)}
.campo .ayuda{font-size:11.5px;color:var(--suave);line-height:1.4}
.campo.check{flex-direction:row;align-items:flex-start;gap:9px;flex-wrap:wrap}
.campo.check input{width:auto;margin-top:3px}
.campo.check .ayuda{flex-basis:100%}

.opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:14px 0 18px}
.opcion{
  text-align:left;background:var(--blanco);border:1.5px solid var(--linea);border-radius:10px;
  padding:15px 17px;cursor:pointer;font:inherit;color:inherit;display:flex;flex-direction:column;gap:3px;
  transition:border-color .15s,background .15s;
}
.opcion:hover{border-color:var(--dece)}
.opcion.sel{border-color:var(--dece);background:var(--dece-cla);box-shadow:inset 0 0 0 1px var(--dece)}
/* La caja del ícono conserva altura de línea porque unas pocas opciones
   sin equivalente en la propuesta de diseño (los usos de edificación)
   siguen usando un emoji: con line-height 0 se recortaría. */
.opcion .ico{display:block;line-height:1;font-size:24px;color:var(--dece);margin-bottom:9px}
.opcion .ico svg{width:27px;height:27px;display:block}
.opcion strong{font-size:14.5px;font-weight:600;color:var(--dece)}
.opcion.sel strong{color:var(--dece-osc)}
.opcion small{font-size:12px;color:var(--suave);line-height:1.4}
.opcion .db{font-size:13px;font-weight:400;color:var(--dece);margin:1px 0 3px}
.opcion.ent{min-height:126px}

/* Tarjetas que solo ILUSTRAN: la apertura ya no se elige en bloque, se
   declara ventana por ventana en el cuadro. La animación se queda porque
   es lo que explica de qué se está hablando, pero no se puede pulsar. */
.opciones.muestra .opcion{cursor:default}
.opciones.muestra .opcion:hover{border-color:var(--linea)}

/* Tarjeta de opción con video demostrativo en bucle (tipos de apertura) */
.opcion.vid-card{padding:0;gap:0;overflow:hidden}
.op-vid{
  display:block;width:100%;aspect-ratio:16/9;background:var(--dece-cla2);
  border-bottom:1px solid var(--linea);
}
.op-vid video{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.op-txt{display:flex;flex-direction:column;gap:3px;padding:13px 15px}
.grupo-ruido{margin-bottom:6px}
.grupo-ruido h4{
  font-size:12.5px;font-weight:400;text-transform:uppercase;letter-spacing:.1em;
  color:var(--cian);margin:16px 0 0;
}

/* ---------------- Chips de selección múltiple ---------------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0}
.chip{
  font:inherit;font-size:13.5px;font-weight:600;padding:9px 18px;border-radius:22px;cursor:pointer;
  border:1.5px solid var(--linea);background:var(--blanco);color:var(--suave);transition:all .15s;
}
.chip:hover{border-color:var(--dece);color:var(--dece)}
.chip.sel{background:var(--dece);border-color:var(--dece);color:#fff}
.chip.sel::before{content:"✓ "}

/* ---------------- Editor de capas de la envolvente ---------------- */
.capas{background:var(--dece-cla2);border:1px solid var(--linea);border-radius:var(--r);padding:14px 16px;margin:12px 0 20px}
.capas .acciones-linea{margin:10px 0 0}
.tabla-capas{width:100%;border-collapse:collapse;font-size:13px;min-width:660px}
.tabla-capas th{
  background:transparent;color:var(--suave);font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;padding:4px 6px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--linea);
}
.tabla-capas td{padding:4px 6px;border-bottom:1px solid rgba(220,228,238,.7);vertical-align:middle}
.tabla-capas td.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--suave)}
.tabla-capas select,.tabla-capas input{
  font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--linea);border-radius:6px;width:100%;background:var(--blanco);
}
.tabla-capas input[type=number]{max-width:96px}
.tabla-capas input:disabled{background:var(--fondo);color:var(--suave)}
.tabla-capas td:nth-child(2){min-width:230px}
.resultado-capas{font-size:13px;color:var(--texto);line-height:1.5}
.resultado-capas strong{color:var(--dece-osc)}

.vidrio-edit{background:var(--fondo);border-radius:10px;padding:12px 14px}

/* ---------------- Botones ----------------
   Esquina recta en todos los botones de acción (descargar y borrar el
   clima, atrás y siguiente, ver el informe completo, ver las opciones
   de descarga…). El único redondeo que queda es el de los chips y el
   del botón circular de reproducción, que son controles, no acciones. */
.btn{
  font:inherit;font-size:14.5px;font-weight:650;padding:11px 20px;border-radius:0;border:0;
  background:var(--dece);color:#fff;cursor:pointer;transition:background .15s,transform .12s;
}
.btn:hover{background:var(--dece-osc)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:default}
.btn.sec{background:var(--blanco);color:var(--dece);box-shadow:inset 0 0 0 1.5px var(--linea)}
.btn.sec:hover{box-shadow:inset 0 0 0 1.5px var(--dece);background:var(--dece-cla2)}
.acciones-linea{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:16px 0}
.btn-x{border:0;background:transparent;color:var(--calor);font-size:15px;cursor:pointer;padding:4px 7px;border-radius:0}
.btn-x:hover{background:var(--calor-cla)}

.navbar{
  position:fixed;left:0;right:0;bottom:0;background:var(--blanco);border-top:1px solid var(--linea);
  padding:12px 24px;display:flex;gap:14px;align-items:center;justify-content:center;z-index:40;
  box-shadow:0 -2px 16px rgba(29,42,56,.07);
}
.navbar .estado{font-size:12.5px;color:var(--suave);min-width:150px;text-align:center}
.navbar .estado.err{color:var(--calor);font-weight:600}

/* ---------------- Estado del clima ---------------- */
.estado-clima{font-size:13px;color:var(--suave)}
.estado-clima.ok{color:var(--ahorro);font-weight:600}
.estado-clima.err{color:var(--calor);font-weight:600}
.estado-clima.cargando::before{
  content:"";display:inline-block;width:12px;height:12px;margin-right:7px;vertical-align:-1px;
  border:2px solid var(--dece-cla);border-top-color:var(--dece);border-radius:50%;animation:giro .7s linear infinite;
}
@keyframes giro{to{transform:rotate(360deg)}}

.tarjeta-clima{background:var(--dece-cla2);border:1px solid var(--linea);border-radius:var(--r);padding:20px;margin-top:8px}
.tarjeta-clima h3{color:var(--dece-osc);font-size:19px;margin:0}
.tarjeta-clima .clasif{font-size:13px;color:var(--suave);margin:2px 0 14px}
.tarjeta-clima .datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.tarjeta-clima .dato{background:var(--blanco);border-radius:8px;padding:9px 12px}
.tarjeta-clima .dato span{display:block;font-size:11.5px;color:var(--suave)}
.tarjeta-clima .dato strong{font-size:16px;color:var(--dece-osc)}
.tarjeta-clima .necesidad{margin:14px 0 4px;font-size:14px}
.tarjeta-clima .fuente{font-size:11.5px;color:var(--suave);margin:0}

/* ---------------- Tablas ---------------- */
.tabla-wrap{overflow-x:auto;margin:14px 0;-webkit-overflow-scrolling:touch}
.tabla{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
.tabla th,.tabla td{padding:9px 11px;text-align:left;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla thead th{background:var(--dece-cla2);color:var(--dece-osc);font-size:12px;font-weight:700;white-space:nowrap}
.tabla thead th small{font-weight:400;color:var(--suave)}
.tabla thead th.dece{background:var(--dece);color:#fff}
.tabla td.num,.tabla th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla tr.dece td{background:rgba(0,92,169,.05)}
.tabla td.dece{background:rgba(0,92,169,.07);font-weight:650}
.tabla tr.destacada td{background:var(--dece-cla);font-weight:650}
.tabla tr.destacada td.dece{background:rgba(0,92,169,.16)}
.tabla.mini{min-width:0;font-size:12.5px}
/* Desglose Uw por ventana: el encabezado lleva el nombre completo del
   sistema («Uw Ventana corredera de aluminio con vidrio sencillo») y
   con `nowrap` esa sola columna se comía la hoja. Se le deja partir el
   renglón y el resto de columnas recupera su sitio. */
.tabla-uw{min-width:720px}
.tabla-uw thead th{white-space:normal;vertical-align:bottom}
.tabla-uw thead th:nth-child(n+9){min-width:120px;max-width:190px}
.tabla-uw td small{display:block;font-weight:400;color:var(--suave);white-space:normal;font-size:11px}
.tabla.mini td,.tabla.mini th{padding:6px 8px}
.tabla-titulo{font-size:14px;color:var(--dece-osc);margin:6px 0}
.pie-tabla{font-size:12px;color:var(--suave);margin-top:-4px}
.fuente-td{font-size:12px;color:var(--suave);line-height:1.4}

.tabla-vanos{width:100%;border-collapse:collapse;font-size:13px;min-width:900px}
.tabla-vanos th{background:var(--dece-cla2);color:var(--dece-osc);font-size:11.5px;padding:8px 6px;text-align:left;white-space:nowrap}
.tabla-vanos td{padding:4px 5px;border-bottom:1px solid var(--linea)}
.tabla-vanos input,.tabla-vanos select{
  font:inherit;font-size:13px;padding:6px 7px;border:1px solid var(--linea);border-radius:6px;width:100%;background:var(--blanco);
}
.tabla-vanos input[type=number]{max-width:88px}
.tabla-vanos td:first-child input{min-width:120px}
.resumen-vanos{font-size:13px;color:var(--suave)}
.warn-inline{color:var(--aviso);font-style:normal}

/* ---------------- Fichas de sistema ---------------- */
.fichas-sistemas{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin:14px 0}
.ficha-sistema{
  border:2px solid var(--linea);border-radius:var(--r);padding:16px;display:block;cursor:pointer;
  background:var(--blanco);transition:border-color .16s;position:relative;
}
.ficha-sistema:hover{border-color:var(--dece)}
.ficha-sistema.sel{border-color:var(--dece);background:var(--dece-cla2)}
.ficha-sistema>input{position:absolute;top:14px;right:14px;width:19px;height:19px;accent-color:var(--dece)}
/* Las fotos de producto son verticales (≈ 3:4) y el recorte de un marco
   16:9 se comía la ventana entera. El contenedor deja sitio a una foto
   vertical y la imagen se ajusta COMPLETA dentro de él: nunca se recorta,
   solo sobra fondo a los lados. */
.fs-img{
  border-radius:9px;overflow:hidden;background:var(--blanco);border:1px solid var(--linea);
  margin-bottom:12px;aspect-ratio:4/3;padding:8px;
}
/* `contain` en lugar de `cover`: la caja la llena el elemento <img>, pero la
   foto se escala DENTRO de ella hasta caber entera. Lo que sobra es fondo,
   nunca ventana recortada. */
.fs-img img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.fs-img.sinimg{
  background:var(--fondo);display:grid;place-items:center;min-height:120px;
}
.fs-img.sinimg::after{content:"Coloca la imagen del sistema en la carpeta img/";font-size:11.5px;color:var(--suave);text-align:center;padding:0 20px}
.ficha-sistema h4{font-size:17px;color:var(--dece-osc);margin:0}
.fs-tipo{font-size:12px;color:var(--dece);font-weight:600;margin:0 0 6px}
.ficha-sistema p{font-size:13px;color:var(--suave)}
.fs-datos{list-style:none;padding:0;margin:10px 0 0;font-size:12.5px}
.fs-datos li{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:5px 0;border-top:1px solid var(--linea)}
.fs-datos li span{color:var(--suave);flex:1 1 130px}
.fs-datos li strong{color:var(--texto)}
/* Vidrios asociados a cada sistema: la lista corta con Ug, acústica y precio */
.fs-vidrios{list-style:none;padding:10px 12px;margin:12px 0 0;font-size:12px;
  background:var(--fondo);border-radius:9px;color:var(--suave)}
.fs-vidrios li{padding:3px 0}
.fs-vidrios li strong{color:var(--dece-osc)}
.tag-vis{
  font-size:10px;font-weight:700;letter-spacing:.06em;vertical-align:middle;
  background:var(--gris-cla);color:var(--gris-osc);padding:2px 7px;border-radius:20px;
}
.ref-card{border-left:4px solid var(--gris-osc)}

/* ---------------- Etiqueta energética ---------------- */
/* El color de texto lo pone cada peldaño de la escala: sobre el verde
   lima y el amarillo, el blanco no se lee. */
.etiqueta-mini{
  display:inline-block;min-width:26px;padding:3px 9px;border-radius:6px;
  font-weight:800;font-size:13.5px;text-align:center;line-height:1.2;
}
/* Sin clima descargado todavía no hay letra: se muestra el hueco en
   gris en vez de calificar con una escala que aún no existe. */
.etiqueta-mini.sin-dato{background:var(--linea);color:var(--suave);font-weight:600}
.et-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin:16px 0}
.et-card{background:var(--fondo);border-radius:var(--r);padding:16px 18px;border:1.5px solid var(--linea)}
.et-card.dece{border-color:var(--dece);background:var(--dece-cla2)}
.et-card h4{margin:0;font-size:15px;color:var(--dece-osc)}
.et-vidrio{font-size:12px;color:var(--suave);margin:2px 0 0}
.et-card .chart{margin:10px 0 4px}
/* La letra, grande y en su color, antes de la escalera: es lo primero
   que se busca y no debería haber que descifrar una gráfica para verla. */
.et-cab{display:flex;align-items:center;gap:14px;margin-bottom:4px}
.et-letra{
  width:52px;height:52px;flex:none;border-radius:10px;display:grid;place-items:center;
  font-size:30px;font-weight:800;line-height:1;box-shadow:0 2px 6px rgba(29,42,56,.18);
}

/* ---------------- Hitos del retorno ---------------- */
.hitos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:16px 0}
.hito{
  background:var(--fondo);border-radius:10px;padding:12px 14px;
  border-top:3px solid var(--gris-cla);display:flex;flex-direction:column;gap:2px;
}
.hito.ok{border-top-color:var(--ahorro);background:var(--ahorro-cla)}
.hito.rojo{border-top-color:var(--calor);background:var(--calor-cla)}
.hi-ano{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}
.hito strong{font-size:18px;color:var(--texto);line-height:1.2}
.hito small{font-size:11.5px;color:var(--suave);line-height:1.35}

/* ---------------- Pregunta de cotización ----------------
   Sin filete lateral ni marco: el bloque se distingue por el velo azul
   claro del fondo y por el filete corto del título, y nada más. */
.bloque.cotizacion{background:var(--dece-cla2);padding:20px 22px}

/* ---------------- Insignias y avisos ---------------- */
.badge{
  font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:.02em;white-space:nowrap;
  background:var(--linea);color:var(--suave);
}
.badge.ok{background:var(--ahorro-cla);color:#2E7D5F}
.badge.norma{background:var(--dece-cla);color:var(--dece-osc)}
.badge.ref{background:#EEF1F5;color:var(--suave)}
.badge.warn{background:var(--aviso-cla);color:#8a5400}
.badge.user{background:#F0E9FB;color:#5b3a9e}

.aviso{border-radius:9px;padding:12px 15px;font-size:13.5px;margin:12px 0;border-left:4px solid}
.aviso.info{background:var(--dece-cla2);border-color:var(--dece);color:var(--dece-osc)}
.aviso.warn{background:var(--aviso-cla);border-color:var(--aviso);color:#7a4a00}
.aviso.error{background:var(--calor-cla);border-color:var(--calor);color:#93340f}

.nota{margin:10px 0;font-size:13px}
.nota summary{cursor:pointer;color:var(--dece);font-weight:600}
.nota p{color:var(--suave);margin:6px 0 0}
.nota-inline{font-size:12.5px;color:var(--suave);line-height:1.5}
.formula{
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:12.5px;
  background:var(--fondo);border-radius:7px;padding:8px 11px;color:var(--dece-osc);display:inline-block;
}

/* ---------------- Reporte ---------------- */
/* La hoja impresa (Report.hojaImpresa): en papel es una tabla, porque es
   lo único que repite el encabezado y el pie en todas las páginas. En
   pantalla no debe existir como tabla, así que se desarma y el
   encabezado y el pie quedan ocultos. */
.hoja,.hoja>tbody,.hoja>tbody>tr,.hoja>tbody>tr>td{display:block;width:auto;padding:0;border:0}
.hoja>thead,.hoja>tfoot{display:none}
.reporte{max-width:100%}
.rep-head{border-bottom:3px solid var(--dece);padding-bottom:18px;margin-bottom:24px}
.rep-marca{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.rep-logo{height:46px;margin:-9px 0;flex:none}
.rep-logo-txt{font-weight:800;font-size:26px;color:var(--dece);letter-spacing:-.02em}
.rep-barra{width:1.5px;height:18px;background:var(--dece);flex:none;opacity:.75}
.rep-tag{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--suave)}
/* El símbolo de marca cierra la cabecera por la derecha, como en la
   propuesta de diseño. */
.rep-corona{line-height:0;margin-left:auto;color:var(--dece);flex:none}
.rep-corona svg{width:26px;height:26px;display:block}
@media(max-width:640px){.rep-tag{font-size:11px;letter-spacing:.1em}}
.rep-titulo h2{
  font-size:27px;font-weight:300;color:var(--dece);margin:0;
  display:flex;align-items:center;gap:12px;
}
.rep-titulo h2 svg{width:30px;height:30px;flex:none}
.rep-titulo p{font-size:14px;color:var(--suave);margin:5px 0 0}
.rep-fecha{font-size:12px !important}
/* Las tres acciones de la cabecera del informe pesan lo mismo, así que
   van iguales: fondo blanco, un filete azul claro, la palabra en azul y
   la esquina recta. El botón lleno de esta pantalla es el de descargar,
   que está más abajo. */
.rep-acciones{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px}
.rep-acciones .btn{
  flex:1 1 190px;max-width:260px;text-align:center;
  background:var(--blanco);color:var(--dece);font-weight:400;font-size:15px;
  border:1px solid #A5C8E4;border-radius:0;box-shadow:none;padding:13px 18px;
}
.rep-acciones .btn:hover{background:var(--dece-cla2);border-color:var(--dece);color:var(--dece-osc);box-shadow:none}

.bloque{margin:0 0 30px;padding-top:6px}
.bloque>h3{font-size:19px;color:var(--dece-osc);border-left:4px solid var(--dece);padding-left:12px}
.intro-bloque{font-size:14px;color:var(--suave);max-width:80ch}
.mini-card{background:var(--fondo);border-radius:10px;padding:16px 18px}
.mini-card h4{font-size:14px;color:var(--dece-osc);margin:0 0 8px}
.mini-card p{font-size:13px;color:var(--suave)}
/* El recuadro de la medida exacta va dentro del flujo del paso, así
   que necesita un poco de aire y un borde que lo separe de las
   tarjetas de tamaño aproximado que tiene justo encima. */
.medida-exacta{border:1px solid var(--linea);margin:14px 0 4px}
.medida-exacta .grid2{margin-top:12px}

.chart{margin:16px 0;background:var(--blanco);border:1px solid var(--linea);border-radius:10px;padding:12px}
.chart canvas{width:100%;display:block}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:16px 0}
.kpi{background:var(--fondo);border-radius:10px;padding:14px 16px;border-left:4px solid var(--linea)}
.kpi span{display:block;font-size:12px;color:var(--suave);line-height:1.35}
.kpi strong{display:block;font-size:23px;color:var(--dece-osc);font-variant-numeric:tabular-nums;margin-top:3px}
.kpi em{font-size:11.5px;color:var(--suave);font-style:normal}
.kpi.ok{background:var(--ahorro-cla);border-color:var(--ahorro)}
.kpi.ok strong{color:#2E7D5F}
.kpi.warn{background:var(--aviso-cla);border-color:var(--aviso)}
.kpi.warn strong{color:#8a5400}
.kpis.grandes .kpi strong{font-size:28px}

/* Traducción acústica */
.traduccion{background:var(--dece-cla2);border-radius:var(--r);padding:22px;margin:18px 0}
.trad-big{text-align:center;margin-bottom:16px}
.tb-num{font-size:52px;font-weight:800;color:var(--dece);line-height:1;font-variant-numeric:tabular-nums}
.tb-un{display:block;font-size:13.5px;color:var(--suave);margin-top:4px}
.trad-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.tc{background:var(--blanco);border-radius:10px;padding:15px;text-align:center}
.tc strong{display:block;font-size:27px;color:var(--dece-osc);font-variant-numeric:tabular-nums}
.tc span{display:block;font-size:12.5px;font-weight:650;color:var(--texto);margin:3px 0 6px}
.tc small{font-size:11.5px;color:var(--suave);line-height:1.4;display:block}
.trad-frase{text-align:center;font-size:15px;font-weight:600;color:var(--dece-osc);margin:16px 0 0}

/* ---------------- Demostración sonora ----------------
   Las tres escenas van en la escala de la marca y en el mismo orden en
   que mejora el ruido: gris oscuro corporativo la calle, azul medio la
   ventana de aluminio con la que se compara y azul Deceuninck la
   nuestra. Ni naranja ni ámbar: el bloque tiene que leerse como el
   resto del aplicativo. */
.escuchar{background:var(--dece-cla2);border:1px solid var(--linea);border-radius:var(--r);padding:20px 22px;margin:20px 0}
.escuchar h4{font-size:16px;color:var(--dece-osc);margin:0 0 6px}
.escuchar>p{font-size:13.5px;color:var(--suave);max-width:80ch}
.escenas{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:16px 0}
.escena{
  display:flex;align-items:center;gap:12px;background:var(--blanco);border:1.5px solid var(--linea);
  border-radius:10px;padding:12px 14px;position:relative;overflow:hidden;transition:border-color .18s,box-shadow .18s;
  --esc:var(--dece);
}
.escena.exterior{--esc:var(--gris-osc)}
.escena.base{--esc:var(--cian)}
.escena.dece{--esc:var(--dece);border-color:rgba(0,92,169,.35)}
.escena.sonando{border-color:var(--esc);box-shadow:0 0 0 3px rgba(0,92,169,.13)}
.escena.exterior.sonando{box-shadow:0 0 0 3px rgba(111,111,111,.15)}
/* Botón de acción: esquina recta, como el resto de los del aplicativo. */
.esc-play{
  flex:none;width:42px;height:42px;border-radius:0;border:0;cursor:pointer;font-size:14px;
  background:var(--esc);color:#fff;display:grid;place-items:center;transition:background .15s,transform .1s;
}
.esc-play:hover{background:var(--dece-osc)}
.esc-play:active{transform:scale(.94)}
.escena.exterior .esc-play:hover{background:#565656}
.esc-txt{flex:1;min-width:0;line-height:1.3}
.esc-txt strong{display:block;font-size:14px}
.esc-txt small{display:block;font-size:11.5px;color:var(--suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.esc-db{display:block;font-size:12.5px;font-weight:700;color:var(--esc);font-variant-numeric:tabular-nums;margin-top:2px}
.esc-medidor{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(29,42,56,.07)}
.esc-medidor i{display:block;height:100%;width:0;background:var(--esc);transition:width .07s linear}
.vol{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--suave)}
.vol input[type=range]{width:130px;accent-color:var(--dece)}
/* La advertencia de que esto es una recreación: mismo peso visual que
   el resto, pero en el gris corporativo sobre blanco, no en ámbar. */
.escuchar .aviso{background:var(--blanco);border-color:var(--gris-osc);color:var(--texto)}
/* La cautela que sí se lee siempre, y el resto a un clic. El aviso
   completo ocupaba tanta atención como la propia demostración. */
.esc-cautela{font-size:12.5px;color:var(--suave);margin:14px 0 0;max-width:80ch}
.esc-detalle{margin:6px 0 0}
.esc-detalle>summary{
  cursor:pointer;font-size:12.5px;color:var(--dece);font-weight:650;
  list-style:none;display:inline-block;padding:2px 0;border-bottom:1px solid rgba(0,92,169,.35);
}
.esc-detalle>summary::-webkit-details-marker{display:none}
.esc-detalle>summary:hover{color:var(--dece-osc)}
.esc-detalle p{font-size:12.5px;color:var(--suave);max-width:80ch;margin:10px 0 0}

.pill{font-size:11.5px;font-weight:650;padding:3px 9px;border-radius:20px;white-space:nowrap}
.pill.ok{background:var(--ahorro-cla);color:#2E7D5F}
.pill.medio{background:var(--aviso-cla);color:#8a5400}
.pill.no{background:var(--calor-cla);color:#93340f}

/* Comparativa de aire */
.comparativa-aire{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;margin:18px 0}
.ca-item{flex:1 1 220px;border-radius:11px;padding:18px;text-align:center}
.ca-item span{font-size:12.5px;font-weight:650;display:block}
.ca-item strong{display:block;font-size:29px;font-variant-numeric:tabular-nums;margin:5px 0}
.ca-item small{font-size:11.5px;color:var(--suave)}
.ca-item.mal{background:var(--calor-cla);color:#93340f}
.ca-item.bien{background:var(--ahorro-cla);color:#2E7D5F}
.ca-flecha{font-size:29px;color:var(--dece);font-weight:700}

.cot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:14px 0}
.cot{background:var(--fondo);border-radius:10px;padding:16px;text-align:center}
.cot.bien{background:var(--ahorro-cla)}
.cot span{font-size:12px;color:var(--suave);display:block}
.cot strong{display:block;font-size:27px;color:var(--dece-osc);margin:4px 0}
.cot small{font-size:12px;color:var(--suave)}
.lista-beneficios{font-size:14px;padding-left:20px}
.lista-beneficios li{margin-bottom:7px}

/* ---------- Botón y panel de administración ---------- */
.btn-admin{margin-left:auto;align-self:center;background:transparent;border:1px solid var(--linea);
  color:var(--suave);border-radius:0;padding:8px 14px;font-size:12.5px;cursor:pointer;white-space:nowrap}
.btn-admin:hover{background:var(--dece-cla2);border-color:var(--dece);color:var(--dece-osc)}

.admin-overlay{position:fixed;inset:0;background:rgba(15,32,50,.55);z-index:900;
  display:flex;align-items:flex-start;justify-content:center;padding:24px;overflow:auto}
.admin-panel{position:relative;background:var(--blanco);border-radius:var(--r);
  padding:28px 30px;max-width:860px;width:100%;box-shadow:0 18px 60px rgba(0,0,0,.3)}
.admin-panel h2{margin-top:0}
.admin-cerrar{position:absolute;top:12px;right:14px;background:none;border:0;font-size:26px;
  line-height:1;color:var(--suave);cursor:pointer;padding:4px 8px}
.admin-cerrar:hover{color:var(--dece-osc)}
.admin-pie{border-top:1px solid var(--linea);padding-top:16px;margin-top:22px}

/* ---------- Datos de contacto antes del PDF ---------- */
.bloque.lead-bloque{background:var(--dece-cla2);padding:20px 22px}
.lead-bloque.resaltado{animation:leadPulso 1.6s ease}
@keyframes leadPulso{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 6px rgba(0,92,169,.22)}}
.lead-check{margin:6px 0 14px;flex-direction:row;align-items:center;gap:9px}
.lead-check .lbl{font-weight:400;font-size:14px}
.btn.bloqueado{opacity:.55}
.btn.bloqueado::after{content:' 🔒'}

/* Equivalencias comerciales del ahorro (reporte de cliente) */
.equivalencias .intro-bloque{font-size:16px}
.eq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:16px 0}
.eq-card{background:var(--ahorro-cla);border-radius:10px;padding:18px 16px;text-align:center}
.eq-ico{display:block;font-size:30px;line-height:1;margin-bottom:8px}
.eq-card strong{display:block;font-size:29px;line-height:1.15;color:#2E7D5F;font-variant-numeric:tabular-nums}
.eq-card span{display:block;font-size:13px;color:var(--suave);margin-top:2px}
.eq-card small{display:block;font-size:11.5px;color:var(--suave);margin-top:6px;opacity:.85}

/* Huella de carbono operacional (reporte de cliente).
   La equivalencia en árboles reusa la tarjeta de las equivalencias
   comerciales, pero va sola y con el ícono de marca en vez de emoji. */
.eq-grid.arboles{grid-template-columns:minmax(0,1fr);max-width:560px;margin:16px auto}
.eq-grid.arboles .eq-ico{color:#2E7D5F;line-height:0;margin-bottom:10px}
.eq-grid.arboles .eq-ico svg{width:40px;height:40px;display:block;margin:0 auto}
.huella-carbono .eq-card strong{font-size:26px}

/* Tarifa derivada del municipio */
.tarifa-card .tarifa-valor{margin:2px 0 8px}
.tarifa-card .tarifa-valor strong{font-size:26px;color:var(--dece-osc);font-variant-numeric:tabular-nums}

.resumen-final .rf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:14px 0}
.rf{background:var(--dece-cla2);border-radius:10px;padding:16px}
.rf strong{display:block;font-size:22px;color:var(--dece-osc)}
.rf span{font-size:12.5px;color:var(--suave)}
.cierre{font-size:13.5px;color:var(--suave);border-top:1px solid var(--linea);padding-top:14px}

.arg-lista{font-size:14px;padding-left:22px}
.arg-lista li{margin-bottom:10px}
.formulas{font-size:13px;color:var(--suave);padding-left:20px}
.formulas li{margin-bottom:6px}

details.supuestos{background:var(--fondo);border-radius:var(--r);padding:16px 20px}
details.supuestos summary{cursor:pointer;list-style:none}
details.supuestos summary::-webkit-details-marker{display:none}
details.supuestos summary h3{display:inline;font-size:16px;color:var(--dece-osc);border:0;padding:0}
details.supuestos summary::after{content:" ▾";color:var(--dece)}
details.supuestos[open] summary::after{content:" ▴"}
details.supuestos summary p{font-size:12.5px;color:var(--suave);margin:5px 0 0}

.rep-pie{border-top:1px solid var(--linea);padding-top:18px;font-size:12px;color:var(--suave)}
.rep-pie h4{font-size:13px;color:var(--dece-osc)}
.rep-pie .firma{font-size:11px;opacity:.8}

.cargando-reporte{text-align:center;padding:60px 20px;color:var(--suave)}
.spinner{
  width:38px;height:38px;margin:0 auto 16px;border:4px solid var(--dece-cla);
  border-top-color:var(--dece);border-radius:50%;animation:giro .8s linear infinite;
}

/* ================================================================
   LA CONCLUSIÓN, ANTES DE LA TARJETA AZUL
   Va sobre el panel de resultados y dice, en una frase, lo que el
   lector tendría que deducir de los números: que esto es una
   recomendación y no una evaluación abierta.
   ================================================================ */
.conclusion-cliente{margin:0 0 16px}
.cc-tit{
  font-family:var(--fuente-tit);font-weight:300;font-size:23px;line-height:1.25;
  color:var(--dece-osc);margin:0 0 6px;
}
.cc-frase{font-size:16px;line-height:1.5;color:var(--texto);margin:0;max-width:75ch}
.cc-frase strong{color:var(--dece)}
.cc-sello{
  display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;
  background:var(--ahorro-cla);color:#2E7D5F;border-radius:20px;
  padding:7px 15px 7px 12px;font-size:12.5px;font-weight:650;
}
.cc-sello svg{width:15px;height:15px;flex:none}

/* ================================================================
   ANTES Y DESPUÉS
   Las dos cifras y una flecha. La demostración sonora ya hace esto
   con el oído; aquí se hace con la temperatura y con la factura.
   ================================================================ */
.antes-despues .ad-cab{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin:16px 0 4px;
}
.ad-lado{
  border-radius:10px;padding:14px 16px;border:1.5px solid var(--linea);background:var(--blanco);
}
.ad-lado.dece{border-color:rgba(0,92,169,.35);background:var(--dece-cla2)}
.ad-eyebrow{
  display:block;font-family:var(--fuente-tit);font-size:11px;text-transform:uppercase;
  letter-spacing:.11em;color:var(--suave);margin-bottom:3px;
}
.ad-lado.dece .ad-eyebrow{color:var(--dece)}
.ad-lado strong{font-size:16px;line-height:1.25}
.ad-lado.dece strong{color:var(--dece-osc)}
.ad-sep{font-size:22px;color:var(--suave);line-height:1}
.ad-filas{display:grid;gap:10px;margin-top:14px}
.ad-fila{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:6px 18px;
  background:var(--fondo);border-radius:10px;padding:14px 16px;
}
.ad-lbl{font-size:14px;font-weight:650;color:var(--texto)}
/* Las dos cifras no se parten por dentro, pero el par sí puede pasar a
   dos líneas: en un móvil, «$ 15,6 millones → $ 13,7 millones» no cabe
   de una sola pieza y forzarlo desbordaría la tarjeta. */
.ad-nums{
  display:inline-flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-variant-numeric:tabular-nums;
}
.ad-antes,.ad-despues{white-space:nowrap}
.ad-antes{font-size:20px;font-weight:600;color:var(--suave);text-decoration:line-through;text-decoration-thickness:1.5px}
.ad-flecha{font-style:normal;font-size:15px;color:var(--suave)}
.ad-despues{font-size:23px;font-weight:700;color:var(--dece)}
.ad-fila small{grid-column:1/-1;font-size:11.5px;color:var(--suave);line-height:1.45}

/* ================================================================
   ¿POR QUÉ ESTA VENTANA?
   El corte esquemático y los tres llamados. Convierte el número en
   un argumento: el beneficio viene del marco, del vidrio y del
   sellado, no de una calculadora.
   ================================================================ */
.pq-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;align-items:center;margin:16px 0}
.pq-dibujo{background:var(--dece-cla2);border-radius:var(--r);padding:18px 16px}
.corte-ventana{width:100%;height:auto;display:block}
.cv-muro{fill:var(--gris-cla);stroke:var(--linea);stroke-width:1.5}
.cv-pvc{fill:var(--blanco);stroke:var(--dece);stroke-width:2}
.cv-camara{fill:var(--dece-cla)}
.cv-junta{fill:var(--verde)}
.cv-vidrio{fill:var(--cian)}
.cv-camara-aire{fill:var(--blanco);stroke:var(--cian);stroke-width:1;stroke-dasharray:3 3}
.cv-llamada line{stroke:var(--dece-osc);stroke-width:1.4;stroke-dasharray:4 3}
.cv-llamada circle{fill:var(--dece);stroke:var(--blanco);stroke-width:2}
.cv-llamada text{fill:#fff;font-family:var(--fuente);font-size:14px;font-weight:700}
.pq-lista{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:none}
.pq-lista li{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start}
.pq-n{
  grid-row:1/3;width:27px;height:27px;border-radius:50%;background:var(--dece);color:#fff;
  display:grid;place-items:center;font-size:14px;font-weight:700;
}
.pq-lista strong{font-size:15px;color:var(--dece-osc);align-self:center}
.pq-lista li>span:last-child{font-size:13.5px;color:var(--suave);line-height:1.5}

/* ================================================================
   RESUMEN EJECUTIVO DEL CLIENTE FINAL
   Es lo único que mucha gente va a leer, así que ocupa la primera
   pantalla entera y no compite con nada.
   ================================================================ */
/* El azul del panel es el #509FCA de la propuesta: un azul medio plano,
   no un degradado. Sobre él, cada tarjeta es el mismo azul aclarado con
   un velo de blanco al 11 %, que es lo que da el escalón justo para que
   se distingan sin cortar el bloque. */
.resumen-cliente{
  background:#509FCA;color:#fff;
  border-radius:14px;padding:28px 30px;margin-bottom:22px;
}
.rc-cab{display:flex;gap:22px;align-items:center;margin-bottom:22px;flex-wrap:wrap}
.rc-foto{
  flex:0 0 240px;height:150px;border-radius:11px;overflow:hidden;
  background:rgba(255,255,255,.13);display:flex;align-items:center;justify-content:center;
}
.rc-foto img{width:100%;height:100%;object-fit:contain;display:block}
.rc-foto.sinimg::after{content:"🪟";font-size:44px;opacity:.5}
.rc-txt{flex:1 1 300px;min-width:0}
.rc-eyebrow{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;opacity:.75;margin:0}
.rc-txt h3{font-size:25px;font-weight:300;margin:3px 0 2px;color:#fff;border:0;padding:0}
.rc-vidrio{font-size:13px;opacity:.85;margin:0 0 10px}
.rc-lead{font-size:15px;opacity:.95;margin:0}
.rc-lead strong,.rc-porque strong{color:#fff}
.rc-porque{font-size:13px;opacity:.85;margin:8px 0 0}

.rc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.rc-card{background:rgba(255,255,255,.11);border-radius:11px;padding:18px 16px}
.rc-ico{display:block;line-height:0;margin-bottom:12px;color:#fff}
.rc-ico svg{width:26px;height:26px;display:block}
.rc-card strong{display:block;font-size:29px;line-height:1.1;font-variant-numeric:tabular-nums;font-weight:600}
.rc-tit{display:block;font-size:13px;font-weight:650;margin-top:4px}
.rc-card small{display:block;font-size:11.5px;opacity:.82;line-height:1.45;margin-top:8px}
.rc-card small strong{display:inline;font-size:inherit}
.rc-card.sin-dato strong{font-size:23px;opacity:.85}

/* ================================================================
   LA VENTANA CON LA QUE SE COMPARA (cliente final)
   Abre el informe: foto de la corredera de aluminio y una línea que
   la describe, sobre blanco, para que se distinga del panel azul de
   los sistemas Deceuninck que vienen debajo.
   ================================================================ */
.ref-cliente{
  display:flex;gap:22px;align-items:center;flex-wrap:wrap;
  background:var(--blanco);border:1.5px solid var(--linea);border-radius:14px;
  padding:18px 22px;margin:0 0 18px;
}
.ref-foto{
  flex:0 0 180px;height:135px;border-radius:10px;overflow:hidden;
  background:#F2F3F5;display:flex;align-items:center;justify-content:center;
}
.ref-foto img{width:100%;height:100%;object-fit:contain;display:block}
.ref-foto.sinimg::after{content:"🪟";font-size:40px;opacity:.4}
.ref-txt{flex:1 1 280px;min-width:0}
.ref-eyebrow{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--suave);margin:0}
.ref-txt h3{font-size:23px;font-weight:300;margin:3px 0 4px;color:var(--dece-osc);border:0;padding:0}
.ref-desc{font-size:14px;color:var(--texto);margin:0;line-height:1.45}

/* ================================================================
   RESULTADOS POR SISTEMA, EN COLUMNAS PARALELAS (cliente final)
   Un sistema ocupa todo el ancho. Dos van lado a lado, cada uno con
   su resumen, su antes y después y su porqué apilados en vertical,
   para que el lector compare fila a fila. En pantalla estrecha las
   columnas se apilan.
   ================================================================ */
.rc-columnas{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-bottom:22px}
.rc-columnas.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rc-col{min-width:0}
.rc-columnas.n2 .resumen-cliente{padding:22px 20px;margin-bottom:16px}
.rc-columnas.n2 .rc-cab{gap:14px;margin-bottom:16px}
.rc-columnas.n2 .rc-foto{flex:1 1 100%;height:150px}
.rc-columnas.n2 .rc-txt h3{font-size:22px}
.rc-columnas.n2 .rc-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.rc-columnas.n2 .rc-card{padding:14px 13px}
.rc-columnas.n2 .rc-card strong{font-size:24px}
.rc-columnas.n2 .antes-despues .ad-cab{grid-template-columns:1fr;gap:8px}
.rc-columnas.n2 .ad-sep{transform:rotate(90deg);justify-self:center}
.rc-columnas.n2 .ad-fila{grid-template-columns:1fr}
.rc-columnas.n2 .pq-cuerpo{grid-template-columns:1fr}
@media (max-width:900px){
  .rc-columnas.n2{grid-template-columns:minmax(0,1fr)}
}

/* ================================================================
   LOS ACABADOS (cliente final)
   La carta de colores es una sola imagen de marca. Va a todo el ancho
   del bloque y nunca se recorta: el cliente está mirando el color, no
   la composición.
   ================================================================ */
.carta-colores{margin:14px 0 0}
.carta-colores img{
  display:block;width:100%;height:auto;border-radius:8px;
  background:var(--blanco);
}
.carta-colores.sinimg::before{
  content:"Carta de acabados no disponible";
  display:block;padding:26px;text-align:center;color:var(--suave);
  border:1px dashed var(--linea);border-radius:8px;font-size:13px;
}
.carta-colores figcaption{
  font-size:12px;color:var(--suave);line-height:1.5;margin-top:9px;max-width:78ch;
}

/* ================================================================
   INFORME COMPLETO PLEGADO
   ================================================================ */
.escucha-destacada{padding:0;border:0;margin-bottom:22px}
.escucha-destacada .escuchar{margin:0}

details.informe-completo{margin:0 0 26px}
details.informe-completo>summary{
  list-style:none;cursor:pointer;text-align:center;padding:4px 0;
}
details.informe-completo>summary::-webkit-details-marker{display:none}
/* Mismo trazo que la barra de acciones de la cabecera: contorno azul
   claro sobre blanco y esquina recta. */
.ic-btn{
  display:inline-block;background:var(--blanco);color:var(--dece);font-size:15px;font-weight:400;
  padding:13px 40px;border:1px solid #A5C8E4;border-radius:0;
  transition:background .18s,border-color .18s,color .18s;
}
details.informe-completo>summary:hover .ic-btn{background:var(--dece-cla2);border-color:var(--dece);color:var(--dece-osc)}
.ic-btn::after{content:"   ▾"}
details.informe-completo[open]>summary .ic-btn::after{content:"   ▴"}
details.informe-completo[open]>summary .ic-btn{color:var(--suave);border-color:var(--linea)}
.ic-sub{display:block;font-size:12.5px;color:var(--suave);max-width:62ch;margin:9px auto 0;line-height:1.5}
details.informe-completo[open]>summary .ic-sub{display:none}
.ic-cuerpo{margin-top:22px;border-top:1px solid var(--linea);padding-top:8px}

/* ================================================================
   TARJETAS DE SISTEMA CON FOTO (cliente final)
   ================================================================ */
/* La foto ocupa la tarjeta entera y el nombre del sistema va encima, en
   negro sobre una banda blanca traslúcida: se lee sin tapar el perfil,
   que es justo lo que el cliente está mirando. */
.sistemas-cliente{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.opcion.sis-card{
  padding:0;overflow:hidden;gap:0;align-items:stretch;text-align:left;
  position:relative;min-height:176px;
}
.sc-img{
  display:flex;align-items:center;justify-content:center;
  position:absolute;inset:0;background:var(--dece-cla2);
}
.sc-img img{width:100%;height:100%;object-fit:cover;display:block}
.sc-img.sinimg::after{content:"🪟";font-size:38px;opacity:.35}
.sc-txt{
  position:absolute;left:0;right:0;bottom:0;display:block;padding:11px 15px;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.opcion.sis-card .sc-txt strong{display:block;font-size:14.5px;color:#000;font-weight:600}
.opcion.sis-card .sc-txt small{
  display:block;font-size:11.5px;color:var(--suave);line-height:1.35;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.vidrio-elegido{border-left:4px solid var(--dece)}
.vidrio-elegido h4{font-size:16px}

/* ================================================================
   ETIQUETA ENERGÉTICA — datos declarados al modo BFRC
   ================================================================ */
.et-indice{margin:6px 0 0;font-size:12.5px;color:var(--suave)}
.et-indice strong{font-size:20px;color:var(--dece-osc);font-variant-numeric:tabular-nums;margin-right:4px}
.et-indice small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;opacity:.8}
.et-escala-pie{font-size:11.5px;color:var(--suave);margin:-2px 0 0;text-align:right}
.et-datos{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
.et-datos li{background:var(--blanco);border:1px solid var(--linea);border-radius:9px;padding:9px 12px}
.etd-lbl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--suave)}
.et-datos strong{display:block;font-size:15.5px;color:var(--dece-osc);font-variant-numeric:tabular-nums;margin-top:2px}
.et-datos strong em{font-size:12px;font-style:normal;color:var(--suave)}
.et-datos small{display:block;font-size:11.5px;color:var(--suave);line-height:1.4;margin-top:3px}
.et-metodo{margin-top:18px}
.et-metodo .formula{margin:4px 0}

/* ---------------- Etiqueta de desempeño acústico ----------------
   Misma tarjeta que la energética (.et-*); solo añade el número que
   vende y el antes-después del proyecto. */
.eta-big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:10px;background:var(--dece-cla);margin:10px 0 12px}
.eta-num{font-size:30px;font-weight:800;color:var(--dece-osc);line-height:1;font-variant-numeric:tabular-nums}
.eta-txt{font-size:13px;color:var(--texto);line-height:1.35;max-width:24ch}
.eta-txt strong{color:var(--dece-osc)}
.eta-proy{border-top:1px dashed var(--linea);padding-top:12px;margin-top:12px}
.eta-ad{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin:8px 0 10px}
.eta-c{background:var(--blanco);border:1px solid var(--linea);border-radius:9px;padding:9px 11px}
.eta-c.dece{border-color:rgba(0,92,169,.35)}
.eta-c small{display:block;font-size:11px;color:var(--suave)}
.eta-c strong{display:block;font-size:13.5px;color:var(--texto);line-height:1.35}
.eta-c.dece strong{color:var(--dece-osc)}
.eta-c span{display:block;font-size:12px;color:var(--suave);font-variant-numeric:tabular-nums}
.eta-sep{color:var(--dece);font-size:20px;line-height:1}
@media (max-width:720px){.eta-ad{grid-template-columns:1fr}.eta-sep{transform:rotate(90deg);justify-self:center}}

/* ---------------- Responsivo ----------------
   La cabecera es una sola fila en pantalla ancha; a medida que se
   estrecha va soltando piezas por orden de importancia: primero encoge
   el rótulo y los sellos, y por último se queda solo con el logotipo y
   el acceso de administración. */
@media (max-width:980px){
  header.app{padding:8px 16px;gap:12px}
  header.app .hdr-tit{font-size:13px;letter-spacing:.04em}
  header.app .hdr-der{gap:10px}
  header.app .sello{height:34px;width:34px}
  .progreso{top:57px}
  .hb-txt{padding:28px 30px}
  .hb-tit{font-size:29px}
}
@media (max-width:680px){
  header.app .hdr-barra,header.app .hdr-tit{display:none}
  header.app .logo{height:46px;margin:-9px 0}
  header.app .sello{height:30px;width:30px}
  .progreso{top:52px}
  /* Sin sitio para la fotografía, el velo la cubre entera y el bloque
     queda como un fondo gris liso con el texto encima. */
  .hero-banner{min-height:0}
  .hero-banner::before{background:linear-gradient(90deg,#D3D4D8 0%,rgba(211,212,216,.94) 100%)}
  .hb-txt{padding:24px 20px}
  .hb-tit{font-size:25px}
  .hb-corona{margin-bottom:14px}
  .intro-cuerpo{padding:22px 18px 24px}
  .eyebrow{font-size:13px;letter-spacing:.14em}
  .eyebrow-sub{font-size:14.5px}
  .paso>h2{font-size:22px;gap:10px}
  .paso>h2 svg{width:25px;height:25px}
}

@media (max-width:720px){
  .cc-tit{font-size:20px}
  .cc-frase{font-size:15px}
  /* Antes y después: en una columna la flecha va horizontal entre las
     dos tarjetas, no en el hueco central que ya no existe. */
  .antes-despues .ad-cab{grid-template-columns:1fr;gap:8px}
  .ad-sep{transform:rotate(90deg);justify-self:center}
  .ad-fila{grid-template-columns:1fr}
  .ad-despues{font-size:21px}
  .pq-cuerpo{grid-template-columns:1fr}
  .rc-foto{flex:1 1 100%;height:170px}
  .rc-txt h3{font-size:21px}
  .rc-card strong{font-size:25px}
  body{font-size:14.5px}
  main{padding:16px 12px}
  .paso{padding:20px 18px}
  .pasos{padding:8px 12px}
  .tb-num{font-size:42px}
  /* Apiladas y a todo el ancho: tres botones de 260 px sueltos en una
     columna de 315 px se ven descolgados a la izquierda. */
  .rep-acciones .btn{flex:1 1 100%;max-width:none}
  .navbar{padding:10px 12px}
  .navbar .estado{display:none}
}

/* ---------------- Impresión ----------------
   El informe se guarda en PDF y se manda por correo, así que en papel
   tiene que leerse como un documento —márgenes, el logotipo en todas
   las páginas y bloques que no se parten a mitad de una cifra— y no
   como una captura de pantalla muy larga.

   El reparto de los márgenes es a propósito. La regla `@page` pone el
   grueso, pero el navegador la ignora si el usuario elige «Márgenes:
   ninguno» en el diálogo de impresión; el resto lo pone el relleno de
   las celdas de la hoja (Report.hojaImpresa), que ninguna opción del
   diálogo puede quitar. Con márgenes normales quedan ~14 mm por lado;
   con «ninguno», nunca menos de 5 mm.
   ------------------------------------------- */
@page{size:A4 portrait;margin:10mm 9mm 9mm}

@media print{
  html,body{background:#fff}
  body{
    font-size:9.6pt;line-height:1.45;padding:0;
    /* Los colores de marca son parte del informe, no adorno: el azul del
       panel de resultados y el verde del ahorro tienen que salir
       impresos aunque el navegador traiga los fondos apagados. */
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  header.app,.progreso,.navbar,.no-print,.rep-acciones{display:none !important}
  main{max-width:100%;padding:0;margin:0}
  .paso{box-shadow:none;padding:0;margin:0;border:0;background:transparent}
  p,li{orphans:3;widows:3}

  /* ---- La hoja: encabezado y pie en TODAS las páginas ----
     `thead` y `tfoot` de una tabla se repiten al pasar de página y
     reservan su espacio, que es justo lo que hace falta. En pantalla
     esta misma tabla está desarmada en bloques (ver «Reporte»). */
  .hoja{display:table;width:100%;border-collapse:collapse;table-layout:fixed}
  .hoja>thead{display:table-header-group}
  .hoja>tfoot{display:table-footer-group}
  .hoja>tbody{display:table-row-group}
  .hoja>thead>tr,.hoja>tfoot>tr,.hoja>tbody>tr{display:table-row;break-inside:auto}
  .hoja>thead>tr>td{display:table-cell;padding:4mm 5mm 0;border:0}
  .hoja>tfoot>tr>td{display:table-cell;padding:0 5mm 4mm;border:0}
  .hoja>tbody>tr>td{display:table-cell;padding:0 5mm;border:0;vertical-align:top}

  .hoja-cab .hc{
    display:flex;align-items:center;gap:9px;
    border-bottom:1.2pt solid var(--dece);padding-bottom:2.4mm;margin-bottom:5mm;
  }
  .hc-logo{height:8.5mm;width:auto;flex:none;margin:0}
  .hc-barra{width:1px;height:4mm;background:var(--dece);opacity:.6;flex:none}
  .hc-tag{
    font-family:var(--fuente-tit);font-size:7pt;letter-spacing:.14em;
    text-transform:uppercase;color:var(--suave);white-space:nowrap;
  }
  .hc-sitio{margin-left:auto;font-size:7pt;color:var(--suave);text-align:right}
  .hoja-pie .hp{
    display:flex;justify-content:space-between;gap:8mm;
    border-top:.5pt solid var(--linea);padding-top:2mm;margin-top:6mm;
    font-size:6.8pt;color:var(--suave);
  }

  /* ---- Portadilla ----
     El logotipo ya va arriba en cada página: aquí sobra, y lo que queda
     es el título del documento con el sitio y la fecha. */
  .rep-marca{display:none}
  .rep-head{border-bottom:0;padding-bottom:0;margin-bottom:7mm}
  .rep-titulo h2{font-size:19pt;gap:8px}
  .rep-titulo h2 svg{width:20pt;height:20pt}
  .rep-titulo p{font-size:9pt}
  .rep-fecha{font-size:8pt !important}

  /* ---- Cortes de página ----
     Los bloques largos SÍ se pueden partir: obligarlos a caber enteros
     dejaba hojas medio vacías. Lo que no se parte nunca es la unidad
     pequeña —una tarjeta, una gráfica, una fila de tabla—, y un título
     no se queda solo al pie de la hoja. */
  .bloque{margin:0 0 7mm;padding-top:0;break-inside:auto}
  h2,h3,h4{break-after:avoid}
  .bloque>h3{font-size:12.5pt}
  .intro-bloque{font-size:9pt}
  .kpi,.chart,.tc,.cot,.rf,.eq-card,.ca-item,.ad-fila,.aviso,.mini-card,.cc-sello,.rc-card,
  .pq-lista li,.traduccion,.et-datos li,.conclusion-cliente,.antes-despues,
  .et-card,.eta-c,.grid2>.mini-card,
  .tabla tr{break-inside:avoid}
  .resumen-cliente{background:#509FCA !important}
  /* La demostración sonora no existe en papel: su sección se queda
     vacía y solo dejaría un hueco. */
  .bloque.escucha-destacada{display:none}

  /* El detalle técnico abre hoja nueva: hasta ahí llega el resumen y de
     ahí en adelante va el sustento. */
  .ic-cuerpo{margin-top:0;border-top:0;break-before:page}
  details.informe-completo>summary{display:none}
  details{display:block}
  details>summary{list-style:none}
  details:not([open])>*:not(summary){display:block !important}
  /* Chrome moderno esconde el contenido del `details` cerrado con
     `content-visibility` en su propio seudoelemento: devolverle el
     `display` a los hijos ya no basta. */
  details:not([open])::details-content{content-visibility:visible !important}
  details.supuestos{break-inside:auto;background:#fff;border:.5pt solid var(--linea);padding:4mm 5mm}

  /* ---- Tablas: si pasan de página, el encabezado se repite ----
     En papel no hay barra de desplazamiento: ninguna tabla puede ser
     más ancha que la hoja. Los encabezados parten el renglón (en
     pantalla van en una línea) y el relleno de las celdas baja al
     tamaño de la letra impresa. */
  .tabla{min-width:0;font-size:8pt;width:100%;max-width:100%}
  .tabla th,.tabla td{padding:4px 5px}
  .tabla thead th{white-space:normal;vertical-align:bottom}
  .tabla thead{display:table-header-group}
  .tabla-uw{font-size:7.4pt}
  .tabla-uw th,.tabla-uw td{padding:3px 4px}
  .tabla-uw thead th:nth-child(n+9){min-width:0;max-width:none}
  .tabla-uw td small{font-size:6.6pt}
  /* La tabla de supuestos tiene tres columnas muy desiguales y con
     anchos automáticos la de en medio se lo come todo: el valor lleva
     `white-space:nowrap` —que en pantalla mantiene la cifra de una
     pieza— y ahí dentro hay frases enteras. Se le deja partir el
     renglón y se fija el reparto de las tres columnas. */
  .tabla-supuestos{table-layout:fixed}
  .tabla-supuestos td.num{white-space:normal;text-align:left}
  .tabla-supuestos th:first-child,.tabla-supuestos td:first-child{width:22%}
  .tabla-supuestos th:nth-child(2),.tabla-supuestos td:nth-child(2){width:16%}
  .tabla-supuestos th:last-child,.tabla-supuestos td:last-child{width:62%}
  /* Las tablas cortas de dos columnas (trazabilidad, geometría) no
     llevan ese reparto: el valor va a la derecha y de una pieza. */
  .tabla.mini td.num{white-space:nowrap}
  .tabla.mini thead th{white-space:nowrap}
  /* El subtítulo del encabezado azul (el vidrio) se leía gris sobre azul. */
  .tabla thead th.dece small{color:rgba(255,255,255,.85)}
  .tabla-wrap{overflow:visible}

  .chart{margin:4mm 0;border:.5pt solid var(--linea);border-radius:0;padding:3mm;background:#fff}
  .kpis,.trad-cards,.cot-grid,.eq-grid,.rf-grid{gap:3mm;margin:4mm 0}

  .rep-pie{break-inside:avoid;margin-top:7mm;padding-top:3mm;font-size:7.5pt}
  a{text-decoration:none;color:inherit}
}