/* Documento de cotización — estructura basada en la plantilla SERIN,
   recoloreada y retipografiada según el Manual de Marca v1.0 */

:root {
  /* Escala tipográfica del documento — un único set de tamaños reutilizado
     en toda la cotización para que la jerarquía sea predecible. */
  --docfs-1: 8pt;     /* pie de página, notas mínimas */
  --docfs-2: 9pt;     /* etiquetas de columna, antetítulos pequeños */
  --docfs-3: 9.5pt;   /* texto de tabla, listas, párrafos de apoyo */
  --docfs-4: 10pt;    /* texto de cuerpo estándar */
  --docfs-5: 10.5pt;  /* datos enfatizados, totales de fila */
  --docfs-6: 11pt;    /* etiquetas de subtotal, filas de resumen, encabezados de bloque */
  --docfs-7: 12pt;    /* rótulo TOTAL */
  --docfs-8: 12.5pt;  /* bandas de sección, nombre de empresa/asesor */
  --docfs-9: 14pt;    /* títulos de sección mayor */
  --docfs-10: 15pt;   /* objeto de la cotización */
  --docfs-11: 16pt;   /* valor del total general */
  --docfs-12: 27pt;   /* título "COTIZACIÓN" */

  /* Escala de espaciado (rítmica, base 4) para separar bloques del documento.
     docsp-6 es el único valor usado para abrir una sección mayor: mantiene
     el mismo "aire" antes de cada bloque en todo el documento. */
  --docsp-1: 4px;
  --docsp-2: 8px;
  --docsp-3: 12px;
  --docsp-4: 16px;
  --docsp-5: 20px;
  --docsp-6: 28px;
  --docsp-7: 36px;
}

.doc-scroll {
  overflow-x: auto;
  padding-bottom: 8px;
}
.doc-page {
  background: #fff;
  width: 850px;
  min-width: 850px;
  margin: 0 auto 28px;
  padding: 0.6in;
  font-family: var(--font-texto);
  color: var(--tinta-texto);
  box-shadow: 0 1px 4px rgba(15,47,79,0.08), 0 0 0 1px var(--linea-suave);
}
.doc-sheet + .doc-sheet { margin-top: 18px; }

.doc-page input, .doc-page textarea, .doc-page [contenteditable] {
  font-family: inherit;
  color: inherit;
}
.doc-page input, .doc-page textarea {
  border: 0;
  border-bottom: 1px dashed var(--gris-medio);
  background: transparent;
  resize: none;
  overflow: hidden;
  padding: 1px 0;
  width: 100%;
  field-sizing: content;
}
.doc-page textarea { min-height: 1.4em; }
.doc-page input:focus, .doc-page textarea:focus, .doc-page [contenteditable]:focus {
  outline: 2px solid var(--cian-tecnico);
  outline-offset: 2px;
  border-radius: 2px;
}
.doc-page input::placeholder, .doc-page textarea::placeholder { color: #9fb1c2; }
.doc-page ul { margin: 0; padding-left: 18px; }
.doc-page li { margin-bottom: 3px; }
.doc-page ol { margin: 0; padding-left: 18px; }

/* Encabezado portada */
.doc-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; border-bottom: 3px solid var(--cian-tecnico); padding-bottom: 12px;
}
.doc-header img.logo { width: 210px; height: auto; display: block; }
.doc-header__advisor { text-align: right; font-size: var(--docfs-2); color: var(--texto-secundario); line-height: 1.6; }
.doc-header__advisor .label { display: block; font-family: var(--font-titulares); font-size: var(--docfs-3); font-weight: 500; letter-spacing: 0.12em; color: var(--gris-acero); }
.doc-header__advisor input.name { text-align: right; font-family: var(--font-titulares); font-size: var(--docfs-8); font-weight: 600; letter-spacing: 0.04em; color: var(--azul-serin); border: 0; margin-bottom: 2px; }
.doc-header__advisor input { text-align: right; border: 0; font-size: var(--docfs-2); color: var(--texto-secundario); }

/* Portada: encabezado + mosaico fotográfico, siempre en su propia página.
   Tres filas (pareja de fotos de instalación/producto, trío de fotos de
   aplicación, trío de fotos de equipo/técnico) para ocupar el alto real
   de la página 1 en vez de dejar espacio en blanco debajo.
   min-height:0 y min-width:0 anulan el "automatic minimum size" que
   CSS Grid aplica por defecto a sus hijos: sin esto, la relación de
   aspecto intrínseca de cada <img> puede forzar la fila a crecer más
   allá de lo definido aquí, empujando el resto del documento sobre las
   propias imágenes. */
.hero-grid {
  margin-top: var(--docsp-4); display: grid; grid-template-rows: 1.1fr 0.85fr 1fr; gap: var(--docsp-2);
  height: 720px; overflow: hidden;
}
.hero-grid > * { min-height: 0; min-width: 0; }
.hero-grid img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 2px; }
.hero-grid .hero-cols-2,
.hero-grid .hero-cols-3 {
  display: grid; grid-template-rows: 100%; gap: var(--docsp-2); min-height: 0;
}
.hero-grid .hero-cols-2 { grid-template-columns: 1fr 1fr; }
.hero-grid .hero-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.hero-grid .hero-cols-2 > *,
.hero-grid .hero-cols-3 > * { min-height: 0; min-width: 0; }

/* Título cotización + datos cliente — siempre a partir de la página 2, como un bloque único */
.doc-titleblock { break-inside: avoid; }
.doc-titlerow {
  margin-top: var(--docsp-6); display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
}
.doc-titlerow__title { font-family: var(--font-titulares); font-size: var(--docfs-12); font-weight: 700; letter-spacing: 0.02em; color: var(--azul-serin); line-height: 1; }
.doc-titlerow__meta { display: flex; align-items: baseline; gap: 6px; font-size: var(--docfs-4); color: var(--texto-secundario); margin-top: var(--docsp-1); }
.doc-titlerow__meta input { width: 120px; font-weight: 600; color: var(--tinta-texto); }
.doc-titlerow__meta input.fecha { width: 95px; }

.client-box { width: 330px; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px 10px; align-items: center; font-size: var(--docfs-4); }
.client-box .lbl { color: var(--gris-acero); font-size: var(--docfs-3); }
.client-box textarea.empresa { font-family: var(--font-titulares); font-size: var(--docfs-8); font-weight: 600; letter-spacing: 0.02em; color: var(--azul-serin); line-height: 1.25; }

.proyecto-input { display: block; width: 100%; margin-top: var(--docsp-6); font-family: var(--font-titulares); font-size: var(--docfs-10); font-weight: 500; letter-spacing: 0.02em; line-height: 1.25; color: var(--cian-tecnico-dark, #0d84ae); }

.page-break-marker {
  margin: var(--docsp-6) -0.6in var(--docsp-6); padding: 6px 0; text-align: center; font-size: 9.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris-acero);
  border-top: 2px dashed var(--gris-medio); border-bottom: 2px dashed var(--gris-medio);
  background: var(--gris-claro);
}
@media print { .page-break-marker { display: none !important; } }

/* Bloques de sección con banda de color — mismo espacio antes de cada uno */
.section-band {
  font-family: var(--font-titulares); font-size: var(--docfs-8); font-weight: 600; letter-spacing: 0.09em;
  color: #fff; background: var(--azul-serin); padding: 6px 10px; margin-top: var(--docsp-6);
  break-after: avoid-page; break-inside: avoid;
}
.section-band.accent { background: var(--cian-tecnico); color: #00243f; }
.section-body {
  font-size: var(--docfs-4); line-height: 1.6; color: var(--tinta-texto); padding: var(--docsp-3) 2px 0;
}
.section-title-plain {
  font-family: var(--font-titulares); font-size: var(--docfs-9); font-weight: 600; letter-spacing: 0.09em;
  color: var(--azul-serin); border-bottom: 2px solid var(--azul-serin); padding-bottom: 4px; margin-top: var(--docsp-6);
  break-after: avoid-page;
}

/* Ventajas del equipo — banda + contenido corto, viaja como un solo bloque */
.ventajas-section { break-inside: avoid; }
.ventajas-grid { display: grid; grid-template-columns: 1fr 250px; gap: 16px; align-items: start; padding-top: var(--docsp-3); }
.marca-panel { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.marca-panel select { width: 250px; }
.image-slot {
  border: 1.5px dashed var(--gris-medio); border-radius: 4px; background: var(--gris-claro);
  display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; cursor: pointer;
  color: var(--texto-secundario); font-size: var(--docfs-2); text-align: center; padding: 6px;
}
.image-slot img { width: 100%; height: 100%; object-fit: contain; }
.image-slot input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.image-slot .remove-img {
  position: absolute; top: 3px; right: 3px; background: rgba(0,0,0,0.55); color: #fff; border: 0;
  width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: 11px; line-height: 1;
}

/* Tabla equipos — el encabezado no debe quedar huérfano y cada fila viaja completa */
.eq-head {
  display: grid; gap: 8px; padding: 5px 10px; font-family: var(--font-titulares);
  font-size: var(--docfs-2); font-weight: 500; letter-spacing: 0.07em; color: var(--gris-acero);
  border: 1px solid var(--linea-suave); border-bottom: 0;
  break-after: avoid-page;
}
.eq-head { grid-template-columns: 215px minmax(0,1fr) 58px 122px 52px; border-top: 1px solid var(--linea-suave); }
.eq-row {
  display: grid; grid-template-columns: 215px minmax(0,1fr) 58px 122px 52px; gap: 0;
  border: 1px solid var(--linea-suave); border-top: 0;
  break-inside: avoid;
}
.eq-row__img { padding: 10px; border-right: 1px solid #e1e9f0; display: flex; flex-direction: column; gap: 6px; }
.eq-row__img .image-slot { width: 100%; height: 165px; }
.eq-row__info { padding: 10px; border-right: 1px solid #e1e9f0; font-size: var(--docfs-3); line-height: 1.6; }
.eq-row__info .tipo-line { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.eq-row__info .tipo-line select { flex: 1; min-width: 0; font-size: var(--docfs-2); padding: 3px 4px; }
.eq-row__info input.nombre { font-weight: 700; color: var(--azul-serin); font-size: var(--docfs-5); }
.eq-row__info .grid2 { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 3px 8px; align-items: center; margin-top: var(--docsp-1); font-size: var(--docfs-2); }
.eq-row__info .grid2 input { font-size: var(--docfs-3); font-weight: 600; }
.eq-row__cant { padding: 10px; text-align: center; }
.eq-row__cant input { text-align: center; font-size: var(--docfs-6); font-weight: 600; }
.eq-row__precio { padding: 10px; text-align: right; }
.eq-row__precio input { text-align: right; font-size: var(--docfs-4); }
.eq-row__precio .total { font-weight: 700; font-size: var(--docfs-6); margin-top: 6px; color: var(--azul-serin); }
.eq-row__actions { padding: 10px 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }

.icon-btn { border: 0; background: transparent; color: var(--gris-acero); cursor: pointer; font-size: var(--docfs-6); line-height: 1; padding: 2px; }
.icon-btn:hover { color: var(--cian-tecnico); }
.icon-btn.danger:hover { color: var(--peligro); }
.small-btn {
  border: 1px solid var(--azul-institucional); background: #fff; color: var(--azul-institucional);
  font-weight: 700; font-size: var(--docfs-2); line-height: 1; padding: 4px 7px; border-radius: 3px; cursor: pointer;
}
.small-btn.minus { border-color: var(--gris-medio); color: var(--gris-acero); }
.section-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px;
  background: var(--gris-claro); border: 1px solid var(--linea-suave); border-top: 0;
  break-inside: avoid; break-before: avoid-page;
}
.section-footer .add-btn {
  border: 1px dashed var(--azul-institucional); background: #fff; color: var(--azul-institucional);
  font-weight: 600; font-size: var(--docfs-3); padding: 5px 11px; border-radius: 3px; cursor: pointer; white-space: nowrap;
}
.section-footer .subtotal-label { font-family: var(--font-titulares); font-size: var(--docfs-6); font-weight: 500; letter-spacing: 0.07em; color: var(--azul-serin); }
.section-footer .subtotal-value { font-weight: 700; font-size: var(--docfs-7); min-width: 118px; text-align: right; }
.section-footer-row { display: flex; gap: 16px; align-items: baseline; margin-left: auto; }

/* Tablas de materiales / mano de obra */
.mat-head {
  display: grid; grid-template-columns: minmax(0,1fr) 46px 56px 112px 118px 58px; gap: 8px; padding: 6px 10px;
  font-family: var(--font-titulares); font-size: var(--docfs-2); font-weight: 500; letter-spacing: 0.07em; color: var(--gris-acero);
  border-bottom: 1px solid var(--linea-suave); border-top: 2px solid var(--azul-serin);
  break-after: avoid-page;
}
.mat-row {
  display: grid; grid-template-columns: minmax(0,1fr) 46px 56px 112px 118px 58px; gap: 8px; padding: 6px 10px;
  border-bottom: 1px solid #eef2f6; font-size: var(--docfs-3); align-items: center;
  break-inside: avoid;
}
.mat-row input, .mat-row textarea { font-size: var(--docfs-3); }
.mat-row .total { text-align: right; font-weight: 600; }
.mat-row .row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 1px; }
.subsection-label {
  font-family: var(--font-titulares); font-size: var(--docfs-6); font-weight: 500; letter-spacing: 0.07em;
  background: var(--gris-claro); color: var(--azul-serin); padding: 6px 10px; margin-top: var(--docsp-4);
  break-after: avoid-page;
}
.subsection-label--tight { margin-top: var(--docsp-3); }

/* Resumen total */
.resumen-head {
  display: grid; grid-template-columns: minmax(0,1fr) 60px 150px; gap: 8px; padding: 5px 10px;
  font-family: var(--font-titulares); font-size: var(--docfs-2); font-weight: 500; letter-spacing: 0.07em; color: var(--gris-acero);
  border-bottom: 1px solid var(--linea-suave);
  break-after: avoid-page;
}
.resumen-row {
  display: grid; grid-template-columns: minmax(0,1fr) 60px 150px; gap: 8px; padding: 7px 10px;
  border-bottom: 1px solid #e1e9f0; font-size: var(--docfs-5);
  break-inside: avoid;
}
.resumen-row.total-eq { background: #f7fafc; }
.totales-box { width: 340px; margin-left: auto; margin-top: var(--docsp-3); break-inside: avoid; }
.totales-box .line { display: flex; justify-content: space-between; padding: 6px 12px; font-size: var(--docfs-6); border-bottom: 1px solid #e1e9f0; }
.totales-box .line .lbl { color: var(--texto-secundario); }
.totales-box .grand {
  display: flex; justify-content: space-between; align-items: baseline; padding: 11px 12px;
  background: var(--azul-serin); color: #fff;
}
.totales-box .grand .lbl2 { font-family: var(--font-titulares); font-size: var(--docfs-7); font-weight: 500; letter-spacing: 0.1em; }
.totales-box .grand .val { font-size: var(--docfs-11); font-weight: 700; }
.totales-box .letras { padding: 6px 12px; font-size: var(--docfs-2); color: var(--texto-secundario); text-align: right; font-style: italic; }
.line-controls { display: flex; align-items: center; gap: 8px; }
.line-controls input[type=checkbox] { width: auto; }
.line-controls input[type=number] { width: 56px; text-align: right; }
/* Contraparte de .noprint: texto que solo aparece al imprimir/exportar,
   para reemplazar controles interactivos (casillas, inputs) que sí deben
   ocultarse en el PDF pero cuya etiqueta (p. ej. "IVA 19%") debe seguir
   siendo visible. */
.printonly { display: none; }
@media print { .printonly { display: inline; } }

/* Términos en 2 columnas — cada bloque viaja completo */
.terms-grid { margin-top: var(--docsp-6); display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; }
.terms-grid .term-block { break-inside: avoid; }
.terms-grid .term-block h4 {
  font-family: var(--font-titulares); font-size: var(--docfs-6); font-weight: 600; letter-spacing: 0.09em; color: var(--cian-tecnico-dark, #0d84ae);
  border-bottom: 1px solid var(--linea-suave); padding-bottom: 3px; margin-bottom: 6px;
  break-after: avoid-page;
}
.terms-grid .term-block [contenteditable] { font-size: var(--docfs-3); line-height: 1.6; color: var(--tinta-texto); }

.observaciones-section { break-inside: avoid; }
.observaciones-body {
  font-size: var(--docfs-3); line-height: 1.6; color: var(--tinta-texto);
  border: 1px solid var(--linea-suave); border-top: 0; padding: 10px;
}

/* Firmas — ambas firmas siempre en la misma página */
.signrow { margin-top: var(--docsp-6); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; break-inside: avoid; }
.signrow .sign { border-top: 1px solid var(--azul-serin); padding-top: 6px; font-size: var(--docfs-2); color: var(--texto-secundario); }
.signrow .sign input { border: 0; }
.sign-name { display: block; font-weight: 600; color: var(--tinta-texto); font-size: var(--docfs-5); margin-bottom: 2px; }

/* Pie de página del documento */
.doc-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: var(--docfs-1);
  color: var(--gris-acero); border-top: 1px solid var(--linea-suave); padding-top: 8px; margin-top: var(--docsp-6); letter-spacing: 0.03em;
  break-inside: avoid;
}

@page { margin: 0; }
@media print {
  /* Por defecto, los navegadores omiten colores de fondo al imprimir para
     ahorrar tinta. Sin esto, las bandas de sección y la casilla TOTAL pierden
     su fondo azul y el texto en blanco queda invisible sobre la hoja. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
  .doc-scroll { overflow: visible; }
  .doc-page { box-shadow: none; margin: 0; width: auto; min-width: 0; max-width: none; padding: 0.5in; }
  /* La portada (logo e imágenes) siempre ocupa la página 1; todo lo demás
     —incluidos los datos de la cotización y del cliente— inicia en la página 2.
     El padding-top empuja el contenido hacia el centro de la página para que
     el espacio sobrante (cuando el mosaico de fotos no llena todo el alto de
     la hoja) quede repartido arriba y abajo en vez de verse como un vacío al
     final. Se usa padding en vez de flexbox: `display:flex` en un elemento
     con salto de página forzado hace que Chrome calcule mal el punto de
     corte al imprimir, partiendo el texto que sigue (el título "COTIZACIÓN")
     entre la página 1 y la 2. */
  .doc-cover { break-after: page; page-break-after: always; min-height: 9.8in; padding-top: 26px; }
  .doc-titlerow { margin-top: var(--docsp-7); }
  input, textarea { border: 0 !important; background: transparent !important; }
  .image-slot { border: 0 !important; background: transparent !important; }
  .image-slot .remove-img, .image-slot input[type=file] { display: none !important; }
  .icon-btn, .small-btn, .add-btn, .row-actions, .eq-row__actions { display: none !important; }
}