:root{
  --tinta:#0F172A; --tinta2:#334155; --gris:#475569; --borde:#E2E8F0; --fondo:#F4F6F8;
  --marca:#0B5BD3; --marca-osc:#0A3F96; --marca-suave:#E8F0FD; --menu:#0B2147; --menu2:#163267; --naranja:#F7801E;
  --ok-f:#DCFCE7; --ok-t:#14532D; --warn-f:#FFEDD5; --warn-t:#7C2D12; --bad-f:#FEE2E2; --bad-t:#7F1D1D;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--tinta);background:var(--fondo);font-size:15px}
a{color:var(--marca)}a:hover{color:var(--marca-osc)}
h1,h2,h3{margin:0}
h1{font-family:"Space Grotesk",Inter,sans-serif;font-size:30px;font-weight:700;letter-spacing:-.01em}
h2{font-size:18px;font-weight:600}
.app{display:flex;flex-wrap:wrap;min-height:100vh}
.menu{flex:1 1 240px;max-width:100%;background:var(--menu);color:#E2E8F0;padding:24px 16px;display:flex;flex-direction:column;gap:24px}
.logo{display:flex;align-items:center;gap:10px;padding:0 8px;color:#fff;text-decoration:none;font-family:"Space Grotesk",sans-serif;font-size:20px;font-weight:700}
.logo i{width:32px;height:32px;border-radius:8px;background:#14B8A6;display:flex;align-items:center;justify-content:center}
.menu nav{display:flex;flex-direction:column;gap:4px}
.menu nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;color:#CBD5E1;text-decoration:none;font-weight:500;font-size:14px}
.menu nav a:hover,.menu nav a.activo{background:var(--menu2);color:#fff}
.menu .sep{font-size:11px;font-weight:600;color:#94A3B8;text-transform:uppercase;letter-spacing:.06em;padding:12px 12px 4px}
.menu .pie{margin-top:auto;font-size:13px;color:#94A3B8;padding:0 8px;display:flex;flex-direction:column;gap:8px}
.menu .pie button{background:none;border:none;color:#CBD5E1;font:inherit;cursor:pointer;padding:0;text-align:left}
.contenido{flex:999 1 560px;min-width:0;padding:32px 40px 56px;display:flex;flex-direction:column;gap:24px}
.cabecera{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.cabecera .sub{font-size:13px;font-weight:600;color:var(--marca)}
.muted{color:var(--gris)}
.small{font-size:13px}
.tarjeta{background:#fff;border:1px solid var(--borde);border-radius:12px}
.tarjeta .tit{padding:16px 20px;border-bottom:1px solid var(--borde);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.pad{padding:20px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.kpi{background:#fff;border:1px solid var(--borde);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.kpi b{font-family:"Space Grotesk",sans-serif;font-size:32px;font-weight:700}
.kpi span{font-size:13px;color:var(--gris)}
.c-marca{color:var(--marca)}.c-warn{color:#B45309}.c-bad{color:#B91C1C}.c-ok{color:#15803D}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:8px;border:1px solid #CBD5E1;background:#fff;color:var(--tinta);font:600 14px Inter,sans-serif;cursor:pointer;text-decoration:none}
.btn:hover{border-color:#94A3B8;color:var(--tinta)}
.btn.prim{background:var(--marca);border-color:var(--marca);color:#fff}.btn.prim:hover{background:var(--marca-osc)}
.btn.peligro{background:#B91C1C;border-color:#B91C1C;color:#fff}
.btn.chico{min-height:36px;padding:0 12px;font-size:13px}
.fila-btn{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pill{display:inline-flex;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.pill.ok{background:var(--ok-f);color:var(--ok-t)}.pill.warn{background:var(--warn-f);color:var(--warn-t)}
.pill.bad{background:var(--bad-f);color:var(--bad-t)}.pill.done{background:#E2E8F0;color:#334155}
.filtros{display:flex;gap:6px;flex-wrap:wrap}
.filtros a{min-height:36px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;border:1px solid #CBD5E1;background:#fff;color:var(--tinta2);font-weight:600;font-size:13px;text-decoration:none}
.filtros a.activo{background:var(--marca);border-color:var(--marca);color:#fff}
.tabla{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:12px;font-weight:600;color:var(--gris);text-transform:uppercase;letter-spacing:.04em;padding:12px 16px;border-bottom:1px solid var(--borde);white-space:nowrap}
td{padding:13px 16px;border-bottom:1px solid #EEF2F6;font-size:14px;vertical-align:top}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr:last-child td{border-bottom:none}
.sub2{display:block;font-size:12px;color:#64748B;margin-top:2px}
.aviso{display:flex;gap:12px;padding:14px 16px;border-radius:10px;font-size:14px;line-height:1.5}
.aviso.bad{background:#FEF2F2}.aviso.warn{background:#FFF7ED}.aviso.info{background:#F1F5F9}.aviso.ok{background:#F0FDF4}
.aviso strong{display:block}
.flash{padding:12px 16px;border-radius:10px;font-size:14px;font-weight:500}
.flash.ok{background:var(--ok-f);color:var(--ok-t)}.flash.warn{background:var(--warn-f);color:var(--warn-t)}.flash.error{background:var(--bad-f);color:var(--bad-t)}
.cols{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.cols>.ancha{flex:999 1 600px;min-width:0;display:flex;flex-direction:column;gap:24px}
.cols>.lateral{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:16px}
form.campos{display:grid;gap:14px}
label{font-size:14px;font-weight:500;display:flex;flex-direction:column;gap:6px}
label.check{flex-direction:row;align-items:center;gap:10px;min-height:32px;font-weight:400}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],select,textarea{min-height:44px;padding:0 12px;border-radius:8px;border:1px solid #CBD5E1;background:#fff;font:400 14px Inter,sans-serif;color:var(--tinta);width:100%}
textarea{padding:10px 12px;min-height:120px}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--marca)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.zona{border:2px dashed #94A3B8;border-radius:12px;padding:22px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;background:#fff}
.zona.sobre{border-color:var(--marca);background:var(--marca-suave)}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.copia{background:#F1F5F9;border-radius:8px;padding:8px 12px;display:inline-block;word-break:break-all}
.whats{background:#ECE7DF;border-radius:14px;padding:14px}
.whats pre{margin:0;background:#fff;border-radius:4px 12px 12px 12px;padding:12px 14px;white-space:pre-wrap;font:14px/1.5 Inter,sans-serif}
dl.totales{margin:0;display:grid;grid-template-columns:auto auto;column-gap:40px;row-gap:8px;font-size:14px;font-variant-numeric:tabular-nums;justify-content:end}
dl.totales dd{margin:0;text-align:right}
dl.totales .t{font-weight:700;padding-top:8px;border-top:1px solid var(--borde)}
.lista-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--borde);flex-wrap:wrap}
.tabs a{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;color:var(--gris);font-weight:600;text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs a.activo{color:var(--marca);border-color:var(--marca)}
.centro{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.caja{background:#fff;border:1px solid var(--borde);border-radius:16px;padding:36px;width:100%;max-width:420px;display:flex;flex-direction:column;gap:20px}
.vacio{padding:40px 20px;text-align:center;color:var(--gris)}
@media (max-width:700px){.contenido{padding:24px 16px 40px}h1{font-size:24px}}
td:first-child{white-space:nowrap}
.btn{white-space:nowrap}
td:first-child{white-space:nowrap}
.btn{white-space:nowrap}
/* ── diseño de una columna con barra superior ── */
.barra{background:var(--menu);color:#fff}
.barra .in{max-width:1180px;margin:0 auto;padding:12px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.barra nav{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.barra nav a{color:#CBD5E1;text-decoration:none;font-weight:500;font-size:14px;padding:10px 12px;border-radius:8px}
.barra nav a:hover,.barra nav a.activo{background:var(--menu2);color:#fff}
.barra form button{background:none;border:none;color:#94A3B8;font:500 14px Inter,sans-serif;cursor:pointer;padding:10px 12px}
.pagina{max-width:1180px;margin:0 auto;padding:32px 24px 64px;display:flex;flex-direction:column;gap:24px}
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.paso{background:#fff;border:1px solid var(--borde);border-radius:12px;padding:16px 18px;display:flex;gap:12px;align-items:flex-start}
.paso .n{flex:none;width:30px;height:30px;border-radius:15px;background:var(--marca-suave);color:var(--marca);font-weight:700;display:flex;align-items:center;justify-content:center}
.paso.hecho .n{background:var(--marca);color:#fff}
.opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.opcion{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:12px}
.opcion.sel{border:2px solid var(--marca)}
details.guia{background:#F8FAFC;border-radius:10px;padding:12px 16px}
details.guia summary{cursor:pointer;font-weight:600;min-height:28px}
details.guia ol{margin:10px 0 0;padding-left:20px;line-height:1.7;font-size:14px}
.legal{max-width:820px;margin:0 auto;padding:40px 24px 80px;line-height:1.7}
.legal h1{margin-bottom:8px}.legal h2{margin:28px 0 8px}
.hero{background:var(--menu);color:#fff}
.hero .in{max-width:1080px;margin:0 auto;padding:80px 24px;display:flex;flex-direction:column;gap:22px}
.hero h1{font-size:50px;line-height:1.08;max-width:820px}
.hero p{font-size:19px;color:#CBD5E1;max-width:680px;margin:0;line-height:1.6}
.sec{max-width:1080px;margin:0 auto;padding:64px 24px;display:flex;flex-direction:column;gap:28px}
@media (max-width:700px){.hero h1{font-size:34px}.pagina{padding:24px 16px 48px}}
[hidden]{display:none!important}
input[type=date]{min-height:44px;padding:0 12px;border-radius:8px;border:1px solid #CBD5E1;background:#fff;font:400 14px Inter,sans-serif;color:var(--tinta);width:100%}
.opciones{align-items:start}

/* ── marca Smart Invoice by Closac: barra blanca con logo ── */
.barra{background:#fff;color:var(--tinta);border-bottom:1px solid var(--borde)}
.barra .in{padding:8px 24px}
.barra .logo{padding:0}
.barra .logo img{display:block;height:52px;width:auto}
.barra nav a{color:var(--tinta2)}
.barra nav a:hover,.barra nav a.activo{background:var(--marca-suave);color:var(--marca)}
.barra form button{color:var(--gris)}
.hero{background:var(--menu)}
.btn.naranja{background:var(--naranja);border-color:var(--naranja);color:#fff}
.btn.naranja:hover{background:#E06A0B;border-color:#E06A0B;color:#fff}
/* botón flotante de ayuda */
.ayuda-wa{position:fixed;right:20px;bottom:20px;z-index:50;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;
  border-radius:999px;background:#25D366;color:#fff;font:600 15px Inter,sans-serif;text-decoration:none;box-shadow:0 6px 20px rgba(15,23,42,.25)}
.ayuda-wa:hover{background:#1EBE5A;color:#fff}
@media (max-width:700px){.ayuda-wa span{display:none}.ayuda-wa{padding:0 14px}.barra .logo img{height:40px}}
.hero .hero-grid{flex-direction:row;align-items:center;justify-content:space-between;gap:32px}
.hero .hero-txt{display:flex;flex-direction:column;gap:22px;flex:1 1 560px;min-width:0}
.hero .hero-img{flex:none;width:260px;height:260px;border-radius:32px;background:#fff;padding:18px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
@media (max-width:900px){.hero .hero-img{display:none}}

/* ── página de inicio: pasos con iconos y demostración visual ── */
.paso .n{width:44px;height:44px;border-radius:12px}
.paso .n .ico{width:22px;height:22px}
.paso-n{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--naranja);margin-bottom:2px}
.paso.hecho .n{background:var(--naranja)}
.demo{display:grid;grid-template-columns:1fr auto 1.1fr;gap:20px;align-items:center}
.ventana{background:#fff;border:1px solid var(--borde);border-radius:14px;box-shadow:0 18px 40px rgba(11,33,71,.10);overflow:hidden}
.ventana-barra{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#F8FAFC;border-bottom:1px solid var(--borde);font-size:12px;font-weight:600;color:var(--gris)}
.ventana-barra i{width:10px;height:10px;border-radius:50%;background:#E2E8F0}
.ventana-barra i:nth-child(1){background:#FCA5A5}.ventana-barra i:nth-child(2){background:#FCD34D}.ventana-barra i:nth-child(3){background:#86EFAC}
.ventana-barra span{margin-left:8px}
.bandeja{list-style:none;margin:0;padding:6px 0}
.bandeja li{display:flex;gap:12px;align-items:flex-start;padding:10px 16px;border-bottom:1px solid #F1F5F9}
.bandeja li:last-child{border-bottom:none}
.bandeja .av{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.bandeja li>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bandeja b{font-size:14px;font-weight:600}
.bandeja span{font-size:13px;color:var(--gris)}
.bandeja time{font-size:12px;color:#94A3B8;white-space:nowrap}
.bandeja em{font-style:normal;font-size:12px;align-self:flex-start;padding:2px 8px;border-radius:6px;margin-top:4px}
.bandeja em.adj{background:var(--marca-suave);color:var(--marca);font-weight:600}
.bandeja em.ign{background:#F1F5F9;color:#64748B}
.bandeja li.gris b,.bandeja li.gris span{color:#94A3B8;text-decoration:line-through}
.flecha{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:12px;font-weight:700;color:var(--naranja);text-transform:uppercase;letter-spacing:.04em}
.arbol{list-style:none;margin:0;padding:10px 0;font-size:14px}
.arbol li{display:flex;align-items:center;gap:10px;padding:7px 16px;position:relative}
.arbol li small{color:#94A3B8;font-size:12px;margin-left:2px}
.arbol li.abierta{background:var(--marca-suave);border-radius:8px;margin:0 8px;padding-right:8px}
.arbol .n1{padding-left:40px}.arbol .n2{padding-left:64px}.arbol .n3{padding-left:96px}
.arbol li.abierta.n2{padding-left:56px}
.f-dir{flex:none;width:22px;height:16px;margin-top:3px;border-radius:2px 3px 3px 3px;background:#FFCB4C;position:relative;box-shadow:inset 0 -1px 0 rgba(0,0,0,.08)}
.f-dir::before{content:"";position:absolute;left:0;top:-4px;width:10px;height:5px;border-radius:2px 3px 0 0;background:#E8A92C}
.f-dir::after{content:"";position:absolute;left:0;right:0;top:3px;height:1px;background:rgba(255,255,255,.55)}
.f-pdf,.f-xml,.f-xls{flex:none;display:inline-flex;align-items:center;justify-content:center;height:22px;min-width:30px;padding:0 4px;border-radius:5px;font:700 10px Inter,sans-serif;color:#fff}
.f-pdf{background:#DC2626}.f-xml{background:#64748B}.f-xls{background:#16A34A;min-width:22px}
.beneficios .opcion{gap:8px}
.b-ic{width:44px;height:44px;border-radius:12px;background:var(--marca-suave);color:var(--marca);display:flex;align-items:center;justify-content:center}
@media (max-width:900px){.demo{grid-template-columns:1fr}.flecha{flex-direction:row;justify-content:center;gap:10px;margin:2px 0}.flecha svg{transform:rotate(90deg);width:40px}.flecha br{display:none}}
.beneficios{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* planes */
.planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;max-width:820px}
.plan{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:14px}
.plan.destacado{border:2px solid var(--naranja);box-shadow:0 8px 24px rgba(247,128,30,.15)}
.plan h2{margin:0;font-size:20px}
.plan .precio{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.plan .precio b{font:700 30px 'Space Grotesk',Inter,sans-serif;color:var(--tinta)}
.plan .precio s{font-size:15px}
.plan .incluye{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--tinta2)}
.plan form .btn,.plan > .btn{width:100%}
/* clientes (dueño) */
.barras{display:flex;align-items:flex-end;gap:8px;height:160px}
.barras .mes{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.barras .par{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px;border-bottom:1px solid var(--borde)}
.barras i{display:block;width:40%;max-width:18px;min-height:2px;border-radius:3px 3px 0 0}
.barras span{font-size:11px;color:var(--gris)}
.leyenda{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:middle}
.acciones summary{list-style:none;cursor:pointer}.acciones summary::-webkit-details-marker{display:none}
.acciones[open]{background:#F8FAFC;border:1px solid var(--borde);border-radius:8px;padding:10px;min-width:220px}

/* ── Conectar Gmail: 3 pasos ── */
.opcion.gmail{border:2px solid var(--marca)}
.pasos-g{display:flex;flex-direction:column;gap:18px}
.paso-g{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start}
.paso-g label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px}
.num-g{width:32px;height:32px;border-radius:50%;background:var(--marca);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
#g-clave{font-size:17px;letter-spacing:.06em}
.ayuda-g,.mas-g{font-size:14px}
.ayuda-g summary,.mas-g summary{cursor:pointer;color:var(--marca);margin-top:10px}
.mini-g{margin-top:12px;border:1px solid var(--borde);border-radius:10px;overflow:hidden;max-width:min(360px,100%);background:#fff;font-size:13px;box-shadow:0 4px 14px rgba(15,23,42,.06)}
.mg-barra{background:#F1F5F9;color:#64748B;padding:6px 10px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-cuerpo{position:relative;padding:14px 14px 16px;min-height:150px}
.mg-tit{font-size:15px;color:#1F2937;margin-bottom:10px}
.mg-campo{border:1px solid #94A3B8;border-radius:6px;height:34px;display:flex;align-items:center;padding:0 10px;color:#0F172A}
.mg-escribe{display:inline-block;overflow:hidden;white-space:nowrap;width:0;animation:mg-escribir 10s steps(13) infinite}
.mg-cursor{width:1px;height:16px;background:#0F172A;margin-left:1px;animation:mg-parpadeo 1s step-end infinite}
.mg-boton{margin-top:10px;display:inline-block;padding:6px 16px;border-radius:16px;background:#E2E8F0;color:#475569;font-weight:600;animation:mg-crear 10s infinite}
.mg-modal{position:absolute;inset:8px;background:#fff;border-radius:10px;box-shadow:0 8px 30px rgba(15,23,42,.25);padding:14px;opacity:0;animation:mg-modal 10s infinite;display:flex;flex-direction:column;gap:10px}
.mg-mtit{font-weight:600;color:#1F2937}
.mg-clave{background:#FEF3C7;border-radius:6px;padding:8px 10px;font-family:ui-monospace,Menlo,monospace;font-size:16px;letter-spacing:.04em;text-align:center}
.mg-copiar{align-self:flex-end;padding:5px 14px;border-radius:16px;color:var(--marca);font-weight:600;animation:mg-copiar 10s infinite}
@keyframes mg-escribir{0%,8%{width:0}32%,100%{width:13ch}}
@keyframes mg-parpadeo{50%{opacity:0}}
@keyframes mg-crear{0%,36%{background:#E2E8F0;color:#475569}40%,46%{background:var(--marca);color:#fff}50%,100%{background:#E2E8F0;color:#475569}}
@keyframes mg-modal{0%,46%{opacity:0;transform:scale(.96)}50%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes mg-copiar{0%,66%{background:transparent}70%,80%{background:#DBEAFE}84%,100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.mg-escribe{animation:none;width:13ch}.mg-cursor,.mg-boton,.mg-copiar{animation:none}.mg-modal{animation:none;opacity:1}}
.desde-g{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px}