:root{--bg:#eef0f3;--fg:#1d2330;--mut:#667085;--line:#d8dce3;--acc:#1f6feb;--ok:#1a7f37;--err:#c62828}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.4 "Segoe UI",system-ui,sans-serif}
.bar{position:sticky;top:0;z-index:5;display:flex;gap:10px;align-items:center;padding:10px 20px;background:#fff;border-bottom:1px solid var(--line)}
.bar h1{font-size:16px;margin:0;flex:1}
.bar .sp{flex:1}
button,.btn{font:inherit;border:1px solid var(--line);background:#fff;color:var(--fg);padding:6px 12px;border-radius:6px;cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.btn:hover{border-color:var(--acc);color:var(--acc)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.pri:hover{filter:brightness(1.1);color:#fff}
#estado{font-size:13px;color:var(--mut);min-width:120px;text-align:right}
#estado.ok{color:var(--ok)}#estado.err{color:var(--err)}

/* listado */
.wrap{max-width:1200px;margin:20px auto;padding:0 16px}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tools{padding:12px;display:flex;gap:10px}
.tools input{flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font:inherit}
table.lista{width:100%;border-collapse:collapse}
.lista th,.lista td{padding:9px 12px;text-align:left;border-top:1px solid var(--line);white-space:nowrap}
.lista th{background:#f7f8fa;font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.lista tr:hover td{background:#f5f9ff}
.lista td.acc{text-align:right}
.lista td.acc .btn{padding:4px 10px;font-size:13px}

/* hoja tipo PDF (Letter 215.9 x 279.4 mm, margen izq 20 / der 10 / sup 10) */
.hojas{padding:16px 0 60px}
.page{width:215.9mm;height:279.4mm;margin:0 auto 14px;padding:10mm 10mm 0 20mm;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.18);
  font-family:"Times New Roman",Times,serif;font-size:10pt;color:#000;position:relative;overflow:hidden}
.r{display:flex;white-space:nowrap}
.r>.c{overflow:visible;padding-left:1mm;min-width:0}
.r>.c.R{text-align:right;padding-right:1mm}
.r>.c.C{text-align:center}
.h5{height:5mm;line-height:5mm}.h4{height:4mm;line-height:4mm}.h3{height:3mm;line-height:3mm;font-size:6pt}
.sp5{height:5mm}
.b{font-weight:bold}.u{text-decoration:underline}
.sub{height:5mm}
.ed{outline:none;border-radius:2px;cursor:text;min-width:2mm;display:inline-block}
.ed:hover{background:#fff4bd}
.ed:focus{background:#ffe680;box-shadow:0 0 0 1px #d9a800}
.ed.tog,.ed.dt{cursor:pointer}
.ed:empty::after{content:"\00a0\00a0\00a0"}
.page select{font:inherit;border:0;background:#fff4bd55;padding:0;border-bottom:1px dotted #999}
.page input[type=datetime-local]{font:inherit;font-size:7pt;width:140px}
.del{color:#b00;cursor:pointer;margin-left:4px;font-family:sans-serif;font-size:8pt;visibility:hidden}
.r:hover .del{visibility:visible}
.del.ins{color:#1a7f37;font-weight:bold}
.add{font-family:"Segoe UI",sans-serif;font-size:9pt;margin:2mm 0 0 1mm}
.add button{padding:2px 8px;font-size:12px}
.nota{font-family:"Segoe UI",sans-serif;font-size:11px;color:var(--mut);max-width:215.9mm;margin:0 auto 8px;padding:0 4px}

@media print{
  @page{size:Letter;margin:0}
  body{background:#fff}
  .bar,.nota,.add,.del{display:none!important}
  .hojas{padding:0}
  .page{margin:0;box-shadow:none;break-after:page}
  .ed:hover,.ed:focus{background:none;box-shadow:none}
  .page select{appearance:none;border:0;background:none}
}