:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --accent:#0ea5e9;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

.topbar{
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:12px 18px;
}
.brand{ display:flex; gap:12px; align-items:center; }
.brand__logo{ height:44px; width:auto; }
.brand__title{ font-weight:800; letter-spacing:.2px; }
.brand__subtitle{ font-size:12px; color:var(--muted); margin-top:2px; }

.layout{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:16px;
  padding:16px;
}

.sidebar{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  height: calc(100vh - 90px);
  position: sticky;
  top: 14px;
  overflow:auto;
}
.sidebar__group{ margin-bottom:16px; }
.label{ font-size:12px; color:var(--muted); margin-bottom:8px; }

.btn{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-weight:600;
  margin-bottom:10px;
}
.btn:hover{ border-color:#cbd5e1; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn--secondary{
  background:var(--accent);
  color:#fff;
  border-color:transparent;
}
.btn--ghost{ background:#f8fafc; }

textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  resize:vertical;
  font:inherit;
}

.segmented{
  display:flex;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.segmented__btn{
  flex:1;
  padding:10px 0;
  background:#fff;
  border:0;
  cursor:pointer;
  font-weight:700;
  font-size:12px;
}
.segmented__btn + .segmented__btn{ border-left:1px solid var(--line); }
.segmented__btn.is-active{
  background:#e0f2fe;
  color:#0369a1;
}

.sidebar__hint{
  border:1px dashed #cbd5e1;
  border-radius:12px;
  padding:12px;
  color:var(--muted);
  background:#fff;
}
.hint__title{ font-weight:800; color:#334155; margin-bottom:6px; }

.content{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  min-height: calc(100vh - 90px);
}
.content__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.content__title{ font-weight:800; }
.status{ font-size:12px; color:var(--muted); }

.paper-wrap{
  background:#f1f5f9;
  border-radius:12px;
  padding:14px;
  overflow:auto;
}

.paper{
  background:#fff;
  margin: 0 auto;
  border:1px solid #dbeafe;
  border-radius:10px;
  padding:18px;
  box-shadow:0 10px 25px rgba(2,8,23,.08);
}

/* tamaños en pantalla */
.paper--letter{ width: 816px; min-height: 1056px; }
.paper--halfletter{ width: 816px; min-height: 528px; }
.paper--ticket{ width: 360px; min-height: 700px; border-radius:8px; }

.invoice__top{
  display:grid;
  grid-template-columns: 1fr 1fr 140px;
  gap:16px;
  align-items:start;
  border-bottom:1px solid var(--line);
  padding-bottom:12px;
}

.invoice__logo img{ height:54px; width:auto; }

.invoice__meta{ font-size:12px; }
.invoice__metaRow{ display:flex; justify-content:space-between; gap:10px; padding:2px 0; }
.invoice__metaRow .k{ color:var(--muted); }
.invoice__metaRow .v{ font-weight:700; text-align:right; word-break:break-word; }

.invoice__qr{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
#qrBox{
  width:120px;
  height:120px;
  border:1px solid var(--line);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
}
.qr-caption{ font-size:11px; color:var(--muted); }

.invoice__parties{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin:12px 0;
}
.box{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
}
.box__title{ font-size:12px; color:var(--muted); font-weight:800; margin-bottom:6px; }
.box__line{ font-size:13px; margin:2px 0; }

.table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.table th, .table td{
  border-bottom:1px solid var(--line);
  padding:8px 6px;
  vertical-align:top;
}
.table thead th{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.5px;
}
.right{ text-align:right; }
.muted{ color:var(--muted); }

.invoice__totals{
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
}
.totals{
  width:320px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
}
.totals__row{
  display:flex;
  justify-content:space-between;
  padding:4px 0;
  font-size:13px;
}
.totals__row .k{ color:var(--muted); }
.totals__row--grand{
  border-top:1px solid var(--line);
  margin-top:6px;
  padding-top:8px;
  font-weight:900;
  font-size:14px;
}

.invoice__footer{
  margin-top:14px;
  padding-top:10px;
  border-top:1px dashed var(--line);
  font-size:12px;
  color:var(--muted);
  text-align:center;
}
.legal-line{ font-weight:700; color:#334155; margin-bottom:6px; }

/* Plantillas A/B */
body.tpl-b #invoice{
  border:1px solid #e5e7eb;
}
body.tpl-b .invoice__top{
  border-bottom:2px solid #e5e7eb;
}
body.tpl-b .box{
  border-radius:8px;
}
body.tpl-b .totals{
  border-radius:8px;
}

/* impresión */
.print-footer{ display:none; }

@media print{
  body{ background:#fff; }
  .topbar, .sidebar, .content__head, .paper-wrap{ display:none !important; }
  .content{ border:0; padding:0; }
  .paper{ box-shadow:none; border:0; border-radius:0; padding:0; }

  /* footer fijo de impresión */
  .print-footer{
    display:block;
    position:fixed;
    left:0;
    right:0;
    bottom:6mm;
    font-size:10px;
    color:#64748b;
    text-align:center;
  }
  .page-counter::after{
    content: counter(page);
  }
}

/* Tamaño de página */
@page { size: letter; margin: 10mm; }
.page-letter @page { size: letter; }
.page-halfletter @page { size: 5.5in 8.5in; }
.page-ticket @page { size: 80mm 200mm; }