/* ===========================================================================
   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); }
/* Alto fijo y no maximo: el navegador reserva el lugar antes de bajar la imagen y la tapa
   no salta cuando llega el logo. */
.portada .logo { height: 44px; width: auto; max-width: 240px; object-fit: contain; object-position: left center; }
.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);
}
/* La factura va primero y a todo el ancho: es el numero que el cliente reconoce, y en
   media columna la flecha partia el antes y el despues en dos renglones. */
.portada-ficha .ficha-factura { grid-column: 1 / -1; }
.portada-ficha .ficha-factura dd { font-size: var(--t-24); letter-spacing: -.02em; }
.portada-ficha dd small {
  font-size: var(--t-14);
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--tinta-media);
}
.portada.con-foto .portada-ficha dd small { color: #cbd5e1; }
.portada-pdf { margin: var(--e2) 0 0; font-size: var(--t-14); }
.portada.con-foto .portada-pdf a { color: #e2e8f0; }
.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%; 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 total de esta tabla es la factura que queda, y va en el <tfoot>. La regla general
   de `.tabla` pone en negrita la ultima fila del cuerpo porque en las otras tablas esa
   fila es el total; aca es el cargo fijo, y en negrita se lee como el cierre de la suma
   —que es justo la lectura que rompia el bloque—. */
.tabla-desglose tbody tr:last-child td { font-weight: 600; }
.tabla-desglose tfoot tr { border-bottom: none; }
.tabla-desglose tfoot th, .tabla-desglose tfoot td { font-weight: 700; color: var(--tinta); }
.tabla-desglose tfoot .por-que { font-weight: 400; }
/* 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; }
/* Adentro de la caja blanca los numeros van sueltos: una tarjeta dentro de otra no suma
   jerarquia, solo bordes. */
.stats-ambiental { margin-top: var(--e3); gap: var(--e4); }
.stats-ambiental li { background: none; border: 0; padding: 0; }

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

/* La promesa la escribe la empresa y a veces son nueve renglones: en negrita de 18 le
   peleaba la tapa al nombre del cliente y empujaba los numeros fuera de la pantalla. */
.portada-promesa {
  margin: var(--e4) 0 0;
  max-width: 52ch;
  font-size: var(--t-16);
  line-height: 1.55;
  font-weight: 400;
  color: var(--tinta-media);
  text-wrap: pretty;
}
.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: 1px solid var(--linea);
  border-radius: var(--radio);
}
.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. */

/* El mecanismo abre el bloque como una tesis, no como otra caja: regla de marca arriba,
   la frase grande y nada de fondo. Pilares, cita y mecanismo llevaban la misma raya
   lateral y se leian como tres avisos iguales. */
.mecanismo {
  margin: 0 0 var(--e5);
  padding: var(--e4) 0 0;
  border-top: 2px solid var(--primario);
}
.mecanismo p { max-width: none; margin: 0 0 var(--e2); }
.mecanismo p:last-child { margin-bottom: 0; }
.mecanismo-lead { font-size: var(--t-20); line-height: 1.4; letter-spacing: -.01em; text-wrap: pretty; }
.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-radius: var(--radio);
  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 thead th {
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
/* El encabezado de fila es el concepto, y debajo suele ir su explicacion: en versalitas
   de 12 px se leia como un grito y "kWh" salia "KWH", que es otra unidad. */
.tabla tbody th, .tabla tfoot th {
  font-size: var(--t-14);
  font-weight: 600;
  color: var(--tinta);
}
.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; }

/* Un tema por punto, con el rotulo adelante. Corridos dentro de un solo parrafo, los
   cinco limitantes se leen como un descargo legal; separados se leen como lo que son,
   que es la empresa diciendo de entrada lo que la solar no hace. */
.puntos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); }
.puntos li { margin: 0; max-width: 62ch; }
.puntos strong { display: block; color: var(--tinta); }
@media (min-width: 40rem) {
  /* En pantalla ancha el rotulo entra en la misma linea sin partir la frase. */
  .puntos strong { display: inline; margin-right: .25em; }
}

/* -------------------------------------- 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; }

/* ------------------------------------------------------ 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; }

/* El boton que acompaña la lectura: aceptar, escribirle al vendedor o, si no hay ninguna
   de las dos, bajar el PDF. En el telefono va de lado a lado, abajo, donde llega el
   pulgar; en pantalla grande es una pastilla en la esquina. */
.cta-flotante {
  position: fixed;
  z-index: 40;
  left: var(--e4);
  right: var(--e4);
  bottom: calc(var(--e3) + env(safe-area-inset-bottom, 0px));
  min-height: 52px;
  padding: var(--e3) var(--e5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  border-radius: 999px;
  background: var(--primario);
  color: var(--sobre-primario);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--t-16);
  box-shadow: 0 6px 24px rgba(15, 23, 42, .25);
}
.cta-flotante:hover { filter: brightness(.94); }
.cta-flotante svg { width: 20px; height: 20px; flex: none; }
.cta-flotante.oculto { opacity: 0; transform: translateY(12px); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .cta-flotante { transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1), filter .18s ease; }
}
@media (min-width: 640px) {
  .cta-flotante { left: auto; right: var(--e5); bottom: var(--e5); min-height: 48px; font-size: var(--t-14); }
}
/* Lo ultimo del documento no queda debajo del boton, y lo que se enfoca con el teclado
   tampoco. */
body.propuesta:has(> .cta-flotante) { padding-bottom: 104px; }
html:has(.cta-flotante) { scroll-padding-bottom: 88px; }

/* Saltar la tapa, para el que navega con teclado o lector de pantalla. */
.saltar {
  position: absolute;
  left: var(--e4);
  top: -100px;
  z-index: 60;
  padding: var(--e2) var(--e4);
  border-radius: var(--radio-chico);
  background: var(--tinta);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}
.saltar:focus { top: var(--e4); }

/* Cuanto falta. No es un indice a proposito: el documento esta ordenado para que el
   precio llegue despues de los numeros que lo explican, y un indice invita a saltar
   directo al precio. La barra solo dice cuanto queda. */
.progreso-lectura { display: none; }
@supports (animation-timeline: scroll()) {
  .progreso-lectura {
    display: block;
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 45;
    height: 3px;
    background: var(--primario);
    transform-origin: 0 50%;
    transform: scaleX(0);
    animation: avance-lectura linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes avance-lectura { to { transform: scaleX(1); } }
}

/* ======================================================= 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); }

/* min-inline-size: un fieldset mide por defecto lo que su contenido mas ancho, y con un
   <code> largo o un JSON en el textarea /admin/tecnico medía 670 px en un telefono. */
fieldset { border: 1px solid var(--linea); border-radius: var(--radio); margin: 0 0 var(--e4); padding: var(--e5); display: grid; gap: var(--e4); min-inline-size: 0; }
.tarjeta > * { min-width: 0; }
/* El selector de archivos de Chrome trae ancho propio ("Elegir archivo · Ningún archivo
   seleccionado") y empujaba las fichas de equipos fuera de la pantalla. */
input[type="file"] { width: 100%; max-width: 100%; min-width: 0; font-size: var(--t-14); }
.pista code { overflow-wrap: anywhere; }
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; }
.meses-12-resumen {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--t-14);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.meses-12-resumen:empty { display: none; }
@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); }
  .puntos li { break-inside: avoid; page-break-inside: avoid; }
  .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); }
  /* En papel la ficha del bono va abierta: el "Por qué suma" no se puede tocar. */
  .bono-mas > summary { display: none; }
  .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. */
/* Borde punteado de ticket: es una transcripcion de la factura, no un calculo. */
.lectura-factura {
  margin: var(--e4) 0 0;
  padding: var(--e4) var(--e5);
  background: var(--papel-hueso);
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--radio);
}
.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); }
/* El acento suele ser un amarillo: sobre blanco no llega a 3:1 y la barra se perdia. El
   borde en su version oscura la recorta sin cambiar el color de la marca. */
.grafico-meses .barra-genera { fill: var(--acento); stroke: var(--acento-texto); stroke-width: 1; }
.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); box-shadow: inset 0 0 0 1px var(--acento-texto); }

/* 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);
}

/* Las ranuras que no se pueden fijar para todas las propuestas: las que llevan los
   numeros de cada cotizacion y las que salen de otra seccion del panel. Solo existen en
   la muestra de Configuración. Se ven distintas de entrada —una caja que se ilumina
   igual que las demas y no se deja escribir es peor que una que no se ilumina— pero se
   hacen clic, y ahi la barra dice por que no y donde si. */
.editando .tx-fijo {
  cursor: help;
  background: rgba(100, 116, 139, .12);
  box-shadow: inset 0 -1px 0 rgba(100, 116, 139, .55);
}
.editando .tx-fijo:hover { outline-color: #64748b; }

/* Las que salen de otra seccion del panel: se escriben igual, pero lo que se guarda va a
   su campo del config y no al texto de la plantilla. */
.editando .tx-config {
  background: rgba(37, 99, 235, .10);
  box-shadow: inset 0 -1px 0 rgba(37, 99, 235, .45);
}
.editando .tx-config:hover { outline-color: #2563eb; }

/* Las que mezclan palabras con las cifras de la cotizacion: se escriben, pero lo que se
   guarda es el cambio de palabras. Se ven distintas porque se comportan distinto. */
.editando .tx-palabras {
  background: rgba(245, 158, 11, .12);
  box-shadow: inset 0 -1px 0 rgba(217, 119, 6, .55);
}
.editando .tx-palabras:hover { outline-color: #d97706; }

/* 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, .barra-ir {
  font: inherit; padding: 5px 10px; border-radius: 6px;
  border: 1px solid #334155; background: #1e293b; color: inherit; cursor: pointer;
}
.barra-edicion button:hover, .barra-ir:hover { background: #334155; }
.barra-ir { flex: 0 0 auto; white-space: nowrap; text-decoration: none; }

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

/* ============================================ Lo que copiamos de OpenSolar
   La imagen del techo, los adicionales de obra, aceptar y firmar, la seña y el
   seguimiento del closer. Todo tiene que salir bien en el PDF.
   ========================================================================= */

.imagen-techo { margin: var(--e4) 0 var(--e5); }
.imagen-techo img {
  display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain;
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel-hueso);
}
.imagen-techo figcaption { margin-top: var(--e2); font-size: var(--t-14); color: var(--tinta-media); }

.adicionales-obra { margin: var(--e5) 0; }
.adicionales-obra h3 { font-size: var(--t-16); }

.bloque-aceptar .aceptada { font-size: var(--t-18); }
.bloque-aceptar .firma,
.seguimiento .firma {
  display: block; width: 100%; max-width: 320px; height: auto;
  border-bottom: 1px solid var(--linea-fuerte); margin: var(--e3) 0;
}
.form-aceptar { max-width: 560px; }
.form-aceptar fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--e4); }
.form-aceptar label { display: grid; gap: var(--e1); font-size: var(--t-14); font-weight: 600; color: var(--tinta-media); }
.form-aceptar input:not([type="checkbox"]) {
  min-height: 44px; padding: var(--e2) var(--e3); font: inherit; color: var(--tinta);
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico); background: var(--papel);
}
.firma-caja { display: grid; gap: var(--e1); }
.firma-rotulo { font-size: var(--t-14); font-weight: 600; color: var(--tinta-media); }
.firma-lienzo {
  width: 100%; height: auto; aspect-ratio: 3 / 1; touch-action: none; cursor: crosshair;
  border: 1px dashed var(--linea-fuerte); border-radius: var(--radio-chico); background: #fff;
}
.firma-acciones { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e5); }
.firma-acciones .como-enlace {
  min-height: 32px;
  padding: var(--e1) 0;
  color: var(--primario-texto, var(--primario));
  font-size: var(--t-14);
}
.form-aceptar-error { color: var(--peligro); font-weight: 600; margin: 0; }

.sena { margin-top: var(--e5); padding: var(--e4) var(--e5); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel-hueso); }
.sena h3 { margin-top: 0; }
.boton-sena { display: inline-block; text-decoration: none; margin-top: var(--e2); }

/* Pantallas internas */
.seguimiento { margin-top: var(--e6); }
.seguimiento h3 { margin-top: var(--e5); }
.seguimiento .en-linea { display: flex; flex-wrap: wrap; align-items: end; gap: var(--e3); }
.seguimiento .en-linea label { flex: 1 1 280px; }
.imagen-techo-previa { display: block; max-width: 100%; max-height: 240px; border-radius: var(--radio-chico); margin: var(--e2) 0; }
.adicionales { border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: var(--e3); display: grid; gap: var(--e2); }
/* En el listado, cada dato de la columna en su renglon: fecha, lectura, vencimiento. */
.tabla td .pista, .tabla th .pista, .tabla td .marca-sin-publicar { display: block; }
/* En el listado la ultima fila es la propuesta mas vieja, no un total: sin esto salia en
   negrita, como si importara mas que las otras. */
.tabla-lista tbody tr:last-child { border-bottom-color: var(--linea); }
.tabla-lista tbody tr:last-child td { font-weight: 400; }
.estado-comercial { font-size: var(--t-12); font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--papel-hueso); border: 1px solid var(--linea); white-space: nowrap; }
.estado-comercial[data-estado="aceptada"], .estado-comercial[data-estado="sena"] { background: var(--primario); color: var(--sobre-primario); border-color: transparent; }
.estado-comercial[data-estado="vencida"] { background: var(--peligro-papel); color: var(--peligro); border-color: var(--peligro-linea); }

/* --------------------------------------------- El grafico y el diagrama del telefono
   Cada uno sale dos veces (lib/grafico.js, `enDosAnchos`): el ancho para la pantalla
   grande y el PDF, el angosto para el telefono. Se muestra uno solo. */
.grafico.solo-angosto, .diagrama.solo-angosto { display: none; }
.diagrama-angosto { min-width: 0; max-width: 400px; margin: 0 auto; }
.diagrama-angosto .dg-rotulo { font-size: 14px; }
.diagrama-angosto .dg-flujo-rotulo { font-size: 12px; }
@media (max-width: 639px) {
  .grafico.solo-ancho, .diagrama.solo-ancho { display: none; }
  .grafico.solo-angosto, .diagrama.solo-angosto { display: block; }
  .diagrama-caja { overflow: visible; }
}

/* ------------------------------------------------ Bonos: la ficha que se abre */
.bono-ficha.bono-ficha-primero { grid-template-columns: 1fr; }
.bono-mas { margin-top: var(--e1); }
.bono-mas > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 32px;
  font-size: var(--t-14);
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  list-style: none;
}
.bono-mas > summary::-webkit-details-marker { display: none; }
.bono-mas > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.bono-mas[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.bono-mas > .bono-ficha { margin-top: var(--e2); }

/* ------------------------------------------- El listado, en el telefono
   Cuatro columnas no entran en 390 px: las acciones quedaban fuera de la pantalla.
   Cada propuesta pasa a ser una ficha, con el rotulo delante de cada dato. */
@media (max-width: 639px) {
  .tabla-lista thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .tabla-lista, .tabla-lista tbody, .tabla-lista tr, .tabla-lista th, .tabla-lista td { display: block; }
  .tabla-lista tr { padding: var(--e3) 0; }
  .tabla-lista th, .tabla-lista td, .tabla-lista td:last-child { padding: var(--e1) 0; text-align: left; }
  .tabla-lista td[data-rotulo]::before {
    content: attr(data-rotulo) ": ";
    font-size: var(--t-14);
    color: var(--tinta-media);
  }
}

@media print {
  .grafico.solo-angosto, .diagrama.solo-angosto { display: none !important; }
  .grafico.solo-ancho, .diagrama.solo-ancho { display: block !important; }
  .cta-flotante, .saltar, .progreso-lectura, .portada-pdf { display: none !important; }
  .portada.con-foto .portada-ficha dd small { color: var(--tinta-media); }
  .form-aceptar, .boton-sena { display: none !important; }
  .imagen-techo img { max-height: 380px; }
  .bloque-aceptar { break-inside: avoid; }
}