/* assets/css/style.css — Identidade visual do sistema */
:root{
  --ce-primary:#1f3a93;
  --ce-primary-dark:#16296b;
  --ce-accent:#00a878;
  --ce-bg:#f4f6fb;
  --ce-sidebar:#16213e;
  --ce-sidebar-2:#233158;
  --ce-footer-text:#5a6273;
  --ce-footer-text-light:#8a93a6;
}
*{box-sizing:border-box}
body{background:var(--ce-bg);font-family:"Segoe UI",Roboto,system-ui,sans-serif;color:#1b1f2a}

/* ---------- Layout ---------- */
.app-wrap{display:flex;min-height:100vh}
.app-main{flex:1;display:flex;flex-direction:column;min-width:0}
.app-content{flex:1}
.app-topbar{background:#fff;border-bottom:1px solid #e6e9f2;min-height:60px;position:sticky;top:0;z-index:10}
.app-footer{background:#fff;border-top:1px solid #e6e9f2;color:var(--ce-footer-text)}

/* ---------- Rodapé VERTICALTECH ---------- */
.vt-footer-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.vt-footer-row--top{margin-bottom:4px}
.vt-footer-row--bottom{margin-top:2px}
.vt-footer-brand{display:flex;align-items:center;min-height:34px}
.vt-footer-logo{height:34px;width:auto;display:block}
.vt-footer-copy{font-size:.90rem;color:var(--ce-footer-text);font-weight:500}
.vt-footer-tagline{font-size:.82rem;color:var(--ce-footer-text-light)}
.vt-footer-contact{display:flex;align-items:center;gap:8px;font-size:.90rem;color:var(--ce-footer-text);font-weight:500}
.vt-footer-wa{width:22px;height:22px;border-radius:50%;object-fit:cover;display:inline-block}
.vt-footer-contact-label{color:var(--ce-footer-text)}
.vt-footer-phone{color:var(--ce-footer-text);text-decoration:none;font-weight:600;white-space:nowrap}
.vt-footer-phone:hover{color:var(--ce-primary);text-decoration:underline}
@media (max-width:575.98px){
  .vt-footer-row{justify-content:flex-start}
  .vt-footer-row--top,.vt-footer-row--bottom{flex-direction:column;align-items:flex-start;gap:4px}
  .vt-footer-copy,.vt-footer-tagline,.vt-footer-contact{font-size:.82rem}
  .vt-footer-logo{height:30px}
}

/* ---------- Sidebar ---------- */
.app-sidebar{width:250px;flex-shrink:0;background:linear-gradient(180deg,var(--ce-sidebar),var(--ce-sidebar-2));color:#fff}
.sidebar-brand{display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-logo{width:40px;height:40px;border-radius:11px;background:var(--ce-accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;letter-spacing:.5px}
.brand-name{font-weight:600;font-size:.95rem;line-height:1.1}
.brand-sub{font-size:.7rem;color:rgba(255,255,255,.55)}
.sidebar-nav{display:flex;flex-direction:column;gap:3px;padding-top:10px}
.sidebar-nav .nav-item{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:9px;
  color:rgba(255,255,255,.78);text-decoration:none;font-size:.9rem;transition:.15s}
.sidebar-nav .nav-item:hover{background:rgba(255,255,255,.09);color:#fff}
.sidebar-nav .nav-item.active{background:var(--ce-accent);color:#fff;font-weight:600}
.sidebar-nav .nav-item i{font-size:1.05rem}
.sidebar-foot{border-top:1px solid rgba(255,255,255,.08)}

/* ---------- Login ---------- */
/* ---------- Login com imagem de fundo em tela inteira ---------- */
.login-page{display:flex;flex-direction:column;min-height:100vh;
  background:linear-gradient(rgba(10,20,45,.55),rgba(10,20,45,.70)),
             url('../../img/fundo.jpg') center center / cover no-repeat fixed;}
.login-stage{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:24px 20px 40px}
.login-logo{display:block;width:190px;max-width:70%;height:auto;margin:0 auto}
.sidebar-logo{height:36px;width:auto;background:#fff;border-radius:9px;padding:3px 6px;flex-shrink:0}
.login-card{width:100%;max-width:410px;background:#fff;border-radius:18px;overflow:hidden}
.login-head{padding:32px 30px 8px;text-align:center}
.login-head .brand-logo{width:56px;height:56px;font-size:1.3rem}
.login-body{padding:18px 30px 30px}

/* ---------- Páginas públicas (login, 403, futuras) com rodapé ---------- */
.public-page{display:flex;flex-direction:column;min-height:100vh;
  background:linear-gradient(rgba(10,20,45,.55),rgba(10,20,45,.70)),
             url('../../img/fundo.jpg') center center / cover no-repeat fixed}
.public-stage{flex:1 1 auto;padding:40px 16px}
.app-footer--public{background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(8px);
  -webkit-backdrop-filter:saturate(180%) blur(8px);color:var(--ce-footer-text)}

/* ---------- Dashboard cards ---------- */
.dash-card{display:flex;flex-direction:column;gap:2px;padding:16px;border-radius:14px;background:#fff;
  border:1px solid #e6e9f2;text-decoration:none;color:#1b1f2a;height:100%;transition:.15s;box-shadow:0 1px 3px rgba(16,24,40,.04)}
.dash-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(16,24,40,.10)}
.dash-card i{font-size:1.3rem;opacity:.85}
.dash-num{font-size:1.7rem;font-weight:700;line-height:1.1}
.dash-lbl{font-size:.78rem;color:#6b7280}
.dash-warning i{color:#d98200}.dash-info i{color:#0d7fbf}.dash-danger i{color:#d33}
.dash-primary i{color:var(--ce-primary)}.dash-success i{color:var(--ce-accent)}.dash-dark i{color:#374151}

/* ---------- Timeline ---------- */
.timeline{list-style:none;padding-left:18px;position:relative}
.timeline:before{content:"";position:absolute;left:5px;top:4px;bottom:4px;width:2px;background:#e6e9f2}
.timeline li{position:relative;padding-bottom:14px}
.timeline li:before{content:"";position:absolute;left:-17px;top:4px;width:10px;height:10px;border-radius:50%;
  background:var(--ce-primary);box-shadow:0 0 0 3px #fff}

/* ---------- KPI ---------- */
.kpi{padding:12px;border-radius:12px;background:#f8fafc;border:1px solid #eef1f7}
.kpi-num{font-size:1.5rem;font-weight:700}
.kpi-lbl{font-size:.75rem;color:#6b7280}

/* ---------- Misc ---------- */
.card{border-radius:14px}
.card-header{border-bottom:1px solid #eef1f7}
.table>thead{font-size:.8rem;text-transform:uppercase;letter-spacing:.02em;color:#6b7280}
.badge{font-weight:500}
@media (max-width:991.98px){.app-content{padding-left:12px!important;padding-right:12px!important}}
@media print{.app-sidebar,.app-topbar,.app-footer,.btn{display:none!important}.app-wrap{display:block}}

/* ---------- Notificações internas (sino) ---------- */
.notif-menu{min-width:360px}
#notifBell .btn{position:relative}
.notif-toast{cursor:pointer;min-width:320px}
#notifBadge{font-size:.62rem}
.bell-anim i{animation:bellRing 1s ease-in-out infinite;transform-origin:top center}
@keyframes bellRing{
  0%,100%{transform:rotate(0)}
  15%{transform:rotate(12deg)}
  30%{transform:rotate(-10deg)}
  45%{transform:rotate(8deg)}
  60%{transform:rotate(-6deg)}
  75%{transform:rotate(3deg)}
}
#notifLista .dropdown-item{white-space:normal}
