:root{--azul:#0D6EFD;--verde:#198754;--bg:#F8F9FA;--txt:#0b2341;--card:rgba(255,255,255,.88);--border:rgba(13,110,253,.14)}
[data-theme=dark]{--bg:#07111f;--txt:#eaf2ff;--card:rgba(13,25,45,.9);--border:rgba(255,255,255,.12)}
*{box-sizing:border-box}
html,body{width:100%;min-height:100%;overflow-x:hidden}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at top left,rgba(13,110,253,.12),transparent 32%),var(--bg);color:var(--txt)}
img{max-width:100%;height:auto}
.container{max-width:1180px;margin:0 auto;padding-left:20px;padding-right:20px}
.brand-logo{width:52px;height:52px;border-radius:16px;object-fit:cover}
.glass{background:var(--card);backdrop-filter:blur(16px);border:1px solid var(--border);box-shadow:0 18px 45px rgba(0,0,0,.08)}
.cardx{border-radius:26px;padding:22px;margin-bottom:18px;max-width:100%}
.btn{border-radius:16px;font-weight:700}
.btn-primary{background:linear-gradient(135deg,var(--azul),#0748ad);border:0}
.btn-success{background:linear-gradient(135deg,var(--verde),#0a6b32);border:0}
.hero{padding:60px 0;overflow:hidden}
.big{font-size:clamp(2.2rem,5vw,5rem);font-weight:900;letter-spacing:-.06em;line-height:1.05}
.app-shell{display:flex;min-height:100vh;width:100%;overflow-x:hidden}
.sidebar{width:250px;min-width:250px;position:fixed;left:0;top:0;bottom:0;padding:18px 16px;overflow-y:auto;background:rgba(255,255,255,.76);border-right:1px solid var(--border);backdrop-filter:blur(18px);z-index:20}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.brand img{width:52px;height:52px;border-radius:16px;object-fit:cover}
.brand strong{font-size:16px}
.brand span{font-size:13px;color:#50627a}
.menu{display:flex;flex-direction:column;gap:4px}
.menu a,.nav-link{display:block;text-decoration:none;border-radius:14px;color:var(--txt);font-weight:700;padding:9px 13px;font-size:15px}
.menu a:hover,.nav-link:hover,.nav-link.active{background:rgba(13,110,253,.12);color:var(--azul)}
.content,.main{margin-left:250px;width:calc(100% - 250px);padding:38px 24px 90px 34px;min-height:100vh;overflow-x:hidden}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.topbar h3{margin:0 0 8px 0;font-weight:900}
.row{margin-left:0!important;margin-right:0!important}
.table-responsive{overflow-x:auto;max-width:100%}
.table{color:var(--txt)}
.table td:last-child,.table th:last-child{padding-right:90px!important}
.mobilebar{display:none}
.stat{font-size:1.6rem;font-weight:900}
.progress{height:12px;border-radius:99px}
.form-control,.form-select{border-radius:16px;padding:12px 14px}
.badge-soft{background:rgba(25,135,84,.12);color:var(--verde)}
.whats{position:fixed;right:28px;bottom:28px;z-index:99;width:56px;height:56px;border-radius:18px;display:grid;place-items:center;text-decoration:none;color:#fff;background:#25D366;font-size:26px;box-shadow:0 15px 35px rgba(37,211,102,.35)}

@media(max-width:900px){
.sidebar{display:none}
.content,.main{margin-left:0;width:100%;padding:20px 15px 90px}
.mobilebar{display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:100;justify-content:space-around;padding:10px;border-radius:24px;background:var(--card);border:1px solid var(--border);box-shadow:0 12px 35px rgba(0,0,0,.12)}
.mobilebar a{font-size:12px;text-align:center;text-decoration:none;color:var(--txt);font-weight:700}
.hide-mobile{display:none}
.cardx{padding:18px;border-radius:22px}
.hero{padding:30px 0}
.table td:last-child,.table th:last-child{padding-right:20px!important}
.whats{bottom:92px;right:15px}
}

@media(max-width:600px){
body{overflow-x:hidden!important}
.container{width:100%!important;max-width:100%!important;padding-left:18px!important;padding-right:18px!important;overflow:hidden!important}
.hero{padding:24px 0!important;overflow:hidden!important}
.hero .row{display:block!important}
.big,.hero h1{font-size:40px!important;line-height:1.08!important;letter-spacing:-2px!important;max-width:100%!important;overflow-wrap:break-word!important;word-break:normal!important}
.hero p{font-size:19px!important;line-height:1.45!important;max-width:100%!important}
.hero .btn,.hero a.btn{width:100%!important;display:block!important;margin-bottom:10px!important;text-align:center!important}
.hero img,.cardx img{max-width:100%!important;height:auto!important}
.glass{box-shadow:0 10px 25px rgba(0,0,0,.06)}
}