:root{
  --brand:#E0003D; --brand-ink:#B0002F; --brand-soft:#FDE6EC;
  --bg:#F3F1F2; --panel:#FFFFFF; --ink:#1E1A1C; --muted:#6B6468; --line:#E3DDE0;
  --field:#FAF8F9; --sheet:#FFFFFF; --sheet-ink:#1E1A1C;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand:#FF3366; --brand-ink:#FF6B8E; --brand-soft:#3A1520;
    --bg:#161214; --panel:#201B1E; --ink:#F2EDEF; --muted:#A79EA3; --line:#352E32;
    --field:#2A2428; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --brand:#FF3366; --brand-ink:#FF6B8E; --brand-soft:#3A1520;
  --bg:#161214; --panel:#201B1E; --ink:#F2EDEF; --muted:#A79EA3; --line:#352E32;
  --field:#2A2428; color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.45}
button,input,select,textarea{font:inherit;color:inherit}

/* barra superior */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:10px clamp(14px,3vw,28px)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--panel)}
.bar .logo{height:34px;width:auto;display:block}
.bar h1{font-size:15px;font-weight:600;margin:0;color:var(--muted);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn{border:0;border-radius:999px;padding:10px 18px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-ink)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 45%,transparent);outline-offset:2px}
.btn[disabled]{opacity:.55;cursor:progress}

/* layout */
.wrap{display:grid;grid-template-columns:minmax(340px,480px) 1fr;gap:0;min-height:calc(100vh - 60px)}
.editor{background:var(--panel);border-right:1px solid var(--line);padding:18px clamp(14px,2.5vw,26px) 60px}
.preview{padding:28px clamp(14px,3vw,40px) 60px;overflow-x:auto}
.preview-inner{position:sticky;top:84px}
@media (max-width:900px){
  .wrap{grid-template-columns:1fr}
  .editor{border-right:0;border-bottom:1px solid var(--line)}
  .preview-inner{position:static}
  .bar h1{display:none}
}

/* formulario */
details.sec{border-bottom:1px solid var(--line);padding:4px 0}
details.sec>summary{list-style:none;cursor:pointer;padding:12px 0;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:space-between}
details.sec>summary::-webkit-details-marker{display:none}
details.sec>summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s;margin-right:4px}
details.sec[open]>summary::after{transform:rotate(-135deg)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;padding-bottom:16px}
.grid .full{grid-column:1/-1}
label.f{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);font-weight:500}
label.f input,label.f select,label.f textarea{background:var(--field);border:1px solid var(--line);border-radius:8px;padding:9px 10px;color:var(--ink);font-size:15px;width:100%}
label.f textarea{resize:vertical;min-height:64px}
.hint{font-size:12.5px;color:var(--muted);margin:-4px 0 12px}

.item{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:10px;background:var(--field)}
.item .row1{display:flex;gap:8px;align-items:flex-start}
.item .row1 textarea{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-height:42px;resize:vertical;font-size:14.5px}
.item .row2{display:grid;grid-template-columns:.8fr 1.4fr .8fr .9fr;gap:8px;margin-top:8px}
.item .row2 label{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:3px}
.item .row2 input,.item .row2 select{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:7px 8px;width:100%;font-size:14px}
.item .tot{text-align:right;font-weight:700;font-size:14px;margin-top:8px;font-variant-numeric:tabular-nums}
.icon-btn{background:transparent;border:0;cursor:pointer;color:var(--muted);padding:6px;border-radius:6px;line-height:0}
.icon-btn:hover{color:var(--brand);background:var(--brand-soft)}
.add{width:100%;justify-content:center;margin-bottom:16px}

/* hoja de factura */
.sheet{background:var(--sheet);color:var(--sheet-ink);width:min(100%,800px);margin:0 auto;aspect-ratio:216/279;box-shadow:0 1px 2px rgba(30,26,28,.08),0 12px 40px rgba(30,26,28,.12);border-radius:4px;container-type:inline-size;overflow:hidden;position:relative}
.s{position:absolute;inset:0;padding:6.5cqw 6.5cqw 5cqw;font-size:1.55cqw;line-height:1.4;display:flex;flex-direction:column}
.s .top{display:flex;justify-content:space-between;align-items:flex-start;gap:4cqw}
.s .top img,.s .top svg{width:22cqw;height:auto}
.s .em{text-align:right;font-size:1.45cqw;color:#4a4346}
.s .em b{display:block;font-size:1.9cqw;color:#1E1A1C}
.s .title{margin-top:4cqw;display:flex;justify-content:space-between;align-items:flex-end;border-bottom:.35cqw solid #E0003D;padding-bottom:1.4cqw}
.s .title h2{margin:0;font-size:3.6cqw;font-weight:800;letter-spacing:-.02em;color:#E0003D;line-height:1}
.s .title .num{font-size:2.2cqw;font-weight:700;font-variant-numeric:tabular-nums}
.s .meta{display:grid;grid-template-columns:1.4fr 1fr;gap:3cqw;margin-top:2.6cqw}
.s .meta h4{margin:0 0 .6cqw;font-size:1.3cqw;color:#E0003D;font-weight:700}
.s .meta p{margin:0}
.s .kv{display:grid;grid-template-columns:auto 1fr;gap:.3cqw 1.6cqw}
.s .kv span:nth-child(odd){color:#6B6468}
.s table{width:100%;border-collapse:collapse;margin-top:3cqw;font-variant-numeric:tabular-nums}
.s th{background:#E0003D;color:#fff;font-weight:700;text-align:left;padding:1cqw 1.2cqw;font-size:1.35cqw}
.s th.r,.s td.r{text-align:right;white-space:nowrap}
.s td{padding:1cqw 1.2cqw;border-bottom:.12cqw solid #EEE6E9;vertical-align:top}
.s tbody tr:nth-child(even) td{background:#FDF5F7}
.s .bottom{display:grid;grid-template-columns:1.2fr 1fr;gap:3cqw;margin-top:2.6cqw}
.s .totals{font-variant-numeric:tabular-nums}
.s .totals div{display:flex;justify-content:space-between;padding:.45cqw 0}
.s .totals .grand{border-top:.3cqw solid #1E1A1C;margin-top:.6cqw;padding-top:1cqw;font-weight:800;font-size:2cqw}
.s .totals .grand span:last-child{color:#E0003D}
.s .words{font-size:1.35cqw;color:#4a4346;background:#FDF5F7;padding:1.2cqw 1.4cqw;border-radius:.6cqw}
.s .words b{color:#1E1A1C}
.s .notes{margin-top:1.6cqw;font-size:1.35cqw;color:#4a4346;white-space:pre-wrap}
.s .foot{margin-top:auto;padding-top:2cqw;border-top:.12cqw solid #EEE6E9;font-size:1.2cqw;color:#6B6468;display:flex;justify-content:space-between;gap:3cqw}
.s .foot .res{white-space:pre-wrap}
.overflow-note{font-size:13px;color:var(--muted);text-align:center;margin-top:12px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--panel);padding:10px 16px;border-radius:10px;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:50;max-width:90vw}
.toast.show{opacity:1}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* inicio de sesión */
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:32px 28px;width:min(100%,380px);display:flex;flex-direction:column;gap:14px}
.login-logo{width:140px;height:auto;margin:0 auto 4px}
.login-card h1{margin:0;font-size:22px;text-align:center}
.login-sub{margin:-6px 0 4px;color:var(--muted);text-align:center;font-size:14px}
.login-card .btn{justify-content:center;margin-top:4px}
.login-err{margin:0;min-height:1.2em;color:var(--brand);font-size:14px;font-weight:600}
@media (max-width:900px){ #btnLogout{padding:10px 12px} }
.login-card label.f[for]{margin-bottom:-10px}
.pass-wrap{position:relative}
.pass-wrap input{background:var(--field);border:1px solid var(--line);border-radius:8px;padding:9px 46px 9px 10px;color:var(--ink);font-size:15px;width:100%}
.pass-toggle{position:absolute;top:50%;right:4px;transform:translateY(-50%);background:transparent;border:0;cursor:pointer;color:var(--muted);padding:8px;border-radius:6px;line-height:0}
.pass-toggle:hover{color:var(--brand);background:var(--brand-soft)}
.pass-toggle:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 45%,transparent);outline-offset:1px}
.pass-toggle .ojo-off{display:none}
.pass-toggle[aria-pressed="true"] .ojo{display:none}
.pass-toggle[aria-pressed="true"] .ojo-off{display:inline}