/* ================================================================ fontes (guardadas no painel) */
@font-face { font-family: "Ubuntu Sans"; src: url("fontes/ubuntu-sans.woff2") format("woff2");
             font-weight: 100 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "URW Gothic"; src: url("fontes/urw-gothic-book.woff2") format("woff2");
             font-weight: 400; font-display: swap; }
@font-face { font-family: "URW Gothic"; src: url("fontes/urw-gothic-demi.woff2") format("woff2");
             font-weight: 600 700; font-display: swap; }

/* ================================================================ cores
   Tema escuro (central de operação) é o padrão; o claro fica a um clique. */
:root {
  --zz-azul: #00aae1; --zz-verde: #00ac62; --zz-marinho: #071521;
  --zz-degrade: linear-gradient(100deg, var(--zz-azul), var(--zz-verde));
  --fonte: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-marca: "URW Gothic", "Ubuntu Sans", system-ui, sans-serif;
  --raio: 16px;
  --menu-largura: 236px;

  --fundo: #f1f4f8; --cartao: #ffffff; --cartao-2: #f6f8fb; --texto: #0f1d2b; --fraco: #5a6a7b;
  --borda: #dfe5ec; --grade: #e9eef3;
  --verde: #00995a; --verde-claro: #e1f6ea; --laranja: #d46b00; --laranja-claro: #fdeedb;
  --azul: #0088bd; --azul-claro: #def2fa; --vermelho: #cf3a3a; --vermelho-claro: #fbe6e6;
  --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --serie-4: #eda100; --serie-5: #e87ba4; --serie-outras: #9aa7b4;
  --sombra: 0 1px 2px rgba(16, 34, 54, .05), 0 6px 20px rgba(16, 34, 54, .06);
  --brilho: 0 0 0;
  --calor-0: #eef4fb; --calor-1: #cde2fb; --calor-2: #9ec5f4; --calor-3: #6da7ec;
  --calor-4: #3987e5; --calor-5: #256abf; --calor-6: #104281;
}
:root[data-tema="escuro"] {
  --fundo: #08131d; --cartao: #0f1f2c; --cartao-2: #142a3b; --texto: #e8f0f6; --fraco: #8fa4b6;
  --borda: #1c3345; --grade: #182d3d;
  --verde: #2bd18a; --verde-claro: rgba(43, 209, 138, .13); --laranja: #f5a53c; --laranja-claro: rgba(245, 165, 60, .14);
  --azul: #3cc8f5; --azul-claro: rgba(60, 200, 245, .13); --vermelho: #ff7b7b; --vermelho-claro: rgba(255, 123, 123, .13);
  --serie-1: #3d8fe8; --serie-2: #e2652c; --serie-3: #199e70; --serie-4: #c98500; --serie-5: #d55181; --serie-outras: #5f7385;           /* validadas contra #0f1f2c */
  --sombra: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px rgba(0, 0, 0, .35);
  --brilho: 0 0 24px;
  --calor-0: #12273a; --calor-1: #163a5e; --calor-2: #1c5cab; --calor-3: #2a78d6;
  --calor-4: #5598e7; --calor-5: #86b6ef; --calor-6: #cde2fb;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 16px/1.45 var(--fonte); }
:root[data-tema="escuro"] body {
  background: radial-gradient(1200px 600px at 85% -10%, rgba(0, 170, 225, .08), transparent 60%),
              radial-gradient(900px 500px at 10% 110%, rgba(0, 172, 98, .06), transparent 60%), var(--fundo);
  background-attachment: fixed;
}
[hidden] { display: none !important; }
.sprite { display: none; }
svg { width: 1em; height: 1em; flex: none; }
h1, h2 { font-family: var(--fonte-marca); }
.fraco { color: var(--fraco); }
.erro { color: var(--vermelho); margin: 8px 0 0; font-size: 14px; }
.erro:empty { display: none; }
.nota { color: var(--fraco); font-size: 13px; margin: 14px 0 0; }
.logo-escuro { display: none; }
:root[data-tema="escuro"] .logo-claro { display: none; }
:root[data-tema="escuro"] .logo-escuro { display: block; }

/* ================================================================ entrar */
/* tela dividida (escolhida 03/11/2026, versão C): à esquerda a apresentação com o padrão de faixas da ZZ e cards
   que só explicam o painel (sem dados, quem não entrou não pode ver números); à direita a barra com o formulário.
   No celular fica só a barra. A tela de entrar é sempre escura, nos dois temas. */
.entrar { min-height: 100vh; display: grid; grid-template-columns: 1fr 420px; background: var(--zz-marinho);
          --texto: #e8f0f6; --fraco: #8fa4b6; --vermelho: #ff7b7b; color: var(--texto); }
.entrar[hidden] { display: none; }
.entrar .logo-claro { display: none; }
.entrar .logo-escuro { display: block; }
.entrar-vitrine { position: relative; overflow: hidden; padding: 56px 64px; display: flex; flex-direction: column;
                  justify-content: center; gap: 28px; }
.entrar-vitrine::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16;
                          background: url("padrao-faixas.svg") center / cover no-repeat; }
.entrar-vitrine > * { position: relative; }
.entrar-selo { font-family: var(--fonte-marca); font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
               color: var(--zz-azul); }
.entrar-vitrine h2 { margin: 0; font-weight: 600; font-size: 38px; line-height: 1.15; max-width: 20ch; text-wrap: balance; }
.entrar-vitrine p { margin: 0; color: var(--fraco); max-width: 44ch; }
.entrar-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 820px; }
.entrar-card { --c: 14px; display: grid; gap: 4px; align-content: start; padding: 18px 20px;
               background: rgba(16, 34, 47, .82);
               clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.entrar-card svg { width: 34px; height: 34px; padding: 8px; margin-bottom: 8px; border-radius: 9px;
                   background: rgba(0, 170, 225, .14); color: var(--zz-azul); }
.entrar-card:nth-child(even) svg { background: rgba(0, 172, 98, .14); color: var(--zz-verde); }
.entrar-card b { font-family: var(--fonte-marca); font-weight: 600; }
.entrar-card span { color: var(--fraco); font-size: 14px; line-height: 1.4; }
.entrar-lado { position: relative; display: grid; place-items: center; padding: 48px 52px;
               background: linear-gradient(180deg, #10222f, #0c1a25); box-shadow: 0 0 40px rgba(0, 0, 0, .45); }
.entrar-lado::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
                       background: linear-gradient(180deg, var(--zz-azul), var(--zz-verde)); }
.entrar-cartao { width: 100%; max-width: 340px; display: grid; gap: 14px; }
.entrar-rodape { margin: 4px 0 0; font-size: 12px; color: var(--fraco); text-align: center; }
@media (max-width: 1100px) { .entrar-vitrine { padding: 40px; gap: 22px; } .entrar-vitrine h2 { font-size: 32px; }
                             .entrar-cards { grid-template-columns: 1fr; max-width: 440px; gap: 10px; }
                             .entrar-card { grid-template-columns: auto 1fr; column-gap: 14px; padding: 14px 18px; }
                             .entrar-card svg { grid-row: span 2; margin-bottom: 0; } }
@media (max-width: 860px) { .entrar { grid-template-columns: 1fr; } .entrar-vitrine { display: none; }
                            .entrar-lado { padding: 40px 24px; } }
.entrar-logo { height: 30px; width: auto; margin-bottom: 8px; }
.entrar h1 { margin: 0 0 6px; font-family: var(--fonte-marca); font-size: 22px; font-weight: 600; }
.entrar-texto { margin: 0 0 4px; font-size: 14px; line-height: 1.5; color: var(--fraco); }
.regras-senha { list-style: none; margin: -4px 0 0; padding: 0; display: grid; gap: 5px; font-size: 13px; color: var(--fraco); }
.regras-senha li { display: flex; align-items: center; gap: 8px; }
.regras-senha svg { width: 16px; height: 16px; flex: none; padding: 2px; border: 1px solid #2c4a60; border-radius: 50%;
                    color: transparent; }
.regras-senha li.ok { color: var(--texto); }
.regras-senha li.ok svg { color: #fff; background: #00ac62; border-color: #00ac62; }
.entrar-link { justify-self: center; font: inherit; font-size: 14px; color: var(--fraco); background: none; border: 0;
               padding: 4px 8px; cursor: pointer; text-decoration: underline; }
.entrar-link:hover { color: var(--texto); }
.entrar label { display: grid; gap: 6px; font-size: 14px; color: var(--fraco); }
input, select { font: inherit; color: var(--texto); background: var(--cartao-2); padding: 9px 11px;
                border: 1px solid var(--borda); border-radius: 10px; }
input:focus, select:focus { outline: 2px solid var(--zz-azul); outline-offset: 1px; }
.entrar input { padding: 12px 13px; background: #0a1620; border: 1px solid #1f3a4e; border-radius: 6px; }
.entrar input:focus { outline: 0; border-color: var(--zz-azul); }
.entrar input:-webkit-autofill { -webkit-text-fill-color: var(--texto); caret-color: var(--texto); transition: background-color 99999s; }
.botao { font: inherit; border: 0; border-radius: 10px; padding: 12px 22px; cursor: pointer; font-weight: 600;
         display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.principal { background: var(--zz-degrade); color: #fff; font-family: var(--fonte-marca); font-size: 17px;
             border-radius: 0; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); padding: 13px 22px; }
.principal:hover { filter: brightness(1.08); }
.secundario { background: var(--cartao-2); color: var(--texto); border: 1px solid var(--borda); padding: 9px 14px; }
.secundario:hover { border-color: var(--zz-azul); }

/* ================================================================ estrutura */
.app { min-height: 100vh; display: grid; grid-template-columns: var(--menu-largura) 1fr; grid-template-rows: auto 1fr; }
.topo { grid-column: 1 / -1; position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between;
        align-items: center; gap: 12px; padding: 10px 20px; background: var(--zz-marinho); color: #fff;
        overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, .06); }
/* faixas inclinadas azul e verde no topo, como no logo */
.topo::before, .topo::after { content: ""; position: absolute; top: 0; bottom: 0; transform: skewX(-30deg); pointer-events: none; }
.topo::before { left: 190px; width: 120px; background: linear-gradient(90deg, rgba(0, 170, 225, .22), transparent); }
.topo::after { left: 290px; width: 60px; background: linear-gradient(90deg, rgba(0, 172, 98, .2), transparent); }
.topo > * { position: relative; z-index: 1; }
.topo-marca { display: flex; align-items: center; gap: 14px; min-width: 0; }
.topo-logo { height: 24px; width: auto; }
.topo-titulo { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .22); font-size: 15px;
               font-family: var(--fonte-marca); color: rgba(255, 255, 255, .85); white-space: nowrap; }
.topo-direita { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dominio { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, .7); margin-right: 8px; }
.dominio select { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .18);
                  padding: 6px 10px; max-width: 240px; }
.dominio option { color: #14212e; background: #fff; }
/* cartão do usuário: avatar com a bolinha de conexão, nome em cima e ramal/perfil embaixo */
.usuario { display: flex; align-items: center; gap: 10px; margin-left: 6px; padding: 5px 10px 5px 6px; font: inherit;
           color: #fff; text-align: left; white-space: nowrap; cursor: pointer; border-radius: 12px;
           background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.usuario:hover, .usuario[aria-expanded="true"] { background: rgba(255, 255, 255, .12); }
.avatar-caixa { position: relative; display: flex; }
.usuario .mini-avatar { width: 34px; height: 34px; font-size: 13px; }
.usuario-texto { display: grid; line-height: 1.2; }
.usuario-texto strong { font-size: 14px; font-weight: 600; }
.topo-ramal { font-size: 12px; color: rgba(255, 255, 255, .62); }
.usuario-seta { width: 18px; height: 18px; color: rgba(255, 255, 255, .6); }
.ponto { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
         background: var(--zz-verde); border: 2px solid var(--zz-marinho); box-shadow: 0 0 8px var(--zz-verde); }
.ponto.off { background: #e05555; box-shadow: 0 0 8px #e05555; }
/* fica fora do topo (que corta o que passa da borda), logo abaixo do cartão */
.menu-usuario { position: fixed; z-index: 40; min-width: 180px; padding: 6px;
                background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra); }
.menu-usuario button { display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; font-size: 15px;
                       color: var(--texto); background: none; border: 0; border-radius: 8px; padding: 9px 12px; cursor: pointer; }
.menu-usuario button:hover { background: var(--cartao-2); color: var(--vermelho); }
.menu-usuario svg { width: 18px; height: 18px; }
.botao-icone { display: flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 14px;
               color: #fff; background: rgba(255, 255, 255, .07); border: 0; border-radius: 10px; width: 40px; height: 40px;
               padding: 0; cursor: pointer; }
.botao-icone:hover { background: rgba(255, 255, 255, .15); }
.botao-icone svg { width: 18px; height: 18px; }
.botao-icone.ativo { color: #4ff0a8; }
.so-celular { display: none; }

.menu { background: var(--cartao); border-right: 1px solid var(--borda); padding: 20px 12px;
        position: sticky; top: 53px; height: calc(100vh - 53px); overflow-y: auto; display: flex; flex-direction: column; }
.menu-grupo + .menu-grupo { margin-top: 22px; }
.menu-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
               color: var(--fraco); padding: 0 14px 8px; }
.menu a { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px;
          color: var(--texto); text-decoration: none; font-weight: 500; font-size: 15px; }
.menu a svg { width: 20px; height: 20px; color: var(--fraco); }
.menu a:hover { background: var(--cartao-2); }
.menu a.ativo { background: var(--azul-claro); color: var(--azul); font-weight: 600; }
.menu a.ativo svg { color: var(--azul); }
.menu a.ativo::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 6px;
                        background: var(--zz-degrade); transform: skewY(-24deg); }
.menu-rodape { margin-top: auto; padding: 18px 14px 0; display: flex; gap: 5px; align-items: center; opacity: .6; }
.menu-rodape i { display: block; width: 18px; height: 6px; transform: skewX(-30deg); background: var(--zz-azul); }
.menu-rodape i + i { background: var(--zz-verde); width: 10px; }
.menu-rodape span { font-size: 12px; color: var(--fraco); margin-left: 6px; font-family: var(--fonte-marca); }
.menu-fundo { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 25; }

.conteudo { padding: 22px 26px 44px; display: grid; gap: 18px; align-content: start; min-width: 0;
            max-width: 1280px; width: 100%; justify-self: center; }
.conteudo > *, .tela > * { min-width: 0; }
.tela { display: grid; gap: 18px; }

.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px 22px;
          box-shadow: var(--sombra); }
.rotulo { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; text-transform: uppercase;
          letter-spacing: .08em; color: var(--fraco); margin-bottom: 16px; }
.rotulo::before { content: ""; width: 12px; height: 9px; background: var(--zz-degrade);
                  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.rotulo-sub { text-transform: none; letter-spacing: 0; font-weight: 400; }
.aviso { background: var(--laranja-claro); color: var(--laranja); border-radius: 12px; padding: 11px 15px; margin: 0; font-weight: 500; }

/* ================================================================ cabeçalho das telas */
.cabecalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.titulo-tela { margin: 0; font-size: 26px; font-weight: 600; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.titulo-sub { font-family: var(--fonte); font-size: 15px; font-weight: 400; }
.ao-vivo { font-family: var(--fonte); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
           color: var(--verde); background: var(--verde-claro); padding: 4px 12px 4px 11px;
           display: inline-flex; align-items: center; gap: 7px; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.ao-vivo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: piscar 1.6s ease-in-out infinite; }
@keyframes piscar { 50% { opacity: .25; } }
.saudacao { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px; }
.saudacao h2 { margin: 0; font-size: 28px; font-weight: 600; }
.saudacao p { margin: 0; color: var(--fraco); }

.periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.periodo-atalhos { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 12px;
                   background: var(--cartao); border: 1px solid var(--borda); }
.periodo-atalhos button { font: inherit; font-size: 14px; font-weight: 600; border: 0; padding: 7px 14px;
                          background: transparent; color: var(--fraco); cursor: pointer; border-radius: 8px; }
.periodo-atalhos button:hover { color: var(--texto); }
.periodo-atalhos button.marcado { background: var(--zz-degrade); color: #fff; border-radius: 0;
                                  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
.periodo-datas { display: flex; align-items: center; gap: 8px; color: var(--fraco); font-size: 14px; }
.periodo-datas input { padding: 7px 10px; background: var(--cartao); }

/* ================================================================ atender */
.linha-principal { display: grid; grid-template-columns: minmax(290px, 1fr) 2fr; gap: 18px; }
.linha-principal > * { min-width: 0; }
.situacao, .chamada { position: relative; overflow: hidden; }
/* faixa inclinada no alto do cartão, na cor da situação */
.situacao::after, .chamada::after { content: ""; position: absolute; right: -30px; top: 0; width: 140px; height: 6px;
                                    transform: skewX(-40deg); background: var(--borda); }
.situacao.disponivel::after { background: var(--verde); box-shadow: var(--brilho) var(--verde); }
.situacao.pausa::after { background: var(--laranja); }
.situacao-corpo { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.status-icone { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
                background: var(--cartao-2); color: var(--fraco); }
.status-icone svg { width: 24px; height: 24px; }
.situacao.disponivel .status-icone { background: var(--verde-claro); color: var(--verde); box-shadow: 0 0 0 6px var(--verde-claro); }
.situacao.pausa .status-icone { background: var(--laranja-claro); color: var(--laranja); box-shadow: 0 0 0 6px var(--laranja-claro); }
.status { font-family: var(--fonte-marca); font-size: 28px; font-weight: 600; line-height: 1.15; }
.situacao.disponivel .status { color: var(--verde); }
.situacao.pausa .status { color: var(--laranja); }
.seletor { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.opcao { display: flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 600;
         padding: 12px 8px; border: 0; cursor: pointer; background: var(--cartao-2); color: var(--fraco);
         clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.opcao:hover:not(:disabled) { color: var(--texto); background: var(--borda); }
.opcao:disabled { cursor: default; }
.opcao.disponivel.marcado { background: var(--verde); color: #fff; }
.opcao.pausa.marcado { background: var(--laranja); color: #fff; }
:root[data-tema="escuro"] .opcao.marcado { color: #06131c; }

.chamada { transition: border-color .3s; }
.chamada.em_ligacao::after { width: 200px; background: var(--zz-degrade); box-shadow: var(--brilho) var(--zz-azul); }
.chamada.tocando { border-color: var(--laranja); animation: tocar 1s ease-in-out infinite; }
.chamada.tocando::after { width: 200px; background: var(--laranja); }
@keyframes tocar {
  0%, 100% { box-shadow: var(--sombra), 0 0 0 0 rgba(245, 165, 60, 0); }
  50% { box-shadow: var(--sombra), 0 0 0 7px rgba(245, 165, 60, .3); }
}
.vazio-ilustrado { display: flex; align-items: center; gap: 20px; color: var(--fraco); padding: 6px 0; }
.vazio-ilustrado svg { width: 96px; height: 72px; }
.vazio-ilustrado b { display: block; color: var(--texto); font-family: var(--fonte-marca); font-size: 19px; font-weight: 600; margin-bottom: 2px; }
.chamada-corpo { display: flex; align-items: center; gap: 20px; }
.avatar { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; flex: none;
          font-family: var(--fonte-marca); font-size: 28px; font-weight: 600; color: #fff; background: var(--zz-degrade);
          box-shadow: var(--brilho) rgba(0, 170, 225, .35); }
.chamada.tocando .avatar { background: linear-gradient(135deg, #ffb547, #e97800); box-shadow: var(--brilho) rgba(245, 165, 60, .4); }
.chamada-info { min-width: 0; }
.fase { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 12px 3px 11px;
        background: var(--azul-claro); color: var(--azul); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em;
        clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.fase::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chamada.tocando .fase { background: var(--laranja-claro); color: var(--laranja); }
.cliente { font-family: var(--fonte-marca); font-size: 32px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.detalhes { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--fraco); font-size: 17px; margin-top: 8px; }
.detalhes > span { display: inline-flex; align-items: center; gap: 7px; }
.detalhes svg { color: var(--zz-azul); }
#tempo { font-variant-numeric: tabular-nums; color: var(--texto); font-weight: 600; }

/* ================================================================ números (KPI) */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.kpi { position: relative; overflow: hidden; background: var(--cartao); border: 1px solid var(--borda);
       border-radius: var(--raio); padding: 18px 20px 16px; box-shadow: var(--sombra); --cor: var(--zz-azul); }
/* duas barras inclinadas da cor do número no canto, como as do logo */
.kpi::before { content: ""; position: absolute; right: -14px; top: 16px; width: 54px; height: 11px; transform: skewX(-32deg);
               background: var(--cor); }
.kpi::after { content: ""; position: absolute; right: -10px; top: 32px; width: 32px; height: 11px; transform: skewX(-32deg);
              background: var(--cor); opacity: .35; }
.kpi.bom { --cor: var(--verde); }
.kpi.ruim { --cor: var(--vermelho); }
.kpi.alerta { --cor: var(--laranja); }
.kpi-valor { font-family: var(--fonte-marca); font-size: 34px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
:root[data-tema="escuro"] .kpi-valor { text-shadow: 0 0 22px color-mix(in srgb, var(--cor) 40%, transparent); }
.kpi-nome { font-size: 14px; color: var(--fraco); margin-top: 3px; }
.kpi-extra { font-size: 13px; color: var(--fraco); margin-top: 1px; }

/* ================================================================ tabelas */
.tabela { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--fraco); font-weight: 700; }
tbody tr:hover { background: var(--cartao-2); }
tbody tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
td.fraco { color: var(--fraco); }
td.forte { font-weight: 600; }
td.vazio-tab { text-align: center; color: var(--fraco); padding: 28px; white-space: normal; }
.pilula { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; padding: 2px 12px 2px 10px;
          clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.pilula svg { width: 14px; height: 14px; }
.pilula.sim { background: var(--verde-claro); color: var(--verde); }
.pilula.nao { background: var(--vermelho-claro); color: var(--vermelho); }
.pessoa { display: flex; align-items: center; gap: 11px; }
.barra-cel { display: flex; align-items: center; gap: 12px; min-width: 170px; }
.barra-cel .trilho { flex: 1; height: 9px; background: var(--cartao-2); overflow: hidden; transform: skewX(-24deg); }
.barra-cel .enchimento { height: 100%; background: var(--serie-1); }
.barra-cel span { font-variant-numeric: tabular-nums; min-width: 2.5em; text-align: right; font-weight: 600; }
.tabela-topo { display: flex; justify-content: space-between; margin: 16px 0 6px; font-size: 14px; }

.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filtros label { display: grid; gap: 4px; font-size: 13px; color: var(--fraco); }
.filtros select, .filtros input { padding: 8px 10px; min-width: 150px; }
.filtros .botao { margin-left: auto; }
.paginacao { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; }
.paginacao:empty { display: none; }
.paginacao button { font: inherit; font-size: 14px; border: 1px solid var(--borda); background: var(--cartao-2);
                    color: var(--texto); border-radius: 9px; padding: 6px 12px; cursor: pointer; }
.paginacao button:disabled { opacity: .4; cursor: default; }
.paginacao .por-pagina { display: flex; align-items: center; gap: 6px; margin-left: 8px; }
.paginacao select { font: inherit; font-size: 14px; border: 1px solid var(--borda); background: var(--cartao-2);
                    color: var(--texto); border-radius: 9px; padding: 5px 8px; cursor: pointer; }

/* ================================================================ avatares das pessoas (cor própria) */
.mini-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
               font-family: var(--fonte-marca); font-weight: 600; font-size: 14px; color: #fff; background: var(--cor-pessoa, #5a6a7b); }

/* ================================================================ gráficos */
.grafico { position: relative; min-height: 220px; }
.grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafico .grade { stroke: var(--grade); stroke-width: 1; }
.grafico .eixo-texto { fill: var(--fraco); font-size: 12px; font-variant-numeric: tabular-nums; font-family: var(--fonte); }
.grafico .alvo { fill: transparent; }
.grafico .faixa { fill: var(--cartao-2); }
.grafico .s1 { fill: var(--serie-1); }
.grafico .s2 { fill: var(--serie-2); }
.grafico .s3 { fill: var(--serie-3); }
.grafico .s4 { fill: var(--serie-4); }
.grafico .s5 { fill: var(--serie-5); }
.grafico .s-outras { fill: var(--serie-outras); }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--fraco); margin-bottom: 10px; }
.legenda span { display: inline-flex; align-items: center; gap: 7px; }
.legenda i { width: 14px; height: 10px; display: inline-block; transform: skewX(-20deg); }
.legenda .s1 { background: var(--serie-1); }
.legenda .s2 { background: var(--serie-2); }
.legenda .s3 { background: var(--serie-3); }
.legenda .s4 { background: var(--serie-4); }
.legenda .s5 { background: var(--serie-5); }
.legenda .s-outras { background: var(--serie-outras); }
.dica { position: fixed; z-index: 50; pointer-events: none; background: #071521; color: #fff; border: 1px solid #1c3345;
        font-size: 13px; padding: 9px 11px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); line-height: 1.55; }
.dica b { font-weight: 600; }
.dica i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 6px; }
.dica .s1 { background: var(--serie-1); }
.dica .s2 { background: var(--serie-2); }
.dica .s3 { background: var(--serie-3); }
.dica .s4 { background: var(--serie-4); }
.dica .s5 { background: var(--serie-5); }
.dica .s-outras { background: var(--serie-outras); }

/* ================================================================ equipe ao vivo */
.equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.agente { position: relative; overflow: hidden; align-content: start; background: var(--cartao); border: 1px solid var(--borda);
          border-radius: var(--raio); padding: 18px; box-shadow: var(--sombra); display: grid; gap: 12px; --cor: var(--borda); }
.agente::after { content: ""; position: absolute; right: -24px; top: 0; width: 110px; height: 5px; transform: skewX(-40deg); background: var(--cor); }
.agente.disponivel { --cor: var(--verde); }
.agente.pausa, .agente.tocando { --cor: var(--laranja); }
.agente.em_ligacao { --cor: var(--zz-azul); }
.agente.disponivel::after, .agente.em_ligacao::after { box-shadow: var(--brilho) var(--cor); }
.agente.tocando { animation: tocar 1s ease-in-out infinite; }
.agente-topo { display: flex; align-items: center; gap: 12px; }
.agente-nome { font-family: var(--fonte-marca); font-weight: 600; font-size: 17px; line-height: 1.2; }
.agente-ramal { font-size: 13px; color: var(--fraco); }
.selo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 3px 12px 3px 11px;
        background: var(--cartao-2); color: var(--fraco); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.selo.disponivel { background: var(--verde-claro); color: var(--verde); }
.selo.pausa, .selo.tocando { background: var(--laranja-claro); color: var(--laranja); }
.selo.em_ligacao { background: var(--azul-claro); color: var(--azul); }
.agente-linha { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 8px; font-size: 14px; }
.selo { white-space: nowrap; }
.tempo-agente { font-variant-numeric: tabular-nums; }
.agente-cliente { font-size: 14px; background: var(--cartao-2); border-radius: 12px; padding: 9px 12px; }
.agente-cliente b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* modo telão: só a equipe, números e cartões maiores, sem menu */
.telao .menu, .telao .topo-direita > :not(#btn-telao) { display: none !important; }
.telao.app { grid-template-columns: 1fr; }
.telao .conteudo { max-width: none; padding: 24px 32px; }
.telao .kpi-valor { font-size: 54px; }
.telao .equipe { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.telao .agente-nome { font-size: 21px; }
.telao .titulo-tela { font-size: 32px; }

/* ================================================================ telas menores */
@media (max-width: 1000px) {
  .linha-principal { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .colunas-equipe { flex-direction: column; align-items: stretch; }
  .coluna { flex: none; min-width: 0; }
  .app { grid-template-columns: 1fr; }
  .so-celular { display: flex; }
  .menu { position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; width: 268px; z-index: 30;
          transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
  .menu.aberto { transform: none; }
  .conteudo { padding: 14px 12px 28px; }
  .topo::before { left: 110px; } .topo::after { left: 200px; }
  .topo-titulo, .dominio span, #btn-telao { display: none; }
  .dominio select { max-width: 150px; }
}
@media (max-width: 560px) {
  .topo { padding: 10px 12px; }
  .usuario-texto, .usuario-seta { display: none; }
  .usuario { padding: 3px; }
  .cliente { font-size: 24px; }
  .avatar { width: 58px; height: 58px; font-size: 21px; }
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .kpi-valor { font-size: 26px; }
  .titulo-tela, .saudacao h2 { font-size: 22px; }
  .periodo-datas { width: 100%; }
  .periodo-datas input { flex: 1; min-width: 0; }
  .filtros label { flex: 1 1 140px; }
  .filtros .botao { margin-left: 0; width: 100%; }
  .vazio-ilustrado svg { width: 70px; height: 54px; }
}

/* ================================================================ comparação e tendência nos números */
.kpi-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; margin-top: 6px;
             color: var(--fraco); }
.kpi-delta.bom { color: var(--verde); }
.kpi-delta.ruim { color: var(--vermelho); }
.kpi-delta small { font-weight: 400; color: var(--fraco); }
.kpi-spark-caixa { position: relative; margin-top: 8px; }
.kpi-spark { display: block; width: 100%; height: 30px; overflow: visible; }
.kpi-spark-ponto { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--cor);
                   transform: translate(-50%, -50%); }
.kpi-spark polyline { fill: none; stroke: var(--fraco); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; opacity: .55; }


/* ================================================================ ligação em destaque */
.linha-principal.com-chamada { grid-template-columns: 1fr; }
.linha-principal.com-chamada #cartao-chamada { order: -1; padding: 26px 30px; }
.linha-principal.com-chamada .cliente { font-size: 44px; }
.linha-principal.com-chamada .detalhes { font-size: 20px; }
.linha-principal.com-chamada .avatar { width: 108px; height: 108px; font-size: 40px; }
.linha-principal.com-chamada .situacao { display: grid; grid-template-columns: auto 1fr minmax(260px, 340px); align-items: center; gap: 20px; }
.linha-principal.com-chamada .situacao .rotulo { margin: 0; }
.linha-principal.com-chamada .situacao-corpo { margin: 0; }
.linha-principal.com-chamada .situacao .erro { grid-column: 1 / -1; }
.avatar { position: relative; }
.chamada.tocando .avatar::before, .chamada.tocando .avatar::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--laranja);
  animation: onda 1.6s ease-out infinite; }
.chamada.tocando .avatar::after { animation-delay: .8s; }
@keyframes onda { from { transform: scale(1); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }
.chamada.tocando { background: linear-gradient(100deg, var(--laranja-claro), var(--cartao) 55%); }
.copiar { margin-top: 14px; padding: 8px 14px; font-size: 14px; }
.copiar.copiado { border-color: var(--verde); color: var(--verde); }

/* ================================================================ equipe em colunas */
.colunas-equipe { display: flex; gap: 18px; align-items: flex-start; }
.coluna { flex: var(--peso, 1) 1 0; min-width: 200px; display: grid; gap: 12px; align-content: start; }
.coluna-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 12px; }
.coluna-titulo { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px 2px;
                 font-family: var(--fonte-marca); font-size: 17px; font-weight: 600; border-bottom: 3px solid var(--cor, var(--borda)); }
.coluna-titulo span { font-family: var(--fonte); font-size: 13px; font-weight: 700; color: var(--cor); background: var(--cartao-2);
                      padding: 1px 10px; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.coluna.ligacao { --cor: var(--zz-azul); }
.coluna.livres { --cor: var(--verde); }
.coluna.pausas { --cor: var(--laranja); }
.fora-equipe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 20px; font-size: 13px; }
.fora-equipe[hidden] { display: none; }
.fora-titulo { color: var(--fraco); font-weight: 600; margin-right: 4px; }
.fora-item { padding: 3px 10px; border: 1px solid var(--borda); border-radius: 999px; color: var(--fraco); }
.telao .fora-equipe { display: none; }
.coluna-vazia { color: var(--fraco); font-size: 14px; padding: 14px 6px; border: 1px dashed var(--borda); border-radius: 12px; text-align: center; }
.agente.pausa-longa { --cor: var(--vermelho); border-color: color-mix(in srgb, var(--vermelho) 45%, var(--borda)); }
.agente.pausa-longa .tempo-agente { color: var(--vermelho); font-weight: 700; }
.selo.pausa-longa { background: var(--vermelho-claro); color: var(--vermelho); }
.coluna-vazia { font-size: 13px; }
/* equipe grande: cartões mais baixos, cliente numa linha só */
.compacta .agente { padding: 12px 14px; gap: 8px; }
.compacta .agente .mini-avatar { width: 32px; height: 32px; font-size: 12px; }
.compacta .agente-nome { font-size: 15px; }
.compacta .agente-cliente { padding: 6px 10px; }
.compacta .agente-cliente b { display: inline; }
.compacta .agente-cliente span { display: none; }
.compacta .coluna-cartoes { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.compacta .agente > .fraco:last-child { display: none; }
.telao .coluna-cartoes { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.telao .compacta .coluna-cartoes { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* ================================================================ mapa de calor dia x hora */
.calor { display: grid; gap: 3px; overflow-x: auto; padding-bottom: 4px; }
.calor-linha { display: grid; grid-template-columns: 44px repeat(var(--colunas), minmax(30px, 1fr)); gap: 3px; align-items: center; }
.calor-rotulo { font-size: 13px; color: var(--fraco); font-weight: 600; }
.calor-hora { font-size: 12px; color: var(--fraco); text-align: center; font-variant-numeric: tabular-nums; }
.calor-celula { height: 30px; border-radius: 4px; background: var(--calor-0); }
.calor-celula:hover { outline: 2px solid var(--texto); outline-offset: 1px; }
.calor-escala { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fraco); margin-top: 12px; }
.calor-escala .barra { display: flex; gap: 2px; }
.calor-escala .barra i { width: 22px; height: 10px; border-radius: 2px; display: block; }
.c0 { background: var(--calor-0); }
.c1 { background: var(--calor-1); }
.c2 { background: var(--calor-2); }
.c3 { background: var(--calor-3); }
.c4 { background: var(--calor-4); }
.c5 { background: var(--calor-5); }
.c6 { background: var(--calor-6); }

@media (max-width: 860px) {
  .linha-principal.com-chamada .situacao { grid-template-columns: 1fr; gap: 14px; }
  .linha-principal.com-chamada .cliente { font-size: 30px; }
  .linha-principal.com-chamada .avatar { width: 72px; height: 72px; font-size: 26px; }
  .linha-principal.com-chamada #cartao-chamada { padding: 20px; }
}

/* ================================================================ motivo da pausa */
.motivos { margin-top: 12px; background: var(--cartao-2); border: 1px solid var(--borda); border-radius: 14px; padding: 14px; }
.motivos-titulo { font-size: 14px; color: var(--fraco); margin-bottom: 10px; }
.motivos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.motivos-lista button { font: inherit; font-weight: 600; font-size: 14px; padding: 10px 8px; border: 0; cursor: pointer;
                        background: var(--cartao); color: var(--texto); border-left: 3px solid var(--laranja);
                        clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.motivos-lista button:hover { background: var(--laranja-claro); color: var(--laranja); }
.linha-principal.com-chamada .motivos { grid-column: 1 / -1; }
.agente-motivo { font-weight: 600; }

/* ================================================================ relatório: rótulo com botão */
.rotulo-linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.rotulo-linha .rotulo { margin: 0; }

/* ================================================================ desistências */
.desistencias-corpo { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 24px; align-items: center; }
.desistencias-total .kpi-valor { --cor: var(--vermelho); }
.desistencias-faixas { display: grid; gap: 10px; }
.faixa { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; font-size: 14px; }
.faixa .barra-cel .enchimento { background: var(--serie-2); }
/* pausas */
.pausas-motivos { display: grid; gap: 14px; }
.pausa-motivo { display: grid; grid-template-columns: minmax(200px, 340px) 1fr auto; align-items: center; gap: 16px; }
.pausa-motivo .barra-cel .enchimento, #tab-pausas-atend .barra-cel .enchimento { background: var(--serie-2); }
.ficha-pausas-texto { margin: 4px 0 10px; }
@media (max-width: 700px) { .pausa-motivo { grid-template-columns: 1fr; gap: 6px; } .pausa-motivo .pilula { justify-self: start; } }
@media (max-width: 700px) { .desistencias-corpo { grid-template-columns: 1fr; } }

/* ================================================================ desempenho: ficha do atendente */
.ficha-barra { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ficha-quem { display: flex; align-items: center; gap: 12px; }
.ficha-nome { font-family: var(--fonte-marca); font-size: 20px; font-weight: 600; }
.seletor-atendente { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 14px; color: var(--fraco); }
.seletor-atendente select { min-width: 220px; }
.voltar { padding: 8px 14px; }
tr.clicavel { cursor: pointer; }
tr.clicavel:hover td { background: var(--cartao-2); }
tr.clicavel:focus-visible { outline: 2px solid var(--zz-azul); outline-offset: -2px; }
td.seta-linha { color: var(--fraco); font-size: 20px; width: 24px; text-align: right; }
tr.clicavel:hover td.seta-linha { color: var(--azul); }
@media (max-width: 560px) { .seletor-atendente { margin-left: 0; width: 100%; } .seletor-atendente select { flex: 1; min-width: 0; } }

/* ================================================================ tags */
.tag-ligacao { border-left: 4px solid var(--zz-azul); }
.tag-opcoes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tag-opcoes button { font: inherit; font-weight: 600; font-size: 14px; padding: 9px 18px; border: 1px solid var(--borda);
                     cursor: pointer; background: var(--cartao-2); color: var(--texto);
                     clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
.tag-opcoes button:hover { border-color: var(--zz-azul); color: var(--azul); }
.tag-opcoes button[aria-checked="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
:root[data-tema="escuro"] .tag-opcoes button[aria-checked="true"] { color: #062030; }
.tag-obs { display: grid; gap: 6px; font-size: 14px; color: var(--fraco); }
textarea { font: inherit; color: var(--texto); background: var(--cartao-2); padding: 9px 11px; resize: vertical;
           border: 1px solid var(--borda); border-radius: 10px; min-height: 44px; }
textarea:focus { outline: 2px solid var(--zz-azul); outline-offset: 1px; }
.tag-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.tag-acoes #tag-contador { margin-right: auto; font-size: 13px; }
.tag-acoes .principal { font-size: 15px; padding: 10px 26px; }
.tag-acoes .principal:disabled { filter: grayscale(1); opacity: .45; cursor: default; }
.tag-feita { display: flex; align-items: center; gap: 12px; }
.tag-feita > div { flex: 1; min-width: 0; display: grid; }
.tag-feita-icone { width: 26px; height: 26px; color: var(--verde); }
#tag-feita-texto { font-weight: 600; }
#tag-feita-obs { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.botao-fechar { border: 0; background: none; color: var(--fraco); cursor: pointer; padding: 6px; display: flex; }
.botao-fechar:hover { color: var(--texto); }
.botao-fechar svg { width: 18px; height: 18px; }
.tag-selo { display: inline-block; font-size: 13px; font-weight: 600; padding: 2px 12px; white-space: nowrap;
            background: var(--azul-claro); color: var(--azul);
            clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.tag-obs-texto { font-size: 13px; color: var(--fraco); max-width: 240px; overflow: hidden; text-overflow: ellipsis;
                 white-space: nowrap; margin-top: 3px; }
.tags-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.tags-lista .tag-selo b { font-weight: 700; margin-left: 4px; }
.tags-lista .tag-selo small { font-size: 12px; font-weight: 500; margin-left: 6px; opacity: .8; }
.tags-lista .tag-selo.sem-tag { background: var(--cartao-2); color: var(--fraco); }
.nova-tag { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 18px; }
.nova-tag label { display: grid; gap: 4px; font-size: 13px; color: var(--fraco); flex: 0 1 340px; }
.acoes-tag { display: flex; gap: 8px; justify-content: flex-end; }
.acoes-tag .botao { padding: 6px 12px; font-size: 14px; }
.nome-tag-input { width: 100%; max-width: 280px; padding: 6px 10px; }
tr.desativada td:first-child, tr.desativada td:nth-child(2) { color: var(--fraco); }
.pilula.neutra { background: var(--cartao-2); color: var(--fraco); }
@media (max-width: 560px) { .tag-acoes { flex-wrap: wrap; } .tag-acoes #tag-contador { width: 100%; } }

/* logins (admin) */
.senha-nova { border-left: 4px solid var(--verde); }
.senha-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.senha-linha code { font-size: 22px; font-weight: 700; letter-spacing: .04em; padding: 8px 14px;
                    background: var(--cartao-2); user-select: all; }
.senha-linha .botao-fechar { margin-left: auto; }
.login-quem { display: grid; gap: 2px; }
.login-quem small, .login-registro { font-size: 13px; color: var(--fraco); }

/* gravações */
.acessos { margin-top: 10px; }
.acessos summary { cursor: pointer; font-size: 14px; color: var(--fraco); }
.acessos .tabela { margin-top: 8px; }
.player { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 14px;
          background: var(--cartao-2); border-left: 4px solid var(--azul); }
tr.linha-player > td { padding: 0 0 12px !important; border-top: 0 !important; }
tr:has(+ tr.linha-player) > td { border-bottom: 0 !important; }
tr.linha-player .erro { margin: 6px 14px 0; }
.player-info { font-size: 14px; }
.player audio { flex: 1 1 280px; min-width: 0; height: 38px; }
.player .botao { padding: 8px 14px; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.player .botao svg { width: 16px; height: 16px; }
.botao-ouvir { border: 1px solid var(--borda); background: var(--cartao-2); color: var(--azul); border-radius: 50%;
               width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.botao-ouvir:hover, .botao-ouvir.tocando { background: var(--azul); color: #fff; border-color: var(--azul); }
.botao-ouvir svg { width: 16px; height: 16px; }
.col-ouvir { width: 1%; padding-right: 0 !important; }
td.nowrap { white-space: nowrap; }
.permissoes { display: flex; gap: 14px; white-space: nowrap; }
.permissao { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.permissao input { width: 16px; height: 16px; padding: 0; accent-color: var(--verde); cursor: pointer; }
.permissao.desligada { color: var(--fraco); cursor: default; }
.cronometro { font-variant-numeric: tabular-nums; }
.cronometro.passou { color: var(--vermelho); font-weight: 600; }

/* campanhas */
.andamento { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.andamento .trilho { flex: 1; height: 12px; background: var(--cartao-2); overflow: hidden; transform: skewX(-24deg); }
.andamento .enchimento { height: 100%; background: var(--serie-1); }
.andamento span { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.barra-cel.andamento-cel { min-width: 150px; }
.login-registro { display: block; white-space: normal; max-width: 220px; }

/* janela de edição de login */
.janela { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; display: none;
          color: var(--texto); background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
          box-shadow: 0 30px 80px rgba(0, 0, 0, .45); overflow: hidden; }
.janela[open] { display: flex; flex-direction: column; }
.janela::backdrop { background: rgba(4, 12, 20, .62); }
.janela-topo { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--borda); }
.janela-quem { flex: 1; min-width: 0; }
.janela-corpo { padding: 18px 20px 6px; overflow-y: auto; display: grid; gap: 22px; }
.janela-corpo .rotulo { margin-bottom: 10px; }
.janela-corpo .rotulo-linha { margin-bottom: 10px; }
.janela-rodape { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px;
                 border-top: 1px solid var(--borda); background: var(--cartao-2); }
.janela-rodape .erro { margin: 0 auto 0 0; }
.janela-rodape .principal { font-size: 15px; padding: 10px 28px; }
.janela-rodape .principal:disabled { filter: grayscale(1); opacity: .45; cursor: default; }
.jl-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.jl-opcao { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; font-size: 14px;
            background: var(--cartao-2); border: 1px solid var(--borda); border-radius: 10px; }
.jl-opcao:has(input:checked) { border-color: var(--zz-azul); }
.jl-opcao input { width: 17px; height: 17px; padding: 0; accent-color: var(--zz-azul); cursor: pointer; flex: none; }
.jl-opcao span { display: grid; }
.jl-opcao b { font-weight: 600; }
.jl-opcao small { color: var(--fraco); font-size: 12px; }
.jl-opcao.desligada { opacity: .5; cursor: default; }
.jl-atalhos { display: flex; gap: 12px; }
.jl-atalhos button { font: inherit; font-size: 13px; color: var(--azul); background: none; border: 0; padding: 0; cursor: pointer; }
.jl-atalhos button:hover { text-decoration: underline; }
.jl-acesso { display: flex; flex-wrap: wrap; gap: 10px; }
.jl-acesso svg { width: 16px; height: 16px; }
.janela .nota { margin-top: 10px; }
.jn-campos { display: grid; gap: 12px; }
.jn-campos label { display: grid; gap: 5px; font-size: 13px; color: var(--fraco); }
.jn-campos input, .jn-campos select { font-size: 15px; padding: 10px 12px; }
#btn-novo-login { font-size: 15px; padding: 9px 22px; }

/* ================================================================ botão de informação (i) com caixa explicativa */
.info-ajuda { position: relative; margin-left: auto; align-self: center; }
.botao-info { border: 0; background: none; color: var(--fraco); cursor: pointer; padding: 6px; display: flex; border-radius: 50%; }
.botao-info:hover, .botao-info[aria-expanded="true"] { color: var(--texto); }
.botao-info svg { width: 20px; height: 20px; }
.info-caixa { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(360px, calc(100vw - 32px));
              background: var(--cartao-2); border: 1px solid var(--borda); border-radius: 10px; padding: 14px 16px;
              box-shadow: 0 8px 24px rgba(0, 0, 0, .25); font-size: 13px; line-height: 1.5; color: var(--texto); }
.info-caixa p { margin: 0 0 8px; }
.info-caixa p:last-child { margin-bottom: 0; }
.info-caixa ul { margin: 0 0 8px; padding-left: 18px; }

/* ================================================================ aviso de carregando (só se a resposta passar de meio segundo) */
.carregando-barra { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; overflow: hidden; pointer-events: none; }
.carregando-barra::before { content: ""; position: absolute; top: 0; bottom: 0; width: 35%;
                            background: linear-gradient(90deg, transparent, var(--azul), var(--verde), transparent);
                            animation: carregando-corre 1.1s ease-in-out infinite; }
@keyframes carregando-corre { from { left: -35%; } to { left: 100%; } }
.carregando-selo { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60; pointer-events: none;
                   display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 13px;
                   background: var(--cartao-2); border: 1px solid var(--borda); color: var(--texto);
                   box-shadow: 0 6px 18px rgba(0, 0, 0, .22); }
.carregando-selo .giro { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--borda);
                         border-top-color: var(--azul); animation: carregando-gira .8s linear infinite; }
@keyframes carregando-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .carregando-barra::before { animation: none; left: 0; width: 100%; opacity: .6; }
  .carregando-selo .giro { animation-duration: 2.4s; }
}

/* ================================================================ funil da campanha */
.cartao-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.cartao-topo .rotulo { margin-bottom: 0; }
.funil-escolha { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.funil-escolha select { padding: 5px 8px; min-width: 150px; }
.funil { display: grid; gap: 10px; margin-top: 14px; }
.funil-passo { display: grid; grid-template-columns: minmax(130px, 200px) 1fr minmax(120px, auto); align-items: center; gap: 14px; }
.funil-nome { font-size: 14px; }
.funil-trilho { height: 22px; background: var(--cartao-2); overflow: hidden; transform: skewX(-24deg); }
.funil-trilho .enchimento { height: 100%; background: var(--serie-1); min-width: 2px; }
.funil-passo.ultimo .funil-trilho .enchimento { background: var(--serie-3); }
.funil-num { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; text-align: right; }
.funil-num small { font-weight: 500; color: var(--fraco); margin-left: 6px; }
@media (max-width: 640px) {
  .funil-passo { grid-template-columns: 1fr auto; }
  .funil-trilho { grid-column: 1 / -1; grid-row: 2; }
}