/* Panel de facturacion. Sin dependencias externas (la CSP solo permite 'self'). Claro y oscuro segun el sistema. */
:root{--bg:#f6f5f1;--panel:#fff;--ink:#1d1d1b;--muted:#5b5b55;--line:#d4d2c9;--accent:#1f4e79;--accent-ink:#fff;--soft:#eef2f6;--ok:#22603a;--okbg:#eaf4ed;--bad:#a0362a;--badbg:#fbeeeb;--warn:#7a5a00;--warnbg:#fff4d6;--focus:#1f4e79}
@media (prefers-color-scheme:dark){:root{--bg:#141517;--panel:#1d1f22;--ink:#e9e7e1;--muted:#a9a79f;--line:#3a3c41;--accent:#8bb8e0;--accent-ink:#10151a;--soft:#22282f;--ok:#86cf9f;--okbg:#18261d;--bad:#f0a191;--badbg:#2c1916;--warn:#e7c35f;--warnbg:#2a2412;--focus:#8bb8e0}}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.saltar{position:absolute;left:-9999px;top:0;background:var(--panel);padding:8px 12px;z-index:10}
.saltar:focus{left:8px;top:8px}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:16px;height:16px;vertical-align:-3px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* estructura */
.amb{background:var(--warnbg);color:var(--warn);border-bottom:1px solid var(--line);padding:6px 16px;font-weight:600;font-size:.88rem}
.barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--panel);border-bottom:1px solid var(--line);padding:8px 16px}
.barra .marca{font-weight:700;margin-right:auto;text-decoration:none;color:var(--ink)}
.barra form{display:flex;gap:6px;align-items:center;margin:0}
.barra select{max-width:260px}
.quien{color:var(--muted);font-size:.9rem}
.cuerpo{display:grid;grid-template-columns:200px 1fr;min-height:calc(100vh - 90px)}
nav.menu{background:var(--panel);border-right:1px solid var(--line);padding:12px 8px}
nav.menu ul{list-style:none;margin:0;padding:0}
nav.menu a{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:6px;color:var(--ink);text-decoration:none}
nav.menu a:hover{background:var(--soft)}
nav.menu a[aria-current=page]{background:var(--accent);color:var(--accent-ink);font-weight:600}
main{padding:18px 22px;min-width:0;max-width:1200px}
@media (max-width:820px){.cuerpo{grid-template-columns:1fr}nav.menu{border-right:0;border-bottom:1px solid var(--line);padding:6px}nav.menu ul{display:flex;flex-wrap:wrap;gap:2px}main{padding:14px 16px}}
h1{font-size:1.45rem;margin:0 0 12px}
h2{font-size:1.1rem;margin:22px 0 8px}
p{margin:6px 0}
.sub{color:var(--muted);font-size:.88rem}
/* cajas, avisos */
.caja{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin:12px 0}
.aviso{border-radius:8px;padding:10px 14px;margin:10px 0;border:1px solid var(--line);display:flex;gap:8px;align-items:flex-start}
.aviso.ok{background:var(--okbg);color:var(--ok)}
.aviso.mal{background:var(--badbg);color:var(--bad)}
.aviso.alerta{background:var(--warnbg);color:var(--warn)}
.aviso p,.aviso ul{margin:0}
.aviso ul{padding-left:18px}
.errores{background:var(--badbg);color:var(--bad);border:1px solid var(--bad);border-radius:8px;padding:10px 14px;margin:10px 0}
.errores h2{margin:0 0 4px;font-size:1rem}
.errores ul{margin:0;padding-left:18px}
.errores a{color:var(--bad)}
/* tarjetas del panel */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:10px 0}
.tarjeta{display:block;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px;color:var(--ink);text-decoration:none}
.tarjeta:hover{border-color:var(--accent)}
.tarjeta .rot{font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.tarjeta .num{font-size:2rem;font-weight:700;line-height:1.1;display:block;margin:4px 0;font-variant-numeric:tabular-nums}
.tarjeta .num.monto{font-size:1.3rem;white-space:nowrap}
.tarjeta.mal{border-color:var(--bad)}
.tarjeta.mal .num{color:var(--bad)}
.tarjeta.ok .num{color:var(--ok)}
.dos{display:grid;grid-template-columns:2fr 1fr;gap:12px}
@media (max-width:900px){.dos{grid-template-columns:1fr}}
/* tablas */
.tabla{overflow-x:auto;position:relative}
table{border-collapse:collapse;width:100%;background:var(--panel);font-size:.92rem}
th,td{border-bottom:1px solid var(--line);padding:7px 9px;text-align:left;vertical-align:top}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);background:var(--soft)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.nw{white-space:nowrap}
.cortar{overflow-wrap:anywhere}
tr:last-child td{border-bottom:0}
.estado{display:inline-flex;gap:5px;align-items:center;font-weight:600;white-space:nowrap}
.estado.aceptado{color:var(--ok)}.estado.rechazado,.estado.anulado{color:var(--bad)}.estado.pendiente,.estado.sin_envio,.estado.importado{color:var(--muted)}
/* formularios */
label{display:block;font-weight:600;margin:0 0 3px;font-size:.9rem}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=search],input[type=number],input:not([type]),select,textarea{width:100%;padding:7px 9px;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--muted);border-radius:6px;min-height:36px}
input[aria-invalid=true],select[aria-invalid=true]{border:2px solid var(--bad)}
.campo{margin:0 0 10px;min-width:0}
.campo .err{color:var(--bad);font-size:.85rem;margin-top:3px;display:block}
.campo .ayuda{color:var(--muted);font-size:.82rem;margin-top:3px;display:block}
.fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.marcar{display:flex;gap:8px;align-items:center;font-weight:400}
.marcar input{width:auto;min-height:0}
fieldset{border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin:12px 0;background:var(--panel);min-width:0}
legend{font-weight:700;padding:0 6px}
.boton,button{display:inline-flex;gap:6px;align-items:center;font:inherit;font-weight:600;padding:7px 14px;border-radius:6px;border:1px solid var(--accent);background:var(--panel);color:var(--accent);cursor:pointer;text-decoration:none;min-height:36px}
.boton.pri,button.pri{background:var(--accent);color:var(--accent-ink)}
.boton.peligro,button.peligro{border-color:var(--bad);color:var(--bad)}
button:disabled{opacity:.55;cursor:not-allowed}
.acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}
.enlinea{display:inline}
.periodos{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:4px 0 10px}
.periodos a{padding:4px 10px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);background:var(--panel)}
.periodos input,.acciones input[type=search]{width:auto}
.periodos a[aria-current=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
/* formulario de emitir */
.emitir{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:14px;align-items:start}
.emitir>div{min-width:0}
@media (max-width:1250px){.emitir{grid-template-columns:minmax(0,1fr)}.resumen{position:static}}
table.items select{min-width:120px}
.resumen{position:sticky;top:10px}
.resumen table td{border:0;padding:3px 0}
.resumen .total td{font-weight:700;font-size:1.1rem;border-top:1px solid var(--line);padding-top:6px}
table.items td{padding:4px}
table.items input,table.items select{min-height:32px;padding:4px 6px}
table.items .desc{min-width:180px}
table.items .corto{width:90px}
table.items .unidad{width:64px}
.resultados{list-style:none;margin:4px 0 0;padding:0;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.resultados:empty{display:none}
.resultados button{width:100%;justify-content:flex-start;border:0;border-bottom:1px solid var(--line);border-radius:0;font-weight:400;color:var(--ink)}
.enlace-unico{word-break:break-all;background:var(--soft);padding:8px;border-radius:6px;font-family:Consolas,monospace;font-size:.9rem}
details summary{cursor:pointer;color:var(--muted)}
.pie{color:var(--muted);font-size:.8rem;margin-top:24px}
.solo{max-width:420px;margin:40px auto;padding:0 16px}
dl.datos{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:0}
dl.datos dt{color:var(--muted)}
dl.datos dd{margin:0}
@media print{nav.menu,.barra,.acciones,.amb{display:none}.cuerpo{display:block}}