:root{
  --ink:#0b0f19;
  --muted:rgba(11,15,25,.62);
  --line:rgba(15,23,42,.14);
  --line2:rgba(15,23,42,.22);
  --shadow:0 16px 50px rgba(2,6,23,.12);
  --radius:16px;
  --max:1100px;
}

/* Layout */
.page{ max-width:var(--max); margin:0 auto; padding:18px 18px 60px; }
@media (max-width:680px){ .page{ padding:14px 14px 50px; } }

.head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-top:14px;
}
.head h1{ margin:0; font-size:26px; letter-spacing:-.01em; }
.muted{ color:var(--muted); }
.small{ font-size:12.5px; }

.head-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* Panel */
.panel{
  margin-top:16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  padding:16px;
  animation:pop .22s ease both;
}
@keyframes pop{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }

.panel-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:12px;
}
.panel-title{ font-weight:900; }
.panel-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Form grid */
.grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}
@media (max-width:860px){ .grid{ grid-template-columns:1fr; } }

.field{ min-width:0; }
.field label{ display:block; font-size:12.5px; margin-bottom:6px; color:var(--muted); }
.field input, .field select, .field textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
  background:#fff;
  color:var(--ink);
}
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:rgba(11,15,25,.28);
  box-shadow:0 0 0 4px rgba(245,158,11,.12);
}

.hint{ margin-top:6px; font-size:12px; color:rgba(11,15,25,.55); }

.span2{ grid-column:span 2; }
@media (max-width:860px){ .span2{ grid-column:span 1; } }

/* Items table */
.table-wrap{ overflow:auto; border:1px solid var(--line); border-radius:14px; }
.items{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:920px;
  background:#fff;
}
.items thead th{
  text-align:left;
  font-size:12px;
  color:rgba(11,15,25,.72);
  background:rgba(15,23,42,.02);
  border-bottom:1px solid var(--line);
  padding:10px;
  white-space:nowrap;
}
.items tbody td{
  padding:8px 10px;
  border-bottom:1px solid rgba(15,23,42,.10);
  vertical-align:middle;
}
.items tbody tr:last-child td{ border-bottom:0; }

.items input, .items select{
  width:100%;
  border:1px solid rgba(15,23,42,.14);
  border-radius:10px;
  padding:8px 10px;
  background:#fff;
  outline:none;
}
.items input:focus, .items select:focus{
  border-color:rgba(11,15,25,.28);
  box-shadow:0 0 0 3px rgba(245,158,11,.12);
}

.row-actions{ display:flex; gap:8px; justify-content:flex-end; }
.btn-mini{
  border:1px solid rgba(15,23,42,.18);
  background:#fff;
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
}
.btn-mini:hover{ filter:brightness(.98); }
.btn-mini.danger{
  border-color: rgba(239,68,68,.26);
  background: rgba(239,68,68,.06);
}

/* Totals */
.totals{
  margin-top:12px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:rgba(15,23,42,.02);
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  font-size:14px;
}
.k{ color:var(--muted); }
.hidden{ display:none !important; }

/* List remitos */
.list{ display:grid; gap:12px; }
.r-card{
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(15,23,42,.015);
  padding:14px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.r-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--line2); }
.r-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.r-title{ font-weight:900; margin:0; font-size:15.5px; }
.r-meta{ margin-top:6px; display:flex; gap:8px; flex-wrap:wrap; }
.badge{
  font-size:12px; padding:4px 10px; border-radius:999px;
  border:1px solid var(--line); background:#fff;
}
.badge.ok{ border-color:rgba(16,185,129,.30); background:rgba(16,185,129,.08); }
.badge.warn{ border-color:rgba(245,158,11,.30); background:rgba(245,158,11,.10); }
.r-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.r-actions .btn-mini{ padding:8px 10px; }

/* =========================
   PRINT (A4 3 copias)
========================= */

.print-area{ display:none; }

@media print{
  /* ocultar UI */
  .masthead, .topnav, .page > .head, .page > .panel, .page > section.panel { display:none !important; }
  body{ background:#fff !important; }
  .print-area{ display:block !important; }

  @page { size: A4; margin: 10mm; }

  .copy{
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom:8mm;
  }
  .copy-label{
    font-weight:900;
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:3mm;
  }
  .copy-doc{
    border:1px solid #000;
    padding:6mm;
  }
  .doc-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:8mm;
    margin-bottom:4mm;
  }
  .doc-brand{ display:flex; gap:4mm; align-items:center; }
  .doc-logo{
    width:18mm; height:18mm; border:1px solid #000; border-radius:3mm;
    display:flex; align-items:center; justify-content:center; font-weight:900; font-size:10px;
  }
  .doc-title{ font-weight:900; font-size:13px; }
  .doc-sub{ font-size:10.5px; }

  .doc-box{
    border:1px solid #000;
    padding:3mm;
    margin-bottom:3mm;
  }
  .doc-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:3mm;
    font-size:10.5px;
  }
  .doc-grid .span2{ grid-column:1 / -1; }

  .doc-items{
    width:100%;
    border-collapse:collapse;
    font-size:10.5px;
    margin-top:2mm;
  }
  .doc-items th, .doc-items td{
    border:1px solid #000;
    padding:1.6mm 2mm;
    vertical-align:top;
  }
  .doc-items th{ font-weight:900; background:#f2f2f2; }

  .doc-sign{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:8mm;
    margin-top:4mm;
    font-size:10.5px;
  }
  .sig-box{
    border:1px solid #000;
    padding:3mm;
    height:22mm;
  }
  .sig-line{ margin-top:10mm; border-top:1px solid #000; padding-top:2mm; }
}