:root{
  --blue:#20a8ff;--blue-dark:#0d2b45;--blue-deep:#07111f;--silver:#d8e3ee;--silver2:#eef3f8;
  --text:#0d1726;--muted:#65758b;--ok:#059669;--warn:#f59e0b;--bad:#dc2626;
  --card:#ffffff;--line:#dfe9f4;--shadow:0 16px 45px rgba(7,17,31,.08);--radius:22px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at top left,rgba(32,168,255,.18),transparent 34%),linear-gradient(180deg,#eff7ff 0%,#f7f9fc 42%,#edf2f7 100%);color:var(--text);-webkit-tap-highlight-color:transparent;padding-bottom:88px}
button,input,select,textarea{font:inherit}button{cursor:pointer}button:active{transform:scale(.98)}.hidden{display:none!important}.muted{color:var(--muted);font-size:13px}.empty{text-align:center;color:var(--muted);padding:38px 12px;background:rgba(255,255,255,.82);border-radius:var(--radius);border:1px dashed #cbd8e6;box-shadow:0 10px 30px rgba(7,17,31,.04)}
.topbar{position:sticky;top:0;z-index:20;background:linear-gradient(135deg,rgba(7,17,31,.96),rgba(13,43,69,.95));backdrop-filter:blur(16px);color:white;border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 10px 30px rgba(7,17,31,.18)}
.topbar-inner{max-width:680px;margin:auto;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:11px}.brand strong{display:block;font-size:18px;letter-spacing:.2px}.brand span{display:block;font-size:11px;color:#9bd4ff;font-weight:700}.brand-mark{width:58px;height:58px;border-radius:19px;background:linear-gradient(145deg,#20a8ff 0%,#d8e3ee 100%);display:grid;place-items:center;color:#061120;font-weight:1000;font-size:30px;box-shadow:0 14px 38px rgba(32,168,255,.28),inset 0 0 0 1px rgba(255,255,255,.55)}.brand-mark.small{width:40px;height:40px;border-radius:13px;font-size:22px}
.top-actions{display:flex;gap:8px;align-items:center}.saldo-pill,.icon-btn{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.09);color:white;border-radius:999px;padding:9px 13px;font-weight:900;font-size:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}.saldo-pill span{color:#89d4ff}.icon-btn{width:39px;height:39px;padding:0;font-size:19px}
.main-shell{max-width:680px;margin:0 auto;padding:16px}.view{display:none}.view.active{display:block;animation:up .22s ease-out}@keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero-card{position:relative;overflow:hidden;border-radius:30px;padding:23px;background:radial-gradient(circle at 12% 0%,rgba(32,168,255,.36),transparent 38%),linear-gradient(135deg,#061120 0%,#0d2b45 58%,#123e63 100%);color:white;display:flex;justify-content:space-between;align-items:center;box-shadow:0 22px 55px rgba(13,43,69,.24);margin-bottom:12px}.hero-card:after{content:"";position:absolute;right:-45px;top:-70px;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)}.hero-card p,.section-head p{margin:0;color:#93d7ff;font-size:11px;text-transform:uppercase;font-weight:1000;letter-spacing:.08em}.hero-card h1{margin:5px 0 4px;font-size:30px;line-height:1}.hero-card small{color:#c8e7ff;font-weight:650;font-size:12px}.hero-action{position:relative;z-index:1}
.home-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:0 0 14px}.metric-card{background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:19px;padding:13px;box-shadow:0 10px 26px rgba(7,17,31,.05)}.metric-card span{display:block;font-size:10px;font-weight:1000;text-transform:uppercase;color:#6d7f94}.metric-card strong{display:block;font-size:23px;margin-top:2px;color:var(--blue-dark)}.metric-card.warning strong{color:#c27a00}.metric-card.expired strong{color:#b91c1c}
.primary-btn,.secondary-btn,.success-btn,.danger-btn{border:0;border-radius:16px;padding:12px 15px;font-weight:1000;box-shadow:0 10px 22px rgba(7,17,31,.08);transition:.15s}.primary-btn{background:linear-gradient(135deg,#20a8ff,#0877c9);color:white}.secondary-btn{background:#fff;color:var(--blue-dark);border:1px solid var(--line)}.success-btn{background:linear-gradient(135deg,#10b981,#047857);color:white}.danger-btn{background:#fee2e2;color:#b91c1c}.full{width:100%}.action-main{font-size:15px}
.search-wrap{position:relative;margin:14px 0}.search-wrap span{position:absolute;left:16px;top:12px;color:#7c8da3;font-weight:900}.search-wrap input{width:100%;border:1px solid rgba(223,233,244,.75);background:rgba(255,255,255,.95);border-radius:18px;padding:13px 16px 13px 45px;box-shadow:0 12px 28px rgba(15,23,42,.06);outline:none}.search-wrap input:focus{border-color:#20a8ff;box-shadow:0 0 0 4px rgba(32,168,255,.15)}
.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:9px;margin-bottom:8px}.tabs::-webkit-scrollbar{display:none}.tabs button{border:1px solid var(--line);background:rgba(255,255,255,.93);border-radius:14px;padding:10px 13px;white-space:nowrap;color:#526477;font-weight:1000;font-size:12px}.tabs button.active{background:linear-gradient(135deg,#07111f,#0d2b45);color:white;border-color:#0d2b45}
.client-list{display:flex;flex-direction:column;gap:11px}.client-card{position:relative;background:rgba(255,255,255,.96);border-radius:21px;padding:15px;display:flex;justify-content:space-between;gap:12px;box-shadow:var(--shadow);border:1px solid var(--line);border-left:7px solid var(--ok);overflow:hidden}.client-card:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(32,168,255,.035),transparent 45%);pointer-events:none}.client-card.warning{border-left-color:var(--warn)}.client-card.expired{border-left-color:var(--bad)}.client-main{min-width:0}.client-title-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.client-card h3{margin:0;font-size:16px;line-height:1.2}.mini-chip{font-size:9px;font-weight:1000;color:#0d76c7;background:#e8f5ff;border-radius:999px;padding:4px 7px}.client-card p{margin:5px 0 0;color:#64748b;font-size:12px;font-weight:750}.client-card small{display:block;margin-top:9px;color:#8b9bad}.client-side{text-align:right;min-width:92px;position:relative;z-index:1}.client-side strong{display:block;color:#0d76c7;margin-bottom:8px;font-size:17px}.status,.status-pill{font-size:10px;font-weight:1000;border-radius:999px;padding:5px 8px;display:inline-block}.status.activo,.status-pill.activo{background:#dcfce7;color:#047857}.status.warning,.status-pill.warning{background:#fef3c7;color:#92400e}.status.expired,.status-pill.expired{background:#fee2e2;color:#b91c1c}
.bottom-nav{position:fixed;left:0;bottom:0;width:100%;background:rgba(255,255,255,.94);backdrop-filter:blur(15px);border-top:1px solid #dbe5ee;z-index:30;display:flex;justify-content:center;gap:6px;padding:9px 8px calc(9px + env(safe-area-inset-bottom));box-shadow:0 -12px 35px rgba(7,17,31,.08)}.bottom-nav button{width:82px;border:0;background:transparent;color:#73839a;border-radius:16px;padding:8px 4px;font-weight:900;font-size:11px}.bottom-nav span{display:block;font-size:18px;margin-bottom:2px}.bottom-nav button.active{background:#e8f5ff;color:#0d76c7}
.section-head{display:flex;justify-content:space-between;align-items:center;margin:8px 0 15px}.section-head h2{font-size:30px;margin:3px 0 0;letter-spacing:-.5px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:13px}.stat-card,.panel-card,.group-card,.settings-card{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}.stat-card{padding:15px;text-align:center}.stat-card span{display:block;color:#718096;text-transform:uppercase;font-size:10px;font-weight:1000}.stat-card strong{font-size:20px;color:#0d76c7}.panel-card{padding:17px;margin-bottom:13px}.panel-card h3{margin:0 0 13px;color:#0d2b45}.mini-list{display:flex;flex-direction:column;gap:8px}.mini-list div{display:flex;justify-content:space-between;gap:12px;padding:11px;border-radius:15px;background:#f8fafc;border:1px solid #edf2f7}.mini-list strong{font-size:13px}.mini-list span{font-size:12px;color:#64748b;text-align:right}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.form-grid label:first-child{grid-column:1/-1}label{display:block;color:#526477;font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.03em}input,select,textarea{width:100%;margin-top:5px;border:1px solid #d8e2ee;background:#f8fafc;border-radius:14px;padding:12px;outline:none;color:#0f172a}input:focus,select:focus,textarea:focus{border-color:#20a8ff;background:#fff;box-shadow:0 0 0 4px rgba(32,168,255,.13)}
.group-list{display:flex;flex-direction:column;gap:12px}.group-card{overflow:hidden}.group-head{padding:15px;background:linear-gradient(135deg,#eff7ff,#f8fbff);border-bottom:1px solid #dbeafe;display:flex;justify-content:space-between}.group-head span{font-size:11px;background:#0d2b45;color:white;border-radius:999px;padding:5px 8px}.group-card button{width:100%;border:0;border-bottom:1px solid #eef2f7;background:white;text-align:left;padding:12px 14px;display:flex;justify-content:space-between}.group-card small{color:#0d76c7;font-weight:900}.settings-card{padding:17px;display:flex;align-items:center;gap:14px}.avatar{width:54px;height:54px;border-radius:18px;background:#0d2b45;color:#20a8ff;display:grid;place-items:center;font-weight:1000;font-size:29px}.settings-card strong{display:block}.settings-card span{color:#64748b;font-size:13px}.settings-grid{display:grid;gap:10px;margin-top:14px}.settings-grid button,.danger-link{display:block;text-decoration:none;text-align:center;border:1px solid var(--line);background:#fff;color:#0d2b45;border-radius:17px;padding:14px;font-weight:1000}.danger-link{background:#fee2e2;color:#b91c1c;border-color:#fecaca}
.modal{position:fixed;inset:0;z-index:80;background:rgba(7,17,31,.62);backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center}.modal-box{background:white;width:100%;max-width:540px;border-radius:27px 27px 0 0;max-height:92vh;overflow:hidden;animation:modalUp .18s ease-out}.modal-box.large{max-width:680px}@media(min-width:700px){.modal{align-items:center}.modal-box{border-radius:27px}}@keyframes modalUp{from{transform:translateY(20px);opacity:.6}to{transform:none;opacity:1}}.modal-head,.detail-head{padding:16px 18px;border-bottom:1px solid #e5edf5;display:flex;justify-content:space-between;align-items:center}.modal-head h2,.detail-head h2{margin:0}.modal-head button,.detail-head button{border:0;background:#eef2f7;border-radius:13px;width:36px;height:36px;font-size:22px}.modal-body,.detail-body{padding:16px;overflow-y:auto;max-height:calc(92vh - 70px)}.form{display:grid;gap:11px}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.check{display:flex;align-items:center;gap:8px;background:#eff7ff;padding:12px;border-radius:14px}.check input{width:auto;margin:0}.detail-head{background:linear-gradient(135deg,#07111f,#0d2b45);color:white;align-items:flex-start}.detail-head button{color:white;background:rgba(255,255,255,.12)}.detail-body{display:grid;gap:11px}.detail-row,.creds{display:flex;justify-content:space-between;gap:10px;padding:13px;border-radius:15px;background:#f8fafc;border:1px solid #edf2f7}.detail-row span,.creds span{color:#64748b;font-size:12px;font-weight:850}.creds button{border:1px solid #dbe5ee;background:white;border-radius:12px;padding:8px 10px;font-weight:1000;color:#0d76c7}.tags{display:flex;flex-wrap:wrap;gap:6px}.tags span{background:#fff7d6;color:#80620b;border-radius:999px;padding:6px 9px;font-size:12px;font-weight:900}.notes{background:#f8fafc;border:1px solid #edf2f7;border-radius:15px;padding:13px;color:#526477;font-size:13px}.actions-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.actions-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.renew-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px}.renew-grid button{padding:16px;border:2px solid #dbeafe;background:#f8fbff;border-radius:16px;font-weight:1000;color:#0d76c7}.history-list{display:grid;gap:10px}.history-list h3{margin:14px 0 3px;color:#0d2b45}.history-item{background:#f8fafc;border:1px solid #e5edf5;border-radius:14px;padding:12px;display:flex;justify-content:space-between;gap:12px}.history-item strong{font-size:13px}.history-item span{font-size:12px;color:#64748b;text-align:right}
#toast-container{position:fixed;bottom:92px;left:50%;transform:translateX(-50%);z-index:200;width:min(92%,430px);display:flex;flex-direction:column;gap:8px}.toast{background:white;border-left:5px solid var(--ok);border-radius:16px;padding:13px 15px;box-shadow:0 18px 45px rgba(15,23,42,.2);font-weight:850;opacity:0;transform:translateY(10px);transition:.2s}.toast.show{opacity:1;transform:none}.toast.error{border-left-color:var(--bad)}.toast.info{border-left-color:var(--blue)}
.login-body{min-height:100vh;padding:0;background:radial-gradient(circle at 15% 10%,rgba(32,168,255,.30),transparent 35%),linear-gradient(135deg,#07111f,#0d2b45 58%,#d8e3ee)}.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(100%,400px);background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.65);border-radius:30px;padding:32px;box-shadow:0 38px 85px rgba(0,0,0,.30);text-align:left}.login-card h1{margin:15px 0 5px;font-size:35px;letter-spacing:-.7px}.login-card p{color:#526477;line-height:1.45}.login-card form{display:grid;gap:12px;margin-top:20px}.login-card button{border:0;border-radius:17px;background:linear-gradient(135deg,#20a8ff,#0877c9);color:white;padding:14px;font-weight:1000}.login-card small{display:block;text-align:center;color:#8b9bad;margin-top:18px}.alert.error{background:#fee2e2;color:#991b1b;padding:12px;border-radius:12px;font-weight:850}
@media(max-width:460px){body{padding-bottom:86px}.main-shell{padding:12px}.hero-card{padding:18px;align-items:flex-start}.hero-card h1{font-size:24px}.home-metrics{grid-template-columns:repeat(3,1fr);gap:7px}.metric-card{padding:11px 9px}.metric-card strong{font-size:20px}.client-card{padding:13px}.client-side{min-width:82px}.form-grid,.two,.three,.stats-grid{grid-template-columns:1fr}.bottom-nav button{width:72px}.modal-body,.detail-body{padding:14px}.actions-col{grid-template-columns:1fr}.mini-list div,.history-item{flex-direction:column}.mini-list span,.history-item span{text-align:left}}
.google-btn{display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;border:1px solid #d8e2ee;background:#fff;color:#172033;border-radius:17px;padding:13px 14px;font-weight:1000;margin:18px 0 8px;box-shadow:0 12px 28px rgba(15,23,42,.06)}
.google-btn span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#4285F4,#34A853,#FBBC05,#EA4335);color:white;font-weight:1000;font-size:14px}
.login-sep{display:flex;align-items:center;gap:10px;color:#8b9bad;font-size:11px;font-weight:900;text-transform:uppercase;margin:10px 0 4px}
.login-sep:before,.login-sep:after{content:"";height:1px;background:#d8e2ee;flex:1}


/* === Parche clientes + formulario profesional + imagen renovación === */
.form-head-premium{background:linear-gradient(135deg,#07111f,#0d2b45);color:white;border-bottom:0}
.form-head-premium button{background:rgba(255,255,255,.13);color:white}
.modal-kicker{display:block;color:#93d7ff;font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.form-pro{background:linear-gradient(180deg,#f8fbff,#eef5fb);gap:14px}
.form-section{background:#fff;border:1px solid #dfe9f4;border-radius:22px;padding:15px;box-shadow:0 10px 28px rgba(7,17,31,.055);display:grid;gap:11px}
.form-section-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-bottom:1px solid #edf3f8;padding-bottom:10px;margin-bottom:2px}
.form-section-title strong{color:#0d2b45;font-size:15px}
.form-section-title span{color:#73839a;font-size:11px;font-weight:800;text-align:right}
.save-client-btn{margin-top:4px;padding:15px!important;border-radius:18px!important}
.client-card{transition:transform .16s, box-shadow .16s}
.client-card:hover{transform:translateY(-1px);box-shadow:0 18px 48px rgba(7,17,31,.12)}
.creds strong{white-space:normal;line-height:1.35}
@media(max-width:460px){.form-section{padding:13px;border-radius:19px}.form-section-title{display:block}.form-section-title span{text-align:left;display:block;margin-top:2px}.save-client-btn{position:sticky;bottom:0;z-index:3}}


/* === Ajustes: WhatsApp visible solo para vencimientos próximos === */
.client-card{padding-right:54px}
.wa-card-btn{
    position:absolute;
    right:11px;
    bottom:11px;
    width:39px;
    height:39px;
    border:0;
    border-radius:13px;
    background:#25D366;
    color:white;
    display:grid;
    place-items:center;
    font-size:18px;
    box-shadow:0 10px 22px rgba(37,211,102,.28);
    z-index:4;
}
.wa-card-btn:before{content:"☎";font-size:18px}
.wa-card-btn{font-size:0}
@media(max-width:460px){.client-card{padding-right:50px}.wa-card-btn{right:9px;bottom:9px;width:37px;height:37px}}


/* === Stats compacto y menos acumulativo === */
.stats-extra-summary{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    margin:0 0 13px;
}
.stats-extra-summary div{
    background:rgba(255,255,255,.94);
    border:1px solid #dfe9f4;
    border-radius:17px;
    padding:11px 8px;
    text-align:center;
    box-shadow:0 10px 26px rgba(7,17,31,.045);
}
.stats-extra-summary span{
    display:block;
    font-size:9px;
    color:#72839a;
    font-weight:1000;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.stats-extra-summary strong{
    display:block;
    margin-top:3px;
    color:#0d2b45;
    font-size:18px;
}
.compact-row,.top-row{
    position:relative;
    align-items:center;
}
.compact-row strong,.top-row strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.top-row b{
    color:#1ea7ff;
    margin-right:5px;
}
.list-more-btn{
    width:100%;
    border:1px dashed #b9cbe0;
    background:#f8fbff;
    color:#0d76c7;
    border-radius:14px;
    padding:11px;
    font-weight:1000;
    margin-top:2px;
}
.panel-card h3{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.panel-card h3:after{
    content:"";
    width:42px;
    height:4px;
    border-radius:999px;
    background:linear-gradient(90deg,#1ea7ff,#d8e3ee);
}
@media(max-width:460px){
    .stats-extra-summary{grid-template-columns:repeat(2,1fr)}
    .compact-row strong,.top-row strong{white-space:normal}
}

/* === Fase 5 productividad === */
.stats-toolbar{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px;margin:0 0 12px}.stats-toolbar select,.stats-toolbar input{margin:0;background:#fff}.renew-grid .wide{grid-column:1/-1;background:#0d2b45!important;color:white!important;border-color:#0d2b45!important}.trash-row{display:grid!important;grid-template-columns:1fr auto;gap:8px!important;align-items:center}.trash-row span{grid-column:1/-1;text-align:left!important}.trash-row div{display:flex;gap:8px;justify-content:flex-end}.trash-row button{padding:8px 10px!important;font-size:12px}.tabs button[data-filter="today"],.tabs button[data-filter="tomorrow"],.tabs button[data-filter="next7"]{border-color:#b8defa}.tabs button[data-filter="no_phone"],.tabs button[data-filter="no_creds"]{border-color:#ffd4d4}@media(max-width:460px){.stats-toolbar{grid-template-columns:1fr}.trash-row{grid-template-columns:1fr}}