/*
 * Portal NOC · estilo de todas as telas do portal.
 *
 * Ordem: 1) base e formulários  2) componentes comuns  3) moldura (menu lateral)
 * 4) telas  5) utilitários de espaçamento (por último, para poderem ajustar os anteriores).
 * card.html e card-vertical.html NÃO usam este arquivo: a imagem do card é
 * fotografada fora do portal e precisa ter o próprio CSS dentro do HTML.
 */

/* ======================================================================== 1. base */
:root{
  --navy:#1B3763;--azul:#0D5C97;--bg:#C7CFDA;--line:#A3B0C1;--txt:#1E293B;--mut:#3D4C61;
  --card-bg:#DFE4EB;--card-border:#A3B0C1;--card-titulo:#1B3763;
  --campo-bg:#EEF1F5;--campo-border:#66758C;--campo-txt:#1E293B;
  --caixa-clara:#D2D9E2;--caixa-clara-borda:#A3B0C1;
  --tabela-borda:#A3B0C1;--sec-bg:#B9C4D2;--sec-txt:#1B3763;
  --menu:272px;--menu-curto:72px;--gut:clamp(12px,2.2vw,28px);
  --cor-falha:#A31919;--cor-falha-bg:rgba(220,38,38,0.10);--cor-falha-borda:rgba(185,28,28,0.45);
  --cor-aten:#8A4107;--cor-aten-bg:rgba(217,119,6,0.10);--cor-aten-borda:rgba(180,83,9,0.45);
  --cor-man:#2563EB;--cor-man-bg:rgba(37,99,235,0.08);--cor-man-borda:rgba(37,99,235,0.35);
  --cor-ok:#115E2D;--cor-ok-bg:rgba(22,163,74,0.10);--cor-ok-borda:rgba(21,128,61,0.45)
}
html.tema-escuro{
  --navy:#1E3A5F;--azul:#1B88D6;--bg:#0B131E;--line:#1E2F46;--txt:#E2E8F0;--mut:#94A3B8;
  --card-bg:#121D2C;--card-border:#1E2F46;--card-titulo:#F1F5F9;
  --campo-bg:#0D1724;--campo-border:#243954;--campo-txt:#F1F5F9;
  --caixa-clara:#101B2B;--caixa-clara-borda:#1E2F46;
  --tabela-borda:#1E2F46;--sec-bg:#1E2F46;--sec-txt:#E2E8F0;
  --cor-falha:#EF4444;--cor-falha-bg:rgba(239,68,68,0.15);--cor-falha-borda:rgba(239,68,68,0.5);
  --cor-aten:#F59E0B;--cor-aten-bg:rgba(245,158,11,0.15);--cor-aten-borda:rgba(245,158,11,0.5);
  --cor-man:#3B82F6;--cor-man-bg:rgba(59,130,246,0.15);--cor-man-borda:rgba(59,130,246,0.5);
  --cor-ok:#10B981;--cor-ok-bg:rgba(16,185,129,0.15);--cor-ok-borda:rgba(16,185,129,0.5)
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--txt);font-size:15px;min-height:100vh}
[hidden]{display:none!important}
::selection{background:#BFDBF5;color:var(--navy)}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
h2{margin:0 0 14px;color:var(--card-titulo);font-size:20px}
label{font-size:13px;color:var(--mut);display:block;margin-bottom:4px}
input,select,textarea{width:100%;max-width:100%;padding:9px 10px;border:1px solid var(--campo-border);border-radius:8px;font:inherit;background:var(--campo-bg);color:var(--campo-txt);accent-color:var(--azul)}
input[type=checkbox]{width:auto}
input:focus,select:focus,textarea:focus{outline:2px solid #93C5E8;outline-offset:0;border-color:var(--azul)}
textarea{resize:vertical;min-height:42px}
table{font-variant-numeric:tabular-nums}

/* ======================================================================== 2. componentes */
.card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:clamp(14px,1.8vw,20px);min-width:0;width:100%}

/* abas de navegação modernas tipo segmented control / capsule bar */
.abas-navegacao-wrapper{display:flex;justify-content:center;align-items:center;width:100%;margin-bottom:22px}
.abas-navegacao{display:inline-flex;align-items:center;gap:4px;margin:0 auto;padding:5px;background:var(--caixa-clara);border:1px solid var(--caixa-clara-borda);border-radius:12px;width:fit-content;max-width:100%;box-shadow:0 1px 3px rgba(0,0,0,.03),inset 0 1px 1px rgba(255,255,255,.5);overflow-x:auto;scrollbar-width:none}
.abas-navegacao::-webkit-scrollbar{display:none}
html.tema-escuro .abas-navegacao{background:rgba(16,27,43,.85);border-color:rgba(255,255,255,.08);box-shadow:0 4px 20px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.05)}
.aba{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:9px;color:var(--mut);font-weight:600;font-size:13.5px;text-decoration:none;white-space:nowrap;transition:all .18s cubic-bezier(.16,1,.3,1);border:1px solid transparent}
.aba:hover{color:var(--txt);background:rgba(0,0,0,.04)}
html.tema-escuro .aba:hover{background:rgba(255,255,255,.05);color:#F1F5F9}
.aba.ativa{background:var(--card-bg);color:var(--azul);font-weight:700;border-color:var(--card-border);box-shadow:0 2px 8px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04)}
html.tema-escuro .aba.ativa{background:#1E2E44;color:#38BDF8;border-color:rgba(56,189,248,.25);box-shadow:0 4px 12px rgba(0,0,0,.35)}
.aba svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease}
.aba:hover svg{transform:translateY(-1px)}
.aba.ativa svg{stroke-width:2.2}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:8px;padding:9px 16px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,filter .15s}
.btn svg{flex:none;width:16px!important;height:16px!important;max-width:16px!important;max-height:16px!important;stroke-width:2.2}
.prim{background:var(--azul);color:#fff}.prim:hover{background:#0F66A3}
.sec{background:var(--sec-bg);color:var(--sec-txt)}.sec:hover{filter:brightness(1.1)}
.perigo{background:transparent;color:var(--cor-falha);padding:6px 10px}
.btn.peq{padding:6px 12px}
.btn.mini{padding:5px 10px}
.btn.largo{width:100%}

.muted{color:var(--mut);font-size:13px}
.alerta{color:var(--cor-falha);font-weight:700}
.ambar{color:var(--cor-aten)}
.erro{color:var(--cor-falha)}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:13px}
.texto-livre{white-space:pre-wrap}
.nowrap{white-space:nowrap}

.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.badge.medio{font-size:13px}
.badge.grande{font-size:14px}
.b-falha{background:#FEE2E2;color:#B91C1C}.b-aten{background:#FEF3C7;color:#B45309}.b-ger{background:#FEF9C3;color:#854D0E}
.b-man{background:#DBEAFE;color:#1D4ED8}.b-ver{background:#F1F5F9;color:#475569}.b-ok{background:#DCFCE7;color:#15803D}

/* avisos em caixa (resultado de ação, senha nova, turno pendente) */
.card.aviso-azul{background:#EFF6FF;border-color:#BFDBFE}
.card.aviso-amarelo{background:#FEF3C7;border-color:#FCD34D}
.card.aviso-verde{background:#ECFDF5;border-color:#A7F3D0}

/* linhas de botões e campos */
.acoes{display:flex;gap:10px;flex-wrap:wrap}
.centro{align-items:center}
.inline{display:flex;gap:6px}
.linha-form{display:flex;gap:12px;flex-wrap:wrap;align-items:end}
.check{display:flex;gap:6px;align-items:center;margin:0}
.barra-titulo{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.barra-titulo h2{margin:0;flex:1}
.barra-titulo.sem-quebra{flex-wrap:nowrap}
.cabeca{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cabeca h2{margin:0}
.a-direita{margin-left:auto}
.form-inline{display:inline}
.caixa-clara{background:var(--caixa-clara);border:1px solid var(--caixa-clara-borda);border-radius:10px;padding:14px}
.grade2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.inteiro{grid-column:1/-1}

/* item de lista com faixa colorida à esquerda (ocorrências e grupos de alerta) */
.item-lista{display:block;border:1px solid var(--card-border);background:var(--card-bg);border-left:6px solid #94A3B8;border-radius:10px;padding:12px 14px}
a.item-lista{text-decoration:none;color:inherit}
.cor-falha{border-left-color:#DC2626}.cor-aten{border-left-color:#F59E0B}.cor-ger{border-left-color:#EAB308}
.cor-man{border-left-color:#2563EB}.cor-ok{border-left-color:#16A34A}

/* tabelas simples (histórico, passagens, usuários) */
.tabela{width:100%;border-collapse:collapse}
.tabela .cabecalho{text-align:left;color:#64748B;font-size:13px}
.tabela .cabecalho th:first-child,.tabela td:first-child{padding:8px}
.tabela tr:not(.cabecalho){border-top:1px solid var(--tabela-borda)}
.tabela tr.vazia{border-top:0}
.tabela .inativo{opacity:.55}
.rolagem-x{overflow-x:auto}

/* texto escuro de passagem de turno e exemplos de API */
.texto-escuro{white-space:pre-wrap;background:#0F172A;color:#E2E8F0;padding:14px;border-radius:10px;font-size:13px}
.texto-escuro.rolavel{max-height:70vh;overflow:auto}
.texto-escuro.codigo{padding:12px;border-radius:8px;font-size:12px}

/* ======================================================================== 3. moldura: menu lateral + conteúdo */
.menu{position:fixed;inset:0 auto 0 0;z-index:40;width:var(--menu);background:var(--navy);color:#fff;
  display:flex;flex-direction:column;padding:16px 12px calc(12px + env(safe-area-inset-bottom));
  transition:transform .26s cubic-bezier(.16,1,.3,1)}
.marca{display:flex;align-items:center;justify-content:center;padding:6px 8px 18px;border-bottom:1px solid rgba(255,255,255,.1);text-decoration:none;color:#fff}
.marca img{height:60px;width:auto;display:block;animation:logoAparecer 12s ease-in-out infinite;transition:transform .2s cubic-bezier(.16,1,.3,1)}
.marca:hover img,.marca:focus-visible img{transform:scale(1.04)}
@keyframes logoAparecer{0%,80%,100%{opacity:1}88%,90%{opacity:0}}
.menu nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 0;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.grupo{font-size:11px;font-weight:600;color:#8FB3D9;padding:14px 12px 6px;white-space:nowrap}
.item{position:relative;display:flex;align-items:center;gap:12px;min-height:40px;padding:8px 12px;border-radius:8px;color:#CFE3F5;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.item svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.item:hover{background:rgba(255,255,255,.08);color:#fff}
.item[aria-current=page]{background:var(--azul);color:#fff}
.item .rot{flex:1;overflow:hidden;text-overflow:ellipsis}
.item .badge{margin-left:auto}
/* submenus trazidos do NOC-Dashboard: a tela que ainda não existe (.em-breve) fica mais apagada e abre a placa "Estamos em obras" */
.submenu>summary{cursor:pointer;list-style:none;user-select:none}
.submenu>summary::-webkit-details-marker{display:none}
.item .seta{width:14px;height:14px;opacity:.6;transition:transform .15s}
.submenu[open] .seta{transform:rotate(90deg)}
.sub{display:flex;flex-direction:column;gap:1px;margin:2px 0 4px 21px;padding-left:8px;border-left:1px solid rgba(255,255,255,.14)}
.sub .item{min-height:34px;gap:10px;padding:6px 10px;font-size:13.5px}
.sub .item svg{width:17px;height:17px}
.item.em-breve:not([aria-current]){color:#8FA9C6}
.item.em-breve:not([aria-current]):hover{color:#CFE3F5}
/* rodapé do menu numa linha só: quem está logado à esquerda, tema / recolher / sair como ícones à direita.
   Eram 4 linhas fixas (168 px) que tiravam altura da lista, que rola por dentro quando um submenu abre. */
.rodape{border-top:1px solid rgba(255,255,255,.1);padding-top:10px;display:flex;align-items:center;gap:4px}
.quem{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:4px 4px 4px 8px;color:#A9CDEB;font-size:13px;white-space:nowrap;overflow:hidden}
.nome-u{min-width:0;overflow:hidden;text-overflow:ellipsis}
.acoes-rodape{flex:none;display:flex;align-items:center;gap:2px}
.acao{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:8px;border:0;background:none;color:#CFE3F5;cursor:pointer;text-decoration:none;transition:background .15s,color .15s}
.acao svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.acao:hover{background:rgba(255,255,255,.1);color:#fff}
.acao:focus-visible{outline:2px solid #7DD3FC;outline-offset:1px}
.acao.sair:hover{background:rgba(248,113,113,.18);color:#FECACA}
.avatar{flex:none;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;text-transform:uppercase}
.tema-toggle .icone-sol{display:none}
.tema-toggle .icone-lua{display:block}
html.tema-escuro .tema-toggle .icone-sol{display:block}
html.tema-escuro .tema-toggle .icone-lua{display:none}
.conteudo{margin-left:var(--menu);min-width:0;min-height:100vh;display:flex;flex-direction:column}
.caixa{flex:1;width:100%;padding:var(--gut);min-width:0}
.aceite{background:#FEF3C7;color:#92400E;padding:10px var(--gut);display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-bottom:1px solid #FDE68A}
.aceite a{color:#92400E;font-weight:600}

/* menu recolhido (só ícones), escolhido pelo usuário no desktop */
.menu-curto .menu{width:var(--menu-curto)}
.menu-curto .conteudo{margin-left:var(--menu-curto)}
.menu-curto .marca{justify-content:center;padding:6px 0 18px}
.menu-curto .marca img{height:auto;width:44px}
.menu-curto .rot,.menu-curto .grupo,.menu-curto .quem .nome-u,.menu-curto .seta{display:none}
.menu-curto .sub{margin:0;padding:0;border:0}
.menu-curto .item{justify-content:center;padding:8px 0}
.menu-curto .item .badge{position:absolute;top:2px;right:6px;padding:1px 5px;font-size:10px}
.menu-curto .rodape,.menu-curto .acoes-rodape{flex-direction:column;gap:2px}
.menu-curto .quem{flex:none;justify-content:center;padding:6px 0}
.menu-curto .recolher svg{transform:rotate(180deg)}

/* login: sem menu */
.sem-menu .conteudo{margin-left:0}
.topo-login{background:var(--navy);color:#fff;display:flex;align-items:center;gap:14px;padding:12px var(--gut)}
.topo-login img{height:36px}
.topo-login b{font-size:17px}

/* barra do celular + gaveta */
.barra{display:none}
.fundo{display:none}

/* ======================================================================== 4. telas */

/* login (02/10/2026): no lugar da foto, a parede de telas do NOC desenhada e em movimento (js/login-painel.js),
   uma tela por setor. É cenário, não é dado ao vivo. O card fica em destaque: maior, mais claro e opaco que a
   parede, com borda e brilho azul e uma sombra larga que escurece as telas em volta, para o formulário não se
   perder no meio da animação. O azul do botão é o do tema escuro mesmo com o portal no tema claro: a tela é escura. */
/* login · página e fundo */
.pagina-login{--azul:#1B88D6}
/* sem o limite de largura das outras telas: em monitor largo sobravam duas faixas da cor do tema nas laterais do login */
.pagina-login .caixa{padding:0;max-width:none}
.entrada{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) clamp(470px,40vw,610px);min-height:100vh;min-height:100dvh;background:#0B131E}
.entrada-fundo{position:absolute;inset:0;z-index:-1;overflow:hidden;background:
  radial-gradient(55% 65% at 25% 45%,rgba(27,136,214,.26),transparent 72%),
  linear-gradient(180deg,#070E1B 0%,#0B1626 60%,#060B15 100%)}
/* chão: reflexo da luz das telas */
.entrada-fundo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16%;background:linear-gradient(180deg,transparent,rgba(27,136,214,.14));pointer-events:none}

/* login · parede de telas (o desenho é do js/login-painel.js; aqui ficam a inclinação, o balanço e a fita de LED) */
/* a parede tem a largura da tela inteira: inclinada, ela encolhe e a ponta de lá encosta no card; só a última coluna some no escuro.
   Em monitor mais largo que 1920 px (2K, ultrawide) o card não cresce junto, então a parede estica (largura acima de 100%) e a
   distância da perspectiva acompanha a tela (78vw): com os valores fixos sobrava um vazio entre a parede e o card. */
.entrada-parede{position:absolute;left:2.5%;top:9%;width:max(100%,calc((100% - 600px)/.72));height:82%;transform-origin:left center;
  transform:perspective(max(1500px,78vw)) rotateY(15deg);animation:parede-balanca 22s ease-in-out infinite alternate;
  -webkit-mask-image:linear-gradient(90deg,#000 76%,transparent 99%);mask-image:linear-gradient(90deg,#000 76%,transparent 99%)}
@keyframes parede-balanca{to{transform:perspective(max(1500px,78vw)) rotateY(17.5deg) translateY(-1%)}}
.entrada-parede canvas{position:absolute;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 0 18px rgba(56,189,248,.28))}
/* fita de LED por cima da parede */
.entrada-parede::before{content:"";position:absolute;left:0;right:0;top:-4.5%;height:3px;border-radius:3px;background:#60A5FA;
  box-shadow:0 0 22px 5px rgba(59,130,246,.7);animation:parede-fita 5s ease-in-out infinite alternate}
@keyframes parede-fita{from{opacity:.55}to{opacity:1}}

/* login · card */
.entrada-form{grid-column:2;display:grid;place-items:center;padding:clamp(20px,3vw,44px);padding-left:0}
.cartao-login{width:100%;max-width:490px;padding:clamp(34px,3.4vw,50px) clamp(30px,3.2vw,46px) clamp(28px,2.8vw,36px);border-radius:20px;
  background:linear-gradient(180deg,rgba(27,48,86,.97),rgba(15,28,52,.97));border:1px solid rgba(125,190,255,.4);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 0 110px 50px rgba(4,9,18,.72),0 0 46px -6px rgba(27,136,214,.6),0 32px 64px -16px rgba(0,5,16,.9),inset 0 1px 0 rgba(255,255,255,.2);
  animation:cartao-chega .7s cubic-bezier(.16,1,.3,1) both}
@keyframes cartao-chega{from{opacity:0;transform:translateY(14px)}}

/* login · logo */
/* o logo (html/login-logo.html) chega quando a tela abre: as três pás do símbolo entram girando, uma atrás da outra,
   e o nome "Dinâmica Telecom" desliza para o lugar logo depois */
.cartao-logo{display:block;height:76px;width:auto;aspect-ratio:372.22/148.25;margin:0 auto 34px;overflow:visible}
.logo-pa{fill:#0077C1;fill-rule:evenodd;transform-box:view-box;transform-origin:95px 80px;animation:logo-pa-chega .9s cubic-bezier(.2,.9,.25,1.15) both}
.logo-pa:nth-of-type(1){animation-delay:.25s}
.logo-pa:nth-of-type(2){animation-delay:.38s}
.logo-pa:nth-of-type(3){animation-delay:.51s}
.logo-nome{fill:#fff;animation:logo-nome-chega .7s cubic-bezier(.16,1,.3,1) .75s both}
@keyframes logo-pa-chega{from{opacity:0;transform:rotate(-150deg) scale(.3)}}
@keyframes logo-nome-chega{from{opacity:0;transform:translateX(-18px)}}

/* login · campos, aviso de Caps Lock, erro e botão Entrar */
.form-login{width:100%}
.form-login label{font-size:14px;font-weight:600;color:#CBD5E1;margin:0 0 6px;letter-spacing:.01em}
.campo-icone{position:relative;margin-bottom:20px}
.campo-icone>svg{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:#94A3B8;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;transition:stroke .15s}
.campo-icone input{height:56px;padding:0 46px 0 44px;border-radius:12px;border:1px solid rgba(148,197,235,.32);background:rgba(6,12,24,.8);color:#F8FAFC;font-size:16px;transition:border-color .15s,box-shadow .15s,background .15s}
.campo-icone input:focus{outline:0;border-color:var(--azul);background:rgba(11,19,30,.95);color:#fff;box-shadow:0 0 0 4px rgba(19,119,189,.3)}
.campo-icone:focus-within>svg{stroke:#38BDF8}
.olho{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:10px;background:none;cursor:pointer;color:#94A3B8;transition:color .15s,background .15s}
.olho:hover{background:rgba(255,255,255,.08);color:#F1F5F9}
.olho svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.olho[aria-pressed=true] .risco{display:none}
.caps{margin:-8px 0 16px;font-size:13px;font-weight:600;color:#FBBF24}
.erro-login{display:flex;gap:10px;align-items:center;margin:0 0 20px;padding:11px 14px;border-radius:12px;background:rgba(185,28,28,.2);border:1px solid rgba(239,68,68,.35);color:#FCA5A5;font-size:14px;font-weight:600}
.erro-login svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.btn.entrar{width:100%;height:58px;margin-top:6px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:17px;
  background:var(--azul);color:#fff;box-shadow:0 8px 24px -6px rgba(19,119,189,.6);transition:background .15s,transform .15s,box-shadow .15s}
.btn.entrar:hover{background:#0F66A3}
.btn.entrar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s cubic-bezier(.16,1,.3,1)}
.btn.entrar:hover svg{transform:translateX(3px)}
.btn.entrar:active{transform:translateY(1px)}
.btn.entrar:disabled{opacity:.75;cursor:progress}
.rodape-login{margin:22px 0 0;text-align:center;font-size:12px;color:#94A3B8}

/* login · celular e tablet em pé: o card fica no meio, por cima; a parede ocupa a tela toda, quase de frente e
   mais apagada, para não brigar com o formulário */
@media (max-width:900px){
  .entrada{grid-template-columns:1fr}
  .entrada-form{grid-column:1;padding:24px 16px}
  .cartao-login{max-width:500px}
  .cartao-logo{height:62px;margin-bottom:24px}
  .entrada-parede{left:3%;top:3%;width:100%;height:94%;opacity:.5;transform:perspective(1500px) rotateY(8deg);animation:none;-webkit-mask-image:none;mask-image:none}
  .entrada-parede::before{display:none}
}
/* login · quem pede menos movimento no sistema vê tudo parado (o js/login-painel.js desenha um quadro só) */
@media (prefers-reduced-motion:reduce){.entrada-parede,.entrada-parede::before,.cartao-login,.logo-pa,.logo-nome{animation:none}}

/* emissão do card do backbone: formulário principal moderno */
.card-emissao{width:100%}
.emissao-topo-dashboard{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--card-border);width:100%}
.emissao-telemetria{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.contador-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--caixa-clara);border:1px solid var(--card-border);padding:6px 14px;border-radius:10px;min-width:68px}
.contador-chip.falha{background:var(--cor-falha-bg);border-color:var(--cor-falha-borda);color:var(--cor-falha)}
.contador-chip.aten{background:var(--cor-aten-bg);border-color:var(--cor-aten-borda);color:var(--cor-aten)}
.contador-chip .num{font-size:18px;font-weight:800;line-height:1}
.contador-chip .leg{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-top:2px;opacity:.9}
.tom-card-badge{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700}
.tom-card-badge i{width:9px;height:9px;border-radius:50%;display:inline-block}
.tom-card-badge.verde{background:var(--cor-ok-bg);color:var(--cor-ok);border:1px solid var(--cor-ok-borda)}
.tom-card-badge.verde i{background:var(--cor-ok)}
.tom-card-badge.vermelho{background:var(--cor-falha-bg);color:var(--cor-falha);border:1px solid var(--cor-falha-borda)}
.tom-card-badge.vermelho i{background:var(--cor-falha)}
.tom-card-badge.ambar{background:var(--cor-aten-bg);color:var(--cor-aten);border:1px solid var(--cor-aten-borda)}
.tom-card-badge.ambar i{background:var(--cor-aten)}

.parametros-container{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;background:var(--caixa-clara);border:1px solid var(--caixa-clara-borda);padding:14px 18px;border-radius:12px;margin-bottom:20px;width:100%}
.campo-param{flex:1 1 180px}
.input-icone-box{position:relative;display:flex;align-items:center}
.input-icone-box svg{position:absolute;left:10px;width:16px;height:16px;color:var(--mut);pointer-events:none}
.input-icone-box input,.input-icone-box select{padding-left:34px;height:38px}
.parametros-acoes{display:flex;gap:10px;align-items:center;margin-left:auto;flex-wrap:wrap}

.lista-modulos-trecho{display:flex;flex-direction:column;gap:14px;margin-bottom:20px;width:100%}
.linha{display:grid;grid-template-columns:1.3fr .9fr 1.1fr 2fr 1.1fr auto;gap:10px;align-items:start;padding:12px 0;border-top:1px solid var(--tabela-borda)}
.linha.sem-borda{border-top:0}
.linha.com-aviso{position:relative}
.linha-aviso{grid-column:1/-1;margin-top:-4px;font-size:12px;color:#C2410C;background:#FFF7ED;border:1px solid #FFEDD5;padding:4px 8px;border-radius:6px}
.btn-remover{color:#94A3B8;padding:8px;font-size:18px;border:0;background:none;cursor:pointer}
.btn-remover:hover{color:var(--cor-falha)}

.linha.modulo-card-trecho{display:flex;flex-direction:column;align-items:stretch;padding:0;border:1px solid var(--card-border);border-left:5px solid var(--cor-falha);border-radius:12px;background:var(--card-bg);box-shadow:0 2px 8px rgba(0,0,0,.03);overflow:hidden;transition:box-shadow .2s;width:100%;box-sizing:border-box}
.linha.modulo-card-trecho:hover{box-shadow:0 6px 16px rgba(0,0,0,.06)}
.linha.modulo-card-trecho.borda-falha{border-left-color:var(--cor-falha)}
.linha.modulo-card-trecho.borda-aten{border-left-color:var(--cor-aten)}
.linha.modulo-card-trecho.borda-man{border-left-color:var(--cor-man)}
.linha.modulo-card-trecho.borda-ok{border-left-color:var(--cor-ok)}

.modulo-card-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--caixa-clara);border-bottom:1px solid var(--card-border);width:100%;box-sizing:border-box}
.modulo-card-ident{display:flex;align-items:center;gap:8px}
.num-tag{background:rgba(0,0,0,.08);font-size:12px;font-weight:700;padding:2px 7px;border-radius:6px}
html.tema-escuro .num-tag{background:rgba(255,255,255,.1)}
.titulo-status-trecho{font-size:14px;font-weight:700;color:var(--card-titulo)}

.btn-remover-card{display:inline-flex;align-items:center;gap:6px;background:var(--cor-falha-bg);color:var(--cor-falha);border:1px solid var(--cor-falha-borda);padding:6px 12px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.btn-remover-card:hover{background:#DC2626;color:#fff}
.btn-remover-card svg{width:15px;height:15px}

.modulo-card-corpo{padding:16px;width:100%;box-sizing:border-box}

/* layout em 2 colunas: campos padronizados à esquerda + detalhamento destaque à direita */
.grade-card-modular{display:grid;grid-template-columns:clamp(300px,35%,420px) 1fr;gap:18px;width:100%;box-sizing:border-box;align-items:stretch}
.coluna-campos-empilhados{display:flex;flex-direction:column;gap:10px;width:100%;box-sizing:border-box}
.campo-item{display:flex;flex-direction:column;width:100%}
.campo-item label,.coluna-detalhamento-destaque label{font-size:13px;font-weight:600;color:var(--mut);margin-bottom:4px;display:block}
.campo-item input,.campo-item select{height:38px;width:100%;box-sizing:border-box}

.coluna-detalhamento-destaque{display:flex;flex-direction:column;width:100%;height:100%;box-sizing:border-box}
.coluna-detalhamento-destaque textarea{flex:1;width:100%;min-height:190px;height:100%;box-sizing:border-box;resize:vertical;line-height:1.5;font-size:14px;padding:10px 12px}

/* compatibilidade anterior */
.grade-trecho-superior{display:grid;grid-template-columns:1.8fr 1.2fr 1fr;gap:14px;width:100%;box-sizing:border-box}
.grade-trecho-inferior{display:grid;grid-template-columns:2.6fr 1fr;gap:14px;width:100%;box-sizing:border-box}

.select-status-dinamico{font-weight:700;border-width:2px;cursor:pointer}
.select-status-dinamico.falha{background:var(--cor-falha-bg);border-color:var(--cor-falha);color:var(--cor-falha)}
.select-status-dinamico.aten{background:var(--cor-aten-bg);border-color:var(--cor-aten);color:var(--cor-aten)}
.select-status-dinamico.man{background:var(--cor-man-bg);border-color:var(--cor-man);color:var(--cor-man)}
.select-status-dinamico.ok{background:var(--cor-ok-bg);border-color:var(--cor-ok);color:var(--cor-ok)}
option.opt-falha{color:var(--cor-falha);background:var(--card-bg);font-weight:700}
option.opt-aten{color:var(--cor-aten);background:var(--card-bg);font-weight:700}
option.opt-man{color:#2563EB;background:var(--card-bg);font-weight:700}
option.opt-ok{color:#16A34A;background:var(--card-bg);font-weight:700}

.caixa-info-aviso{display:flex;gap:12px;align-items:center;background:var(--caixa-clara);border:1px solid var(--card-border);padding:12px 16px;border-radius:10px;font-size:13px;color:var(--mut);line-height:1.45;margin-bottom:20px;width:100%}
.caixa-info-aviso svg{flex:none;width:20px;height:20px;color:var(--azul)}

.emissao-rodape-acoes{display:flex;justify-content:center;margin:16px 0 6px;width:100%}
.btn-gerar-grande{padding:14px 32px;font-size:16px;font-weight:700;border-radius:10px;box-shadow:0 6px 20px rgba(19,119,189,.35);transition:transform .15s,box-shadow .15s}
.btn-gerar-grande:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(19,119,189,.45)}
.btn-gerar-grande svg{width:18px!important;height:18px!important}

/* modais modernos */
.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.65);backdrop-filter:blur(3px);z-index:90;place-items:center;padding:16px}
.modal-backdrop.aberto{display:grid}
.modal-caixa{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;box-shadow:0 24px 50px rgba(0,0,0,.25);width:100%;max-width:480px;padding:24px;display:flex;flex-direction:column;gap:16px;animation:zoomEntrada .2s ease-out}
@keyframes zoomEntrada{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.modal-topo{display:flex;gap:14px;align-items:flex-start}
.modal-icone{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;background:rgba(19,119,189,.12);color:var(--azul)}
.modal-icone.perigo{background:rgba(220,38,38,.12);color:var(--cor-falha)}
.modal-icone svg{width:22px;height:22px}
.modal-titulos h3{margin:0;font-size:18px;color:var(--card-titulo)}
.modal-titulos p{margin:4px 0 0;font-size:13px;color:var(--mut)}
.modal-resumo{background:var(--caixa-clara);border:1px solid var(--card-border);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.modal-resumo-linha{display:flex;justify-content:space-between;align-items:center}
.modal-resumo-linha span{color:var(--mut)}
.modal-resumo-linha strong{color:var(--txt)}
.modal-acoes{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}
.modal-subtexto{font-size:13px;color:var(--mut);line-height:1.45;margin:0}
.btn-perigo-modal{background:#DC2626;color:#fff}
.btn-perigo-modal:hover{background:#B91C1C}

/* histórico moderno */
.card-historico{width:100%}
.historico-kpis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px;width:100%}
.kpi-card{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:12px;background:var(--caixa-clara);border:1px solid var(--caixa-clara-borda)}
.kpi-icone{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:none}
.kpi-icone svg{width:22px;height:22px}
.kpi-icone.azul{background:rgba(19,119,189,.12);color:var(--azul)}
.kpi-icone.vermelho{background:var(--cor-falha-bg);color:var(--cor-falha)}
.kpi-icone.verde{background:var(--cor-ok-bg);color:var(--cor-ok)}
.kpi-info{display:flex;flex-direction:column}
.kpi-info .num{font-size:24px;font-weight:800;line-height:1.1;color:var(--card-titulo)}
.kpi-info .rotulo{font-size:12px;color:var(--mut);font-weight:600;margin-top:2px}

.historico-filtros{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;width:100%}
.filtro-busca-box{position:relative;flex:1 1 280px;display:flex;align-items:center}
.filtro-busca-box svg{position:absolute;left:10px;width:16px;height:16px;color:var(--mut);pointer-events:none}
.filtro-busca-box input{padding-left:34px;height:38px}
.filtro-pills{display:flex;gap:6px;flex-wrap:wrap}
.filtro-pill{background:none;border:1px solid var(--campo-border);padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--mut);cursor:pointer;transition:all .15s}
.filtro-pill:hover{background:var(--caixa-clara);color:var(--txt)}
.filtro-pill.ativo{background:var(--navy);border-color:var(--navy);color:#fff}
html.tema-escuro .filtro-pill.ativo{background:var(--azul);border-color:var(--azul)}

.tabela-moderna-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--card-border);border-radius:10px;width:100%}
table.tabela-moderna{width:100%;border-collapse:collapse;text-align:left;font-size:13.5px}
table.tabela-moderna th{background:var(--caixa-clara);color:var(--mut);font-weight:700;font-size:12px;padding:10px 14px;border-bottom:1px solid var(--card-border);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
table.tabela-moderna td{padding:12px 14px;border-bottom:1px solid var(--card-border);vertical-align:middle}
table.tabela-moderna tr:last-child td{border-bottom:0}
table.tabela-moderna tr:hover td{background:rgba(0,0,0,.015)}
html.tema-escuro table.tabela-moderna tr:hover td{background:rgba(255,255,255,.02)}

.ref-badge{display:flex;align-items:center;gap:6px;font-weight:700;white-space:nowrap}
.hora-tag{background:var(--caixa-clara);border:1px solid var(--card-border);padding:2px 6px;border-radius:6px;font-size:12px;color:var(--azul)}
.status-card-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.status-card-pill.vermelho{background:var(--cor-falha-bg);color:var(--cor-falha);border:1px solid var(--cor-falha-borda)}
.status-card-pill.ambar{background:var(--cor-aten-bg);color:var(--cor-aten);border:1px solid var(--cor-aten-borda)}
.status-card-pill.verde{background:var(--cor-ok-bg);color:var(--cor-ok);border:1px solid var(--cor-ok-borda)}

.usuario-badge{display:flex;align-items:center;gap:7px}
.usuario-avatar{width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700}
html.tema-escuro .usuario-avatar{background:var(--azul)}

.btn-acao-tabela{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:6px;background:var(--caixa-clara);border:1px solid var(--card-border);color:var(--azul);text-decoration:none;font-weight:600;font-size:12.5px;transition:all .15s}
.btn-acao-tabela:hover{background:var(--azul);color:#fff;border-color:var(--azul)}
.btn-acao-tabela svg{width:14px;height:14px}
.col-acoes{text-align:right}
.col-acoes .btn-acao-tabela{margin-left:auto}
.texto-ok-destaque{color:var(--cor-ok);font-weight:600}
.tabela-vazia-moderna{text-align:center;padding:32px;color:var(--mut)}

/* conformidade moderna */
.card-conformidade{width:100%}
.sla-banner-box{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;background:linear-gradient(135deg,rgba(19,119,189,.08) 0%,rgba(19,119,189,.02) 100%);border:1px solid var(--card-border);border-left:5px solid var(--azul);padding:18px 22px;border-radius:14px;margin-bottom:18px;width:100%}
.sla-destaque{display:flex;align-items:center;gap:18px}
.sla-gauge-circulo{width:68px;height:68px;border-radius:50%;background:var(--azul);color:#fff;display:grid;place-items:center;font-size:22px;font-weight:800;box-shadow:0 4px 14px rgba(19,119,189,.3);flex:none}
.sla-textos h3{margin:0 0 4px;font-size:18px;color:var(--card-titulo)}
.sla-textos p{margin:0;font-size:13px;color:var(--mut)}

.conformidade-kpis{display:flex;gap:10px;flex-wrap:wrap}
.conf-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--card-bg);border:1px solid var(--card-border);padding:8px 14px;border-radius:10px;min-width:70px}
.conf-chip .valor{font-size:18px;font-weight:800;line-height:1}
.conf-chip .legenda{font-size:11px;color:var(--mut);font-weight:600;margin-top:2px}
.conf-chip.ok{border-color:var(--cor-ok-borda);background:var(--cor-ok-bg);color:var(--cor-ok)}
.conf-chip.atrasada{border-color:var(--cor-aten-borda);background:var(--cor-aten-bg);color:var(--cor-aten)}
.conf-chip.faltou{border-color:var(--cor-falha-borda);background:var(--cor-falha-bg);color:var(--cor-falha)}

.legenda-conformidade{display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap;padding:4px 4px 18px;font-size:13px;color:var(--mut);width:100%}
.legenda-item{display:flex;align-items:center;gap:8px}
.legenda-ponto{width:100px;height:10px;border-radius:3px}
.legenda-ponto.ok{background:var(--cor-ok)}
.legenda-ponto.atrasada{background:var(--cor-aten)}
.legenda-ponto.faltou{background:var(--cor-falha)}

.heatmap-container{border:1px solid var(--card-border);border-radius:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:18px;width:100%}
table.grade-heatmap{width:100%;border-collapse:separate;border-spacing:5px;padding:8px}
table.grade-heatmap th{font-size:12px;color:var(--mut);font-weight:700;padding:6px;text-align:center}
table.grade-heatmap td{padding:0}
td.coluna-dia{font-size:13px;font-weight:700;color:var(--card-titulo);padding:0 8px;white-space:nowrap;text-align:left}

.celula-bloco{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;border-radius:8px;font-size:12px;text-decoration:none;min-height:48px;transition:transform .15s}
.celula-bloco:hover{transform:scale(1.03)}
.celula-bloco .hora-emissao{font-weight:800;line-height:1.2}
.celula-bloco .autor-emissao{font-size:10px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:65px}
.celula-bloco.ok{background:var(--cor-ok-bg);color:var(--cor-ok);border:1px solid var(--cor-ok-borda)}
.celula-bloco.atrasada{background:var(--cor-aten-bg);color:var(--cor-aten);border:1px solid var(--cor-aten-borda)}
.celula-bloco.faltou{background:var(--cor-falha-bg);color:var(--cor-falha);border:1px dashed var(--cor-falha-borda);font-weight:700;text-transform:lowercase}
.celula-bloco.neutra{background:var(--caixa-clara);color:var(--mut);border:1px solid transparent;font-weight:600}
.tag-atraso{font-size:9.5px;font-weight:800;background:rgba(217,119,6,.2);padding:1px 4px;border-radius:4px;margin-top:2px}

/* histórico: grade de dias */
.grade{width:100%;border-collapse:separate;border-spacing:4px}
.grade th{font-size:12px;color:#64748B;font-weight:600;padding:4px}
.grade td{text-align:center;padding:8px 4px;border-radius:8px;font-size:13px}
.grade td small{display:block;font-size:11px;opacity:.8}
.grade a{color:inherit;font-weight:700;text-decoration:none}
.tag.ok,.grade .ok{background:#DCFCE7;color:#15803D}
.tag.atrasada,.grade .atrasada{background:#FEF3C7;color:#B45309}
.tag.faltou,.grade .faltou{background:#FEE2E2;color:#B91C1C;font-weight:700}
.grade .futura{background:var(--caixa-clara)}
.grade .antes{background:transparent}

/* ocorrências: lista */
.campo-busca{width:240px}
.titulo-item{font-size:16px}
.resumo-ultima{font-size:14px}
.marcas{display:flex;gap:12px;flex-wrap:wrap;font-size:13px}

/* ocorrência: detalhe e linha do tempo */
.proxima{margin:8px 0 0}
.subtitulo{color:var(--card-titulo);font-size:16px;margin:18px 0 8px}
.evento{border-left:3px solid #CBD5E1;padding:4px 0 8px 12px;margin-left:4px}
.evento.no-turno{border-left-color:#1377BD}
.marca-turno{color:#1377BD;font-weight:700}
.campo-data-hora{width:210px}
.campo-largo{flex:1;min-width:220px}
.check.encerrar{color:#15803D;font-weight:600;margin:0 0 10px}
.opcoes{display:flex;gap:18px;flex-wrap:wrap;margin:14px 0}
.bloco-card{background:var(--caixa-clara);border:1px solid var(--card-border);border-radius:10px;padding:12px;margin-bottom:14px}

/* alertas (.al), redesenhada em 02/10/2026: um cartão por trecho, tempo de queda em destaque, avisos de flap e de
   repetição. Cores só pelas variáveis --cor-* do portal, para valer no tema claro e no escuro. */
.enlace{font-size:15px}
.lista-alarmes{margin:8px 0;padding-left:18px;font-size:13px}
.select-compacto{width:auto;max-width:320px;padding:6px}
.al{display:grid;gap:14px}
.al svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.al-topo{display:flex;align-items:center;gap:14px}
.al-topo-icone{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(19,119,189,.12);color:var(--azul)}
.al-topo-icone svg{width:22px;height:22px}
.al-topo h2{margin:0}
.al-topo p{margin:2px 0 0}
.al-ajuda .vm-guia{margin-top:12px}
.al-leitura{margin:10px 0 0;padding-top:8px;border-top:1px solid var(--cor-man-borda);font-size:13px;color:var(--mut)}
#al-miolo{display:grid;gap:14px}
#al-miolo>.alerta{margin:0}
.al-abas{margin:0}
.al-abas .vm-aba{display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.al-conta{min-width:20px;padding:1px 6px;border-radius:999px;font-size:12px;font-weight:700;text-align:center;
  background:var(--caixa-clara);color:var(--mut);border:1px solid var(--card-border);font-variant-numeric:tabular-nums}
.al-conta.falha{background:var(--cor-falha-bg);color:var(--cor-falha);border-color:var(--cor-falha-borda)}
.al-conta.aten{background:var(--cor-aten-bg);color:var(--cor-aten);border-color:var(--cor-aten-borda)}
.al-lista{display:grid;gap:12px}
.al-card{--al-cor:var(--cor-ok);display:grid;gap:10px;padding:14px 16px;
  border:1px solid var(--card-border);border-left:4px solid var(--al-cor);border-radius:12px;background:var(--card-bg)}
.al-card.falha{--al-cor:var(--cor-falha)}
.al-card.aten{--al-cor:var(--cor-aten)}
.al-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.al-nome{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.al-nome .enlace{font-size:16px;color:var(--card-titulo);overflow-wrap:anywhere}
.al-tempo{display:grid;justify-items:end;gap:1px;margin-left:auto;text-align:right;white-space:nowrap}
.al-tempo b{font-size:15px;color:var(--al-cor);font-variant-numeric:tabular-nums}
.al-tempo span{font-size:12px;color:var(--mut)}
.al-selos{display:flex;gap:6px;flex-wrap:wrap}
.al-aviso{margin:0;padding:8px 12px;border-radius:8px;font-size:13px;line-height:1.45;color:var(--txt);
  border:1px solid var(--cor-aten-borda);background:var(--cor-aten-bg)}
.al-aviso b{color:var(--cor-aten)}
.al-alarmes{list-style:none;margin:0;padding:0;display:grid;border:1px solid var(--card-border);border-radius:8px;overflow:hidden;font-size:13px}
.al-alarmes li{display:grid;grid-template-columns:104px minmax(150px,230px) 1fr;gap:4px 12px;padding:7px 10px;align-items:baseline}
.al-alarmes.com-fim li{grid-template-columns:200px minmax(150px,230px) 1fr}
.al-alarmes li+li{border-top:1px solid var(--card-border)}
.al-alarmes li:nth-child(odd){background:var(--caixa-clara)}
.al-hora{color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap}
.al-ponta{font-weight:600;color:var(--card-titulo);overflow-wrap:anywhere}
.al-texto{color:var(--txt);overflow-wrap:anywhere}
.al-texto a{color:var(--azul);font-weight:600}
.al-mais>summary{cursor:pointer;font-size:13px;color:var(--mut);padding:2px 0}
.al-mais[open]>summary{margin-bottom:6px}
.al-acoes{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--card-border)}
.al-acoes form{display:flex;align-items:center;gap:6px;margin:0}
.al-acoes .al-ignorar{margin-left:auto}
.al-link{border:0;background:none;padding:6px 8px;font:inherit;font-size:13px;font-weight:600;color:var(--mut);cursor:pointer;border-radius:6px}
.al-link:hover{color:var(--cor-falha);background:var(--cor-falha-bg)}
.al-instaveis{padding:12px 14px;border-radius:12px;border:1px solid var(--cor-aten-borda);background:var(--cor-aten-bg)}
.al-instaveis h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px;font-size:14px;color:var(--cor-aten)}
.al-instaveis h3 .muted{font-weight:400;font-size:13px}
.al-instaveis ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px}
.al-instaveis li{display:flex;gap:6px 14px;flex-wrap:wrap;align-items:baseline}
.al-instaveis li b{color:var(--card-titulo)}
.al-instaveis li span{color:var(--mut)}
.al-faixa{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px}
.al-faixa form{margin:0}
.al-vazio{display:grid;justify-items:center;gap:8px;padding:34px 16px;border:1px dashed var(--card-border);border-radius:12px;color:var(--mut);text-align:center}
.al-vazio svg{width:28px;height:28px;color:var(--cor-ok)}
.al-vazio b{font-weight:600;color:var(--txt)}
@media (max-width:760px){
  .al-alarmes li,.al-alarmes.com-fim li{grid-template-columns:1fr}
  .al-tempo{justify-items:start;text-align:left;margin-left:0}
  .al-acoes .al-ignorar{margin-left:0}
}

/* passagem de turno (.pt): topo com os números do turno, pendências, observações e o texto editável.
   Cores só pelas variáveis --cor-* do portal, para valer no tema claro e no escuro. */
.pt{display:grid;gap:14px}
.pt svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pt a:not(.btn){color:var(--azul);font-weight:600;text-decoration:none}
.pt a:not(.btn):hover{text-decoration:underline}
.pt .falha{--pt-cor:var(--cor-falha);--pt-fundo:var(--cor-falha-bg);--pt-borda:var(--cor-falha-borda)}
.pt .aten{--pt-cor:var(--cor-aten);--pt-fundo:var(--cor-aten-bg);--pt-borda:var(--cor-aten-borda)}
.pt .ok{--pt-cor:var(--cor-ok);--pt-fundo:var(--cor-ok-bg);--pt-borda:var(--cor-ok-borda)}
.pt-aceite{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 16px;border-radius:12px;border:1px solid var(--cor-aten-borda);
  border-left:4px solid var(--cor-aten);background:var(--cor-aten-bg);color:var(--txt)}
.pt-aceite b{flex:1 1 280px}
.pt-topo{display:flex;align-items:center;gap:14px}
.pt-topo-icone{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(19,119,189,.12);color:var(--azul)}
.pt-topo-icone svg{width:22px;height:22px}
.pt-topo h2{margin:0}
.pt-topo p{margin:2px 0 0}
.pt-nota{margin:12px 0 0;padding:8px 12px;border-radius:8px;background:var(--caixa-clara);font-size:13px;color:var(--mut)}
.pt-numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:14px}
.pt-numero{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;border:1px solid var(--pt-borda,var(--card-border));background:var(--pt-fundo,var(--caixa-clara))}
.pt-numero b{font-size:26px;line-height:1;font-variant-numeric:tabular-nums;color:var(--pt-cor,var(--card-titulo))}
.pt-numero span{font-size:13px;font-weight:600;color:var(--txt)}
.pt-subtitulo{margin:18px 0 8px;font-size:13px;font-weight:700;color:var(--mut)}
.pt-pendencias{list-style:none;margin:0;padding:0;border:1px solid var(--card-border);border-radius:10px;overflow:hidden}
.pt-pendencias li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:9px 12px;border-bottom:1px solid var(--card-border)}
.pt-pendencias li:last-child{border-bottom:0}
.pt-pendencias li:hover{background:var(--caixa-clara)}
.pt-pendencias a{flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
.pt-marca{padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;color:var(--pt-cor);background:var(--pt-fundo);border:1px solid var(--pt-borda)}
.pt-form label{font-weight:600;color:var(--txt)}
.pt-form label .muted{font-weight:400}
.pt-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:14px 0 18px}
.pt-acoes>:first-child{flex:1 1 240px;margin:0}
.pt-acoes .check{font-weight:400}
.barra-texto{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.barra-texto label{margin:0;flex:1}
.aviso-edicao{font-size:12px;font-weight:600;color:var(--cor-aten);background:var(--cor-aten-bg);border:1px solid var(--cor-aten-borda);padding:3px 10px;border-radius:999px}
textarea.texto-escuro.editavel{display:block;width:100%;min-height:320px;max-height:75vh;overflow:auto;resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;font-size:13px;line-height:1.5;border:1px solid #0F172A;caret-color:#7DD3FC}
textarea.texto-escuro.editavel:focus{outline:2px solid #93C5E8;outline-offset:2px;border-color:#0F172A}
textarea.texto-escuro.editavel::selection{background:#1E4E7E;color:#fff}

/* tela Acesso (.ac): avisos, pesquisa, filtro por tipo (chips) e um card por grupo de equipamentos.
   Cores só pelas variáveis do portal, para valer no tema claro e no escuro. */
.ac{display:grid;gap:14px}
.ac svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ac a:not(.btn){color:var(--azul);font-weight:600;text-decoration:none}
.ac a:not(.btn):hover{text-decoration:underline}
.ac-aviso{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid var(--ac-borda);border-left:4px solid var(--ac-cor);
  background:var(--ac-fundo);color:var(--txt);font-size:14px;line-height:1.5}
.ac-aviso.info{--ac-cor:var(--cor-man);--ac-fundo:var(--cor-man-bg);--ac-borda:var(--cor-man-borda)}
.ac-aviso.aten{--ac-cor:var(--cor-aten);--ac-fundo:var(--cor-aten-bg);--ac-borda:var(--cor-aten-borda)}
.ac-aviso svg{width:18px;height:18px;margin-top:2px;color:var(--ac-cor)}
.ac-aviso p{margin:0}
.ac-topo{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.ac-topo-icone{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(19,119,189,.12);color:var(--azul)}
.ac-topo-icone svg{width:22px;height:22px}
.ac-topo-titulo{flex:1 1 260px;min-width:0}
.ac-topo h2{margin:0}
.ac-topo p{margin:2px 0 0}
.ac-total{font-size:14px;font-weight:600;color:var(--mut);font-variant-numeric:tabular-nums}
.ac-busca{position:relative;margin-top:14px}
.ac-busca svg{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--mut);pointer-events:none}
.busca-equip{width:100%;font-size:16px;padding:12px 14px 12px 42px;border-radius:10px}
.filtro-grupos{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{border:1px solid var(--campo-border);background:var(--caixa-clara);color:var(--txt);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer;
  transition:background .15s,border-color .15s}
.chip:hover{border-color:var(--azul)}
.chip span{margin-left:4px;color:var(--mut);font-variant-numeric:tabular-nums}
.chip.ativo{background:var(--azul);border-color:var(--azul);color:#fff}
.chip.ativo span{color:rgba(255,255,255,.75)}
.ac-nota{margin:12px 0 0;padding:8px 12px;border-radius:8px;background:var(--caixa-clara);font-size:13px;color:var(--mut)}
.grupo-equip[hidden]{display:none}
.grupo-equip>summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;user-select:none}
.grupo-equip>summary::-webkit-details-marker{display:none}
.grupo-equip>summary::before{content:"▾";width:14px;color:var(--mut)}
.grupo-equip:not([open])>summary::before{content:"▸"}
.grupo-equip>summary h3{margin:0;font-size:16px;color:var(--card-titulo)}
.ac-qtd{font-size:13px;font-weight:600;color:var(--mut);font-variant-numeric:tabular-nums}
.tabela-equip{margin-top:10px;font-size:14px}
.tabela-equip th,.tabela-equip td{padding:8px 10px;text-align:left;vertical-align:middle}
.tabela-equip td:last-child{text-align:right}
.tabela-equip td b{white-space:nowrap}
.tabela-equip tr.linha-equip:hover{background:var(--caixa-clara)}
.tabela-equip code{padding:2px 8px;border-radius:6px;background:var(--caixa-clara);border:1px solid var(--card-border);font-family:ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;font-size:12.5px;color:var(--txt)}
.pequeno{font-size:12px}
.ac-vazio{display:grid;justify-items:center;gap:6px;padding:32px 16px;text-align:center}
.ac-vazio svg{width:32px;height:32px;stroke-width:1.6;color:var(--mut)}
.ac-vazio b{font-size:16px;color:var(--card-titulo)}
.ac-vazio p{margin:0;max-width:520px}
.ac-vazio+.ac-vazio{display:none}

/* ======================================================================== usuários (Opção C: Modern Dark NOC HUD DataGrid) */
.card-gestao-usuarios{width:100%;box-sizing:border-box}
.usuarios-header-hud{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--card-border)}
.usuarios-ident-hud{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.usuarios-ident-hud h2{margin:0;font-size:20px;color:var(--card-titulo)}

.hud-status-badge{position:relative;display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--cor-ok-bg);color:var(--cor-ok);border:1px solid var(--cor-ok-borda)}
.hud-pulse-container{position:relative;width:8px;height:8px;display:inline-flex;align-items:center;justify-content:center}
.hud-pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--cor-ok)}
.hud-pulse-radar{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--cor-ok);opacity:.6;animation:pulseRadar 2s infinite ease-out}
@keyframes pulseRadar{0%{transform:scale(.5);opacity:.8}100%{transform:scale(2.2);opacity:0}}

.usuarios-acoes-hud{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}

/* painel retrátil de criação de usuário */
.box-criar-usuario-hud{background:var(--caixa-clara);border:1px solid var(--caixa-clara-borda);border-radius:14px;padding:18px 20px;margin-bottom:20px;animation:slideDownHud .22s cubic-bezier(.16,1,.3,1)}
@keyframes slideDownHud{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.box-criar-cabecalho{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.box-criar-titulo{display:flex;align-items:center;gap:10px}
.box-criar-titulo svg{width:20px;height:20px;color:var(--azul)}
.box-criar-titulo h3{margin:0;font-size:16px;color:var(--card-titulo)}
.btn-fechar-painel{background:none;border:0;color:var(--mut);font-size:18px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .15s}
.btn-fechar-painel:hover{color:var(--txt);background:rgba(0,0,0,.06)}
html.tema-escuro .btn-fechar-painel:hover{background:rgba(255,255,255,.08)}

.grade-criar-hud{display:grid;grid-template-columns:1.2fr 1.6fr 1.1fr auto;gap:12px;align-items:end}
.campo-hud{display:flex;flex-direction:column}
.campo-hud label{font-size:12.5px;font-weight:600;color:var(--mut);margin-bottom:4px}
.campo-hud-btn{display:flex;align-items:end}
.campo-hud-btn .btn{height:38px;padding:0 18px}

.box-info-hud{display:flex;gap:10px;align-items:flex-start;background:rgba(19,119,189,.06);border:1px solid rgba(19,119,189,.2);border-radius:10px;padding:10px 14px;margin-top:14px;font-size:12.5px;color:var(--mut);line-height:1.45}
.box-info-hud svg{width:18px;height:18px;color:var(--azul);flex:none;margin-top:1px}

/* banner de nova senha gerada */
.aviso-senha-hud{background:linear-gradient(135deg,rgba(245,158,11,.1) 0%,rgba(245,158,11,.03) 100%);border:1px solid rgba(245,158,11,.4);border-left:5px solid #F59E0B;border-radius:14px;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:18px}
.aviso-senha-topo{display:flex;align-items:center;gap:14px}
.aviso-senha-icone{width:44px;height:44px;border-radius:12px;background:rgba(245,158,11,.18);color:#D97706;display:grid;place-items:center;flex:none}
html.tema-escuro .aviso-senha-icone{color:#FBBF24}
.aviso-senha-icone svg{width:22px;height:22px}
.aviso-senha-texto h4{margin:0 0 4px;font-size:16px;color:var(--card-titulo)}
.aviso-senha-texto p{margin:0;font-size:13px;color:var(--mut)}
.aviso-senha-box{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.senha-nova-destaque{font-family:ui-monospace,Menlo,monospace;font-size:18px;font-weight:700;background:var(--card-bg);border:1px solid var(--campo-border);color:var(--azul);padding:8px 16px;border-radius:8px;letter-spacing:.05em}
.btn-copiar{height:42px;padding:0 18px}

/* datagrid de usuários estilo hud */
.tabela-usuarios-hud-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--card-border);border-radius:12px;width:100%}
table.tabela-usuarios-hud{width:100%;border-collapse:collapse;text-align:left;font-size:13.5px}
table.tabela-usuarios-hud th{background:var(--caixa-clara);color:var(--mut);font-weight:700;font-size:11.5px;padding:12px 14px;border-bottom:1px solid var(--card-border);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
table.tabela-usuarios-hud td{padding:12px 14px;border-bottom:1px solid var(--card-border);vertical-align:middle}
table.tabela-usuarios-hud tr:last-child td{border-bottom:0}
table.tabela-usuarios-hud tr:hover td{background:rgba(0,0,0,.015)}
html.tema-escuro table.tabela-usuarios-hud tr:hover td{background:rgba(255,255,255,.02)}

.usuario-celula{display:flex;align-items:center;gap:12px}
.avatar-usuario-hud{position:relative;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#1E3A5F 0%,#1377BD 100%);color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center;flex:none;box-shadow:0 2px 6px rgba(19,119,189,.25)}
.avatar-usuario-hud.online-dot::after{content:"";position:absolute;bottom:0;right:0;width:11px;height:11px;border-radius:50%;background:#10B981;border:2px solid var(--card-bg)}
.usuario-dados{display:flex;flex-direction:column}
.usuario-login{font-weight:700;color:var(--txt);display:flex;align-items:center;gap:6px}
.usuario-voce-badge{font-size:10px;font-weight:700;background:rgba(19,119,189,.15);color:var(--azul);padding:1px 6px;border-radius:4px;text-transform:uppercase}
.usuario-nome{font-size:12.5px;color:var(--mut);margin-top:2px}

/* autenticação tag ciano hud */
.tag-auth-radius{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.04em;background:rgba(6,182,212,.12);color:#0891B2;border:1px solid rgba(6,182,212,.35)}
html.tema-escuro .tag-auth-radius{background:rgba(6,182,212,.15);color:#22D3EE;border-color:rgba(6,182,212,.5);box-shadow:0 0 10px rgba(6,182,212,.2)}
.tag-auth-local{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--caixa-clara);color:var(--mut);border:1px solid var(--card-border)}

/* status badges */
.tag-status-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.tag-status-pill.ativo{background:var(--cor-ok-bg);color:var(--cor-ok);border:1px solid var(--cor-ok-borda)}
.tag-status-pill.inativo{background:var(--caixa-clara);color:var(--mut);border:1px solid var(--card-border)}
.tag-status-pill i{width:6px;height:6px;border-radius:50%;display:inline-block;background:currentColor}

/* dados de atividade e logins */
.telemetria-login-box{display:flex;flex-direction:column;font-size:13px}
.telemetria-login-box b{color:var(--txt)}
.telemetria-login-sub{font-size:11.5px;color:var(--mut);margin-top:2px}
.link-logins-hud{color:var(--azul);text-decoration:none;font-weight:700}
.link-logins-hud:hover{text-decoration:underline}

/* formulário inline de papel / situação */
.form-papel-inline{display:flex;align-items:center;gap:6px}
.select-hud-mini{height:32px;padding:4px 8px;font-size:12.5px;border-radius:6px;border:1px solid var(--campo-border);background:var(--campo-bg);color:var(--txt)}
.input-hud-mini{width:150px;height:32px;padding:4px 8px;font-size:12.5px;border-radius:6px}
.btn-salvar-mini{height:32px;padding:0 10px;font-size:12px;border-radius:6px}

/* ações com ícones */
.acoes-usuario-grupo{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.btn-hud-acao{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:7px;font-size:12px;font-weight:600;border:1px solid var(--card-border);background:var(--caixa-clara);color:var(--txt);cursor:pointer;text-decoration:none;transition:all .15s}
.btn-hud-acao svg{width:14px!important;height:14px!important}
.btn-hud-acao:hover{background:var(--card-bg);border-color:var(--azul);color:var(--azul)}
.btn-hud-acao.perigo{color:var(--cor-falha);border-color:var(--cor-falha-borda);background:var(--cor-falha-bg)}
.btn-hud-acao.perigo:hover{background:#DC2626;color:#fff;border-color:#DC2626}

.senha-nova{font-size:18px;background:#fff;padding:4px 10px;border-radius:6px;margin-left:6px}
.campo-usuario{flex:1;min-width:160px}
.campo-nome{flex:2;min-width:200px}
.campo-papel{width:150px}
.select-mini{width:auto;padding:5px}

/* config */
.aviso-token{background:#FEF3C7;border:1px solid #FCD34D;border-radius:8px;padding:12px;margin-bottom:12px}
.token{font-size:15px;word-break:break-all}

/* ======================================================================== responsivo */
@media (max-width:900px){
  .menu,.menu-curto .menu{width:min(84vw,280px);transform:translateX(-100%);visibility:hidden;
    transition:transform .26s cubic-bezier(.16,1,.3,1),visibility 0s linear .26s}
  .aberto .menu{visibility:visible;box-shadow:0 10px 40px rgba(15,23,42,.35);transition:transform .26s cubic-bezier(.16,1,.3,1)}
  .menu-curto .marca{justify-content:center;padding:6px 8px 18px}
  .menu-curto .marca img{height:60px;width:auto}
  .menu .marca img{animation-play-state:paused}
  .aberto .menu .marca img{animation-play-state:running}
  .menu-curto .rot,.menu-curto .grupo,.menu-curto .quem .nome-u,.menu-curto .seta{display:revert}
  .menu-curto .sub{margin:2px 0 4px 21px;padding-left:8px;border-left:1px solid rgba(255,255,255,.14)}
  .menu-curto .sub .item{padding:6px 10px}
  .menu-curto .item{justify-content:flex-start;padding:8px 12px}
  .menu-curto .item .badge{position:static;padding:3px 9px;font-size:12px}
  .menu-curto .rodape,.menu-curto .acoes-rodape{flex-direction:row}
  .menu-curto .rodape{gap:4px}
  .menu-curto .quem{flex:1;justify-content:flex-start;padding:4px 4px 4px 8px}
  .aberto .menu,.aberto.menu-curto .menu{transform:none}
  .recolher{display:none}
  .conteudo,.menu-curto .conteudo{margin-left:0}
  .barra{display:flex;position:sticky;top:0;z-index:30;align-items:center;gap:10px;background:var(--navy);color:#fff;
    padding:8px var(--gut);padding-top:calc(8px + env(safe-area-inset-top));min-height:56px}
  .barra img{height:28px}
  .barra b{font-size:16px;white-space:nowrap}
  .barra .badge{margin-left:auto;text-decoration:none}
  .hamb{flex:none;width:44px;height:44px;margin-left:-8px;display:grid;place-items:center;background:none;border:0;border-radius:8px;color:#fff;cursor:pointer}
  .hamb svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .hamb:hover{background:rgba(255,255,255,.08)}
  .fundo{display:block;position:fixed;inset:0;z-index:35;background:rgba(15,23,42,.45);opacity:0;pointer-events:none;transition:opacity .2s}
  .aberto .fundo{opacity:1;pointer-events:auto}
  .aberto body{overflow:hidden}
  .item{min-height:44px}
  .grade-criar-hud{grid-template-columns:1fr;gap:10px}
  .usuarios-header-hud{flex-direction:column;align-items:flex-start}
  .usuarios-acoes-hud{margin-left:0;width:100%}
  .usuarios-acoes-hud .btn{flex:1;justify-content:center}
}
@media (max-width:800px){
  .grade-card-modular{grid-template-columns:1fr;gap:14px}
  .coluna-detalhamento-destaque textarea{min-height:120px}
  .grade-trecho-superior,.grade-trecho-inferior{grid-template-columns:1fr}
  .historico-kpis-grid{grid-template-columns:1fr}
  .parametros-acoes{width:100%;justify-content:stretch}
  .parametros-acoes .btn{flex:1;justify-content:center}
  .sla-banner-box{flex-direction:column;align-items:flex-start}
  td.coluna-dia{position:sticky;left:0;z-index:5;background:var(--card-bg);box-shadow:2px 0 5px rgba(0,0,0,.05)}
  .btn-gerar-grande{width:100%}
}
@media (max-width:640px){
  input,select,textarea{font-size:16px}
  .caixa .inline{flex-wrap:wrap}
  .caixa table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .btn{min-height:40px}
  .abas-navegacao-wrapper{margin-bottom:16px}
  .abas-navegacao{width:100%;gap:3px;padding:4px}
  .aba{flex:1;justify-content:center;padding:8px 6px;font-size:12.5px;gap:5px}
  .aba svg{width:15px;height:15px}
}
@media (prefers-reduced-motion:reduce){.menu,.conteudo,.fundo,.item{transition:none}
  .marca img{animation:none;transition:none}
  .marca:hover img,.marca:focus-visible img{transform:none}}

/* ------------------------------------------------------------------------ tela Validação massiva (.vm)
   Ordem: cores do veredito · título · guia · entrada · resultados (resumo, card, detalhes, tabela) · progresso.
   Só as cores do veredito têm versão por tema; o resto usa as variáveis do portal e vale para claro e escuro. */
.vm{display:grid;gap:14px}
.vm svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* veredito: --st-cor (ícone, selo, faixa do card), --st-fundo e --st-borda */
.vm .st-validar{--st-cor:#15803D;--st-fundo:#F0FDF4;--st-borda:#86EFAC}
.vm .st-atencao{--st-cor:#B45309;--st-fundo:#FFFBEB;--st-borda:#FCD34D}
.vm .st-nao-validar{--st-cor:#B91C1C;--st-fundo:#FEF2F2;--st-borda:#FCA5A5}
.vm .st-manual{--st-cor:#0E7490;--st-fundo:#ECFEFF;--st-borda:#67E8F9}
html.tema-escuro .vm .st-validar{--st-cor:#4ADE80;--st-fundo:rgba(34,197,94,.12);--st-borda:rgba(34,197,94,.42)}
html.tema-escuro .vm .st-atencao{--st-cor:#FB923C;--st-fundo:rgba(249,115,22,.12);--st-borda:rgba(249,115,22,.42)}
html.tema-escuro .vm .st-nao-validar{--st-cor:#F87171;--st-fundo:rgba(239,68,68,.12);--st-borda:rgba(239,68,68,.42)}
html.tema-escuro .vm .st-manual{--st-cor:#22D3EE;--st-fundo:rgba(6,182,212,.12);--st-borda:rgba(6,182,212,.42)}

/* título */
.vm-titulo{display:flex;align-items:center;gap:14px;padding:16px clamp(14px,1.8vw,20px);border-radius:12px;background:var(--navy);color:#fff}
.vm-titulo-icone{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:rgba(34,197,94,.18);color:#86EFAC}
.vm-titulo-icone svg{width:22px;height:22px}
.vm-titulo h2{margin:0;font-size:22px;letter-spacing:-.01em;color:#fff}
.vm-titulo h2 span{color:#86EFAC}
.vm-titulo p{margin:2px 0 0;font-size:13px;color:#C7D3E6}

/* guia: Atenção / Passo a passo */
.vm-ajuda>summary{display:grid;gap:2px;cursor:pointer;list-style:none;padding-right:26px;position:relative}
.vm-ajuda>summary::-webkit-details-marker{display:none}
.vm-ajuda>summary::after{content:"▾";position:absolute;right:2px;top:0;color:var(--mut)}
.vm-ajuda:not([open])>summary::after{content:"▸"}
.vm-ajuda>summary b{color:var(--card-titulo);font-size:16px}
body.embutida{padding-right:var(--gut)}  /* tela dentro de quadro que vai até a borda da janela (validacao-massiva.html) */
.vm-abas{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:14px 0 12px;border-bottom:1px solid var(--line)}
.vm-aba{border:0;background:none;padding:8px 14px;font:inherit;font-size:14px;font-weight:600;color:var(--mut);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.vm-aba.ativa{color:var(--azul);border-bottom-color:var(--azul)}
.vm-guia{padding:12px 14px;border-radius:10px;border:1px solid var(--cor-man-borda);background:var(--cor-man-bg);color:var(--txt)}
.vm-guia-atencao{border-color:var(--cor-aten-borda);background:var(--cor-aten-bg)}
.vm-guia h3{margin:0 0 8px;font-size:15px;color:var(--card-titulo)}
.vm-guia ol{margin:0;padding-left:20px;display:grid;gap:6px;font-size:14px;line-height:1.5}
.vm-revise{margin:12px 0 0;font-size:13px}

/* entrada de dados */
.vm-cabecalho{display:flex;align-items:center;gap:8px;font-size:17px}
.vm-cabecalho svg{color:var(--cor-ok)}
.vm .alerta,.vm .alerta a{color:var(--cor-falha)}
.vm-filtros{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:10px 14px;border-radius:10px;border:1px solid var(--card-border);background:var(--caixa-clara)}
.vm-filtros>div{flex:1 1 160px;min-width:120px}
.vm-filtros label{font-size:12px;margin-bottom:2px}
.vm-dica{display:flex;flex-direction:column;gap:4px;padding:10px 14px;border-radius:10px;background:var(--caixa-clara);margin:12px 0}
.vm-dica strong,.vm-dica label{margin:0;font-size:14px;font-weight:700;color:var(--txt)}
.vm-dica span{font-size:13px;color:var(--mut)}
.vm-entrada{min-height:190px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.5}
.vm-acoes{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:18px}
.vm-acoes .btn{min-height:44px;padding:10px 22px}
.vm-acoes .btn:disabled{opacity:.6;cursor:not-allowed}
.vm-processar{background:#15803D;color:#fff}.vm-processar:hover:not(:disabled){background:#166534}
.vm-processar svg{fill:currentColor}
.vm-limpar{background:#B91C1C;color:#fff}.vm-limpar:hover:not(:disabled){background:#991B1B}
.vm-status{margin:14px 0 0;text-align:center;font-size:14px;color:var(--mut)}
.vm-status:empty{display:none}
.vm-status.erro{color:var(--cor-falha);font-weight:600}

/* resultados: resumo fixo no topo e a lista de cards (clientes primeiro, depois as portas) */
.vm-resumo{position:sticky;top:8px;z-index:10;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px;margin-bottom:12px;
  border-radius:10px;border:1px solid var(--card-border);background:var(--card-bg);box-shadow:0 4px 14px -8px rgba(15,23,42,.35)}
.vm-resumo:empty{display:none}
.vm-pilula{display:flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:600;
  color:var(--st-cor);background:var(--st-fundo);border:1px solid var(--st-borda)}
.vm-pilula strong{color:var(--txt)}
.vm-itens{display:grid;gap:14px}
.vm-itens[hidden]{display:none}
.vm-itens:not([hidden])+.vm-itens{margin-top:14px}

/* card de uma porta ou dos clientes: faixa na cor do veredito, dados no topo, selo à direita */
.vm-item{min-width:0;padding:12px 14px;border-radius:12px;border:1px solid var(--card-border);border-left:4px solid var(--st-cor);background:var(--card-bg);overflow-wrap:anywhere}
.vm-item-topo{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 12px}
.vm-meta{flex:1 1 520px;min-width:0;display:grid;gap:2px;font-size:13.5px;line-height:1.5;color:var(--txt)}
.vm-meta-linha{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
.vm-meta-principal{font-size:15px;font-weight:700;color:var(--card-titulo)}
.vm-meta-rotulo{font-weight:600;color:var(--mut)}
.vm-meta-sep{color:var(--campo-border)}
.vm-ssh{margin-left:4px;padding:2px 10px;font-size:12px}
.vm-selo{display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;color:var(--st-cor);background:var(--st-fundo);border:1px solid var(--st-borda)}
.vm-selo svg{width:14px;height:14px}
.vm-veredito{display:flex;align-items:flex-start;gap:10px;margin:10px 0;padding:10px 12px;border-radius:10px;
  color:var(--txt);background:var(--st-fundo);border:1px solid var(--st-borda);font-size:14px;line-height:1.5}
.vm-veredito svg{width:18px;height:18px;margin-top:2px;color:var(--st-cor)}
.vm-veredito p{margin:0}
.vm-item-erro{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--cor-falha)}

/* "Ver detalhes" (sinais da porta ou lista de clientes) */
.vm-detalhes{margin-top:10px;padding-top:8px;border-top:1px solid var(--card-border)}
.vm-detalhes>summary{display:inline-flex;align-items:center;gap:6px;margin-left:-8px;padding:4px 8px;border-radius:6px;cursor:pointer;list-style:none;
  user-select:none;font-size:13px;font-weight:700;color:var(--azul)}
.vm-detalhes>summary::-webkit-details-marker{display:none}
.vm-detalhes>summary::before{content:"▸"}
.vm-detalhes[open]>summary::before{content:"▾"}
.vm-detalhes>summary:hover{background:var(--caixa-clara)}
.vm-tabela-caixa{margin-top:8px;overflow-x:auto;border-radius:10px;border:1px solid var(--card-border)}
.vm-tabela{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.vm-tabela th,.vm-tabela td{padding:7px 10px;text-align:left;border-bottom:1px solid var(--card-border);white-space:nowrap;color:var(--txt)}
.vm-tabela th{background:var(--caixa-clara);color:var(--mut);font-size:12px;font-weight:700}
.vm-tabela td:first-child{font-weight:600}
.vm-tabela tr:last-child td{border-bottom:0}
.vm-cliente-online td:nth-child(3),.vm-cliente-offline td:nth-child(3),.vm-cliente-unknown td:nth-child(3){font-weight:700}
.vm-cliente-online td:nth-child(3){color:var(--cor-ok)}
.vm-cliente-offline td:nth-child(3){color:var(--cor-falha)}
.vm-cliente-unknown td:nth-child(3){color:var(--cor-aten)}
.vm-cliente-online td:last-child,.vm-cliente-offline td:last-child,.vm-cliente-unknown td:last-child{white-space:normal;min-width:240px}

/* saída em texto */
.vm-saida{margin:0;max-height:420px;overflow:auto;padding:12px 14px;border-radius:10px;border:1px solid var(--card-border);background:var(--caixa-clara);color:var(--txt);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}

/* janela de progresso do "Processar Dados" (moldura: .modal-backdrop e .modal-caixa dos componentes) */
.vm-progresso .modal-caixa{max-width:440px}
.vm-progresso .modal-icone svg{width:22px;height:22px;animation:vmPulso 1.5s ease-in-out infinite}
.vm-progresso-numero{margin:0;text-align:center;line-height:1;font-size:22px;font-weight:700;color:var(--mut);font-variant-numeric:tabular-nums}
.vm-progresso-numero span{font-size:48px;font-weight:800;color:var(--azul)}
.vm-progresso-barra{display:block;width:100%;height:10px;border:0;border-radius:999px;overflow:hidden;background:var(--sec-bg);-webkit-appearance:none;appearance:none}
.vm-progresso-barra::-webkit-progress-bar{background:var(--sec-bg)}
.vm-progresso-barra::-webkit-progress-value{border-radius:999px;background:linear-gradient(90deg,var(--azul),#38BDF8,var(--azul));background-size:300% 100%;
  animation:vmBrilho 2.5s linear infinite;transition:width .4s ease}
.vm-progresso-barra::-moz-progress-bar{border-radius:999px;background:var(--azul)}
.vm-progresso-etapa{display:flex;align-items:center;gap:10px;margin:0;padding:10px 14px;border-radius:10px;border:1px solid var(--card-border);background:var(--caixa-clara);
  font-size:13px;font-weight:600;color:var(--txt)}
.vm-progresso-etapa svg{color:var(--azul);animation:vmPulso 1.5s ease-in-out infinite}
@keyframes vmPulso{50%{opacity:.55;transform:scale(.9)}}
@keyframes vmBrilho{from{background-position:300% 0}to{background-position:0 0}}

@media (max-width:900px){
  .vm-resumo{position:static}
  .vm-selo{margin-left:0}
  .vm-acoes .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .vm-progresso .modal-caixa,.vm-progresso .modal-icone svg,.vm-progresso-etapa svg,.vm-progresso-barra::-webkit-progress-value{animation:none}
}

/* ================================================================ tela Conversas (estilo WhatsApp Web)
   Lista à esquerda (avatar, prévia, hora, etiquetas) e conversa à direita (balões, separador de data,
   caixa de digitar fixa). No celular mostra uma coisa de cada vez. */
.pagina-chat .caixa{padding:var(--gut) var(--gut) 0}
.chat{--chat-h:calc(100vh - var(--gut) - 8px);display:grid;grid-template-columns:minmax(300px,380px) 1fr;height:var(--chat-h);
  background:var(--card-bg);border:1px solid var(--card-border);border-radius:14px 14px 0 0;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.chat-aviso{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:60;max-width:min(560px,92vw);background:#1E293B;color:#fff;
  border-radius:10px;padding:10px 16px;font-size:14px;box-shadow:0 10px 30px rgba(15,23,42,.3);transition:opacity .4s}
.chat-aviso.some{opacity:0;pointer-events:none}

.chat-lista{display:flex;flex-direction:column;border-right:1px solid var(--line);min-width:0;min-height:0}
.chat-lista-topo{padding:14px 14px 8px;border-bottom:1px solid var(--line)}
.chat-lista-titulo{display:flex;align-items:center;gap:4px}
.chat-lista-titulo h2{margin:0;flex:1}
.icone-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:0;background:none;color:var(--mut);cursor:pointer;list-style:none}
.icone-btn::-webkit-details-marker{display:none}
.icone-btn:hover{background:var(--caixa-clara);color:var(--card-titulo)}
.icone-btn svg,.chat-busca svg,.av svg,.chat-boas-vindas svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chat-alerta{margin:8px 0 0;background:#FEF3C7;color:#92400E;border-radius:8px;padding:6px 10px;font-size:12px}
.chat-busca{position:relative;margin-top:10px}
.chat-busca svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--mut);width:16px;height:16px}
.chat-busca input{padding:9px 12px 9px 36px;border-radius:10px;background:#F1F5F9;border-color:transparent}
.chat-busca input:focus{background:var(--campo-bg)}
.pesquisa-sugestoes{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30}
.pesquisa-sugestoes .opcao-mencao{flex-direction:column;gap:2px;overflow-wrap:anywhere}
.chat-filtros{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}  /* quebra linha: no Windows a roda do mouse não rola para o lado */
.chat-filtros .chip{white-space:nowrap;padding:5px 11px;font-size:12.5px}
.chip-etq i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--etq);margin-right:5px}
.chip-etq.ativo{background:var(--etq);border-color:var(--etq);color:#fff}
.chip-etq.ativo i{background:#fff}
.chat-filtra{margin-top:10px;padding:7px 10px;font-size:13px;border-radius:8px}

.chat-itens{flex:1;overflow-y:auto;min-height:0}
.chat-item{display:flex;gap:12px;padding:10px 14px;text-decoration:none;color:inherit;border-bottom:1px solid var(--card-border);align-items:flex-start}
.chat-item:hover{background:var(--caixa-clara)}
.chat-item.ativo{background:rgba(19,119,189,.15)}
.chat-item.inativo{opacity:.55}
.chat-item[hidden]{display:none}
.av{--av:#1B3763;position:relative;flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--av);color:#fff;font-weight:700;font-size:15px;letter-spacing:.5px}
.av svg{width:22px;height:22px}
.av-grande{width:42px;height:42px}
.av-app{position:absolute;right:-1px;bottom:-1px;width:15px;height:15px;border-radius:50%;border:2px solid #fff}
.av-app.app-whatsapp{background:#1FA855}.av-app.app-telegram{background:#2AABEE}
.chat-item-corpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.chat-item-l1{display:flex;gap:8px;align-items:baseline}
.chat-item-l1 b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:14.5px}
.chat-item-l1 time{font-size:11.5px;color:var(--mut);flex:none}
.chat-item-l2{display:flex;gap:8px;align-items:center}
.previa{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--mut)}
.previa-eu{color:#475569;font-weight:500}
.contador{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#1FA855;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.chat-item-l3{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.etq{--etq:#64748B;display:inline-block;font-size:11px;font-weight:600;line-height:1;padding:3px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--etq) 14%,#fff);color:color-mix(in srgb,var(--etq) 80%,#000);border:1px solid color-mix(in srgb,var(--etq) 35%,#fff);text-decoration:none}
.etq-sistema{--etq:#64748B}
.etq-ocorrencia{--etq:#1377BD}
.chat-vazio{color:var(--mut);font-size:13px;padding:18px 14px;text-align:center}

.chat-painel{display:flex;flex-direction:column;min-width:0;min-height:0;background:#EFEAE2}
.chat-cabeca{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--card-bg);border-bottom:1px solid var(--card-border);min-height:62px}
.chat-cabeca .voltar{display:none}
.chat-cabeca-nome{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.chat-cabeca-nome b{font-size:15.5px;color:var(--card-titulo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-cabeca-nome>span{font-size:12.5px;color:var(--mut)}
.chat-cabeca-tags{display:flex;flex-wrap:wrap;gap:4px}
.menu-etiquetas{position:relative}
.menu-etiquetas-caixa{position:absolute;right:0;top:42px;z-index:20;width:280px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;
  box-shadow:0 12px 32px rgba(15,23,42,.16);padding:12px;display:flex;flex-direction:column;gap:4px}
.linha-etq{width:100%;display:flex;align-items:center;gap:8px;border:0;background:none;padding:7px 8px;border-radius:8px;font:inherit;cursor:pointer;text-align:left;color:var(--txt)}
.linha-etq:hover{background:var(--caixa-clara)}
.linha-etq i{width:12px;height:12px;border-radius:50%;background:var(--etq)}
.linha-etq span{margin-left:auto;color:#1FA855;font-weight:700}
.nova-etq{border-top:1px solid var(--line);margin-top:6px;padding-top:10px;display:flex;flex-direction:column;gap:8px}
.paleta{display:flex;gap:6px;flex-wrap:wrap}
.paleta label{margin:0;cursor:pointer}
.paleta input{position:absolute;opacity:0;width:0;height:0}
.paleta i{display:block;width:20px;height:20px;border-radius:50%;background:var(--etq);box-shadow:inset 0 0 0 2px #fff}
.paleta input:checked+i{outline:2px solid var(--etq);outline-offset:1px}
.paleta input:focus-visible+i{outline:2px solid var(--azul)}

.chat-linha{flex:1;overflow-y:auto;min-height:0;padding:14px 6% 10px;display:flex;flex-direction:column;gap:3px;
  background-color:#EFEAE2;background-image:radial-gradient(rgba(27,55,99,.05) 1px,transparent 1px);background-size:18px 18px}
.chat-dia{align-self:center;margin:10px 0 6px;position:sticky;top:0;z-index:2}
.chat-dia span{display:inline-block;background:#fff;color:#475569;font-size:12px;padding:5px 12px;border-radius:8px;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.bolha{position:relative;max-width:min(72%,620px);padding:6px 9px 4px;border-radius:9px;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.08);
  align-self:flex-start;margin-top:4px;font-size:14.5px;line-height:1.4;color:#1E293B}
.bolha-saida{align-self:flex-end;background:#D9FDD3}
.bolha-entrada::before,.bolha-saida::before{content:"";position:absolute;top:0;width:10px;height:12px}
.bolha-entrada::before{left:-7px;background:linear-gradient(225deg,#fff 50%,transparent 50%)}
.bolha-saida::before{right:-7px;background:linear-gradient(135deg,#D9FDD3 50%,transparent 50%)}
.bolha-apagada{background:#FFF7ED;border:1px dashed #FDBA74}
.bolha-apagada::before{display:none}
.bolha-autor{font-size:12.5px;font-weight:600;margin-bottom:2px}
.bolha-autor-eu{color:#15803D}
.bolha-salvar{font-weight:400;font-size:11.5px;margin-left:6px}
.bolha-resposta{font-size:12px;color:var(--mut);border-left:3px solid #1FA855;padding:2px 8px;margin:2px 0 4px;background:rgba(0,0,0,.03);border-radius:4px}
.bolha-foto{display:block;max-width:100%;max-height:320px;border-radius:6px;margin:2px 0}
.bolha-figurinha{display:block;width:140px;height:140px;object-fit:contain}
.bolha-audio{width:260px;max-width:100%;height:36px}
.bolha-arquivo{padding:6px 8px;background:rgba(0,0,0,.04);border-radius:6px;margin:2px 0}
.msg-texto{white-space:pre-wrap;word-break:break-word}
.bolha-original{font-size:12px;color:var(--mut);margin-top:3px}
.bolha-original summary{cursor:pointer}
.bolha-rodape{display:flex;justify-content:flex-end;align-items:center;gap:6px;font-size:11px;color:#667781;margin-top:2px}
.bolha-rodape .etq{font-size:10.5px;padding:2px 6px}
.bolha-rodape .apagada{color:#C2410C}
.bolha-rodape .enviando{color:#B45309}
.visto{color:#53BDEB;font-weight:700}
.bolha-menu{position:absolute;top:4px;right:6px;opacity:0;transition:opacity .12s}
.bolha:hover .bolha-menu,.bolha-menu[open]{opacity:1}
.bolha-responder{position:absolute;top:4px;right:32px;width:22px;height:22px;border-radius:50%;border:0;cursor:pointer;opacity:0;
  background:rgba(255,255,255,.95);color:#15803D;font-weight:700;font-size:13px;box-shadow:0 1px 2px rgba(0,0,0,.12);transition:opacity .12s}
.bolha:hover .bolha-responder,.bolha-responder:focus-visible{opacity:1}
@media (hover:none){.bolha-menu,.bolha-responder{opacity:1}}
.bolha-menu summary{list-style:none;cursor:pointer;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.9);
  color:var(--mut);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.bolha-menu summary::-webkit-details-marker{display:none}
.bolha-menu-caixa{position:absolute;right:0;top:26px;z-index:10;width:280px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:10px;
  box-shadow:0 12px 32px rgba(15,23,42,.16);padding:12px;display:flex;flex-direction:column;gap:8px;font-size:13px}
.bolha-saida .bolha-menu-caixa{right:0}

.chat-envio{display:flex;gap:10px;align-items:flex-end;padding:10px 14px;background:#F0F2F5;border-top:1px solid var(--line)}
.chat-envio textarea{flex:1;resize:none;min-height:42px;max-height:160px;border-radius:21px;padding:10px 16px;border-color:transparent;line-height:1.4}
.enviar{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:#1FA855;color:#fff;display:grid;place-items:center;cursor:pointer}
.enviar:hover{background:#18934A}
.enviar svg{width:20px;height:20px;fill:currentColor}
.chat-achados{flex:1;overflow-y:auto;background:var(--card-bg)}
.chat-boas-vindas{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;color:var(--mut);padding:30px;background:#F8FAFC}
.chat-boas-vindas svg{width:56px;height:56px;color:#CBD5E1}
.chat-boas-vindas b{color:var(--card-titulo);font-size:20px}
.dialogo-etiquetas{width:min(640px,94vw);border:0;border-radius:14px;padding:20px;box-shadow:0 20px 50px rgba(15,23,42,.25);background:var(--card-bg);color:var(--txt)}
.dialogo-etiquetas::backdrop{background:rgba(15,23,42,.45)}
.etq-edita{display:grid;grid-template-columns:1fr auto auto auto auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--card-border)}
.etq-edita.nova{grid-template-columns:1fr auto auto;border-bottom:0;margin-top:6px}
@media (max-width:900px){
  .chat{grid-template-columns:1fr;border-radius:12px 12px 0 0;--chat-h:calc(100dvh - 58px - var(--gut))}
  .chat.com-conversa .chat-lista{display:none}
  .chat:not(.com-conversa) .chat-painel{display:none}
  .chat-cabeca .voltar{display:inline-grid}
  .bolha{max-width:88%}
  .chat-linha{padding:10px 10px 8px}
  .etq-edita{grid-template-columns:1fr;}
}
.bolha-destaque{animation:destaque 2.4s ease-out}
@keyframes destaque{0%,40%{box-shadow:0 0 0 3px #FBBF24}100%{box-shadow:0 1px 1px rgba(0,0,0,.08)}}
.etq-pessoa{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.4;margin-right:3px;vertical-align:-1px}
.etq-celula{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.mini-icone{width:28px;height:28px}
.mini-icone svg{width:16px;height:16px}
.menu-etiquetas-contato .menu-etiquetas-caixa{top:32px;left:0;right:auto}
/* foto de perfil por cima das iniciais (some sozinha se não houver) */
.av{overflow:visible}
.av-foto{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--av)}
.av-mini{width:32px;height:32px;font-size:12px}
.contato-nome{display:flex;gap:10px;align-items:center}
/* envio de mídia e figurinhas */
.chat-envio{flex-direction:column;align-items:stretch;gap:8px}
.chat-envio-linha{display:flex;gap:6px;align-items:flex-end}
.chat-envio-linha .icone-btn{flex:none;width:42px;height:42px}
.anexo-previa{display:flex;align-items:center;gap:10px;background:var(--card-bg);border-radius:10px;padding:6px 8px 6px 12px;font-size:13px}
/* vários anexos antes de enviar: uma linha por arquivo (miniatura, nome, tamanho, X) e o resumo embaixo */
.anexos-previa{display:grid;gap:4px;background:var(--card-bg);border-radius:10px;padding:8px 10px;font-size:13px;max-height:200px;overflow-y:auto}
.anexos-previa[hidden]{display:none}
.anexo-item{display:flex;align-items:center;gap:10px;min-width:0}
.anexo-item img{flex:none;width:40px;height:40px;object-fit:cover;border-radius:6px}
.anexo-icone{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:6px;background:var(--caixa-clara);font-size:18px}
.anexo-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anexo-tira{flex:none;width:28px;height:28px;border:0;border-radius:50%;background:none;color:var(--mut);cursor:pointer;font-size:13px}
.anexo-tira:hover{background:var(--caixa-clara);color:var(--cor-falha)}
.anexos-pe{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--mut);font-size:12px}
.anexos-pe:empty{display:none}
.anexos-tira-todos{border:0;background:none;color:var(--azul);cursor:pointer;font:inherit;font-size:12px;font-weight:600}
.anexo-previa img{width:48px;height:48px;object-fit:cover;border-radius:6px}
.anexo-previa span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.painel-figurinhas{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px;max-height:220px;overflow-y:auto;background:var(--card-bg);border-radius:10px;padding:8px}
.fig{border:0;background:none;padding:4px;border-radius:8px;cursor:pointer}
.fig:hover{background:var(--caixa-clara)}
.fig img{width:68px;height:68px;object-fit:contain;display:block}
.bolha-video{display:block;max-width:100%;max-height:320px;border-radius:6px;margin:2px 0}
.chat-painel.arrastando .chat-linha{outline:3px dashed #1FA855;outline-offset:-10px}
.av-foto:not([src]){display:none}
html.tema-escuro .chat-painel{background:#0D1724}
html.tema-escuro .chat-linha{background-color:#0B131E;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px)}
html.tema-escuro .chat-dia span{background:#1E293B;color:#CBD5E1}
html.tema-escuro .bolha{background:#1E293B;color:#F1F5F9}
html.tema-escuro .bolha-saida{background:#064E3B;color:#F1F5F9}
html.tema-escuro .bolha-entrada::before{background:linear-gradient(225deg,#1E293B 50%,transparent 50%)}
html.tema-escuro .bolha-saida::before{background:linear-gradient(135deg,#064E3B 50%,transparent 50%)}
html.tema-escuro .bolha-autor-eu{color:#86EFAC}
html.tema-escuro .bolha-resposta{background:rgba(255,255,255,.06)}
html.tema-escuro .bolha-menu summary{background:rgba(30,41,59,.9);color:#94A3B8}
html.tema-escuro .chat-envio{background:#111A27;border-top-color:var(--card-border)}
html.tema-escuro .chat-envio textarea{background:#0D1724;color:#F1F5F9;border-color:var(--card-border)}
html.tema-escuro .chat-boas-vindas{background:#0B131E;color:var(--mut)}
html.tema-escuro .chat-alerta{background:rgba(120,53,15,.3);color:#FCD34D}
/* Conversas no tema escuro: caixas que tinham fundo claro fixo (o texto claro do tema sumia nelas) e textos escuros fixos sobre o fundo escuro */
html.tema-escuro .chat-busca input{background:var(--campo-bg)}
html.tema-escuro .previa-eu{color:#CBD5E1}
html.tema-escuro .etq.etq-conta{color:#86EFAC}
html.tema-escuro .etq.etq-conta.app-telegram{color:#7DD3FC}
html.tema-escuro .bolha-rodape{color:#94A3B8}
html.tema-escuro .bolha-rodape .apagada{color:#FDBA74}
html.tema-escuro .bolha-rodape .enviando{color:#FCD34D}
html.tema-escuro .msg-texto a,html.tema-escuro .mencao{color:#7DD3FC}
html.tema-escuro .bolha-citacao{background:rgba(255,255,255,.07)}
html.tema-escuro .bolha-citacao b,html.tema-escuro .resposta-previa b{color:#86EFAC}
html.tema-escuro .bolha-citacao span,html.tema-escuro .resposta-previa span{color:#CBD5E1}
html.tema-escuro .resposta-previa,html.tema-escuro .lista-mencoes{background:var(--card-bg)}
html.tema-escuro .opcao-mencao{color:var(--txt)}
html.tema-escuro .opcao-mencao.ativa{background:var(--cor-ok-bg)}
html.tema-escuro .barra-selecao{background:#111A27;border-top-color:var(--card-border)}
html.tema-escuro .destino{border-bottom-color:var(--card-border)}
html.tema-escuro .destino:hover{background:var(--caixa-clara)}
html.tema-escuro .aviso-msg{background:var(--card-bg);border-color:var(--card-border);border-left-color:#1FA855}
html.tema-escuro .aviso-msg:hover{background:var(--caixa-clara)}
html.tema-escuro .aviso-corpo b{color:var(--card-titulo)}
html.tema-escuro .aviso-corpo span{color:var(--mut)}
html.tema-escuro .foto-texto{background:var(--card-bg)}
html.tema-escuro .foto-texto-numeros button{background:var(--caixa-clara);border-color:var(--campo-border);color:var(--txt)}
html.tema-escuro .foto-texto-numeros button:hover{background:var(--cor-ok-bg);border-color:var(--cor-ok-borda)}
html.tema-escuro .foto-texto-aviso{color:#86EFAC}

/* tela Usuários: quem está online */
.ponto-online{display:inline-block;width:9px;height:9px;border-radius:50%;background:#1FA855;margin-right:5px;box-shadow:0 0 0 3px rgba(31,168,85,.18)}
.situacao-online{color:#15803D;font-weight:600}
/* conversa com mensagem não lida: nome e prévia em negrito, hora verde */
.chat-item.nao-lida .chat-item-l1 b{font-weight:800}
.chat-item.nao-lida .previa{color:var(--txt);font-weight:600}
.chat-item.nao-lida .chat-item-l1 time{color:#1FA855;font-weight:600}
.contador[hidden]{display:none}
/* conversa sem resposta há mais de 10 min: contador e hora em vermelho; sem não lidas, o círculo aparece com "!" */
.chat-item.sem-resposta .contador{background:var(--cor-falha);box-shadow:0 0 0 3px var(--cor-falha-bg)}
.chat-item.sem-resposta .contador[hidden]{display:grid!important}
.chat-item.sem-resposta .contador[hidden]::before{content:"!"}
.chat-item.sem-resposta .chat-item-l1 time,.chat-item.sem-resposta.nao-lida .chat-item-l1 time{color:var(--cor-falha);font-weight:700}
/* aviso de mensagem nova em qualquer tela */
.avisos-pilha{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;flex-direction:column;gap:10px;width:min(360px,calc(100vw - 32px))}
.aviso-msg{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-left:4px solid #1FA855;border-radius:12px;
  padding:12px 12px 12px 14px;box-shadow:0 14px 36px rgba(15,23,42,.22);text-decoration:none;color:var(--txt);animation:entra-aviso .25s ease-out;transition:opacity .4s,transform .4s}
.aviso-msg:hover{background:#F8FAFC}
.aviso-msg.some{opacity:0;transform:translateX(30px)}
.aviso-msg .av{width:40px;height:40px;font-size:14px;--av:#1B3763}
.aviso-corpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.aviso-corpo b{font-size:14px;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aviso-corpo span{font-size:13px;color:#475569;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.aviso-fecha{border:0;background:none;font-size:20px;line-height:1;color:var(--mut);cursor:pointer;padding:0 2px}
@keyframes entra-aviso{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sino.ligado{color:#1FA855}
.sino.ligado svg{fill:rgba(31,168,85,.15)}
/* responder mensagem (citação) */
.bolha-citacao{display:flex;flex-direction:column;gap:1px;background:rgba(0,0,0,.05);border-left:4px solid #1FA855;border-radius:6px;
  padding:5px 9px;margin:2px 0 5px;font-size:12.5px;text-decoration:none;color:inherit;max-width:100%}
.bolha-saida .bolha-citacao{background:rgba(0,0,0,.06)}
.bolha-citacao b{color:#15803D;font-size:12px}
.bolha-citacao span{color:#475569;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.resposta-previa{display:flex;align-items:center;gap:8px;background:#fff;border-radius:10px;padding:6px 6px 6px 12px;border-left:4px solid #1FA855}
.resposta-previa>div{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px}
.resposta-previa b{color:#15803D;font-size:12.5px}
.resposta-previa span{color:#475569;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bolha-menu-form{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:8px;margin-top:4px}
.acao-responder{font-weight:600}
/* botões do balão do lado de FORA (não cobrem o texto de balão curto): à direita de quem recebe,
   à esquerda de quem manda; a área invisível em volta mantém o hover ao levar o mouse até eles */
.bolha{overflow:visible}
/* sem transform: ele faria o menu "fixo" se posicionar pelo botão e não pela tela */
.bolha-entrada .bolha-responder{right:-58px;top:calc(50% - 11px)}
.bolha-entrada .bolha-menu{right:-32px;top:calc(50% - 11px)}
.bolha-saida .bolha-responder{right:auto;left:-32px;top:calc(50% - 11px)}
.bolha-saida .bolha-menu{right:auto;left:-58px;top:calc(50% - 11px)}
.bolha-entrada::after,.bolha-saida::after{content:"";position:absolute;top:0;bottom:0;width:64px}
.bolha-entrada::after{right:-64px}
.bolha-saida::after{left:-64px}
.bolha-menu,.bolha-responder{z-index:2}
.bolha-entrada::after,.bolha-saida::after{z-index:1}
/* encaminhar: seleção de balões e escolha dos destinos */
.bolha-marca{display:none;position:absolute;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;border:2px solid #94A3B8;background:#fff}
.bolha-entrada .bolha-marca{left:-30px}
.bolha-saida .bolha-marca{right:-30px}
.chat-linha.selecionando .bolha[data-encaminhavel] .bolha-marca{display:block}
.chat-linha.selecionando .bolha[data-encaminhavel]{cursor:pointer;margin-left:34px}
.chat-linha.selecionando .bolha-saida[data-encaminhavel]{margin-left:0;margin-right:34px}
.chat-linha.selecionando .bolha-menu,.chat-linha.selecionando .bolha-responder{display:none}
.chat-linha.selecionando .bolha.selecionada{box-shadow:0 0 0 2px #1FA855}
.bolha.selecionada .bolha-marca{background:#1FA855;border-color:#1FA855}
.bolha.selecionada .bolha-marca::after{content:"✓";color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;height:100%}
.barra-selecao{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#F0F2F5;border-top:1px solid var(--line)}
.barra-selecao #n-selecionadas{font-weight:600}
.barra-selecao .muted{flex:1}
.lista-destinos{max-height:50vh;overflow-y:auto;border:1px solid var(--line);border-radius:10px;margin-top:8px}
.destino{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid #F1F5F9;cursor:pointer;margin:0;color:var(--txt);font-size:14px}
.destino:hover{background:#F8FAFC}
.destino input{width:18px;height:18px;flex:none}
.destino-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.destino[hidden]{display:none}
/* menos aperto: mais espaço entre balões; mudança de quem fala ganha mais respiro */
.chat-linha{gap:6px}
.bolha{padding:7px 11px 5px}
.bolha-entrada+.bolha-saida,.bolha-saida+.bolha-entrada{margin-top:12px}
/* menu ⋯ solto no body enquanto aberto */
.bolha-menu-caixa.menu-solto{position:fixed;z-index:90;width:270px;gap:2px;padding:8px}
.bolha-menu-caixa .linha-etq{padding:9px 10px;font-size:14px}
.bolha-menu-caixa .bolha-menu-form{padding:8px 10px 4px}
/* marcar com @ */
.lista-mencoes{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(15,23,42,.18);max-height:260px;overflow-y:auto;padding:4px}
.opcao-mencao{display:flex;width:100%;gap:10px;align-items:baseline;border:0;background:none;padding:8px 10px;border-radius:8px;cursor:pointer;font:inherit;text-align:left}
.opcao-mencao.ativa{background:#ECFDF5}
.opcao-mencao b{font-weight:600}
.opcao-mencao span{color:var(--mut);font-size:12.5px}

/* Troca de tela sem piscar (Chrome/Edge 126+): o navegador mantém a tela anterior até a nova
   estar pronta e faz uma passagem curta; menu lateral e lista de conversas ficam parados. */
@view-transition{navigation:auto}
.menu{view-transition-name:menu-lateral}
.chat-lista{view-transition-name:lista-conversas}
::view-transition-group(root){animation-duration:.12s}
/* menu e lista "parados": aparece só a foto NOVA e a passagem deles dura o mesmo que a da tela. Antes a foto antiga e a
   nova ficavam uma por cima da outra por 0,25 s (o padrão do navegador) e o texto do menu e da lista escurecia e voltava. */
::view-transition-group(menu-lateral),::view-transition-group(lista-conversas){animation-duration:.12s}
::view-transition-old(menu-lateral),::view-transition-old(lista-conversas){display:none}
::view-transition-new(menu-lateral),::view-transition-new(lista-conversas){animation:none}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* Balões como no WhatsApp (01/10/2026): mensagens seguidas da mesma pessoa ficam juntas, sem
   repetir nome e foto; foto de quem mandou ao lado (grupo); hora na mesma linha do texto curto;
   *negrito*, _itálico_, ~riscado~ e menção @Nome destacada. */
.bolha-seguida{margin-top:-3px}
.bolha-seguida::before{display:none}
.bolha-entrada.bolha-seguida{border-top-left-radius:9px}
.bolha-saida.bolha-seguida{border-top-right-radius:9px}
.chat-linha[data-grupo="1"] .bolha-entrada{margin-left:40px}
.bolha-av{position:absolute;left:-40px;top:0;width:30px;height:30px;font-size:11.5px}
.bolha-av .av-foto{background:var(--av)}
.bolha-autor{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
.bolha-numero{font-weight:400;font-size:11.5px;color:#667781}
.rodape-junto .msg-texto::after{content:"";display:inline-block;width:44px;height:1px}
.rodape-junto.bolha-saida .msg-texto::after{width:58px}
.rodape-junto .bolha-rodape{position:absolute;right:10px;bottom:4px;margin:0}
.msg-texto b{font-weight:700}
.msg-texto code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em;background:rgba(0,0,0,.05);padding:0 3px;border-radius:3px}
.msg-texto .msg-bloco{display:block;white-space:pre-wrap;padding:6px 8px;margin:2px 0}
.msg-texto a{color:#027EB5;word-break:break-all}
.mencao{color:#027EB5;font-weight:600}
.chat-linha.selecionando[data-grupo="1"] .bolha-entrada[data-encaminhavel]{margin-left:74px}
/* foto aberta por cima da conversa */
.foto-tela{position:fixed;inset:0;z-index:100;background:rgba(15,23,42,.88);display:flex;align-items:center;justify-content:center;padding:56px 16px 16px}
.foto-tela img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.5);transition:transform .2s ease}
.foto-tela-barra{position:absolute;top:10px;right:14px;display:flex;gap:10px;align-items:center}
.foto-tela-barra a,.foto-tela-barra button{color:#fff;background:rgba(255,255,255,.14);border:0;border-radius:8px;padding:7px 14px;font:inherit;font-size:14px;cursor:pointer;text-decoration:none}
.foto-tela-barra .foto-fechar{font-size:22px;line-height:1;padding:4px 12px}
.foto-tela-barra a:hover,.foto-tela-barra button:hover{background:rgba(255,255,255,.26)}
/* faixa global "Ative os avisos do Windows/Mac" (fixa, até ligar ou adiar nesta aba) */
.faixa-avisos{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  max-width:calc(100% - 32px);background:#1B3763;color:#fff;border-radius:12px;padding:10px 12px 10px 16px;box-shadow:0 12px 30px rgba(15,23,42,.3);font-size:14px}
.faixa-avisos .btn{white-space:nowrap}

/* Config: um bloco por número de WhatsApp / conta de Telegram */
.conta-bloco{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:12px}
.conta-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.conta-topo h3{margin:0}
.input-mini{width:160px;padding:5px 8px}
.conta-nova .inline input{flex:1;min-width:0}
/* nome do número/conta na lista (perfil que vê mais de uma) */
.etq.etq-conta{--etq:#1FA855;background:transparent;color:#15803D;border:1px solid #86EFAC}
.etq.etq-conta.app-telegram{color:#0369A1;border-color:#7DD3FC}
/* Usuários: quadro "Quem vê as Conversas" (pessoa x número/conta) */
.tabela-acessos th,.tabela-acessos td{vertical-align:middle}
.tabela-acessos .centro{text-align:center}
.tabela-acessos th.centro{min-width:150px}
.tabela-acessos th .acesso-conta{display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;color:var(--txt)}
.tabela-acessos th .muted{display:block;font-weight:400}
.tabela-acessos th .acesso-todos{margin-top:6px}
.tabela-acessos input[type=checkbox]{width:20px;height:20px;cursor:pointer}
.tabela-acessos input[type=checkbox]:disabled{cursor:default;opacity:.55}
.tabela-acessos tr:hover td{background:var(--caixa-clara)}
/* faixa do aplicativo em cima das colunas e a cor dele descendo por elas: verde = WhatsApp, azul = Telegram */
.tabela-acessos .col-whatsapp{--app:#1FA855;background:rgba(31,168,85,.07)}
.tabela-acessos .col-telegram{--app:#2AABEE;background:rgba(42,171,238,.08)}
.tabela-acessos .acesso-app{padding:7px 10px;text-align:center;border-top:3px solid var(--app);font-size:13.5px;font-weight:700;color:var(--txt)}
.tabela-acessos .acesso-app.col-whatsapp{background:rgba(31,168,85,.16)}
.tabela-acessos .acesso-app.col-telegram{background:rgba(42,171,238,.18)}
.acesso-app span{display:inline-flex;align-items:center;gap:7px}
.acesso-app svg{width:17px;height:17px;fill:none;stroke:var(--app);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tabela-acessos th .muted{max-width:210px;margin:0 auto;overflow-wrap:anywhere}
/* Usuários (redesenho): ajustes que antes eram style="" no HTML */
.aviso-linha{display:flex;align-items:center;gap:10px}
.aviso-linha svg{width:18px;height:18px;flex:none}
.txt-direita{text-align:right}
.tag-auth-radius svg,.tag-auth-local svg{width:12px;height:12px;stroke-width:2.5}
.tag-status-pill{text-transform:capitalize}
.telemetria-login-data{font-weight:700}
/* avisos em caixa no tema escuro: fundo claro fixo deixava o texto ilegível */
html.tema-escuro .card.aviso-azul{background:var(--cor-man-bg);border-color:var(--cor-man-borda)}
html.tema-escuro .card.aviso-amarelo{background:var(--cor-aten-bg);border-color:var(--cor-aten-borda)}
html.tema-escuro .card.aviso-verde{background:var(--cor-ok-bg);border-color:var(--cor-ok-borda)}
html.tema-escuro .aviso-token{background:var(--cor-aten-bg);border-color:var(--cor-aten-borda)}
html.tema-escuro .senha-nova{background:var(--card-bg)}

/* regras do último commit que tinham sumido do CSS de trabalho e continuam em uso (emissão, Config, Conversas, contatos) */
.cards-emitidos{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.cards-emitidos figure{margin:0}
.cards-emitidos figcaption{margin-bottom:6px}
.cards-emitidos img{width:100%;border:1px solid var(--card-border);border-radius:8px}
.fig-vertical{flex:1 1 280px;max-width:420px}
.fig-horizontal{flex:2 1 480px}
.tag.pct{background:#E0F2FE;color:#075985}
.linha-check{display:flex;gap:8px;align-items:center;padding:6px 0}
.wa-qr{margin-top:12px;text-align:center}
.wa-qr img{width:264px;height:264px;image-rendering:pixelated;border:8px solid #fff;border-radius:8px;box-shadow:0 0 0 1px #E2E8F0}
.app-etiqueta{display:inline-block;font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;vertical-align:middle;color:#fff}
.app-etiqueta.app-whatsapp{background:#1FA855}
.app-etiqueta.app-telegram{background:#2AABEE}
.app-ponto{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
.app-ponto.app-whatsapp{background:#1FA855}
.app-ponto.app-telegram{background:#2AABEE}
.resumo-novo{cursor:pointer;list-style:none}
.resumo-novo::-webkit-details-marker{display:none}
.resumo-novo h3{margin:0;display:inline}
/* Robô do NOC (js/lembrete.js): cartão pequeno no canto de baixo, à direita (pedido do Lorenzo, 01/10/2026).
   Nas Conversas ele sobe para não cobrir a caixa de escrever e o botão de enviar; os avisos de mensagem nova, que
   ficam no mesmo canto, sobem ou vão para o lado enquanto o robô está na tela.
   A entrada e o movimento do robô usam só transform e opacity; quem pede menos movimento no sistema vê tudo parado. */
.lembrete{position:fixed;right:18px;bottom:18px;z-index:85;display:flex;gap:10px;align-items:flex-start;width:min(320px,calc(100vw - 32px));
  padding:14px;border-radius:14px;border:1px solid var(--card-border);border-left:4px solid var(--azul);background:var(--card-bg);color:var(--txt);
  box-shadow:0 14px 36px rgba(15,23,42,.28)}
body:has(.chat-envio) .lembrete,body:has(.chat-envio) .lembrete-mini{bottom:96px}
body:has(.lembrete:not([hidden])) .avisos-pilha{right:calc(18px + min(320px,100vw - 32px) + 12px)}
body:has(.lembrete-mini:not([hidden])) .avisos-pilha{right:76px}
/* nas Conversas o aviso de mensagem sobe junto com o robô: empurrado para o lado dele, caía em cima da caixa de digitar */
body:has(.chat-envio) .avisos-pilha{bottom:96px}
/* botão "Lido" no topo da conversa: com o rótulo e em vermelho enquanto a conversa está sendo cobrada */
.icone-btn.resposta-ok-cobrando{display:inline-flex;align-items:center;width:auto;gap:6px;padding:0 12px;border-radius:999px;font:inherit;font-size:12.5px;font-weight:700;white-space:nowrap;color:var(--cor-falha);background:var(--cor-falha-bg)}
.icone-btn.resposta-ok-cobrando:hover{background:var(--cor-falha-bg);color:var(--cor-falha);box-shadow:0 0 0 1px var(--cor-falha-borda)}
.lembrete.entra{animation:roboEntra .28s cubic-bezier(.16,1,.3,1)}
.lembrete-robo{flex:none;width:30px;height:30px;padding:5px;border-radius:10px;background:rgba(19,119,189,.12);fill:none;stroke:var(--azul);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;box-sizing:content-box;animation:roboAcena 3.2s ease-in-out infinite;transform-origin:50% 90%}
.lembrete-olhos{animation:roboPisca 4s steps(1) infinite;transform-origin:12px 14px}
.lembrete-antena{fill:var(--cor-aten);stroke:var(--cor-aten)}
.lembrete-corpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.lembrete-topo{display:flex;align-items:center;gap:8px}
.lembrete-topo b{font-size:14px;color:var(--card-titulo)}
.lembrete-setor{padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700;color:var(--azul);background:rgba(19,119,189,.12)}
.lembrete-x{margin-left:auto;width:26px;height:26px;border:0;border-radius:8px;background:none;color:var(--mut);font-size:14px;line-height:1;cursor:pointer}
.lembrete-x:hover{background:var(--caixa-clara);color:var(--txt)}
.lembrete-texto{margin:0;font-size:13px;line-height:1.45;color:var(--mut)}
.lembrete-lista{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lembrete-lista li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:7px 10px;border-radius:8px;border-left:3px solid var(--cor-man);
  background:var(--caixa-clara);font-size:13px;line-height:1.4}
.lembrete-lista li.tom-falha{border-left-color:var(--cor-falha)}
.lembrete-lista li.tom-aten{border-left-color:var(--cor-aten)}
.lembrete-lista li.mais{border-left-color:transparent;background:none;padding:0 2px;color:var(--mut)}
.lembrete-lista span{flex:1 1 180px;min-width:0;overflow-wrap:anywhere}
.lembrete-lista a{font-weight:700;color:var(--azul);text-decoration:none;white-space:nowrap}
.lembrete-lista a:hover{text-decoration:underline}
.lembrete-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
/* recolhido: botão pequeno com o número de lembretes, para não cobrir a tela de quem está trabalhando */
.lembrete-mini{position:fixed;right:18px;bottom:18px;z-index:85;display:grid;place-items:center;width:46px;height:46px;padding:0;
  border:1px solid var(--card-border);border-radius:50%;background:var(--card-bg);color:var(--azul);cursor:pointer;box-shadow:0 8px 22px rgba(15,23,42,.25);
  transition:transform .15s}
.lembrete-mini:hover{transform:scale(1.07)}
.lembrete-mini svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lembrete-conta{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--cor-falha);color:#fff;
  font-size:11px;font-weight:800;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}
@keyframes roboEntra{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes roboAcena{0%,100%{transform:rotate(0)}6%{transform:rotate(-7deg)}12%{transform:rotate(6deg)}18%{transform:rotate(0)}}
@keyframes roboPisca{0%,93%{transform:scaleY(1)}95%{transform:scaleY(.15)}98%{transform:scaleY(1)}}
@media (max-width:900px){
  .lembrete{left:16px;right:16px;bottom:12px;width:auto}
  .lembrete-mini{right:16px;bottom:12px}
  body:has(.lembrete:not([hidden])) .avisos-pilha,body:has(.lembrete-mini:not([hidden])) .avisos-pilha{right:16px;bottom:76px}
}
@media (prefers-reduced-motion:reduce){.lembrete.entra,.lembrete-robo,.lembrete-olhos{animation:none}.lembrete-mini{transition:none}}

/* ======================================================================== 5. utilitários de espaçamento */
.m-0{margin:0}
.mt-0{margin-top:0}.mt-4{margin-top:4px}.mt-6{margin-top:6px}.mt-8{margin-top:8px}.mt-10{margin-top:10px}
.mt-12{margin-top:12px}.mt-14{margin-top:14px}.mt-18{margin-top:18px}
.mb-0{margin-bottom:0}.mb-6{margin-bottom:6px}.mb-10{margin-bottom:10px}.mb-14{margin-bottom:14px}.mb-16{margin-bottom:16px}
.ml-6{margin-left:6px}.ml-10{margin-left:10px}
.my-12{margin-top:12px;margin-bottom:12px}
.gap-6{gap:6px}.gap-8{gap:8px}.gap-14{gap:14px}.gap-16{gap:16px}
.espaco-10{height:10px}.espaco-12{height:12px}.espaco-18{height:18px}

/* terminal de equipamento (tela Acesso) */
body.pagina-terminal{margin:0;height:100vh;display:flex;flex-direction:column;background:#1C1C1C;color:#E5E7EB}
.term-topo{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:8px 14px;background:#1B3763;font-size:14px}
.term-topo .muted{color:#B6C3DA}
.term-estado{margin-left:auto;font-size:13px;color:#B6C3DA}
.term-estado.ok{color:#6EE7B7}
.term-estado.falha{color:#FCA5A5}
.term-area{flex:1;min-height:0;padding:6px}
.tabela tr[hidden]{display:none}

/* foto aberta: painel "Copiar texto" (números lidos da imagem) */
.foto-texto{position:absolute;top:56px;right:14px;bottom:14px;width:min(360px,calc(100% - 28px));background:#fff;color:var(--txt);
  border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px;overflow:auto;box-shadow:0 10px 40px rgba(0,0,0,.4);font-size:14px}
.foto-texto-numeros{display:flex;flex-wrap:wrap;gap:6px}
.foto-texto-numeros button{border:1px solid #CBD5E1;background:#F8FAFC;border-radius:8px;padding:5px 9px;font:inherit;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;cursor:pointer}
.foto-texto-numeros button:hover{background:#ECFDF5;border-color:#86EFAC}
.foto-texto textarea{flex:1;min-height:160px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;resize:vertical}
.foto-texto-tudo{align-self:flex-start;border:0;background:#1B3763;color:#fff;border-radius:8px;padding:7px 14px;font:inherit;cursor:pointer}
.foto-texto-aviso{color:#15803D;font-weight:600;min-height:18px}
.foto-texto small{color:var(--mut)}
@media (max-width:700px){.foto-texto{top:auto;height:55%;left:14px;width:auto}}
@media (min-width:701px){.foto-tela.com-texto{padding-right:390px}}
/* tela de boas-vindas (nenhuma conversa aberta; Esc volta para ela): só a logo da Dinâmica */
.boas-vindas-logo{width:220px;max-width:60%;height:auto;opacity:.9}
/* Filtros da lista de Conversas (01/10/2026: chips em 4 linhas ficavam bagunçados):
   1 barra única de apps (botões do mesmo tamanho) + caixas de Conta e Etiqueta lado a lado */
.filtro-seg{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:2px;margin-top:10px;padding:3px;background:#EEF2F7;border-radius:10px}
.filtro-seg .chip{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;border:0;background:transparent;border-radius:8px;
  padding:6px 10px;font-size:12.5px;font-weight:600;color:#475569;white-space:nowrap;cursor:pointer}
.filtro-seg .chip span{font-weight:500;color:#94A3B8;font-size:11.5px}
.filtro-seg .chip:hover{background:rgba(255,255,255,.6)}
.filtro-seg .chip.ativo{background:#fff;color:var(--navy);box-shadow:0 1px 2px rgba(15,23,42,.12)}
.filtro-seg .chip.ativo span{color:#64748B}
.filtro-seg .app-ponto{flex:none}
.filtro-selects{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-top:8px}
.filtro-select{display:flex;flex-direction:column;gap:2px;margin:0;min-width:0}
.filtro-select span{font-size:11px;font-weight:600;color:#64748B;text-transform:uppercase;letter-spacing:.03em}
.filtro-select select{width:100%;min-width:0;padding:6px 8px;font-size:13px;border-radius:8px;border:1px solid var(--line);background:#fff}
.filtro-select select.ativo{border-color:#1FA855;background:#F0FDF4;color:#15803D;font-weight:600}
/* Conversas no tema escuro (01/10/2026, Lorenzo: "o tema escuro tá meio bugado"): a barra de apps e as caixas Conta/Etiqueta
   tinham fundo branco fixo; a etiqueta da conversa ficava num balão claro; o nome de quem escreve no grupo usa a cor do
   avatar, que no fundo escuro some (por isso é clareado); "salvar contato" saía no azul padrão do navegador. */
html.tema-escuro .filtro-seg{background:var(--campo-bg)}
html.tema-escuro .filtro-seg .chip{color:var(--mut)}
html.tema-escuro .filtro-seg .chip:hover{background:rgba(255,255,255,.06)}
html.tema-escuro .filtro-seg .chip.ativo{background:#1E2E44;color:#F1F5F9;box-shadow:0 1px 2px rgba(0,0,0,.4)}
html.tema-escuro .filtro-seg .chip.ativo span{color:var(--mut)}
html.tema-escuro .filtro-select span{color:var(--mut)}
html.tema-escuro .filtro-select select{background:var(--campo-bg);color:var(--campo-txt);border-color:var(--campo-border)}
html.tema-escuro .filtro-select select.ativo{border-color:#1FA855;background:rgba(31,168,85,.15);color:#86EFAC}
html.tema-escuro .etq:not(.etq-conta){background:color-mix(in srgb,var(--etq) 22%,transparent);color:color-mix(in srgb,var(--etq) 50%,#fff);
  border-color:color-mix(in srgb,var(--etq) 45%,transparent)}
html.tema-escuro .bolha-autor span[style]{filter:brightness(2.2) saturate(.8)}
html.tema-escuro .bolha-responder{background:#1E2E44;color:#E2E8F0;border-color:var(--card-border)}
html.tema-escuro .bolha-marca{background:var(--campo-bg);border-color:#64748B}
/* vermelho de aviso/perigo e link sem classe: no fundo escuro o tom do tema claro quase não se lê */
html.tema-escuro .alerta,html.tema-escuro .erro,html.tema-escuro .perigo{color:#F87171}
html.tema-escuro .ambar{color:#FBBF24}
html.tema-escuro a:not([class]){color:#7DD3FC}
html.tema-escuro .bolha-numero{color:var(--mut)}
.bolha-salvar{color:var(--azul)}
html.tema-escuro .bolha-salvar{color:#7DD3FC}
/* Resultado da pesquisa de mensagens: a regra tinha se perdido e cada resultado saía como link azul sublinhado */
.chat-achados{flex:1;min-height:0;overflow-y:auto}
.achado{display:block;padding:10px 16px;border-bottom:1px solid var(--card-border);text-decoration:none;color:var(--txt)}
.achado:hover{background:var(--caixa-clara)}
.achado .msg-texto{margin-top:2px}
/* Regras que se perderam numa junção do CSS e ainda são usadas: filtro em forma de link, campos de data/hora e o manual da Config */
a.chip{text-decoration:none;color:inherit}
.campo-data{width:170px}
.campo-hora{width:140px}
.manual{background:var(--caixa-clara);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:10px 0 12px;font-size:14px}
.manual summary{cursor:pointer;font-weight:600;color:var(--card-titulo)}
.manual ol,.manual ul{margin:8px 0;padding-left:22px}
.manual li{margin:4px 0}
.manual code{background:var(--sec-bg);padding:1px 5px;border-radius:4px;font-size:12.5px;word-break:break-all}
/* logo da tela sem conversa: a branca no tema escuro (a azul-marinho sumia no fundo escuro) */
.boas-vindas-logo.logo-escuro{display:none}
html.tema-escuro .boas-vindas-logo.logo-claro{display:none}
html.tema-escuro .boas-vindas-logo.logo-escuro{display:block}
.acao-apagar{color:var(--cor-falha)}
.acao-apagar:hover{background:#FEF2F2}
/* Usuários: as caixas de Papel, Situação e Setor encolhiam até sumir o texto (só a setinha) quando a
   tabela ficava larga; agora mantêm a largura do conteúdo e a tabela rola para o lado se precisar */
.form-papel-inline{flex-wrap:nowrap}
.form-papel-inline .select-hud-mini{flex:none;width:auto;min-width:max-content;padding-right:26px}
table.tabela-usuarios-hud td:has(.form-papel-inline){white-space:nowrap}

/* "O portal foi atualizado": aparece só quando a tela não pôde se recarregar sozinha (js/avisos.js) */
.faixa-versao{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-radius:10px;background:var(--navy);color:#fff;font-size:13.5px;font-weight:600;box-shadow:0 10px 30px rgba(15,23,42,.35)}

/* contato compartilhado na conversa: cartão com o telefone e os botões Salvar contato, Conversar e Ligar */
.cartao-contato{display:grid;gap:6px;min-width:min(300px,70vw);padding:4px 2px}
.cartao-contato+.cartao-contato{border-top:1px solid rgba(0,0,0,.1);padding-top:8px;margin-top:4px}
.cartao-contato-nome{font-weight:700;font-size:15px}
.cartao-contato-tel{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cartao-contato-tel b{margin-right:4px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ligação de WhatsApp registrada na conversa (servicos/conversas/ligacoes.py): faixa à esquerda para se
   distinguir de mensagem escrita; é registro do que aconteceu, não tem áudio */
.bolha-ligacao{border-left:3px solid var(--azul);font-weight:600}
.bolha-ligacao .msg-texto{white-space:nowrap}

/* ======================================================================== telefone do ramal (js/telefone.js)
   No computador mora dentro do menu, logo acima do rodapé (não cobre nada do conteúdo), e o painel abre ao lado
   do menu. No celular o menu é gaveta, então vira um botão redondo na barra do topo e o painel abre embaixo dela.
   A bolinha diz o estado: verde = ramal online, âmbar = conectando ou em outra aba, vermelho = sem conexão,
   azul piscando = ligação. */
.fone{position:fixed;left:12px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:45;width:calc(var(--menu) - 24px)}
.com-fone .menu nav{margin-bottom:50px}
.fone-pilula{width:100%;display:flex;align-items:center;gap:10px;min-height:40px;padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:13.5px;cursor:pointer;text-align:left}
.fone-pilula:hover{background:rgba(255,255,255,.12)}
.fone-pilula:focus-visible{outline:2px solid #7DD3FC;outline-offset:1px}
.fone-pilula svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.fone-rotulo{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fone-bolinha{flex:none;width:9px;height:9px;border-radius:50%;background:#F59E0B;order:3}
.fone[data-estado=online] .fone-bolinha{background:#22C55E}
.fone[data-estado=erro] .fone-bolinha,.fone[data-estado=saindo] .fone-bolinha{background:#EF4444}
.fone[data-estado=tocando] .fone-bolinha,.fone[data-estado=chamando] .fone-bolinha,.fone[data-estado=falando] .fone-bolinha{background:#38BDF8}
.fone[data-estado=tocando] .fone-pilula{background:#1377BD;animation:foneToca 1s ease-in-out infinite}
@keyframes foneToca{50%{background:#0F5C94}}
.fone-painel{position:fixed;left:calc(var(--menu) + 12px);bottom:16px;width:min(320px,calc(100vw - 32px));background:var(--card-bg);color:var(--txt);
  border:1px solid var(--card-border);border-radius:12px;box-shadow:0 12px 40px rgba(15,23,42,.28);padding:14px;display:grid;gap:10px}
.fone-painel[hidden]{display:none}
/* telinha flutuante: arrastada pela barra do título enquanto está aberta; ao fechar volta ao lugar de origem */
.fone-painel.solto{left:var(--fone-x);top:var(--fone-y);bottom:auto;z-index:60}
.fone-painel .fone-topo{cursor:grab;user-select:none;touch-action:none;margin:-14px -14px 0;padding:12px 14px 10px;border-radius:12px 12px 0 0;border-bottom:1px solid var(--card-border);background:var(--caixa-clara)}
.fone-painel.arrastando .fone-topo{cursor:grabbing}
.fone-painel.arrastando{box-shadow:0 20px 60px rgba(15,23,42,.45)}
.fone-topo{display:flex;align-items:baseline;gap:8px}
.fone-topo b{color:var(--card-titulo)}
.fone-x{margin-left:auto;border:0;background:none;color:var(--mut);cursor:pointer;font-size:14px;padding:4px 6px;border-radius:6px}
.fone-x:hover{background:var(--caixa-clara)}
.fone-chamada{display:grid;gap:6px;padding:10px;border-radius:10px;background:var(--caixa-clara);border:1px solid var(--caixa-clara-borda)}
.fone-chamada[hidden],.fone-discar[hidden],.fone-teclas[hidden]{display:none}
.fone-quem{margin:0;font-weight:700;font-size:15px;overflow-wrap:anywhere}
.fone-tempo{margin:0;font-variant-numeric:tabular-nums;min-height:1.2em}
.fone-acoes{display:flex;gap:8px;flex-wrap:wrap}
.fone-atende{background:#15803D;color:#fff;border-color:#15803D}
.fone-atende:hover{background:#166534}
.fone-desliga{background:#B91C1C;color:#fff;border-color:#B91C1C}
.fone-desliga:hover{background:#991B1B}
.fone-discar{display:grid;gap:4px}
.fone-linha{display:flex;gap:8px}
.fone-linha input{flex:1;min-width:0}
.fone-teclas{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fone-tecla{min-height:40px;border-radius:8px;border:1px solid var(--campo-border);background:var(--caixa-clara);color:var(--txt);font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.fone-tecla:hover{border-color:var(--azul)}
/* abas da telinha do telefone (Teclado | Chamadas), como no MicroSIP: o histórico fica no cantinho, sem outra página */
.fone-abas{display:flex;gap:4px;border-bottom:1px solid var(--card-border)}
.fone-aba{flex:1;border:0;background:none;color:var(--mut);font:inherit;font-size:13px;font-weight:700;padding:8px 6px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.fone-aba:hover{color:var(--txt)}
.fone-aba[aria-selected=true]{color:var(--azul);border-bottom-color:var(--azul)}
.fone-painel[data-aba=teclado] .fone-so-chamadas,.fone-painel[data-aba=chamadas] .fone-so-teclado{display:none}
.fone-recentes-lista{list-style:none;margin:0;padding:0;display:grid;gap:1px;max-height:min(330px,50vh);overflow-y:auto}
.fone-recente{width:100%;display:grid;grid-template-columns:18px 1fr;column-gap:8px;text-align:left;border:0;background:none;color:var(--txt);font:inherit;padding:6px;border-radius:8px;cursor:pointer}
.fone-recente:hover{background:var(--caixa-clara)}
.fone-recente-seta{grid-row:span 2;align-self:center;font-size:16px;font-weight:800;color:var(--cor-ok)}
.fone-recente-seta.ruim{color:var(--cor-falha)}
.fone-recente-quem{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.fone-recente-info{font-size:11.5px;color:var(--mut);white-space:nowrap}
.fone-recente-info.ruim{color:var(--cor-falha)}
.fone-recentes-vazio{margin:8px 0}
.fone-aviso{margin:0;color:var(--cor-falha);font-weight:600}
/* ligação chegando (js/telefone.js): quadro GRANDE no meio da tela, com o resto escurecido, piscando, com quem
   liga e os botões Atender e Recusar. O Maicon pediu duas vezes para aumentar ("quero que grite", "coloca maior"):
   é para ser impossível não ver. O escurecido é a sombra enorme do próprio quadro (não bloqueia clique fora). */
.fone-faixa{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:95;display:grid;justify-items:center;gap:22px;text-align:center;
  width:min(760px,calc(100vw - 24px));padding:40px 32px 36px;border-radius:24px;background:#0B3B1F;color:#fff;border:5px solid #22C55E;
  box-shadow:0 0 0 10px rgba(34,197,94,.4),0 0 0 100vmax rgba(2,6,23,.72);animation:foneGrita .7s ease-in-out infinite}
.fone-faixa[hidden]{display:none}
@keyframes foneGrita{50%{background:#166534;border-color:#86EFAC;box-shadow:0 0 0 26px rgba(34,197,94,.18),0 0 0 100vmax rgba(2,6,23,.72)}}
.fone-faixa-icone{font-size:88px;line-height:1;animation:foneBalanca .3s ease-in-out infinite alternate}
@keyframes foneBalanca{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}
.fone-faixa-texto{display:grid;gap:8px;min-width:0;max-width:100%}
.fone-faixa-texto b{font-size:22px;letter-spacing:.08em;color:#86EFAC}
.fone-faixa-quem{font-size:clamp(34px,6vw,56px);font-weight:800;line-height:1.1;overflow-wrap:anywhere}
.fone-faixa-botao{min-height:76px;min-width:210px;padding:0 36px;font-size:26px;border-radius:14px}
.fone-faixa-botao+.fone-faixa-botao{margin-left:0}
.fone-faixa .fone-faixa-botoes{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
@media (max-width:600px){.fone-faixa{padding:28px 16px}.fone-faixa-icone{font-size:64px}.fone-faixa-botao{min-width:0;flex:1;min-height:68px;font-size:22px;padding:0 16px}}
@media (prefers-reduced-motion:reduce){.fone-faixa,.fone-faixa-icone{animation:none}}
.menu-curto .fone{width:calc(var(--menu-curto) - 24px)}
.menu-curto .fone-pilula{justify-content:center;padding:8px 0;position:relative}
.menu-curto .fone-rotulo{display:none}
.menu-curto .fone-bolinha{position:absolute;top:6px;right:8px}
.menu-curto .fone-painel{left:calc(var(--menu-curto) + 12px)}
/* ramal na linha do usuário (tela Usuários): botão na coluna Ramal e a caixa de cadastro */
.btn-ramal{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn-ramal svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-ramal.com-ramal{background:var(--cor-ok-bg);border:1px solid var(--cor-ok-borda);color:var(--cor-ok);font-variant-numeric:tabular-nums}
.dialogo-ramal{width:min(420px,calc(100vw - 32px));border:1px solid var(--card-border);border-radius:12px;padding:0;background:var(--card-bg);color:var(--txt);box-shadow:0 20px 60px rgba(15,23,42,.35)}
.dialogo-ramal::backdrop{background:rgba(15,23,42,.6)}
.dialogo-ramal-form{display:grid;gap:12px;padding:20px;text-align:left}
.dialogo-ramal-form h3{margin:0;color:var(--card-titulo)}
.dialogo-ramal-form label{display:grid;gap:4px;font-size:13px;font-weight:600}
.dialogo-ramal-form input{width:100%}
.dialogo-ramal-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.perigo-texto{margin-left:auto;color:var(--cor-falha)}
.ok-ramal{color:var(--cor-ok);font-weight:700}
@media (max-width:900px){
  .fone,.menu-curto .fone{left:auto;right:calc(var(--gut) + 46px);top:calc(8px + env(safe-area-inset-top));bottom:auto;width:40px;z-index:35}
  .com-fone .menu nav{margin-bottom:0}
  .fone-pilula,.menu-curto .fone-pilula{justify-content:center;padding:0;width:40px;height:40px;border-radius:50%;position:relative}
  .fone-rotulo{display:none}
  .fone-bolinha,.menu-curto .fone-bolinha{position:absolute;top:4px;right:4px}
  .fone-painel,.menu-curto .fone-painel{left:16px;right:16px;top:calc(62px + env(safe-area-inset-top));bottom:auto;width:auto}
  .fone-painel .fone-topo{cursor:default}
}

/* ======================================================================== responsivo: celular, iPad e monitor grande
   Caso real (02/10/2026): o Maicon vai abrir o portal em celular, iPad e vários monitores. Medido em 27 telas x 8
   larguras (360 a 3440 px): quase nada estourava para o lado, mas em monitor grande o conteúdo esticava até
   3.100 px (linha de texto de 3.070 px em Usuários e Config, balões da conversa colados nas duas pontas).
   Regras:
   - Tela comum: o conteúdo para em 1.680 px e fica no centro. Conversas e as telas em quadro (Varejo,
     Corporativo, Ferramentas) continuam usando a largura toda: lá a largura é útil.
   - Config (formulários): para em 1.100 px; campo de 3 metros não ajuda ninguém.
   - Conversa: os balões ficam numa coluna central de até 1.100 px, como no WhatsApp Web.
   - iPad em pé (701 a 900 px): Conversas mostra a lista e a conversa lado a lado; só abaixo de 700 px vira uma
     tela por vez.
   - Tela de toque: botão pequeno ganha altura para o dedo.
   Armadilha: este bloco fica no fim do arquivo de propósito (vence as regras de cima com o mesmo peso). */
.caixa{max-width:calc(1680px + 2 * var(--gut));margin-inline:auto}
.pagina-chat .caixa,.caixa:has(> .varejo-tela){max-width:none}
.pagina-config .caixa{max-width:calc(1100px + 2 * var(--gut))}
.chat-linha{padding-inline:max(6%,calc((100% - 1100px) / 2))}
.al-topo>div{min-width:0}
.al-topo h2,.card h2,.card h3{overflow-wrap:anywhere}
.alerta a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* nome de equipamento e de alarme não tem espaço para quebrar (ES-VTA-A01-BKB-RT-001): em celular estreito
   empurrava a tela inteira 22 px para o lado */
#al-miolo,#al-miolo *{min-width:0}
#al-miolo .enlace,#al-miolo li,#al-miolo b,.caixa code{overflow-wrap:anywhere}
@media (min-width:701px) and (max-width:900px){
  .chat{grid-template-columns:minmax(260px,320px) 1fr}
  .chat.com-conversa .chat-lista{display:flex}
  .chat:not(.com-conversa) .chat-painel{display:flex}
  .chat-cabeca .voltar{display:none}
  .bolha{max-width:calc(100% - 84px)}
  /* no iPad o Robô do NOC fica no canto, como no computador, em vez de cobrir a largura toda */
  .lembrete{left:auto;right:16px;width:min(340px,calc(100vw - 32px))}
}
@media (max-width:700px){
  .bolha{max-width:calc(100% - 78px)}
  .chat-linha{padding-inline:10px}
}
@media (pointer:coarse){
  .al-link,.chip,.filtro-pill,.btn.mini{min-height:36px}
  .bolha-responder,.bolha-menu-botao{min-width:32px;min-height:32px}
}