/* ============================================================
   Factura — J.A. Acoustic Ceiling Corp
   Diseño: barra lateral, cabecera INVOICE, meta bar,
   info company/client, tabla con filas alternas y totales.
   El color se inyecta desde config.js como --iv.
   ============================================================ */

/* ---------- Pantalla que envuelve la factura ---------- */
.viewer{
  position:fixed; inset:0; z-index:100;
  background:#4b5563;
  display:none; flex-direction:column;
}
.viewer.is-open{display:flex}

/* En iOS no basta con overflow:hidden — la página de detrás se sigue
   arrastrando. Fijándola queda quieta; el desplazamiento se restaura al salir. */
body.is-viewing{
  position:fixed; left:0; right:0; width:100%;
  overflow:hidden;
  overscroll-behavior:none;
}

.viewer__bar{
  flex:none;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  padding:.7rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
.viewer__title{
  font-size:.85rem; font-weight:600; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.viewer__tools{display:flex; gap:.5rem; flex:none}
.viewer__tools .btn--ghost{margin-top:0}   /* .btn--ghost trae margen del formulario */
/* aquí "Editar" es volver atrás, no borrar: sin el rojo de .btn--quiet */
.viewer__tools .btn--quiet:hover{color:var(--brand); border-color:#cfe1f6; background:var(--brand-soft)}

.viewer__scroll{
  flex:1; overflow:auto;
  padding:1.75rem 1rem 3rem;
  display:flex; justify-content:center;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;   /* sin rebote ni arrastre de la página de detrás */
}

/* ============================================================
   PANTALLA DE CONFIRMACIÓN
   Sólo los datos que se escriben en el formulario.
   ============================================================ */
/* min-width:0 en toda la cadena flex: sin él, un email largo impone su
   ancho mínimo y la tarjeta se sale por el borde derecho */
.cf{
  width:100%; max-width:560px; min-width:0; align-self:flex-start;
  background:var(--surface);
  border-radius:14px;
  box-shadow:0 4px 24px rgba(0,0,0,.22);
  padding:1.25rem 1.25rem 1.5rem;
}

.cf__lead{
  font-size:.86rem; color:var(--ink-soft);
  margin-bottom:1.1rem;
}

.cf__block{margin-bottom:1.35rem}
.cf__block:last-child{margin-bottom:0}
.cf__block h3{
  font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--brand);
  padding-bottom:.4rem; margin-bottom:.6rem;
  border-bottom:1px solid var(--line);
}

.cf__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.3rem 0; min-width:0;
  font-size:.92rem;
}
.cf__k{color:var(--ink-soft); flex:none}
.cf__v{
  color:var(--ink); font-weight:500; text-align:right;
  min-width:0; overflow-wrap:anywhere;
}
.cf__row--off .cf__v{color:var(--ink-soft); font-weight:400}
.cf__row--total{
  margin-top:.35rem; padding-top:.6rem;
  border-top:2px solid var(--brand);
  font-size:1.1rem;
}
.cf__row--total .cf__k{color:var(--ink); font-weight:700}
.cf__row--total .cf__v{color:var(--brand); font-weight:700}

.cf__text{font-size:.9rem; line-height:1.55; white-space:pre-line}

.cf__item{padding:.45rem 0; border-bottom:1px solid var(--line)}
.cf__item:last-child{border-bottom:0}
.cf__item-top{display:flex; justify-content:space-between; gap:1rem; align-items:baseline; min-width:0}
.cf__item-desc{font-size:.92rem; min-width:0; overflow-wrap:anywhere}
.cf__item-desc em{color:var(--ink-soft)}
.cf__item-amt{font-weight:600; white-space:nowrap}
.cf__item-calc{font-size:.78rem; color:var(--ink-soft); margin-top:.15rem}

/* En pantalla estrecha, dato y valor en dos renglones: un email o una
   dirección larga no caben en media línea. Los totales siguen enfrentados. */
@media screen and (max-width:560px){
  .cf{padding:1rem 1rem 1.25rem; border-radius:12px}
  .cf__block:not(.cf__block--totals) .cf__row{
    flex-direction:column; align-items:stretch; gap:0;
    padding:.4rem 0;
  }
  .cf__block:not(.cf__block--totals) .cf__k{font-size:.76rem}
  .cf__block:not(.cf__block--totals) .cf__v{text-align:left; font-weight:600}
}

/* la factura de verdad vive aquí: invisible en pantalla, sale al imprimir */
.printonly{display:none}

/* ============================================================
   LA HOJA
   ============================================================ */
.sheet{
  --iv:#1D4ED8;          /* color principal (config.js) */
  --iv-soft:#DBEAFE;     /* fondo claro derivado */
  --iv-ink:#374151;
  --iv-mute:#6B7280;

  position:relative;
  width:816px; max-width:100%; min-height:1056px;
  background:#fff;
  box-shadow:0 4px 30px rgba(0,0,0,.3);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:var(--iv-ink);
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
  display:flex; flex-direction:column;
}

.sheet__side{
  position:absolute; left:0; top:0; bottom:0;
  width:8px; background:var(--iv);
}
.sheet__content{
  flex:1; display:flex; flex-direction:column;
  padding:56px 64px 48px 56px; margin-left:8px;
}

/* ---------- Cabecera ---------- */
.ivh{
  display:flex; justify-content:space-between; align-items:center;
  gap:24px; margin-bottom:36px;
}
.ivh__left{display:flex; align-items:center; gap:16px}
.ivh__logo{
  width:72px; height:72px; flex:none;
  object-fit:contain;
  mix-blend-mode:multiply;   /* el PNG trae fondo blanco */
}
.ivh__title{
  font-size:36px; font-weight:300; color:#9CA3AF;
  letter-spacing:.12em; line-height:1; white-space:nowrap;
}
.ivh__title span{font-weight:700; color:var(--iv)}

.ivh__right{text-align:right; min-width:0}
.ivh__co{font-size:17px; font-weight:700; color:var(--iv); margin-bottom:4px; line-height:1.3}
.ivh__contact{font-size:12px; color:var(--iv-mute); line-height:1.6}

/* ---------- Meta bar ---------- */
.ivmeta{
  display:flex; gap:40px; flex-wrap:wrap;
  margin-bottom:36px; padding:18px 24px;
  background:var(--iv-soft); border-radius:10px;
}
.ivmeta__item label{
  display:block; font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; color:var(--iv-mute);
}
.ivmeta__item p{font-size:15px; font-weight:600; color:var(--iv); margin-top:4px}

/* ---------- Company / Client ---------- */
.ivinfo{
  display:flex; justify-content:space-between; gap:32px;
  margin-bottom:34px; font-size:13px;
}
.ivinfo__col{min-width:0; flex:1}
.ivinfo__col h3{
  font-size:11px; font-weight:700; color:var(--iv);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px;
}
.ivinfo__col p{color:var(--iv-ink); margin-bottom:3px; line-height:1.5; word-break:break-word}
.ivinfo__col .bold{font-weight:600}

/* ---------- Proyecto ---------- */
.ivproject{margin-bottom:30px; font-size:13px}
.ivproject h3{
  font-size:11px; font-weight:700; color:var(--iv);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px;
}
.ivproject p{line-height:1.6; white-space:pre-line}

/* ---------- Tabla ---------- */
.ivtable{
  width:100%; border-collapse:collapse;
  border-radius:8px; overflow:hidden;
  margin-bottom:8px;
}
.ivtable thead tr{background:var(--iv)}
.ivtable th{
  text-align:left; padding:14px 20px;
  font-size:11px; font-weight:600; color:#fff;
  text-transform:uppercase; letter-spacing:.06em;
  white-space:nowrap;
}
.ivtable td{padding:14px 20px; font-size:13px; color:var(--iv-ink); vertical-align:top}
.ivtable .right{text-align:right}
.ivtable tbody tr:nth-child(even) td{background:var(--iv-soft)}
.ivtable .desc{line-height:1.5; white-space:pre-line}
.ivtable .amount{font-weight:600; white-space:nowrap}
.ivtable .num{white-space:nowrap}
.ivtable .is-filler td{height:47px}

/* ---------- Totales ---------- */
.ivtotals{display:flex; justify-content:flex-end; margin-top:16px; margin-bottom:30px}
.ivtotals__box{width:280px; max-width:100%}
.ivtotals__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:6px 0; font-size:13px; color:var(--iv-mute);
}
.ivtotals__label{
  font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.05em;
}
.ivtotals__row--total{
  padding:14px 0 0; margin-top:6px;
  border-top:2px solid var(--iv);
  font-weight:700; color:var(--iv);
}
.ivtotals__row--total .ivtotals__label{font-size:14px; font-weight:700}
.ivtotals__row--total .ivtotals__value{font-size:20px}

/* ---------- Nota y pie ---------- */
.ivfoot{
  margin-top:auto; padding-top:24px;
  border-top:1px solid #E5E7EB;
  font-size:12px; color:var(--iv-mute); line-height:1.6;
}
.ivfoot strong{color:var(--iv-ink); font-weight:600}

/* ============================================================
   MÓVIL — la hoja se adapta al ancho, sin scroll horizontal

   "screen and" es imprescindible: al imprimir, el viewport pasa a medir
   el ancho del papel (816px) y sin él este bloque se colaría en el PDF,
   apilando Company/Client y empujando el pie a una segunda hoja.
   ============================================================ */
@media screen and (max-width:900px){
  /* botonera abajo, al alcance del pulgar */
  .viewer{flex-direction:column-reverse}
  .viewer__bar{
    border-bottom:0; border-top:1px solid var(--line);
    padding:.55rem .6rem calc(.55rem + env(safe-area-inset-bottom));
    box-shadow:0 -2px 12px rgba(0,0,0,.12);
  }
  .viewer__title{display:none}
  .viewer__tools{width:100%; gap:.4rem}
  .viewer__tools .btn{
    flex:1; min-width:0;
    padding:.7rem .35rem; font-size:.82rem;
    white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
  }
  .viewer__scroll{padding:.75rem .5rem 1.25rem}

  .sheet{width:100%; min-height:0; box-shadow:0 2px 14px rgba(0,0,0,.25)}
  .sheet__content{padding:28px 20px 28px 18px}

  /* el email es más largo que media hoja: sin esto se sale por el borde */
  .ivh{gap:10px; margin-bottom:24px; align-items:flex-start}
  .ivh__logo{width:44px; height:44px}
  .ivh__left{gap:8px}
  .ivh__title{font-size:21px; letter-spacing:.06em}
  .ivh__right{flex:1; min-width:0}
  .ivh__co{font-size:12.5px; line-height:1.25}
  .ivh__contact{font-size:10.5px; line-height:1.5}
  .ivh__co, .ivh__contact{overflow-wrap:anywhere; word-break:break-word}

  .ivmeta{gap:16px 28px; padding:14px 16px; margin-bottom:26px}
  .ivmeta__item p{font-size:14px}

  /* lado a lado también aquí: igual que el PDF y ahorra media pantalla de scroll */
  .ivinfo{gap:16px; margin-bottom:24px; font-size:12px}
  .ivinfo__col h3{font-size:10px; margin-bottom:7px}
  .ivinfo__col p{overflow-wrap:anywhere}

  /* en pantalla estrecha las columnas Qty/Unit estorban:
     el cálculo pasa debajo de la descripción */
  .ivtable th.opt, .ivtable td.opt{display:none}
  .ivtable th, .ivtable td{padding:11px 12px}
  .ivtable th{font-size:10px}
  .ivtable td{font-size:12.5px}
  .ivtable .calc{display:block}
  .ivtable .is-filler{display:none}

  .ivtotals{margin-bottom:24px}
  .ivtotals__box{width:100%}
}

/* el cálculo bajo la descripción solo aparece en móvil */
.ivtable .calc{display:none; margin-top:3px; font-size:11.5px; color:var(--iv-mute)}

/* ============================================================
   IMPRESIÓN — solo la hoja, tamaño carta
   ============================================================ */
@page{size:letter; margin:0}

@media print{
  html, body{background:#fff !important; padding:0 !important; margin:0 !important}
  body.is-viewing{overflow:visible}

  body.is-viewing .topbar,
  body.is-viewing .wrap,
  .viewer__bar{display:none !important}

  .viewer{
    position:static !important; display:block !important;
    background:#fff !important; inset:auto;
  }
  .viewer__scroll{display:block !important; overflow:visible !important; padding:0 !important}

  /* en papel se invierten: fuera la confirmación, dentro la factura */
  .cf{display:none !important}
  .printonly{display:block !important}

  /* En papel la hoja crece sólo lo que ocupe el contenido. Forzar 11in y
     empujar el pie con margin-top:auto lo dejaba justo en el borde, y
     cualquier redondeo lo mandaba a una segunda hoja. */
  /* min-height llena la hoja para que la franja azul llegue abajo, pero el
     contenido fluye natural: el pie ya no se empuja contra el borde. */
  .sheet{
    width:8.5in !important; max-width:none !important;
    min-height:10.9in !important; height:auto !important;
    box-shadow:none !important;
    display:block !important;
  }
  .ivfoot{margin-top:0 !important; padding-top:22px !important}
  /* en papel se recorta el aire vertical: en pantalla luce bien, pero
     impreso es lo que separa una factura normal de una segunda hoja */
  .sheet__content{padding:0.45in 0.55in 0.4in 0.45in !important}
  .ivh{margin-bottom:26px !important}
  .ivmeta{padding:14px 22px !important; margin-bottom:24px !important}
  .ivinfo{margin-bottom:24px !important}
  .ivproject{margin-bottom:20px !important}
  .ivtotals{margin-top:12px !important; margin-bottom:20px !important}
  
  /* en papel sí caben todas las columnas */
  .ivtable th.opt, .ivtable td.opt{display:table-cell !important}
  .ivtable .calc{display:none !important}
  .ivtable .is-filler{display:table-row !important}

  /* el pie NO lleva break-inside:avoid: al caer cerca del límite inferior
     Chrome lo empujaba entero a una segunda hoja */
  .ivtable tr{break-inside:avoid; page-break-inside:avoid}
  .ivtable thead{display:table-header-group}

  /* Facturas largas: se aprieta todo un punto más para no pasar de hoja. */
  .sheet--compact .sheet__content{padding:0.35in 0.5in 0.3in 0.4in !important}
  .sheet--compact .ivh{margin-bottom:16px !important}
  .sheet--compact .ivh__logo{width:52px !important; height:52px !important}
  .sheet--compact .ivh__title{font-size:26px !important}
  .sheet--compact .ivh__co{font-size:15px !important}
  .sheet--compact .ivmeta{padding:10px 18px !important; margin-bottom:16px !important}
  .sheet--compact .ivmeta__item p{font-size:13px !important}
  .sheet--compact .ivinfo{margin-bottom:16px !important; font-size:11.5px !important}
  .sheet--compact .ivinfo__col p{margin-bottom:1px !important; line-height:1.4 !important}
  .sheet--compact .ivproject{margin-bottom:12px !important; font-size:11.5px !important}
  .sheet--compact .ivtable th,
  .sheet--compact .ivtable td{padding:6px 14px !important}
  .sheet--compact .ivtable td{font-size:11.5px !important}
  .sheet--compact .ivtable .desc{line-height:1.35 !important}
  .sheet--compact .ivtotals{margin-top:8px !important; margin-bottom:12px !important}
  .sheet--compact .ivtotals__row{padding:4px 0 !important}
  .sheet--compact   .sheet--compact .ivfoot{padding-top:12px !important; font-size:11px !important}
}