/* ===========================================================================
   PROPUESTA SOLAR — hoja de estilos unica
   Web y PDF salen de este mismo archivo. Todo lo que se agregue tiene que
   sobrevivir a @media print, porque el cliente imprime o guarda el PDF.

   El acento NO se define aca: lo genera lib/branding.js a partir del color de
   la empresa y se inyecta inline como --primario / --acento. Aca van los
   neutros, la escala y el ritmo, que son iguales en todos los deploys.
   =========================================================================== */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/public/fonts/ibm-plex-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/public/fonts/ibm-plex-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/public/fonts/ibm-plex-sans-700.woff2') format('woff2');
}

:root {
  /* IBM Plex Sans se auto-hostea: la propuesta se abre desde WhatsApp con datos
     moviles, y ademas la renderiza Chromium adentro del contenedor, donde no
     conviene depender de que Google responda. */
  --fuente: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Escala modular. Nada de tamanos sueltos. */
  --t-12: 0.75rem;
  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-20: 1.25rem;
  --t-24: 1.5rem;
  --t-30: 1.875rem;
  --t-40: 2.5rem;

  /* Ritmo de 4 / 8 */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;

  /* La sangria de las listas numeradas no es ritmo: es el ancho del circulo mas
     aire. Va aparte de la escala porque @media print aprieta --e7 y, si colgara
     de ahi, el numero se le montaria encima al texto en el PDF. */
  --sangria-num: 44px;

  /* Neutros con sesgo frio: gris de documento, no gris de sistema operativo */
  --papel: #ffffff;
  --papel-hueso: #f8fafc;
  --tinta: #0f172a;
  --tinta-media: #475569;   /* 7.6:1 sobre papel */
  --tinta-suave: #64748b;   /* 4.8:1 sobre papel */
  --linea: #e2e8f0;
  --linea-fuerte: #cbd5e1;

  /* Color semantico, separado del de marca a proposito: la curva de "sin
     sistema" y el cartel de vencida significan lo mismo en todos los deploys. */
  --peligro: #dc2626;
  --peligro-papel: #fef2f2;
  --peligro-linea: #fecaca;

  --radio: 10px;
  --radio-chico: 6px;
  --sombra: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
  --medida: 68ch;          /* largo de linea comodo para leer */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--t-16);
  line-height: 1.65;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

p { margin: 0 0 var(--e3); max-width: var(--medida); }
p:last-child { margin-bottom: 0; }

a { color: var(--primario-texto, var(--primario)); }

/* Visible para un lector de pantalla, invisible en la hoja. */
.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Foco visible en todo lo enfocable. Antes no habia ninguno en toda la app. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--primario, #0B5FFF);
  outline-offset: 2px;
  border-radius: var(--radio-chico);
}

/* --------------------------------------------------------------- Portada */

.portada {
  margin: 0 calc(var(--e5) * -1) var(--e6);
  padding: var(--e7) var(--e5) var(--e6);
  background: var(--papel-hueso);
  border-bottom: 3px solid var(--primario);
  display: grid;
  gap: var(--e2);
}
.portada.con-foto {
  background-size: cover;
  background-position: center;
  border-bottom: none;
  color: #f1f5f9;
}
.portada-marca { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e5); }
.portada .logo { max-height: 44px; width: auto; }
.portada .empresa {
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
.portada.con-foto .empresa { color: #cbd5e1; }
.portada-tipo {
  margin: 0;
  font-size: var(--t-14);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primario-texto, var(--primario));
}
.portada.con-foto .portada-tipo { color: var(--acento); }
.portada h1 {
  margin: 0;
  font-size: clamp(var(--t-30), 8vw, var(--t-40));
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.portada.con-foto h1 { color: #ffffff; }
.portada-potencia {
  margin: var(--e2) 0 0;
  font-size: var(--t-24);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-media);
}
.portada.con-foto .portada-potencia { color: #e2e8f0; }

/* La ficha de portada: cuatro numeros arriba de todo, para el que no lee el resto */
.portada-ficha {
  margin: var(--e5) 0 0;
  display: grid;
  gap: var(--e3) var(--e5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--linea);
  padding-top: var(--e4);
}
.portada-ficha dt {
  margin: 0 0 2px;
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.portada-ficha dd {
  margin: 0;
  font-size: var(--t-18);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
.portada.con-foto .portada-ficha { border-top-color: rgba(226, 232, 240, .35); }
.portada.con-foto .portada-ficha dt { color: #cbd5e1; }
.portada.con-foto .portada-ficha dd { color: #ffffff; }

/* Los avales de la empresa. Discretos a proposito: si gritan, dejan de creerse. */
.portada-aval {
  list-style: none;
  margin: var(--e4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e3);
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
/* El punto va delante y no entre items: puesto entre medio, cuando la tira
   cambia de linea queda uno colgando al final, como una errata. */
.portada-aval li { display: flex; align-items: center; gap: var(--e2); }
.portada-aval li::before {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--primario);
}
.portada.con-foto .portada-aval { color: #cbd5e1; }
.portada.con-foto .portada-aval li::before { background: var(--acento); }

.portada-fecha { margin: var(--e4) 0 0; font-size: var(--t-14); color: var(--tinta-suave); }
.portada.con-foto .portada-fecha { color: #94a3b8; }

/* ------------------------------------------------------ Resumen ejecutivo */

.resumen { display: grid; gap: var(--e5); padding-bottom: var(--e6); border-bottom: 1px solid var(--linea); }
.resumen-texto { font-size: var(--t-18); line-height: 1.55; max-width: var(--medida); margin: 0; }

.stats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); grid-template-columns: repeat(2, 1fr); }
.stats li {
  display: grid;
  gap: 2px;
  padding: var(--e3) var(--e4);
  background: var(--papel-hueso);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
}
.stats span {
  font-size: var(--t-20);
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--primario-texto, var(--tinta));
}
.stats small { font-size: var(--t-12); color: var(--tinta-media); line-height: 1.3; }

/* -------------------------------------------------- Equipos, con cantidad */

.equipos { display: grid; gap: var(--e4); margin: 0 0 var(--e5); }
.equipo {
  position: relative;
  display: grid;
  gap: var(--e1);
  padding: var(--e4) var(--e5) var(--e4) var(--e4);
  background: var(--papel-hueso);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  align-content: start;
}
.equipo img { width: 100%; max-height: 150px; object-fit: contain; margin-bottom: var(--e2); }
.equipo .cantidad {
  position: absolute;
  top: var(--e3);
  right: var(--e3);
  min-width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0 var(--e2);
  border-radius: 999px;
  background: var(--tinta);
  color: #ffffff;
  font-size: var(--t-18);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.equipo .que { margin: 0; font-weight: 600; }
.equipo .cual { margin: 0; font-size: var(--t-14); color: var(--tinta-media); }

.datos-sistema { margin-bottom: var(--e5); }

/* -------------------------------------------------------------- Diagrama */

.diagrama-caja {
  margin: 0 0 var(--e5);
  padding: var(--e4);
  background: var(--papel-hueso);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow-x: auto;
}
.diagrama { display: block; min-width: 560px; }
.diagrama .dg-equipo { fill: none; stroke: var(--tinta); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.diagrama .dg-pantalla { fill: var(--primario-claro); stroke: var(--tinta); stroke-width: 1.2; }
.diagrama .dg-relleno { fill: var(--acento); stroke: none; }
.diagrama .dg-sol { fill: none; stroke: var(--acento); stroke-width: 2; stroke-linecap: round; }
.diagrama .dg-rayo { stroke: var(--acento); stroke-width: 1.6; stroke-dasharray: 3 4; }
.diagrama .dg-flujo { stroke: var(--primario); stroke-width: 2; }
.diagrama .dg-punta { fill: var(--primario); stroke: none; }
.diagrama .dg-flujo-rotulo { font-size: 11px; fill: var(--tinta-suave); letter-spacing: .04em; }
.diagrama .dg-rotulo { font-size: 12.5px; fill: var(--tinta); font-weight: 600; }
.diagrama .dg-numero circle { fill: var(--tinta); stroke: none; }
.diagrama .dg-numero text { fill: #ffffff; font-size: 12px; font-weight: 700; }

/* ------------------------------------------------ Que baja y que no baja */

.tabla-desglose th[scope="row"] { font-weight: 600; }
.tabla-desglose .kwh {
  display: block;
  font-size: var(--t-12);
  font-weight: 600;
  color: var(--tinta-media);
  font-variant-numeric: tabular-nums;
}
.tabla-desglose .por-que {
  display: block;
  margin-top: var(--e1);
  font-size: var(--t-12);
  font-weight: 400;
  color: var(--tinta-suave);
  line-height: 1.4;
  max-width: 44ch;
}
.tabla-desglose .monto { white-space: nowrap; font-weight: 600; }
.tabla-desglose td { vertical-align: top; }
/* El estado no se transmite solo por color: cada uno lleva su palabra. */
.marca-reduce {
  display: inline-block;
  white-space: nowrap;
  padding: 2px var(--e2);
  border-radius: 999px;
  font-size: var(--t-12);
  font-weight: 600;
  border: 1px solid;
}
.marca-si { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.marca-parcial { background: #fffbeb; color: #78350f; border-color: #fde68a; }
.marca-no { background: var(--papel-hueso); color: var(--tinta-media); border-color: var(--linea-fuerte); }

/* ------------------------------------------------------------------ TIR */

.tir {
  display: grid;
  gap: var(--e2);
  margin: 0 0 var(--e5);
  padding: var(--e5);
  background: var(--papel);
  border: 1px solid var(--primario-medio);
  border-radius: var(--radio);
}
.tir-numero {
  margin: 0;
  font-size: clamp(var(--t-30), 10vw, var(--t-40));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--primario-texto, var(--primario));
}
.tir-texto { margin: 0; font-size: var(--t-14); color: var(--tinta-media); }

/* ------------------------------------------------------------ Ambiental */

.ambiental { margin-top: var(--e5); padding: var(--e5); background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); }
.ambiental h3 { margin-top: 0; }
.stats-ambiental { margin-top: var(--e3); }
.stats-ambiental li { background: var(--papel-hueso); }

/* ------------------------------------------- Piezas de la Oferta Espejo */

.portada-promesa {
  margin: var(--e4) 0 0;
  max-width: 46ch;
  font-size: var(--t-18);
  line-height: 1.45;
  font-weight: 600;
  color: var(--tinta-media);
}
.portada.con-foto .portada-promesa { color: #e2e8f0; }

/* Los cuatro pilares: por que esta empresa y no otra */
.pilares { list-style: none; padding: 0; margin: 0 0 var(--e5); display: grid; gap: var(--e4); }
.pilares li {
  display: grid;
  gap: var(--e1);
  padding: var(--e4) var(--e5);
  background: var(--papel-hueso);
  border-left: 3px solid var(--primario);
  border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
}
.pilar-titulo {
  font-size: var(--t-12);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primario-texto, var(--primario));
}

/* La linea de tiempo de la entrega */
.fases { list-style: none; padding: 0; margin: 0 0 var(--e5); counter-reset: fase; display: grid; gap: var(--e5); }
.fases li { position: relative; padding-left: var(--sangria-num); counter-increment: fase; }
.fases li::before {
  content: counter(fase);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--primario);
  color: var(--sobre-primario);
  font-size: var(--t-14);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* La linea que une las fases: se corta en la ultima */
.fases li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 34px;
  bottom: calc(var(--e5) * -1);
  width: 2px;
  background: var(--linea-fuerte);
}
.fase-nombre { margin: 0 0 2px; font-weight: 600; }
.fase-objetivo { margin: 0 0 var(--e2); font-weight: 600; color: var(--primario-texto, var(--tinta)); }
.fase-detalle { margin: 0; font-size: var(--t-14); color: var(--tinta-media); }

/* Prueba social: el video del cliente o la captura de su resena */
.prueba { margin: var(--e5) 0 0; display: grid; gap: var(--e2); }
.prueba video, .prueba img {
  width: 100%;
  max-height: 420px;
  border-radius: var(--radio-chico);
  border: 1px solid var(--linea);
  background: var(--tinta);
  display: block;
}
.prueba img { object-fit: contain; background: var(--papel); }
.prueba figcaption { font-size: var(--t-14); color: var(--tinta-media); }
.solo-impresion { display: none; }

/* Bonos de accion rapida */
.bonos {
  margin: var(--e5) 0;
  padding: var(--e5);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radio);
}
.bonos h3 { margin: 0 0 var(--e3); color: #ffffff; }
.bonos ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); }
.bonos li { display: grid; gap: 2px; }
.bonos li + li { padding-top: var(--e4); border-top: 1px solid rgba(255, 255, 255, .12); }
.bono-nombre { font-weight: 700; color: #ffffff; }
.bono-detalle { color: #cbd5e1; font-size: var(--t-14); }
.bonos-condicion {
  margin: var(--e4) 0 0 !important;
  padding-top: var(--e3);
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: var(--t-14);
  color: #e2e8f0 !important;
}

/* --------------------------------------- Alcance: incluye y no incluye */

.alcance { display: grid; gap: var(--e5); margin-bottom: var(--e4); }
.alcance h3 { margin-top: 0; }
.lista-cruz { list-style: none; padding: 0; margin: 0 0 var(--e3); display: grid; gap: var(--e2); }
.lista-cruz li { position: relative; padding-left: var(--e5); color: var(--tinta-media); }
.lista-cruz li::before {
  content: "\2715";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--tinta-suave);
  font-weight: 700;
}
.recomendaciones { margin-top: var(--e5); padding: var(--e5); background: var(--papel-hueso); border-radius: var(--radio); border: 1px solid var(--linea); }
.recomendaciones h3 { margin-top: 0; }

/* --------------------------------------- Hitos de pago y proximos pasos */

.hitos, .pasos { margin: 0 0 var(--e4); padding-left: 0; list-style: none; counter-reset: paso; display: grid; gap: var(--e3); }
.hitos li, .pasos li { position: relative; padding-left: var(--sangria-num); counter-increment: paso; }
.hitos li::before, .pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--acento);
  color: var(--sobre-acento);
  font-size: var(--t-14);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.incentivo {
  margin: 0 0 var(--e5);
  padding: var(--e4) var(--e5);
  background: var(--acento-claro);
  border-radius: var(--radio-chico);
}
.incentivo p { color: var(--tinta) !important; max-width: none; margin-bottom: var(--e2); }
.incentivo p:last-child { margin-bottom: 0; }
.incentivo-titulo { font-weight: 700; }

/* --------------------------------------------------- Mecanismo, ficha de bono
   y disponibilidad.

   El mecanismo va sobre papel, dentro del bloque de alcance: es la explicacion de
   por que esta propuesta no se compara renglon por renglon con las otras dos que
   el cliente pidio. La ficha de bono y la disponibilidad viven en el bloque de
   precio, que es oscuro, asi que sus colores son literales y no variables. */

.mecanismo {
  margin: 0 0 var(--e5);
  padding: var(--e4) var(--e5);
  background: var(--papel-hueso);
  border-left: 3px solid var(--primario);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.mecanismo p { max-width: none; margin: 0 0 var(--e2); }
.mecanismo p:last-child { margin-bottom: 0; }
.mecanismo-lead { font-size: var(--t-18); line-height: 1.4; }
.mecanismo-cierre { color: var(--tinta-media); font-size: var(--t-14); }

.bono-cabeza {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3);
  align-items: baseline; justify-content: space-between;
  margin: 0 0 var(--e2) !important;
}
.bono-ancla {
  font-size: var(--t-12); font-weight: 700; color: #ffffff;
  padding: 2px var(--e2); white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--radio);
}
.bono-ficha { margin: 0; display: grid; gap: var(--e2) var(--e5); }
.bono-ficha dt {
  font-size: var(--t-12); font-weight: 700; color: #ffffff;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px;
}
.bono-ficha dd { margin: 0; color: #cbd5e1; font-size: var(--t-14); line-height: 1.5; }
.bonos-total {
  margin: var(--e4) 0 0 !important;
  padding-top: var(--e3);
  border-top: 1px solid rgba(255, 255, 255, .18);
  color: #e2e8f0 !important;
}
.bonos-total strong { color: #ffffff; }

.disponibilidad {
  margin: var(--e5) 0;
  padding: var(--e5);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radio);
}
.disponibilidad h3 { margin: 0 0 var(--e3); color: #ffffff; }
.disponibilidad p { color: #cbd5e1 !important; font-size: var(--t-14); margin: 0 0 var(--e2); }
.disponibilidad p:last-child { margin-bottom: 0; }

/* -------------------------------------------------- Supuestos del calculo */

.supuestos { padding: var(--e6) 0 0; border-top: 1px solid var(--linea); }
.supuestos h2 { font-size: var(--t-18); margin: 0 0 var(--e4); color: var(--tinta-media); }
.supuestos dl { margin: 0 0 var(--e4); display: grid; gap: var(--e3); }
.supuestos dt { font-size: var(--t-14); font-weight: 600; }
.supuestos dd { margin: 0; font-size: var(--t-14); color: var(--tinta-media); max-width: var(--medida); }

/* ---------------------------------------------------------------- La hoja */

.propuesta {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 var(--e5) var(--e8);
}

.cabecera {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e5) 0 var(--e4);
  border-bottom: 3px solid var(--primario);
  flex-wrap: wrap;
}
.logo { max-height: 44px; width: auto; }
.cabecera-datos { display: grid; gap: 2px; }
.cabecera .empresa {
  font-size: var(--t-14);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
.cabecera h1 {
  margin: 0;
  font-size: var(--t-20);
  font-weight: 600;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.bloque { padding: var(--e7) 0; border-bottom: 1px solid var(--linea); }
.bloque:last-of-type { border-bottom: none; }
.bloque > h2 {
  margin: 0 0 var(--e4);
  font-size: var(--t-24);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--primario-texto, var(--tinta));
}
.bloque h3 {
  margin: var(--e5) 0 var(--e2);
  font-size: var(--t-16);
  font-weight: 600;
}

/* -------------------------------------------- Bloque 1: los numeros de el */

.datos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--e3);
}
.datos li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e4);
  flex-wrap: wrap;
  padding-bottom: var(--e3);
  border-bottom: 1px dashed var(--linea);
}
.datos li:last-child { border-bottom: none; padding-bottom: 0; }
.datos span { color: var(--tinta-media); font-size: var(--t-14); }
.datos strong {
  font-size: var(--t-20);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.frase {
  margin: var(--e5) 0 0;
  padding: var(--e4) var(--e5);
  background: var(--primario-claro);
  border-left: 3px solid var(--primario);
  border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
  font-size: var(--t-18);
  font-style: italic;
  line-height: 1.5;
  max-width: none;
}

/* --------------------------------------------- Bloque 2: la proyeccion */

.tabla-envoltorio { overflow-x: auto; margin: 0 0 var(--e4); }
.tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
/* La linea va en el <tr>, no en cada celda: pintada celda por celda, Chromium
   la redondea a pixeles distintos en cada columna y en el PDF sale un tramo
   mas grueso que el resto, como si la fila estuviera cortada al medio. */
.tabla th, .tabla td { text-align: left; padding: var(--e3) var(--e2); }
.tabla tr { border-bottom: 1px solid var(--linea); }
.tabla th {
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
.tabla thead tr { border-bottom-color: var(--linea-fuerte); }
.tabla td:last-child, .tabla th:last-child { text-align: right; }
.tabla tbody tr:last-child { border-bottom-color: var(--linea-fuerte); }
.tabla tbody tr:last-child td { font-weight: 700; }

.remate {
  margin-top: var(--e5);
  font-size: var(--t-20);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.apoyo { color: var(--tinta-media); font-size: var(--t-14); }
.destacado { font-size: var(--t-18); }

/* ------------------------------------------------- Bloque 3: el sistema */

.ficha-sistema {
  display: grid;
  gap: var(--e2);
  margin: 0 0 var(--e4);
  padding: var(--e5);
  background: var(--papel-hueso);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.ficha-sistema .potencia {
  margin: 0;
  font-size: clamp(var(--t-30), 8vw, var(--t-40));
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--primario-texto, var(--tinta));
}
.ficha-sistema .equipo { margin: 0; color: var(--tinta-media); font-size: var(--t-14); }
.ficha-sistema .cobertura { margin: 0; }

/* El bloque que mas confianza genera de todo el documento. Se ve como una
   advertencia honesta, no como letra chica escondida. */
.limitantes {
  margin: var(--e4) 0 0;
  padding: var(--e5);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
}
.limitantes h3 { margin-top: 0; }

/* -------------------------------------- Bloque 4: el momento del documento */

.bloque-central {
  background: var(--primario-claro);
  margin: 0 calc(var(--e5) * -1);
  padding: var(--e7) var(--e5);
  border-bottom: none;
}
.grafico { display: block; margin: var(--e3) 0 var(--e2); overflow: visible; }
.grafico .grilla { stroke: rgba(15, 23, 42, .12); stroke-width: 1; }
.grafico .eje { font-size: 12px; fill: var(--tinta-media); font-variant-numeric: tabular-nums; }
.grafico .curva-sin { fill: none; stroke: var(--peligro); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.grafico .curva-con { fill: none; stroke: var(--primario); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.grafico .corte { stroke: var(--tinta); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .5; }
.grafico .punto-corte { fill: var(--acento); stroke: var(--papel); stroke-width: 3; }
.grafico .etiqueta-corte { font-size: 13px; font-weight: 700; fill: var(--tinta); }
.grafico .etiqueta-fondo { fill: var(--papel); opacity: .9; }

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4);
  font-size: var(--t-14);
  color: var(--tinta-media);
  margin: 0 0 var(--e5);
  max-width: none;
}
.leyenda span { display: inline-flex; align-items: center; gap: var(--e2); }
.marca-sin, .marca-con { display: inline-block; width: 16px; height: 3px; border-radius: 2px; }
.marca-sin { background: var(--peligro); }
.marca-con { background: var(--primario); }

.costo-esperar, .financiacion {
  margin-top: var(--e5);
  padding: var(--e5);
  background: var(--papel);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.costo-esperar h3, .financiacion h3 { margin-top: 0; }
.respaldo { margin-top: var(--e5); font-size: var(--t-14); color: var(--tinta-media); }

/* ------------------------------------------------------ Bloques 5, 6 y 7 */

.lista-check { list-style: none; padding: 0; margin: 0 0 var(--e4); display: grid; gap: var(--e2); }
.lista-check li { position: relative; padding-left: var(--e5); }
/* Glifo tipografico, no emoji: se renderiza igual en el navegador y en el PDF
   y toma el color de la marca. */
.lista-check li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primario-texto, var(--primario));
  font-weight: 700;
}

.lista-simple { padding-left: var(--e5); margin: 0 0 var(--e4); display: grid; gap: var(--e1); }
.lista-simple li::marker { color: var(--tinta-suave); }

.garantias { list-style: none; padding: 0; margin: 0 0 var(--e4); display: grid; gap: var(--e3); }
.garantias li {
  display: grid;
  gap: 2px;
  padding-bottom: var(--e3);
  border-bottom: 1px dashed var(--linea);
}
.garantias li:last-child { border-bottom: none; padding-bottom: 0; }
.garantias .item {
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-media);
}

.caso {
  padding: var(--e5);
  background: var(--papel-hueso);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.caso .quien { font-size: var(--t-18); font-weight: 600; margin-bottom: var(--e4); }
.caso-cifras { display: grid; gap: var(--e3); margin: 0 0 var(--e2); }
.caso-cifras div { display: flex; justify-content: space-between; gap: var(--e4); font-size: var(--t-14); }
.caso-cifras dt { color: var(--tinta-media); }
.caso-cifras dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.foto-caso { width: 100%; border-radius: var(--radio-chico); margin: var(--e4) 0 0; display: block; }
.caso blockquote {
  margin: var(--e4) 0 0;
  padding-left: var(--e4);
  border-left: 3px solid var(--linea-fuerte);
  font-style: italic;
  color: var(--tinta-media);
}

/* ------------------------------------------------------ Bloque 8: el cierre */

.bloque-precio {
  margin-top: var(--e6);
  padding: var(--e6) var(--e5);
  background: var(--tinta);
  color: #e2e8f0;
  border-radius: var(--radio);
  border-bottom: none;
}
.bloque-precio > h2 { color: #ffffff; }
.bloque-precio p { color: #cbd5e1; }
.bloque-precio .precio {
  margin: 0 0 var(--e3);
  font-size: clamp(var(--t-30), 9vw, var(--t-40));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}
.bloque-precio .precio small {
  display: block;
  font-size: var(--t-14);
  font-weight: 400;
  color: #cbd5e1;
  letter-spacing: 0;
}
.bloque-precio .validez strong { color: #ffffff; }
/* La tabla del impuesto y los renglones bonificados viven adentro del bloque oscuro:
   con los colores por defecto salen gris sobre negro. Como todo lo de esta zona, se
   repintan en @media print. */
.bloque-precio .tabla-precio th { color: #cbd5e1; }
.bloque-precio .tabla-precio td { color: #ffffff; }
.bloque-precio .tabla-precio tr { border-bottom-color: rgba(255, 255, 255, .18); }
.bloque-precio .bonificados { color: #cbd5e1; }
.bloque-precio .bonificados strong { color: #ffffff; }
.bloque-precio .bonificados li { border-bottom-color: rgba(255, 255, 255, .18); }
/* Una sola accion primaria en toda la propuesta. */
.siguiente-paso {
  margin: var(--e5) 0 0;
  padding: var(--e4) var(--e5);
  background: var(--acento);
  color: var(--sobre-acento) !important;
  border-radius: var(--radio-chico);
  max-width: none;
}
.siguiente-paso strong { color: inherit; }

.pie { padding: var(--e6) 0 0; color: var(--tinta-media); font-size: var(--t-14); display: grid; gap: var(--e2); }
.pie p { max-width: none; margin: 0; }
.pie .redes { display: flex; flex-wrap: wrap; gap: var(--e4); }
.pie .legal { font-size: var(--t-12); color: var(--tinta-suave); }

.aviso-vencida {
  margin: var(--e4) 0;
  padding: var(--e3) var(--e4);
  background: var(--peligro-papel);
  border: 1px solid var(--peligro-linea);
  border-left: 3px solid var(--peligro);
  border-radius: var(--radio-chico);
  color: #7f1d1d;
}
.aviso-vencida p { max-width: none; }
.aviso-vencida a { color: #7f1d1d; }

.boton-pdf {
  position: fixed;
  right: var(--e4);
  bottom: var(--e4);
  min-height: 48px;
  padding: var(--e3) var(--e5);
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  border-radius: 999px;
  background: var(--primario);
  color: var(--sobre-primario);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--t-14);
  box-shadow: 0 6px 24px rgba(15, 23, 42, .25);
}
.boton-pdf svg { width: 18px; height: 18px; flex: none; }

/* ======================================================= Pantallas internas
   Mismo sistema de tokens: el vendedor y el dueno tienen que sentir que es la
   misma herramienta que la propuesta que mandan.
   ========================================================================= */

.centro { display: grid; place-items: center; min-height: 100dvh; padding: var(--e5); }

.tarjeta {
  display: grid;
  gap: var(--e4);
  padding: var(--e5);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.tarjeta label { display: grid; gap: var(--e1); font-size: var(--t-14); font-weight: 600; color: var(--tinta-media); }
.tarjeta > p { max-width: none; }

input, select, textarea, button { font-family: inherit; font-size: var(--t-16); }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select, textarea {
  width: 100%;
  min-height: 44px;                 /* objetivo tactil */
  padding: var(--e2) var(--e3);
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  font-weight: 400;
}
input[type="color"] { min-height: 44px; padding: var(--e1); }
textarea { min-height: 88px; resize: vertical; line-height: 1.5; }

button, .boton {
  min-height: 44px;
  padding: var(--e2) var(--e5);
  border: 1px solid transparent;
  border-radius: var(--radio-chico);
  background: var(--primario);
  color: var(--sobre-primario);
  font-weight: 600;
  cursor: pointer;
}
button:hover:not(:disabled) { filter: brightness(.94); }
button:disabled { opacity: .45; cursor: not-allowed; }
.secundario { background: var(--papel); color: var(--tinta-media); border-color: var(--linea-fuerte); }

h1 { font-size: var(--t-30); font-weight: 600; letter-spacing: -.02em; margin: var(--e5) 0 var(--e3); text-wrap: balance; }
h2 { font-size: var(--t-20); font-weight: 600; letter-spacing: -.01em; margin: var(--e6) 0 var(--e3); }
.error { color: var(--peligro); font-weight: 600; }
.pista { font-size: var(--t-14); color: var(--tinta-media); margin: var(--e1) 0 0; max-width: var(--medida); }
.pista code { font-size: .92em; background: var(--papel-hueso); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--linea); }
.fila-check { display: flex !important; align-items: center; gap: var(--e2); font-weight: 400 !important; color: var(--tinta) !important; }
.fila-check input { width: auto; min-height: 0; }
.fila-check input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--primario); }

fieldset { border: 1px solid var(--linea); border-radius: var(--radio); margin: 0 0 var(--e4); padding: var(--e5); display: grid; gap: var(--e4); }
legend { padding: 0 var(--e2); font-size: var(--t-12); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-media); }

textarea[name$="__json"] {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: var(--t-14);
  min-height: 220px;
  white-space: pre;
  line-height: 1.45;
}

.admin-secciones { list-style: none; padding: 0; display: grid; gap: var(--e2); }
.admin-secciones a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  text-decoration: none;
  color: var(--tinta);
  font-weight: 600;
  text-transform: capitalize;
  background: var(--papel);
}
.admin-secciones a:hover { border-color: var(--primario); background: var(--papel-hueso); }

/* ------------------------------------------------------------------ /revisar */

.revisar { display: grid; gap: var(--e5); }
.revisar-vista { display: grid; gap: var(--e4); align-content: start; }
label.ajustado { position: relative; }
label.ajustado::after {
  content: "ajustado";
  position: absolute;
  top: 0;
  right: 0;
  font-size: var(--t-12);
  font-weight: 600;
  padding: 1px var(--e2);
  border-radius: 999px;
  background: var(--acento);
  color: var(--sobre-acento);
}
.volver-auto {
  justify-self: start;
  min-height: 32px;
  padding: 2px var(--e3);
  font-size: var(--t-12);
  font-weight: 400;
  background: none;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  color: var(--tinta-media);
}
.contador { display: flex; gap: var(--e2); }
.contador input { flex: 1; text-align: center; font-variant-numeric: tabular-nums; }
.contador button { width: 48px; min-width: 48px; padding: 0; font-size: var(--t-20); }

/* Los textos que la empresa fijo para todas sus propuestas. Se cargan desde el
   editor; aca solo se revisan y se borran. */
.admin-textos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e2); }
.admin-textos li {
  display: grid;
  gap: 2px;
  padding: var(--e2) var(--e3);
  background: var(--papel-hueso);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
}
.admin-textos code { font-size: var(--t-12); color: var(--tinta-suave); }
.admin-textos span { font-size: var(--t-14); }

/* --------------------------------------- El borrador contra lo publicado
   El link del cliente muestra la ultima foto publicada, no lo que el closer
   esta escribiendo. Los tres estados tienen que leerse de un vistazo, porque
   confundirlos es mandar un link creyendo que dice otra cosa. */

.estado-propuesta {
  margin: var(--e4) 0;
  padding: var(--e3) var(--e4);
  background: var(--papel-hueso);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
}
.estado-propuesta p { max-width: none; margin: 0 0 var(--e1); }
.estado-propuesta p:last-child { margin-bottom: 0; }
.estado-propuesta [data-para] { display: none; }
.estado-propuesta[data-estado="borrador"] [data-para="borrador"],
.estado-propuesta[data-estado="publicada"] [data-para="publicada"],
.estado-propuesta[data-estado="sucia"] [data-para="sucia"] { display: block; }
/* Un borrador no tiene link que mostrar: no existe todavia. */
.estado-propuesta[data-estado="borrador"] .link-publico { display: none; }
.estado-propuesta[data-estado="publicada"] { border-left-color: var(--primario); }
.estado-propuesta[data-estado="sucia"] {
  background: #fffbeb;
  border-color: #fde68a;
  border-left-color: #d97706;
}

.marca-sin-publicar {
  display: inline-block;
  font-size: var(--t-12);
  font-weight: 600;
  padding: 1px var(--e2);
  border-radius: 999px;
  background: #fef3c7;
  color: #78350f;
}

/* Borrar una cotizacion: una accion de texto, no un boton que invite a tocarlo. */
.borrar-fila { display: inline; }
.como-enlace {
  min-height: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: inherit;
  font-weight: 400;
  text-decoration: underline;
  cursor: pointer;
}
.como-enlace.peligro { color: var(--peligro); }

/* --------------------------------------------- Los doce meses de la factura
   Doce numeros en un solo renglon se cargan mal y se releen peor: nadie ve que
   puso once hasta que la propuesta dimensiona sobre el promedio. */
.meses-12 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--e2) var(--e3);
  padding: var(--e4);
}
.meses-12 label {
  gap: 2px;
  font-size: var(--t-12);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.meses-12 input { font-size: var(--t-14); text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .meses-12 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------- Importador */

.campo-propuesto { padding: var(--e4) 0; border-bottom: 1px dashed var(--linea); }
.campo-propuesto:last-child { border-bottom: none; }
.campo-propuesto code { font-size: var(--t-12); color: var(--tinta-suave); }
.campo-propuesto.sin-respaldo {
  background: #fffbeb;
  margin: 0 calc(var(--e3) * -1);
  padding: var(--e4) var(--e3);
  border-radius: var(--radio-chico);
}
.marca-sin-respaldo {
  font-size: var(--t-12);
  font-weight: 600;
  padding: 1px var(--e2);
  border-radius: 999px;
  background: #fef3c7;
  color: #78350f;
}
.comparacion { display: grid; gap: var(--e3); margin: var(--e2) 0; }
.comparacion pre {
  margin: 2px 0 0;
  padding: var(--e2) var(--e3);
  border-radius: var(--radio-chico);
  background: var(--papel-hueso);
  border: 1px solid var(--linea);
  font-size: var(--t-14);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
.comparacion pre.propuesto { background: var(--primario-claro); border-color: var(--primario-medio); }
.cita {
  margin: var(--e2) 0 0;
  padding: var(--e2) var(--e4);
  border-left: 3px solid var(--acento);
  font-size: var(--t-14);
  font-style: italic;
  color: var(--tinta-media);
}
.cita .pista { font-style: normal; display: inline; }
#resultados { display: flex; flex-wrap: wrap; gap: var(--e2); }
#resultados button { background: var(--papel); color: var(--tinta); border-color: var(--linea-fuerte); font-weight: 400; }

/* ===================================================================== Responsive */

@media (min-width: 640px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .equipos { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .alcance { grid-template-columns: 1fr 1fr; }
  .pilares { grid-template-columns: 1fr 1fr; }
  .bono-ficha { grid-template-columns: 1fr 1fr; }
  .supuestos dl { grid-template-columns: 1fr 1fr; gap: var(--e4) var(--e5); }
  .datos { grid-template-columns: repeat(3, 1fr); gap: var(--e5); }
  .datos li { display: grid; gap: var(--e1); border-bottom: none; padding-bottom: 0; align-content: start; }
  .datos strong { font-size: var(--t-24); }
  .caso-cifras { grid-template-columns: repeat(3, 1fr); }
  .caso-cifras div { display: grid; gap: 2px; }
}

@media (min-width: 760px) {
  .bloque > h2 { font-size: var(--t-30); }
  .comparacion { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .revisar { grid-template-columns: 360px 1fr; align-items: start; }
}

@media (prefers-reduced-motion: no-preference) {
  a, button, .admin-secciones a { transition: background-color .18s ease, border-color .18s ease, filter .18s ease; }
}

/* ========================================================================= Print */

@media print {
  :root { --e7: 24px; --e8: 32px; }
  body { font-size: 11.5pt; line-height: 1.5; }
  .boton-pdf { display: none !important; }
  .propuesta { max-width: none; padding: 0; }
  /* Un break-inside: avoid sobre un bloque que no entra completo lo manda a la
     pagina siguiente, deja media carilla en blanco y ahi se parte igual. Por eso
     no va sobre .bloque a secas: cuatro de los once miden mas de una carilla (Tu
     sistema mide 2.8) y el avoid ahi no se puede cumplir. Va solo sobre los que
     entran holgados, marcados .bloque-entero en la vista. Si alguno crece y deja
     de entrar, lo avisa el test de cortes de pagina. */
  .bloque { border-bottom: none; padding: var(--e5) 0; }
  .bloque-entero { break-inside: avoid; page-break-inside: avoid; }
  .bloque > h2 { font-size: 16pt; }
  /* Ningun titulo se queda solo al pie de una pagina */
  h1, h2, h3, .fase-nombre, .bono-nombre { break-after: avoid; page-break-after: avoid; }
  .bonos li, .mecanismo, .disponibilidad { break-inside: avoid; page-break-inside: avoid; }
  /* Tres lineas: con dos, una frase partida deja un muñon que se lee como error. */
  p, li { orphans: 3; widows: 3; }
  .bloque-central { background: var(--primario-claro) !important; margin: 0; padding: var(--e5) 0; }
  .costo-esperar, .financiacion, .tarjeta { box-shadow: none; border: 1px solid var(--linea); }
  .caso, .ficha-sistema, .limitantes, .grafico,
  .costo-esperar, .financiacion, .tabla-envoltorio, .desglose-cierre,
  .resumen, .stats li, .garantias li, .incluye li { break-inside: avoid; page-break-inside: avoid; }
  /* El cierre arranca en hoja propia: partido al medio, el recuadro del precio
     queda con el borde abierto y es lo ultimo que se quiere ver mal. */
  .bloque-precio { break-before: page; page-break-before: always; }
  /* La portada es hoja propia. Compartir carilla con el resumen partia la tira
     de stats al medio, y una tapa que no es tapa no abre bien un documento. */
  .portada { margin: 0; padding: 0 0 var(--e5); break-after: page; page-break-after: always; }
  .portada.con-foto { background-image: none !important; color: var(--tinta); }
  .portada.con-foto h1, .portada.con-foto .portada-potencia,
  .portada.con-foto .portada-ficha dd { color: var(--tinta); }
  .portada.con-foto .empresa, .portada.con-foto .portada-fecha,
  .portada.con-foto .portada-promesa, .portada.con-foto .portada-ficha dt,
  .portada.con-foto .portada-direccion,
  .portada.con-foto .portada-aval { color: var(--tinta-media); }
  .portada.con-foto .portada-ficha { border-top-color: var(--linea); }
  .portada.con-foto .portada-aval li::before { background: var(--primario); }
  /* La tapa ocupa la hoja entera y la fecha se ancla abajo: es una tapa, no un
     encabezado que se quedo corto. */
  .portada { position: relative; min-height: 92vh; align-content: start; }
  /* La fecha y el vendedor van al pie de la tapa. En un grid de filas automaticas
     no basta un margin-top: auto, asi que se ancla. */
  .portada-fecha { position: absolute; left: 0; bottom: var(--e5); margin: 0; }
  .portada.con-foto .portada-tipo { color: var(--primario-texto); }
  .stats { break-inside: avoid; page-break-inside: avoid; }
  .diagrama-caja, .tir, .equipo, .ambiental, .recomendaciones, .incentivo, .supuestos { break-inside: avoid; page-break-inside: avoid; }
  .diagrama { min-width: 0; }
  /* En papel el video no se reproduce: queda el poster y el link para verlo. */
  .solo-impresion { display: inline; }
  .prueba, .pilares li, .fases li, .bonos { break-inside: avoid; page-break-inside: avoid; }
  .bonos { background: var(--papel-hueso); border-color: var(--linea-fuerte); }
  /* El bloque del precio se invierte a papel, asi que todo lo que se dibujo para
     fondo oscuro queda blanco sobre blanco. Van los fondos y los bordes tambien,
     no solo el color del texto: las cajas se apoyaban en blancos translucidos. */
  .bonos, .disponibilidad {
    background: var(--papel-hueso);
    border-color: var(--linea);
  }
  .bonos h3, .bono-nombre, .bono-ficha dt, .disponibilidad h3, .bonos-total strong {
    color: var(--tinta);
  }
  .bono-detalle, .bonos-condicion, .bono-ficha dd, .disponibilidad p, .bonos-total {
    color: var(--tinta-media) !important;
  }
  .bono-ancla {
    color: var(--tinta) !important;
    background: var(--papel);
    border-color: var(--linea-fuerte);
  }
  .bonos-condicion, .bonos-total { border-top-color: var(--linea); }
  .bonos li + li { border-top-color: var(--linea); }
  .ambiental { box-shadow: none; border: 1px solid var(--linea); }
  /* En pantalla el bloque del precio va en oscuro y cierra el documento. En papel
     eso es media carilla de tinta: se invierte y el peso lo carga el borde. */
  /* Un recuadro cerrado no entra en una carilla: el bloque lleva el precio, los
     bonos, los hitos de pago y los proximos pasos. Cerrado, se parte y queda el
     borde abierto al pie. Una regla arriba aguanta el corte sin romperse. */
  .bloque-precio {
    background: var(--papel);
    color: var(--tinta);
    border: none;
    border-top: 3px solid var(--tinta);
    border-radius: 0;
    padding: var(--e5) 0 0;
    margin-top: 0;
  }
  .bloque-precio > h2 { color: var(--tinta); }
  .bloque-precio p, .bloque-precio .precio, .bloque-precio .precio small, .bloque-precio .validez strong { color: var(--tinta); }
  .bloque-precio .tabla-precio th { color: var(--tinta-media); }
  .bloque-precio .tabla-precio td { color: var(--tinta); }
  .bloque-precio .tabla-precio tr { border-bottom-color: var(--linea); }
  .bloque-precio .bonificados { color: var(--tinta-media); }
  .bloque-precio .bonificados strong { color: var(--tinta); }
  .bloque-precio .bonificados li { border-bottom-color: var(--linea); }
  .lectura-factura, .ampliaciones, .comparar li, .bonificados,
  .grafico-meses, .bloque-cierre, .tabla-precio { break-inside: avoid; page-break-inside: avoid; }
  .ampliaciones { background: var(--papel-hueso) !important; }
  a { text-decoration: none; }
}

/* ----------------------------------------- Specs y ficha tecnica del equipo */

.specs { margin: var(--e2) 0 0; display: grid; gap: var(--e1); }
.specs div { display: flex; justify-content: space-between; gap: var(--e3); font-size: var(--t-12); }
.specs dt { color: var(--tinta-suave); }
.specs dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.ficha {
  justify-self: start;
  margin-top: var(--e3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px var(--e3);
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  font-size: var(--t-12);
  font-weight: 600;
  text-decoration: none;
  background: var(--papel);
}
.ficha svg { width: 14px; height: 14px; flex: none; }
.ficha:hover { border-color: var(--primario); }

/* ============================================================ AGREGADOS */

/* Que vino a resolver el proyecto. Va antes del resumen porque al que se le corta
   la luz no le encabeza el ahorro. */
.portada-direccion {
  margin: calc(var(--e2) * -1) 0 var(--e4);
  color: var(--tinta-media);
  font-size: var(--t-16);
}
.portada.con-foto .portada-direccion { color: #cbd5e1; }

.objetivo {
  margin: 0 0 var(--e4);
  font-size: var(--t-18);
  font-weight: 600;
  line-height: 1.45;
  text-wrap: pretty;
  color: var(--primario-texto, var(--tinta));
}

/* Lo que dice la factura, textual. Se ve como una transcripcion, no como un calculo. */
.lectura-factura {
  margin: var(--e4) 0 0;
  padding: var(--e4) var(--e5);
  background: var(--papel-hueso);
  border-left: 3px solid var(--linea-fuerte);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.lectura-factura h3 { margin-top: 0; }
.lectura-factura dl { margin: 0; display: grid; gap: var(--e2); }
.lectura-factura div { display: flex; justify-content: space-between; gap: var(--e3); font-size: var(--t-14); }
.lectura-factura dt { color: var(--tinta-media); }
.lectura-factura dd { margin: 0; font-weight: 600; text-align: right; }
.lectura-factura .apoyo { margin: var(--e3) 0 0; }

/* --------------------------------------- El año abierto en doce meses */

.grafico-meses .barra-consumo { fill: var(--tinta-suave); }
.grafico-meses .barra-genera { fill: var(--acento); }
.marca-consumo, .marca-genera {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}
.marca-consumo { background: var(--tinta-suave); }
.marca-genera { background: var(--acento); }

/* El contrapeso de los limitantes: no resuelve todo, pero crece. */
.ampliaciones {
  margin: var(--e4) 0 0;
  padding: var(--e5);
  background: var(--primario-claro);
  border-radius: var(--radio);
}
.ampliaciones h3 { margin-top: 0; }
.ampliaciones p { margin-bottom: var(--e3); }

/* ------------------------------------------------ Formas de pago */

.tabla-financiacion th[scope="row"] { font-weight: 600; }
.tabla-financiacion .tna {
  display: block;
  font-size: var(--t-12);
  font-weight: 400;
  color: var(--tinta-media);
  text-transform: none;
  letter-spacing: 0;
}
.tabla-financiacion .recargo {
  display: block;
  font-size: var(--t-12);
  font-weight: 400;
  color: var(--tinta-media);
}
.tabla-financiacion .monto { white-space: nowrap; }

/* ------------------------------- Como comparar con los otros presupuestos */

/* No compara contra nadie: fija el criterio con el que se leen todos. Por eso se
   ve como una lista de preguntas para llevarse, no como una tabla comparativa. */
.comparar { margin: 0; padding-left: var(--e5); display: grid; gap: var(--e4); }
.comparar li::marker { color: var(--primario-texto, var(--primario)); font-weight: 700; }
.comparar-pregunta { margin: 0; font-weight: 600; text-wrap: pretty; }
.comparar-porque { margin: var(--e1) 0 0; color: var(--tinta-media); font-size: var(--t-14); }

/* --------------------------------------------- Precio: IVA y bonificados */

.tabla-precio { margin-top: var(--e4); }
.tabla-precio th[scope="row"] { font-weight: 400; text-transform: none; letter-spacing: 0; }
.tabla-precio .fila-total th[scope="row"] { font-weight: 700; }

.bonificados {
  list-style: none;
  padding: 0;
  margin: var(--e4) 0 0;
  display: grid;
  gap: var(--e2);
  font-size: var(--t-14);
}
.bonificados li {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  padding-bottom: var(--e2);
  border-bottom: 1px solid var(--linea);
}
.bonificados strong { white-space: nowrap; }

/* ------------------------------------------------------- El cierre */

.bloque-cierre { border-bottom: none; }
.bloque-cierre p { font-size: var(--t-18); line-height: 1.55; text-wrap: pretty; }
.cierre-decision { color: var(--tinta-media); font-size: var(--t-16) !important; }

/* La fila que vende del equipo. Las specs son para el que verifica; esta, para el
   que decide: dice en castellano por que ese equipo y no otro. */
.ventaja {
  margin: var(--e2) 0 0;
  font-size: var(--t-14);
  line-height: 1.45;
  color: var(--primario-texto, var(--tinta));
  font-weight: 600;
  text-wrap: pretty;
}

/* ===================================================================== Edicion */
/* Solo existe adentro del iframe de /revisar. La propuesta que ve el cliente se
   renderiza sin la clase .editando y sin ninguno de estos nodos. */

.editando { padding-bottom: 72px; }

.editando [data-tx], .editando [data-sec] {
  outline: 1px dashed transparent;
  outline-offset: 3px;
  border-radius: 3px;
  transition: outline-color .12s, background-color .12s;
}
.editando [data-tx]:hover, .editando [data-sec]:hover { outline-color: var(--acento); }
.editando [data-tx]:focus, .editando [data-sec]:focus {
  outline: 2px solid var(--acento);
  background: color-mix(in srgb, var(--acento) 8%, transparent);
}
/* Lo que ya se toco queda marcado: sin esto no hay forma de saber que se cambio
   respecto del texto que arma la app. */
.editando .tx-editado { box-shadow: inset 0 -2px 0 var(--acento); }

/* Una frase editada que llevaba numeros adentro, y cuyos numeros ya cambiaron. Lo
   escrito no se toca —es del closer— pero tiene que gritar antes de publicar: una
   propuesta que dice dos precios distintos no se recupera con una aclaracion. */
.editando .tx-viejo {
  box-shadow: inset 0 -2px 0 #dc2626;
  background: rgba(220, 38, 38, .10);
}

/* Los rotulos del diagrama son texto SVG: no se escriben encima, se abren en un
   cuadrito. El cursor lo dice, porque una caja que se ilumina y no se puede escribir
   es peor que una que no se ilumina. */
.editando text[data-tx] { cursor: pointer; }
.editando text[data-tx]:hover { text-decoration: underline; }
.editando text[data-tx-editado] {
  text-decoration: underline;
  text-decoration-color: var(--acento);
  text-decoration-thickness: 2px;
}

.barra-edicion {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 10px 14px;
  background: #0f172a; color: #f8fafc;
  font: 500 13px/1.3 system-ui, sans-serif;
  z-index: 50;
}
.barra-estado { flex: 1 1 140px; min-width: 0; }
/* La barra es una sola fila: partida en tres tapa media propuesta. */
.barra-edicion select { flex: 0 1 280px; min-width: 0; }
.barra-edicion button { flex: 0 0 auto; white-space: nowrap; }
.barra-estado.mal { color: #fca5a5; }
.barra-edicion button, .barra-edicion select {
  font: inherit; padding: 5px 10px; border-radius: 6px;
  border: 1px solid #334155; background: #1e293b; color: inherit; cursor: pointer;
}
.barra-edicion button:hover { background: #334155; }

.sec-acciones { display: flex; gap: 8px; margin-top: 12px; }
.sec-acciones button, .sec-acciones select {
  font: 500 12px/1.3 system-ui, sans-serif; padding: 4px 8px;
  border: 1px solid var(--linea); border-radius: 6px; background: #fff; cursor: pointer;
}

/* Una seccion propia se ve como cualquier otra en la propuesta final. */
.bloque-propio p { max-width: 62ch; }

@media print {
  .barra-edicion, .sec-acciones { display: none !important; }
  .editando { padding-bottom: 0; }
  .editando [data-tx], .editando [data-sec] { outline: none; box-shadow: none; }
  .editando text[data-tx] { text-decoration: none; }
}

/* El editor de textos adentro de /revisar */
.editor-textos { margin-top: var(--e7); }
.editor-cabeza { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.editor-cabeza h2 { flex: 1 1 auto; }
.editor-cabeza button {
  font: 500 13px/1.3 system-ui, sans-serif; padding: 6px 12px;
  border: 1px solid var(--linea); border-radius: 6px; background: #fff; cursor: pointer;
}
#vista-edicion {
  width: 100%; height: 78vh; min-height: 480px;
  border: 1px solid var(--linea); border-radius: 8px; background: #fff;
}