/* ============================================================================
   Cotización permanente (/cotizacion/{token}).

   REGLA DURA DE ESTE ARCHIVO: nada de CSS Grid.

   En la fase 2 esta misma plantilla se convierte en el PDF adjunto con WeasyPrint, que soporta
   flexbox desde la v61 pero NO soporta Grid. Escribirlo con Grid hoy significaría rehacer el
   diseño entero después. Es la decisión más barata de tomar ahora y la más cara de corregir
   luego, así que: flujo normal, flex y tablas. Nada más.

   Tokens alineados con el Manual de Identidad (socialmedia/brand/tokens.json) y con lo que usa
   lacasamia.co: Poppins, navy #24305E, tinta #0B2986, acento #FFA522.
   ============================================================================ */

:root {
  --tinta: #0B2986;
  --navy: #24305E;
  --papel: #FFFFFF;
  --fondo: #F4F6FA;
  --suave: #F7F8FB;
  --borde: #DEE2EA;
  --texto: #24305E;
  --apagado: #555F72;
  /* Mismos valores y mismo motivo que en `calc.css`: #8E97A8 daba 2.77 sobre --suave y 2.94
     sobre --papel, cuando WCAG AA pide 4.5. Aquí importa más todavía que en la calculadora:
     esta es la página que el cliente abre desde el correo, la que puede acabar impresa, y la
     que lee alguien decidiendo si acepta una propuesta económica. #646E82 da 4.83 y 5.13. */
  --tenue: #646E82;
  --acento: #FFA522;
  --acento-suave: #FFF4DD;
  /* 4.19 sobre --exito-suave a tamaño pequeño; por debajo del umbral. #136B41 da 5.86. */
  --exito: #136B41;
  --exito-suave: #E6F6EE;
  --sombra: 0 8px 30px rgba(36, 48, 94, .08);
  --radio-l: 20px;
  --radio-m: 14px;
  --radio-s: 9px;
}

/* La cotización es un documento: se lee igual en claro y en oscuro, y se imprime en papel
   blanco. Por eso NO lleva variante oscura, a diferencia de la calculadora. */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: clamp(16px, 4vw, 40px) 16px;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.num { font-variant-numeric: tabular-nums; }

.doc {
  max-width: 860px;
  margin-inline: auto;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra);
  overflow: hidden;
}

/* ---------------------------------------------------------------- cabecera */

.doc-head {
  background: var(--navy);
  color: #fff;
  padding: clamp(20px, 4vw, 34px);
}

/* El logo oficial entero. Antes era el isotipo suelto más "LaCasaMía" escrito en Poppins, que
   es reconstruir el logo con otras letras.

   Medidas explícitas y `contain` en vez de `aspect-ratio`: en la fase 2 esta hoja se convierte en
   el PDF con WeasyPrint, y no conviene apostar a qué propiedades modernas soporta. La proporción
   es la del archivo (4.186), así que la caja no recorta ni deforma. */
.marca {
  width: 142px; height: 34px; margin-bottom: 18px;
  background: url("/static/img/marca-negativo.png") left center / contain no-repeat;
}

/* Aquí había un `.eyebrow` con "Propuesta de servicios" encima del <h1>. Retirado: el titular
   ya dice qué es esto ("Tu propuesta de venta"), así que la línea de arriba solo repetía en
   letra pequeña lo que venía en grande justo debajo. */

.doc-head h1 {
  margin: 0 0 20px;
  font-size: clamp(1.35rem, 3.6vw, 1.9rem);
  line-height: 1.22;
  letter-spacing: -.01em;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 132px;
  padding: 9px 13px;
  background: rgba(255, 255, 255, .1);
  border-radius: var(--radio-s);
}

/* 0.64rem son 10.24px: por debajo del piso de 11px para texto funcional, y estos chips llevan la
   etiqueta de lo que el cliente está mirando (CLIENTE, LOCALIDAD, ÁREA). Con versalitas y
   `letter-spacing` ese tamaño es aún más duro de leer, y esta página acaba impresa.
   0.7rem son 11.2px. La opacidad sube de .62 a .78 por lo mismo: sobre el navy de la cabecera,
   .62 dejaba la etiqueta casi tan tenue como el fondo. */
.chip-k {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}

.chip-v { font-size: .92rem; font-weight: 600; }

/* ----------------------------------------------------------------- bloques */

.bloques {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: clamp(16px, 3vw, 26px);
}

/* Dos columnas por flex-basis, no por Grid: es lo que WeasyPrint entiende. */
.bloque {
  flex: 1 1 340px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  overflow: hidden;
  break-inside: avoid;
  page-break-inside: avoid;
}

.bloque-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 11px 14px;
  background: var(--suave);
  border-bottom: 1px solid var(--borde);
  font-weight: 600;
  font-size: .95rem;
}

.linea {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--borde);
  font-size: .87rem;
}

.linea:last-child { border-bottom: none; }
.linea-desc { color: var(--apagado); }
.linea-val { font-weight: 600; white-space: nowrap; }

.vacio { padding: 18px; color: var(--apagado); }

/* ---------------------------------------------------------------- totales */

.totales {
  margin: 0 clamp(16px, 3vw, 26px) clamp(16px, 3vw, 26px);
  padding: 18px clamp(14px, 3vw, 22px);
  background: var(--suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  break-inside: avoid;
  page-break-inside: avoid;
}

.tot-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  font-size: .93rem;
  color: var(--apagado);
  padding: 3px 0;
}

.tot-row .num { font-weight: 600; color: var(--texto); white-space: nowrap; }

.tot-sep { height: 1px; background: var(--borde); margin: 10px 0; }

.tot-final { font-size: 1.06rem; color: var(--texto); font-weight: 600; }
.tot-final .num { font-size: 1.32rem; font-weight: 700; color: var(--tinta); }

.tot-equiv { margin: 2px 0 0; text-align: right; font-size: .85rem; font-weight: 600; color: var(--tinta); }

.ahorro {
  margin: 14px 0 0;
  padding: 10px 13px;
  background: var(--exito-suave);
  border-radius: var(--radio-s);
  color: var(--exito);
  font-size: .86rem;
  font-weight: 500;
}

/* ------------------------------------------- condiciones por plazo (comercial) */

/* Una <table> de verdad y no flex: son datos tabulares de cuatro columnas que tienen que
   alinear, y una tabla es además lo que WeasyPrint pinta sin sorpresas. */
.plazo {
  margin: 0 clamp(16px, 3vw, 26px) clamp(16px, 3vw, 26px);
  padding: 18px clamp(14px, 3vw, 22px);
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  break-inside: avoid;
  page-break-inside: avoid;
}

.plazo-titulo {
  margin: 0 0 8px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta);
}

.plazo-intro { margin: 0 0 12px; font-size: .87rem; color: var(--apagado); }

.plazo-tabla { width: 100%; border-collapse: collapse; font-size: .87rem; }

.plazo-tabla th,
.plazo-tabla td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--borde);
  text-align: right;
  white-space: nowrap;
}

.plazo-tabla th:first-child,
.plazo-tabla td:first-child { text-align: left; padding-left: 0; }
.plazo-tabla th:last-child,
.plazo-tabla td:last-child { padding-right: 0; }

.plazo-tabla thead th {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tenue);
  white-space: normal;
}

.plazo-tabla tbody th { font-weight: 500; color: var(--texto); }
.plazo-tabla td:last-child { font-weight: 600; color: var(--texto); }
.plazo-tabla td { color: var(--apagado); }

.plazo-adicional th,
.plazo-adicional td { border-bottom: none; color: var(--apagado); }
.plazo-adicional td { text-align: left; white-space: normal; }

.plazo-nota { margin: 12px 0 0; font-size: .78rem; line-height: 1.45; color: var(--apagado); }

/* En un móvil de 360px las cuatro columnas solo caben si los textos pueden partirse ("0,53 /
   cánones", "Más de 5 / años"). El valor en pesos sí se queda en una línea: partido se lee mal. */
@media (max-width: 480px) {
  .plazo { padding-inline: 12px; }
  .plazo-tabla { font-size: .72rem; }
  .plazo-tabla thead th { font-size: .62rem; letter-spacing: .03em; }
  .plazo-tabla th, .plazo-tabla td { padding-inline: 2px; white-space: normal; }
  .plazo-tabla td:last-child { white-space: nowrap; }
}

/* 320px (iPhone SE de primera generación): la página lleva más márgenes que la calculadora. */
@media (max-width: 340px) {
  .plazo { margin-inline: 8px; padding-inline: 10px; }
  .plazo-tabla { font-size: .68rem; }
}

/* ---------------------------------------------------------- notas y acciones */

.nota {
  margin: 0 clamp(16px, 3vw, 26px) 14px;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--apagado);
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 0 clamp(16px, 3vw, 26px) clamp(18px, 3vw, 26px);
}

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
}

.btn-wa { background: #25D366; color: #06351A; }
.btn-ghost { background: transparent; color: var(--tinta); border: 1px solid var(--borde); }
.btn:hover { filter: brightness(1.05); }

.doc-pie {
  padding: 16px clamp(16px, 3vw, 26px) 22px;
  border-top: 1px solid var(--borde);
  background: var(--suave);
}

.doc-pie .nota { margin-inline: 0; }

.meta { margin: 6px 0 0; font-size: .74rem; color: var(--tenue); line-height: 1.5; }
.meta a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}