:root{
  --grad-main:   linear-gradient(160deg,#0c0a2e 0%,#1a1040 55%,#2e1065 100%);
  --grad-login:  linear-gradient(135deg,#06b6d4 0%,#6366f1 50%,#a855f7 100%);
  --grad-accent: linear-gradient(90deg,#38bdf8 0%,#818cf8 100%);
  --grad-bg:     linear-gradient(135deg,#f5f3ff 0%,#eff6ff 50%,#fdf4ff 100%);
  --accent:#6366f1;--accent2:#a855f7;--accent-h:#4f46e5;
  --accent-light:#eef2ff;--border:#e0d9f7;
  --text:#1e1b4b;--text-m:#6b7280;
  --card:#fff;--success:#059669;--warning:#d97706;--danger:#dc2626;
  --sidebar-w:252px;--topbar-h:62px;--radius:14px;
  --sh:0 2px 12px rgba(99,102,241,.08),0 1px 4px rgba(0,0,0,.04);
  --sh-md:0 8px 30px rgba(99,102,241,.16),0 3px 10px rgba(0,0,0,.06);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',system-ui,sans-serif;font-size:14px;color:var(--text);overflow:hidden;letter-spacing:-.01em}

/* ── LOGIN ─────────────────────────────────── */
#login-screen{position:fixed;inset:0;z-index:9999}
.login-bg{
  width:100%;height:100%;
  background:var(--grad-login);
  display:flex;align-items:stretch;
  position:relative;overflow:hidden;
}
.login-bg::before{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%236366f1' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ── LOGIN HERO (painel esquerdo info) ────── */
.login-hero{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:48px 56px;position:relative;z-index:1;
}
.login-hero-inner{max-width:480px}
.lh-brand{display:flex;align-items:center;gap:12px;margin-bottom:36px}
.lh-brand-name{color:#fff;font-size:20px;font-weight:800;letter-spacing:-.3px}
.lh-title{font-size:40px;font-weight:900;color:#fff;line-height:1.15;margin:0 0 16px;letter-spacing:-.5px}
.lh-title-accent{background:linear-gradient(90deg,#a5b4fc,#e879f9);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.lh-desc{font-size:16px;color:rgba(255,255,255,.75);line-height:1.7;margin-bottom:28px}
.lh-features{list-style:none;padding:0;margin:0 0 32px;display:flex;flex-direction:column;gap:11px}
.lh-features li{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.88);font-size:14px}
.lh-features li i{color:#a5b4fc;font-size:15px;flex-shrink:0}
.lh-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  border-radius:20px;padding:8px 16px;color:rgba(255,255,255,.7);font-size:12px;font-weight:600;
}
.lh-badge i{color:#a5b4fc}
@media(max-width:900px){.login-hero{display:none}}

/* Modo cadastro: hero some, form expande tela toda */
.login-bg.reg-mode .login-hero{display:none}

/* ── LOGIN BOX (painel direito) ───────────── */
.login-bg > .login-box{
  display:flex;flex-direction:column;justify-content:flex-start;
  min-width:580px;max-width:620px;overflow-y:auto;
  padding-top:40px;padding-bottom:40px;
}
.login-box{
  background:#fff;
  border-radius:0;padding:44px 60px;width:580px;min-width:580px;
  box-shadow:-8px 0 40px rgba(0,0,0,.2);
  position:relative;z-index:1;
  border-top:none;border-left:4px solid transparent;
  border-image:var(--grad-accent) 1;
}
.login-logo{display:flex;align-items:center;gap:14px;margin-bottom:32px}
.login-logo-icon{
  width:52px;height:52px;border-radius:14px;
  background:#111;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;color:#fff;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
  flex-shrink:0;
}
.login-logo-title{font-size:20px;font-weight:900;color:var(--text)}
.login-logo-sub{font-size:12px;color:var(--text-m);margin-top:2px}
.login-welcome{font-size:22px;font-weight:800;color:var(--text);margin-bottom:4px}
.login-desc{font-size:13px;color:var(--text-m);margin-bottom:28px}
.lf-group{margin-bottom:16px}
.lf-group label{display:block;font-size:12px;font-weight:700;color:var(--text-m);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.lf-input-wrap{position:relative;display:flex;align-items:center}
.lf-icon{position:absolute;left:12px;font-size:15px;pointer-events:none}
.lf-input-wrap input{
  width:100%;padding:11px 40px 11px 38px;
  border:1.5px solid var(--border);border-radius:10px;
  font-size:14px;outline:none;transition:all .18s;
  background:#f8faff;color:var(--text);
}
.lf-input-wrap input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.12);background:#fff}
.lf-input-wrap select{
  width:100%;padding:11px 12px 11px 38px;
  border:1.5px solid var(--border);border-radius:10px;
  font-size:14px;outline:none;transition:all .18s;
  background:#f8faff;color:var(--text);cursor:pointer;
  appearance:auto;
}
.lf-input-wrap select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.12);background:#fff}
.lf-eye{position:absolute;right:10px;background:none;border:none;cursor:pointer;font-size:15px;color:var(--text-m)}
.login-error{color:var(--danger);font-size:13px;font-weight:600;margin-bottom:14px;padding:8px 12px;background:#fff1f1;border-radius:8px;border-left:3px solid var(--danger)}
.login-btn{
  width:100%;padding:13px;
  background:var(--grad-accent);color:#fff;border:none;border-radius:10px;
  font-size:15px;font-weight:800;cursor:pointer;transition:all .18s;
  box-shadow:0 3px 12px rgba(99,102,241,.3);margin-bottom:20px;
}
.login-btn:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 5px 18px rgba(99,102,241,.45)}
.login-hint{font-size:11.5px;color:var(--text-m);background:#f8faff;padding:10px 14px;border-radius:8px;border:1px solid var(--border);line-height:1.8;text-align:center}

/* ── LOGIN TABS ──────────────────────────── */
.login-tabs{display:flex;gap:0;margin-bottom:20px;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--bg2)}
.ltab{flex:1;padding:10px 0;font-size:13px;font-weight:700;background:transparent;border:none;cursor:pointer;color:var(--text-m);transition:all .18s}
.ltab.active{background:var(--grad-accent);color:#fff}
.ltab:hover:not(.active){background:var(--bg2);color:var(--text)}

/* ── REGISTRO ──────────────────────────── */
.reg-success{background:#d1fae5;border:1px solid #6ee7b7;color:#065f46;border-radius:8px;padding:12px 14px;font-size:13px;line-height:1.6;margin-top:4px}

/* ── CONFIGURAÇÕES ──────────────────────── */
.settings-wrap{display:flex;flex-direction:column;gap:24px;max-width:820px}
.settings-section{background:var(--bg2);border-radius:14px;border:1px solid var(--border);padding:24px}
.settings-section-title{font-weight:800;font-size:16px;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.settings-section-desc{font-size:12.5px;color:var(--text-m);margin-bottom:2px}
.cfg-preview{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:14px;margin-top:16px;font-size:13px;line-height:1.8}

/* ── CH-TI-BADGE ──────────────────────── */
.ch-ti-badge{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg2);border-radius:9px;border:1px solid var(--border);margin-bottom:10px}
.ch-ti-av{width:36px;height:36px;border-radius:50%;background:var(--grad-accent);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:14px;flex-shrink:0}
.ch-ti-name{font-weight:700;font-size:13px}
.ch-ti-role{font-size:11.5px;color:var(--text-m)}

/* ── APP ───────────────────────────────────── */
.app{display:flex;height:100vh;overflow:hidden}

/* ── SIDEBAR ───────────────────────────────── */
.sidebar{
  width:var(--sidebar-w);min-width:var(--sidebar-w);
  background:var(--grad-main);
  display:flex;flex-direction:column;height:100vh;overflow-y:auto;
  transition:width .2s;z-index:100;
  box-shadow:4px 0 30px rgba(10,5,24,.5);
}
.sidebar::-webkit-scrollbar{width:3px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(196,181,253,.25);border-radius:2px}
.sidebar-logo{
  display:flex;align-items:center;gap:12px;padding:20px 18px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(168,85,247,.05);flex-shrink:0;
}
.logo-icon{
  width:38px;height:38px;border-radius:10px;
  background:#111;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.4);flex-shrink:0;
}
.logo-title{color:#fff;font-weight:800;font-size:14px}
.logo-sub{color:rgba(196,181,253,.6);font-size:10px;letter-spacing:.5px}
.sidebar-nav{flex:1;padding:8px 0}
.nav-section-label{color:rgba(196,181,253,.45);font-size:9.5px;font-weight:700;letter-spacing:1.8px;padding:14px 18px 5px;text-transform:uppercase}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 18px;
  color:rgba(180,210,255,.72);cursor:pointer;transition:all .15s;
  position:relative;font-size:13px;
}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.active{
  background:linear-gradient(90deg,rgba(168,85,247,.15),rgba(99,102,241,.08));
  color:#fff;font-weight:700;
}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;
  background:var(--grad-accent);border-radius:0 3px 3px 0;
  box-shadow:0 0 10px rgba(99,102,241,.6);
}
.nav-icon{font-size:15px;width:22px;text-align:center;color:rgba(196,181,253,.7);display:flex;align-items:center;justify-content:center}
.nav-item.active .nav-icon,.nav-item:hover .nav-icon{color:#fff}
.nav-badge{
  margin-left:auto;
  background:linear-gradient(135deg,#c0392b,#e74c3c);
  color:#fff;border-radius:10px;padding:1px 7px;font-size:10px;font-weight:700;
  box-shadow:0 1px 4px rgba(192,57,43,.3);
}
.nav-badge:empty{display:none}
.sidebar-footer{padding:12px 16px;border-top:1px solid rgba(255,255,255,.07);flex-shrink:0}
.sf-user{display:flex;align-items:center;gap:10px}
.sf-av{
  width:36px;height:36px;border-radius:50%;
  background:var(--grad-accent);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:12px;flex-shrink:0;
  box-shadow:0 2px 8px rgba(99,102,241,.3);
}
.sf-name{color:#e0eeff;font-size:13px;font-weight:700}
.sf-role{color:rgba(196,181,253,.6);font-size:10px}
.sf-logout{
  margin-left:auto;background:rgba(255,255,255,.07);border:none;
  color:rgba(180,210,255,.6);cursor:pointer;width:28px;height:28px;
  border-radius:7px;font-size:14px;display:flex;align-items:center;justify-content:center;
}
.sf-logout:hover{background:rgba(239,68,68,.2);color:#ff6b6b}

/* ── TOPBAR ────────────────────────────────── */
.main-wrapper{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{
  height:var(--topbar-h);
  background:linear-gradient(90deg,#fafafe,#f5f3ff);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 24px;
  flex-shrink:0;box-shadow:0 2px 14px rgba(99,102,241,.08);
}
.tb-left{display:flex;align-items:center;gap:14px}
.menu-toggle{background:none;border:none;cursor:pointer;font-size:18px;color:var(--text-m);padding:5px;border-radius:7px}
.menu-toggle:hover{background:var(--accent-light)}
.topbar-title{font-size:18px;font-weight:800;color:var(--text)}
.tb-right{display:flex;align-items:center;gap:12px}
.topbar-date{color:var(--text-m);font-size:12.5px}
.topbar-user-chip{
  display:flex;align-items:center;gap:7px;
  background:var(--accent-light);border:1px solid var(--border);
  border-radius:20px;padding:5px 12px 5px 6px;
}
.topbar-user-chip span:first-child{
  width:24px;height:24px;border-radius:50%;
  background:var(--grad-accent);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:10px;font-weight:800;
}
.topbar-user-chip span:last-child{font-size:12.5px;font-weight:700;color:var(--text)}

/* ── BUTTONS ───────────────────────────────── */
.btn-primary{
  background:var(--grad-accent);color:#fff;border:none;
  padding:9px 20px;border-radius:9px;cursor:pointer;font-size:13.5px;font-weight:700;
  box-shadow:0 2px 10px rgba(99,102,241,.25);transition:all .18s;
}
.btn-primary:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 4px 16px rgba(99,102,241,.4)}
.btn-secondary{
  background:#f0f7ff;color:var(--accent);border:1.5px solid var(--border);
  padding:9px 18px;border-radius:9px;cursor:pointer;font-size:13.5px;font-weight:700;transition:all .15s;
}
.btn-secondary:hover{background:var(--accent-light);border-color:var(--accent)}
.btn-sm{padding:5px 12px;font-size:12px;border-radius:7px}
.btn-icon{background:none;border:none;cursor:pointer;padding:5px 8px;border-radius:6px;color:var(--text-m);font-size:14px;transition:all .15s}
.btn-icon:hover{background:var(--accent-light);color:var(--accent)}
.btn-danger{
  background:#fef2f2;color:var(--danger);border:1.5px solid #fecaca;
  padding:9px 14px;border-radius:9px;cursor:pointer;font-size:13px;font-weight:700;transition:all .15s;
}
.btn-danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}

/* ── GESTÃO DE ACESSOS (USERS) ─────────────── */
/* Banner */
.ua-banner{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  background:var(--card);border-radius:var(--radius);border:1px solid var(--border);
  padding:20px 24px;box-shadow:var(--sh);margin-bottom:20px;
}
.ua-banner-left{display:flex;align-items:center;gap:14px;flex:1;min-width:200px}
.ua-banner-icon{
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(135deg,#6366f1,#a855f7);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;color:#fff;box-shadow:0 4px 14px rgba(99,102,241,.3);flex-shrink:0;
}
.ua-banner-title{font-size:18px;font-weight:800;color:var(--text)}
.ua-banner-desc{font-size:12px;color:var(--text-m);margin-top:3px}
.ua-banner-stats{display:flex;align-items:center;gap:8px}
.ua-stat-pill{
  display:flex;flex-direction:column;align-items:center;
  background:#f5f3ff;border:1px solid #e0d9f7;border-radius:10px;
  padding:8px 18px;min-width:64px;
}
.ua-stat-pill span{font-size:22px;font-weight:900;color:var(--text);line-height:1}
.ua-stat-pill small{font-size:10px;font-weight:600;color:var(--text-m);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.ua-stat-ti{background:#eef2ff;border-color:#c7d2fe}
.ua-stat-ti span{color:#6366f1}
.ua-stat-rh{background:#ecfdf5;border-color:#a7f3d0}
.ua-stat-rh span{color:#059669}
/* Cards grid */
.users-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
/* User card */
.user-access-card{
  background:var(--card);border-radius:var(--radius);border:1px solid var(--border);
  padding:0;box-shadow:var(--sh);display:flex;flex-direction:column;overflow:hidden;
  transition:transform .2s,box-shadow .2s;
}
.user-access-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.uac-top{display:flex;align-items:center;gap:14px;padding:18px 18px 14px}
.uac-avatar{
  width:50px;height:50px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:900;font-size:18px;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.uac-meta{flex:1;min-width:0}
.uac-name{font-size:15px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uac-login{font-size:12px;color:var(--text-m);margin-top:2px}
.ua-badge-ti{background:#eef2ff;color:#6366f1;border:1px solid #c7d2fe;padding:4px 11px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap;flex-shrink:0}
.ua-badge-rh{background:#ecfdf5;color:#059669;border:1px solid #a7f3d0;padding:4px 11px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap;flex-shrink:0}
.uac-divider{height:1px;background:var(--border);margin:0 18px}
.uac-rows{display:flex;flex-direction:column;gap:7px;padding:12px 18px}
.uac-row{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-m)}
.uac-row i{width:14px;text-align:center;color:var(--accent);flex-shrink:0}
.uac-row strong{color:var(--text)}
.uac-never{color:#f59e0b}
.uac-never i{color:#f59e0b}
.uac-perms-label{
  font-size:11px;font-weight:700;color:var(--text-m);text-transform:uppercase;letter-spacing:.6px;
  display:flex;align-items:center;gap:6px;
  padding:0 18px 8px;border-top:1px dashed var(--border);padding-top:12px;
}
.uac-perms{display:flex;flex-wrap:wrap;gap:5px;padding:0 18px 14px}
.uac-perm{background:var(--accent-light);color:var(--accent);border-radius:6px;padding:3px 9px;font-size:11px;font-weight:500}
.uac-actions{display:flex;gap:0;border-top:1px solid var(--border);margin-top:auto}
.uac-btn-edit{
  flex:1;padding:12px;border:none;background:#f8f9ff;color:var(--accent);
  font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;
  border-right:1px solid var(--border);
}
.uac-btn-edit:hover{background:var(--accent-light)}
.uac-btn-del{
  padding:12px 18px;border:none;background:#fff5f5;color:var(--danger);
  font-size:14px;cursor:pointer;transition:all .15s;
}
.uac-btn-del:hover{background:var(--danger);color:#fff}
/* Empty state */
.ua-empty-state{
  grid-column:1/-1;text-align:center;padding:64px 32px;
  background:var(--card);border-radius:var(--radius);border:1px dashed var(--border);
}
.ua-empty-state i{font-size:52px;color:var(--border);display:block;margin-bottom:18px}
.ua-empty-state div{font-size:17px;font-weight:700;color:var(--text-m)}
.ua-empty-state p{font-size:13px;color:var(--text-m);margin-top:8px}

/* ── LOGS DE ACESSO ─────────────────────────── */
.ua-logs-section{margin-top:24px;background:var(--card);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--sh);overflow:hidden}
.ua-logs-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid var(--border);
  background:linear-gradient(90deg,#f5f3ff,#fff);
  font-size:14px;font-weight:700;color:var(--text);
}
.ua-logs-header i{color:var(--accent)}
.ua-logs-clear{
  background:none;border:1.5px solid var(--border);border-radius:8px;
  padding:5px 12px;font-size:12px;font-weight:600;color:var(--text-m);cursor:pointer;
  display:flex;align-items:center;gap:6px;transition:all .15s;
}
.ua-logs-clear:hover{background:#fff0f0;border-color:#fca5a5;color:var(--danger)}
.ua-logs-list{max-height:340px;overflow-y:auto}
.ua-logs-list::-webkit-scrollbar{width:4px}
.ua-logs-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.ua-log-entry{
  display:flex;align-items:center;gap:12px;
  padding:11px 20px;border-bottom:1px solid #f3f4f6;transition:background .12s;
}
.ua-log-entry:last-child{border-bottom:none}
.ua-log-entry:hover{background:#fafbff}
.ua-log-av{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:13px;
}
.ua-log-info{flex:1;min-width:0}
.ua-log-name{display:block;font-size:13px;font-weight:700;color:var(--text)}
.ua-log-detail{display:block;font-size:11px;color:var(--text-m);margin-top:1px}
.ua-log-tag-in{
  background:#ecfdf5;color:#059669;border:1px solid #a7f3d0;
  padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;
  white-space:nowrap;display:flex;align-items:center;gap:5px;flex-shrink:0;
}
.ua-log-tag-out{
  background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;
  padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;
  white-space:nowrap;display:flex;align-items:center;gap:5px;flex-shrink:0;
}
.ua-log-time{
  text-align:right;flex-shrink:0;
  display:flex;flex-direction:column;gap:1px;
}
.ua-log-time span:first-child{font-size:12px;font-weight:600;color:var(--text)}
.ua-log-time span:last-child{font-size:11px;color:var(--text-m)}
.ua-logs-empty{text-align:center;padding:32px;color:var(--text-m);font-size:13px}
.ua-logs-empty i{display:block;font-size:28px;margin-bottom:8px;color:var(--border)}

/* ── BLOQUEIO DE ACESSO ─────────────────────── */
.user-access-card.is-blocked{border-color:#fecaca;opacity:.85}
.uac-blocked-banner{
  background:#fef2f2;color:var(--danger);font-size:12px;font-weight:700;
  padding:7px 18px;display:flex;align-items:center;gap:7px;
  border-bottom:1px solid #fecaca;letter-spacing:.2px;
}
.uac-btn-block{
  padding:12px 14px;border:none;background:#fffbeb;color:#d97706;
  font-size:14px;cursor:pointer;transition:all .15s;
  border-left:1px solid var(--border);border-right:1px solid var(--border);
}
.uac-btn-block:hover{background:#d97706;color:#fff}
.uac-btn-unblock{background:#ecfdf5 !important;color:#059669 !important}
.uac-btn-unblock:hover{background:#059669 !important;color:#fff !important}
/* Tags de log extras */
.ua-log-tag-block{
  background:#fef2f2;color:var(--danger);border:1px solid #fecaca;
  padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;
  white-space:nowrap;display:flex;align-items:center;gap:5px;flex-shrink:0;
}
.ua-log-tag-unblock{
  background:#f0fdf4;color:#059669;border:1px solid #bbf7d0;
  padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;
  white-space:nowrap;display:flex;align-items:center;gap:5px;flex-shrink:0;
}
/* ══════════════════════════════════════════════
   MODAL PAGAMENTO / BOLETO BZSOLUTIONS
══════════════════════════════════════════════ */
.payment-modal-header{
  background:linear-gradient(135deg,#1e1b4b,#312e81);
  padding:22px 26px;color:#fff;border-radius:var(--radius) var(--radius) 0 0;
}
.payment-modal-brand{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#a5b4fc;margin-bottom:4px}
.payment-modal-title{font-size:18px;font-weight:900}
.payment-modal-plan{display:inline-block;background:rgba(255,255,255,.12);padding:4px 14px;border-radius:20px;font-size:12px;font-weight:700;margin-top:8px}
.payment-tabs{display:flex;border-bottom:2px solid var(--border);background:#f8faff}
.payment-tab{
  flex:1;padding:12px 10px;border:none;background:none;cursor:pointer;
  font-size:13px;font-weight:700;color:var(--text-m);transition:all .15s;
}
.payment-tab.active{color:var(--accent);border-bottom:2px solid var(--accent);margin-bottom:-2px;background:#fff}
.payment-tab:hover:not(.active){background:#f0f4ff}
.payment-pane{padding:22px 24px;display:none}
.payment-pane.active{display:block}
.pay-pix-key{
  background:#f0fdf4;border:2px dashed #34d399;border-radius:12px;
  padding:18px 20px;text-align:center;margin-bottom:16px;
}
.pay-pix-label{font-size:11px;font-weight:700;color:#059669;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.pay-pix-val{font-size:16px;font-weight:900;color:#065f46;letter-spacing:.5px}
.pay-copy-btn{
  margin-top:10px;padding:7px 18px;background:#059669;color:#fff;
  border:none;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;transition:opacity .15s;
}
.pay-copy-btn:hover{opacity:.85}
.pay-bank-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px}
.pay-bank-row:last-child{border-bottom:none}
.pay-bank-label{color:var(--text-m);font-weight:600}
.pay-bank-val{font-weight:800;color:var(--text);text-align:right}
.pay-total-box{
  background:var(--accent-light);border:1.5px solid #c7d2fe;border-radius:10px;
  padding:14px 18px;display:flex;justify-content:space-between;align-items:center;
  margin:16px 0;
}
.pay-total-label{font-size:13px;font-weight:700;color:var(--text)}
.pay-total-val{font-size:22px;font-weight:900;color:var(--accent)}
.pay-whatsapp-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:11px;background:#25d366;color:#fff;border:none;
  border-radius:10px;font-size:13.5px;font-weight:800;cursor:pointer;
  text-decoration:none;transition:opacity .15s;
}
.pay-whatsapp-btn:hover{opacity:.88}
.pay-code-section{margin-top:18px;padding-top:18px;border-top:1px solid var(--border)}
.pay-code-label{font-size:12px;font-weight:700;color:var(--text-m);margin-bottom:8px}
.pay-code-wrap{display:flex;gap:8px}
.pay-code-input{
  flex:1;padding:10px 14px;border:1.5px solid var(--border);border-radius:9px;
  font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;outline:none;
  font-family:monospace;
}
.pay-code-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.pay-activate-btn{
  padding:10px 18px;background:var(--grad-accent);color:#fff;border:none;
  border-radius:9px;font-size:13px;font-weight:800;cursor:pointer;
  white-space:nowrap;transition:opacity .15s;
}
.pay-activate-btn:hover{opacity:.88}
.pay-note{font-size:11.5px;color:var(--text-m);margin-top:10px;line-height:1.6;text-align:center}

.page-content{flex:1;overflow-y:auto;padding:22px 24px;background:var(--grad-bg)}
.page-content::-webkit-scrollbar{width:5px}
.page-content::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#6366f1,#a855f7);border-radius:3px}
.page{animation:pgIn .18s ease;flex:1;overflow-y:auto;padding:22px 24px;background:var(--grad-bg)}
.page.hidden{display:none}
@keyframes pgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── TOOLBAR ───────────────────────────────── */
.page-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.search-input{
  flex:1;min-width:200px;padding:9px 14px;
  border:1.5px solid var(--border);border-radius:9px;
  font-size:13.5px;outline:none;background:#fff;color:var(--text);transition:all .18s;
}
.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.1);background:#fafcff}
.filter-select{
  padding:9px 13px;border:1.5px solid var(--border);border-radius:9px;
  font-size:13.5px;background:#fff;color:var(--text);cursor:pointer;outline:none;transition:all .18s;
}
.filter-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.1)}

/* ── CARD ──────────────────────────────────── */
.card{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--sh);overflow:hidden}
.card-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 20px;border-bottom:1px solid var(--border);
  font-weight:700;font-size:14px;
  background:linear-gradient(90deg,#f5f9ff,#f0f7ff);
}
.ct-badge{background:var(--grad-accent);color:#fff;border-radius:10px;padding:1px 9px;font-size:11px;font-weight:700;margin-left:8px}

/* ── KPI GRID ──────────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:18px}
.kpi-card{
  background:var(--card);border-radius:var(--radius);border:1px solid var(--border);
  padding:18px 16px;box-shadow:var(--sh);display:flex;align-items:center;gap:12px;
  transition:all .2s;position:relative;overflow:hidden;cursor:default;
}
.kpi-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-accent)}
.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.kpi-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.kpi-icon.blue{background:linear-gradient(135deg,#dce8f5,#c4d8ef);box-shadow:0 3px 8px rgba(99,102,241,.12)}
.kpi-icon.green{background:linear-gradient(135deg,#d6edd8,#bfdec1);box-shadow:0 3px 8px rgba(46,139,87,.12)}
.kpi-icon.yellow{background:linear-gradient(135deg,#fef3d6,#fde8a8);box-shadow:0 3px 8px rgba(200,122,0,.12)}
.kpi-icon.red{background:linear-gradient(135deg,#f5d9d6,#edc0bc);box-shadow:0 3px 8px rgba(192,57,43,.12)}
.kpi-icon.purple{background:linear-gradient(135deg,#e8e0f5,#d6cced);box-shadow:0 3px 8px rgba(102,51,153,.12)}
.kpi-icon.cyan{background:linear-gradient(135deg,#d0eaf5,#b8dcf0);box-shadow:0 3px 8px rgba(31,120,180,.12)}
.kpi-icon.orange{background:linear-gradient(135deg,#fde8cc,#fad4a4);box-shadow:0 3px 8px rgba(200,100,0,.12)}
.kpi-value{font-size:26px;font-weight:900;line-height:1;color:var(--text)}
.kpi-label{font-size:11.5px;color:var(--text-m);margin-top:4px;font-weight:500}

/* ── DASHBOARD CHARTS ──────────────────────── */
.charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:16px}
.chart-card{padding:0}
.chart-card .card-header{border-radius:var(--radius) var(--radius) 0 0}
.chart-wrap{padding:16px;height:200px;display:flex;align-items:center;justify-content:center}
.chart-wrap canvas{max-height:170px}
.dash-bottom{display:flex;gap:14px;flex-wrap:wrap}
.dash-bottom .card{overflow:auto;max-height:260px}
.dash-item{display:flex;align-items:center;justify-content:space-between;padding:11px 18px;border-bottom:1px solid var(--border);gap:8px}
.dash-item:last-child{border-bottom:none}
.dash-item:hover{background:#f8fbff}
.dash-name{font-weight:600;font-size:13px}
.dash-sub{font-size:11px;color:var(--text-m);margin-top:2px}
.empty-state{padding:28px;text-align:center;color:var(--text-m);font-size:13px}

/* ── TABLE ─────────────────────────────────── */
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table thead{background:linear-gradient(90deg,#f0f7ff,#e8f0fe)}
.data-table th{padding:11px 13px;text-align:left;font-size:10.5px;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.8px;border-bottom:2px solid var(--border);white-space:nowrap}
.data-table td{padding:11px 13px;border-bottom:1px solid var(--border);vertical-align:middle}
.data-table tbody tr:hover{background:#f5f9ff}
.data-table tbody tr:last-child td{border-bottom:none}
code{font-family:monospace;font-size:11.5px;background:#f0f7ff;padding:2px 6px;border-radius:4px;color:var(--accent)}

/* ── BADGES ────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}
.badge-success{background:#dcfce7;color:#166534}
.badge-warning{background:#fef9c3;color:#854d0e}
.badge-danger{background:#fee2e2;color:#991b1b}
.badge-info{background:#dbeafe;color:#1e40af}
.badge-muted{background:#f1f5f9;color:#475569}
.badge-purple{background:#ede9fe;color:#6d28d9}
.badge-online{background:#d6edda;color:#1e6b35}
.badge-offline{background:#f5d9d6;color:#8c2220}
.badge-critico{background:#f5d9d6;color:#8c2220}
.badge-alto{background:#fde8cc;color:#8c4a00}
.badge-medio{background:#fef3d6;color:#7a5300}
.badge-baixo{background:#d6edda;color:#1e6b35}

/* ── PROGRESS BAR ──────────────────────────── */
.prog-bar{width:70px;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;display:inline-block;vertical-align:middle;margin-left:6px}
.prog-fill{height:100%;border-radius:3px;background:var(--grad-accent)}
.prog-fill.warn{background:linear-gradient(90deg,#c87a00,#e09a10)}
.prog-fill.danger{background:linear-gradient(90deg,#c0392b,#d95b4b)}

/* ── EMPLOYEE GRID ─────────────────────────── */
.emp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.emp-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;box-shadow:var(--sh);transition:all .2s;
  border-top:3px solid transparent;position:relative;overflow:hidden;
}
.emp-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-accent)}
.emp-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.emp-av{width:52px;height:52px;border-radius:14px;background:var(--grad-accent);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;color:#fff;margin-bottom:12px;box-shadow:0 3px 10px rgba(99,102,241,.22)}
.emp-name{font-weight:800;font-size:15px;margin-bottom:3px}
.emp-role{font-size:12.5px;color:var(--text-m);margin-bottom:10px}
.emp-info{font-size:12px;color:var(--text-m);line-height:1.8}
.emp-info strong{color:var(--text)}
.emp-actions{display:flex;gap:6px;margin-top:12px;justify-content:flex-end}

/* ── STOCK GRID ────────────────────────────── */
.stock-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.stock-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;box-shadow:var(--sh);transition:all .2s;
  border-left:4px solid transparent;
  border-image:none;border-left:4px solid var(--accent2);
}
.stock-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.stock-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.stock-icon{width:44px;height:44px;background:linear-gradient(135deg,#dbeafe,#bfdbfe);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 4px 12px rgba(99,102,241,.15)}
.stock-name{font-weight:700;font-size:14px;margin-bottom:3px}
.stock-model{font-size:12px;color:var(--text-m)}
.stock-info{font-size:12px;color:var(--text-m);line-height:1.9}
.stock-info strong{color:var(--text)}
.stock-actions{display:flex;gap:6px;margin-top:12px}

/* ── TICKET PRIORITY ───────────────────────── */
.prio-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px;flex-shrink:0}
.prio-dot.Crítico{background:#c0392b;box-shadow:0 0 4px rgba(192,57,43,.4)}
.prio-dot.Alto{background:#d4681a;box-shadow:0 0 4px rgba(212,104,26,.4)}
.prio-dot.Médio{background:#c87a00;box-shadow:0 0 4px rgba(200,122,0,.4)}
.prio-dot.Baixo{background:#2e8b57;box-shadow:0 0 4px rgba(46,139,87,.4)}

/* ── REQ GRID (ADMISSÃO/DEMISSÃO) ──────────── */
.req-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}
.req-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--sh);overflow:hidden}
.req-card-hd{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(90deg,#f5f9ff,#f0f7ff)}
.req-name{font-weight:800;font-size:14px}
.req-sub{font-size:12px;color:var(--text-m);margin-top:2px}
.req-body{padding:14px 18px}
.req-row{display:flex;justify-content:space-between;font-size:12.5px;padding:5px 0;border-bottom:1px dashed var(--border)}
.req-row:last-child{border-bottom:none}
.req-row span:first-child{color:var(--text-m)}
.req-row span:last-child{font-weight:600;text-align:right;max-width:60%}
.req-actions{padding:12px 18px;background:#f8fbff;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}

/* ── PASSWORD GRID ─────────────────────────── */
.pwd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.pwd-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--sh);border-left:4px solid var(--accent)}
.pwd-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pwd-title{font-weight:800;font-size:14px}
.pwd-field{display:flex;align-items:center;gap:8px;background:#f8fbff;border:1px solid var(--border);border-radius:8px;padding:7px 11px;margin:5px 0}
.pwd-lbl{font-size:11px;color:var(--text-m);min-width:50px}
.pwd-val{flex:1;font-weight:700;font-family:monospace;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pwd-copy{background:none;border:none;cursor:pointer;color:var(--text-m);padding:2px 6px;border-radius:5px;font-size:13px}
.pwd-copy:hover{background:var(--accent-light);color:var(--accent)}
.pwd-actions{display:flex;gap:6px;margin-top:12px;justify-content:flex-end}
.pwd-input-wrap{position:relative;display:flex;align-items:center;width:100%}
.pwd-input-wrap input{width:100%;padding-right:36px}
.pwd-toggle{position:absolute;right:8px;background:none;border:none;cursor:pointer;color:var(--text-m);font-size:14px}

/* ── REPORTS ───────────────────────────────── */
.reports-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.rep-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px 20px;box-shadow:var(--sh);text-align:center;cursor:pointer;transition:all .2s;border-top:3px solid transparent}
.rep-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-top-color:var(--accent)}
.rep-icon{font-size:36px;margin-bottom:10px}
.rep-title{font-weight:800;font-size:15px;margin-bottom:6px}
.rep-desc{font-size:12px;color:var(--text-m);margin-bottom:16px;line-height:1.5}
.rep-btn{display:inline-block;padding:8px 18px;background:var(--grad-accent);color:#fff;border:none;border-radius:8px;font-size:12.5px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(99,102,241,.2)}
.rep-btn-blue{background:var(--grad-accent)}
.rep-btn-green{background:linear-gradient(90deg,#2e8b57,#3aa86a)}

/* ── MODAL ─────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(10,5,24,.55);z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:ovIn .15s ease;backdrop-filter:blur(4px);
}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
.modal{
  background:#fff;border-radius:16px;width:100%;max-width:560px;
  max-height:90vh;display:flex;flex-direction:column;
  box-shadow:0 28px 80px rgba(10,5,24,.3),0 0 0 1px rgba(99,102,241,.1);
  animation:mdIn .18s ease;
  border-top:3px solid var(--accent);
}
.modal-lg{max-width:720px}
@keyframes mdIn{from{opacity:0;transform:scale(.95) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0;
  background:linear-gradient(90deg,#f5f9ff,#f0f7ff);
  border-radius:14px 14px 0 0;
}
.modal-header h2{font-size:17px;font-weight:800;color:var(--text)}
.modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-m);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.modal-close:hover{background:var(--accent-light);color:var(--accent)}
.modal-body{padding:22px 24px;overflow-y:auto;flex:1}
.modal-body::-webkit-scrollbar{width:4px}
.modal-body::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#6366f1,#a855f7);border-radius:2px}
.modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;flex-shrink:0;background:linear-gradient(90deg,#f5f9ff,#f0f7ff);border-radius:0 0 14px 14px}

/* ── FORMS ─────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-full{grid-column:1/-1}
.form-group label{font-size:11px;font-weight:700;color:var(--text-m);text-transform:uppercase;letter-spacing:.6px}
.form-group input,.form-group select,.form-group textarea{
  padding:9px 12px;border:1.5px solid var(--border);border-radius:8px;
  font-size:13.5px;outline:none;background:#fff;color:var(--text);
  transition:all .18s;font-family:inherit;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.1);background:#fafcff;
}
.form-group textarea{resize:vertical}
.form-section-title{font-weight:800;font-size:11.5px;color:var(--accent);margin:16px 0 9px;padding-bottom:6px;border-bottom:2px solid var(--accent-light);text-transform:uppercase;letter-spacing:.8px}
.checks-grid{display:flex;flex-wrap:wrap;gap:7px}
.check-item{display:flex;align-items:center;gap:6px;padding:6px 11px;background:#f8fbff;border:1.5px solid var(--border);border-radius:7px;cursor:pointer;font-size:12.5px;transition:all .15s}
.check-item:hover{background:var(--accent-light);border-color:var(--accent)}
.check-item input{cursor:pointer;accent-color:var(--accent)}

/* ── TOAST ─────────────────────────────────── */
.toast{
  position:fixed;bottom:26px;right:26px;
  background:#1e1b4b;color:#fff;
  padding:13px 20px;border-radius:11px;font-size:13.5px;font-weight:600;
  box-shadow:0 6px 20px rgba(26,45,74,.3);z-index:9999;max-width:340px;
  animation:toIn .2s ease;border-left:4px solid #818cf8;
}
.toast.hidden{display:none}
.toast.error{border-left-color:#c0392b}
@keyframes toIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ── SCROLLBAR GLOBAL ──────────────────────── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:rgba(224,232,248,.4)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#6366f1,#a855f7);border-radius:3px}

/* ── NOTIFICATION BELL ────────────────────── */
.notif-wrap{position:relative}
.notif-bell{
  background:none;border:none;cursor:pointer;font-size:18px;
  padding:7px 9px;border-radius:9px;position:relative;
  transition:background .15s;
}
.notif-bell:hover{background:var(--accent-light)}
.notif-count{
  position:absolute;top:2px;right:2px;
  background:var(--danger);color:#fff;
  border-radius:10px;min-width:18px;height:18px;
  font-size:10px;font-weight:800;line-height:18px;text-align:center;
  padding:0 4px;box-shadow:0 1px 4px rgba(192,57,43,.3);
}
.notif-dropdown{
  position:fixed;top:66px;right:18px;width:320px;
  background:#fff;border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--sh-md);
  z-index:500;animation:mdIn .15s ease;
  max-height:420px;overflow-y:auto;
}
.notif-hd{padding:14px 18px;border-bottom:1px solid var(--border);font-weight:800;font-size:14px;background:linear-gradient(90deg,#f0f4fb,#edf2f9);border-radius:12px 12px 0 0;display:flex;align-items:center;justify-content:space-between}
.notif-hd button{background:none;border:none;font-size:11px;color:var(--accent);cursor:pointer;font-weight:700}
.notif-item{
  display:flex;align-items:flex-start;gap:11px;
  padding:11px 16px;border-bottom:1px solid var(--border);
  cursor:pointer;transition:background .12s;
}
.notif-item:hover{background:#f5f8fd}
.notif-item:last-child{border-bottom:none}
.notif-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px}
.notif-dot.warn{background:var(--warning)}
.notif-dot.danger{background:var(--danger)}
.notif-dot.info{background:var(--accent)}
.notif-dot.success{background:var(--success)}
.notif-msg{font-size:12.5px;line-height:1.45;color:var(--text)}
.notif-time{font-size:11px;color:var(--text-m);margin-top:2px}
.notif-empty{padding:28px;text-align:center;color:var(--text-m);font-size:13px}

/* ── QR CODE MODAL ─────────────────────────── */
.modal-qr-sz{max-width:640px}
.qr-layout{border:1.5px solid var(--border);border-radius:10px;overflow:hidden;background:#fff}
.qr-label-hd{
  background:var(--grad-accent);color:#fff;
  padding:10px 18px;text-align:center;
}
.qr-company-name{font-weight:900;font-size:15px;letter-spacing:.5px}
.qr-company-sub{font-size:11px;opacity:.85;margin-top:2px}
.qr-body{display:flex;gap:20px;padding:18px 20px;align-items:flex-start}
.qr-code-box{flex-shrink:0;width:160px;height:160px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:10px;background:#fff;padding:6px}
.qr-code-box canvas,.qr-code-box img{width:148px!important;height:148px!important}
.qr-info{flex:1;min-width:0}
.qr-asset-name{font-weight:900;font-size:15px;color:var(--text);margin-bottom:10px;line-height:1.3}
.qr-table{width:100%;font-size:12px;border-collapse:collapse}
.qr-table td{padding:4px 6px;border-bottom:1px solid var(--border)}
.qr-table td:first-child{color:var(--text-m);font-weight:600;white-space:nowrap;width:90px}
.qr-table td:last-child{font-weight:700;color:var(--text)}
.qr-footer-bar{background:#f0f4fb;padding:7px 18px;font-size:11px;color:var(--text-m);text-align:right;border-top:1px solid var(--border)}

/* ── QR PRINT ───────────────────────────────── */
@media print{
  body > *{display:none!important}
  #qr-print-area{display:block!important;position:fixed;inset:0;border:none;border-radius:0}
  .modal-overlay,.topbar,.sidebar,.modal-footer{display:none!important}
}

.rh-ops-row{display:flex;gap:14px;margin-top:14px;flex-wrap:wrap;align-items:flex-start}
.rh-ops-row .card{min-width:240px}
.semaforo{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700}
.semaforo.verde{background:#dcf5e7;color:#1e6b35}
.semaforo.amarelo{background:#fef3d6;color:#7a5300}
.semaforo.vermelho{background:#f5d9d6;color:#8c2220}
.rh-stock-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border)}
.rh-stock-item:hover{background:#f5f8fd}
.rh-stock-item:last-child{border-bottom:none}
.rh-stock-ico{font-size:22px;width:28px;text-align:center;flex-shrink:0}
.rh-stock-info{flex:1;min-width:0}
.rh-stock-name{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rh-stock-sub{font-size:11px;color:var(--text-m)}
.rh-proc-item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);cursor:pointer}
.rh-proc-item:hover{background:#f5f8fd}
.rh-proc-item:last-child{border-bottom:none}
.rh-proc-av{width:34px;height:34px;border-radius:50%;background:var(--grad-accent);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:11px;flex-shrink:0}
.rh-proc-name{font-weight:700;font-size:13px}
.rh-proc-sub{font-size:11px;color:var(--text-m);margin-top:2px}

/* ── RH PAGE ───────────────────────────── */
#page-rh{display:flex;flex-direction:column;gap:16px}
.rh-charts-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.rh-bday-card{min-width:0;max-height:520px;overflow-y:auto}

/* Ações Rápidas */
.rh-actions-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:linear-gradient(90deg,#f0f5ff,#f8faff);border:1.5px solid var(--border);border-radius:12px;padding:12px 18px}
.rh-act-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 15px;border-radius:8px;font-size:12.5px;font-weight:700;cursor:pointer;border:1.5px solid transparent;transition:all .18s;white-space:nowrap;font-family:inherit}
.rh-act-green{background:#dcf5e7;color:#1e6b35;border-color:#b0e0c4}
.rh-act-green:hover{background:#1e6b35;color:#fff}
.rh-act-red{background:#fde8e8;color:#8c2220;border-color:#f5b8b8}
.rh-act-red:hover{background:#8c2220;color:#fff}
.rh-act-blue{background:#e8f0fd;color:var(--accent);border-color:#c8d8f8}
.rh-act-blue:hover{background:var(--accent);color:#fff}
.rh-act-email{background:#dbeafe;color:#1d4ed8;border-color:#bfdbfe}
.rh-act-email:hover{background:#1d4ed8;color:#fff}
.rh-act-whats{background:#dcfce7;color:#15803d;border-color:#bbf7d0}
.rh-act-whats:hover{background:#15803d;color:#fff}
.rh-act-sep{flex:1;min-width:8px}

/* 2-col grid: birthday + docs */
.rh-main-grid{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:flex-start}
@media(max-width:900px){.rh-main-grid{grid-template-columns:1fr}}

/* 3-col grid: estoque / admissão / demissão */
.rh-3grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.rh-3grid{grid-template-columns:1fr}}
@media(max-width:1200px)and(min-width:901px){.rh-3grid{grid-template-columns:repeat(3,1fr)}}
/* birthday list */
.bday-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);transition:background .12s}
.bday-item:hover{background:#f5f8fd}
.bday-item:last-child{border-bottom:none}
.bday-av{width:36px;height:36px;border-radius:50%;background:var(--grad-accent);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px;flex-shrink:0}
.bday-info{flex:1;min-width:0}
.bday-name{font-weight:700;font-size:13px}
.bday-sub{font-size:11px;color:var(--text-m)}
/* docs grid */
#rh-docs-grid{max-height:420px;overflow-y:auto}
.rh-doc-row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border);transition:background .12s}
.rh-doc-row:hover{background:#f5f8fd}
.rh-doc-row:last-child{border-bottom:none}
.rh-doc-ico{font-size:26px;flex-shrink:0;width:32px;text-align:center}
.rh-doc-body{flex:1;min-width:0}
.rh-doc-name{font-weight:700;font-size:13.5px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rh-doc-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rh-doc-desc{font-size:12px;color:var(--text-m);margin-top:2px}
.rh-doc-foot{font-size:11px;color:var(--text-m);margin-top:3px}
.rh-doc-btns{display:flex;gap:5px;flex-shrink:0}

/* ── CHANNELS CARD ────────────────────────── */
.channels-card{flex:0 0 220px;min-width:190px}
.channels-body{padding:14px 16px;display:flex;flex-direction:column;gap:10px}

/* ── RH EXTRA ROW ────────────────────────── */
.rh-extra-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
.rh-extra-row .card{min-width:240px}

/* ── COMUNICADOS ─────────────────────────── */
.rh-com-card{padding:14px 18px;border-bottom:1px solid var(--border);transition:background .12s}
.rh-com-card:last-child{border-bottom:none}
.rh-com-card:hover{background:#f8faff}
.rh-com-card.urgente{border-left:4px solid var(--danger);background:#fff8f7}
.rh-com-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:6px}
.rh-com-titulo{font-weight:800;font-size:14px;color:var(--text);margin-bottom:3px}
.rh-com-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rh-com-msg{font-size:13px;color:var(--text-m);line-height:1.6;white-space:pre-line}

/* ── CALENDÁRIO ──────────────────────────── */
.rh-cal-year{font-size:17px;font-weight:800;color:var(--text);margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--border)}
.rh-cal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:16px}
.rh-cal-month{background:#f8faff;border:1px solid var(--border);border-radius:10px;padding:12px;overflow:hidden}
.rh-cal-mname{font-weight:800;font-size:13px;color:var(--accent);margin-bottom:8px;text-align:center;text-transform:uppercase;letter-spacing:.5px}
.rh-cal-days-hdr{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:9.5px;font-weight:700;color:var(--text-m);margin-bottom:4px;text-transform:uppercase}
.rh-cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.rh-day{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:11px;border-radius:50%;cursor:default;transition:background .1s}
.rh-day:hover:not(.empty){background:#e8f0fd}
.rh-day.empty{visibility:hidden}
.rh-day.weekend{color:#888}
.rh-day.holiday{background:#fde8f0;color:#c0392b;font-weight:800;border-radius:50%}
.rh-day.today{background:var(--accent);color:#fff;font-weight:900;border-radius:50%;box-shadow:0 2px 8px rgba(99,102,241,.4)}
.rh-cal-legend{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.rh-leg{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 12px;border-radius:20px;font-weight:600}
.rh-leg.today{background:var(--accent);color:#fff}
.rh-leg.holiday{background:#fde8f0;color:#c0392b}
.rh-leg.weekend{background:#f0f0f0;color:#666}
.rh-hol-list{background:#f8faff;border:1px solid var(--border);border-radius:10px;padding:14px 18px}
.rh-hol-title{font-weight:800;font-size:13px;color:var(--text);margin-bottom:10px}
.rh-hol-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px}
.rh-hol-item{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:4px 0}
.rh-hol-date{font-weight:800;color:var(--accent);min-width:40px}

/* ── CAMPANHAS ───────────────────────────── */
.rh-campanhas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;padding:16px}
.rh-camp-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px 16px;text-align:center;transition:transform .18s,box-shadow .18s}
.rh-camp-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.rh-camp-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 10px}
.rh-camp-nome{font-weight:800;font-size:14px;margin-bottom:3px;color:var(--text)}
.rh-camp-mes{font-size:11.5px;color:var(--text-m);margin-bottom:12px}
.rh-camp-btns{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.channel-item{
  display:flex;align-items:center;gap:11px;
  padding:11px 12px;border-radius:10px;
  border:1.5px solid var(--border);cursor:pointer;
  transition:all .18s;background:#f8fbff;
}
.channel-item:hover{
  border-color:var(--accent);
  background:var(--accent-light);
  transform:translateX(3px);
  box-shadow:0 3px 12px rgba(99,102,241,.12);
}
.channel-icon{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
}
.ch-email{background:linear-gradient(135deg,#dbeafe,#bfdbfe);box-shadow:0 3px 10px rgba(99,102,241,.2)}
.ch-whats{background:linear-gradient(135deg,#dcfce7,#bbf7d0);box-shadow:0 3px 10px rgba(22,163,74,.2)}
.channel-info{flex:1;min-width:0}
.channel-name{font-weight:700;font-size:12.5px;color:var(--text)}
.channel-val{font-size:11.5px;color:var(--accent);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.channel-arrow{font-size:16px;color:var(--accent);font-weight:700;opacity:.6}
.channel-item:hover .channel-arrow{opacity:1}
.channel-hint{font-size:11px;color:var(--text-m);text-align:center;padding-top:2px}

/* ── UTILS ─────────────────────────────────── */
.hidden{display:none!important}
.expiry-warn{color:var(--warning);font-weight:700}
.expiry-danger{color:var(--danger);font-weight:700}

/* ══════════════════════════════════════════════
   TRIAL BANNER
══════════════════════════════════════════════ */
.trial-banner{
  display:flex;align-items:center;gap:12px;
  padding:9px 24px;
  background:linear-gradient(90deg,#1e1b4b 0%,#312e81 100%);
  border-bottom:1px solid rgba(99,102,241,.35);
  font-size:13px;color:#c7d2fe;flex-shrink:0;
  position:relative;z-index:10;
}
.trial-banner strong{color:#fff}
.trial-icon{font-size:16px;flex-shrink:0}
.trial-banner > span:nth-child(2){flex:1}
.trial-cta{
  padding:5px 14px;border-radius:8px;border:none;cursor:pointer;
  background:var(--grad-accent);color:#fff;font-size:12px;font-weight:700;
  white-space:nowrap;transition:opacity .15s;
}
.trial-cta:hover{opacity:.85}
.trial-dismiss{
  background:none;border:none;color:#6366f1;cursor:pointer;
  font-size:14px;line-height:1;padding:2px 4px;border-radius:4px;
  transition:background .15s;flex-shrink:0;
}
.trial-dismiss:hover{background:rgba(99,102,241,.15);color:#fff}
.trial-banner.trial-warn{background:linear-gradient(90deg,#78350f,#92400e)}
.trial-banner.trial-warn .trial-cta{background:linear-gradient(90deg,#f59e0b,#d97706)}
.trial-banner.trial-urgent{background:linear-gradient(90deg,#7f1d1d,#991b1b)}
.trial-banner.trial-urgent .trial-cta{background:linear-gradient(90deg,#ef4444,#dc2626)}

/* nav trial badge */
.nav-badge-trial{
  background:linear-gradient(90deg,#f59e0b,#d97706);
  color:#fff;font-size:9px;font-weight:800;letter-spacing:.3px;
  padding:2px 6px;border-radius:10px;
  text-transform:uppercase;
}

/* ══════════════════════════════════════════════
   PAYWALL OVERLAY
══════════════════════════════════════════════ */
.paywall-overlay{
  position:fixed;inset:0;z-index:8000;
  background:rgba(10,8,40,.96);
  display:flex;align-items:center;justify-content:center;
  padding:24px;overflow-y:auto;
}

/* ── SUSPENSO POR INADIMPLÊNCIA ─────────────────── */
.suspended-overlay{
  position:fixed;inset:0;z-index:9000;
  background:rgba(10,5,30,.97);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.suspended-box{
  max-width:520px;width:100%;background:#1a0a2e;
  border:2px solid #d97706;border-radius:20px;
  padding:40px;text-align:center;color:#fff;
  animation:fadeInUp .4s ease;
}
.suspended-icon{font-size:56px;margin-bottom:16px}
.suspended-box h2{font-size:24px;font-weight:900;color:#fbbf24;margin-bottom:10px}
.suspended-box p{font-size:14px;color:#fde68a;line-height:1.7;margin-bottom:20px}
.suspended-steps{background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.2);
  border-radius:10px;padding:16px;text-align:left;margin-bottom:20px;font-size:13px;
  display:flex;flex-direction:column;gap:8px;color:#fde68a}
.suspended-contacts{display:flex;flex-direction:column;gap:10px}
.suspended-btn-wpp{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px;border-radius:10px;text-decoration:none;font-weight:700;font-size:14px;
  background:linear-gradient(135deg,#25d366,#128c7e);color:#fff;
}
.suspended-btn-email{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px;border-radius:10px;text-decoration:none;font-weight:600;font-size:13px;
  background:rgba(255,255,255,.08);color:#a5b4fc;border:1px solid rgba(255,255,255,.15);
}
.paywall-box{
  max-width:860px;width:100%;
  animation:fadeInUp .4s ease;
}
.paywall-header{text-align:center;margin-bottom:40px;color:#fff}
.paywall-logo{
  width:64px;height:64px;border-radius:18px;
  background:linear-gradient(135deg,#6366f1,#a855f7);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;color:#fff;margin:0 auto 18px;
  box-shadow:0 8px 30px rgba(99,102,241,.5);
}
.paywall-header h2{font-size:26px;font-weight:900;margin-bottom:8px}
.paywall-header p{font-size:14px;color:#a5b4fc;max-width:460px;margin:0 auto}
.paywall-plans{
  display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:28px;
}
.plan-card-pay{
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.12);
  border-radius:18px;padding:26px 22px;width:240px;
  text-align:center;color:#fff;cursor:pointer;
  transition:all .2s;position:relative;
}
.plan-card-pay:hover{background:rgba(255,255,255,.1);transform:translateY(-4px);border-color:rgba(99,102,241,.6)}
.plan-card-pay.popular{border-color:#6366f1;background:rgba(99,102,241,.15)}
.plan-badge-pay{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:linear-gradient(90deg,#6366f1,#a855f7);color:#fff;
  font-size:10px;font-weight:800;padding:3px 12px;border-radius:20px;
  white-space:nowrap;letter-spacing:.5px;text-transform:uppercase;
}
.plan-emoji{font-size:34px;margin-bottom:10px}
.plan-name-pay{font-size:17px;font-weight:800;margin-bottom:4px}
.plan-users{font-size:12px;color:#a5b4fc;margin-bottom:14px}
.plan-price-pay{font-size:28px;font-weight:900;margin-bottom:2px}
.plan-price-pay span{font-size:14px;font-weight:400;color:#a5b4fc}
.plan-features{
  list-style:none;text-align:left;margin:14px 0 18px;
  font-size:12.5px;color:#c7d2fe;display:flex;flex-direction:column;gap:6px;
}
.plan-features li::before{content:'✓ ';color:#34d399;font-weight:700}
.plan-btn-pay{
  width:100%;padding:10px;border-radius:10px;border:none;cursor:pointer;
  font-size:13px;font-weight:800;color:#fff;
  background:linear-gradient(90deg,#6366f1,#a855f7);
  transition:opacity .15s;
}
.plan-btn-pay:hover{opacity:.85}
.paywall-footer{text-align:center;font-size:12.5px;color:#6b7280}
.paywall-contact{color:#818cf8;text-decoration:none;font-weight:600}
.paywall-contact:hover{color:#a5b4fc}

/* ══════════════════════════════════════════════
   PÁGINA ATIVAÇÃO
══════════════════════════════════════════════ */
.activation-wrap{max-width:900px;margin:0 auto;padding-bottom:40px}
.act-status-card{
  background:var(--card);border-radius:var(--radius);
  box-shadow:var(--sh);padding:28px 30px;margin-bottom:22px;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.act-status-icon{
  width:60px;height:60px;border-radius:16px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:26px;
}
.act-status-icon.trial{background:#eef2ff;color:#6366f1}
.act-status-icon.active{background:#d1fae5;color:#059669}
.act-status-icon.expired{background:#fee2e2;color:#dc2626}
.act-status-info{flex:1}
.act-status-title{font-size:18px;font-weight:800;color:var(--text)}
.act-status-sub{font-size:13px;color:var(--text-m);margin-top:3px}
.act-status-badge{
  padding:5px 14px;border-radius:20px;font-size:12px;font-weight:800;
  letter-spacing:.3px;text-transform:uppercase;
}
.badge-trial{background:#eef2ff;color:#6366f1}
.badge-active{background:#d1fae5;color:#059669}
.badge-expired{background:#fee2e2;color:#dc2626}

.act-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}
.act-info-card{
  background:var(--card);border-radius:var(--radius);
  box-shadow:var(--sh);padding:22px 24px;
}
.act-info-label{font-size:11px;font-weight:700;color:var(--text-m);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.act-info-value{font-size:20px;font-weight:900;color:var(--text)}
.act-info-sub{font-size:12px;color:var(--text-m);margin-top:4px}

.act-plans-section{background:var(--card);border-radius:var(--radius);box-shadow:var(--sh);padding:26px 28px;margin-bottom:22px}
.act-plans-title{font-size:16px;font-weight:800;color:var(--text);margin-bottom:18px}
.act-plans-grid{display:flex;gap:16px;flex-wrap:wrap}
.plan-card-act{
  flex:1;min-width:200px;border:2px solid var(--border);
  border-radius:14px;padding:20px 18px;cursor:pointer;transition:all .2s;
  text-align:center;position:relative;
}
.plan-card-act:hover{border-color:var(--accent);box-shadow:0 4px 20px rgba(99,102,241,.15)}
.plan-card-act.selected{border-color:var(--accent);background:var(--accent-light)}
.plan-card-act .plan-badge-act{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:var(--grad-accent);color:#fff;font-size:9px;font-weight:800;
  padding:2px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;
}
.plan-card-act .pe{font-size:28px;margin-bottom:6px}
.plan-card-act .pn{font-size:14px;font-weight:800;color:var(--text)}
.plan-card-act .pp{font-size:22px;font-weight:900;color:var(--accent);margin:4px 0}
.plan-card-act .pu{font-size:11.5px;color:var(--text-m)}
.plan-card-act ul{list-style:none;text-align:left;margin:10px 0;font-size:12px;color:var(--text-m);display:flex;flex-direction:column;gap:4px}
.plan-card-act ul li::before{content:'✓ ';color:var(--success);font-weight:700}

.act-actions{display:flex;gap:12px;flex-wrap:wrap}
.act-extend-section{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--sh);
  padding:22px 24px;margin-bottom:22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.act-extend-section label{font-size:13px;font-weight:600;color:var(--text);flex:1}
.act-extend-input{
  padding:8px 12px;border:1.5px solid var(--border);border-radius:8px;
  font-size:14px;width:80px;outline:none;text-align:center;
}
.act-extend-input:focus{border-color:var(--accent)}
@media(max-width:640px){.act-grid{grid-template-columns:1fr}.act-plans-grid{flex-direction:column}}

/* ══════════════════════════════════════════════
   RESPONSIVO — MOBILE & TABLET
══════════════════════════════════════════════ */

/* Overlay escuro da sidebar */
.sidebar-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.55);z-index:99;
  backdrop-filter:blur(2px);
  cursor:pointer;
}
.sidebar-overlay.active{display:block}

/* TABLET (769–1100px) */
@media(min-width:769px) and (max-width:1100px){
  :root{--sidebar-w:210px}
  .dash-kpis{grid-template-columns:repeat(2,1fr)!important}
  .dash-bottom{grid-template-columns:1fr!important}
}

/* MOBILE (≤768px) */
@media(max-width:768px){
  /* LOGIN */
  .login-bg > .login-box{
    min-width:unset!important;max-width:100%!important;
    padding-top:28px!important;padding-bottom:28px!important;
  }
  .login-box{
    width:100%!important;border-radius:0!important;
    padding-left:20px!important;padding-right:20px!important;
  }
  .lh-title{font-size:28px!important}

  /* APP LAYOUT */
  .app{overflow:auto}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;
    transform:translateX(-100%);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    z-index:100;height:100%;
  }
  .sidebar.mobile-open{transform:translateX(0)!important}
  .main-wrapper{width:100%;min-width:0}

  /* TOPBAR */
  .topbar{padding:0 12px!important;gap:8px!important}
  .topbar-title{font-size:15px!important;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .menu-toggle{display:flex!important}
  .topbar-date{display:none!important}
  .topbar-user-chip #chip-name{display:none}

  /* CONTENT */
  .page-content,.page{padding:12px!important}

  /* DASHBOARD CARDS */
  .dash-kpis{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}
  .dash-bottom{grid-template-columns:1fr!important}
  .dash-bottom .card{max-height:none!important}

  /* TABELAS */
  .card.overflow-x-auto,.table-wrap{overflow-x:auto}
  .card table,.table-container table{min-width:560px}
  .card > div > table{min-width:560px}

  /* FORMULÁRIOS */
  .form-row,[style*="grid-template-columns:1fr 1fr"],[style*="display:grid"]{grid-template-columns:1fr!important}

  /* MODAIS */
  .modal-overlay{padding:0!important;align-items:flex-start!important;overflow-y:auto}
  .modal{
    width:100%!important;max-width:100%!important;
    border-radius:0!important;
    min-height:100dvh;
    margin:0!important;
  }

  /* BOTÕES FLUTUANTES */
  #btn-new span{display:none}
  .btn-primary i + *{display:none}
}

/* MUITO PEQUENO (≤480px) */
@media(max-width:480px){
  .dash-kpis{grid-template-columns:1fr!important}
  .login-box{padding-left:16px!important;padding-right:16px!important}
  .modal-header{padding:14px 16px!important}
  .modal-body{padding:14px 16px!important}
}