/* Sistema 85 · estilo amigable (inspirado en suites como Odoo: apps de colores, mucho blanco, esquinas redondas) */
[hidden]{display:none!important}
:root{--bg:#F8F9FB;--card:#fff;--fg:#1F2433;--mut:#5F6577;--line:#E6E8EF;--pri:#6C4B8C;--pri2:#5A3C78;--prifg:#fff;--tea:#0E8C8C;--suave:#F1ECF6;--tsuave:#E4F4F3;--amar:#F6C344;--err:#B42318;--errbg:#FEF3F2;--sombra:0 1px 2px rgba(31,36,51,.06),0 8px 24px rgba(31,36,51,.06)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#13141B;--card:#1C1E28;--fg:#ECEDF3;--mut:#A3A7B7;--line:#2B2E3B;--pri:#B08FD6;--pri2:#C4A6E6;--prifg:#1A1222;--tea:#3CC7C2;--suave:#2A2236;--tsuave:#16302F;--err:#FDA29B;--errbg:#3A1512;--sombra:0 1px 2px rgba(0,0,0,.4)}}
:root[data-theme="dark"]{--bg:#13141B;--card:#1C1E28;--fg:#ECEDF3;--mut:#A3A7B7;--line:#2B2E3B;--pri:#B08FD6;--pri2:#C4A6E6;--prifg:#1A1222;--tea:#3CC7C2;--suave:#2A2236;--tsuave:#16302F;--err:#FDA29B;--errbg:#3A1512;--sombra:0 1px 2px rgba(0,0,0,.4)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font:16px/1.6 'Nunito Sans',system-ui,sans-serif;background:var(--bg);color:var(--fg)}
a{color:var(--pri)}h1,h2,h3{font-family:'Nunito',system-ui,sans-serif;line-height:1.15;letter-spacing:-.01em;font-weight:800}
.wrap{max-width:1140px;margin:0 auto;padding:0 16px}.fila{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* barra superior */
.top{position:sticky;top:0;z-index:5;background:var(--card);border-bottom:1px solid var(--line)}
.top .fila{height:64px}.marca{display:flex;align-items:center;gap:9px;font:800 20px 'Nunito',sans-serif;color:var(--fg);text-decoration:none}.marca b{color:var(--pri)}
nav{display:flex;align-items:center;gap:20px}nav a:not(.btn){color:var(--fg);text-decoration:none;font-weight:600;font-size:15px}nav a:not(.btn):hover{color:var(--pri)}
/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--pri);color:var(--prifg);border:0;border-radius:8px;padding:13px 24px;font-weight:700;font-size:16px;line-height:1;font-family:inherit;text-decoration:none;cursor:pointer;transition:background .15s,transform .15s}
.btn:hover{background:var(--pri2);transform:translateY(-1px)}.btn.sec{background:var(--card);color:var(--fg);border:1.5px solid var(--line)}.btn.sec:hover{border-color:var(--pri);color:var(--pri)}
.btn.tea{background:var(--tea);color:#fff}.btn.chico{padding:9px 15px;font-size:14px}.btn.ancho{width:100%;margin-top:8px}.btn.grande{padding:16px 30px;font-size:17px}
/* portada */
.hero{padding:72px 0 40px;text-align:center}
.hero h1{font-size:clamp(36px,6vw,64px);margin:0 auto 18px;max-width:900px}
.subraya{position:relative;white-space:nowrap;color:var(--pri)}.subraya svg{position:absolute;left:-2%;bottom:-.18em;width:104%;height:.42em;fill:none;stroke:var(--amar);stroke-width:7;stroke-linecap:round}
.lead{font-size:clamp(17px,2vw,20px);color:var(--mut);max-width:680px;margin:0 auto}
.acciones{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:30px 0 12px}.nota{font-size:14px;color:var(--mut)}
.apps{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:18px;max-width:980px;margin:52px auto 0}
.app{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:var(--fg);font-weight:700;font-size:14px;text-align:center}
.ico{width:72px;height:72px;border-radius:18px;display:grid;place-items:center;box-shadow:var(--sombra);position:relative;overflow:hidden;transition:transform .15s}
.app:hover .ico{transform:translateY(-3px) scale(1.03)}
.ico::after{content:"";position:absolute;width:60%;height:60%;right:-14%;bottom:-14%;border-radius:50%;background:rgba(255,255,255,.22)}
.ico svg{width:36px;height:36px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:1}
.c1{background:linear-gradient(135deg,#F0816A,#E2574C)}.c2{background:linear-gradient(135deg,#5FB0E8,#3A84D0)}.c3{background:linear-gradient(135deg,#F8C35A,#F09A2F)}.c4{background:linear-gradient(135deg,#4CC8A8,#1E9E86)}
.c5{background:linear-gradient(135deg,#A88BEA,#7A5CCF)}.c6{background:linear-gradient(135deg,#F38BB5,#DC5A93)}.c7{background:linear-gradient(135deg,#55C4D8,#2496B4)}.c8{background:linear-gradient(135deg,#9BA7BC,#6B7891)}
/* vista previa */
.preview{max-width:1000px;margin:56px auto 0;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 60px rgba(60,40,90,.12);overflow:hidden;text-align:left}
.pv-bar{display:flex;align-items:center;gap:14px;background:var(--pri);color:var(--prifg);padding:10px 16px;font-weight:700;font-size:14px}.pv-bar span{opacity:.85;font-weight:600}
.pv-body{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:0}
.pv-prod{padding:18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-right:1px solid var(--line)}
.pv-p{border:1px solid var(--line);border-radius:12px;padding:10px;font-size:13px}.pv-p i{display:block;height:54px;border-radius:8px;margin-bottom:8px}.pv-p b{display:block}.pv-p em{font-style:normal;color:var(--tea);font-weight:700}
.pv-tk{padding:18px;font-size:14px}.pv-l{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line)}.pv-t{display:flex;justify-content:space-between;font:800 20px 'Nunito';margin-top:12px}.pv-bs{display:flex;justify-content:space-between;color:var(--mut);font-size:14px}
.pv-pay{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.pv-pay span{text-align:center;border:1px solid var(--line);border-radius:8px;padding:8px;font-weight:700;font-size:13px}.pv-pay .on{background:var(--tea);border-color:var(--tea);color:#fff}
/* secciones */
.bloque{padding:72px 0}.bloque.alt{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bloque h2{font-size:clamp(28px,4vw,42px);margin:0 0 8px;text-align:center}.sub{color:var(--mut);margin:0 auto 36px;text-align:center;max-width:620px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--sombra)}
.card .ico{width:48px;height:48px;border-radius:12px}.card .ico svg{width:24px;height:24px}
.card h3{font-size:18px;margin:14px 0 6px}.card p{margin:0;color:var(--mut);font-size:15px}
.pasos{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:p;margin:0 0 34px}
.pasos li{counter-increment:p;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:var(--sombra)}
.pasos li::before{content:counter(p);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--suave);color:var(--pri);font:800 18px 'Nunito';margin-bottom:12px}
.pasos b{display:block;font-size:18px;font-family:'Nunito'}.pasos span{color:var(--mut);font-size:15px}
.centro{text-align:center}
.banda{background:linear-gradient(120deg,var(--pri),#8E5FA8);color:#fff;border-radius:20px;padding:44px 24px;text-align:center}
.banda h2{color:#fff;margin:0 0 10px}.banda p{opacity:.9;margin:0 0 24px}.banda .btn{background:#fff;color:#4A2F63}.banda .btn.sec{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
/* formularios */
.caja{max-width:480px;margin:44px auto 64px;padding:32px 26px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sombra)}
.caja h1{font-size:30px;margin:0 0 6px}.caja .sub{text-align:left;margin:0 0 22px}.caja.centro{text-align:center}.caja.centro .sub{text-align:center}
form label{display:block;font-weight:700;font-size:14px;margin:0 0 15px}form small{font-weight:400;color:var(--mut)}
input,select{display:block;width:100%;margin-top:6px;padding:12px 13px;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg);font-size:16px;font-family:inherit}
input:focus,select:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px var(--suave)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}.check{display:flex!important;gap:10px;align-items:flex-start;font-weight:600!important}.check input{width:auto;margin:4px 0 0}
.oculto{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alerta{background:var(--errbg);color:var(--err);border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:14.5px}.alerta p{margin:4px 0}
.otra{text-align:center;color:var(--mut);font-size:14.5px;margin:18px 0 0}
.demo-cta{display:flex;align-items:center;gap:12px;background:var(--tsuave);border-radius:12px;padding:12px 14px;margin:18px 0 0;font-size:14.5px}.demo-cta a{font-weight:700;color:var(--tea)}
.giro{width:52px;height:52px;margin:6px auto 18px;border-radius:50%;border:5px solid var(--suave);border-top-color:var(--pri);animation:g 1s linear infinite}@keyframes g{to{transform:rotate(1turn)}}
/* panel tipo "inicio de apps" */
body.app-home{background:radial-gradient(1200px 500px at 10% -10%,var(--suave),transparent),radial-gradient(900px 500px at 100% 0,var(--tsuave),transparent),var(--bg)}
.top.morada{background:var(--pri);border:0}.top.morada .marca,.top.morada .marca b,.top.morada .quien{color:#fff}.top.morada .btn.sec{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.panel{padding:26px 16px 64px}
.demo-aviso{background:var(--amar);color:#3b2a00;text-align:center;font-weight:700;font-size:14px;padding:9px 12px}.demo-aviso a{color:#3b2a00}
.aviso{display:inline-block;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:14px;color:var(--mut)}.aviso b{color:var(--pri)}
.saludo{text-align:center;margin:10px 0 34px}.saludo h1{font-size:clamp(28px,4vw,38px);margin:12px 0 4px}.saludo p{color:var(--mut);margin:0}
.lanzador{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 18px;max-width:720px;margin:0 auto 48px}
.lanzador .app small{font-weight:600;color:var(--mut);font-size:12px;margin-top:-6px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px}
.kpis div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--sombra)}.kpis small{display:block;color:var(--mut);font-weight:600}.kpis b{font:800 28px 'Nunito'}.kpis em{display:block;font-style:normal;color:var(--mut);font-size:13px}
.tabla{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sombra);overflow:auto}
.tabla h2{font-size:18px;margin:0;padding:16px 18px;border-bottom:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:14.5px}th,td{padding:11px 18px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}th{color:var(--mut);font-weight:700;font-size:13px}tr:last-child td{border-bottom:0}.num{text-align:right}
.est{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:700;background:var(--suave);color:var(--pri)}.est.Paid,.est.Pagada{background:var(--tsuave);color:var(--tea)}.est.Overdue,.est.Vencida{background:var(--errbg);color:var(--err)}
.quien{font-weight:700;font-size:15px}.enlinea{margin:0}
.pie{border-top:1px solid var(--line);padding:24px 0;color:var(--mut);font-size:14px;background:var(--card)}
@media (max-width:900px){.apps{grid-template-columns:repeat(4,minmax(0,1fr))}.grid,.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.pasos{grid-template-columns:minmax(0,1fr)}.pv-body{grid-template-columns:minmax(0,1fr)}.pv-prod{border-right:0;border-bottom:1px solid var(--line)}.hero{padding:44px 0 24px}}
@media (max-width:560px){nav a:not(.btn):not(.entrar):not(.demo-top){display:none}.grid{grid-template-columns:minmax(0,1fr)}.dos{grid-template-columns:minmax(0,1fr)}.caja{margin:20px 16px 48px}.quien{display:none}
.apps,.lanzador{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 8px}.ico{width:60px;height:60px;border-radius:15px}.ico svg{width:30px;height:30px}.app{font-size:12px}.pv-prod{grid-template-columns:repeat(2,minmax(0,1fr))}.bloque{padding:52px 0}}
.pc1{background:#F8D9A0}.pc2{background:#F6E7A8}.pc3{background:#D9B99B}.pc4{background:#DCE6F2}.pc5{background:#ECE6F5}.pc6{background:#F9E3C2}
.pie{margin-top:auto}
.pie .fila{flex-wrap:wrap}
.top.morada nav a.blanco{color:#fff}.mut{color:var(--mut)}.chip{display:inline-block;background:var(--suave);color:var(--pri);border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700;margin:2px}
.envuelve{white-space:normal;min-width:220px}.tabla{margin-bottom:22px}.tabla-tit{padding:12px 18px;border-bottom:1px solid var(--line)}.tabla-tit h2{padding:0;border:0}
.fila-form{display:flex;gap:6px;align-items:center}select.mini{width:auto;margin:0;padding:7px 9px;font-size:14px}
.caja.ancha{max-width:620px}fieldset.modulos{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px 2px;margin:0 0 16px;display:grid;grid-template-columns:1fr 1fr;gap:0 12px}fieldset.modulos legend{font-weight:700;font-size:14px;padding:0 6px}
.planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,320px));gap:18px;justify-content:center}
.plan{background:var(--bg);border:1.5px solid var(--line);border-radius:18px;padding:26px 22px;display:flex;flex-direction:column}
.plan.destacado{border-color:var(--pri);box-shadow:0 18px 40px rgba(108,75,140,.18);background:var(--card)}
.plan h3{font-size:22px;margin:0}.pdesc{color:var(--mut);margin:6px 0 14px;font-size:15px;min-height:44px}
.precio b{font:800 40px 'Nunito'}.precio span{color:var(--mut);margin-left:6px}
.plan ul{list-style:none;padding:0;margin:16px 0 22px;flex:1}.plan li{padding:5px 0 5px 26px;position:relative;font-size:15px}
.plan li::before{content:"";position:absolute;left:2px;top:11px;width:12px;height:7px;border-left:2.5px solid var(--tea);border-bottom:2.5px solid var(--tea);transform:rotate(-45deg)}
.app.bloqueada{opacity:.45;filter:grayscale(.7);cursor:not-allowed}
.barra-uso{max-width:720px;margin:0 auto 26px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 18px;box-shadow:var(--sombra)}
.barra-uso span{color:var(--mut);font-weight:700;font-size:14px}.riel{height:10px;background:var(--suave);border-radius:999px;margin-top:8px;overflow:hidden}.riel i{display:block;height:100%;background:var(--tea);border-radius:999px}
.u0{width:2%}.u1{width:10%}.u2{width:20%}.u3{width:30%}.u4{width:40%}.u5{width:50%}.u6{width:60%}.u7{width:70%}.u8{width:80%;background:var(--amar)!important}.u9{width:90%;background:var(--amar)!important}.u10{width:100%;background:var(--err)!important}
.banda-prueba{background:#F5A524;color:#2b1d00;text-align:center;font-weight:800;font-size:13px;padding:5px 10px;letter-spacing:.02em}

/* ---------- como app en el teléfono ---------- */
button,.btn,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.top{padding-top:env(safe-area-inset-top)}
.instalar-app{text-align:center;margin:-18px 0 26px}.instalar-app .nota{margin:8px auto 0;max-width:360px}
.offline{padding:70px 16px}.offline .ok{background:var(--errbg);color:var(--err)}
@media (max-width:560px){
 .top .fila{height:56px}.marca{font-size:18px}.btn.chico{padding:9px 14px}
 .app-home .pie{display:none}
 .panel{padding:18px max(14px,env(safe-area-inset-left)) calc(28px + env(safe-area-inset-bottom))}
 .saludo{margin:4px 0 24px}.saludo h1{font-size:26px}.saludo p{font-size:14px}
 .lanzador{margin-bottom:28px}
 .kpis{gap:10px}.kpis div{padding:13px 14px;border-radius:12px}.kpis b{font-size:22px}
 .tabla.tarjetas table,.tabla.tarjetas tbody{display:block}.tabla.tarjetas thead{display:none}
 .tabla.tarjetas tr{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:12px 16px;border-bottom:1px solid var(--line)}
 .tabla.tarjetas td{display:block;padding:0;border:0}
 .tabla.tarjetas td[data-l="Cliente"]{grid-column:1;grid-row:1;font-weight:700}
 .tabla.tarjetas td[data-l="Total"]{grid-column:2;grid-row:1;font-weight:800}
 .tabla.tarjetas td[data-l="Factura"],.tabla.tarjetas td[data-l="Fecha"]{grid-column:1;color:var(--mut);font-size:13px}
 .tabla.tarjetas td[data-l="Fecha"]{grid-row:3}
 .tabla.tarjetas td[data-l="Estado"]{grid-column:2;grid-row:2/4;align-self:center;text-align:right}
 .hero h1{font-size:34px}.acciones{flex-direction:column;align-items:stretch}.acciones .btn{width:100%}
}
@media (display-mode:standalone){.pie{display:none}}

/* Teléfono: arriba quedan "Ver demo" y "Entrar" como botones; "Empieza gratis" ya está en la portada. */
@media (max-width:560px){
 nav{gap:8px}
 nav a.demo-top,nav a.entrar{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:8px;padding:7px 12px;font-size:14px;font-weight:700}
 nav a.demo-top{border-color:var(--pri);color:var(--pri)}
 .registro-top{display:none}
}
/* modo claro / oscuro: barra morada fija (no aclara en oscuro), avisos amarillos con su par oscuro, botón del tema */
:root{--barra:#6C4B8C;--abg:#FDF0D5;--afg:#946200}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--barra:#3B2A50;--abg:#3A2E12;--afg:#F6C344;color-scheme:dark}}
:root[data-theme="dark"]{--barra:#3B2A50;--abg:#3A2E12;--afg:#F6C344;color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}
.top.morada{background:var(--barra)}
.tema{flex:none;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);color:var(--fg);font-size:18px;line-height:1;cursor:pointer;font-family:inherit;padding:0;touch-action:manipulation}
.tema:hover{border-color:var(--pri);color:var(--pri)}
.top.morada .tema,.pos-top .tema{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff}
nav .tema{margin-right:4px;vertical-align:middle}