:root{
  --bg:#f6f4ff;
  --bg2:#ffffff;
  --panel:#ffffff;
  --card:#ffffff;
  --card2:#f3efff;
  --text:#24113f;
  --muted:#6b5f80;
  --accent:#7c3aed;
  --accent2:#d946ef;
  --cyan:#06b6d4;
  --green:#22c55e;
  --yellow:#f59e0b;
  --red:#ef4444;
  --border:rgba(124,58,237,.18);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  overflow-x:hidden;
}

body{
  font-family:Segoe UI,Arial,sans-serif;
  color:var(--text);
  display:flex;
  background:
    radial-gradient(circle at top left,rgba(124,58,237,.16),transparent 35%),
    radial-gradient(circle at top right,rgba(217,70,239,.12),transparent 30%),
    linear-gradient(135deg,#ffffff,#f6f4ff);
}

/* SIDEBAR */
aside{
  width:260px;
  min-height:100vh;
  padding:26px;
  background:rgba(10,3,28,.78);
  border-right:1px solid var(--border);
  backdrop-filter:blur(18px);
  box-shadow:20px 0 60px rgba(0,0,0,.35);
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:34px;
}

.brand span{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:white;
  font-weight:900;
  box-shadow:0 0 35px rgba(139,92,246,.7);
}

.brand strong{
  font-size:20px;
}

.brand small{
  display:block;
  color:var(--muted);
  margin-top:3px;
}

nav{
  display:grid;
  gap:12px;
}

nav button{
  width:100%;
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px 16px;
  text-align:left;
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  font-weight:800;
  transition:.25s;
}

nav button:hover,
nav button.active{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:white;
  transform:translateX(5px);
  box-shadow:0 12px 35px rgba(139,92,246,.35);
}

/* MAIN */
main{
  flex:1;
  padding: 0 30px 30px 30px; /* remove espaço de cima */
}

header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-bottom:24px;
  padding:22px;
  border-radius:28px;
  background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(236,72,153,.08));
  border:1px solid var(--border);
  box-shadow:0 25px 70px rgba(0,0,0,.28);
}

header h1{
  margin:0;
  font-size:34px;
  letter-spacing:-1px;
}

header p{
  margin:6px 0 0;
  color:var(--muted);
}

.topActions{
  display:flex;
  align-items:center;
  gap:10px;
}

#userName{
  display:flex;
  align-items:center;
  padding:11px 15px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  color:#ddd6fe;
  font-weight:800;
}

button{
  border:0;
  border-radius:14px;
  padding:11px 16px;
  cursor:pointer;
  font-weight:900;
  color:white;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 10px 30px rgba(139,92,246,.28);
  transition:.22s;
}

button:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(139,92,246,.42);
}

#refreshBtn{
  background:linear-gradient(135deg,#7c3aed,#06b6d4);
}

.logoutBtn{
  background:linear-gradient(135deg,#ef4444,#be123c);
}

/* VIEWS */
.view{display:none}
.view.active{display:block}

/* KPIS */
.kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:18px;
  margin-bottom:24px;
}

.kpi{
  position:relative;
  overflow:hidden;
  padding:22px;
  border-radius:26px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.03)),
    var(--card);
  border:1px solid var(--border);
  box-shadow:0 22px 60px rgba(0,0,0,.32);
}

.kpi::before{
  content:'';
  position:absolute;
  inset:-80px auto auto -80px;
  width:170px;
  height:170px;
  background:radial-gradient(circle,rgba(139,92,246,.55),transparent 70%);
}

.kpi span{
  position:relative;
  z-index:1;
  display:block;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.7px;
}

.kpi strong{
  position:relative;
  z-index:1;
  display:block;
  margin-top:10px;
  font-size:32px;
  font-weight:950;
}

/* CHARTS */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
  gap:22px;
}

article{
  position:relative;
  overflow:hidden;
  min-height:360px;
  padding:22px;
  border-radius:28px;
  background:
    linear-gradient(160deg,rgba(139,92,246,.14),rgba(236,72,153,.06)),
    rgba(20,11,46,.85);
  border:1px solid var(--border);
  box-shadow:0 25px 70px rgba(0,0,0,.34);
}

article::after{
  content:'';
  position:absolute;
  right:-80px;
  top:-80px;
  width:180px;
  height:180px;
  background:radial-gradient(circle,rgba(236,72,153,.25),transparent 70%);
}

article h2{
  margin:0 0 14px;
  color:#ede9fe;
  font-size:16px;
}

article canvas{
  position:relative;
  z-index:1;
  height:270px!important;
  filter:drop-shadow(0 18px 26px rgba(139,92,246,.22));
}

/* TOOLBAR */
.toolbar{
  display:flex;
  gap:14px;
  margin-bottom:18px;
}

input,select,textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:16px;
  padding:13px 14px;
  color:var(--text);
  background:rgba(255,255,255,.05);
  outline:none;
  transition:.2s;
}

input:focus,
select:focus,
textarea:focus{
  border-color:rgba(139,92,246,.8);
  box-shadow:0 0 0 4px rgba(139,92,246,.16);
}

textarea{
  min-height:105px;
  resize:vertical;
}

/* TABLE */
.tableWrap{
  overflow:auto;
  padding:18px;
  border-radius:26px;
  background:rgba(20,11,46,.82);
  border:1px solid var(--border);
  box-shadow:0 22px 60px rgba(0,0,0,.3);
}

table{
  width:100%;
  border-collapse:collapse;
}

th,td{
  padding:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:left;
  vertical-align:top;
}

th{
  color:#c4b5fd;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.7px;
}

td{
  color:#f5f3ff;
}

.iconBtn,
td button{
  margin:2px;
  padding:8px 10px;
  border-radius:12px;
  font-size:12px;
}

/* BADGES */
.badge{
  display:inline-flex;
  border-radius:999px;
  padding:6px 11px;
  font-size:12px;
  font-weight:900;
}

.Pendente{background:rgba(245,158,11,.16);color:#fbbf24}
.Em{background:rgba(34,211,238,.16);color:#67e8f9}
.Concluído{background:rgba(34,197,94,.16);color:#4ade80}
.Cancelado{background:rgba(239,68,68,.16);color:#f87171}
.Baixa{background:rgba(34,197,94,.16);color:#4ade80}
.Média{background:rgba(34,211,238,.16);color:#67e8f9}
.Alta{background:rgba(245,158,11,.16);color:#fbbf24}
.Crítica,.overdue{background:rgba(239,68,68,.18);color:#f87171}

/* FORM */
.form{
  padding:22px;
  border-radius:28px;
  background:rgba(20,11,46,.86);
  border:1px solid var(--border);
  box-shadow:0 24px 70px rgba(0,0,0,.34);
}

.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:22px;
}

.tab{
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  color:#ddd6fe;
}

.tab.active{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:white;
}

.tabContent{
  display:none;
}

.tabContent.active{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
}

.tabContent label{
  display:flex;
  flex-direction:column;
  gap:7px;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}

.wide{
  grid-column:1/-1;
}

.actions{
  margin-top:22px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.secondary{
  background:rgba(255,255,255,.08);
  color:white;
}

/* USERS */
.userCard{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  margin-top:12px;
  padding:16px;
  border-radius:20px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
}

.userCard strong,
.userCard small{
  display:block;
}

.userCard small{
  color:var(--muted);
  margin-top:3px;
}

/* TOAST */
#toast,
.toast{
  position:fixed;
  right:24px;
  bottom:24px;
  padding:14px 18px;
  border-radius:16px;
  color:white;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  opacity:0;
  transform:translateY(12px);
  transition:.25s;
  z-index:9999;
  font-weight:900;
}

.show{
  opacity:1!important;
  transform:translateY(0)!important;
}

.toast.alertaSLA{
  top:24px;
  bottom:auto;
  background:linear-gradient(135deg,#ef4444,#be123c);
}

/* LOGIN */
.loginPage{
  height:100vh;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at top left,rgba(139,92,246,.45),transparent 36%),
    radial-gradient(circle at bottom right,rgba(236,72,153,.28),transparent 36%),
    linear-gradient(135deg,#05010d,#12042b);
}

.loginBox{
  width:360px;
  padding:34px;
  border-radius:30px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  backdrop-filter:blur(22px);
  box-shadow:0 35px 90px rgba(0,0,0,.58);
  display:flex;
  flex-direction:column;
  gap:14px;
  animation:fadeUp .6s ease;
}

.loginBox h2{
  margin:0 0 10px;
  text-align:center;
  font-size:26px;
  color:white;
}

.loginBox button{
  margin-top:8px;
  padding:14px;
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:translateY(0)}
}

/* PWA INSTALL */
.btnInstall{
  position:fixed;
  bottom:20px;
  right:20px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:white;
  padding:13px 17px;
  border-radius:18px;
  z-index:999;
}

/* MOBILE */
@media(max-width:768px){
  body{
    flex-direction:column;
  }

  aside{
    width:100%;
    min-height:auto;
    padding:16px;
  }

  nav{
    grid-template-columns:1fr 1fr;
    display:grid;
  }

  nav button{
    margin:0;
    text-align:center;
  }

  main{
    padding: 0 30px 30px 30px; /* remove espaço de cima */
}

  header{
    flex-direction:column;
    align-items:flex-start;
  }

  .topActions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  #userName{
    grid-column:1/-1;
    justify-content:center;
  }

  .grid{
    grid-template-columns:1fr;
  }

  .kpis{
    grid-template-columns:1fr 1fr;
  }

  .toolbar{
    flex-direction:column;
  }

  table{
    min-width:850px;
  }

  .tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .actions{
    flex-direction:column;
  }

  .actions button{
    width:100%;
  }

  .loginBox{
    width:92%;
  }
}

@media(max-width:430px){
  .kpis{
    grid-template-columns:1fr;
  }

  nav,
  .topActions{
    grid-template-columns:1fr;
  }

  header h1{
    font-size:26px;
  }
}

/* AJUSTE CLEAN BRANCO */
body{
  background:#f7f4ff !important;
  color:#24113f !important;
}

aside{
  background:#ffffff !important;
  border-right:1px solid rgba(124,58,237,.15) !important;
  box-shadow:12px 0 35px rgba(124,58,237,.10) !important;
}

.brand strong{
  color:#24113f !important;
}

.brand small{
  color:#7c6f91 !important;
}

nav button{
  background:#ffffff !important;
  color:#24113f !important;
  border:1px solid rgba(124,58,237,.18) !important;
  box-shadow:0 8px 22px rgba(124,58,237,.08) !important;
}

nav button.active,
nav button:hover{
  background:linear-gradient(135deg,#7c3aed,#d946ef) !important;
  color:#fff !important;
}

header{
  background:#ffffff !important;
  border:1px solid rgba(124,58,237,.18) !important;
  box-shadow:0 18px 45px rgba(124,58,237,.12) !important;
}

.kpi{
  background:#ffffff !important;
  border:1px solid rgba(124,58,237,.16) !important;
  box-shadow:0 16px 35px rgba(124,58,237,.10) !important;
}

.form,
.tableWrap{
  background:#ffffff !important;
  color:#24113f !important;
}

/* ===== TABELA TEXTO ESCURO ===== */

.tableWrap{
  color:#24113f !important;
}

table th{
  color:#6b5f80 !important;
}

table td{
  color:#24113f !important;
  font-weight:500;
}

/* inputs da busca */
.toolbar input,
.toolbar select{
  color:#24113f !important;
  background:#ffffff !important;
  border:1px solid rgba(124,58,237,.25) !important;
}

/* placeholder */
.toolbar input::placeholder{
  color:#8b7fb3 !important;
}

/* mantém badges coloridas */
.badge{
  font-weight:800;
}

/* botões continuam bonitos */
td button{
  color:#fff !important;
}

/* hover da linha */
table tr:hover{
  background:rgba(124,58,237,.05);
  transition:.2s;
}

/* ===== TABS TEXTO PRETO ===== */

.tabs .tab{
  background:#ffffff !important;
  color:#24113f !important;
  border:1px solid rgba(124,58,237,.25) !important;
  font-weight:700;
  transition:.25s;
}

/* hover suave */
.tabs .tab:hover{
  background:rgba(124,58,237,.08) !important;
  color:#24113f !important;
}

/* aba ativa continua roxa com animação */
.tabs .tab.active{
  background:linear-gradient(135deg,#7c3aed,#d946ef) !important;
  color:#ffffff !important;
  box-shadow:0 8px 25px rgba(124,58,237,.35);
}

/* PERFIL USUÁRIO */
.topActions{
  position:relative;
}

.profileBox{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:999px;
  background:#ffffff;
  border:1px solid rgba(124,58,237,.25);
  color:#24113f;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 8px 25px rgba(124,58,237,.15);
  transition:.25s;
}

.profileBox:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 35px rgba(124,58,237,.25);
}

#userPhoto{
  width:34px;
  height:34px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #d946ef;
}

.profileMenu{
  display:none;
  position:absolute;
  right:0;
  top:62px;
  min-width:210px;
  padding:14px;
  border-radius:18px;
  background:#ffffff;
  border:1px solid rgba(124,58,237,.25);
  box-shadow:0 18px 45px rgba(124,58,237,.25);
  z-index:9999;
}

.profileMenu.showMenu{
  display:flex;
  flex-direction:column;
  gap:10px;
  animation:fadeUp .25s ease;
}

.photoUpload{
  background:#f6f4ff;
  color:#24113f;
  padding:12px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
  text-align:center;
  border:1px solid rgba(124,58,237,.2);
}

.photoUpload input{
  display:none;
}

.profileMenu .logoutBtn{
  width:100%;
  background:linear-gradient(135deg,#ef4444,#be123c);
  color:white;
}

/* NOME DO USUÁRIO PRETO */
.profileBox span{
  color:#24113f !important;
  font-weight:900;
}

.profileMenu{
  min-width:220px;
  border-radius:16px;
  padding:12px;
}

.profileMenu button{
  border-radius:12px;
  padding:10px;
  font-weight:800;
}

/* FIX MENU PERFIL (NÃO QUEBRAR LAYOUT) */
.profileBox{
  position: relative;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}

/* MENU DROPDOWN CORRETO */
.profileMenu{
  position:absolute;
  top:60px;
  right:0;
  width:220px;

  background:#fff;
  border-radius:16px;
  padding:12px;

  box-shadow:0 10px 30px rgba(0,0,0,0.15);

  display:none;
  flex-direction:column;
  gap:10px;

  z-index:9999; /* MUITO IMPORTANTE */
}

/* quando abrir */
.profileMenu.show{
  display:flex;
}

/* botão sair */
.profileMenu button{
  background:#ff4d4d;
  color:#fff;
  border:none;
  border-radius:10px;
  padding:10px;
  font-weight:bold;
  cursor:pointer;
}

/* botão alterar foto */
.photoUpload{
  background:#eee;
  padding:10px;
  border-radius:10px;
  text-align:center;
  cursor:pointer;
}

.photoUpload input{
  display:none;
}

/* LOGIN IGUAL AO LAYOUT PRINCIPAL */
.loginPage{
  min-height:100vh;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at top left,rgba(124,58,237,.16),transparent 35%),
    radial-gradient(circle at top right,rgba(217,70,239,.12),transparent 30%),
    linear-gradient(135deg,#ffffff,#f6f4ff) !important;
}

.loginBox{
  width:390px;
  padding:38px;
  border-radius:28px;
  background:#ffffff !important;
  border:1px solid rgba(124,58,237,.18);
  box-shadow:0 22px 60px rgba(124,58,237,.18);
  display:flex;
  flex-direction:column;
  gap:16px;
  animation:fadeUp .5s ease;
}

.loginBox h2{
  margin-bottom:12px;
  text-align:center;
  font-size:30px;
  color:#24113f !important;
}

.loginBox h2::after{
  content:"";
  display:block;
  width:70px;
  height:4px;
  margin:12px auto 0;
  border-radius:999px;
  background:linear-gradient(135deg,#7c3aed,#d946ef);
}

.loginBox input{
  background:#ffffff !important;
  color:#24113f !important;
  border:1px solid rgba(124,58,237,.22);
  border-radius:16px;
  padding:14px;
  font-weight:600;
  outline:none;
}

.loginBox input:focus{
  border-color:#7c3aed;
  box-shadow:0 0 0 4px rgba(124,58,237,.12);
}

.loginBox button{
  margin-top:8px;
  padding:14px;
  border-radius:16px;
  background:linear-gradient(135deg,#7c3aed,#d946ef);
  color:#fff;
  font-weight:900;
  box-shadow:0 12px 35px rgba(124,58,237,.28);
}

/* LOGIN COM MARCA */
.loginPage{
  min-height:100vh;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#ffffff,#f6f4ff);
}

.loginLayout{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:40px;
  max-width:1050px;
  width:90%;
}

.loginImageBox{
  background:#fff;
  border-radius:30px;
  padding:35px;
  box-shadow:0 25px 70px rgba(124,58,237,.16);
  border:1px solid rgba(124,58,237,.15);
}

.loginImageBox img{
  width:100%;
  display:block;
  border-radius:22px;
}

.loginBox{
  background:#fff;
  border-radius:28px;
  padding:38px;
  box-shadow:0 25px 70px rgba(124,58,237,.18);
  border:1px solid rgba(124,58,237,.18);
}

.loginBox h2{
  color:#24113f;
  text-align:center;
  margin-bottom:25px;
  font-size:28px;
}

.loginBox input{
  background:#fff;
  color:#24113f;
  border:1px solid rgba(124,58,237,.25);
  border-radius:16px;
  padding:14px;
  margin-bottom:14px;
}

.loginBox button{
  width:100%;
  padding:14px;
  border-radius:16px;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  color:#fff;
  font-weight:900;
}

@media(max-width:850px){
  .loginLayout{
    grid-template-columns:1fr;
  }

  .loginImageBox{
    padding:20px;
  }
}

.loginImageBox{
  height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.loginImageBox img{
  width:100%;
  max-width:520px;
  height:auto;
  object-fit:contain;
}
.loginImageBox{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
}

.loginImageBox img{
  width:100%;
  max-width:520px;
}

.loginImageBox {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loginImageBox img {
    width: 100%;
    max-width: 550px; /* AUMENTA AQUI */
    height: auto;
    transform: scale(1.1); /* leve zoom */
}
.loginImageBox img {
    width: 110%;
    max-width: 650px;
    height: auto;
    transform: scale(1.15);
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.15));
}

.logoBox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
}

.logoBox img {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(124,58,237,0.3);
}

.logoBox h2 {
    font-size: 20px;
    font-weight: 700;
    color: #2d1b4e;
}

.logoBox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 25px 20px;
}

.logoBox img {
    width: 60px;
    margin-bottom: 10px;
}

.logoBox h2 {
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(90deg, #7c3aed, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logoBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 10px;
}

.logoBox img {
    width: 140px;   /* TAMANHO GRANDE */
    height: auto;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(124,58,237,0.25);
    margin-bottom: 10px;
}

.logoBox h2 {
    font-size: 22px;
    font-weight: 800;
    color: #7c3aed;
    text-align: center;
}
.logoBox img {
    width: 180px;
}
.logoBox img {
    width: 160px;
    transition: 0.3s;
}

.logoBox img:hover {
    transform: scale(1.05);
}

.logoBox .sidebarLogo {
  display: block !important;
  width: 230px !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto 12px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
}

/* WHATSAPP PREMIUM */
.waPremiumGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:28px;
}

/* 🔴 BADGE CONTADOR */
.badge {
  background: #ff3b3b;
  color: white;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  font-weight: bold;
}

.waConnectCard,
.waInfoCard{
  background:linear-gradient(135deg,#ffffff,#f7f2ff);
  border:1px solid rgba(124,58,237,.18);
  border-radius:28px;
  padding:28px;
  box-shadow:0 25px 60px rgba(124,58,237,.14);
}

.waHeader{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}

.waHeader h2,
.waInfoCard h2{
  color:#210b3b;
  font-size:26px;
  margin:0 0 8px;
}

.waHeader p,
.waInfoCard p{
  color:#6b5b7c;
  font-size:15px;
}

.waIcon{
  width:46px;
  height:46px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  box-shadow:0 15px 35px rgba(34,197,94,.28);
  margin-bottom:14px;
}

.waBadge{
  padding:10px 16px;
  border-radius:999px;
  font-weight:900;
  font-size:13px;
}

.waBadge.online{
  background:#dcfce7;
  color:#15803d;
}

.waBadge.offline{
  background:#fee2e2;
  color:#b91c1c;
}

.waQrArea{
  min-height:290px;
  margin:24px 0 18px;
  border-radius:26px;
  background:radial-gradient(circle at top,#ede9fe,#ffffff 60%);
  border:1px dashed rgba(124,58,237,.28);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.waQrArea::before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  background:rgba(168,85,247,.16);
  filter:blur(35px);
  border-radius:50%;
}

.waQrCode{
  width:260px;
  height:260px;
  object-fit:contain;
  background:#fff;
  padding:14px;
  border-radius:22px;
  box-shadow:0 20px 50px rgba(124,58,237,.22);
  z-index:1;
}

.waQrPlaceholder{
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  color:#7c3aed;
  font-weight:900;
  gap:8px;
}

.waQrPlaceholder strong{
  font-size:28px;
}

.waQrPlaceholder span{
  color:#7c6b96;
  font-size:14px;
}

.waStatusText{
  font-weight:800;
  color:#2d164d;
  margin-bottom:18px;
}

.waActions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.waBtn{
  border:none;
  border-radius:16px;
  padding:13px 18px;
  font-weight:900;
  cursor:pointer;
  transition:.25s;
}

.waBtn:hover{
  transform:translateY(-2px);
}

.waBtn.primary{
  color:white;
  background:linear-gradient(135deg,#2563eb,#a855f7);
  box-shadow:0 15px 35px rgba(124,58,237,.28);
}

.waBtn.danger{
  color:white;
  background:linear-gradient(135deg,#ef4444,#be123c);
  box-shadow:0 15px 35px rgba(239,68,68,.22);
}

.waStep{
  display:flex;
  gap:14px;
  align-items:center;
  padding:18px;
  border-radius:20px;
  background:white;
  border:1px solid rgba(124,58,237,.12);
  margin-top:14px;
}

.waStep span{
  min-width:38px;
  height:38px;
  border-radius:14px;
  background:linear-gradient(135deg,#7c3aed,#d946ef);
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

.waStep p{
  margin:0;
  color:#2d164d;
  font-weight:700;
}

@media(max-width:900px){
  .waPremiumGrid{
    grid-template-columns:1fr;
  }
}

.popupWhatsApp {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 360px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, #ffffff, #f7efff);
  border: 1px solid rgba(124, 58, 237, .25);
  box-shadow: 0 30px 80px rgba(124, 58, 237, .35);
  z-index: 99999;
  animation: popupIn .35s ease;
}

.popupIcon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 15px 35px rgba(34, 197, 94, .35);
}

.popupContent strong {
  display: block;
  color: #210b3b;
  font-size: 16px;
  margin-bottom: 4px;
}

.popupContent span {
  display: block;
  color: #7c3aed;
  font-weight: 900;
  margin-bottom: 6px;
}

.popupContent p {
  margin: 0;
  color: #4c1d95;
  font-size: 14px;
  line-height: 1.4;
}

.popupWhatsApp button {
  margin-left: auto;
  border: none;
  background: #fee2e2;
  color: #be123c;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
}

@keyframes popupIn {
  from {
    transform: translateY(25px) scale(.96);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.helpdeskModal{
  position:fixed;
  inset:0;
  background:rgba(15, 6, 34, .65);
  backdrop-filter:blur(8px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
  padding:24px;
}

.helpdeskModal.show{
  display:flex;
}

.helpdeskModalBox{
  width:min(1000px, 96vw);
  height:min(820px, 92vh);
  background:white;
  border-radius:30px;
  overflow:hidden;
  position:relative;
  box-shadow:0 40px 100px rgba(0,0,0,.35);
}

.helpdeskModalBox iframe{
  width:100%;
  height:100%;
  border:none;
}

.helpdeskClose{
  position:absolute;
  top:16px;
  right:18px;
  z-index:2;
  width:42px;
  height:42px;
  border:none;
  border-radius:999px;
  background:#ef4444;
  color:white;
  font-size:28px;
  font-weight:900;
  cursor:pointer;
}

.menuButton {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid #cbb4ff;
  background: #fff;
  color: #2b1d4f;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: 0.3s;
}

.menuButton:hover {
  background: linear-gradient(90deg, #7b2ff7, #f107a3);
  color: #fff;
}

.menuButton.active {
  background: linear-gradient(90deg, #7b2ff7, #f107a3);
  color: white;
  border: none;
}

body {
  padding-top: 70px;
  margin: 0;
  padding: 0;
}

.headerHelpdesk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.headerLeft {
  flex: 1;
}

.headerCenter {
  flex: 2;
  text-align: center;
}

.btnBack {
  background: linear-gradient(90deg, #7b2ff7, #f107a3);
  border: none;
  padding: 10px 18px;
  border-radius: 12px;
  color: white;
  cursor: pointer;
  font-weight: 600;
  transition: 0.3s;
}

.btnBack:hover {
  transform: scale(1.05);
}

body {
  margin: 0;
  padding: 0;
}

header {
  margin-top: 0;
  padding-top: 20px;
}

main {
  margin-top: 0 !important;
}

header {
  margin-top: 0 !important;
}

.waPanel{
  background:linear-gradient(135deg,#ffffff,#f8f5ff);
  border-radius:24px;
  padding:24px;
  box-shadow:0 20px 60px rgba(124,58,237,.15);
}

#waMessagesList{
  max-height:300px;
  overflow:auto;
  margin:15px 0;
}

.waMsg{
  background:#fff;
  border-radius:14px;
  padding:12px;
  margin-bottom:10px;
  box-shadow:0 5px 15px rgba(0,0,0,.05);
}

.openWaBtn{
  width:100%;
  border:none;
  padding:14px;
  border-radius:12px;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;
  font-weight:bold;
  cursor:pointer;
}

.tableWrap {
  width: 100%;
  overflow-x: auto;
}

.tableWrap table {
  min-width: 1050px;
  width: 100%;
}

#whatsapp .tableWrap {
  
  max-width: 100%;
}

#whatsapp td,
#whatsapp th {
  white-space: normal;
}

#whatsapp td:nth-child(4) {
  max-width: 280px;
  word-break: break-word;
}





.dashboardGrid {
  display: grid;
  grid-template-columns: 1fr; /* ocupa tudo */
}
#whatsapp {
  width: 100%;
}

#whatsapp .tableWrap {
  width: 100%;
}

#whatsapp table {
  width: 100%;
}
.container {
  width: 100%;
  max-width: 100%;
  padding: 20px 30px;
}
#whatsapp {
  background: linear-gradient(135deg,#ffffff,#f8f5ff);
  border-radius: 24px;
  padding: 30px;
}

/* =========================================================
   CORREÇÕES FINAIS - LAYOUT SAAS / WHATSAPP / TABELAS
   Este bloco deve ficar no FINAL do arquivo.
   Ele sobrescreve duplicações antigas sem quebrar o design.
========================================================= */

/* BASE */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  display: flex !important;
  align-items: stretch;
  background:
    radial-gradient(circle at top left, rgba(124,58,237,.16), transparent 35%),
    radial-gradient(circle at top right, rgba(217,70,239,.12), transparent 30%),
    linear-gradient(135deg, #ffffff, #f6f4ff) !important;
  color: #24113f !important;
}

/* SIDEBAR */
aside {
  width: 260px !important;
  min-width: 260px !important;
  min-height: 100vh !important;
  background: #ffffff !important;
  border-right: 1px solid rgba(124,58,237,.15) !important;
  box-shadow: 12px 0 35px rgba(124,58,237,.10) !important;
}

/* MAIN OCUPANDO TODO O RESTANTE */
main {
  flex: 1 1 auto !important;
  width: calc(100vw - 260px) !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 30px 30px 30px !important;
}

/* HEADER */
header {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 24px 0 !important;
  padding: 22px !important;
  border-radius: 28px !important;
  background: #ffffff !important;
  border: 1px solid rgba(124,58,237,.18) !important;
  box-shadow: 0 18px 45px rgba(124,58,237,.12) !important;
}

/* VIEWS */
.view {
  display: none;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.view.active {
  display: block !important;
}

/* GRID DO DASHBOARD */
.kpis,
.grid {
  width: 100% !important;
  max-width: none !important;
}

/* CARD/TABELA PADRÃO */
.tableWrap {
  width: 100% !important;
  max-width: none !important;
  overflow-x: auto !important;
  overflow-y: hidden;
  padding: 28px !important;
  border-radius: 28px !important;
  background: #ffffff !important;
  color: #24113f !important;
  border: 1px solid rgba(124,58,237,.16) !important;
  box-shadow: 0 22px 60px rgba(124,58,237,.12) !important;
}

/* TABELAS */
.tableWrap table {
  width: 100% !important;
  min-width: 1050px;
  border-collapse: collapse;
}

.tableWrap th,
.tableWrap td {
  color: #24113f !important;
  border-bottom: 1px solid rgba(124,58,237,.10) !important;
  vertical-align: top;
}

.tableWrap th {
  color: #6b5f80 !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .7px;
}

/* WHATSAPP - OCUPAR TUDO */
#whatsapp {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

#whatsapp .tableWrap {
  width: 100% !important;
  max-width: none !important;
  margin-top: 28px;
}

#whatsapp .tableWrap table {
  width: 100% !important;
  min-width: 1250px !important;
}

#whatsapp td:nth-child(4),
#whatsapp th:nth-child(4) {
  max-width: 360px;
  white-space: normal !important;
  word-break: break-word;
}

/* ÁREA PREMIUM DO WHATSAPP */
.waPremiumGrid {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: minmax(420px, 1fr) minmax(420px, 1fr) !important;
  gap: 24px !important;
  margin-bottom: 28px !important;
}

.waConnectCard,
.waInfoCard,
.waPanel {
  width: 100% !important;
  min-width: 0 !important;
}

/* BADGE CONTADOR NO MENU */
.badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 2px 8px !important;
  margin-left: 8px;
  border-radius: 999px !important;
  background: #ff3b3b !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1;
}

/* BOTÕES DA TABELA */
td button,
.iconBtn {
  white-space: nowrap;
  color: #ffffff !important;
}

/* MENU LINK, CASO USE A */
.menuButton {
  display: block !important;
  width: 100% !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(124,58,237,.18) !important;
  background: #ffffff !important;
  color: #24113f !important;
  font-weight: 800 !important;
  text-align: left !important;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(124,58,237,.08) !important;
  transition: .25s;
}

.menuButton:hover,
.menuButton.active {
  background: linear-gradient(135deg,#7c3aed,#d946ef) !important;
  color: #ffffff !important;
  transform: translateX(5px);
  box-shadow: 0 12px 35px rgba(139,92,246,.35) !important;
}

/* POPUP WHATSAPP */
.popupWhatsApp {
  z-index: 99999 !important;
}

/* RESPONSIVO */
@media (max-width: 1000px) {
  body {
    flex-direction: column !important;
  }

  aside {
    width: 100% !important;
    min-width: 100% !important;
    min-height: auto !important;
  }

  main {
    width: 100% !important;
    padding: 0 18px 24px 18px !important;
  }

  .waPremiumGrid {
    grid-template-columns: 1fr !important;
  }

  .tableWrap table,
  #whatsapp .tableWrap table {
    min-width: 1000px !important;
  }
}

@media (max-width: 600px) {
  main {
    padding: 0 12px 20px 12px !important;
  }

  header {
    border-radius: 22px !important;
  }

  .tableWrap {
    padding: 18px !important;
  }
}

/* FIX SEGURO - NÃO QUEBRA AS OUTRAS TELAS */
.view {
  display: none;
}

.view.active {
  display: block;
}

/* Apenas tabela do WhatsApp com rolagem */
#whatsapp .tableWrap {
  width: 100%;
  overflow-x: auto;
}

#whatsapp table {
  min-width: 1200px;
  width: 100%;
}

#whatsapp td:nth-child(4) {
  max-width: 350px;
  word-break: break-word;
  white-space: normal;
}

/* WhatsApp ocupar tela inteira */
#whatsapp .dashboardGrid {
  display: block !important;
}

/* Card ocupar 100% */
#whatsapp .card {
  width: 100% !important;
  max-width: 100% !important;
}

/* Container principal expandido */
#whatsapp {
  width: 100%;
}

/* 🔥 WhatsApp FULL WIDTH REAL */
#whatsapp {
  width: 100% !important;
}

/* remove limite de largura do container */
#whatsapp main,
#whatsapp .content,
#whatsapp .container {
  max-width: 100% !important;
  width: 100% !important;
}

/* card ocupa tudo */
#whatsapp .card {
  width: 100% !important;
  max-width: 100% !important;
}

/* tabela ocupa tudo */
#whatsapp table {
  width: 100% !important;
}

/* remove qualquer grid herdado */
#whatsapp .dashboardGrid {
  display: block !important;
}

/* TABELA WHATSAPP OCUPAR AS 2 COLUNAS */
#whatsapp .waPremiumGrid .tableWrap {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Se a tabela estiver fora do grid, também garante largura total */
#whatsapp > .tableWrap {
  width: 100% !important;
  max-width: 100% !important;
}

/* tabela interna */
#whatsapp .tableWrap table {
  width: 100% !important;
  min-width: 1200px !important;
}

/* 🔥 REMOVE SCROLL LATERAL */
#whatsapp .tableWrap table {
  min-width: 100% !important;
  width: 100% !important;
  table-layout: fixed;
}

/* quebra texto automaticamente */
#whatsapp td,
#whatsapp th {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/* largura equilibrada por coluna */
#whatsapp th:nth-child(1),
#whatsapp td:nth-child(1) { width: 5%; }   /* ID */

#whatsapp th:nth-child(2),
#whatsapp td:nth-child(2) { width: 12%; }  /* Telefone */

#whatsapp th:nth-child(3),
#whatsapp td:nth-child(3) { width: 12%; }  /* Nome */

#whatsapp th:nth-child(4),
#whatsapp td:nth-child(4) { width: 30%; }  /* Mensagem */

#whatsapp th:nth-child(5),
#whatsapp td:nth-child(5) { width: 10%; }  /* Status */

#whatsapp th:nth-child(6),
#whatsapp td:nth-child(6) { width: 15%; }  /* Data */

#whatsapp th:nth-child(7),
#whatsapp td:nth-child(7) { width: 16%; }  /* Ações */

/* botões não quebrarem layout */
#whatsapp td:last-child {
  white-space: nowrap;
}

/* opcional: reduzir botões */
#whatsapp .actions button {
  padding: 6px 10px;
  font-size: 12px;
}

/* WHATSAPP - ENCAIXAR TABELA SEM CORTAR */
#whatsapp .tableWrap {
  overflow-x: hidden !important;
}

#whatsapp table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}

#whatsapp th,
#whatsapp td {
  padding: 12px 10px !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

/* larguras das colunas */
#whatsapp th:nth-child(1),
#whatsapp td:nth-child(1) {
  width: 5% !important;
  white-space: nowrap !important;
}

#whatsapp th:nth-child(2),
#whatsapp td:nth-child(2) {
  width: 13% !important;
}

#whatsapp th:nth-child(3),
#whatsapp td:nth-child(3) {
  width: 12% !important;
}

#whatsapp th:nth-child(4),
#whatsapp td:nth-child(4) {
  width: 28% !important;
}

#whatsapp th:nth-child(5),
#whatsapp td:nth-child(5) {
  width: 10% !important;
}

#whatsapp th:nth-child(6),
#whatsapp td:nth-child(6) {
  width: 12% !important;
}

#whatsapp th:nth-child(7),
#whatsapp td:nth-child(7) {
  width: 20% !important;
}

/* botões das ações quebram em linha nova sem cortar */
#whatsapp td:nth-child(7) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

#whatsapp td:nth-child(7) button {
  padding: 9px 12px !important;
  font-size: 13px !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* diminuir botão excluir se estiver cortando */
#whatsapp td:nth-child(7) .danger {
  padding: 9px 11px !important;
}

.menuGroup {
  display: grid;
  gap: 8px;
}

.menuParent {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.submenu {
  display: none;
  gap: 8px;
  padding-left: 14px;
}

.submenu.open {
  display: grid;
}

.submenu button {
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 16px;
}

.menuGroup {
  display: grid;
  gap: 8px;
}

.menuParent {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

.submenu {
  display: none;
  gap: 8px;
  padding-left: 16px;
}

.menuGroup.open .submenu {
  display: grid;
}

.submenu button {
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 16px;
}

.tableWrap {
  min-height: 720px;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
}

.pagination button {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 10px;
  background: #ffffff;
  color: #24113f;
  border: 1px solid rgba(124,58,237,.25);
  box-shadow: none;
}

.pagination button.active {
  background: #4b5563;
  color: #ffffff;
}

.pagination button:hover {
  background: linear-gradient(135deg,#7c3aed,#d946ef);
  color: #ffffff;
}

.userButtons{
  display:flex;
  gap:12px;
  margin-top:12px;
}

.userStatus{
  margin-top:10px;
  padding:6px 14px;
  border-radius:20px;
  font-size:12px;
  font-weight:700;
  width:max-content;
}

.userStatus.on{
  background:#dcfce7;
  color:#166534;
}

.userStatus.off{
  background:#fee2e2;
  color:#991b1b;
}

.btnOff{
  background:linear-gradient(135deg,#ef4444,#dc2626)!important;
}

.btnOn{
  background:linear-gradient(135deg,#22c55e,#16a34a)!important;
}

/*============STATUS CHAMADO ======== */

.statusCards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 22px;
}

.statusCard {
  padding: 18px;
  border-radius: 4px;
  cursor: pointer;
  min-height: 95px;
  color: white;
  transition: .25s;
}

.statusCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0,0,0,.18);
}

.statusCard strong {
  display: block;
  font-size: 36px;
  line-height: 1;
}

.statusCard span {
  display: block;
  margin-top: 10px;
  font-weight: 700;
}

.statusCard.total { background: #facc15; color: #5b3b00; }
.statusCard.novo { background: #22c55e; }
.statusCard.andamento { background: #db2777; }
.statusCard.concluido { background: #84cc16; color: #102a00; }
.statusCard.atrasado { background: #f97316; }

@media(max-width: 900px) {
  .statusCards {
    grid-template-columns: 1fr 1fr;
  }
}

.statusCards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}

/* mantém os gráficos no layout certo */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.chartBox {
  min-height: 340px;
}

.chartBox canvas {
  width: 100% !important;
  height: 280px !important;
}

/* ===== FIX DASHBOARD / GRÁFICOS ===== */

.statusCards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 24px !important;
}

.grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(320px, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 100% !important;
  align-items: stretch !important;
}

.chartBox {
  width: 100% !important;
  min-width: 0 !important;
  height: 360px !important;
  min-height: 360px !important;
  padding: 26px !important;
  border-radius: 28px !important;
  overflow: hidden !important;
}

.chartBox canvas {
  display: block !important;
  width: 100% !important;
  height: 280px !important;
  max-width: 100% !important;
}

.chartBox h3 {
  margin: 0 0 16px 0 !important;
  white-space: normal !important;
}

/* se algum CSS antigo deixou card estreito */
#dashboard .grid > * {
  width: 100% !important;
  max-width: 100% !important;
}

/* responsivo */
@media (max-width: 1200px) {
  .grid {
    grid-template-columns: repeat(2, minmax(320px, 1fr)) !important;
  }
}

@media (max-width: 800px) {
  .statusCards,
  .grid {
    grid-template-columns: 1fr !important;
  }
}

/* CORES FINAIS DOS STATUS DOS CHAMADOS */
.badge.Pendente {
  background: #ef4444 !important;
  color: #fff !important;
}

.badge.Concluido,
.badge.Concluído {
  background: #22c55e !important;
  color: #fff !important;
}

/* NOVO CHAMADO EM TELA ÚNICA */
#ticketForm {
  display: block !important;
}

#ticketForm .tabContent {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(180px, 1fr)) !important;
  gap: 16px 20px !important;
  padding: 0 0 24px 0 !important;
  margin: 0 0 24px 0 !important;
  border-bottom: 1px solid rgba(124,58,237,.14) !important;
}

#ticketForm .tabContent:last-of-type {
  border-bottom: 0 !important;
  margin-bottom: 0 !important;
}

#ticketForm .ticketSectionTitle {
  grid-column: 1 / -1 !important;
  margin: 4px 0 0 0 !important;
  color: #24113f !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

#ticketForm .wide {
  grid-column: 1 / -1 !important;
}

#ticketForm textarea {
  min-height: 92px !important;
}

#ticketForm .financialHeader,
#ticketForm .financialItemRow {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 1.4fr) minmax(130px, .6fr) minmax(150px, .7fr) auto !important;
  gap: 14px !important;
  align-items: end !important;
}

#ticketForm .financialHeader {
  color: #6b5f80 !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  margin-bottom: -6px !important;
}

#ticketForm .financialItems {
  grid-column: 1 / -1 !important;
  display: grid !important;
  gap: 12px !important;
}

#ticketForm .addItemBtn {
  width: max-content !important;
}

#ticketForm .removeItemBtn {
  height: 54px !important;
  padding: 0 16px !important;
}

#ticketForm .secondary,
#ticketForm #clearBtn {
  background: linear-gradient(135deg,#7c3aed,#d946ef) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 14px 35px rgba(124,58,237,.28) !important;
}

#ticketForm #clearBtn {
  min-width: 126px !important;
}

@media (max-width: 1100px) {
  #ticketForm .tabContent {
    grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
  }

  #ticketForm .financialHeader {
    display: none !important;
  }

  #ticketForm .financialItemRow {
    grid-template-columns: 1fr 1fr !important;
  }

  #ticketForm .financialItemRow [data-financial="item"],
  #ticketForm .financialItemRow .removeItemBtn {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 700px) {
  #ticketForm .tabContent {
    grid-template-columns: 1fr !important;
  }

  #ticketForm .financialItemRow {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   TEMA RETRO 16-BIT - ROXO E BRANCO
   Inspirado em estética gótica pixel art, sem usar assets externos.
========================================================= */
:root {
  --retro-ink: #1b0738;
  --retro-ink-2: #2f0a62;
  --retro-purple: #7c2cff;
  --retro-purple-2: #b44cff;
  --retro-purple-dark: #3a0872;
  --retro-lavender: #efe6ff;
  --retro-white: #fffaff;
  --retro-line: #6d28d9;
  --retro-shadow: #260052;
}

html,
body {
  font-family: "Lucida Console", "Courier New", monospace !important;
  color: var(--retro-ink) !important;
  background-color: var(--retro-lavender) !important;
  background-image:
    linear-gradient(45deg, rgba(124,44,255,.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(124,44,255,.08) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(124,44,255,.08) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(124,44,255,.08) 75%) !important;
  background-size: 18px 18px !important;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0 !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.08) 0,
    rgba(255,255,255,.08) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: multiply;
}

aside,
header,
.form,
.tableWrap,
.kpi,
article,
.waCard,
.waMessagesPanel,
.userCard,
.profileMenu,
.popupWhatsApp,
.helpdeskModalBox {
  background: var(--retro-white) !important;
  border: 3px solid var(--retro-line) !important;
  border-radius: 0 !important;
  box-shadow: 8px 8px 0 var(--retro-shadow) !important;
}

aside {
  border-width: 0 3px 0 0 !important;
  box-shadow: 8px 0 0 var(--retro-shadow) !important;
}

.logoBox {
  border-bottom: 3px double var(--retro-line) !important;
  margin-bottom: 18px !important;
  padding-bottom: 20px !important;
}

.logoBox .sidebarLogo {
  width: 238px !important;
  image-rendering: auto !important;
}

h1,
h2,
h3,
.ticketSectionTitle,
th,
label,
.kpi span {
  color: var(--retro-ink) !important;
  font-family: "Lucida Console", "Courier New", monospace !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: 2px 2px 0 rgba(180,76,255,.18) !important;
}

header p,
td,
.kpi strong,
.waStatusText,
.userRole {
  color: var(--retro-ink-2) !important;
}

button,
.iconBtn,
td button,
.waBtn,
.tab,
.menuButton,
.pagination button,
#ticketForm .secondary,
#ticketForm #clearBtn {
  font-family: "Lucida Console", "Courier New", monospace !important;
  font-weight: 900 !important;
  color: var(--retro-white) !important;
  background: var(--retro-purple) !important;
  border: 3px solid var(--retro-ink) !important;
  border-radius: 0 !important;
  box-shadow: 5px 5px 0 var(--retro-shadow) !important;
  text-shadow: 2px 2px 0 var(--retro-purple-dark) !important;
  transform: none !important;
}

button:hover,
.iconBtn:hover,
td button:hover,
.waBtn:hover,
.pagination button:hover {
  background: var(--retro-purple-2) !important;
  box-shadow: 3px 3px 0 var(--retro-shadow) !important;
  transform: translate(2px, 2px) !important;
}

nav button,
.submenu button {
  background: var(--retro-white) !important;
  color: var(--retro-ink) !important;
  border: 3px solid var(--retro-line) !important;
  border-radius: 0 !important;
  box-shadow: 5px 5px 0 rgba(38,0,82,.35) !important;
  text-align: left !important;
  text-shadow: none !important;
}

nav button.active,
nav button:hover,
.submenu button:hover {
  background: var(--retro-purple) !important;
  color: var(--retro-white) !important;
  border-color: var(--retro-ink) !important;
  text-shadow: 2px 2px 0 var(--retro-purple-dark) !important;
}

input,
select,
textarea {
  font-family: "Lucida Console", "Courier New", monospace !important;
  background: #ffffff !important;
  color: var(--retro-ink) !important;
  border: 3px solid #b794ff !important;
  border-radius: 0 !important;
  box-shadow: inset 4px 4px 0 rgba(124,44,255,.10) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--retro-purple) !important;
  box-shadow:
    inset 4px 4px 0 rgba(124,44,255,.16),
    4px 4px 0 var(--retro-shadow) !important;
}

.tableWrap {
  padding: 0 !important;
}

table {
  border-collapse: collapse !important;
  background: var(--retro-white) !important;
}

th {
  background: var(--retro-purple-dark) !important;
  color: var(--retro-white) !important;
  border-bottom: 3px solid var(--retro-ink) !important;
  text-shadow: 2px 2px 0 #120024 !important;
}

td {
  border-bottom: 2px solid #decaff !important;
}

tr:hover {
  background: #f3eaff !important;
}

.badge {
  border: 2px solid var(--retro-ink) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 rgba(38,0,82,.28) !important;
  font-family: "Lucida Console", "Courier New", monospace !important;
  text-shadow: none !important;
}

.badge.Pendente {
  background: #ef4444 !important;
  color: #fff !important;
}

.badge.Concluido,
.badge.Concluído {
  background: #22c55e !important;
  color: #fff !important;
}

.grid article,
.chartBox {
  min-height: 340px !important;
}

canvas,
img {
  image-rendering: auto;
}

.view {
  animation: retroStepIn .18s steps(3, end);
}

@keyframes retroStepIn {
  from {
    opacity: .4;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 850px) {
  aside {
    border-width: 0 0 3px 0 !important;
    box-shadow: 0 8px 0 var(--retro-shadow) !important;
  }

  .logoBox .sidebarLogo {
    width: min(238px, 82vw) !important;
  }
}

/* =========================================================
   REFORÇO GÓTICO 16-BIT - CASTELO NOTURNO / VITRAL / LUA
========================================================= */
:root {
  --goth-black: #100018;
  --goth-violet: #24003f;
  --goth-purple: #5b16bd;
  --goth-neon: #c044ff;
  --goth-silver: #f7f0ff;
  --goth-mist: #dac7ff;
  --goth-wine: #8f174e;
}

body {
  background-color: #160020 !important;
  background-image:
    radial-gradient(circle at 84% 8%, #fff8ff 0 38px, #d8c6ff 39px 45px, transparent 46px),
    linear-gradient(to bottom, rgba(16,0,24,.05), rgba(16,0,24,.42)),
    repeating-linear-gradient(90deg, rgba(192,68,255,.08) 0 2px, transparent 2px 18px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 2px, transparent 2px 18px),
    linear-gradient(135deg, #210039, #efe6ff 48%, #1a002c) !important;
}

body::after {
  content: "";
  position: fixed;
  right: 0;
  bottom: 0;
  width: min(680px, 54vw);
  height: 260px;
  pointer-events: none;
  z-index: -1;
  opacity: .34;
  background:
    linear-gradient(to top, var(--goth-black) 0 34px, transparent 34px),
    linear-gradient(to top, transparent 0 72px, var(--goth-black) 72px 150px, transparent 150px),
    linear-gradient(to top, transparent 0 28px, var(--goth-black) 28px 210px, transparent 210px),
    linear-gradient(to top, transparent 0 48px, var(--goth-black) 48px 180px, transparent 180px);
  background-size: 100% 100%, 76px 100%, 112px 100%, 54px 100%;
  background-position: left bottom, 40px bottom, 158px bottom, 302px bottom;
  background-repeat: repeat-x;
  clip-path: polygon(
    0 100%, 0 62%, 5% 62%, 5% 43%, 10% 43%, 10% 62%,
    18% 62%, 18% 30%, 23% 14%, 28% 30%, 28% 62%,
    38% 62%, 38% 48%, 42% 48%, 42% 62%,
    52% 62%, 52% 24%, 58% 0, 64% 24%, 64% 62%,
    76% 62%, 76% 38%, 82% 20%, 88% 38%, 88% 62%,
    100% 62%, 100% 100%
  );
}

aside,
header,
.form,
.tableWrap,
.kpi,
article,
.waCard,
.waMessagesPanel,
.userCard {
  border-image: linear-gradient(135deg, var(--goth-silver), var(--goth-neon), var(--goth-purple), var(--goth-silver)) 1 !important;
  outline: 2px solid rgba(16,0,24,.82) !important;
  outline-offset: -8px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(247,240,255,.92)),
    repeating-linear-gradient(45deg, rgba(91,22,189,.06) 0 5px, transparent 5px 12px) !important;
}

header::before,
.form::before,
.tableWrap::before,
article::before,
.kpi::before {
  content: "";
  display: block;
  height: 10px;
  margin: -10px -10px 14px;
  background:
    linear-gradient(90deg, transparent 0 3%, var(--goth-purple) 3% 7%, transparent 7% 11%),
    repeating-linear-gradient(90deg, var(--goth-violet) 0 16px, var(--goth-neon) 16px 18px, var(--goth-violet) 18px 34px);
  border-bottom: 3px solid var(--goth-black);
}

nav button {
  position: relative !important;
  padding-left: 34px !important;
}

nav button::before {
  content: "◆";
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--goth-neon);
  text-shadow: 2px 2px 0 var(--goth-black);
}

nav button.active::before,
nav button:hover::before {
  color: var(--goth-silver);
}

button,
.iconBtn,
td button,
.waBtn,
#ticketForm .secondary,
#ticketForm #clearBtn {
  background:
    linear-gradient(180deg, #d85cff 0, #842cff 48%, #3b0878 49%, #5b16bd 100%) !important;
  border-color: #180028 !important;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.38),
    inset 0 -4px 0 rgba(16,0,24,.45),
    5px 5px 0 #210039 !important;
}

button:hover,
.iconBtn:hover,
td button:hover,
.waBtn:hover {
  background:
    linear-gradient(180deg, #fff0ff 0, #c044ff 44%, #5b16bd 45%, #3a0872 100%) !important;
}

input,
select,
textarea {
  background:
    linear-gradient(180deg, #ffffff, #f2e8ff) !important;
  border-color: #8b5cf6 !important;
}

th {
  background:
    linear-gradient(180deg, #3a0872, #160020) !important;
  color: #fff8ff !important;
}

.kpi strong,
#pageTitle,
.ticketSectionTitle,
header h1 {
  color: var(--goth-purple) !important;
  text-shadow:
    2px 2px 0 #fff,
    4px 4px 0 rgba(91,22,189,.22) !important;
}

.badge {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.32),
    3px 3px 0 rgba(16,0,24,.38) !important;
}

.badge.Critica,
.badge.Crítica,
.badge.overdue {
  background: var(--goth-wine) !important;
  color: #fff8ff !important;
}

.profileBox,
#userName {
  border: 3px solid var(--goth-purple) !important;
  border-radius: 0 !important;
  background: #fff8ff !important;
  box-shadow: 4px 4px 0 rgba(16,0,24,.45) !important;
}

.popupWhatsApp {
  border: 3px double var(--goth-neon) !important;
  background: #fff8ff !important;
}

/* =========================================================
   REFERÊNCIAS SOTN DO USUÁRIO - CATEDRAL / VITRAL / FONTE
   Asset original gerado: assets/retro-cathedral-bg.png
   As referencias do usuario serviram apenas como direcao visual.
========================================================= */
body {
  background-color: #080010 !important;
  background-image:
    linear-gradient(180deg, rgba(8,0,16,.12), rgba(8,0,16,.78)),
    radial-gradient(circle at 50% 18%, rgba(255,245,255,.20), transparent 34%),
    url("assets/retro-cathedral-bg.png") !important;
  background-size: cover, cover, cover !important;
  background-position: center, center, center !important;
  background-attachment: fixed, fixed, fixed !important;
  image-rendering: pixelated !important;
}

body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: .42 !important;
  background-image:
    linear-gradient(90deg, rgba(8,0,16,.74), transparent 18%, transparent 82%, rgba(8,0,16,.74)),
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.18), transparent 28%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 2px, transparent 2px 11px) !important;
  background-size: cover, cover, auto !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  mix-blend-mode: multiply !important;
}

body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 999999 !important;
  opacity: .22 !important;
  background-image:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.18) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(192,68,255,.16), transparent 22%, transparent 78%, rgba(192,68,255,.16)),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.16), transparent 36%) !important;
  background-size: auto, cover, cover !important;
  background-position: center, center, center !important;
  background-repeat: repeat, no-repeat, no-repeat !important;
  mix-blend-mode: soft-light !important;
}

aside,
header,
.form,
.tableWrap,
.kpi,
article,
.waCard,
.waMessagesPanel,
.userCard,
.profileMenu,
.popupWhatsApp {
  position: relative !important;
  z-index: 1 !important;
  background:
    linear-gradient(180deg, rgba(255,250,255,.92), rgba(238,224,255,.88)),
    linear-gradient(135deg, rgba(124,44,255,.10), rgba(255,255,255,.18) 36%, rgba(46,0,70,.10)) !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  border: 4px ridge #c6a7ff !important;
  outline: 2px solid #12001f !important;
  outline-offset: -10px !important;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.20),
    10px 10px 0 rgba(10,0,24,.88),
    inset 0 0 34px rgba(91,22,189,.20) !important;
}

main {
  position: relative !important;
  z-index: 1 !important;
}

main::before {
  content: "" !important;
  position: fixed !important;
  left: 260px !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 34vh !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: .20 !important;
  background:
    linear-gradient(180deg, transparent 0%, rgba(120,44,255,.18) 58%, rgba(8,0,16,.42) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 18px) !important;
  image-rendering: pixelated !important;
  filter: none !important;
}

h1,
h2,
h3,
#pageTitle,
.ticketSectionTitle,
nav button,
button,
label,
th,
.kpi strong {
  font-family: Georgia, "Times New Roman", "Lucida Console", monospace !important;
  font-weight: 900 !important;
  letter-spacing: .3px !important;
}

h1,
h2,
h3,
#pageTitle,
.ticketSectionTitle,
.logoBox h2 {
  color: #fdf6ff !important;
  -webkit-text-stroke: 1px #170024;
  text-shadow:
    2px 0 0 #170024,
    -2px 0 0 #170024,
    0 2px 0 #170024,
    0 -2px 0 #170024,
    3px 3px 0 #7c2cff,
    0 0 12px rgba(192,68,255,.86) !important;
}

header h1,
#pageTitle,
.ticketSectionTitle {
  color: #ffffff !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #efe2ff 34%, #b67aff 62%, #ffffff 100%);
  background-size: auto;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

nav button {
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(225,203,255,.92)),
    linear-gradient(90deg, rgba(192,68,255,.18), transparent) !important;
  border: 3px ridge #9b6dff !important;
  color: #1b0738 !important;
  box-shadow:
    inset 0 0 18px rgba(124,44,255,.14),
    5px 5px 0 rgba(12,0,25,.80) !important;
}

nav button.active,
nav button:hover {
  background:
    linear-gradient(180deg, #d9b6ff 0%, #7c2cff 48%, #2f0a62 49%, #5b16bd 100%) !important;
  color: #fffaff !important;
}

button,
.iconBtn,
td button,
.waBtn,
#ticketForm .secondary,
#ticketForm #clearBtn {
  border: 3px ridge #e8d7ff !important;
  background:
    linear-gradient(180deg, #f7ecff 0%, #c044ff 24%, #5b16bd 52%, #24003f 100%) !important;
  color: #fffaff !important;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.52),
    inset 0 -5px 0 rgba(8,0,16,.62),
    5px 5px 0 #12001f !important;
}

input,
select,
textarea {
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(239,226,255,.92)) !important;
  border: 3px ridge #b892ff !important;
  color: #160020 !important;
}

th {
  background:
    linear-gradient(180deg, #5b16bd 0%, #24003f 100%) !important;
  color: #fffaff !important;
}

.logoBox {
  background:
    linear-gradient(180deg, rgba(255,250,255,.88), rgba(228,207,255,.76)),
    linear-gradient(135deg, rgba(124,44,255,.16), transparent 52%, rgba(18,0,31,.12)) !important;
  border: 4px ridge #c6a7ff !important;
  box-shadow:
    inset 0 0 20px rgba(124,44,255,.16),
    5px 5px 0 #12001f !important;
}

.logoBox .sidebarLogo {
  filter:
    drop-shadow(2px 2px 0 #12001f)
    drop-shadow(0 0 8px rgba(192,68,255,.75)) !important;
}

@media (max-width: 850px) {
  main::before {
    left: 0 !important;
    height: 22vh !important;
  }
}

/* =========================================================
   POLIMENTO VISUAL - CATEDRAL 16-BIT LIMPA
========================================================= */
:root {
  --cathedral-bg: #080010;
  --cathedral-panel: rgba(249, 244, 255, .92);
  --cathedral-panel-soft: rgba(236, 225, 250, .86);
  --cathedral-ink: #2a173f;
  --cathedral-muted: #5c4b72;
  --cathedral-border: #bca7e6;
  --cathedral-border-dark: #24133b;
  --cathedral-purple: #7c3aed;
  --cathedral-purple-soft: #c9a7ff;
  --cathedral-red: #e54858;
  --cathedral-green: #24b85a;
}

body {
  color: var(--cathedral-ink) !important;
  background-color: var(--cathedral-bg) !important;
  background-image:
    linear-gradient(180deg, rgba(8, 0, 16, .18), rgba(8, 0, 16, .76)),
    radial-gradient(circle at 50% 16%, rgba(255, 248, 255, .18), transparent 30%),
    url("assets/retro-cathedral-bg.png") !important;
  background-position: center, center, center !important;
  background-size: cover, cover, cover !important;
}

body::before {
  opacity: .24 !important;
  background-image:
    linear-gradient(90deg, rgba(8, 0, 16, .64), transparent 20%, transparent 80%, rgba(8, 0, 16, .64)),
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, .14), transparent 30%) !important;
  mix-blend-mode: multiply !important;
}

body::after {
  opacity: .08 !important;
  background-image:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, .18) 0 1px, transparent 1px 4px) !important;
  mix-blend-mode: soft-light !important;
}

main {
  background: transparent !important;
}

aside {
  background:
    linear-gradient(180deg, rgba(20, 8, 42, .96), rgba(34, 15, 59, .94)) !important;
  border-right: 2px solid rgba(188, 167, 230, .82) !important;
  box-shadow: 10px 0 24px rgba(6, 0, 18, .46) !important;
}

header,
.form,
.tableWrap,
.kpi,
article,
.waCard,
.waMessagesPanel,
.userCard,
.profileMenu,
.popupWhatsApp,
.helpdeskModalBox {
  color: var(--cathedral-ink) !important;
  background:
    linear-gradient(180deg, var(--cathedral-panel), var(--cathedral-panel-soft)) !important;
  border: 2px solid var(--cathedral-border) !important;
  outline: 1px solid rgba(36, 19, 59, .78) !important;
  outline-offset: -7px !important;
  box-shadow:
    0 12px 28px rgba(6, 0, 18, .34),
    4px 4px 0 rgba(36, 19, 59, .48),
    inset 0 0 24px rgba(124, 58, 237, .10) !important;
}

header::before,
.form::before,
.tableWrap::before,
article::before,
.kpi::before {
  height: 6px !important;
  margin: -8px -8px 12px !important;
  background:
    linear-gradient(90deg, transparent 0 4%, #4c1d95 4% 8%, transparent 8% 12%),
    repeating-linear-gradient(90deg, #24133b 0 22px, #8e44ff 22px 24px, #24133b 24px 44px) !important;
  border-bottom: 1px solid var(--cathedral-border-dark) !important;
}

.logoBox {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 22px 12px 18px !important;
  margin-bottom: 18px !important;
  background:
    linear-gradient(180deg, rgba(42, 18, 78, .90), rgba(22, 6, 42, .92)) !important;
  border: 2px solid rgba(201, 167, 255, .72) !important;
  outline: 1px solid rgba(255, 255, 255, .20) !important;
  outline-offset: -7px !important;
  box-shadow:
    0 10px 18px rgba(6, 0, 18, .34),
    4px 4px 0 rgba(6, 0, 18, .65) !important;
}

.logoBox .sidebarLogo {
  width: min(260px, 88%) !important;
  height: auto !important;
  max-height: 92px !important;
  object-fit: contain !important;
  filter: drop-shadow(3px 3px 0 #12001f) drop-shadow(0 0 8px rgba(201, 167, 255, .34)) !important;
}

h1,
h2,
h3,
#pageTitle,
.ticketSectionTitle,
label,
th,
.kpi span,
nav button,
button {
  font-family: "Lucida Console", "Courier New", monospace !important;
  letter-spacing: 0 !important;
  -webkit-text-stroke: 0 transparent !important;
}

h1,
h2,
h3,
#pageTitle,
.ticketSectionTitle,
article h2 {
  color: var(--cathedral-ink) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .82) !important;
}

#pageTitle {
  font-size: clamp(26px, 3vw, 40px) !important;
  line-height: 1.1 !important;
}

header p {
  color: var(--cathedral-muted) !important;
  text-shadow: none !important;
}

.kpis,
#dashboard .grid {
  gap: 22px !important;
}

.kpi span {
  color: var(--cathedral-muted) !important;
  text-shadow: none !important;
}

.kpi strong {
  color: var(--cathedral-purple) !important;
  text-shadow: 1px 1px 0 #fff !important;
}

article h2 {
  margin-bottom: 14px !important;
  font-size: 18px !important;
}

article canvas {
  filter: none !important;
}

nav button,
.submenu button {
  color: #f8f1ff !important;
  background:
    linear-gradient(180deg, rgba(68, 28, 118, .78), rgba(31, 11, 58, .88)) !important;
  border: 2px solid rgba(201, 167, 255, .74) !important;
  box-shadow: 3px 3px 0 rgba(6, 0, 18, .70) !important;
  text-shadow: 1px 1px 0 #12001f !important;
}

nav button::before {
  color: var(--cathedral-purple-soft) !important;
  text-shadow: 1px 1px 0 #12001f !important;
}

nav button.active,
nav button:hover,
.submenu button:hover {
  color: #ffffff !important;
  background:
    linear-gradient(180deg, #a66dff 0%, #7c3aed 46%, #3a0872 100%) !important;
  border-color: #efe4ff !important;
}

button,
.iconBtn,
td button,
.waBtn,
.pagination button,
#ticketForm .secondary,
#ticketForm #clearBtn {
  color: #ffffff !important;
  background:
    linear-gradient(180deg, #a66dff 0%, #7c3aed 48%, #3a0872 100%) !important;
  border: 2px solid #efe4ff !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .38),
    3px 3px 0 rgba(18, 0, 31, .72) !important;
  text-shadow: 1px 1px 0 #12001f !important;
}

input,
select,
textarea {
  color: var(--cathedral-ink) !important;
  background: rgba(255, 252, 255, .94) !important;
  border: 2px solid var(--cathedral-border) !important;
  box-shadow: inset 2px 2px 0 rgba(124, 58, 237, .10) !important;
}

th {
  color: #ffffff !important;
  background: linear-gradient(180deg, #4c1d95, #24133b) !important;
  text-shadow: 1px 1px 0 #12001f !important;
}

td,
.waStatusText,
.userRole {
  color: var(--cathedral-ink) !important;
}

.badge.Pendente {
  background: var(--cathedral-red) !important;
  color: #ffffff !important;
}

.badge.Concluido,
.badge.Concluído {
  background: var(--cathedral-green) !important;
  color: #ffffff !important;
}

.profileBox,
#userName {
  color: var(--cathedral-ink) !important;
  background: rgba(255, 252, 255, .90) !important;
  border: 2px solid var(--cathedral-purple) !important;
  box-shadow: 3px 3px 0 rgba(36, 19, 59, .38) !important;
}

@media (max-width: 850px) {
  .logoBox .sidebarLogo {
    width: min(270px, 86vw) !important;
  }

  header,
  .form,
  .tableWrap,
  .kpi,
  article {
    box-shadow:
      0 8px 18px rgba(6, 0, 18, .30),
      3px 3px 0 rgba(36, 19, 59, .42),
      inset 0 0 20px rgba(124, 58, 237, .08) !important;
  }
}

/* Topo alinhado com o menu lateral */
header {
  background:
    linear-gradient(180deg, rgba(20, 8, 42, .96), rgba(34, 15, 59, .94)) !important;
  border: 2px solid rgba(201, 167, 255, .78) !important;
  outline: 1px solid rgba(255, 255, 255, .18) !important;
  outline-offset: -7px !important;
  box-shadow:
    0 12px 28px rgba(6, 0, 18, .38),
    4px 4px 0 rgba(6, 0, 18, .68),
    inset 0 0 28px rgba(124, 58, 237, .16) !important;
}

header::before {
  background:
    linear-gradient(90deg, transparent 0 4%, #c9a7ff 4% 8%, transparent 8% 12%),
    repeating-linear-gradient(90deg, #12001f 0 22px, #7c3aed 22px 24px, #12001f 24px 44px) !important;
  border-bottom: 1px solid rgba(201, 167, 255, .58) !important;
}

header h1,
header #pageTitle {
  color: #f8f1ff !important;
  -webkit-text-fill-color: #f8f1ff !important;
  text-shadow:
    2px 2px 0 #12001f,
    0 0 10px rgba(201, 167, 255, .34) !important;
}

header p {
  color: #cdbdf1 !important;
  text-shadow: 1px 1px 0 #12001f !important;
}

header .profileBox,
header #userName {
  color: #f8f1ff !important;
  background:
    linear-gradient(180deg, rgba(68, 28, 118, .72), rgba(31, 11, 58, .86)) !important;
  border: 2px solid rgba(201, 167, 255, .82) !important;
  box-shadow:
    inset 0 0 16px rgba(124, 58, 237, .18),
    3px 3px 0 rgba(6, 0, 18, .70) !important;
  text-shadow: 1px 1px 0 #12001f !important;
}

header #userPhoto {
  border: 2px solid #c9a7ff !important;
  box-shadow: 0 0 0 2px rgba(18, 0, 31, .88) !important;
}

/* Dropdown do usuario mais proximo do visual anterior */
header .profileMenu,
.profileMenu {
  top: 64px !important;
  right: 0 !important;
  width: 230px !important;
  min-width: 230px !important;
  padding: 12px !important;
  gap: 10px !important;
  color: #24113f !important;
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(124, 58, 237, .25) !important;
  border-radius: 16px !important;
  outline: none !important;
  box-shadow: 0 18px 45px rgba(20, 8, 42, .20) !important;
}

.profileMenu.showMenu {
  display: flex !important;
  flex-direction: column !important;
}

.profileMenu .photoUpload {
  display: block !important;
  padding: 12px !important;
  color: #24113f !important;
  background: #f6f4ff !important;
  border: 1px solid rgba(124, 58, 237, .22) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  text-align: center !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

.profileMenu .photoUpload:hover {
  background: #ede7ff !important;
}

.profileMenu .logoutBtn {
  width: 100% !important;
  padding: 11px 12px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #7c3aed, #d946ef) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 18px rgba(124, 58, 237, .24) !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

/* Enquadramento final das telas e tabelas */
main {
  padding: 28px 34px 42px !important;
  overflow: visible !important;
}

.view.active {
  max-width: 100% !important;
}

header,
.form,
.tableWrap,
.kpi,
article,
.waCard,
.waMessagesPanel,
.userCard {
  max-width: 100% !important;
}

.tableWrap {
  min-height: 0 !important;
  height: auto !important;
  padding: 18px !important;
  margin: 0 0 28px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.tableWrap h2 {
  margin: 4px 0 18px !important;
  padding: 0 4px !important;
  line-height: 1.2 !important;
}

.tableWrap table {
  width: 100% !important;
  min-width: 980px !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.tableWrap th,
.tableWrap td {
  padding: 13px 16px !important;
  vertical-align: middle !important;
}

#helpdesk .tableWrap,
#whatsapp .tableWrap,
#tickets .tableWrap {
  min-height: 0 !important;
}

#helpdesk .tableWrap table {
  min-width: 1180px !important;
}

/* Dropdown do usuario alinhado ao card do perfil e com as cores do topo */
.topActions {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
}

header .profileMenu,
.profileMenu {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  width: 240px !important;
  min-width: 240px !important;
  max-width: min(240px, calc(100vw - 32px)) !important;
  padding: 12px !important;
  gap: 10px !important;
  background:
    linear-gradient(180deg, rgba(34, 15, 59, .98), rgba(16, 5, 34, .98)) !important;
  color: #f8f1ff !important;
  border: 2px solid rgba(201, 167, 255, .82) !important;
  border-radius: 0 !important;
  outline: 1px solid rgba(255, 255, 255, .16) !important;
  outline-offset: -6px !important;
  box-shadow:
    0 18px 38px rgba(6, 0, 18, .50),
    4px 4px 0 rgba(6, 0, 18, .76),
    inset 0 0 18px rgba(124, 58, 237, .18) !important;
  transform: none !important;
  z-index: 10000 !important;
}

.profileMenu::before {
  content: "" !important;
  position: absolute !important;
  top: -8px !important;
  right: 26px !important;
  width: 14px !important;
  height: 14px !important;
  background: rgba(34, 15, 59, .98) !important;
  border-left: 2px solid rgba(201, 167, 255, .82) !important;
  border-top: 2px solid rgba(201, 167, 255, .82) !important;
  transform: rotate(45deg) !important;
}

.profileMenu .photoUpload,
.profileMenu .logoutBtn {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  border-radius: 0 !important;
  font-family: "Lucida Console", "Courier New", monospace !important;
  font-weight: 900 !important;
}

.profileMenu .photoUpload {
  color: #f8f1ff !important;
  background:
    linear-gradient(180deg, rgba(68, 28, 118, .80), rgba(31, 11, 58, .92)) !important;
  border: 2px solid rgba(201, 167, 255, .70) !important;
  box-shadow: 3px 3px 0 rgba(6, 0, 18, .70) !important;
  text-shadow: 1px 1px 0 #12001f !important;
}

.profileMenu .photoUpload:hover {
  background:
    linear-gradient(180deg, #a66dff 0%, #7c3aed 48%, #3a0872 100%) !important;
}

.profileMenu .logoutBtn {
  color: #ffffff !important;
  background:
    linear-gradient(180deg, #a66dff 0%, #7c3aed 48%, #3a0872 100%) !important;
  border: 2px solid #efe4ff !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .34),
    3px 3px 0 rgba(6, 0, 18, .70) !important;
  text-shadow: 1px 1px 0 #12001f !important;
}

/* Camada do menu de usuario sempre acima dos cards */
header {
  position: relative !important;
  z-index: 1000000 !important;
  overflow: visible !important;
}

header .topActions {
  position: relative !important;
  z-index: 1000001 !important;
  overflow: visible !important;
}

header .profileMenu,
header .profileMenu.showMenu,
.profileMenu.showMenu {
  z-index: 1000002 !important;
}

.kpi,
article,
.tableWrap,
.form,
.view.active {
  position: relative !important;
  z-index: 1 !important;
}

/* Login gotico 16-bit com logo nova */
.loginPage {
  min-height: 100vh !important;
  width: 100% !important;
  padding: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    linear-gradient(180deg, rgba(8, 0, 16, .24), rgba(8, 0, 16, .78)),
    radial-gradient(circle at 78% 18%, rgba(201, 167, 255, .22), transparent 28%),
    url("assets/retro-cathedral-bg.png") center / cover fixed no-repeat !important;
  overflow: auto !important;
}

.loginLayout {
  width: min(1280px, 94vw) !important;
  display: grid !important;
  grid-template-columns: minmax(460px, 1.15fr) minmax(340px, .85fr) !important;
  gap: 34px !important;
  align-items: center !important;
}

.loginImageBox {
  min-height: 0 !important;
  height: auto !important;
  padding: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    linear-gradient(180deg, rgba(34, 15, 59, .96), rgba(16, 5, 34, .98)) !important;
  border: 2px solid rgba(201, 167, 255, .78) !important;
  border-radius: 0 !important;
  outline: 1px solid rgba(255, 255, 255, .18) !important;
  outline-offset: -8px !important;
  box-shadow:
    0 24px 54px rgba(6, 0, 18, .48),
    6px 6px 0 rgba(6, 0, 18, .72),
    inset 0 0 32px rgba(124, 58, 237, .18) !important;
}

.loginImageBox img {
  width: 100% !important;
  max-width: 640px !important;
  height: auto !important;
  transform: none !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  image-rendering: auto !important;
  filter:
    drop-shadow(4px 4px 0 #12001f)
    drop-shadow(0 0 14px rgba(201, 167, 255, .30)) !important;
}

.loginBox {
  padding: 40px !important;
  background:
    linear-gradient(180deg, rgba(249, 244, 255, .94), rgba(236, 225, 250, .88)) !important;
  border: 2px solid rgba(201, 167, 255, .78) !important;
  border-radius: 0 !important;
  outline: 1px solid rgba(36, 19, 59, .72) !important;
  outline-offset: -8px !important;
  box-shadow:
    0 24px 54px rgba(6, 0, 18, .42),
    5px 5px 0 rgba(6, 0, 18, .62),
    inset 0 0 24px rgba(124, 58, 237, .10) !important;
}

.loginBox h2 {
  color: #24133b !important;
  font-family: "Lucida Console", "Courier New", monospace !important;
  letter-spacing: 0 !important;
  text-shadow: 1px 1px 0 #ffffff !important;
}

.loginBox h2::after {
  border-radius: 0 !important;
  background: linear-gradient(90deg, #7c3aed, #c044ff) !important;
}

.loginBox input {
  border-radius: 0 !important;
  border: 2px solid rgba(124, 58, 237, .45) !important;
  background: rgba(255, 252, 255, .94) !important;
  font-family: "Lucida Console", "Courier New", monospace !important;
}

.loginBox button {
  border-radius: 0 !important;
  border: 2px solid #efe4ff !important;
  background:
    linear-gradient(180deg, #a66dff 0%, #7c3aed 48%, #3a0872 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .34),
    4px 4px 0 rgba(6, 0, 18, .70) !important;
  font-family: "Lucida Console", "Courier New", monospace !important;
  text-shadow: 1px 1px 0 #12001f !important;
}

@media (max-width: 900px) {
  .loginPage {
    padding: 20px !important;
  }

  .loginLayout {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .loginImageBox img {
    max-width: 520px !important;
  }
}

/* Molduras goticas 16-bit com ornamentos animados */
header,
.form,
.tableWrap,
.kpi,
article,
.waCard,
.waMessagesPanel,
.userCard,
.loginBox,
.loginImageBox {
  position: relative !important;
  border-color: #d6c4ff !important;
  box-shadow:
    0 0 0 2px #12001f,
    0 0 0 5px #c9a7ff,
    0 0 0 7px #3a0872,
    0 18px 38px rgba(6, 0, 18, .38),
    5px 5px 0 rgba(6, 0, 18, .70),
    inset 0 0 0 1px rgba(255, 255, 255, .28),
    inset 0 0 28px rgba(124, 58, 237, .12) !important;
}

header::after,
.form::after,
.tableWrap::after,
.kpi::after,
article::after,
.waCard::after,
.waMessagesPanel::after,
.userCard::after,
.loginBox::after,
.loginImageBox::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 4;
}

header::after,
.form::after,
.tableWrap::after,
article:nth-of-type(odd)::after,
.kpi:nth-child(odd)::after,
.waCard::after,
.loginImageBox::after {
  top: -18px;
  right: 26px;
  width: 48px;
  height: 30px;
  background: #08020d;
  clip-path: polygon(
    0 42%, 12% 8%, 28% 38%, 40% 16%, 50% 42%,
    60% 16%, 72% 38%, 88% 8%, 100% 42%,
    76% 58%, 61% 55%, 50% 82%, 39% 55%, 24% 58%
  );
  filter:
    drop-shadow(0 -8px 0 rgba(201, 167, 255, .38))
    drop-shadow(2px 2px 0 #3a0872);
  transform-origin: 50% 0;
  animation: batHang 1.4s steps(2, end) infinite alternate;
}

article:nth-of-type(even)::after,
.kpi:nth-child(even)::after,
.userCard::after,
.waMessagesPanel::after,
.loginBox::after {
  left: -18px;
  bottom: 22px;
  width: 24px;
  height: 54px;
  background:
    radial-gradient(ellipse at 50% 10px, #fff8c7 0 4px, #ffb22e 5px 8px, #e54858 9px 11px, transparent 12px),
    linear-gradient(90deg, transparent 0 6px, #fff1cf 6px 18px, transparent 18px 24px),
    linear-gradient(90deg, transparent 0 3px, #d7b76a 3px 21px, transparent 21px 24px);
  background-size: 24px 24px, 24px 34px, 24px 8px;
  background-position: 0 0, 0 18px, 0 46px;
  background-repeat: no-repeat;
  filter:
    drop-shadow(0 0 7px rgba(255, 178, 46, .75))
    drop-shadow(2px 2px 0 #12001f);
  animation: candleFlicker .9s steps(2, end) infinite alternate;
}

header::after {
  right: 38px;
}

.tableWrap::after,
.form::after {
  right: 34px;
}

.kpi::after,
article::after,
.waCard::after,
.waMessagesPanel::after,
.userCard::after {
  opacity: .95;
}

@keyframes batHang {
  from {
    transform: translateY(0) rotate(-3deg) scaleX(1);
  }
  to {
    transform: translateY(3px) rotate(3deg) scaleX(.94);
  }
}

@keyframes candleFlicker {
  from {
    filter:
      drop-shadow(0 0 5px rgba(255, 178, 46, .62))
      drop-shadow(2px 2px 0 #12001f);
    transform: translateY(0) scaleY(1);
  }
  to {
    filter:
      drop-shadow(0 0 10px rgba(255, 230, 140, .92))
      drop-shadow(2px 2px 0 #12001f);
    transform: translateY(-1px) scaleY(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  header::after,
  .form::after,
  .tableWrap::after,
  .kpi::after,
  article::after,
  .waCard::after,
  .waMessagesPanel::after,
  .userCard::after,
  .loginBox::after,
  .loginImageBox::after {
    animation: none !important;
  }
}

/* Moldura tipo quadro antigo, com ornamentos fora do card */
main,
.view,
.view.active,
.kpis,
#dashboard .grid {
  overflow: visible !important;
}

header,
.form,
.tableWrap,
.kpi,
article,
.waCard,
.waMessagesPanel,
.userCard,
.loginBox,
.loginImageBox {
  position: relative !important;
  overflow: visible !important;
  border: 10px solid #7a3f22 !important;
  border-image: linear-gradient(
    135deg,
    #12001f 0%,
    #4b2137 10%,
    #d7b76a 18%,
    #fff2bc 25%,
    #7a3f22 34%,
    #2a123b 48%,
    #d7b76a 62%,
    #7a3f22 76%,
    #12001f 100%
  ) 14 !important;
  border-radius: 0 !important;
  outline: 2px solid #d7b76a !important;
  outline-offset: -18px !important;
  box-shadow:
    0 0 0 2px #08020d,
    0 0 0 5px #2a123b,
    0 0 0 8px #d7b76a,
    0 0 0 12px #08020d,
    0 18px 38px rgba(6, 0, 18, .46),
    6px 6px 0 rgba(6, 0, 18, .72),
    inset 0 0 0 2px rgba(255, 245, 211, .38),
    inset 0 0 28px rgba(124, 58, 237, .12) !important;
}

header::before,
.form::before,
.tableWrap::before,
article::before,
.kpi::before,
.waCard::before,
.waMessagesPanel::before,
.userCard::before,
.loginBox::before,
.loginImageBox::before {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  z-index: 20 !important;
}

header::after,
.form::after,
.tableWrap::after,
article::after,
.kpi::after,
.waCard::after,
.waMessagesPanel::after,
.userCard::after,
.loginBox::after,
.loginImageBox::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  pointer-events: none !important;
  z-index: 20 !important;
}

header::before,
.form::before,
.tableWrap::before,
article:nth-of-type(odd)::before,
.kpi:nth-child(odd)::before,
.waCard::before,
.loginImageBox::before {
  top: -42px !important;
  right: 34px !important;
  width: 72px !important;
  height: 54px !important;
  background:
    linear-gradient(#d7b76a, #d7b76a) 50% 0 / 3px 18px no-repeat,
    radial-gradient(ellipse at 50% 64%, #08020d 0 10px, transparent 11px),
    radial-gradient(ellipse at 24% 58%, #08020d 0 18px, transparent 19px),
    radial-gradient(ellipse at 76% 58%, #08020d 0 18px, transparent 19px);
  clip-path: polygon(
    48% 0, 52% 0, 52% 30%, 62% 34%, 72% 18%, 78% 42%,
    100% 30%, 86% 58%, 68% 54%, 56% 68%, 50% 92%,
    44% 68%, 32% 54%, 14% 58%, 0 30%, 22% 42%,
    28% 18%, 38% 34%, 48% 30%
  ) !important;
  filter:
    drop-shadow(2px 2px 0 #3a0872)
    drop-shadow(0 0 8px rgba(201, 167, 255, .42)) !important;
  transform-origin: 50% 0;
  animation: batOutside 1.45s steps(2, end) infinite alternate !important;
}

article:nth-of-type(even)::before,
.kpi:nth-child(even)::before,
.userCard::before,
.waMessagesPanel::before,
.loginBox::before {
  top: auto !important;
  left: -40px !important;
  bottom: 18px !important;
  width: 32px !important;
  height: 76px !important;
  background:
    radial-gradient(ellipse at 50% 12px, #fff8c7 0 5px, #ffb22e 6px 10px, #e54858 11px 14px, transparent 15px),
    linear-gradient(90deg, transparent 0 8px, #fff1cf 8px 24px, transparent 24px 32px),
    linear-gradient(90deg, transparent 0 4px, #d7b76a 4px 28px, transparent 28px 32px),
    linear-gradient(90deg, transparent 0 2px, #08020d 2px 30px, transparent 30px 32px);
  background-size: 32px 30px, 32px 42px, 32px 8px, 32px 4px;
  background-position: 0 0, 0 24px, 0 64px, 0 72px;
  background-repeat: no-repeat;
  filter:
    drop-shadow(0 0 9px rgba(255, 178, 46, .78))
    drop-shadow(3px 3px 0 #12001f) !important;
  animation: candleOutside .85s steps(2, end) infinite alternate !important;
}

header::after,
.form::after,
.tableWrap::after,
article::after,
.kpi::after,
.waCard::after,
.waMessagesPanel::after,
.userCard::after,
.loginBox::after,
.loginImageBox::after {
  inset: -17px !important;
  background:
    linear-gradient(90deg, transparent 0 54px, #d7b76a 54px calc(100% - 54px), transparent calc(100% - 54px)) top 9px left 0 / 100% 3px no-repeat,
    linear-gradient(90deg, transparent 0 54px, #7a3f22 54px calc(100% - 54px), transparent calc(100% - 54px)) bottom 9px left 0 / 100% 4px no-repeat,
    linear-gradient(180deg, transparent 0 54px, #d7b76a 54px calc(100% - 54px), transparent calc(100% - 54px)) left 9px top 0 / 3px 100% no-repeat,
    linear-gradient(180deg, transparent 0 54px, #7a3f22 54px calc(100% - 54px), transparent calc(100% - 54px)) right 9px top 0 / 4px 100% no-repeat,
    radial-gradient(circle at 14px 14px, #fff2bc 0 5px, #d7b76a 6px 9px, transparent 10px) top left / 44px 44px no-repeat,
    radial-gradient(circle at calc(100% - 14px) 14px, #fff2bc 0 5px, #d7b76a 6px 9px, transparent 10px) top right / 44px 44px no-repeat,
    radial-gradient(circle at 14px calc(100% - 14px), #7a3f22 0 6px, #d7b76a 7px 10px, transparent 11px) bottom left / 44px 44px no-repeat,
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #7a3f22 0 6px, #d7b76a 7px 10px, transparent 11px) bottom right / 44px 44px no-repeat;
  opacity: .85 !important;
  animation: none !important;
}

@keyframes batOutside {
  from {
    transform: translateY(0) rotate(-2deg) scaleX(1);
  }
  to {
    transform: translateY(4px) rotate(3deg) scaleX(.92);
  }
}

@keyframes candleOutside {
  from {
    transform: translateY(0) scaleY(1);
    filter:
      drop-shadow(0 0 6px rgba(255, 178, 46, .70))
      drop-shadow(3px 3px 0 #12001f);
  }
  to {
    transform: translateY(-2px) scaleY(1.07);
    filter:
      drop-shadow(0 0 12px rgba(255, 230, 140, .96))
      drop-shadow(3px 3px 0 #12001f);
  }
}

@media (prefers-reduced-motion: reduce) {
  header::before,
  .form::before,
  .tableWrap::before,
  article::before,
  .kpi::before,
  .waCard::before,
  .waMessagesPanel::before,
  .userCard::before,
  .loginBox::before,
  .loginImageBox::before {
    animation: none !important;
  }
}

/* Override final: tamanhos menores e moldura limpa */
header::after,
.form::after,
.tableWrap::after,
article::after,
.kpi::after,
.waCard::after,
.waMessagesPanel::after,
.userCard::after,
.loginBox::after,
.loginImageBox::after {
  inset: -12px !important;
  background:
    linear-gradient(#08020d, #08020d) top 0 left 0 / 100% 4px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) top 6px left 18px / calc(100% - 36px) 2px no-repeat,
    linear-gradient(#7a3f22, #7a3f22) top 10px left 24px / calc(100% - 48px) 4px no-repeat,
    linear-gradient(#08020d, #08020d) bottom 0 left 0 / 100% 4px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) bottom 6px left 18px / calc(100% - 36px) 2px no-repeat,
    linear-gradient(#4b2137, #4b2137) bottom 10px left 24px / calc(100% - 48px) 4px no-repeat,
    linear-gradient(90deg, #08020d, #08020d) top 0 left 0 / 4px 100% no-repeat,
    linear-gradient(90deg, #d7b76a, #d7b76a) top 18px left 6px / 2px calc(100% - 36px) no-repeat,
    linear-gradient(90deg, #7a3f22, #7a3f22) top 24px left 10px / 4px calc(100% - 48px) no-repeat,
    linear-gradient(90deg, #08020d, #08020d) top 0 right 0 / 4px 100% no-repeat,
    linear-gradient(90deg, #d7b76a, #d7b76a) top 18px right 6px / 2px calc(100% - 36px) no-repeat,
    linear-gradient(90deg, #4b2137, #4b2137) top 24px right 10px / 4px calc(100% - 48px) no-repeat,
    linear-gradient(#08020d, #08020d) top left / 28px 28px no-repeat,
    linear-gradient(#08020d, #08020d) top right / 28px 28px no-repeat,
    linear-gradient(#08020d, #08020d) bottom left / 28px 28px no-repeat,
    linear-gradient(#08020d, #08020d) bottom right / 28px 28px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) top 6px left 6px / 16px 16px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) top 6px right 6px / 16px 16px no-repeat,
    linear-gradient(#7a3f22, #7a3f22) bottom 6px left 6px / 16px 16px no-repeat,
    linear-gradient(#7a3f22, #7a3f22) bottom 6px right 6px / 16px 16px no-repeat !important;
}

.kpi::before {
  content: "" !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  filter: none !important;
  animation: none !important;
}

header::before {
  top: -34px !important;
  right: 34px !important;
  width: 78px !important;
  height: 53px !important;
}

.form::before,
.tableWrap::before,
article:nth-of-type(odd)::before,
.waCard::before,
.loginImageBox::before {
  top: -30px !important;
  right: 28px !important;
  width: 70px !important;
  height: 48px !important;
}

article:nth-of-type(even)::before,
.userCard::before,
.waMessagesPanel::before,
.loginBox::before {
  left: -18px !important;
  bottom: 20px !important;
  width: 38px !important;
  height: 68px !important;
}

/* Corte absoluto dos recortes verticais do dashboard */
.kpi::before,
.kpi:nth-child(odd)::before,
.kpi:nth-child(even)::before,
article:nth-of-type(even)::before,
.userCard::before,
.waMessagesPanel::before {
  display: none !important;
  content: "" !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  filter: none !important;
  animation: none !important;
}

/* Correção final: remove os recortes verticais entre os quadros */
.kpi::before,
.kpi:nth-child(odd)::before,
.kpi:nth-child(even)::before,
article:nth-of-type(even)::before,
.userCard::before,
.waMessagesPanel::before {
  content: "" !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  clip-path: none !important;
  filter: none !important;
  animation: none !important;
}

/* Correção visual: remove velas laterais que pareciam recorte quebrado no dashboard */
.kpi::before,
.kpi:nth-child(odd)::before,
.kpi:nth-child(even)::before,
article:nth-of-type(even)::before,
.userCard::before,
.waMessagesPanel::before {
  content: "" !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  clip-path: none !important;
  filter: none !important;
  animation: none !important;
}

/* Ajuste fino: ornamentos menores e cantos sem glitch visual */
header::after,
.form::after,
.tableWrap::after,
article::after,
.kpi::after,
.waCard::after,
.waMessagesPanel::after,
.userCard::after,
.loginBox::after,
.loginImageBox::after {
  inset: -12px !important;
  background:
    linear-gradient(#08020d, #08020d) top 0 left 0 / 100% 4px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) top 6px left 18px / calc(100% - 36px) 2px no-repeat,
    linear-gradient(#7a3f22, #7a3f22) top 10px left 24px / calc(100% - 48px) 4px no-repeat,
    linear-gradient(#08020d, #08020d) bottom 0 left 0 / 100% 4px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) bottom 6px left 18px / calc(100% - 36px) 2px no-repeat,
    linear-gradient(#4b2137, #4b2137) bottom 10px left 24px / calc(100% - 48px) 4px no-repeat,
    linear-gradient(90deg, #08020d, #08020d) top 0 left 0 / 4px 100% no-repeat,
    linear-gradient(90deg, #d7b76a, #d7b76a) top 18px left 6px / 2px calc(100% - 36px) no-repeat,
    linear-gradient(90deg, #7a3f22, #7a3f22) top 24px left 10px / 4px calc(100% - 48px) no-repeat,
    linear-gradient(90deg, #08020d, #08020d) top 0 right 0 / 4px 100% no-repeat,
    linear-gradient(90deg, #d7b76a, #d7b76a) top 18px right 6px / 2px calc(100% - 36px) no-repeat,
    linear-gradient(90deg, #4b2137, #4b2137) top 24px right 10px / 4px calc(100% - 48px) no-repeat,
    linear-gradient(#08020d, #08020d) top left / 28px 28px no-repeat,
    linear-gradient(#08020d, #08020d) top right / 28px 28px no-repeat,
    linear-gradient(#08020d, #08020d) bottom left / 28px 28px no-repeat,
    linear-gradient(#08020d, #08020d) bottom right / 28px 28px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) top 6px left 6px / 16px 16px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) top 6px right 6px / 16px 16px no-repeat,
    linear-gradient(#7a3f22, #7a3f22) bottom 6px left 6px / 16px 16px no-repeat,
    linear-gradient(#7a3f22, #7a3f22) bottom 6px right 6px / 16px 16px no-repeat !important;
}

.kpi::before {
  content: "" !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  filter: none !important;
  animation: none !important;
}

header::before {
  top: -34px !important;
  right: 34px !important;
  width: 78px !important;
  height: 53px !important;
}

.form::before,
.tableWrap::before,
article:nth-of-type(odd)::before,
.waCard::before,
.loginImageBox::before {
  top: -30px !important;
  right: 28px !important;
  width: 70px !important;
  height: 48px !important;
}

article:nth-of-type(even)::before,
.userCard::before,
.waMessagesPanel::before,
.loginBox::before {
  left: -18px !important;
  bottom: 20px !important;
  width: 38px !important;
  height: 68px !important;
}

/* Refinamento SOTN: ornamentos pixelados e moldura sem falhas */
header,
.form,
.tableWrap,
.kpi,
article,
.waCard,
.waMessagesPanel,
.userCard,
.loginBox,
.loginImageBox {
  border: 4px solid #100518 !important;
  border-image: none !important;
  border-radius: 0 !important;
  outline: 2px solid #d7b76a !important;
  outline-offset: -14px !important;
  box-shadow:
    0 0 0 2px #d7b76a,
    0 0 0 5px #6f3724,
    0 0 0 8px #180824,
    0 0 0 12px #c99a45,
    0 0 0 15px #07020d,
    0 18px 38px rgba(6, 0, 18, .50),
    6px 6px 0 rgba(6, 0, 18, .72),
    inset 0 0 0 2px rgba(255, 242, 188, .52),
    inset 0 0 0 5px rgba(122, 63, 34, .56),
    inset 0 0 28px rgba(124, 58, 237, .12) !important;
}

header::after,
.form::after,
.tableWrap::after,
article::after,
.kpi::after,
.waCard::after,
.waMessagesPanel::after,
.userCard::after,
.loginBox::after,
.loginImageBox::after {
  inset: -13px !important;
  border: 0 !important;
  background:
    linear-gradient(#08020d, #08020d) top 0 left 0 / 100% 4px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) top 5px left 0 / 100% 2px no-repeat,
    linear-gradient(#7a3f22, #7a3f22) top 9px left 0 / 100% 5px no-repeat,
    linear-gradient(#08020d, #08020d) bottom 0 left 0 / 100% 4px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) bottom 5px left 0 / 100% 2px no-repeat,
    linear-gradient(#4b2137, #4b2137) bottom 9px left 0 / 100% 5px no-repeat,
    linear-gradient(90deg, #08020d, #08020d) top 0 left 0 / 4px 100% no-repeat,
    linear-gradient(90deg, #d7b76a, #d7b76a) top 0 left 5px / 2px 100% no-repeat,
    linear-gradient(90deg, #7a3f22, #7a3f22) top 0 left 9px / 5px 100% no-repeat,
    linear-gradient(90deg, #08020d, #08020d) top 0 right 0 / 4px 100% no-repeat,
    linear-gradient(90deg, #d7b76a, #d7b76a) top 0 right 5px / 2px 100% no-repeat,
    linear-gradient(90deg, #4b2137, #4b2137) top 0 right 9px / 5px 100% no-repeat,
    conic-gradient(from 45deg, #08020d 0 25%, #d7b76a 0 50%, #7a3f22 0 75%, #08020d 0) top left / 34px 34px no-repeat,
    conic-gradient(from 135deg, #08020d 0 25%, #d7b76a 0 50%, #7a3f22 0 75%, #08020d 0) top right / 34px 34px no-repeat,
    conic-gradient(from -45deg, #08020d 0 25%, #d7b76a 0 50%, #4b2137 0 75%, #08020d 0) bottom left / 34px 34px no-repeat,
    conic-gradient(from -135deg, #08020d 0 25%, #d7b76a 0 50%, #4b2137 0 75%, #08020d 0) bottom right / 34px 34px no-repeat !important;
  opacity: 1 !important;
}

header::before,
.form::before,
.tableWrap::before,
article:nth-of-type(odd)::before,
.kpi:nth-child(odd)::before,
.waCard::before,
.loginImageBox::before {
  top: -48px !important;
  right: 28px !important;
  width: 112px !important;
  height: 76px !important;
  background: url("assets/ornament-bat-16bit.svg") center / contain no-repeat !important;
  clip-path: none !important;
  filter:
    drop-shadow(3px 3px 0 #08020d)
    drop-shadow(0 0 8px rgba(201, 167, 255, .45)) !important;
  transform-origin: 50% 10% !important;
  animation: batSotnHang 1.25s steps(2, end) infinite alternate !important;
  image-rendering: pixelated;
}

article:nth-of-type(even)::before,
.kpi:nth-child(even)::before,
.userCard::before,
.waMessagesPanel::before,
.loginBox::before {
  left: -28px !important;
  bottom: 18px !important;
  width: 58px !important;
  height: 104px !important;
  background: url("assets/ornament-candelabrum-blue-16bit.svg?v=6") center / contain no-repeat !important;
  clip-path: none !important;
  filter:
    drop-shadow(3px 3px 0 #08020d)
    drop-shadow(0 0 10px rgba(56, 189, 248, .72))
    drop-shadow(0 0 16px rgba(124, 58, 237, .42)) !important;
  animation: candleSotnFlicker .78s steps(2, end) infinite alternate !important;
  image-rendering: pixelated;
}

@keyframes batSotnHang {
  from {
    transform: translateY(0) rotate(-1deg);
  }
  to {
    transform: translateY(4px) rotate(2deg);
  }
}

@keyframes candleSotnFlicker {
  from {
    transform: translateY(0);
    filter:
      drop-shadow(3px 3px 0 #08020d)
      drop-shadow(0 0 8px rgba(56, 189, 248, .58));
  }
  to {
    transform: translateY(-2px);
    filter:
      drop-shadow(3px 3px 0 #08020d)
      drop-shadow(0 0 17px rgba(124, 58, 237, .82));
  }
}

@media (prefers-reduced-motion: reduce) {
  header::before,
  .form::before,
  .tableWrap::before,
  article::before,
  .kpi::before,
  .waCard::before,
  .waMessagesPanel::before,
  .userCard::before,
  .loginBox::before,
  .loginImageBox::before {
    animation: none !important;
  }
}

/* Override final definitivo: ornamentos discretos e bordas estaveis */
header::after,
.form::after,
.tableWrap::after,
article::after,
.kpi::after,
.waCard::after,
.waMessagesPanel::after,
.userCard::after,
.loginBox::after,
.loginImageBox::after {
  inset: -12px !important;
  background:
    linear-gradient(#08020d, #08020d) top 0 left 0 / 100% 4px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) top 6px left 18px / calc(100% - 36px) 2px no-repeat,
    linear-gradient(#7a3f22, #7a3f22) top 10px left 24px / calc(100% - 48px) 4px no-repeat,
    linear-gradient(#08020d, #08020d) bottom 0 left 0 / 100% 4px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) bottom 6px left 18px / calc(100% - 36px) 2px no-repeat,
    linear-gradient(#4b2137, #4b2137) bottom 10px left 24px / calc(100% - 48px) 4px no-repeat,
    linear-gradient(90deg, #08020d, #08020d) top 0 left 0 / 4px 100% no-repeat,
    linear-gradient(90deg, #d7b76a, #d7b76a) top 18px left 6px / 2px calc(100% - 36px) no-repeat,
    linear-gradient(90deg, #7a3f22, #7a3f22) top 24px left 10px / 4px calc(100% - 48px) no-repeat,
    linear-gradient(90deg, #08020d, #08020d) top 0 right 0 / 4px 100% no-repeat,
    linear-gradient(90deg, #d7b76a, #d7b76a) top 18px right 6px / 2px calc(100% - 36px) no-repeat,
    linear-gradient(90deg, #4b2137, #4b2137) top 24px right 10px / 4px calc(100% - 48px) no-repeat,
    linear-gradient(#08020d, #08020d) top left / 28px 28px no-repeat,
    linear-gradient(#08020d, #08020d) top right / 28px 28px no-repeat,
    linear-gradient(#08020d, #08020d) bottom left / 28px 28px no-repeat,
    linear-gradient(#08020d, #08020d) bottom right / 28px 28px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) top 6px left 6px / 16px 16px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) top 6px right 6px / 16px 16px no-repeat,
    linear-gradient(#7a3f22, #7a3f22) bottom 6px left 6px / 16px 16px no-repeat,
    linear-gradient(#7a3f22, #7a3f22) bottom 6px right 6px / 16px 16px no-repeat !important;
}

.kpi::before {
  content: "" !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  filter: none !important;
  animation: none !important;
}

header::before {
  top: -34px !important;
  right: 34px !important;
  width: 78px !important;
  height: 53px !important;
}

.form::before,
.tableWrap::before,
article:nth-of-type(odd)::before,
.waCard::before,
.loginImageBox::before {
  top: -30px !important;
  right: 28px !important;
  width: 70px !important;
  height: 48px !important;
}

article:nth-of-type(even)::before,
.userCard::before,
.waMessagesPanel::before,
.loginBox::before {
  left: -18px !important;
  bottom: 20px !important;
  width: 38px !important;
  height: 68px !important;
}

/* Corte absoluto dos recortes verticais do dashboard */
.kpi::before,
.kpi:nth-child(odd)::before,
.kpi:nth-child(even)::before,
article:nth-of-type(even)::before,
.userCard::before,
.waMessagesPanel::before {
  display: none !important;
  content: "" !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  filter: none !important;
  animation: none !important;
}

/* Usa somente o novo castical azul, sem reaproveitar a vela antiga */
.loginBox::before {
  display: block !important;
  content: "" !important;
  left: -18px !important;
  bottom: 20px !important;
  width: 38px !important;
  height: 68px !important;
  background: url("assets/ornament-candelabrum-blue-16bit.svg?v=6") center / contain no-repeat !important;
  clip-path: none !important;
  filter:
    drop-shadow(3px 3px 0 #08020d)
    drop-shadow(0 0 10px rgba(56, 189, 248, .72))
    drop-shadow(0 0 16px rgba(124, 58, 237, .42)) !important;
  animation: candleSotnFlicker .78s steps(2, end) infinite alternate !important;
}

/* Corrige os "pilares" entre cards: moldura de dashboard fica dentro do quadro */
.kpi,
#dashboard article {
  overflow: visible !important;
}

.kpi::after,
#dashboard article::after {
  inset: 0 !important;
  z-index: 0 !important;
  background:
    linear-gradient(#08020d, #08020d) top 0 left 0 / 100% 3px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) top 6px left 18px / calc(100% - 36px) 2px no-repeat,
    linear-gradient(#7a3f22, #7a3f22) top 10px left 24px / calc(100% - 48px) 3px no-repeat,
    linear-gradient(#08020d, #08020d) bottom 0 left 0 / 100% 3px no-repeat,
    linear-gradient(#d7b76a, #d7b76a) bottom 6px left 18px / calc(100% - 36px) 2px no-repeat,
    linear-gradient(#4b2137, #4b2137) bottom 10px left 24px / calc(100% - 48px) 3px no-repeat,
    linear-gradient(90deg, #08020d, #08020d) top 0 left 0 / 3px 100% no-repeat,
    linear-gradient(90deg, #d7b76a, #d7b76a) top 18px left 6px / 2px calc(100% - 36px) no-repeat,
    linear-gradient(90deg, #7a3f22, #7a3f22) top 24px left 10px / 3px calc(100% - 48px) no-repeat,
    linear-gradient(90deg, #08020d, #08020d) top 0 right 0 / 3px 100% no-repeat,
    linear-gradient(90deg, #d7b76a, #d7b76a) top 18px right 6px / 2px calc(100% - 36px) no-repeat,
    linear-gradient(90deg, #4b2137, #4b2137) top 24px right 10px / 3px calc(100% - 48px) no-repeat !important;
}

.kpi > *,
#dashboard article > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Modo somente moldura: remove morcegos, velas e casticais */
header::before,
.form::before,
.tableWrap::before,
article::before,
.kpi::before,
.waCard::before,
.waMessagesPanel::before,
.userCard::before,
.loginBox::before,
.loginImageBox::before {
  content: "" !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  clip-path: none !important;
  animation: none !important;
}

/* WhatsApp Web em tema gotico 16 bits */
#whatsapp .waPanel,
#whatsapp .waPremiumGrid > .tableWrap,
#whatsapp #waPagination {
  display: none !important;
}

#whatsapp .waPremiumGrid {
  display: grid !important;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
  margin: 0 !important;
}

#whatsapp .waConnectCard,
#whatsapp .waChatShell {
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(248, 241, 255, .94), rgba(229, 220, 245, .92)) !important;
  border: 4px solid #0c0614 !important;
  outline: 2px solid #c9a35a !important;
  outline-offset: -12px !important;
  box-shadow:
    0 0 0 2px #7b4a24,
    5px 5px 0 rgba(8, 2, 13, .82),
    inset 0 0 0 2px rgba(255, 244, 190, .72),
    inset 0 0 28px rgba(70, 25, 105, .16) !important;
}

#whatsapp .waConnectCard {
  min-height: 650px !important;
}

#whatsapp .waChatShell {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 330px minmax(0, 1fr) !important;
  min-height: 650px !important;
  overflow: hidden !important;
  color: #241334 !important;
}

#whatsapp .waChatShell::before {
  content: "" !important;
  position: absolute !important;
  left: -16px !important;
  top: calc(50% - 24px) !important;
  width: 32px !important;
  height: 48px !important;
  background: url("assets/ornament-candelabrum-blue-16bit.svg?v=6") center / contain no-repeat !important;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 5;
  filter:
    drop-shadow(2px 2px 0 #08020d)
    drop-shadow(0 0 8px rgba(56, 189, 248, .72)) !important;
}

#whatsapp .waConversationRail {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  padding: 18px !important;
  border-right: 3px solid #1a0a2b !important;
  background:
    linear-gradient(180deg, rgba(31, 9, 55, .97), rgba(15, 4, 28, .98)) !important;
  color: #f8f1ff !important;
}

#whatsapp .waChatToolbar {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 10px 16px !important;
  border-bottom: 2px solid rgba(201, 163, 90, .72) !important;
}

#whatsapp .waChatToolbar h3 {
  margin: 0 0 6px !important;
  color: #fff8e8 !important;
  font-family: "Lucida Console", "Courier New", monospace !important;
  font-size: 18px !important;
  text-shadow: 2px 2px 0 #07020c !important;
}

#whatsapp .waChatToolbar p {
  margin: 0 !important;
  color: #d8c9ea !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

#whatsapp .waMiniBtn,
#whatsapp .waBackBtn,
#whatsapp .waComposer button {
  border-radius: 0 !important;
  border: 2px solid #eadbff !important;
  color: #fff8e8 !important;
  background: linear-gradient(180deg, #9b4cff, #43127b) !important;
  box-shadow: 3px 3px 0 #12061f !important;
  font-family: "Lucida Console", "Courier New", monospace !important;
  font-weight: 900 !important;
  text-shadow: 1px 1px 0 #050109 !important;
  cursor: pointer !important;
}

#whatsapp .waMiniBtn {
  padding: 9px 12px !important;
  white-space: nowrap !important;
}

#whatsapp .waSearchBox {
  display: grid !important;
  gap: 7px !important;
  padding: 16px 10px !important;
  color: #f8f1ff !important;
  font-family: "Lucida Console", "Courier New", monospace !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

#whatsapp .waSearchBox input {
  width: 100% !important;
  min-width: 0 !important;
  padding: 12px !important;
  border-radius: 0 !important;
  border: 2px solid #b78cff !important;
  background: rgba(248, 241, 255, .94) !important;
  color: #211230 !important;
  font-family: "Lucida Console", "Courier New", monospace !important;
  box-shadow: inset 3px 3px 0 rgba(31, 9, 55, .14) !important;
}

#whatsapp .waConversationList {
  display: grid !important;
  gap: 10px !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 0 8px 8px !important;
}

#whatsapp .waConversationItem {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 11px !important;
  border-radius: 0 !important;
  border: 2px solid rgba(201, 167, 255, .56) !important;
  background: linear-gradient(180deg, rgba(54, 17, 91, .96), rgba(25, 7, 47, .96)) !important;
  color: #f8f1ff !important;
  text-align: left !important;
  box-shadow: 3px 3px 0 rgba(5, 1, 12, .72) !important;
}

#whatsapp .waConversationItem.active,
#whatsapp .waConversationItem:hover {
  border-color: #f1d17a !important;
  background: linear-gradient(180deg, rgba(128, 58, 237, .98), rgba(57, 15, 102, .98)) !important;
}

#whatsapp .waAvatar {
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #eadbff !important;
  background: #150622 !important;
  color: #9ee8ff !important;
  font-weight: 900 !important;
  box-shadow: inset 0 0 0 2px #6d28d9 !important;
}

#whatsapp .waConversationText {
  display: grid !important;
  min-width: 0 !important;
  gap: 4px !important;
}

#whatsapp .waConversationText strong,
#whatsapp .waChatTopbar strong {
  overflow: hidden !important;
  color: #fff8e8 !important;
  font-family: "Lucida Console", "Courier New", monospace !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: 1px 1px 0 #050109 !important;
}

#whatsapp .waConversationText small {
  overflow: hidden !important;
  color: #d9caec !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 12px !important;
}

#whatsapp .waConversationMeta {
  display: grid !important;
  justify-items: end !important;
  gap: 6px !important;
  color: #d7c2ff !important;
  font-size: 11px !important;
}

#whatsapp .waUnread {
  min-width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 6px !important;
  border: 2px solid #fff1b8 !important;
  background: #16a34a !important;
  color: #fff !important;
  box-shadow: 2px 2px 0 #050109 !important;
}

#whatsapp .waConversationPane {
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background:
    linear-gradient(rgba(248, 241, 255, .86), rgba(238, 228, 251, .88)),
    repeating-linear-gradient(90deg, rgba(36, 19, 52, .06) 0 2px, transparent 2px 16px) !important;
}

#whatsapp .waEmptyChat {
  margin: auto !important;
  display: grid !important;
  justify-items: center !important;
  gap: 8px !important;
  padding: 24px !important;
  color: #2b173d !important;
  text-align: center !important;
  font-family: "Lucida Console", "Courier New", monospace !important;
}

#whatsapp .waEmptyChat strong {
  font-size: 24px !important;
}

#whatsapp .waChatView {
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

#whatsapp .waChatView[hidden] {
  display: none !important;
}

#whatsapp .waChatTopbar {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 15px 18px !important;
  border-bottom: 3px solid #1a0a2b !important;
  background: linear-gradient(180deg, rgba(31, 9, 55, .97), rgba(20, 5, 38, .97)) !important;
}

#whatsapp .waChatTopbar span {
  display: block !important;
  margin-top: 3px !important;
  color: #d8c9ea !important;
  font-size: 12px !important;
}

#whatsapp .waBackBtn {
  padding: 9px 12px !important;
}

#whatsapp .waChatMessages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

#whatsapp .waBubbleRow {
  display: flex !important;
}

#whatsapp .waBubbleRow.incoming {
  justify-content: flex-start !important;
}

#whatsapp .waBubbleRow.outgoing {
  justify-content: flex-end !important;
}

#whatsapp .waBubble {
  max-width: min(640px, 78%) !important;
  padding: 12px 14px !important;
  border-radius: 0 !important;
  border: 2px solid #180923 !important;
  box-shadow: 3px 3px 0 rgba(8, 2, 13, .72) !important;
  font-family: "Lucida Console", "Courier New", monospace !important;
}

#whatsapp .waBubbleRow.incoming .waBubble {
  background: rgba(255, 250, 239, .96) !important;
  color: #241334 !important;
  border-color: #c9a35a !important;
}

#whatsapp .waBubbleRow.outgoing .waBubble {
  background: linear-gradient(180deg, #7c3aed, #421270) !important;
  color: #fff8e8 !important;
  border-color: #eadbff !important;
}

#whatsapp .waBubble p {
  margin: 0 0 8px !important;
  line-height: 1.45 !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}

#whatsapp .waBubble span {
  display: block !important;
  text-align: right !important;
  opacity: .76 !important;
  font-size: 11px !important;
}

#whatsapp .waComposer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 120px !important;
  gap: 12px !important;
  padding: 14px !important;
  border-top: 3px solid #1a0a2b !important;
  background: rgba(28, 8, 51, .96) !important;
}

#whatsapp .waComposer textarea {
  min-width: 0 !important;
  resize: vertical !important;
  max-height: 140px !important;
  padding: 13px !important;
  border-radius: 0 !important;
  border: 2px solid #b78cff !important;
  background: #f8f1ff !important;
  color: #211230 !important;
  font-family: "Lucida Console", "Courier New", monospace !important;
  box-shadow: inset 3px 3px 0 rgba(31, 9, 55, .14) !important;
}

#whatsapp .waComposer button {
  padding: 12px !important;
}

#whatsapp .waComposer button:disabled {
  opacity: .58 !important;
  cursor: wait !important;
}

#whatsapp .waEmptyList {
  display: grid !important;
  gap: 6px !important;
  padding: 16px !important;
  border: 2px dashed rgba(201, 167, 255, .52) !important;
  color: #d8c9ea !important;
  text-align: center !important;
  font-family: "Lucida Console", "Courier New", monospace !important;
}

@media (max-width: 1100px) {
  #whatsapp .waPremiumGrid {
    grid-template-columns: 1fr !important;
  }

  #whatsapp .waConnectCard {
    min-height: auto !important;
  }
}

@media (max-width: 760px) {
  #whatsapp .waChatShell {
    grid-template-columns: 1fr !important;
    min-height: 640px !important;
  }

  #whatsapp .waConversationPane {
    display: none !important;
  }

  #whatsapp .waChatShell.conversationOpen .waConversationRail {
    display: none !important;
  }

  #whatsapp .waChatShell.conversationOpen .waConversationPane {
    display: flex !important;
  }

  #whatsapp .waChatTopbar {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  #whatsapp #waOpenTicketBtn {
    grid-column: 1 / -1 !important;
  }

  #whatsapp .waComposer {
    grid-template-columns: 1fr !important;
  }

  #whatsapp .waBubble {
    max-width: 92% !important;
  }
}

/* Moldura limpa: remove todos os pedacos extras marcados */
header::before,
header::after,
.form::before,
.form::after,
.tableWrap::before,
.tableWrap::after,
article::before,
article::after,
.kpi::before,
.kpi::after,
.waCard::before,
.waCard::after,
.waMessagesPanel::before,
.waMessagesPanel::after,
.userCard::before,
.userCard::after,
.loginBox::before,
.loginBox::after,
.loginImageBox::before,
.loginImageBox::after {
  content: "" !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  inset: auto !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  clip-path: none !important;
  animation: none !important;
}

/* Correcao: manter tela antiga e colocar WhatsApp Web apenas no card Atendimento */
#whatsapp .waPanel,
#whatsapp .waPremiumGrid > .tableWrap {
  display: block !important;
}

#whatsapp .waLegacyPanel {
  display: none !important;
}

#whatsapp #waPagination {
  display: flex !important;
}

#whatsapp .waPremiumGrid {
  display: grid !important;
  grid-template-columns: minmax(340px, 420px) minmax(520px, 1fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
  margin-bottom: 28px !important;
}

#whatsapp .waPremiumGrid > .tableWrap {
  grid-column: 1 / -1 !important;
}

#whatsapp .waConnectCard,
#whatsapp .waPanel {
  min-height: 620px !important;
}

#whatsapp .waPanel {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(248, 241, 255, .94), rgba(229, 220, 245, .92)) !important;
  border: 4px solid #0c0614 !important;
  outline: 2px solid #c9a35a !important;
  outline-offset: -12px !important;
  box-shadow:
    0 0 0 2px #7b4a24,
    5px 5px 0 rgba(8, 2, 13, .82),
    inset 0 0 0 2px rgba(255, 244, 190, .72),
    inset 0 0 28px rgba(70, 25, 105, .16) !important;
}

#whatsapp .waPanel #waChatShell {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(250px, 310px) minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 620px !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: hidden !important;
}

#whatsapp .waPanel #waChatShell::before {
  display: none !important;
}

#whatsapp .waPanel .waConversationRail {
  border-right: 3px solid #1a0a2b !important;
}

#whatsapp .waPanel .waConversationPane {
  min-width: 0 !important;
}

#whatsapp .waPanel .waChatToolbar h3 {
  font-size: 17px !important;
  line-height: 1.05 !important;
}

#whatsapp .waPanel .waEmptyChat {
  padding: 22px !important;
}

#whatsapp .waPanel .waEmptyChat strong {
  font-size: 22px !important;
}

#whatsapp .waPanel .waChatMessages {
  padding: 18px !important;
}

#whatsapp .waPanel .waBubble {
  max-width: 86% !important;
}

@media (max-width: 1100px) {
  #whatsapp .waPremiumGrid {
    grid-template-columns: 1fr !important;
  }

  #whatsapp .waConnectCard,
  #whatsapp .waPanel,
  #whatsapp .waPanel #waChatShell {
    min-height: 560px !important;
  }
}

@media (max-width: 760px) {
  #whatsapp .waPanel #waChatShell {
    grid-template-columns: 1fr !important;
  }

  #whatsapp .waPanel .waConversationPane {
    display: none !important;
  }

  #whatsapp .waPanel #waChatShell.conversationOpen .waConversationRail {
    display: none !important;
  }

  #whatsapp .waPanel #waChatShell.conversationOpen .waConversationPane {
    display: flex !important;
  }
}

/* Override final: o Atendimento WhatsApp fica fixo e rola por dentro */
#whatsapp .waPremiumGrid {
  align-items: start !important;
  margin-bottom: 34px !important;
}

#whatsapp .waConnectCard,
#whatsapp .waPanel {
  height: clamp(520px, calc(100vh - 250px), 620px) !important;
  min-height: 0 !important;
  max-height: 620px !important;
}

#whatsapp .waPanel {
  overflow: hidden !important;
}

#whatsapp .waPanel #waChatShell,
#whatsapp.waConnected .waPanel #waChatShell {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

#whatsapp .waConversationRail,
#whatsapp .waConversationPane,
#whatsapp .waChatView,
#whatsapp.waConnected .waConversationRail,
#whatsapp.waConnected .waConversationPane,
#whatsapp.waConnected .waChatView {
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

#whatsapp .waConversationRail,
#whatsapp.waConnected .waConversationRail {
  display: flex !important;
  flex-direction: column !important;
}

#whatsapp .waChatToolbar,
#whatsapp .waSearchBox,
#whatsapp .waChatTopbar,
#whatsapp .waComposer,
#whatsapp.waConnected .waChatToolbar,
#whatsapp.waConnected .waSearchBox,
#whatsapp.waConnected .waChatTopbar,
#whatsapp.waConnected .waComposer {
  flex: 0 0 auto !important;
}

#whatsapp .waConversationList,
#whatsapp.waConnected .waConversationList {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-color: #00a884 #111b21;
  scrollbar-width: thin;
}

#whatsapp .waChatMessages,
#whatsapp.waConnected .waChatMessages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-color: #00a884 #0b141a;
  scrollbar-width: thin;
}

#whatsapp .waConversationList::-webkit-scrollbar,
#whatsapp .waChatMessages::-webkit-scrollbar {
  width: 10px;
}

#whatsapp .waConversationList::-webkit-scrollbar-track,
#whatsapp .waChatMessages::-webkit-scrollbar-track {
  background: #111b21;
}

#whatsapp .waConversationList::-webkit-scrollbar-thumb,
#whatsapp .waChatMessages::-webkit-scrollbar-thumb {
  background: #00a884;
  border: 2px solid #111b21;
}

@media (max-width: 1100px) {
  #whatsapp .waConnectCard,
  #whatsapp .waPanel {
    height: 560px !important;
    max-height: 560px !important;
  }
}

@media (max-width: 760px) {
  #whatsapp .waConnectCard,
  #whatsapp .waPanel {
    height: 620px !important;
    max-height: 620px !important;
  }
}

/* Limite do Atendimento WhatsApp: rolagem interna, sem estourar a pagina */
#whatsapp .waPremiumGrid {
  align-items: start !important;
  margin-bottom: 34px !important;
}

#whatsapp .waConnectCard,
#whatsapp .waPanel {
  height: clamp(520px, calc(100vh - 250px), 620px) !important;
  min-height: 0 !important;
  max-height: 620px !important;
}

#whatsapp .waPanel {
  overflow: hidden !important;
}

#whatsapp .waPanel #waChatShell,
#whatsapp.waConnected .waPanel #waChatShell {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

#whatsapp .waConversationRail,
#whatsapp .waConversationPane,
#whatsapp .waChatView,
#whatsapp.waConnected .waConversationRail,
#whatsapp.waConnected .waConversationPane,
#whatsapp.waConnected .waChatView {
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

#whatsapp .waConversationRail,
#whatsapp.waConnected .waConversationRail {
  display: flex !important;
  flex-direction: column !important;
}

#whatsapp .waChatToolbar,
#whatsapp .waSearchBox,
#whatsapp .waChatTopbar,
#whatsapp .waComposer,
#whatsapp.waConnected .waChatToolbar,
#whatsapp.waConnected .waSearchBox,
#whatsapp.waConnected .waChatTopbar,
#whatsapp.waConnected .waComposer {
  flex: 0 0 auto !important;
}

#whatsapp .waConversationList,
#whatsapp.waConnected .waConversationList {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-color: #00a884 #111b21;
  scrollbar-width: thin;
}

#whatsapp .waChatMessages,
#whatsapp.waConnected .waChatMessages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-color: #00a884 #0b141a;
  scrollbar-width: thin;
}

#whatsapp .waConversationList::-webkit-scrollbar,
#whatsapp .waChatMessages::-webkit-scrollbar {
  width: 10px;
}

#whatsapp .waConversationList::-webkit-scrollbar-track,
#whatsapp .waChatMessages::-webkit-scrollbar-track {
  background: #111b21;
}

#whatsapp .waConversationList::-webkit-scrollbar-thumb,
#whatsapp .waChatMessages::-webkit-scrollbar-thumb {
  background: #00a884;
  border: 2px solid #111b21;
}

@media (max-width: 1100px) {
  #whatsapp .waConnectCard,
  #whatsapp .waPanel {
    height: 560px !important;
    max-height: 560px !important;
  }
}

@media (max-width: 760px) {
  #whatsapp .waConnectCard,
  #whatsapp .waPanel {
    height: 620px !important;
    max-height: 620px !important;
  }
}

/* WhatsApp conectado: visual inspirado no WhatsApp Web dentro do card Atendimento */
#whatsapp.waConnected .waPanel {
  background: #0b141a !important;
  border: 1px solid #263238 !important;
  outline: 0 !important;
  box-shadow:
    0 0 0 2px rgba(5, 1, 12, .72),
    5px 5px 0 rgba(8, 2, 13, .82) !important;
}

#whatsapp.waConnected .waPanel #waChatShell {
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr) !important;
  background: #0b141a !important;
  color: #e9edef !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
}

#whatsapp.waConnected .waConversationRail {
  padding: 0 !important;
  background: #111b21 !important;
  border-right: 1px solid #2a3942 !important;
}

#whatsapp.waConnected .waChatToolbar {
  min-height: 82px !important;
  padding: 22px 18px 14px 26px !important;
  border-bottom: 1px solid #222d34 !important;
  background: #111b21 !important;
}

#whatsapp.waConnected .waChatToolbar h3 {
  margin: 0 !important;
  color: #f0f2f5 !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 25px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

#whatsapp.waConnected .waChatToolbar p {
  margin: 4px 0 0 !important;
  color: #8696a0 !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 13px !important;
}

#whatsapp.waConnected .waMiniBtn {
  min-width: 44px !important;
  height: 38px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #d1d7db !important;
  background: #202c33 !important;
  box-shadow: none !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  text-shadow: none !important;
}

#whatsapp.waConnected .waSearchBox {
  padding: 10px 14px 8px !important;
  color: #8696a0 !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
}

#whatsapp.waConnected .waSearchBox span {
  display: none !important;
}

#whatsapp.waConnected .waSearchBox input {
  height: 44px !important;
  padding: 0 18px 0 44px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 22px 50%, #8696a0 0 4px, transparent 5px),
    linear-gradient(90deg, #202c33, #202c33) !important;
  color: #e9edef !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 15px !important;
  box-shadow: none !important;
}

#whatsapp.waConnected .waSearchBox input::placeholder {
  color: #8696a0 !important;
}

#whatsapp.waConnected .waConversationList {
  gap: 0 !important;
  padding: 0 !important;
  background: #111b21 !important;
}

#whatsapp.waConnected .waConversationItem {
  grid-template-columns: 52px minmax(0, 1fr) auto !important;
  gap: 14px !important;
  min-height: 74px !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #111b21 !important;
  color: #e9edef !important;
  box-shadow: inset 0 -1px 0 #222d34 !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
}

#whatsapp.waConnected .waConversationItem.active,
#whatsapp.waConnected .waConversationItem:hover {
  background: #2a3942 !important;
}

#whatsapp.waConnected .waAvatar {
  width: 52px !important;
  height: 52px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 35% 30%, #ffd7c2 0 13%, transparent 14%),
    linear-gradient(135deg, #00a884, #54656f) !important;
  color: #111b21 !important;
  box-shadow: none !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 20px !important;
}

#whatsapp.waConnected .waConversationText strong,
#whatsapp.waConnected .waChatTopbar strong {
  color: #e9edef !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

#whatsapp.waConnected .waConversationText small {
  color: #8696a0 !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 14px !important;
}

#whatsapp.waConnected .waConversationMeta {
  color: #8696a0 !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 12px !important;
}

#whatsapp.waConnected .waUnread {
  min-width: 22px !important;
  height: 22px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #00a884 !important;
  color: #111b21 !important;
  box-shadow: none !important;
  font-size: 12px !important;
}

#whatsapp.waConnected .waConversationPane {
  background:
    radial-gradient(circle at 12% 18%, rgba(233, 237, 239, .055) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 36%, rgba(233, 237, 239, .04) 0 2px, transparent 3px),
    radial-gradient(circle at 42% 64%, rgba(233, 237, 239, .035) 0 2px, transparent 3px),
    repeating-linear-gradient(45deg, transparent 0 26px, rgba(233, 237, 239, .018) 26px 28px),
    #0b141a !important;
}

#whatsapp.waConnected .waEmptyChat {
  color: #d1d7db !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
}

#whatsapp.waConnected .waEmptyChat strong {
  color: #e9edef !important;
  font-size: 30px !important;
  font-weight: 300 !important;
}

#whatsapp.waConnected .waEmptyChat span {
  max-width: 460px !important;
  color: #8696a0 !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}

#whatsapp.waConnected .waChatTopbar {
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: 64px !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid #222d34 !important;
  background: #202c33 !important;
}

#whatsapp.waConnected .waChatTopbar::before {
  content: "";
  display: block;
  width: 42px;
  height: 42px;
  grid-row: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, #00a884, #54656f);
}

#whatsapp.waConnected .waChatTopbar > div {
  grid-column: 1;
  padding-left: 54px !important;
  margin-left: -54px !important;
}

#whatsapp.waConnected .waChatTopbar span {
  color: #8696a0 !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
}

#whatsapp.waConnected .waBackBtn {
  display: none !important;
}

#whatsapp.waConnected #waOpenTicketBtn {
  grid-column: 2 !important;
  background: #00a884 !important;
  color: #071512 !important;
  font-weight: 700 !important;
}

#whatsapp.waConnected .waChatMessages {
  background: transparent !important;
  padding: 24px 32px !important;
}

#whatsapp.waConnected .waBubble {
  max-width: min(650px, 72%) !important;
  padding: 8px 10px 6px !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .18) !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
}

#whatsapp.waConnected .waBubbleRow.incoming .waBubble {
  background: #202c33 !important;
  color: #e9edef !important;
}

#whatsapp.waConnected .waBubbleRow.outgoing .waBubble {
  background: #005c4b !important;
  color: #e9edef !important;
}

#whatsapp.waConnected .waBubble p {
  margin: 0 0 4px !important;
  line-height: 1.35 !important;
  font-size: 15px !important;
}

#whatsapp.waConnected .waBubble span {
  color: #aebac1 !important;
  opacity: 1 !important;
  font-size: 11px !important;
}

#whatsapp.waConnected .waComposer {
  grid-template-columns: 44px minmax(0, 1fr) 92px !important;
  align-items: center !important;
  padding: 10px 14px !important;
  border-top: 1px solid #222d34 !important;
  background: #202c33 !important;
}

#whatsapp.waConnected .waComposer::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: #aebac1;
  font-size: 30px;
  line-height: 1;
}

#whatsapp.waConnected .waComposer textarea {
  min-height: 42px !important;
  max-height: 110px !important;
  padding: 11px 16px !important;
  border: 0 !important;
  border-radius: 21px !important;
  background: #2a3942 !important;
  color: #e9edef !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 15px !important;
  box-shadow: none !important;
}

#whatsapp.waConnected .waComposer textarea::placeholder {
  color: #8696a0 !important;
}

#whatsapp.waConnected .waComposer button {
  height: 40px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: #00a884 !important;
  color: #071512 !important;
  box-shadow: none !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

#whatsapp.waConnected .waEmptyList {
  margin: 16px !important;
  border: 1px dashed #3b4a54 !important;
  color: #8696a0 !important;
  background: transparent !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
}

@media (max-width: 760px) {
  #whatsapp.waConnected .waPanel #waChatShell {
    grid-template-columns: 1fr !important;
  }

  #whatsapp.waConnected .waBackBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 36px !important;
    border: 0 !important;
    background: transparent !important;
    color: #d1d7db !important;
    box-shadow: none !important;
  }

  #whatsapp.waConnected .waChatTopbar {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  #whatsapp.waConnected .waChatTopbar::before,
  #whatsapp.waConnected #waOpenTicketBtn {
    display: none !important;
  }

  #whatsapp.waConnected .waChatTopbar > div {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  #whatsapp.waConnected .waComposer {
    grid-template-columns: 34px minmax(0, 1fr) !important;
  }

  #whatsapp.waConnected .waComposer button {
    grid-column: 1 / -1 !important;
  }
}

header,
.form,
.tableWrap,
.kpi,
article,
.waCard,
.waMessagesPanel,
.userCard,
.loginBox,
.loginImageBox {
  border: 4px solid #08020d !important;
  border-radius: 0 !important;
  outline: 2px solid #d7b76a !important;
  outline-offset: -12px !important;
  box-shadow:
    0 0 0 2px #d7b76a,
    0 0 0 5px #7a3f22,
    0 0 0 8px #180824,
    0 0 0 11px #c99a45,
    0 0 0 14px #07020d,
    6px 6px 0 rgba(6, 0, 18, .72),
    0 18px 38px rgba(6, 0, 18, .42),
    inset 0 0 0 2px rgba(255, 242, 188, .45) !important;
}

/* Velas laterais 16-bit com fogo azul */
header,
.form,
.tableWrap,
.kpi,
article,
.waCard,
.waMessagesPanel,
.userCard,
.loginBox,
.loginImageBox {
  overflow: visible !important;
}

header::before,
.form::before,
.tableWrap::before,
.kpi::before,
#dashboard article::before,
.waCard::before,
.waMessagesPanel::before,
.userCard::before,
.loginBox::before,
.loginImageBox::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: -19px !important;
  top: calc(50% - 25px) !important;
  right: auto !important;
  bottom: auto !important;
  width: 34px !important;
  height: 50px !important;
  min-width: 34px !important;
  min-height: 50px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: url("assets/ornament-candelabrum-blue-16bit.svg?v=6") center / contain no-repeat !important;
  background-color: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  pointer-events: none !important;
  z-index: 8 !important;
  image-rendering: pixelated;
  filter:
    drop-shadow(2px 2px 0 #08020d)
    drop-shadow(0 0 7px rgba(56, 189, 248, .68))
    drop-shadow(0 0 13px rgba(124, 58, 237, .48)) !important;
  animation: sideBlueCandleFlicker .82s steps(2, end) infinite alternate !important;
}

header::before {
  left: -16px !important;
  top: calc(50% - 24px) !important;
  width: 32px !important;
  height: 48px !important;
}

.kpi::before {
  left: -15px !important;
  top: calc(50% - 21px) !important;
  width: 28px !important;
  height: 42px !important;
}

#dashboard article::before {
  left: -18px !important;
  top: calc(50% - 25px) !important;
  width: 34px !important;
  height: 50px !important;
}

@keyframes sideBlueCandleFlicker {
  from {
    transform: none;
    filter:
      drop-shadow(2px 2px 0 #08020d)
      drop-shadow(0 0 5px rgba(56, 189, 248, .48))
      drop-shadow(0 0 8px rgba(124, 58, 237, .28));
  }
  to {
    transform: none;
    filter:
      drop-shadow(2px 2px 0 #08020d)
      drop-shadow(0 0 9px rgba(56, 189, 248, .78))
      drop-shadow(0 0 14px rgba(124, 58, 237, .48));
  }
}

@media (max-width: 760px) {
  .kpi::before,
  #dashboard article::before {
    display: none !important;
  }
}

/* Morcego pixelado no outro lado da moldura */
header::after,
.form::after,
.tableWrap::after,
.kpi::after,
#dashboard article::after,
.waCard::after,
.waMessagesPanel::after,
.userCard::after,
.loginBox::after,
.loginImageBox::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: -20px !important;
  left: auto !important;
  top: calc(50% - 24px) !important;
  bottom: auto !important;
  width: 39px !important;
  height: 48px !important;
  min-width: 39px !important;
  min-height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: url("assets/ornament-bat-red-16bit.svg?v=1") center / contain no-repeat !important;
  background-color: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  pointer-events: none !important;
  z-index: 8 !important;
  image-rendering: pixelated;
  filter:
    drop-shadow(2px 2px 0 #08020d)
    drop-shadow(0 0 9px rgba(229, 72, 53, .36)) !important;
  animation: sideBatSwing 1.25s steps(2, end) infinite alternate !important;
}

header::after {
  right: -17px !important;
  top: calc(50% - 24px) !important;
  width: 38px !important;
  height: 47px !important;
}

.kpi::after {
  right: -15px !important;
  top: calc(50% - 21px) !important;
  width: 32px !important;
  height: 40px !important;
}

#dashboard article::after {
  right: -19px !important;
  top: calc(50% - 24px) !important;
  width: 38px !important;
  height: 47px !important;
}

@keyframes sideBatSwing {
  from {
    transform: translateY(0) rotate(-2deg);
  }
  to {
    transform: translateY(2px) rotate(2deg);
  }
}

@media (max-width: 760px) {
  .kpi::after,
  #dashboard article::after {
    display: none !important;
  }
}

/* Remove morcegos, mantendo as velas azuis */
header::after,
.form::after,
.tableWrap::after,
.kpi::after,
article::after,
.waCard::after,
.waMessagesPanel::after,
.userCard::after,
.loginBox::after,
.loginImageBox::after {
  content: "" !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  clip-path: none !important;
  animation: none !important;
}

/* Correcao final: layout antigo com WhatsApp Web somente no card Atendimento */
#whatsapp .waPanel,
#whatsapp .waPremiumGrid > .tableWrap {
  display: block !important;
}

#whatsapp .waLegacyPanel {
  display: none !important;
}

#whatsapp #waPagination {
  display: flex !important;
}

#whatsapp .waPremiumGrid {
  display: grid !important;
  grid-template-columns: minmax(340px, 420px) minmax(520px, 1fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
  margin-bottom: 28px !important;
}

#whatsapp .waPremiumGrid > .tableWrap {
  grid-column: 1 / -1 !important;
}

#whatsapp .waConnectCard,
#whatsapp .waPanel {
  min-height: 620px !important;
}

#whatsapp .waPanel {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(248, 241, 255, .94), rgba(229, 220, 245, .92)) !important;
  border: 4px solid #0c0614 !important;
  outline: 2px solid #c9a35a !important;
  outline-offset: -12px !important;
  box-shadow:
    0 0 0 2px #7b4a24,
    5px 5px 0 rgba(8, 2, 13, .82),
    inset 0 0 0 2px rgba(255, 244, 190, .72),
    inset 0 0 28px rgba(70, 25, 105, .16) !important;
}

#whatsapp .waPanel #waChatShell {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(250px, 310px) minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 620px !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: hidden !important;
}

#whatsapp .waPanel #waChatShell::before {
  display: none !important;
}

#whatsapp .waPanel .waConversationRail {
  border-right: 3px solid #1a0a2b !important;
}

#whatsapp .waPanel .waConversationPane {
  min-width: 0 !important;
}

#whatsapp .waPanel .waChatToolbar h3 {
  font-size: 17px !important;
  line-height: 1.05 !important;
}

#whatsapp .waPanel .waEmptyChat {
  padding: 22px !important;
}

#whatsapp .waPanel .waEmptyChat strong {
  font-size: 22px !important;
}

#whatsapp .waPanel .waChatMessages {
  padding: 18px !important;
}

#whatsapp .waPanel .waBubble {
  max-width: 86% !important;
}

@media (max-width: 1100px) {
  #whatsapp .waPremiumGrid {
    grid-template-columns: 1fr !important;
  }

  #whatsapp .waConnectCard,
  #whatsapp .waPanel,
  #whatsapp .waPanel #waChatShell {
    min-height: 560px !important;
  }
}

@media (max-width: 760px) {
  #whatsapp .waPanel #waChatShell {
    grid-template-columns: 1fr !important;
  }

  #whatsapp .waPanel .waConversationPane {
    display: none !important;
  }

  #whatsapp .waPanel #waChatShell.conversationOpen .waConversationRail {
    display: none !important;
  }

  #whatsapp .waPanel #waChatShell.conversationOpen .waConversationPane {
    display: flex !important;
  }
}