/* ============================================================
   VeriFactu MVP · app.css
   Hoja única para TODAS las pantallas. Se externaliza a
   /assets/app.css tal cual. Sin estilos inline en el HTML.
   Tema del shell claro/oscuro vía [data-theme]; el documento
   factura es SIEMPRE claro/imprimible.
   ============================================================ */

/* ---- Fuentes (aislado arriba; sustituir por @font-face autoalojado en prod) ---- */
/* ---- Fuentes autoalojadas (variable, CSP-safe: solo /fonts self) ---- */
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url('/fonts/inter-latin-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url('/fonts/inter-latin-ext-var.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-display:swap;font-weight:300 700;src:url('/fonts/space-grotesk-latin-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-display:swap;font-weight:300 700;src:url('/fonts/space-grotesk-latin-ext-var.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:100 800;src:url('/fonts/jetbrains-mono-latin-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:100 800;src:url('/fonts/jetbrains-mono-latin-ext-var.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --r-sm:6px; --r-md:9px; --r-lg:13px; --r-xl:18px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px;
  --ease:cubic-bezier(.16,1,.3,1); --t-fast:110ms; --t-ctx:200ms;
}
[data-theme="light"]{
  --bg:oklch(0.985 0.003 270); --surface:oklch(1 0 0); --surface-2:oklch(0.972 0.004 270); --surface-3:oklch(0.955 0.005 270);
  --border:oklch(0.915 0.005 270); --border-2:oklch(0.88 0.006 270);
  --text:oklch(0.26 0.012 270); --text-2:oklch(0.50 0.012 270); --text-3:oklch(0.64 0.010 270);
  --accent:#DA102F; --accent-2:#b50d27; --accent-fg:#ffffff;
  --accent-weak:#fdebed; --accent-line:#f3c1c8;
  --ok:oklch(0.58 0.13 155); --ok-weak:oklch(0.955 0.04 155);
  --warn:oklch(0.66 0.14 65); --warn-weak:oklch(0.96 0.045 80);
  --danger:oklch(0.55 0.20 25); --danger-weak:oklch(0.955 0.03 25);
  --info:oklch(0.55 0.13 240); --info-weak:oklch(0.955 0.03 240);
  --stroke:oklch(1 0 0 / 0.7);
  --shadow:0 1px 2px oklch(0.2 0.02 270 / .06), 0 4px 16px oklch(0.2 0.02 270 / .05);
  --shadow-pop:0 8px 40px oklch(0.2 0.02 270 / .16);
}
[data-theme="dark"]{
  --bg:oklch(0.175 0.006 270); --surface:oklch(0.205 0.007 270); --surface-2:oklch(0.235 0.008 270); --surface-3:oklch(0.265 0.009 270);
  --border:oklch(0.295 0.010 270); --border-2:oklch(0.345 0.012 270);
  --text:oklch(0.955 0.005 270); --text-2:oklch(0.72 0.010 270); --text-3:oklch(0.58 0.010 270);
  --accent:#ef4559; --accent-2:#f47080; --accent-fg:#ffffff;
  --accent-weak:#441219; --accent-line:#6d2530;
  --ok:oklch(0.72 0.14 155); --ok-weak:oklch(0.30 0.05 155);
  --warn:oklch(0.80 0.13 75); --warn-weak:oklch(0.33 0.05 80);
  --danger:oklch(0.68 0.18 25); --danger-weak:oklch(0.32 0.06 25);
  --info:oklch(0.70 0.12 240); --info-weak:oklch(0.30 0.05 240);
  --stroke:oklch(1 0 0 / 0.06);
  --shadow:0 1px 2px oklch(0 0 0 / .25), 0 6px 22px oklch(0 0 0 / .28);
  --shadow-pop:0 12px 50px oklch(0 0 0 / .55);
}

*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{font-family:var(--font); background:var(--bg); color:var(--text); font-size:14px; line-height:20px; -webkit-font-smoothing:antialiased; letter-spacing:-0.006em}
.num{font-variant-numeric:tabular-nums; font-family:var(--mono); letter-spacing:0}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
input,select,textarea{font-family:inherit; color:inherit}
a{color:inherit; text-decoration:none}
::selection{background:var(--accent-weak); color:var(--accent-2)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition-duration:1ms !important; animation-duration:1ms !important}}
.hidden{display:none !important}
.mb-4{margin-bottom:var(--s4)}
.mt-2{margin-top:10px}
.mt-1{margin-top:8px}
.mt-3{margin-top:12px}
.mt-4{margin-top:16px}
.mt-5{margin-top:14px}
.optfield.flush{border-top:none; padding-bottom:0}
.kbd{font-family:var(--mono); font-size:11px; line-height:16px; padding:1px 6px; border-radius:5px; background:var(--surface-3); color:var(--text-3); border:1px solid var(--border)}

/* ============ SHELL "L invertida" ============ */
.app{display:grid; grid-template-columns:var(--side,232px) 1fr; grid-template-rows:48px 1fr; height:100vh; transition:grid-template-columns var(--t-ctx) var(--ease); overflow:hidden}
.app[data-collapsed="true"]{--side:56px}
.app[data-shell="bare"]{display:block; height:100vh; overflow:auto}

.topbar{grid-column:1/-1; display:flex; align-items:center; gap:var(--s3); padding:0 var(--s3) 0 var(--s4); border-bottom:1px solid var(--border); background:var(--surface); position:relative; z-index:30}
.iconbtn{width:30px; height:30px; border-radius:var(--r-sm); display:grid; place-items:center; color:var(--text-2); transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease)}
.iconbtn:hover{background:var(--surface-3); color:var(--text)} .iconbtn svg{width:17px; height:17px}
.crumb{display:flex; align-items:center; gap:var(--s2); font-size:13px; color:var(--text-3)}
.crumb b{color:var(--text); font-weight:560} .crumb .sep{opacity:.6}
.tb-search{margin:0 auto; width:min(420px,38vw); height:32px; border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; gap:var(--s2); padding:0 var(--s3); color:var(--text-3); font-size:13px; transition:border-color var(--t-fast) var(--ease)}
.tb-search:hover{border-color:var(--border-2)} .tb-search svg{width:15px; height:15px; opacity:.7} .tb-search .kbd{margin-left:auto}
.tb-right{display:flex; align-items:center; gap:var(--s1)}
.ic-sun{display:none} [data-theme="dark"] .ic-sun{display:block} [data-theme="dark"] .ic-moon{display:none}
.avatar{width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--accent-fg); display:grid; place-items:center; font-size:11px; font-weight:600; margin-left:var(--s2)}

.sidebar{grid-row:2; grid-column:1; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:var(--s3) var(--s2); overflow:hidden}
.brand{display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s2) var(--s4); white-space:nowrap}
.brand .mark{width:26px; height:26px; border-radius:7px; flex:none; background:#10141c; display:grid; place-items:center; color:var(--accent); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.brand .mark svg{width:17px; height:17px}
.brand .name{font-family:'Space Grotesk',var(--font); font-weight:600; font-size:15px; letter-spacing:-0.03em} .brand .name b{color:var(--accent-2); font-weight:700}
.create{margin:0 var(--s1) var(--s4); height:34px; border-radius:var(--r-md); background:var(--accent); color:var(--accent-fg); display:flex; align-items:center; gap:var(--s2); padding:0 var(--s3); font-weight:560; font-size:13px; white-space:nowrap; box-shadow:0 1px 0 oklch(1 0 0 / .15) inset, var(--shadow); transition:background var(--t-fast) var(--ease)}
.create:hover{background:var(--accent-2)} .create svg{width:15px; height:15px} .create .kbd{margin-left:auto; background:oklch(1 0 0 / .18); border-color:transparent; color:var(--accent-fg)}
.nav{display:flex; flex-direction:column; gap:1px}
.nav-label{font-size:11px; font-weight:560; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); padding:var(--s4) var(--s3) var(--s2); white-space:nowrap}
.navitem{display:flex; align-items:center; gap:10px; height:32px; padding:0 var(--s3); border-radius:var(--r-sm); color:var(--text-2); font-size:13.5px; font-weight:480; white-space:nowrap; transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease)}
.navitem svg{width:17px; height:17px; flex:none; opacity:.85}
.navitem:hover{background:var(--surface-2); color:var(--text)}
.navitem[aria-current="page"]{background:var(--accent-weak); color:var(--accent-2); font-weight:560}
.navitem .soon{margin-left:auto; font-size:10px; font-weight:600; color:var(--text-3); background:var(--surface-3); border:1px solid var(--border); padding:1px 6px; border-radius:5px}
.app[data-collapsed="true"] .navitem span, .app[data-collapsed="true"] .nav-label, .app[data-collapsed="true"] .brand .name, .app[data-collapsed="true"] .create span, .app[data-collapsed="true"] .side-foot, .app[data-collapsed="true"] .navitem .soon{display:none}
.app[data-collapsed="true"] .create,.app[data-collapsed="true"] .navitem{justify-content:center; padding:0}
.side-foot{margin-top:auto; padding:var(--s2)}
.plan{border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s3); font-size:12px; color:var(--text-2); background:var(--surface-2); white-space:nowrap; overflow:hidden}
.plan .bar{height:4px; border-radius:3px; background:var(--surface-3); margin:var(--s2) 0 6px; overflow:hidden} .plan .bar i{display:block; height:100%; width:62%; background:var(--accent); border-radius:3px}

.canvas{grid-row:2; grid-column:2; display:grid; grid-template-rows:1fr auto; overflow:hidden; min-width:0}
.canvas[data-foot="false"]{grid-template-rows:1fr}

/* ============ COMPONENTES COMUNES ============ */
.btn{height:38px; padding:0 16px; border-radius:var(--r-md); font-size:13.5px; font-weight:540; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; flex-shrink:0; gap:var(--s2); transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease)}
.btn:active{transform:scale(.985) translateY(.5px)}
.btn svg{width:16px; height:16px}
.btn.ghost{color:var(--text-2); border:1px solid var(--border)} .btn.ghost:hover{background:var(--surface-2); border-color:var(--border-2); color:var(--text)}
.btn.primary{background:var(--accent); color:var(--accent-fg); box-shadow:0 1px 0 oklch(1 0 0 /.15) inset, var(--shadow)} .btn.primary:hover{background:var(--accent-2)}
.btn.sm{height:32px; padding:0 12px; font-size:13px}
.btn.block{width:100%}

.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:12px; color:var(--text-2); font-weight:500}
.field .hint{font-size:11.5px; color:var(--text-3)}
.input,.select,.textarea{border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--border); padding:0 10px; font-size:13.5px; color:var(--text); width:100%; transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease)}
.input,.select{height:34px}
.textarea{min-height:72px; resize:vertical; padding:10px; line-height:18px}
.input:hover,.select:hover{border-color:var(--border-2)}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak)}
.input::placeholder,.textarea::placeholder{color:var(--text-3)}
.select{appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2399a' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 9px center; padding-right:30px; cursor:pointer}
.input:read-only{background:var(--surface-2); color:var(--text-2); cursor:default}

.statepill{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:540; color:var(--text-2); background:var(--surface-2); border:1px solid var(--border); padding:4px 10px; border-radius:999px}
.statepill .dot{width:6px; height:6px; border-radius:50%; background:var(--warn)}

/* chips de estado / AEAT */
.chip-st{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:560; padding:3px 9px; border-radius:999px; border:1px solid var(--border); white-space:nowrap}
.chip-st .d{width:6px; height:6px; border-radius:50%; background:currentColor}
.chip-st.draft{color:var(--text-2); background:var(--surface-2)}
.chip-st.ok{color:var(--ok); background:var(--ok-weak); border-color:transparent}
.chip-st.pend{color:var(--warn); background:var(--warn-weak); border-color:transparent}
.chip-st.err{color:var(--danger); background:var(--danger-weak); border-color:transparent}
.chip-st.info{color:var(--info); background:var(--info-weak); border-color:transparent}
.chip-st.muted{color:var(--text-3); background:transparent}
.chip-st.anul{color:var(--text-3); background:var(--surface-2); text-decoration:line-through}

.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(10px); background:var(--text); color:var(--bg); font-size:13px; font-weight:500; padding:11px 16px; border-radius:var(--r-md); box-shadow:var(--shadow-pop); display:flex; align-items:center; gap:var(--s2); z-index:120; opacity:0; pointer-events:none; transition:opacity var(--t-ctx) var(--ease), transform var(--t-ctx) var(--ease)}
.toast[data-show="true"]{opacity:1; transform:translateX(-50%) translateY(0)} .toast svg{width:16px; height:16px; color:var(--ok)}

/* ============ LOGIN ============ */
.auth{min-height:100vh; display:grid; place-items:center; padding:var(--s6); background:radial-gradient(900px circle at 50% -5%, var(--accent-weak), transparent 55%)}
.auth-card{width:min(400px,100%)}
.auth-brand{display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:var(--s6)}
.auth-brand .mark{width:32px; height:32px; border-radius:8px; background:linear-gradient(150deg,var(--accent),var(--accent-2)); display:grid; place-items:center; color:var(--accent-fg); font-weight:700; font-size:16px}
.auth-brand .name{font-weight:600; font-size:19px; letter-spacing:-0.02em} .auth-brand .name b{color:var(--accent-2)}
.auth-box{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:var(--s8)}
.auth-box h1{font-size:19px; font-weight:600; letter-spacing:-0.02em; margin-bottom:4px}
.auth-box .sub{font-size:13px; color:var(--text-3); margin-bottom:var(--s6)}
.auth-form{display:flex; flex-direction:column; gap:var(--s4)}
.auth-form .row{display:flex; align-items:center; justify-content:space-between}
.auth-form .link{font-size:12.5px; color:var(--accent-2); font-weight:540}
.auth-error{display:none; gap:9px; align-items:flex-start; padding:11px 12px; border-radius:var(--r-md); background:var(--danger-weak); border:1px solid var(--border); font-size:12.5px; color:var(--text-2); line-height:1.5}
.auth-error.show{display:flex}
.auth-error svg{width:15px; height:15px; flex:none; color:var(--danger); margin-top:1px}
.auth-foot{text-align:center; font-size:12px; color:var(--text-3); margin-top:var(--s4)}

/* ============ PÁGINAS CON CABECERA ============ */
.page{overflow-y:auto; padding:var(--s8)}
.page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s6); max-width:1180px}
.page-head .pt{font-size:22px; font-weight:600; letter-spacing:-0.025em}
.page-head .ps{font-size:13px; color:var(--text-3); margin-top:3px}
.page-actions{display:flex; align-items:center; gap:var(--s2)}

/* listado */
.toolbar{display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s4); max-width:1180px; flex-wrap:wrap}
.toolbar .grow{flex:1}
.searchbox{height:34px; min-width:240px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; gap:var(--s2); padding:0 10px; color:var(--text-3)}
.searchbox svg{width:15px; height:15px} .searchbox input{border:none; background:none; height:100%; flex:1; font-size:13.5px}
.searchbox input:focus{outline:none}
.filterbtn{height:34px; padding:0 12px; border-radius:var(--r-sm); border:1px solid var(--border); color:var(--text-2); font-size:13px; font-weight:500; display:inline-flex; align-items:center; gap:7px}
.filterbtn:hover{background:var(--surface-2); color:var(--text)} .filterbtn svg{width:15px; height:15px}

.tablecard{border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); overflow:hidden; max-width:1180px; box-shadow:var(--shadow)}
.ftable{width:100%; border-collapse:collapse}
.ftable thead th{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); text-align:left; padding:11px 16px; background:var(--surface-2); border-bottom:1px solid var(--border); white-space:nowrap}
.ftable thead th.r{text-align:right}
.ftable tbody td{padding:13px 16px; border-bottom:1px solid var(--border); font-size:13.5px; vertical-align:middle}
.ftable tbody td.r{text-align:right}
.ftable tbody tr{cursor:pointer; transition:background var(--t-fast) var(--ease)}
.ftable tbody tr:hover{background:var(--surface-2)}
.ftable tbody tr:last-child td{border-bottom:none}
.ftable .fnum{font-weight:560; color:var(--text); white-space:nowrap}
.ftable .ftype{font-size:11px; font-weight:600; color:var(--text-3); border:1px solid var(--border); border-radius:5px; padding:1px 6px}
.ftable .ftot{font-weight:560; white-space:nowrap}
.rowlink{color:inherit}

.pager{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-top:1px solid var(--border); background:var(--surface-2)}
.pager .info{font-size:12.5px; color:var(--text-3)}
.pager .pages{display:flex; gap:4px}
.pager .pg{min-width:30px; height:30px; padding:0 8px; border-radius:var(--r-sm); border:1px solid var(--border); font-size:13px; color:var(--text-2); display:inline-flex; align-items:center; justify-content:center}
.pager .pg:hover{background:var(--surface); color:var(--text)}
.pager .pg[aria-current="true"]{background:var(--accent-weak); color:var(--accent-2); border-color:transparent; font-weight:560}
.pager .pg[disabled]{opacity:.4; cursor:default}

.empty{max-width:1180px; border:1px dashed var(--border-2); border-radius:var(--r-lg); padding:var(--s8); display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s3); color:var(--text-3)}
.empty .ill{width:54px; height:54px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border); display:grid; place-items:center; color:var(--text-3)}
.empty .ill svg{width:26px; height:26px}
.empty h3{font-size:15px; color:var(--text); font-weight:600}
.empty p{font-size:13px; max-width:340px; line-height:1.5}

/* ============ EDITOR (split) ============ */
.work{display:grid; grid-template-columns:1fr minmax(440px,0.92fr); overflow:hidden; min-height:0}
.editor{overflow-y:auto; padding:var(--s6) var(--s8); scrollbar-width:thin}
.editor::-webkit-scrollbar{width:9px} .editor::-webkit-scrollbar-thumb{background:var(--border-2); border-radius:6px; border:3px solid var(--bg)}
.ed-head{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s6)}
.ed-title{font-size:20px; line-height:28px; font-weight:600; letter-spacing:-0.02em}
.ed-sub{font-size:13px; color:var(--text-3); margin-top:2px}
.section{margin-bottom:var(--s6)}
.sec-h{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); margin-bottom:var(--s3); display:flex; align-items:center; gap:8px}
.sec-h .ln{flex:1; height:1px; background:var(--border)}
.sec-h .opt{font-size:10px; color:var(--text-3); background:var(--surface-2); border:1px solid var(--border); padding:1px 7px; border-radius:5px; letter-spacing:.02em; text-transform:none; font-weight:500}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3)}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--s3)}

.clientcard{display:flex; align-items:center; gap:var(--s3); padding:var(--s3); border-radius:var(--r-md); background:var(--surface); border:1px solid var(--border)}
.clientcard .cav{width:36px; height:36px; border-radius:9px; background:var(--accent-weak); color:var(--accent-2); display:grid; place-items:center; font-weight:600; font-size:13px; flex:none}
.clientcard .cn{font-weight:560; font-size:13.5px} .clientcard .cd{font-size:12px; color:var(--text-3)}
.clientcard .change{margin-left:auto; font-size:12px; color:var(--accent-2); font-weight:540; padding:6px 10px; border-radius:var(--r-sm)} .clientcard .change:hover{background:var(--accent-weak)}
.clientfields{display:grid; grid-template-columns:1fr 200px; gap:var(--s3); margin-top:var(--s3)}
.destseg,.segline{display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:3px; gap:3px}
.destseg{margin-bottom:var(--s3)}
.destseg button,.segline button{height:30px; padding:0 12px; border-radius:6px; font-size:12.5px; font-weight:520; color:var(--text-2)}
.destseg button[aria-pressed="true"],.segline button[aria-pressed="true"]{background:var(--surface); color:var(--accent-2); box-shadow:var(--shadow)}
.segline{width:fit-content}
.note-inline{display:flex; gap:9px; padding:11px 12px; border-radius:var(--r-md); background:var(--warn-weak); border:1px solid var(--border); font-size:12.5px; color:var(--text-2); line-height:1.5; margin-top:var(--s3)}
.note-inline svg{width:15px; height:15px; flex:none; color:var(--warn); margin-top:1px}

.lines{border-radius:var(--r-md); overflow:hidden; background:var(--surface); border:1px solid var(--border)}
.lhead,.lrow{display:grid; grid-template-columns:1fr 58px 96px 70px 96px 28px; align-items:center; gap:var(--s2); padding:0 var(--s3)}
.lhead{height:34px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); border-bottom:1px solid var(--border)}
.lhead .r,.lrow .r{text-align:right}
.lrow{min-height:42px} .lrow + .lrow{box-shadow:0 -1px 0 var(--border)} .lrow:hover{background:var(--surface-2)}
.cellinput{border:1px solid transparent; background:transparent; height:30px; border-radius:var(--r-sm); padding:0 8px; width:100%; font-size:13px; color:var(--text)}
.cellinput:hover{border-color:var(--border)} .cellinput:focus{outline:none; border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 3px var(--accent-weak)}
.cellinput.r{text-align:right}
.cellsel{border:1px solid transparent; background:transparent; height:30px; border-radius:var(--r-sm); font-size:13px; color:var(--text-2); width:100%; padding:0 4px; appearance:none; text-align:right}
.cellsel:hover{border-color:var(--border)} .cellsel:focus{outline:none; border-color:var(--accent); background:var(--surface)}
.lamount{text-align:right; font-size:13px; padding-right:8px}
.delrow{width:24px; height:24px; border-radius:6px; display:grid; place-items:center; color:var(--text-3); opacity:0; transition:opacity var(--t-fast) var(--ease)} .delrow svg{width:14px; height:14px}
.lrow:hover .delrow{opacity:1} .delrow:hover{background:var(--danger-weak); color:var(--danger)}
.addline{display:flex; align-items:center; gap:var(--s2); margin-top:var(--s3); font-size:13px; color:var(--text-2); font-weight:500; padding:8px 10px; border-radius:var(--r-sm); border:1px dashed var(--border-2); transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease)}
.addline:hover{border-color:var(--accent-line); color:var(--accent-2)} .addline svg{width:15px; height:15px} .addline .kbd{margin-left:auto}

/* fiscal panel */
.fiscal{border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); overflow:hidden}
.lvl1{padding:var(--s4); display:flex; flex-direction:column; gap:var(--s4)}
.taxline{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.fl-lbl{font-size:12px; color:var(--text-2); font-weight:540; min-width:104px}
.chip{position:relative; display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 12px; border-radius:999px; background:var(--accent-weak); color:var(--accent-2); font-weight:600; font-size:13px; border:1px solid var(--accent-line)}
.chip .tax{font-family:var(--mono); letter-spacing:.02em}
.chip .ed svg{width:13px; height:13px; display:block; opacity:.7}
.chip .tip{position:absolute; bottom:calc(100% + 8px); left:0; width:240px; background:var(--text); color:var(--bg); font-size:11.5px; font-weight:450; line-height:1.5; padding:9px 11px; border-radius:var(--r-md); box-shadow:var(--shadow-pop); opacity:0; pointer-events:none; transform:translateY(4px); transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); z-index:5; letter-spacing:0}
.chip .tip b{color:var(--bg)} .chip .tip::after{content:""; position:absolute; top:100%; left:18px; border:6px solid transparent; border-top-color:var(--text)}
.chip:hover .tip{opacity:1; transform:translateY(0)}
.rateinput{display:flex; align-items:center; gap:6px}
.rateinput .select{width:auto; min-width:120px}
.tag-ej{font-size:10px; font-weight:600; color:var(--warn); background:var(--warn-weak); padding:2px 7px; border-radius:5px; letter-spacing:.02em; white-space:nowrap}
.opbadge{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-2)}
.opbadge .d{width:7px; height:7px; border-radius:50%; background:var(--ok)}
.opbadge.exenta .d{background:var(--warn)} .opbadge.nosujeta .d{background:var(--text-3)}
.opbadge b{color:var(--text); font-weight:560}
.optrow{display:flex; align-items:flex-start; gap:var(--s3)}
.optrow .ol{flex:1} .optrow .ot{font-size:13.5px} .optrow .od{font-size:11.5px; color:var(--text-3); margin-top:1px}
.toggle{width:38px; height:22px; border-radius:999px; background:var(--surface-3); position:relative; transition:background var(--t-fast) var(--ease); flex:none; margin-top:1px}
.toggle i{position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow); transition:transform var(--t-ctx) var(--ease)}
.toggle[data-on="true"]{background:var(--accent)} .toggle[data-on="true"] i{transform:translateX(16px)}
.irpfPct{display:flex; align-items:center; gap:8px; margin-top:var(--s3); max-width:280px}
.irpfPct .select{width:auto; flex:1}
.acc{border-top:1px solid var(--border)}
.acc-h{width:100%; display:flex; align-items:center; gap:var(--s2); padding:var(--s3) var(--s4); font-size:13px; font-weight:540; color:var(--text-2); background:var(--surface-2); transition:background var(--t-fast) var(--ease)}
.acc-h:hover{background:var(--surface-3); color:var(--text)}
.acc-h .chev{width:16px; height:16px; transition:transform var(--t-ctx) var(--ease)} .acc-h .chev svg{width:16px; height:16px}
.acc-h[aria-expanded="true"] .chev{transform:rotate(90deg)}
.acc-h .ct{flex:1; text-align:left} .acc-h .badge2{font-size:11px; color:var(--text-3); font-weight:500}
.acc-b{overflow:hidden; max-height:0; transition:max-height var(--t-ctx) var(--ease)}
.acc-b[data-open="true"]{max-height:820px}
.acc-in{padding:var(--s4); display:flex; flex-direction:column; gap:var(--s4); border-top:1px solid var(--border)}
.frow{display:flex; flex-direction:column; gap:6px}
.frow > label{font-size:12px; font-weight:540; color:var(--text-2)}
.frow .od{font-size:11.5px; color:var(--text-3); line-height:1.5}
.subgrid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
.reveal{overflow:hidden; max-height:0; opacity:0; transition:max-height var(--t-ctx) var(--ease), opacity var(--t-ctx) var(--ease)}
.reveal[data-open="true"]{max-height:340px; opacity:1}
.lvl3{margin-top:var(--s4); border:1px solid var(--accent-line); border-radius:var(--r-md); background:var(--accent-weak); padding:var(--s4)}
.lvl3 .l3h{font-size:12px; font-weight:600; color:var(--accent-2); margin-bottom:var(--s3); display:flex; align-items:center; gap:7px}
.lvl3 .l3h svg{width:15px; height:15px}
.twocol{display:grid; grid-template-columns:1fr 280px; gap:var(--s6); align-items:start}

/* action bar */
.actionbar{grid-row:2; display:flex; align-items:center; gap:var(--s4); padding:0 var(--s8); height:64px; border-top:1px solid var(--border); background:var(--surface); position:relative; z-index:20}
.ab-totals{display:flex; align-items:baseline; gap:var(--s6)}
.ab-totals .t{display:flex; flex-direction:column}
.ab-totals .t .k{font-size:11px; color:var(--text-3); font-weight:540; text-transform:uppercase; letter-spacing:.05em}
.ab-totals .t .v{font-size:14px; color:var(--text-2)}
.ab-totals .t.grand .v{font-size:21px; font-weight:700; color:var(--text); letter-spacing:-0.02em; line-height:26px}
.ab-actions{margin-left:auto; display:flex; align-items:center; gap:var(--s3)}
.resp{font-size:11px; color:var(--text-3); max-width:190px; line-height:1.4; text-align:right}

/* preview rail */
.preview{background:var(--surface-2); border-left:1px solid var(--border); overflow:hidden; display:flex; flex-direction:column; min-height:0}
.pv-toolbar{display:flex; align-items:center; gap:var(--s2); color:var(--text-3); font-size:12px; padding:var(--s4) var(--s6) var(--s3); flex:none}
.seg{display:flex; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:2px; gap:2px}
.seg button{display:flex; align-items:center; gap:6px; font-size:12px; padding:4px 11px; border-radius:5px; color:var(--text-2); font-weight:500; transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease)}
.seg button svg{width:14px; height:14px}
.seg button[aria-pressed="true"]{background:var(--accent-weak); color:var(--accent-2)}
.pv-right{margin-left:auto; display:flex; align-items:center; gap:var(--s3)}
.zoom{font-size:12px; color:var(--text-3); white-space:nowrap; cursor:pointer} .zoom b{color:var(--text-2); font-weight:560}
.pv-print{display:flex; align-items:center; gap:6px; height:28px; padding:0 11px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface); color:var(--text-2); font-size:12px; font-weight:540} .pv-print:hover{background:var(--surface-2); color:var(--text)} .pv-print svg{width:14px; height:14px}
.live{display:flex; align-items:center; gap:6px; color:var(--ok); font-weight:540; white-space:nowrap}
.live .dot{width:6px; height:6px; border-radius:50%; background:var(--ok); position:relative}
.live .dot::after{content:""; position:absolute; inset:-3px; border-radius:50%; border:1.5px solid var(--ok); opacity:.5; animation:pulse 2s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(.6); opacity:.6} 100%{transform:scale(1.6); opacity:0}}
.paper-scroll{flex:1; overflow:auto; padding:0 var(--s6) var(--s6); display:flex; justify-content:center; scrollbar-width:thin}
.paper-scroll.mobile{align-items:flex-start; padding-top:var(--s4)}
.paper-scroll::-webkit-scrollbar{width:9px} .paper-scroll::-webkit-scrollbar-thumb{background:var(--border-2); border-radius:6px; border:3px solid var(--surface-2)}
.paper-frame{flex:none}
.phone{flex:none; width:340px; padding:14px; position:relative;
  background:linear-gradient(150deg,#3a3d44 0%,#23252b 22%,#1a1c21 50%,#23252b 78%,#3a3d44 100%);
  border-radius:54px;
  box-shadow:0 1px 1px rgba(255,255,255,.18) inset, 0 0 0 1px rgba(0,0,0,.5), 0 2px 3px rgba(0,0,0,.4), 0 30px 60px -12px rgba(15,16,20,.55), 0 12px 24px -8px rgba(15,16,20,.4)}
/* aro metálico interior (bisel) */
.phone::before{content:""; position:absolute; inset:7px; border-radius:48px; pointer-events:none; z-index:1;
  background:linear-gradient(150deg,rgba(255,255,255,.10),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,.07));
  box-shadow:0 0 0 1px rgba(0,0,0,.55) inset}
/* brillo especular diagonal sobre el cristal */
.phone::after{content:""; position:absolute; inset:14px; border-radius:40px; pointer-events:none; z-index:4;
  background:linear-gradient(135deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.04) 14%,rgba(255,255,255,0) 32%);
  mix-blend-mode:screen}
.phone .screen{position:relative; z-index:2; background:#e7e8ec; border-radius:40px; overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
  box-shadow:0 0 0 2px #0b0c0f, 0 0 1px 3px rgba(0,0,0,.6)}
.phone .screen::-webkit-scrollbar{display:none}
.phone .screen #doc{box-shadow:0 2px 10px rgba(20,24,33,.20) !important; border:1px solid #d7d9e0 !important; border-radius:2px !important}
/* isla dinámica */
.phone-island{position:absolute; top:26px; left:50%; transform:translateX(-50%); z-index:6;
  width:108px; height:30px; border-radius:99px; background:#08090c;
  box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.6) inset;
  display:flex; align-items:center; justify-content:flex-end; padding-right:11px}
.phone-island .cam{width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #2b3a52 0%, #11161f 55%, #05070a 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 0 2px rgba(80,130,200,.4)}
/* botones laterales */
.phone-btn{position:absolute; border-radius:2px; z-index:0;
  background:linear-gradient(180deg,#2d2f35,#16181c); box-shadow:0 1px 1px rgba(255,255,255,.12) inset, -1px 0 1px rgba(0,0,0,.4)}
.phone-btn.pwr{right:-3px; top:150px; width:3px; height:74px; border-radius:0 3px 3px 0}
.phone-btn.volup{left:-3px; top:128px; width:3px; height:46px; border-radius:3px 0 0 3px}
.phone-btn.voldn{left:-3px; top:184px; width:3px; height:46px; border-radius:3px 0 0 3px}
.phone .screen::-webkit-scrollbar{display:none}
.phone .screen #doc{box-shadow:none !important; border:none !important; border-radius:0 !important}

/* ============ DOCUMENTO A4 (siempre claro) ============ */
.doc{--d-ink:#1b2230; --d-ink2:#5a6475; --d-ink3:#8a93a3; --d-line:#e7e9ee; --d-line2:#eef0f4; --d-bg:#ffffff; --d-accent:#3b3f8f;
  width:794px; min-height:1123px; background:var(--d-bg); color:var(--d-ink); box-shadow:0 2px 4px rgba(27,34,48,.08), 0 14px 34px rgba(27,34,48,.16), 0 36px 80px rgba(27,34,48,.22); padding:60px 56px 52px; font-size:13px; line-height:1.5; position:relative; border:1px solid #e9ebf0; transform-origin:top left; display:flex; flex-direction:column}
.doc .num{font-family:var(--mono); color:var(--d-ink)}
.doc-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:26px}
.doc-issuer{display:flex; gap:12px; align-items:flex-start}
.doc-issuer .lmark{width:38px; height:38px; border-radius:9px; background:linear-gradient(150deg,#4a4ec0,#33368a); color:#fff; display:grid; place-items:center; font-weight:700; font-size:17px; flex:none}
.doc-issuer .iname{font-weight:680; font-size:15px; color:var(--d-ink); letter-spacing:-0.01em}
.doc-issuer .imeta{color:var(--d-ink2); font-size:11.5px; line-height:1.5; margin-top:2px}
.doc-tag{text-align:right}
.doc-tag .ftype{display:inline-block; font-size:10px; font-weight:680; letter-spacing:.04em; color:var(--d-accent); background:#eeeffa; border:1px solid #e0e1f5; padding:2px 8px; border-radius:5px}
.doc-tag .ftitle{font-size:21px; font-weight:700; letter-spacing:-0.02em; margin-top:9px; color:var(--d-ink)}
.doc-tag .fnum{font-family:var(--mono); font-size:13px; color:var(--d-ink2); margin-top:1px}
.doc-meta{display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:16px 0; border-top:1px solid var(--d-line); border-bottom:1px solid var(--d-line); margin-bottom:20px}
.doc-meta .blk .k{font-size:9.5px; font-weight:680; text-transform:uppercase; letter-spacing:.06em; color:var(--d-ink3); margin-bottom:5px}
.doc-meta .blk .v{font-size:13px; color:var(--d-ink); font-weight:560}
.doc-meta .blk .vsub{font-size:11.5px; color:var(--d-ink2); line-height:1.5; margin-top:2px}
.doc-meta .blk.right{text-align:right}
.doc-meta .pairs{display:flex; gap:26px; margin-top:11px; justify-content:flex-end}
.doc-meta .pairs.mt{margin-top:12px}
.doc-meta .pairs .k{margin-bottom:3px}
.doc-meta .pairs .opv{font-size:12px}
table.doc-lines{width:100%; border-collapse:collapse; margin-bottom:16px}
table.doc-lines th{font-size:9.5px; font-weight:680; text-transform:uppercase; letter-spacing:.05em; color:var(--d-ink3); text-align:right; padding:0 0 9px 20px; border-bottom:1px solid var(--d-line)}
table.doc-lines th.first{text-align:left; padding-left:0}
table.doc-lines td{padding:9px 0 9px 20px; border-bottom:1px solid var(--d-line2); font-size:12.5px; text-align:right; vertical-align:top; color:var(--d-ink); white-space:nowrap}
table.doc-lines td.first{text-align:left; padding-left:0; white-space:normal}
table.doc-lines td .ld{font-weight:540}
table.doc-lines .num{font-size:11.5px}
.doc-foot{display:grid; grid-template-columns:1fr 240px; gap:24px; align-items:start; margin-top:4px}
.doc-qr{display:flex; gap:13px; align-items:flex-start}
.doc-qr .qr{width:78px; height:78px; border-radius:6px; flex:none; background:#fff; border:1px solid var(--d-line); padding:5px} .doc-qr .qr svg{width:100%; height:100%; display:block}
.doc-qr .ql{font-size:9.5px; line-height:1.5; color:var(--d-ink2); max-width:160px} .doc-qr .ql b{color:var(--d-ink); font-weight:680; display:block; font-size:10px} .doc-qr .ql .vf{color:var(--d-accent); font-weight:680}
.doc-qr.pending .qr{display:grid; place-items:center; color:var(--d-ink3); text-align:center; font-size:8.5px; line-height:1.4; padding:8px}
.doc-totals{font-size:12.5px}
.doc-totals .tr{display:flex; justify-content:space-between; gap:16px; padding:5px 0; color:var(--d-ink2)}
.doc-totals .tr .num{color:var(--d-ink)}
.doc-totals .tr.neg .num{color:#b4453a}
.doc-totals .tr.grand{border-top:2px solid var(--d-ink); margin-top:6px; padding-top:11px}
.doc-totals .tr.grand .lbl{font-weight:700; color:var(--d-ink); font-size:13px} .doc-totals .tr.grand .num{font-weight:700; color:var(--d-ink); font-size:17px}
.doc-exnote{font-size:9.5px; color:var(--d-ink3); margin-top:8px; line-height:1.5}
.doc-legal{margin-top:auto; padding-top:22px; border-top:1px solid var(--d-line); font-size:9.5px; line-height:1.5; color:var(--d-ink3)}
.doc-assign{margin-top:14px; padding:10px 12px; border-radius:7px; background:#f7f8fc; border:1px solid #e6e8f3; font-size:10px; color:var(--d-ink2); line-height:1.5}
.doc-assign b{color:var(--d-accent)}

/* detalle: split doc + rail */
.detail{display:grid; grid-template-columns:1fr 340px; overflow:hidden; min-height:0}
.detail .paper-scroll{padding-top:var(--s6)}
.rail{border-left:1px solid var(--border); background:var(--surface); overflow-y:auto; padding:var(--s6); display:flex; flex-direction:column; gap:var(--s6)}
.rail-sec h3{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); margin-bottom:var(--s3)}
.aeat-state{border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s4); background:var(--surface-2)}
.aeat-state .big{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.aeat-state .big .chip-st{font-size:13px; padding:5px 11px}
.aeat-state .desc{font-size:12px; color:var(--text-3); line-height:1.5}
.timeline{display:flex; flex-direction:column; gap:0}
.tl{display:grid; grid-template-columns:24px 1fr; gap:10px; padding-bottom:var(--s4); position:relative}
.tl:not(:last-child)::before{content:""; position:absolute; left:11px; top:20px; bottom:0; width:2px; background:var(--border)}
.tl .dot{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--ok-weak); color:var(--ok); z-index:1}
.tl .dot svg{width:13px; height:13px}
.tl.pending .dot{background:var(--surface-3); color:var(--text-3)}
.tl .tt{font-size:13px; font-weight:540}
.tl .td{font-size:11.5px; color:var(--text-3); margin-top:1px; line-height:1.5}
.tl .time{font-size:11px; color:var(--text-3); font-family:var(--mono); margin-top:2px}
.hashbox{border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-2); padding:var(--s3); font-size:11px; color:var(--text-3); line-height:1.6; word-break:break-all}
.hashbox .hk{font-weight:600; color:var(--text-2); display:block; margin-bottom:3px; word-break:normal}
.hashbox .num{color:var(--text-2)}
.rail-actions{display:flex; flex-direction:column; gap:var(--s2)}

/* ajustes */
.settings{max-width:760px}
.card{border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); margin-bottom:var(--s4); overflow:hidden; box-shadow:var(--shadow)}
.card-h{padding:var(--s4) var(--s6); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:var(--s3)}
.card-h .ct{font-size:14px; font-weight:600} .card-h .cd{font-size:12px; color:var(--text-3); margin-top:1px}
.card-h .ro{margin-left:auto; font-size:10px; font-weight:600; color:var(--text-3); background:var(--surface-2); border:1px solid var(--border); padding:2px 8px; border-radius:5px}
.card-b{padding:var(--s6); display:flex; flex-direction:column; gap:var(--s4)}
.derived{border:1px solid var(--accent-line); background:var(--accent-weak); border-radius:var(--r-md); padding:var(--s4); display:flex; align-items:center; gap:var(--s4)}
.derived .di{flex:1}
.derived .dk{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--accent-2); margin-bottom:3px}
.derived .dv{font-size:15px; font-weight:600; color:var(--text)}
.derived .dd{font-size:11.5px; color:var(--text-2); margin-top:2px; line-height:1.5}
.derived .badge{font-family:var(--mono); font-size:18px; font-weight:600; color:var(--accent-2); background:var(--surface); border:1px solid var(--accent-line); border-radius:var(--r-md); padding:8px 14px}

/* error / 404 */
.errpage{min-height:100vh; display:grid; place-items:center; padding:var(--s8); text-align:center}
.errpage .code{font-family:var(--mono); font-size:13px; font-weight:600; color:var(--accent-2); letter-spacing:.1em; margin-bottom:var(--s4)}
.errpage h1{font-size:26px; font-weight:600; letter-spacing:-0.02em; margin-bottom:var(--s3)}
.errpage p{font-size:14px; color:var(--text-3); max-width:420px; line-height:1.6; margin-bottom:var(--s6)}
.errpage .acts{display:flex; gap:var(--s2); justify-content:center}

/* modal */
.scrim{position:fixed; inset:0; z-index:100; background:oklch(0.2 0.02 270 / .42); backdrop-filter:blur(3px); display:grid; place-items:center; padding:var(--s6); opacity:0; pointer-events:none; transition:opacity var(--t-ctx) var(--ease)}
.scrim[data-open="true"]{opacity:1; pointer-events:auto}
.modal{width:min(440px,94vw); background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r-lg); box-shadow:var(--shadow-pop); overflow:hidden; transform:translateY(8px) scale(.99); transition:transform var(--t-ctx) var(--ease)}
.scrim[data-open="true"] .modal{transform:none}
.modal-h{padding:var(--s6) var(--s6) var(--s3)} .modal-h .t{font-size:16px; font-weight:600} .modal-h .d{font-size:13px; color:var(--text-3); margin-top:4px; line-height:1.5}
.modal-sum{margin:0 var(--s6); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden}
.modal-sum .r{display:flex; justify-content:space-between; padding:9px 12px; font-size:12.5px; color:var(--text-2)} .modal-sum .r + .r{border-top:1px solid var(--border)} .modal-sum .r .v{color:var(--text); font-weight:540}
.modal-sum .r.grand{background:var(--surface-2)} .modal-sum .r.grand .v{font-size:15px; font-weight:700}
.modal-check{display:flex; gap:10px; align-items:flex-start; padding:var(--s4) var(--s6); font-size:12.5px; color:var(--text-2); line-height:1.5}
.modal-check input{margin-top:2px; width:16px; height:16px; accent-color:var(--accent); flex:none}
.modal-foot{display:flex; gap:var(--s2); padding:0 var(--s6) var(--s6); align-items:center} .modal-foot .sp{flex:1}
.btn[disabled]{opacity:.5; cursor:default}

/* print: solo el documento, A4 real */
@media print{
  @page{size:A4; margin:0}
  html,body{background:#fff !important; height:auto !important; overflow:visible !important}
  body *{visibility:hidden !important}
  .doc, .doc *{visibility:visible !important}
  .doc{position:absolute !important; left:0 !important; top:0 !important; transform:none !important; width:210mm !important; min-height:297mm !important; box-shadow:none !important; border:none !important; padding:15mm 14mm !important; margin:0 !important}
}
@media (max-width:1140px){
  .work{grid-template-columns:1fr}
  .work .preview{display:none}
  /* Editor de estilos: el preview se apila debajo, nunca se oculta */
  body[data-page="estilos"] .work{grid-template-columns:1fr; overflow-y:auto}
  body[data-page="estilos"] .work .preview{display:flex; border-left:none; border-top:1px solid var(--border)}
  body[data-page="estilos"] .work .paper-scroll{overflow:visible}
  /* Detalle: el contenido vive en .preview/.rail — apilar, nunca ocultar */
  .detail{grid-template-columns:1fr; overflow-y:auto}
  .detail .preview{border-left:none; border-bottom:1px solid var(--border)}
  .detail .paper-scroll{overflow:visible}
  .detail .rail{border-left:none}
}

/* hub */
.hub{max-width:980px; margin:0 auto; padding:64px 32px}
.hub-h{margin-bottom:40px}
.hub-h .ey{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--accent-2); margin-bottom:12px}
.hub-h h1{font-size:32px; font-weight:600; letter-spacing:-0.02em; margin-bottom:10px}
.hub-h p{color:var(--text-2); font-size:15px; max-width:560px; line-height:1.6}
.hub-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.hub-card{display:flex; gap:16px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; transition:transform var(--t-ctx) var(--ease), border-color var(--t-ctx) var(--ease), box-shadow var(--t-ctx) var(--ease)}
.hub-card:hover{transform:translateY(-2px); border-color:var(--border-2); box-shadow:var(--shadow)}
.hub-card .ic{width:40px; height:40px; border-radius:11px; background:var(--accent-weak); color:var(--accent-2); display:grid; place-items:center; flex:none} .hub-card .ic svg{width:20px; height:20px}
.hub-card .n{font-size:11px; font-weight:600; color:var(--text-3); margin-bottom:4px} .hub-card h3{font-size:16px; font-weight:600; margin-bottom:4px} .hub-card p{font-size:13px; color:var(--text-3); line-height:1.5}
.hub-card .route{font-family:var(--mono); font-size:11px; color:var(--accent-2); margin-top:7px}

/* ============ EDITOR DE ESTILOS DE FACTURA ============ */
.range{appearance:none; -webkit-appearance:none; width:100%; height:6px; border-radius:99px; background:var(--surface-3); outline:none}
.range::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent); border:2px solid var(--surface); box-shadow:var(--shadow); cursor:pointer}
.range::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:var(--accent); border:2px solid var(--surface); box-shadow:var(--shadow); cursor:pointer}
.range-row{display:flex; align-items:center; gap:var(--s3)}
.range-row .rv{font-size:12px; color:var(--text-2); min-width:46px; text-align:right}

/* logo dropzone */
.dropzone{border:1.5px dashed var(--border-2); border-radius:var(--r-md); padding:var(--s6); display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; color:var(--text-3); cursor:pointer; transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease)}
.dropzone:hover,.dropzone.drag{border-color:var(--accent-line); background:var(--accent-weak); color:var(--accent-2)}
.dropzone svg{width:24px; height:24px}
.dropzone .dt{font-size:13px; font-weight:540; color:var(--text-2)}
.dropzone .dd{font-size:11.5px}
.logo-loaded{display:flex; align-items:center; gap:var(--s3); padding:var(--s3); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface)}
.logo-loaded .lt{width:48px; height:48px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2); display:grid; place-items:center; overflow:hidden; flex:none}
.logo-loaded .lt img{max-width:100%; max-height:100%; display:block}
.logo-loaded .li{flex:1; min-width:0} .logo-loaded .ln{font-size:13px; font-weight:540; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .logo-loaded .ld{font-size:11.5px; color:var(--text-3)}
.logo-loaded .rm{font-size:12px; color:var(--danger); font-weight:540; padding:6px 10px; border-radius:var(--r-sm)} .logo-loaded .rm:hover{background:var(--danger-weak)}
.aligns{display:flex; gap:6px}
.aligns button{flex:1; height:32px; border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text-2); display:grid; place-items:center; transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease)}
.aligns button svg{width:16px; height:16px}
.aligns button:hover{background:var(--surface-2); color:var(--text)}
.aligns button[aria-pressed="true"]{background:var(--accent-weak); color:var(--accent-2); border-color:var(--accent-line)}

/* paletas */
.palette-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.swatch{height:42px; border-radius:var(--r-sm); border:1px solid var(--border); overflow:hidden; display:flex; cursor:pointer; position:relative; transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease)}
.swatch:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.swatch i{flex:1; display:block}
.swatch[aria-pressed="true"]{outline:2px solid var(--accent); outline-offset:2px}
.swatch[aria-pressed="true"]::after{content:""; position:absolute; top:4px; right:4px; width:14px; height:14px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow); background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235e6ad2' stroke-width='3'><path d='M5 12l5 5L20 7'/></svg>"); background-repeat:no-repeat; background-position:center}
.color-row{display:flex; align-items:center; gap:var(--s3)}
.color-row input[type="color"]{width:40px; height:34px; padding:0; border:1px solid var(--border); border-radius:var(--r-sm); background:none; cursor:pointer}
.color-row input[type="color"]::-webkit-color-swatch-wrapper{padding:3px} .color-row input[type="color"]::-webkit-color-swatch{border:none; border-radius:4px}
.color-row .ctext{font-family:var(--mono); font-size:12.5px; color:var(--text-2)}
.contrast-ok{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ok); margin-left:auto} .contrast-ok svg{width:13px; height:13px}
.contrast-warn{color:var(--warn)}

/* ============ ADMIN · TEMA ============ */
.admin-cols{display:grid; grid-template-columns:380px 1fr; gap:var(--s6); align-items:start; max-width:1180px}
@media (max-width:980px){.admin-cols{grid-template-columns:1fr}}
.admin-sticky{position:sticky; top:0}
.pv-tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4)}
@media (max-width:640px){.pv-tiles{grid-template-columns:1fr}}
.tile{border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-2); padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3)}
.tile .tl{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3)}
.tile .row{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.mini-nav{display:flex; flex-direction:column; gap:1px}
.mini-link{color:var(--accent-2); font-weight:540; font-size:12.5px}
.tot-mini{display:flex; flex-direction:column; gap:6px; font-size:12.5px}
.tot-mini .gr{display:flex; justify-content:space-between; gap:12px; font-weight:700; font-size:14px; color:var(--accent-2)}

/* opcionales + bloqueados */
.optfield{display:flex; align-items:center; gap:var(--s3); padding:11px 0}
.optfield + .optfield{border-top:1px solid var(--border)}
.optfield .ol{flex:1} .optfield .ot{font-size:13.5px; display:flex; align-items:center; gap:7px} .optfield .od{font-size:11.5px; color:var(--text-3); margin-top:1px}
.lock{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; color:var(--text-3); background:var(--surface-2); border:1px solid var(--border); padding:2px 7px 2px 5px; border-radius:99px; position:relative; cursor:help}
.lock svg{width:12px; height:12px}
.lock .tip{position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%) translateY(4px); width:200px; background:var(--text); color:var(--bg); font-size:11px; font-weight:450; line-height:1.5; padding:8px 10px; border-radius:var(--r-md); box-shadow:var(--shadow-pop); opacity:0; pointer-events:none; transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); z-index:6; text-align:center}
.lock .tip::after{content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--text)}
.lock:hover .tip{opacity:1; transform:translateX(-50%) translateY(0)}
.lockfield{display:flex; align-items:center; gap:var(--s3); padding:11px 0; opacity:.85}
.lockfield + .lockfield{border-top:1px solid var(--border)}
.lockfield .ol{flex:1} .lockfield .ot{font-size:13.5px; display:flex; align-items:center; gap:7px} .lockfield .od{font-size:11.5px; color:var(--text-3); margin-top:1px}
.lockfield .toggle{background:var(--surface-3); cursor:not-allowed} .lockfield .toggle i{background:var(--surface); left:auto; right:2px}

/* plantillas */
.tpl-list{display:flex; flex-direction:column; gap:8px}
.tpl-card{display:flex; align-items:center; gap:var(--s3); padding:var(--s3); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); transition:border-color var(--t-fast) var(--ease)}
.tpl-card[aria-current="true"]{border-color:var(--accent-line); background:var(--accent-weak)}
.tpl-card .sw{width:34px; height:34px; border-radius:7px; border:1px solid var(--border); flex:none}
.tpl-card .ti{flex:1; min-width:0} .tpl-card .tn{font-size:13px; font-weight:540} .tpl-card .tx{font-size:11.5px; color:var(--text-3)}
.tpl-card .star{width:28px; height:28px; border-radius:6px; display:grid; place-items:center; color:var(--text-3)} .tpl-card .star svg{width:15px; height:15px}
.tpl-card .star[aria-pressed="true"]{color:var(--warn)} .tpl-card .star:hover{background:var(--surface-2)}
.tpl-default{font-size:10px; font-weight:600; color:var(--accent-2); background:var(--surface); border:1px solid var(--accent-line); padding:1px 7px; border-radius:5px}

/* ===== DOC: ganchos de estilo (todo reestilizable, nada se oculta si es obligatorio) ===== */
.doc{--d-accent:#3b3f8f; --d-accent-bg:#eeeffa; --d-accent-line:#e0e1f5; --d-head-fs:15px}
.doc-band{height:0; background:var(--d-accent); margin:-60px -56px 26px; border-radius:0; transition:height var(--t-ctx) var(--ease)}
.doc.band .doc-band{height:8px}
.doc-tag .ftype{color:var(--d-accent); background:var(--d-accent-bg); border-color:var(--d-accent-line)}
.doc-tag .ftitle{color:var(--d-accent)}
.doc-issuer .lmark{background:var(--d-accent)}
.doc-totals .tr.grand{border-top-color:var(--d-accent)}
.doc-totals .tr.grand .lbl,.doc-totals .tr.grand .num{color:var(--d-accent)}
.doc-qr .ql .vf{color:var(--d-accent)}
.doc-issuer .iname{font-size:var(--d-head-fs)}
/* logo libre sobre el documento */
.doc-logo{position:absolute; top:48px; left:56px; cursor:grab; touch-action:none; user-select:none; z-index:4; border-radius:4px}
.doc-logo.dragging{cursor:grabbing; box-shadow:0 0 0 1px var(--d-accent)}
.doc-logo img{display:block; max-width:none; pointer-events:none}
.doc-logo .lhandle{position:absolute; right:-6px; bottom:-6px; width:14px; height:14px; border-radius:50%; background:var(--d-accent); border:2px solid #fff; cursor:nwse-resize; opacity:0; transition:opacity var(--t-fast) var(--ease)}
.doc-logo:hover .lhandle{opacity:1}
.logo-guide{position:absolute; top:0; bottom:0; width:1px; background:var(--d-accent); opacity:0; pointer-events:none; z-index:3}
.logo-guide.on{opacity:.6}
.doc.has-logo .doc-issuer .lmark{display:none}

/* layout variants */
.doc.lay-compacto{padding:44px 48px 40px; font-size:12px}
.doc.lay-compacto .doc-head{margin-bottom:18px} .doc.lay-compacto .doc-meta{padding:12px 0; margin-bottom:14px} .doc.lay-compacto table.doc-lines td{padding:6px 0 6px 20px}
.doc.lay-moderno .doc-head{align-items:flex-end} .doc.lay-moderno .doc-tag .ftitle{font-size:26px} .doc.lay-moderno .doc-meta{border-top:none; padding-top:0}
.doc.lay-moderno table.doc-lines th{color:var(--d-accent)}
.doc.dense-1 table.doc-lines td{padding-top:12px; padding-bottom:12px}
/* totals position */
.doc.tot-left .doc-foot{grid-template-columns:240px 1fr} .doc.tot-left .doc-qr{order:2} .doc.tot-left .doc-totals{order:1}
/* optional field visibility (SOLO opcionales) */
.doc.hide-notas .doc-notas{display:none}
.doc.hide-cond .doc-cond{display:none}
.doc.hide-vto .doc-vto{display:none}
.doc.hide-dto .doc-dto{display:none}
.doc-notas{margin-top:16px; font-size:11px; color:var(--d-ink2); line-height:1.5}
.doc-notas .nh{font-size:9.5px; font-weight:680; text-transform:uppercase; letter-spacing:.05em; color:var(--d-ink3); margin-bottom:3px}
.doc-cond{margin-top:10px; font-size:10.5px; color:var(--d-ink3); line-height:1.5}
/* arrastre libre de bloques del documento */
.doc-draggable{cursor:grab; position:relative; transition:outline-color var(--t-fast) var(--ease)}
.doc-draggable:hover{outline:1px dashed var(--d-accent); outline-offset:7px; border-radius:3px}
.doc-draggable.dragging{cursor:grabbing; outline:1px solid var(--d-accent); outline-offset:7px}
.doc-draggable.nudged{outline:1px dashed rgba(120,120,140,.35); outline-offset:7px; border-radius:3px}
/* guías magnéticas (alineación tipo mosaico) */
.mguide{position:absolute; background:var(--d-accent); opacity:0; pointer-events:none; z-index:7; box-shadow:0 0 0 .5px rgba(255,255,255,.6)}
.mguide.v{top:0; bottom:0; width:1px}
.mguide.h{left:0; right:0; height:1px}
.mguide.on{opacity:.85}
.doc-grip{position:absolute; left:50%; top:-22px; transform:translateX(-50%); display:flex; align-items:center; gap:5px; font-size:9.5px; font-weight:600; color:#fff; background:var(--d-accent); padding:2px 8px; border-radius:99px; opacity:0; pointer-events:none; transition:opacity var(--t-fast) var(--ease); white-space:nowrap; z-index:6}
.doc-grip svg{width:11px; height:11px}
.doc-draggable:hover .doc-grip,.doc-draggable.dragging .doc-grip{opacity:1}

/* ===== Móvil: shell off-canvas (sidebar deslizante) ===== */
.mobnav-btn{display:none}
.nav-backdrop{display:none}
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .canvas{grid-column:1}
  #toggleSide{display:none}
  .mobnav-btn{display:grid; place-items:center}
  .tb-search{display:none}
  .sidebar{position:fixed; top:48px; left:0; bottom:0; width:264px; max-width:84vw; z-index:45; transform:translateX(-100%); transition:transform var(--t-ctx) var(--ease); box-shadow:var(--shadow-pop)}
  .app[data-mobnav="open"] .sidebar{transform:translateX(0)}
  .nav-backdrop{display:block; position:fixed; inset:48px 0 0 0; background:rgba(2,6,23,.42); opacity:0; pointer-events:none; transition:opacity var(--t-fast) var(--ease); z-index:44}
  .app[data-mobnav="open"] .nav-backdrop{opacity:1; pointer-events:auto}
  .page{padding:var(--s4)}
  .hub-grid{grid-template-columns:1fr}
  .palette-grid{grid-template-columns:repeat(2,1fr)}
}