:root{ --c1:#5a4633; --c2:#d9c8b4; --bg:#faf7f3; }
  *{box-sizing:border-box;font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif}
  body{margin:0;background:var(--bg);color:#1b1b1b;}
  header{background:linear-gradient(90deg,var(--c1),#7a5a40);color:#fff;padding:16px 20px;position:sticky;top:0;z-index:5}
  header h1{margin:0;font-size:20px}
  main{max-width:1140px;margin:20px auto;padding:0 12px 160px;}
  .card{background:#fff;border:1px solid #0001;border-radius:16px;box-shadow:0 6px 18px #00000014;margin-bottom:16px}
  .card h2{margin:0;padding:16px;border-bottom:1px solid #0002;background:var(--c2)}
  .content{padding:16px}
  label{display:block;font-size:14px;margin:10px 0 6px}
  input, select, textarea{width:100%;padding:10px;border:1px solid #0002;border-radius:10px;background:#fff;font-size:14px}
  .row{display:grid;gap:12px}

  .rowClient{ display: grid; gap: 12px; padding: 2%; }

  .cols-2{grid-template-columns:1fr 1fr}
  .cols-3{grid-template-columns:1fr 1fr 1fr}
  .cols-4{grid-template-columns:1fr 1fr 1fr 1fr}
  .btn{display:inline-flex;gap:8px;align-items:center;background:var(--c1);color:#fff;border:none;border-radius:12px;padding:10px 14px;font-weight:600;cursor:pointer}
  .btn.secondary{background:#fff;color:var(--c1);border:1px solid var(--c1)}
  .btn.ghost{background:transparent;border:1px dashed #0004;color:#333}
  .btn:disabled{opacity:.5;cursor:not-allowed}
  .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
  .btn.danger{ background:#c62828 }
  .btn.ghost.danger{ border-color:#c62828; color:#c62828 }

  #btnGuardarCliente{ margin-bottom: 10px; margin-left: 10px; }

  #result { margin-left: 20px; }

  table{width:100%;border-collapse:collapse;margin-top:8px}
  th,td{padding:8px;border-bottom:1px solid #0001;text-align:left;font-size:14px}
  .right{text-align:right}
  .muted{color:#666;font-size:12px}
  .tag{display:inline-block;padding:2px 8px;border-radius:999px;background:#eee;font-size:12px;margin-left:6px}
  .page{page-break-after:always}
  .hidden{display:none !important}
  .fab{position:fixed;right:16px;bottom:16px;z-index:20;border-radius:50%;width:56px;height:56px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #00000025}
  .modal{position:fixed;inset:0;background:#0008;display:flex;align-items:center;justify-content:center;z-index:30}
  .sheet{background:#fff;border-radius:16px;max-width:620px;width:94%;padding:18px;border:1px solid #0002}
  .log{background:#0b1020;color:#c5e3ff;border-radius:10px;padding:10px;font-family:ui-monospace, SFMono-Regular, Menlo, monospace;font-size:12px;max-height:220px;overflow:auto}
  .formula{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;background:#f6f3ee;border:1px solid #0002;border-radius:8px;padding:8px;margin:6px 0;font-size:13px;white-space:pre-wrap}
  @media print{
    header,.no-print,.fab,#catalogoCard,#adminCard{display:none!important}
    main{max-width:none;margin:0;padding:0} .card{box-shadow:none;border:none} body{background:#fff}
    .costos{display:none!important}
  }

  /* ==== PDF factura (off-screen) ==== */
.offscreen{
  position: fixed;       /* dentro del viewport */
  left: 0;
  top: 0;
  opacity: 0;            /* invisible */
  pointer-events: none;  /* no interactuable */
}

/* Asegurar contraste y fondo para la plantilla del PDF
.pdf-factura{ width:1120px; font-size:13px; background:#ffffff; color:#222; color:inherit; min-height: 1123px; }
.pdf-factura .hdr{ display:grid; grid-template-columns:220px 1fr 220px; align-items:center; gap:12px; }
.pdf-factura .hdr .brand{ font-weight:800; font-size:22px; letter-spacing:.5px; color:#223; }
.pdf-factura .hdr .meta{ text-align:right; }
.pdf-factura table{ width:100%; border-collapse:collapse; margin-top:8px; }
.pdf-factura th, .pdf-factura td{ border:1px solid #ddd; padding:6px 8px; vertical-align:top; }
.pdf-factura th{ background:#f1f1f1; }
.pdf-factura .right{ text-align:right; white-space:nowrap; }
.pdf-factura .muted{ color:#666; }
.pdf-factura .subtotal{ background:#fafafa; font-weight:700; }
.pdf-factura .footer{ margin-top:18px; font-size:12px; } */

/* ===== Planilla para el PDF ===== */
#pdfFactura{ width:740px; font:12px Arial, Helvetica, sans-serif; color:#222; }
#pdfFactura .hdr{ display:grid; grid-template-columns: 230px 1fr 170px; gap:12px; align-items:center; gap: 12px; margin-bottom:6px; }
#pdfFactura .brand{ display: flex; align-items: center; }
#pdfFactura .brand img { max-width: 240px; height: auto; display: block; object-fit: contain; }
#pdfFactura .meta{ text-align:right; font-size:12px; }

#pdfFactura table.sheet{ width:100%; border-collapse:collapse; table-layout:fixed; }
#pdfFactura table.sheet th, #pdfFactura table.sheet td{
  border:1.2px solid #111;
  padding:6px 8px;
  vertical-align:top;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

#pdfFactura table.sheet th{ text-align: center; font-size: 12px; background:#e9e9e9; }
#pdfFactura .right{ text-align:center; white-space:nowrap; }
#pdfFactura .col-cant{ width:70px; }
#pdfFactura .col-desc{ width:190px; }
#pdfFactura .col-mat { width:120px; }
#pdfFactura .col-det { width:auto; }
#pdfFactura .col-unit{ width:140px; }
#pdfFactura .col-total{ width:160px; }
#pdfFactura .watermark{ color:#cfcfcf; font-size:70px; text-align:center; padding:60px 0; }

#pdfFactura .footer{ margin-top:12px; font-size:12px; }

/* cajas de totales a la derecha */
#pdfFactura .totales{ margin-top:8px; display:flex; justify-content:flex-end; }
#pdfFactura .totales .box{ width:320px; margin-top: 10px; border:1.5px solid #111; }
#pdfFactura .totales .box table{ width:100%; border-collapse:collapse; }
#pdfFactura .totales .box td{ border:1px solid #111; padding:6px 10px; }
#pdfFactura .totales .box .lbl{ text-align:left; }
#pdfFactura .totales .box .val{ text-align:right; white-space:nowrap; }
#pdfFactura .totales tr.espaciado td{
  border-top: 3px solid #111;
}

#pdfFactura .precio-sin{ width:320px; margin-top:10px; border:1.8px solid #111; }
#pdfFactura .precio-sin td{ border:1px solid #111; padding:8px 10px; }
#pdfFactura .precio-sin .lbl{ background:#eee; font-weight:700; }
#pdfFactura .precio-sin .val{ text-align:right; font-weight:700; }

#pdfFactura .tabla-totales {
  border-collapse: collapse;
  width: 100%;
  margin-top: 10px;
}

#pdfFactura .tabla-totales td {
  border: 1px solid #111;
  padding: 6px 10px;
}

#pdfFactura .tabla-totales .lbl {
  font-weight: bold;
}

#pdfFactura .tabla-totales .val {
  text-align: right;
}

/* Separación entre las dos tablas */
#pdfFactura .tabla-secundaria .tabla-totales .lbl {
  margin-top: 15px;  /* espacio visual */
  background-color: #eee;
}

#resultado .pdf-preview .tabla-secundaria .tabla-totales .lbl {
  margin-top: 15px;  /* espacio visual */
  background-color: #eee;
}



#pdfFactura .precio-desc{
  width:320px;                
  margin-top:10px;  
  border: 1.8px solid #111;
}

#pdfFactura .precio-desc td{
  border: 1px solid #111;
  padding:8px 10px;
}

#pdfFactura .precio-desc .lbl{
  background:#eee;
  font-weight:700;
}
#pdfFactura .precio-desc .val{ text-align:right; }

/* ==== Contenedor de vista previa del PDF ==== */
#resultado .pdf-preview img {
  max-width: 220px; 
  max-height: 60px;
}

/* Contenedor de vista previa */
#resultado .pdf-preview {
  width: 794px;   /* ancho A4 a 96dpi */
  margin: 20px auto;
  background: #fff;
  padding: 25px;
  box-shadow: 0 0 8px rgba(0,0,0,0.15);
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: #000;
}

/* Tablas del presupuesto */
#resultado .pdf-preview table.sheet {
  table-layout: fixed;
  width: 100%;
}

#resultado .pdf-preview table.sheet th,
#resultado .pdf-preview table.sheet td {
  border: 1.5px solid #111;
  padding: 6px 8px;
  vertical-align: top;
  word-wrap: break-word;
  font-size: 13px;
}

/* Columnas con anchos específicos */
#resultado .pdf-preview .col-cant   { width: 8%;  text-align:center; }
#resultado .pdf-preview .col-desc   { width: 18%; }
#resultado .pdf-preview .col-mat    { width: 15%; }
#resultado .pdf-preview .col-det    { width: 34%; }
#resultado .pdf-preview .col-unit   { width: 12%; text-align:right; }
#resultado .pdf-preview .col-total  { width: 13%; text-align:right; }

#resultado .pdf-preview table.sheet th {
  background: #f5f5f5;
  text-align: center;
  font-weight: bold;
}

/* Totales */
#resultado .pdf-preview .totales {
  display: flex;
  margin-top: 15px;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
}

#resultado .pdf-preview .totales .box,
#resultado .pdf-preview .precio-sin {
  width: 320px;
  border: 1.5px solid #111;
  margin-top: 8px;
}

/* Ajustar espacio entre Precio Total y Totales en la vista previa */
#resultado .pdf-preview .precio-sin {
  width: 320px;
  margin-top: 15px;   /* agrega un pequeño espacio */
  border: 1.5px solid #111;
  font-weight: bold;
}

#resultado .pdf-preview .precio-sin td {
  border: 1px solid #111;
  padding: 8px 10px;
}

#resultado .pdf-preview .precio-sin .lbl {
  background: #eee;
  font-weight: 700;
}

#resultado .pdf-preview .precio-sin .val {
  text-align: right;
  font-weight: 700;
}

#resultado .pdf-preview .totales table {
  border-collapse: collapse;
  margin-top: 5px;
  float: right;
  width: 320px;
}

#resultado .pdf-preview .totales td {
  border: 1px solid #111;
  min-height: 40px;
}

#resultado .pdf-preview .totales .lbl {
  font-weight: bold;
}

#resultado .pdf-preview .totales .val {
  text-align: right;
}

/* Footer */
#resultado .pdf-preview .footer {
  margin-top: 40px;
  font-size: 12px;
}

.modal {
  display: flex; justify-content: center; align-items: center;
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5); z-index: 1000;
}
.modal.hidden { display: none; }

.modal-content {
  position: relative;
  padding: 0; border-radius: 8px; min-width: 300px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  text-align: center;
}

.close {
  position: absolute; top: 7px; right: 10px; font-size: 1.5rem;
  cursor: pointer;
}

#doorPreviewImg {
  display: block;
  max-width: 350px;
  height: auto;
  object-fit: contain;

}