/* ==========================================================================
   LUME COM A LINGUAGEM VISUAL DO VITRALL (09/10/2026)
   --------------------------------------------------------------------------
   Camada carregada DEPOIS do <style> do index.html: só muda aparência, não
   remove nenhuma regra nem função. Tirar o <link> volta o visual anterior.
   Fonte da verdade dos valores: Desktop/vitrall/public/css (01-tokens,
   02-base, 03-componentes, 04-telas e 13-vida).
   ========================================================================== */

/* 1. Tokens: os nomes do Lume passam a apontar para os valores do Vitrall */
:root{
  --v-fundo:#EDF0F7; --v-cartao:#FFFFFF; --v-contorno:#E4E9F2; --v-secundario:#F1F4FA;
  --v-texto:#071D41; --v-corrente:#3A465E; --v-apoio:#606B83;
  --v-escuro:#071D41; --v-primario:#1351B4; --v-primario-rgb:19,81,180; --v-sobre-acento:#FFFFFF;
  --v-menu-texto:#C3D2E8; --v-menu-fraco:#8FA8CC; --v-veu-1:rgba(255,255,255,.08); --v-veu-2:rgba(255,255,255,.12);
  --v-azul:#1351B4; --v-amarelo:#FFCD07; --v-vermelho:#E52207;
  --v-s-cartao:0 1px 2px rgba(7,29,65,.03),0 8px 20px rgba(7,29,65,.04);
  --v-s-primario:0 4px 14px rgba(var(--v-primario-rgb),.26);
  --v-s-menu:18px 0 40px rgba(7,29,65,.28);
  --v-fonte:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --v-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --v-menu-fechado:60px; --v-menu-aberto:252px; --v-borda:16px;
  --v-curva:.24s cubic-bezier(.2,.7,.3,1);

  --bg1:var(--v-fundo); --bg2:var(--v-fundo); --bg3:var(--v-fundo);
  --ink:var(--v-texto); --ink2:var(--v-corrente); --muted:var(--v-apoio);
  --accent:var(--v-primario); --grad:var(--v-primario);
  --side:var(--v-escuro);
  --glass:var(--v-cartao); --glass2:var(--v-cartao); --glassbrd:var(--v-contorno);
  --line:var(--v-contorno);
  --r:28px; --r2:24px; --r3:14px;
  --sh-sm:var(--v-s-cartao); --sh:var(--v-s-cartao);
  --blur:none;
  --topbar-h:84px;
}
body.theme-dark{
  --v-fundo:#0B1320; --v-cartao:#1A212E; --v-contorno:#3A4250; --v-secundario:#2E3645;
  --v-texto:#F1F6FE; --v-corrente:#D3DAE8; --v-apoio:#A4AFC2;
  --v-escuro:#040C1F; --v-primario:#75A3F9; --v-primario-rgb:117,163,249; --v-sobre-acento:#080F1C;
  --v-menu-texto:#C9D5EA; --v-menu-fraco:#8896B0;
  --v-s-cartao:0 1px 2px rgba(0,0,0,.30),0 8px 20px rgba(0,0,0,.28);
  --v-s-primario:0 4px 14px rgba(117,163,249,.22);
  --v-s-menu:18px 0 40px rgba(0,0,0,.55);
  --bg1:var(--v-fundo); --bg2:var(--v-fundo); --bg3:var(--v-fundo);
  --ink:var(--v-texto); --ink2:var(--v-corrente); --muted:var(--v-apoio); --muted2:#8896B0;
  --accent:var(--v-primario); --grad:var(--v-primario);
  --glass:var(--v-cartao); --glass2:var(--v-cartao); --glassbrd:var(--v-contorno); --line:var(--v-contorno);
  --side:var(--v-escuro);
}

/* 2. Base: fundo liso, fonte do Vitrall */
body,body.theme-dark{font-family:var(--v-fonte);font-size:15px;background:var(--v-fundo);color:var(--v-corrente);}
body::before,body.theme-dark::before{background:var(--v-fundo);}
body::after,body.theme-dark::after{display:none;}
button,input,select,textarea{font-family:inherit;}
*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--v-apoio) 45%,transparent);background-clip:content-box;}

/* 3. Cartões: brancos e sólidos, contorno de 1px, raio 28 */
.card,.metric-card,.report-card,.stat-mini,.channel-card,.sup-kpi,.sup-panel,.pac-card,.ag-card,
.tickets-panel,.chat-panel,.contact-panel,.au-sec-head,
body.theme-dark .card,body.theme-dark .metric-card,body.theme-dark .report-card,body.theme-dark .stat-mini,
body.theme-dark .channel-card,body.theme-dark .sup-kpi,body.theme-dark .sup-panel,body.theme-dark .pac-card,
body.theme-dark .ag-card,body.theme-dark .tickets-panel,body.theme-dark .chat-panel,body.theme-dark .contact-panel,
body.theme-dark #page-dashboard .metric-card,body.theme-dark #page-dashboard .report-card,body.theme-dark .au-sec-head{
  background:var(--v-cartao) !important;background-image:none !important;
  border:1px solid var(--v-contorno) !important;border-radius:var(--r);
  box-shadow:var(--v-s-cartao) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
}
.page-content .card-header{border-bottom-color:var(--v-contorno);font-weight:600;color:var(--v-texto);}
.cp-section,body.theme-dark .cp-section{background:var(--v-secundario) !important;border:none !important;border-radius:20px;box-shadow:none !important;}

/* 4. Cartão de número (kpi-cor do Vitrall): faixa curta, brilho no canto, número em mono */
.metric-card,.stat-mini,.sup-kpi{isolation:isolate;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.metric-card::before,.stat-mini::before,.sup-kpi::before{left:20px;right:auto;width:34px;}
.metric-card::after,.stat-mini::after,.sup-kpi::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:-56px;right:-48px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--faixa,var(--v-primario)) 20%,transparent) 0%,transparent 70%);
}
.metric-card:hover,.stat-mini:hover,.sup-kpi:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--faixa,var(--v-primario)) 38%,var(--v-contorno)) !important;
  box-shadow:0 1px 2px rgba(7,29,65,.03),0 12px 26px color-mix(in srgb,var(--faixa,var(--v-primario)) 16%,transparent) !important;
}
.metric-card h3,.dash-bento .metric-card h3,.stat-mini .v,.sup-kpi .v{
  font-family:var(--v-mono);font-weight:400;letter-spacing:-.04em;color:var(--v-texto);
}
.metric-card p,.stat-mini .l{
  font-size:12px;font-weight:600;color:var(--v-apoio);text-transform:uppercase;letter-spacing:.09em;
}

/* 5. Menu lateral: trilho de 60px que abre com os nomes e EMPURRA a tela */
.sidebar{
  margin:0;left:var(--v-borda);top:var(--v-borda);height:calc(100vh - 2*var(--v-borda));
  width:var(--v-menu-fechado);padding:22px 8px 14px;
  background:var(--v-escuro);border:none;border-radius:28px;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  align-items:stretch;overflow:hidden;
  transition:width var(--v-curva),transform var(--tr),box-shadow var(--v-curva);
}
body.theme-dark .sidebar{background:var(--v-escuro);}
.sidebar-brand{padding:0 5px 22px;border:none;justify-content:flex-start;}
.sidebar-brand h5{font-size:0;gap:0;white-space:nowrap;color:#fff;}
.sidebar-brand h5 i,.sidebar-brand h5 i.brand-ico{
  width:36px;height:36px;flex-shrink:0;border-radius:28%;font-size:1.25rem;
  background:#fff !important;box-shadow:0 6px 16px rgba(0,0,0,.22);
}
.sidebar-menu{align-items:stretch;padding:0;gap:4px;scrollbar-width:none;}
.sidebar-menu::-webkit-scrollbar{width:0;height:0;}
.menu-item{
  width:100%;height:auto;padding:12px 13px;gap:16px;justify-content:flex-start;
  border-radius:26px;color:var(--v-menu-texto);font-size:16px;font-weight:400;white-space:nowrap;
}
.menu-item i{width:19px;font-size:1.05rem;flex-shrink:0;}
.menu-item:hover{background:var(--v-veu-1);color:#fff;transform:none;}
.menu-item.active,.menu-item.active:hover{background:var(--v-primario);color:var(--v-sobre-acento);font-weight:600;box-shadow:none;}
.menu-item.active[data-page] i{color:var(--v-sobre-acento);filter:none;}
/* O balão de dica vira o rótulo do item */
.menu-item span,.menu-item:hover span{
  display:none;position:static;transform:none;opacity:1;visibility:visible;
  background:none;box-shadow:none;padding:0;border-radius:0;color:inherit;
  font-size:inherit;font-weight:inherit;letter-spacing:0;pointer-events:auto;z-index:auto;
}
.menu-item span::before{display:none;}
.menu-item .menu-badge{display:block;position:absolute;top:8px;left:31px;right:auto;width:9px;height:9px;min-width:9px;padding:0;font-size:0;border-radius:50%;}
.menu-item .menu-badge.d-none{display:none !important;}
.sidebar-footer{border:none;padding:8px 0 0;justify-content:flex-start;}
.sidebar-footer .agent-info{flex-direction:row;gap:16px;padding:6px 5px;background:transparent;width:100%;white-space:nowrap;}
.sidebar-footer .agent-avatar{width:36px;height:36px;border-radius:50%;background:var(--v-veu-2);color:var(--v-menu-texto);font-size:13px;}
.sidebar-footer .agent-info > div:not(.agent-avatar){display:none;min-width:0;}
.sidebar-footer .agent-name{font-size:14px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;}
.sidebar-footer .agent-role{font-size:13px;color:var(--v-menu-fraco);}
.sidebar-footer .agent-info > .btn{display:none;}

/* Aberto: por hover no desktop ou como gaveta no celular (.open) */
.sidebar:hover,.sidebar.open{width:var(--v-menu-aberto);}
.sidebar:hover .sidebar-brand h5,.sidebar.open .sidebar-brand h5{font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;gap:16px;}
.sidebar:hover .sidebar-brand h5 i,.sidebar.open .sidebar-brand h5 i{margin:0 !important;}
.sidebar:hover .menu-item span,.sidebar.open .menu-item span{display:inline;}
.sidebar:hover .menu-item .menu-badge,.sidebar.open .menu-item .menu-badge{position:static;margin-left:auto;width:auto;height:auto;min-width:22px;padding:1px 8px;font-size:12px;line-height:1.4;border-radius:20px;text-align:center;}
.sidebar:hover .sidebar-footer .agent-info > div:not(.agent-avatar),.sidebar.open .sidebar-footer .agent-info > div:not(.agent-avatar){display:block;}
.sidebar:hover .sidebar-footer .agent-info > .btn,.sidebar.open .sidebar-footer .agent-info > .btn{display:inline-flex;}

.main{margin-left:calc(var(--v-borda) + var(--v-menu-fechado) + var(--v-borda));transition:margin-left var(--v-curva);}
@media (min-width:993px){
  /* Intenção, não passagem: só abre (e empurra) depois de 0,12 s parado */
  .sidebar:hover{transition-delay:.12s;}
  body:has(.sidebar:hover) .main{margin-left:calc(var(--v-borda) + var(--v-menu-aberto) + var(--v-borda));transition-delay:.12s;}
}
@media (max-width:992px){
  .sidebar{left:0;top:0;height:100vh;border-radius:0 28px 28px 0;width:var(--v-menu-aberto);}
  .sidebar.open{box-shadow:var(--v-s-menu);}
  .main{margin-left:0;}
}

/* 6. Cabeçalho da tela (".topo"): título grande com os três vidros da marca */
.topbar,body.theme-dark .topbar{
  height:auto;min-height:var(--topbar-h);margin:var(--v-borda) var(--v-borda) 0 0;padding:4px 6px;
  background:transparent !important;border:none !important;box-shadow:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;gap:16px;flex-wrap:wrap;
}
.topo-titulo{min-width:0;flex:1 1 auto;}
.topbar h5,body.theme-dark .topbar h5{
  position:relative;display:inline-block;padding-bottom:8px;
  font-size:28px;font-weight:600;letter-spacing:-.03em;color:var(--v-texto);
}
.topbar h5::after{
  content:"";position:absolute;left:0;bottom:0;width:46px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--v-azul) 0 34%,var(--v-amarelo) 34% 67%,var(--v-vermelho) 67% 100%);
}
.topo__apoio{font-size:14px;color:var(--v-apoio);margin-top:2px;}
.theme-toggle,body.theme-dark .theme-toggle{
  width:40px;height:40px;border-radius:50%;background:var(--v-cartao);border:1px solid var(--v-contorno);
  color:var(--v-texto);box-shadow:var(--v-s-cartao);
}
.theme-toggle:hover{color:var(--v-primario);transform:none;filter:brightness(.97);}
#topbar-online{border-radius:20px;padding:7px 12px;font-weight:600;}
.page-content{padding:16px var(--v-borda) var(--v-borda) 0;}
.tickets-layout{padding:16px var(--v-borda) var(--v-borda) 0;gap:16px;}
@media (max-width:992px){
  .topbar,body.theme-dark .topbar{margin:10px 10px 0;}
  .topbar h5{font-size:22px;}
  .page-content,.tickets-layout{padding-left:10px;padding-right:10px;}
}

/* 7. Botões em pílula, como no Vitrall */
.btn{border-radius:21px;font-weight:600;}
.btn-sm{border-radius:17px;}
.btn-primary,.btn-primary:hover,.btn-primary:focus{background:var(--v-primario);color:var(--v-sobre-acento);border:none;box-shadow:var(--v-s-primario);transform:none;}
.btn-primary:hover{filter:brightness(.97);}
.btn-outline-secondary,.btn-outline-success,.btn-outline-warning,.btn-outline-danger,
body.theme-dark .btn-outline-secondary{background:var(--v-cartao);border:1px solid var(--v-contorno);color:var(--v-corrente);}
.btn-outline-secondary:hover{background:var(--v-secundario);color:var(--v-texto);transform:none;}
.btn-secondary{background:var(--v-secundario);color:var(--v-primario);}

/* 8. Campos */
.form-control,.form-select,body.theme-dark .form-control,body.theme-dark .form-select{
  background:var(--v-cartao);border:1px solid var(--v-contorno);border-radius:14px;color:var(--v-texto);
}
.form-control:focus,.form-select:focus{background:var(--v-cartao);border-color:var(--v-primario);box-shadow:0 0 0 4px color-mix(in srgb,var(--v-primario) 14%,transparent);}
.form-label{font-size:13px;font-weight:600;color:var(--v-apoio);}
.modal-content,body.theme-dark .modal-content{background:var(--v-cartao);border:1px solid var(--v-contorno);border-radius:28px;color:var(--v-corrente);}
.modal-header,.modal-footer{border-color:var(--v-contorno);}
.modal-title{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--v-texto);}

/* 9. Tela de atendimento */
.tickets-panel-header{border-bottom:none;padding:20px 20px 12px;}
.tickets-panel-header h6{font-size:18px;font-weight:600;letter-spacing:-.02em;}
.filter-tabs{background:var(--v-secundario);border-radius:20px;padding:4px;}
.filter-tab{border-radius:16px;font-size:13px;}
.filter-tab.active,body.theme-dark .filter-tab.active{background:var(--v-cartao) !important;color:var(--v-primario) !important;box-shadow:var(--v-s-cartao);}
.ticket-row{border-radius:20px;}
.ticket-row:hover,body.theme-dark #page-tickets .ticket-row:hover{background:var(--v-secundario) !important;transform:none;}
.ticket-row.active,body.theme-dark #page-tickets .ticket-row.active{background:color-mix(in srgb,var(--v-primario) 9%,var(--v-cartao)) !important;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--v-primario) 45%,transparent) !important;border-color:transparent !important;}
.chat-header,.chat-input-area,body.theme-dark #page-tickets .chat-header,body.theme-dark #page-tickets .chat-input-area{background:var(--v-cartao) !important;border-color:var(--v-contorno);}
body.theme-dark #page-tickets .chat-panel{background:var(--v-cartao) !important;}
.chat-messages{background:var(--v-fundo);}
.chat-header-info .name{font-weight:600;font-size:17px;}
.chat-header-actions .btn{border-radius:50%;}
.agent .msg-bubble,body.theme-dark #page-tickets .agent .msg-bubble{background:var(--v-primario) !important;color:var(--v-sobre-acento) !important;box-shadow:none !important;}
.contact .msg-bubble,body.theme-dark #page-tickets .contact .msg-bubble{background:var(--v-cartao) !important;border:1px solid var(--v-contorno) !important;color:var(--v-texto) !important;box-shadow:none !important;}
.system .msg-bubble,body.theme-dark .system .msg-bubble{background:var(--v-secundario);color:var(--v-apoio);}
.chat-input-row,body.theme-dark #page-tickets .chat-input-row,body.theme-dark .chat-input-row{background:var(--v-secundario) !important;border:1px solid transparent;}
.chat-input-row:focus-within{background:var(--v-cartao) !important;border-color:var(--v-primario);}
.qr-chip,body.theme-dark #page-tickets .qr-chip,body.theme-dark .qr-chip{background:var(--v-secundario) !important;border:none !important;color:var(--v-primario) !important;}
.qr-chip:hover{transform:none;filter:brightness(.97);box-shadow:none;}

/* 10. Etiquetas e pílulas */
.badge{border-radius:20px;font-weight:600;}

/* 11. O balão antigo do trilho de ícones sai: com o menu abrindo, o nome já está no item */
.rail-tip{display:none !important;}

/* 12. Cartão grande do painel: branco como os demais (era degradê) */
.bento-hero.hero-light,.hero-light,body.theme-dark .hero-light{
  background:var(--v-cartao) !important;color:var(--v-texto) !important;
  border:1px solid var(--v-contorno) !important;box-shadow:var(--v-s-cartao) !important;
}
.hero-light .orb{display:none;}

/* 13. Cartão de número como o do Vitrall: rótulo em caixa alta EM CIMA, número
   em mono embaixo, sem ícone (a cor já vem da faixa e do brilho). */
.stat-mini{padding:17px 20px;align-items:flex-start;}
.stat-mini .ic{display:none;}
.stat-mini>div{display:flex;flex-direction:column-reverse;gap:6px;}
.stat-mini .v{font-size:31px;line-height:1.1;}
.stat-mini .l{margin-top:0;}

/* 14. Marca do menu: só o nome, como no Vitrall (o subtítulo encostava no celular) */
.sidebar-brand small{display:none !important;}
@media (max-width:992px){
  .sidebar{padding-top:22px;}
  .sidebar-brand{padding:0 5px 22px;}
}

/* ==========================================================================
   15. LOGIN no desenho do Vitrall (login.html + 04-telas + 15-login de lá):
   moldura com respiro de 16px, painel da marca em azul-marinho à esquerda,
   formulário em branco à direita. Mesmos ids de antes (login-cpf,
   login-password, login-btn, login-error): o doLogin não muda.
   ========================================================================== */
#login-screen.vl{
  display:flex;min-height:100vh;height:100vh;padding:16px;overflow:hidden;perspective:none;
  background:var(--v-fundo);font-family:var(--v-fonte);
}
#login-screen.vl::before,#login-screen.vl::after{display:none;}
.vl-moldura{
  width:100%;height:100%;display:grid;grid-template-columns:1.05fr 1fr;
  background:var(--v-cartao);border-radius:32px;overflow:hidden;
  box-shadow:0 2px 4px rgba(7,29,65,.05),0 28px 70px rgba(7,29,65,.13);
}
.vl-marca{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:clamp(32px,6vh,56px) clamp(36px,4vw,60px);
  background:#071D41;color:#fff;
}
.vl-marca > :not(.vl-vidros):not(.vl-textura){position:relative;}
.vl-vidros{position:absolute;inset:0;pointer-events:none;}
.vl-vidro{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;mix-blend-mode:screen;}
.vl-vidro--azul{width:420px;height:420px;right:-130px;top:-140px;background:radial-gradient(circle at 35% 35%,#1351B4,transparent 70%);animation:vl-flutua 18s ease-in-out infinite;}
.vl-vidro--amarelo{width:300px;height:300px;right:90px;bottom:-150px;background:radial-gradient(circle at 40% 40%,#FFCD07,transparent 70%);opacity:.38;animation:vl-flutua 22s ease-in-out -6s infinite reverse;}
.vl-vidro--vermelho{width:260px;height:260px;left:-110px;bottom:24%;background:radial-gradient(circle at 60% 40%,#E52207,transparent 70%);opacity:.34;animation:vl-flutua 26s ease-in-out -12s infinite;}
@keyframes vl-flutua{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(-18px,22px) scale(1.04);}66%{transform:translate(14px,-12px) scale(.97);}}
.vl-textura{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.4px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 75%);mask-image:linear-gradient(180deg,#000 0%,transparent 75%);
}
.vl-logo-linha{display:flex;align-items:center;gap:13px;margin-bottom:clamp(28px,6vh,56px);}
.vl-logo{width:44px;height:44px;flex-shrink:0;background:#fff;border-radius:28%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.22);}
.vl-logo img{width:80%;height:80%;}
.vl-marca-nome{font-size:16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;}
.vl-selo{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;margin-bottom:16px;border-radius:16px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#C3D2E8;
}
.vl-selo::before{content:"";width:7px;height:7px;border-radius:50%;background:#4CC26A;animation:vl-ao-vivo 2.4s ease-out infinite;}
@keyframes vl-ao-vivo{0%{box-shadow:0 0 0 0 rgba(76,194,106,.6);}80%,100%{box-shadow:0 0 0 7px transparent;}}
.vl-titulo{margin:0 0 22px;max-width:15ch;font-size:50px;font-weight:600;letter-spacing:-.03em;line-height:1.1;color:#fff;text-wrap:pretty;}
.vl-lide{margin:0;max-width:34ch;font-size:17px;line-height:1.6;color:#B7C7E0;}
.vl-recursos{list-style:none;margin:clamp(22px,4vh,38px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:560px;}
.vl-recurso{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);transition:background .2s ease,border-color .2s ease,transform .2s ease;}
.vl-recurso:hover{background:rgba(255,255,255,.12);border-color:color-mix(in srgb,var(--c) 45%,transparent);transform:translateY(-2px);}
.vl-recurso-icone{width:38px;height:38px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent);}
.vl-recurso b{display:block;font-size:14px;font-weight:600;color:#fff;}
.vl-recurso span span{display:block;font-size:12.5px;color:#B7C7E0;margin-top:1px;line-height:1.35;}
.vl-numeros{display:flex;gap:12px;margin-top:auto;padding-top:20px;}
.vl-numero{flex:1;padding:18px 20px;border-radius:24px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);}
.vl-numero-valor{font-family:var(--v-mono);font-size:26px;color:#FFCD07;}
.vl-numero-rotulo{font-size:14px;color:#B7C7E0;margin-top:4px;}

.vl-form{padding:clamp(32px,6vh,60px) clamp(40px,5vw,80px);display:flex;flex-direction:column;justify-content:safe center;overflow-y:auto;color:var(--v-corrente);}
.vl-saudacao{margin:0 0 6px;font-size:15px;font-weight:600;color:var(--v-primario);}
.vl-entrar{margin:0 0 8px;font-size:32px;font-weight:600;letter-spacing:-.03em;color:var(--v-texto);}
.vl-apoio{margin:0 0 30px;font-size:14px;color:var(--v-apoio);}
.vl-campos{display:flex;flex-direction:column;gap:16px;}
.vl-campo{
  display:flex;align-items:center;gap:12px;flex-shrink:0;margin:0;cursor:text;
  background:#F8FAFD;border:1px solid var(--v-contorno);border-radius:20px;padding:13px 20px;
  transition:border-color .12s ease,box-shadow .12s ease,background .12s ease;
}
body.theme-dark .vl-campo{background:#252C38;}
.vl-campo:focus-within{background:var(--v-cartao);border:2px solid var(--v-primario);padding:12px 19px;box-shadow:0 0 0 4px color-mix(in srgb,var(--v-primario) 12%,transparent);}
.vl-campo:not(.vl-campo--senha){flex-direction:column;align-items:stretch;gap:0;}
.vl-cresce{flex:1;min-width:0;}
.vl-campo-rotulo{display:block;font-size:13px;font-weight:600;color:var(--v-apoio);letter-spacing:.02em;}
.vl-campo:focus-within .vl-campo-rotulo{color:var(--v-primario);}
#login-screen .vl-campo-valor,#login-screen .vl-campo-valor:focus{
  display:block;width:100%;margin-top:3px;padding:0;border:0 !important;background:transparent !important;box-shadow:none !important;outline:none;
  font-size:16px;color:var(--v-texto) !important;-webkit-text-fill-color:var(--v-texto);
}
#login-screen .vl-campo-valor::placeholder{color:#7D869A !important;-webkit-text-fill-color:#7D869A;}
#login-screen .vl-mono{font-family:var(--v-mono);font-size:17px;}
#login-screen .vl-senha{font-family:var(--v-mono);font-size:18px;letter-spacing:.22em;}
.vl-mostrar{flex-shrink:0;height:40px;padding:0 16px;border:0;border-radius:20px;background:var(--v-secundario);color:var(--v-primario);font-size:14px;font-weight:600;cursor:pointer;}
.vl-mostrar:hover{filter:brightness(.97);}
.vl-botao,.vl-botao:hover,.vl-botao:focus{height:56px;border-radius:28px;font-size:17px;margin-top:6px;transition:transform .15s ease,box-shadow .2s ease,filter .15s ease;}
.vl-botao:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(19,81,180,.32);}
.vl-botao:active{transform:scale(.98);}
.vl-botao > i{display:none;}
#login-error{border-radius:16px;margin-bottom:16px;}
.vl-pe{margin-top:40px;display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#7D869A;font-family:var(--v-mono);}
.vl-pe i{color:#168821;}

/* Entrada em cascata, como no Vitrall */
@keyframes vl-surge{from{opacity:0;transform:translateY(12px);}}
.vl-logo-linha,.vl-chamada,.vl-recurso,.vl-numeros,.vl-form > *,.vl-campos > *{animation:vl-surge .5s cubic-bezier(.2,.8,.2,1) backwards;}
.vl-chamada{animation-delay:.08s;}
.vl-recurso:nth-child(1){animation-delay:.16s;}.vl-recurso:nth-child(2){animation-delay:.22s;}
.vl-recurso:nth-child(3){animation-delay:.28s;}.vl-recurso:nth-child(4){animation-delay:.34s;}
.vl-numeros{animation-delay:.4s;}
.vl-form > .vl-entrar{animation-delay:.05s;}.vl-form > .vl-apoio{animation-delay:.1s;}
.vl-campos > :nth-child(1){animation-delay:.14s;}.vl-campos > :nth-child(2){animation-delay:.18s;}.vl-campos > :nth-child(3){animation-delay:.22s;}

@media (max-width:1100px){
  .vl-recursos{grid-template-columns:1fr;}
  .vl-recurso:nth-child(n+3){display:none;}
}
@media (max-width:820px){
  #login-screen.vl{height:auto;overflow:auto;}
  .vl-moldura{grid-template-columns:1fr;height:auto;min-height:calc(100vh - 32px);}
  .vl-marca{padding:24px 24px 22px;}
  .vl-logo-linha{margin-bottom:18px;}
  .vl-lide,.vl-recursos,.vl-numeros{display:none;}
  .vl-titulo{font-size:26px;margin-bottom:0;}
  .vl-form{padding:28px 24px;}
}
@media (prefers-reduced-motion:reduce){
  .vl-vidro,.vl-selo::before,.vl-logo-linha,.vl-chamada,.vl-recurso,.vl-numeros,.vl-form > *,.vl-campos > *{animation:none !important;}
  .vl-recurso:hover,.vl-botao:hover{transform:none;}
}

/* Janela baixa (notebook com zoom): o painel da marca compacta para os números não cortarem */
@media (min-width:821px) and (max-height:760px){
  .vl-marca{padding-top:28px;padding-bottom:28px;}
  .vl-logo-linha{margin-bottom:22px;}
  .vl-titulo{font-size:40px;margin-bottom:14px;}
  .vl-lide{font-size:15px;}
  .vl-recursos{margin-top:18px;}
  .vl-numero{padding:12px 18px;}
  .vl-numero-valor{font-size:22px;}
}


/* 16/10/2026: tabelas no modo escuro. O Bootstrap 5.3 pinta célula de branco pelas
   variáveis --bs-table-*; aqui elas seguem as cores do tema. */
body.theme-dark .table{--bs-table-bg:transparent;--bs-table-color:var(--v-corrente);--bs-table-striped-bg:transparent;--bs-table-hover-bg:var(--v-secundario);--bs-table-hover-color:var(--v-texto);--bs-table-border-color:var(--v-contorno);color:var(--v-corrente);}
body.theme-dark .table>:not(caption)>*>*{background-color:transparent;color:inherit;}
body.theme-dark .table>thead th,body.theme-dark .table-light,body.theme-dark .table>thead.table-light th{--bs-table-bg:var(--v-secundario);--bs-table-color:var(--v-apoio);background:var(--v-secundario) !important;color:var(--v-apoio) !important;border-bottom-color:var(--v-contorno) !important;}
body.theme-dark .table>tbody td{border-bottom-color:var(--v-contorno);}
body.theme-dark .table-hover>tbody>tr:hover>*{background:var(--v-secundario) !important;color:var(--v-texto);}
@media (max-width:600px){ body.theme-dark .table>tbody>tr{background:var(--v-cartao);border-color:var(--v-contorno);} }


/* ==========================================================================
   16/10/2026: modo escuro revisado
   ========================================================================== */
body.theme-dark{
  /* controles do navegador (ícone do calendário, listas, barras de rolagem) no escuro */
  color-scheme:dark;
  /* contornos e fundos secundários mais discretos: o cartão se separa pelo tom, não pela linha */
  --v-contorno:#2C3442; --v-secundario:#252D3A;
  /* cores de situação legíveis no escuro (o marrom #5C4400 sumia no fundo) */
  --ok:#4ADE80; --okbg:rgba(74,222,128,.13);
  --warn:#FBBF24; --warnbg:rgba(251,191,36,.13);
  --info:#C4B5FD; --infobg:rgba(196,181,253,.14);
  --danger:#F87171; --dangerbg:rgba(248,113,113,.13);
  /* avatar sólido na cor do sistema, sem degradê */
  --av:var(--v-primario);
}
body.theme-dark .t-avatar,body.theme-dark .agent-avatar{color:var(--v-sobre-acento);}
/* brilho colorido no canto dos cartões vira mancha encardida no escuro: sai */
body.theme-dark .metric-card::after,body.theme-dark .stat-mini::after,body.theme-dark .sup-kpi::after{display:none;}
body.theme-dark .metric-card:hover,body.theme-dark .stat-mini:hover,body.theme-dark .sup-kpi:hover{box-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 26px rgba(0,0,0,.35) !important;}
/* agenda: setas do mês eram quadrados cinza-claro */
body.theme-dark .ag-cal-head .nav{background:var(--v-secundario);color:var(--v-corrente);border-color:var(--v-contorno);}
body.theme-dark .ag-cal-head .nav:hover{background:var(--v-contorno);color:var(--v-primario);}
/* blocos de indicador com fundo colorido (Qualidade): tons limpos em vez de marrom e vinho */
body.theme-dark [style*="background:rgba(22,136,33,.1"]{background:rgba(74,222,128,.10) !important;}
body.theme-dark [style*="background:rgba(245,123,0,.1"]{background:rgba(251,191,36,.10) !important;}
body.theme-dark [style*="background:rgba(229,34,7,.1"]{background:rgba(248,113,113,.10) !important;}
body.theme-dark [style*="background:rgba(122,30,110,.1"]{background:rgba(196,181,253,.10) !important;}

/* 16/10/2026: cabeçalho das telas mais baixo (título, faixa, data e botões menores) */
:root{--topbar-h:60px;}
.topbar,body.theme-dark .topbar{margin-top:10px;padding:2px 6px;gap:12px;}
.topbar h5,body.theme-dark .topbar h5{font-size:20px;font-weight:700;padding-bottom:5px;}
.topbar h5::after{width:34px;height:3px;}
.topo__apoio{font-size:12px;margin-top:1px;}
.theme-toggle,body.theme-dark .theme-toggle{width:34px;height:34px;}
#topbar-online{padding:5px 10px;font-size:.74rem;}
.page-content{padding-top:12px;}
.tickets-layout{padding-top:12px;}
@media (max-width:992px){ .topbar h5{font-size:18px;} }


/* 16/10/2026: Configurações em seções e avatar sólido */
.cfg-secao{grid-column:1/-1;font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--v-apoio);margin:6px 2px -6px;}
#page-settings .card{height:100%;}
:root{--av:var(--v-primario);}
.t-avatar,.agent-avatar{color:var(--v-sobre-acento);}
@media (max-width:900px){ #page-settings>div{grid-template-columns:1fr !important;} }


/* 16/10/2026: lista de atendimentos mais compacta (nome em uma linha, selos alinhados) */
.ticket-row{padding:9px 10px;margin-bottom:2px;}
.ticket-row-top{gap:10px;margin-bottom:2px;}
.ticket-row .t-avatar{width:36px;height:36px;border-radius:11px;font-size:.74rem;}
.ticket-row .t-name{display:block;-webkit-line-clamp:unset;white-space:nowrap;text-overflow:ellipsis;font-size:.86rem;}
.ticket-row .t-badges{padding-left:46px;gap:4px;margin:1px 0 2px;}
.ticket-row .t-badges .t-badge,.ticket-row .t-badges .t-sla,.ticket-row .t-badges .ch-chip{font-size:.62rem;padding:2px 8px;}
.ticket-row .t-preview{padding-left:46px;font-size:.76rem;}
#page-tickets .filter-tab{flex:0 0 auto;font-size:11.5px;padding:6px 8px;}
#page-tickets .filter-tabs{justify-content:space-between;}


/* 16/10/2026: modal de pausa mais limpo (sem degradê, sem sombra, linhas leves) */
.brk-head-ic{width:40px;height:40px;flex:none;border-radius:12px;background:var(--v-primario);color:var(--v-sobre-acento);display:flex;align-items:center;justify-content:center;font-size:1.3rem;}
#breakModal .modal-content,#supBreakModal .modal-content{border-radius:18px !important;box-shadow:0 24px 60px -20px rgba(10,20,40,.45) !important;background:var(--v-cartao,#fff);}
.brk-row{gap:12px;border:0;background:transparent;border-radius:12px;padding:10px;transition:background .12s;}
.brk-row:hover{transform:none;box-shadow:none;background:color-mix(in srgb,var(--c,#3aa0e3) 9%,transparent);}
.brk-row:active{transform:scale(.99);}
.brk-row:focus-visible{outline:2px solid var(--c,#3aa0e3);outline-offset:1px;}
.brk-row-ic{width:38px;height:38px;border-radius:11px;font-size:1.1rem;box-shadow:none;background:color-mix(in srgb,var(--c,#3aa0e3) 15%,transparent);color:var(--c,#3aa0e3);}
.brk-row:hover .brk-row-ic{background:var(--c,#3aa0e3);color:#fff;}
.brk-row-name{font-size:.88rem;}
.brk-row-dur{flex-direction:column;align-items:flex-end;gap:0;line-height:1.15;}
.brk-row-dur b{font-size:.84rem;font-weight:800;color:var(--ink);}
.brk-row-dur small{font-size:.66rem;font-weight:600;color:var(--muted);}
body.theme-dark .brk-row-ic{background:color-mix(in srgb,var(--c,#3aa0e3) 26%,transparent);color:color-mix(in srgb,var(--c,#3aa0e3) 55%,#fff);}
body.theme-dark #breakModal .btn-close,body.theme-dark #supBreakModal .btn-close{filter:invert(1) grayscale(1) brightness(1.6);}