:root{--ink:#0a2530;--ink2:#123846;--pri:#0e7c86;--pri2:#0b646c;--pri-soft:#e2f3f2;--acc:#2563eb;--bg:#f3f6f8;--card:#fff;--txt:#10252d;--mut:#5d7480;--bor:#e1e8ec;--ok:#178a4c;--warn:#b86e00;--bad:#c93131;--side:#0a2530;--r:14px;--sh:0 1px 2px rgba(10,37,48,.06),0 6px 18px rgba(10,37,48,.05);--ring:0 0 0 3px rgba(14,124,134,.22)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;background:var(--bg);color:var(--txt);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--pri);text-decoration:none}a:hover{color:var(--pri2)}
h1,h2,h3{margin:0 0 .6rem;letter-spacing:-.01em;color:var(--txt)}h2{font-size:1.4rem;font-weight:700}h3{font-size:1.05rem;font-weight:650}
.ico{display:inline-block;vertical-align:middle;flex-shrink:0}
:focus-visible{outline:2px solid var(--pri);outline-offset:2px}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:0;border-radius:10px;padding:.58rem 1.05rem;font:inherit;font-weight:600;cursor:pointer;background:var(--pri);color:#fff;text-align:center;box-shadow:0 1px 2px rgba(10,37,48,.18);transition:background .15s,transform .08s,box-shadow .15s}
.btn:hover{background:var(--pri2);color:#fff;box-shadow:0 4px 12px rgba(14,124,134,.28)}.btn:active{transform:translateY(1px);box-shadow:none}
.btn.sec{background:#fff;color:var(--txt);box-shadow:inset 0 0 0 1px #cfdadf}.btn.sec:hover{background:#f1f6f7;color:var(--txt);box-shadow:inset 0 0 0 1px #b6c6cd}
.btn.bad{background:var(--bad)}.btn.bad:hover{background:#a82626;box-shadow:0 4px 12px rgba(201,49,49,.28)}.btn.acc{background:var(--acc)}.btn.acc:hover{background:#1d4fc4}
.btn.sm{padding:.32rem .7rem;font-size:.84rem;border-radius:8px}.btn.lg{padding:.85rem 1.5rem;font-size:1.02rem;border-radius:12px}.btn:disabled,.btn.busy{opacity:.6;cursor:not-allowed;pointer-events:none}

/* formularios */
input,select,textarea{width:100%;padding:.6rem .75rem;border:1px solid #cfdadf;border-radius:10px;font:inherit;color:var(--txt);background:#fff;transition:border-color .15s,box-shadow .15s}
input:hover,select:hover,textarea:hover{border-color:#a9bcc4}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pri);box-shadow:var(--ring)}
input::placeholder{color:#97a9b1}
label{display:block;font-size:.82rem;font-weight:600;color:#3a5560;margin:.7rem 0 .3rem}
input[type=checkbox],input[type=radio]{width:auto}

/* tarjetas y utilidades */
.card{background:var(--card);border-radius:var(--r);padding:1.2rem;box-shadow:var(--sh);border:1px solid rgba(225,232,236,.7)}
.row{display:flex;gap:.8rem;flex-wrap:wrap}.row>*{flex:1;min-width:150px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.bar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:end;margin-bottom:1rem}.bar>div{flex:0 1 190px}.bar .grow{flex:1 1 240px}.right{margin-left:auto;text-align:right}
.muted{color:var(--mut)}.big{font-size:1.8rem;font-weight:800}.tot{font-size:2rem;font-weight:800;color:var(--pri)}.num{text-align:right;font-variant-numeric:tabular-nums}.scroll{overflow-x:auto}

/* tablas */
.tabla{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:12px;overflow:hidden;font-size:.9rem;border:1px solid var(--bor)}
.tabla th{background:#eef5f6;text-align:left;padding:.65rem .8rem;font-size:.78rem;font-weight:650;color:#2c4852;white-space:nowrap;border-bottom:1px solid var(--bor)}
.tabla td{padding:.6rem .8rem;border-top:1px solid #edf2f4;vertical-align:middle}.tabla tr:first-child td{border-top:0}
.tabla tr:hover td{background:#f6fafa}.tabla th.num{text-align:right}
.card>.tabla{border:0}
.badge{display:inline-flex;align-items:center;padding:.14rem .6rem;border-radius:99px;font-size:.76rem;font-weight:650}
.b-ok{background:#dcf5e6;color:#116a3a}.b-warn{background:#fdefd0;color:#8a5300}.b-bad{background:#fde2e2;color:#a02424}.b-info{background:#dce9fd;color:#1b45a8}

/* avisos, toast, modal */
.aviso{background:#fdf1d6;color:#7a4a00;padding:.65rem 1.4rem;font-weight:600;border-bottom:1px solid #f3dfae}.aviso.bad{background:#fde6e6;color:#972222;border-color:#f4c7c7}
#toast{position:fixed;right:1rem;bottom:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:99}
#toast .t{padding:.75rem 1.1rem;border-radius:12px;color:#fff;background:var(--ink);box-shadow:0 10px 30px rgba(10,37,48,.3);font-weight:500;animation:tin .25s ease both}
#toast .t.err{background:var(--bad)}#toast .t.ok{background:var(--ok)}
@keyframes tin{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.modal-bg{position:fixed;inset:0;background:rgba(8,28,36,.55);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:2.5rem 1rem;overflow:auto;z-index:50;animation:fin .18s ease both}
.modal{background:#fff;border-radius:18px;width:100%;max-width:760px;padding:1.4rem;box-shadow:0 30px 80px rgba(8,28,36,.35);animation:min .22s cubic-bezier(.2,.8,.3,1) both}
.modal h3{display:flex;justify-content:space-between;align-items:center;font-size:1.15rem;margin-bottom:.9rem}
.modal .x{cursor:pointer;font-size:1.6rem;line-height:1;color:var(--mut);width:34px;height:34px;display:grid;place-items:center;border-radius:9px;transition:background .15s}.modal .x:hover{background:#eef3f5;color:var(--txt)}
@keyframes fin{from{opacity:0}to{opacity:1}}@keyframes min{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

/* layout app */
.app{display:flex;min-height:100vh}
.side{width:248px;background:linear-gradient(180deg,#0a2530 0%,#0c2c39 100%);color:#a9c0c9;padding:1rem .75rem 1.5rem;position:sticky;top:0;height:100vh;overflow:auto;flex-shrink:0;scrollbar-width:thin;scrollbar-color:#1d4350 transparent}
.side .logo{display:flex;align-items:center;gap:.65rem;padding:.35rem .55rem 1.2rem;color:#fff;font-weight:750;font-size:1.08rem;letter-spacing:-.01em}
.side .logo small{font-weight:500;color:#7fa3b0;font-size:.8em}
.side .logo .lg{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#14a3ad,#0e7c86);color:#fff;box-shadow:0 4px 14px rgba(20,163,173,.35);overflow:hidden;flex-shrink:0}
.side .logo img{width:38px;height:38px;object-fit:cover;background:#fff}
.side .grp{font-size:.74rem;font-weight:600;color:#6c8f9c;padding:1rem .7rem .35rem}
.side a{position:relative;display:flex;gap:.7rem;align-items:center;padding:.55rem .75rem;border-radius:10px;color:#b7ccd4;margin-bottom:2px;font-weight:500;transition:background .15s,color .15s}
.side a:hover{background:rgba(255,255,255,.07);color:#fff}
.side a.on{background:rgba(20,163,173,.2);color:#fff}
.side a.on::before{content:"";position:absolute;left:-.75rem;top:22%;bottom:22%;width:4px;border-radius:0 4px 4px 0;background:#2dd4d4}
.side a.on .ico{color:#5eead4}
.main{flex:1;min-width:0}
.top{display:flex;align-items:center;gap:.9rem;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(10px);padding:.65rem 1.4rem;border-bottom:1px solid var(--bor);position:sticky;top:0;z-index:5;min-height:58px}
.top>b{font-size:1.02rem;font-weight:700}
.top .ham{display:none;width:38px;height:38px;place-items:center;border-radius:10px;cursor:pointer;color:var(--txt)}.top .ham:hover{background:#eef3f5}
.top .right{display:flex;align-items:center;gap:.35rem}
.chip{display:flex;align-items:center;gap:.6rem;padding:.2rem .8rem .2rem .25rem;border-radius:99px;background:#f0f5f6;margin-right:.25rem}
.chip .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#14a3ad,#0e7c86);color:#fff;font-weight:700;font-size:.85rem}
.chip .who{display:flex;flex-direction:column;line-height:1.15}.chip .who b{font-size:.85rem;color:var(--txt)}.chip .who small{font-size:.72rem;color:var(--mut);text-transform:capitalize}
.ib{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;color:var(--mut);transition:background .15s,color .15s}.ib:hover{background:#eef3f5;color:var(--pri)}
.content{padding:1.5rem 1.5rem 3rem;max-width:1500px;animation:view .24s ease both}
@keyframes view{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* inicio */
.hello{margin-bottom:1.1rem}.hello h2{font-size:1.6rem;margin:0}.hello p{margin:.1rem 0 0}.hello p::first-letter{text-transform:uppercase}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.9rem;margin-bottom:1.3rem}
.kpi{display:flex;align-items:center;gap:.85rem;background:#fff;border-radius:var(--r);padding:.95rem 1.05rem;box-shadow:var(--sh);border:1px solid rgba(225,232,236,.7)}
.kpi .ki{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;color:var(--c,var(--pri));background:color-mix(in srgb,var(--c,var(--pri)) 12%,#fff)}
.kpi b{display:block;font-size:1.4rem;font-weight:750;line-height:1.15;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.kpi div span{font-size:.8rem;color:var(--mut)}
.kpis.k6{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.kpis.k6{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
@media(min-width:1750px){.kpis.k6{grid-template-columns:repeat(6,1fr)}}
.inicio{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem;align-items:start}
@media(min-width:1750px){.inicio{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:.9rem}
.tile{background:#fff;border-radius:var(--r);padding:.5rem;box-shadow:var(--sh);border:1px solid rgba(225,232,236,.7);transition:transform .18s,box-shadow .18s,border-color .18s;animation:rise .45s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--i,0)*45ms)}
.tile:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(10,37,48,.12);border-color:color-mix(in srgb,var(--c) 40%,#fff)}
.tile a.main{display:flex;align-items:center;gap:.8rem;padding:.55rem;border-radius:10px;color:var(--txt);font-weight:650}
.tile .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;color:#fff;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 70%,#000));box-shadow:0 6px 14px color-mix(in srgb,var(--c) 35%,transparent);transition:transform .18s}
.tile:hover .ic{transform:scale(1.06) rotate(-3deg)}
.tile .t{line-height:1.25;font-size:.95rem}
.tile .subs{display:flex;flex-direction:column;padding:0 .55rem .45rem;margin-top:.1rem}
.tile .subs a{display:flex;align-items:center;justify-content:space-between;gap:.4rem;padding:.38rem .55rem;border-radius:8px;font-size:.8rem;color:var(--mut);font-weight:500;border-top:1px solid #f0f4f6}
.tile .subs a:first-child{border-top:0}.tile .subs a:hover{background:var(--pri-soft);color:var(--pri2)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pos{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.1rem}
.res{max-height:300px;overflow:auto;border:1px solid var(--bor);border-radius:12px;margin-top:.4rem;background:#fff}
.res div{padding:.6rem .8rem;border-bottom:1px solid #edf2f4;cursor:pointer;transition:background .12s}.res div:last-child{border-bottom:0}.res div:hover{background:var(--pri-soft)}

/* login dividido */
.login{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;background:#fff}
.login .brand{position:relative;overflow:hidden;background:radial-gradient(1200px 600px at 10% -10%,#16808a 0%,transparent 60%),linear-gradient(160deg,#0a2530 0%,#0d3441 60%,#0b2b37 100%);color:#fff;padding:3rem 3.2rem;display:flex;flex-direction:column;justify-content:space-between}
.login .brand .mark{display:flex;align-items:center;gap:.7rem;font-weight:750;font-size:1.2rem;letter-spacing:-.01em}
.login .brand .mark .lg{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#14a3ad,#0e7c86);box-shadow:0 6px 18px rgba(20,163,173,.4)}
.login .brand h1{color:#fff;font-size:2.4rem;line-height:1.12;font-weight:750;max-width:460px;margin:0 0 .9rem}
.login .brand p.lead{color:#a9c6cf;font-size:1.05rem;max-width:430px;margin:0 0 1.8rem}
.login .brand ul{list-style:none;padding:0;margin:0;display:grid;gap:.85rem}
.login .brand li{display:flex;align-items:center;gap:.8rem;color:#d4e6eb;font-weight:500}
.login .brand li .ico-b{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#5eead4;flex-shrink:0}
.login .ecg{position:absolute;left:0;right:0;bottom:11%;width:100%;height:150px;opacity:.9;pointer-events:none}
.login .ecg path{fill:none;stroke:#2dd4d4;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1400;stroke-dashoffset:1400;animation:ecg 3.2s cubic-bezier(.4,0,.2,1) .3s forwards;filter:drop-shadow(0 0 6px rgba(45,212,212,.7))}
.login .ecg path.ghost{stroke:#2dd4d4;opacity:.16;filter:none;stroke-width:2;animation-delay:.1s}
@keyframes ecg{to{stroke-dashoffset:0}}
.login .brand .foot{font-size:.82rem;color:#7fa3b0;position:relative;z-index:1}
.login .brand>div{position:relative;z-index:1}
.login .formwrap{display:grid;place-items:center;padding:2rem 1.5rem;background:linear-gradient(180deg,#f7fafb,#fff)}
.login .box{width:100%;max-width:400px}
.login .box h2{font-size:1.7rem;font-weight:750;margin:0 0 .25rem}.login .box .sub{color:var(--mut);margin:0 0 1.4rem}
.fld{position:relative}.fld>.ico{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:#8aa0a9;pointer-events:none;transition:color .15s}
.fld input{padding-left:2.55rem;height:46px}.fld:focus-within>.ico{color:var(--pri)}
.fld .eye{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);width:36px;height:36px;display:grid;place-items:center;border:0;background:none;color:#8aa0a9;cursor:pointer;border-radius:9px}.fld .eye:hover{color:var(--pri);background:#eef3f5}
.fld.hasEye input{padding-right:2.8rem}
.login .box .btn.lg{width:100%;margin-top:1.3rem;height:48px}
.login .links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem;font-size:.88rem}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:sp .7s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}

/* login simple (superadmin) y landing */
.auth{min-height:100vh;display:grid;place-items:center;padding:1rem;background:radial-gradient(900px 500px at 20% 0%,#16808a 0%,transparent 60%),linear-gradient(160deg,#0a2530,#0d3441)}
.auth .card{width:100%;max-width:400px;padding:2rem;border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:min .4s cubic-bezier(.2,.8,.3,1) both}
.auth .head{display:flex;flex-direction:column;align-items:center;margin-bottom:1.2rem}
.auth .head .lg{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#14a3ad,#0e7c86);color:#fff;box-shadow:0 8px 20px rgba(20,163,173,.4);margin-bottom:.8rem}
.auth h1{font-size:1.45rem;text-align:center;margin:0}.auth .head p{margin:.2rem 0 0;color:var(--mut)}
.hero{position:relative;overflow:hidden;background:radial-gradient(1000px 500px at 15% -20%,#16808a 0%,transparent 60%),linear-gradient(160deg,#0a2530,#0d3441);color:#fff;padding:4rem 1rem 4.2rem;text-align:center}
.hero h1{font-size:2.5rem;color:#fff;font-weight:750;display:inline-flex;align-items:center;gap:.7rem}.hero p{color:#b9d3db}
.hero .btn.lg{box-shadow:0 8px 24px rgba(0,0,0,.25)}
.wrap{max-width:1040px;margin:0 auto;padding:1.4rem}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.feat .card h3{display:flex;align-items:center;gap:.6rem}
.feat .card h3 .ico-b{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--pri-soft);color:var(--pri);flex-shrink:0}
.plan{text-align:center}.plan b{font-size:1.7rem;color:var(--pri)}

@media(max-width:1000px){.login{grid-template-columns:1fr}.login .brand{padding:1.6rem 1.4rem 5rem}.login .brand h1{font-size:1.7rem}.login .brand ul,.login .brand p.lead{display:none}.login .ecg{bottom:8%;height:100px}.login .brand .foot{display:none}}
@media(max-width:860px){.side{position:fixed;left:-270px;z-index:20;transition:left .22s ease;box-shadow:none}.side.open{left:0;box-shadow:12px 0 40px rgba(0,0,0,.35)}.top .ham{display:grid}.inicio,.pos,.grid2{grid-template-columns:1fr}.chip .who{display:none}.chip{padding:.2rem}.content{padding:1rem 1rem 3rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.login .ecg path{stroke-dashoffset:0}}
@media print{.side,.top,.aviso,.no-print{display:none!important}.content{padding:0;animation:none}}
@media(max-width:560px){.kpis,.kpis.k6{grid-template-columns:1fr 1fr;gap:.6rem}.kpi{flex-direction:column;align-items:flex-start;gap:.55rem;padding:.85rem}.kpi b{font-size:1.2rem}.tiles{grid-template-columns:1fr}.hello h2{font-size:1.35rem}}