:root{--a:#0b7fc7;--bg:#eef4f8;--r:12px}
*{box-sizing:border-box}body{margin:0;font:16px system-ui,Segoe UI,sans-serif;background:var(--bg);color:#1c2b36}
header{display:flex;gap:10px;align-items:center;background:var(--a);color:#fff;padding:12px 16px}
header span{margin-left:auto;font-size:14px}.link{background:none;border:0;color:#fff;text-decoration:underline;font-size:14px}
nav{display:flex;overflow-x:auto;background:#fff;box-shadow:0 1px 3px #0002}nav button{flex:none;padding:12px 18px;border:0;background:none;font-size:15px}
nav .on{border-bottom:3px solid var(--a);font-weight:600}
main{max-width:1000px;margin:auto;padding:12px;display:grid;gap:12px}
@media(min-width:800px){main{grid-template-columns:1fr 1fr}main>section:last-child{grid-column:1/3}}
.card{background:#fff;border-radius:var(--r);padding:16px;box-shadow:0 1px 4px #0001}.center{max-width:340px;margin:12vh auto}
h1,h2{margin:0 0 12px}h2{font-size:18px}h1{text-align:center}
input,select{width:100%;padding:12px;margin:4px 0 10px;border:1px solid #b9c7d1;border-radius:8px;font-size:16px}
.btn{background:var(--a);color:#fff;border:0;border-radius:8px;padding:12px 16px;font-size:16px;width:100%}
.btn.sec{width:auto;margin:4px 0 10px}.big{padding:16px;font-size:18px;background:#1a9a4a}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.prod{border:1px solid #b9c7d1;background:#f7fbfd;border-radius:10px;padding:12px 8px;text-align:center;font-size:14px}
.prod b{display:block;color:var(--a);font-size:17px}.prod small{color:#667}
.line{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #eee}.line span{flex:1}
.line button{width:34px;height:34px;border-radius:50%;border:1px solid #b9c7d1;background:#fff;font-size:18px}
.total{font-size:22px;font-weight:700;text-align:right;margin:10px 0}.row{display:flex;gap:8px}label{font-size:13px;color:#556}
.chk{display:flex;gap:8px;align-items:center;margin-bottom:8px;font-size:16px}.chk input{width:auto;margin:0}
.err,#msg{color:#c0392b;min-height:1.2em}.ok{color:#1a9a4a!important}
table{width:100%;border-collapse:collapse;font-size:14px}td,th{padding:6px;border-bottom:1px solid #eee;text-align:left}
td button{padding:6px 10px;border-radius:6px;border:1px solid var(--a);background:#fff;color:var(--a)}
#tInv,#tMov,#hoy{overflow-x:auto}.bajo td{background:#fff1f0}.pos{color:#1a9a4a}.neg{color:#c0392b}
#vCli>section:last-child{grid-column:auto}#tCli{overflow-x:auto;max-height:60vh}.deuda{color:#c0392b;font-weight:600}
#vCob>section:last-child{grid-column:auto}#tCob,#bVentas,#bAb{overflow-x:auto}

.row2{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ped{border:1px solid #b9c7d1;border-radius:10px;padding:12px;margin-bottom:10px;display:grid;gap:6px}
.ped a{color:var(--a)}.tag{font-size:13px;padding:3px 8px;border-radius:12px;background:#e8eef2;white-space:nowrap}
.tag.cobrar{background:#fff1d6;color:#8a5a00;font-weight:600}.tag.pagado{background:#dff5e6;color:#1a7a3a}
.ped input,.ped select{margin:0}
#vPro>section:last-child{grid-column:auto}#tPro{overflow-x:auto}

.kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.kpi{background:#f1f7fb;border-radius:10px;padding:10px;text-align:center;font-size:13px}
.kpi b{display:block;font-size:22px;color:var(--a)}.barra{background:#e3ebf0;border-radius:8px;height:16px;overflow:hidden}.barra i{display:block;height:100%}
#vTan>section:last-child{grid-column:1/3}#hDias,#hMov,#tLec{overflow-x:auto}
#vGas>section:nth-child(2){grid-column:auto}#vGas>section:last-child{grid-column:1/3}#tGas,#tMant{overflow-x:auto}#gsCat{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
#vDash>section:last-child{grid-column:auto}@media(min-width:800px){.kpis4{grid-template-columns:repeat(4,1fr)}}
dialog{border:0;border-radius:12px;padding:16px;width:min(340px,92vw)}dialog::backdrop{background:#0006}#tUsu{overflow-x:auto}#vUsu>section:last-child{grid-column:auto}

/* ===== Tema morado/rosa ===== */
:root{--a:#9333ea;--bg:#f6f3fb;--g:linear-gradient(135deg,#a855f7,#ec4899);--r:16px}
[hidden]{display:none!important}
body{font-family:'Plus Jakarta Sans',system-ui,Segoe UI,sans-serif;background:var(--bg);color:#1e1b2e}
.card{border-radius:var(--r);box-shadow:0 2px 12px #6b21a81a;border:1px solid #efe9f7}
input,select{border:1px solid #e4dcf0;background:#fcfbfe;border-radius:12px;padding:12px 14px}
input:focus,select:focus{outline:0;border-color:#a855f7;box-shadow:0 0 0 3px #a855f733}
label{font-weight:600;color:#3b3552}
.btn{background:var(--g);border-radius:12px;font-weight:700;cursor:pointer;box-shadow:0 6px 16px #ec489940}
.btn.sec{background:#f3e8ff;color:#7e22ce;box-shadow:none}.big{background:var(--g)}
button{cursor:pointer;font-family:inherit}
.prod{border:1px solid #eadff7;background:#fbf8ff;border-radius:14px}.prod:hover{border-color:#a855f7;background:#f5ebff}
.prod b{color:#9333ea}td button{border-color:#a855f7;color:#7e22ce;border-radius:8px}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#7b7391}
.kpi{color:#fff;border-radius:16px;padding:18px;text-align:left;background:linear-gradient(135deg,#8b5cf6,#c084fc)}
.kpi:nth-child(4n+2){background:linear-gradient(135deg,#db2777,#f472b6)}.kpi:nth-child(4n+3){background:linear-gradient(135deg,#0e7490,#22d3ee)}.kpi:nth-child(4n){background:linear-gradient(135deg,#059669,#4ade80)}
.kpi b{color:#fff;font-size:26px;margin-top:4px}
/* Login */
#login{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh;max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:#faf8fd}
.lv{background:linear-gradient(160deg,#a855f7,#ec4899);color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:center;gap:24px}
.lv h1{font-size:44px;line-height:1.1;text-align:left;margin:0;font-weight:800}.lv p{font-size:18px;opacity:.9;margin:0;max-width:420px}
.brand{display:flex;align-items:center;gap:12px}.brand b{display:block;font-size:20px}.brand small{opacity:.8;font-size:13px}
.logo{width:48px;height:48px;border-radius:14px;background:#ffffff33;display:grid;place-items:center;font-size:24px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:460px}.tiles div{background:#ffffff26;border:1px solid #ffffff40;border-radius:14px;padding:16px;font-weight:600}
.lr{display:grid;place-items:center;padding:32px}.lf{width:100%;max-width:420px}.lf h2{font-size:32px;margin:0}.sub{color:#6b6580;margin:6px 0 24px}
.inp{position:relative;margin:6px 0 16px}.inp i{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-style:normal}.inp input{margin:0;padding:15px 44px}
.eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;font-size:18px}
.lf .btn{padding:15px;font-size:17px;margin-top:6px}.foot{text-align:center;color:#8a839c;font-size:13px;margin-top:24px}
/* App con menú lateral */
#app{display:grid;grid-template-columns:260px 1fr;grid-template-rows:auto 1fr;min-height:100vh;align-items:start}
nav{grid-column:1;grid-row:1/-1;position:sticky;top:0;height:100vh;overflow-y:auto;flex-direction:column;background:linear-gradient(180deg,#4c1d95,#831843);padding:18px 12px;box-shadow:none}
nav .brand{color:#fff;padding:4px 8px 18px;margin-bottom:8px;border-bottom:1px solid #ffffff22}
nav button{text-align:left;color:#e9d5ff;border-radius:12px;padding:12px 14px;margin:2px 0;font-weight:500;width:100%}
nav button:hover{background:#ffffff1a}nav .on{background:var(--g);color:#fff;border:0;font-weight:700;box-shadow:0 6px 16px #ec489955}
header{grid-column:2;background:#fff;color:#1e1b2e;border-bottom:1px solid #eee7f5;padding:14px 28px}header h2{margin:0;font-size:22px}
.link{background:#f3e8ff;color:#7e22ce;text-decoration:none;border-radius:10px;padding:8px 14px;font-weight:600}
main{grid-column:2;max-width:none;width:100%;padding:24px 28px}
#app:has(#nav[hidden])>*{grid-column:1}
@media(max-width:800px){#login{grid-template-columns:1fr}.lv{padding:28px}.lv h1{font-size:30px}.tiles{display:none}
 #app{grid-template-columns:1fr}nav{grid-column:1;grid-row:auto;order:-1;position:static;height:auto;flex-direction:row;padding:8px;gap:4px}nav .brand{display:none}nav button{width:auto;white-space:nowrap}
 header,main{grid-column:1}header{padding:12px 16px}main{padding:14px}}
/* Ajuste: menú fijo (sin estirar la rejilla) */
#app{display:block;padding-left:260px}
nav{position:fixed;left:0;top:0;width:260px;z-index:5}
header,main{grid-column:auto}
header{display:flex}main{display:grid}
#app:has(#nav[hidden]){padding-left:0}
@media(max-width:800px){#app{padding-left:0}nav{position:static;width:auto;height:auto}}