/*
  Folha de estilo do Portal TI-CN.

  Ficava embutida no template. Foi movida para ca para que a CSP possa
  restringir a origem dos recursos: com o CSS e o JS em arquivo, a politica
  bloqueia qualquer coisa injetada na pagina.

  A identidade visual daqui e FIXA e aprovada - cores medidas da marca,
  textura, marca d'agua e a animacao do Timber. Ver SKILL.md do projeto
  antes de alterar.
*/

  /* =========================================================================
     Este layout e o mesmo da pagina estatica aprovada pelo Airton, portado
     para o portal. Nao simplificar: a marca d'agua, a textura de grade e a
     sequencia do Timber saindo do "C" fazem parte do que foi aprovado.
     A unica coisa acrescentada e o menu do usuario no canto direito.
     ========================================================================= */
  :root{
    --navy:#0E1D2D;
    --navy-deep:#081320;
    --turq:#13DCD2;
    --turq-dim:rgba(19,220,210,.55);
    --line:rgba(19,220,210,.16);
    --text:#E8F1F5;
    --muted:#8FA6B8;
    --ok:#49C88F;      --ok-bg:rgba(73,200,143,.12);
    --erro:#EC7B6E;    --erro-bg:rgba(236,123,110,.12);
    --aviso:#E0A94A;   --aviso-bg:rgba(224,169,74,.12);
  }
  *{box-sizing:border-box}
  html{height:100%}
  body{
    /* min-height (nao height) para a pagina crescer quando o conteudo passar
       da tela. Junto com o flex abaixo, e o que mantem o rodape ancorado no
       fim: em pagina curta ele encosta na base da janela, em pagina longa
       desce junto com o conteudo. */
    min-height:100%;
    margin:0;
    font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
    color:var(--text);
    background:
      radial-gradient(1200px 700px at 78% 12%, rgba(19,220,210,.10), transparent 60%),
      radial-gradient(900px 600px at 8% 92%, rgba(19,220,210,.06), transparent 60%),
      linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
    background-attachment:fixed;
    display:flex; flex-direction:column;
    position:relative; overflow-x:hidden;
  }
  /* textura de grade discreta, ecoando a rede do mascote */
  body::before{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
    background-image:
      linear-gradient(rgba(19,220,210,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(19,220,210,.045) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(1000px 700px at 70% 30%, #000 20%, transparent 75%);
    -webkit-mask-image:radial-gradient(1000px 700px at 70% 30%, #000 20%, transparent 75%);
  }
  /* MASCOTE como marca d'agua */
  .mascote{
    position:fixed; z-index:0; pointer-events:none; user-select:none;
    right:clamp(-60px,-2vw,0px); bottom:0;
    height:min(88vh,760px); width:auto;
    opacity:.10;
    filter:drop-shadow(0 0 60px rgba(19,220,210,.35));
  }
  /* .wrap tambem precisa ser coluna flexivel: sem isso o "flex:1" do main e o
     "margin-top:auto" do rodape nao valem, porque o filho direto do body e
     este container - e o rodape acabava no meio da pagina. */
  .wrap{
    position:relative; z-index:1; width:100%; max-width:1180px; margin:0 auto;
    padding:0 28px; flex:1; display:flex; flex-direction:column;
  }

  /* ------------------------------------------------------------ cabecalho */
  header{padding:34px 0 0}
  /* 07/10/2026 (Airton): com o menu crescendo (VIMOB, MEGA...), o bloco da
     conta (Admin/Usuarios/.../Sair) vai mais para a DIREITA, aproveitando a
     margem livre da tela grande (ate 240px), para o menu caber numa linha.
     A marca continua alinhada com o conteudo. Em tela estreita nao muda nada. */
  @media (min-width:1200px){
    header{margin-right:calc(-1 * min(240px, (100vw - 1180px) / 2))}
  }
  /* notebook (1280-1366px): espacos um pouco menores para menu e conta
     caberem na mesma linha; se ainda assim quebrar, a conta fica a direita */
  @media (min-width:900px){
    header .topbar{gap:14px}
    header .paginas a{padding:7px 8px}
    header .conta{margin-left:auto}
  }
  .topbar{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
  .brand{display:flex; align-items:center; gap:18px; position:relative; perspective:520px;
         text-decoration:none; color:inherit}
  .brand .logo{
    height:46px; width:auto; position:relative; z-index:2;
    /* logo original e azul escuro: clareia para funcionar no fundo escuro */
    filter:brightness(0) invert(1) opacity(.92);
  }

  /* ===== TIMBER no cabecalho =====
     Comeca escondido DENTRO do "C" do logo: fica atras do logo (z-index 1),
     e como o vao interno do C e transparente, so a parte dele que esta no
     buraco aparece. Depois agacha, salta em arco, passa para a frente
     (z-index 3), aterrissa ao lado do "N", da um giro de 360 graus e fica
     pulsando ali para sempre. */
  .timber{
    height:38px; width:auto; flex:none;
    position:relative; z-index:1;
    transform-origin:center bottom;
    filter:drop-shadow(0 0 10px rgba(19,220,210,.35));
    /* Dois atos. A ORDEM de declaracao importa: quando duas animacoes
       disputam a mesma propriedade, vence a declarada por ultimo. E o
       fill-mode importa mais ainda — "both" aplica o primeiro quadro ja no
       instante zero, ainda durante o atraso; se o pulso usasse "both", ele
       apagaria o salto inteiro (foi um bug real aqui).
         ato 1  0,9s -> 3,5s   sai do "C", salta, aterrissa e gira
         ato 2  3,5s ->        pulsa para sempre ao lado do "N"          */
    animation:
      timber-saltar 2.6s cubic-bezier(.34,.9,.36,1)  .9s both,
      timber-pulsar 3.2s ease-in-out                3.5s infinite;
  }

  /* Coordenadas medidas no proprio layout renderizado, nao estimadas:
     o logo tem 99px de largura e o Timber fica 18px a direita dele, entao o
     vao do "C" esta 115px a esquerda do centro natural do Timber. Como sao
     deslocamentos RELATIVOS, valem em qualquer largura de tela.
     Todos os quadros usam a MESMA lista de funcoes na mesma ordem; se
     variar, o navegador troca a interpolacao por matriz e o movimento
     "engasga". */
  @keyframes timber-saltar{
    /* espiando de dentro do "C" */
    0%,  10% { transform:translate(-115px,-16px) rotateY(0deg)   rotate(0deg)  scale(.50,.50); z-index:1; opacity:.85 }
    /* agacha antes de saltar */
    18%      { transform:translate(-115px,-12px) rotateY(0deg)   rotate(0deg)  scale(.50,.43); z-index:1; opacity:.9 }
    /* sai para a frente e sobe no arco — o topo nao pode passar de -26px,
       senao ele sai pela borda superior da tela */
    30%      { transform:translate(-98px, -22px) rotateY(0deg)   rotate(-7deg) scale(.62,.62); z-index:3; opacity:1 }
    48%      { transform:translate(-50px, -26px) rotateY(0deg)   rotate(-4deg) scale(.82,.82); z-index:3; opacity:1 }
    /* aterrissa com uma leve compressao */
    64%      { transform:translate(0,      3px)  rotateY(0deg)   rotate(0deg)  scale(1.08,.90); z-index:3; opacity:1 }
    /* pequeno repique */
    72%      { transform:translate(0,     -5px)  rotateY(0deg)   rotate(0deg)  scale(1,1);      z-index:3; opacity:1 }
    /* firma antes de girar */
    78%      { transform:translate(0,      0px)  rotateY(0deg)   rotate(0deg)  scale(1,1);      z-index:3; opacity:1 }
    /* o giro */
    94%      { transform:translate(0,      0px)  rotateY(360deg) rotate(0deg)  scale(1,1);      z-index:3; opacity:1 }
    /* assenta */
    100%     { transform:translate(0,      0px)  rotateY(360deg) rotate(0deg)  scale(1,1);      z-index:3; opacity:1 }
  }
  @keyframes timber-pulsar{
    0%,100%{ transform:scale(1);      opacity:.92 }
    50%    { transform:scale(1.075);  opacity:1   }
  }
  @media (prefers-reduced-motion:reduce){
    .timber{animation:none; z-index:3}
  }

  .brand .divider{width:1px; height:38px; background:var(--line)}
  .brand .tag{font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}

  /* menu do topo entre secoes (Ferramentas / Vigencias / futuras) - so
     aparece com mais de uma pagina cadastrada em config.PAGINAS */
  .paginas{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
  .paginas a{
    font-size:12.5px; letter-spacing:.02em; text-decoration:none;
    color:var(--muted); padding:7px 14px; border-radius:999px;
    border:1px solid transparent;
    transition:color .2s, border-color .2s, background .2s;
  }
  .paginas a:hover{color:var(--text)}
  /* 07/10/2026 (Airton): menu todo em MAIUSCULAS, para ler melhor - os itens
     vao ficar menores conforme o menu crescer */
  .paginas a{text-transform:uppercase; letter-spacing:.03em; font-size:12px}
  /* 08/10/2026 (Airton): menu principal + box "MEGA" (embaixo do MS365) e o
     submenu do Mega com a setinha fina de voltar (a mesma das secoes).
     Parado, o MEGA tem a MESMA cara dos outros itens; verde (.ativa) so o que
     foi clicado; laranja (.raiz) e o MEGA quando uma opcao dele esta aberta. */
  .paginas > div{display:flex; flex-wrap:wrap; align-items:center; gap:4px; row-gap:6px}
  .paginas > div[hidden]{display:none}
  .menu-principal{justify-content:flex-start}
  .paginas a.raiz{color:var(--aviso); background:var(--aviso-bg); border-color:rgba(224,169,74,.45)}
  /* 08/10/2026 (Airton, 3a rodada): PARADO = sublinhado verde (o mesmo tom
     do destaque); clicado = destaque cheio (.ativa), sem sublinhado. O box
     MEGA, parado, ganha um quadrado com borda nesse mesmo verde (e um grupo). */
  /* 5a rodada (Airton): parado = SO o quadrado verde (o sublinhado saiu) */
  .paginas a:not(.ativa):not(.raiz):not(.menu-voltar):not(.menu-box){
    border-color:rgba(19,220,210,.6); border-radius:8px;
  }
  .paginas a:not(.ativa):not(.raiz):not(.menu-voltar):not(.menu-box):hover{border-color:var(--turq)}
  .paginas a.menu-box:not(.ativa):not(.raiz){border-color:rgba(19,220,210,.6); border-radius:8px}
  .paginas a.menu-box:not(.ativa):not(.raiz):hover{border-color:var(--turq)}
  .paginas a.menu-voltar{
    display:inline-flex; align-items:center; justify-content:center; width:28px; height:36px;
    padding:0; border:0; border-radius:8px; color:var(--turq); opacity:.7; background:transparent;
  }
  .paginas a.menu-voltar:hover, .paginas a.menu-voltar:focus-visible{opacity:1; background:rgba(19,220,210,.07)}
  .menu-voltar svg{width:14px; height:30px; fill:none; stroke:currentColor; stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round}
  /* 07/10/2026: com MUITOS itens (bracos do Mega), o menu QUEBRA em linhas
     DENTRO do proprio espaco, entre a marca e a conta - a conta continua no
     alto, a direita. O que nao cabe na 1a linha desce para a 2a. */
  @media (min-width:900px){
    header .paginas{flex:1 1 0; min-width:0; justify-content:center; row-gap:4px}
  }
  @media (max-width:420px){ .paginas a{padding:6px 9px; font-size:11.5px} }
  .paginas a.ativa{color:var(--turq); background:rgba(19,220,210,.08); border-color:var(--line)}

  /* menu do usuario — a unica coisa que nao existia na pagina estatica */
  /* links (Admin/Usuarios/Senha/Sair) numa linha, e-mail centralizado logo
     abaixo - pedido do Airton em 22/09/2026, para o bloco ficar alinhado
     com a altura do menu Ferramentas/Vigencias/MS365 */
  .conta{display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12.5px}
  .conta-links{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center}
  .conta .email{color:var(--muted); font-size:12px}
  .conta a{color:var(--turq-dim); text-decoration:none}
  .conta a:hover{color:var(--turq)}
  .env{
    font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--turq); border:1px solid var(--line);
    padding:6px 12px; border-radius:999px; background:rgba(19,220,210,.05);
    white-space:nowrap;
  }

  /* ---------------------------------------------------------------- corpo */
  main{flex:1; display:flex; align-items:center; padding:56px 0}
  main.topo{align-items:flex-start}          /* paginas longas: admin, historico */
  .hero{max-width:760px; width:100%}
  .hero.estreito{max-width:430px; margin:0 auto}

  .kicker{
    display:inline-flex; align-items:center; gap:9px;
    font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--turq-dim);
    margin-bottom:22px;
  }
  h1{
    margin:0 0 42px; font-size:clamp(34px,5.2vw,60px); line-height:1.06;
    font-weight:600; letter-spacing:-.02em;
  }
  h1.medio{font-size:clamp(26px,3.4vw,38px); margin-bottom:12px}
  h1 em{font-style:normal; color:var(--turq)}
  /* "TI-CN" sozinho, centralizado no topo de cada pagina (Ferramentas,
     Vigencias, MS365) - saiu de dentro dos titulos em 22/09/2026, pedido do
     Airton. Centralizado na largura da pagina, nao do bloco do titulo. */
  .marca-pagina{
    margin:34px 0 0; text-align:center; white-space:nowrap;
    font-size:clamp(30px,4.2vw,50px); font-weight:600; line-height:1.05;
    letter-spacing:-.02em; color:var(--text);
  }
  .sub{color:var(--muted); margin:0 0 34px; font-size:15px; line-height:1.6; max-width:60ch}
  /* titulo e subtitulo centralizados, alinhados com a largura do card
     abaixo (usado na tela de login, sem a etiqueta acima) */
  .centro{text-align:center; max-width:none}
  h2.secao{font-size:16px; font-weight:600; margin:38px 0 14px; letter-spacing:-.01em}

  /* --------------------------------------------------------------- avisos */
  .aviso{
    padding:13px 17px; border-radius:10px; margin-bottom:20px; font-size:14px;
    border-left:3px solid; line-height:1.55;
  }
  .aviso.ok{color:var(--ok); background:var(--ok-bg); border-color:var(--ok)}
  .aviso.erro{color:var(--erro); background:var(--erro-bg); border-color:var(--erro)}
  .aviso.alerta{color:var(--aviso); background:var(--aviso-bg); border-color:var(--aviso)}

  /* ----------------------------------------------------------- cartoes */
  /* auto-fill (e nao auto-fit): um cartao sozinho nao estica pela linha toda -
     fica na largura de uma coluna, como o da MS365 (23/09/2026) */
  .cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:16px; max-width:820px}
  .card{
    position:relative; display:block; padding:22px 22px 20px;
    border:1px solid rgba(255,255,255,.07); border-radius:14px;
    background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
    backdrop-filter:blur(4px); text-decoration:none; color:inherit;
    transition:border-color .2s, transform .2s, background .2s;
  }
  .card::after{
    content:""; position:absolute; left:22px; right:22px; top:0; height:1px;
    background:linear-gradient(90deg, transparent, var(--turq-dim), transparent);
    opacity:0; transition:opacity .2s;
  }
  a.card:hover{transform:translateY(-3px); border-color:var(--line);
               background:linear-gradient(180deg, rgba(19,220,210,.07), rgba(255,255,255,.02))}
  a.card:hover::after{opacity:1}
  .card h2{margin:0 0 8px; font-size:16.5px; font-weight:600; letter-spacing:-.01em; padding-right:80px}
  .card p{margin:0 0 16px; font-size:13.5px; line-height:1.6; color:var(--muted)}
  .card .path{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:12px; color:var(--turq-dim)}
  .card.off{opacity:.55}
  .pill{
    position:absolute; top:20px; right:20px;
    font-size:10px; letter-spacing:.1em; text-transform:uppercase;
    padding:4px 9px; border-radius:999px; white-space:nowrap;
  }
  .pill.ativo{color:var(--turq); background:rgba(19,220,210,.11); border:1px solid var(--line)}
  .pill.breve{color:var(--muted); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08)}
  .pill.bloqueado{color:var(--erro); background:var(--erro-bg); border:1px solid rgba(236,123,110,.3)}
  .pill.pendente{color:var(--aviso); background:var(--aviso-bg); border:1px solid rgba(224,169,74,.3)}
  /* conta de emergencia, fora do dominio da empresa - fica marcada para nao
     passar despercebida numa revisao de acessos */
  .pill.externo{color:#C9A6F0; background:rgba(201,166,240,.12); border:1px solid rgba(201,166,240,.28);
                margin-left:6px}

  /* ---------------------------------------- indicador de licencas (MS365) */
  /* usa o mesmo .painel dos formularios - mesmo fundo, borda e desfoque dos
     cartoes, so que sem o comportamento de link */
  .painel-licencas{max-width:420px}
  .sublinha{
    margin:0 0 16px; font-size:13px; font-weight:600; letter-spacing:.03em;
    color:var(--text); text-decoration:underline;
    text-decoration-color:var(--turq-dim); text-underline-offset:5px;
  }
  /* rotulo discreto das colunas da lista */
  .legenda-cabecalho{
    display:flex; justify-content:space-between; margin:0 0 10px;
    font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  }
  .pizza-caixa{display:flex; justify-content:center; margin:26px 0 0}
  /* pizza cheia, fatias coladas no circulo, com uma borda fina da cor do
     fundo entre elas para a fatia pequena nao se perder na grande */
  .pizza{width:230px; height:230px}
  .pizza-fatia{stroke:var(--navy); stroke-width:1.5; stroke-linejoin:round}
  /* cores bem diferentes entre si, todas ja usadas no portal */
  .fatia-cor-1{fill:var(--turq)}
  .fatia-cor-2{fill:var(--aviso)}
  .fatia-cor-3{fill:#C9A6F0}
  .fatia-cor-4{fill:var(--ok)}
  /* gratuitas: tres tons de azul, do claro ao escuro (23/09/2026) */
  .fatia-azul-1{fill:#7FB8FF}
  .fatia-azul-2{fill:#3D86E8}
  .fatia-azul-3{fill:#1F57B0}

  .legenda{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
  .legenda li{font-size:14px}
  .legenda-item{display:flex; align-items:center; gap:10px; width:100%}
  .legenda .ponto{width:10px; height:10px; border-radius:50%; flex:none}
  .ponto-cor-1{background:var(--turq)}
  .ponto-cor-2{background:var(--aviso)}
  .ponto-cor-3{background:#C9A6F0}
  .ponto-cor-4{background:var(--ok)}
  .ponto-azul-1{background:#7FB8FF}
  .ponto-azul-2{background:#3D86E8}
  .ponto-azul-3{background:#1F57B0}
  .legenda .nome{flex:1; color:var(--text)}
  .legenda .valor{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:13px; color:var(--muted)}
  .nota-exemplo{margin:20px 0 0; font-size:11.5px; color:var(--aviso); opacity:.8}
  /* selo de sincronizacao (templates/_sincronizacao.html) - padrao para todo
     cartao que se atualiza sozinho. Reusa o .dot pulsante do rodape. */
  .sinc{display:flex; align-items:center; flex-wrap:wrap; margin:20px 0 0; font-size:11.5px; color:var(--muted)}
  .sinc .dot{margin-right:8px}
  .sinc-fonte{color:var(--text)}
  .sinc-sep{white-space:pre; opacity:.5}
  .sinc.pausada, .sinc.pausada .sinc-fonte{color:var(--aviso)}
  .sinc.pausada .dot{background:var(--aviso); box-shadow:none; animation:none}
  /* tela estreita: duas linhas, sem o "|", segunda linha alinhada ao texto
     (6px do ponto + 8px de margem) e com a primeira letra maiuscula */
  @media (max-width:640px){
    .sinc-sep{display:none}
    .sinc-quando{display:block; flex-basis:100%; padding-left:14px; margin-top:3px}
    .sinc-quando::first-letter{text-transform:uppercase}
  }

  /* ------------------------------------------------------- formularios */
  .painel{
    padding:26px; border-radius:14px;
    border:1px solid rgba(255,255,255,.07);
    background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
    backdrop-filter:blur(4px);
  }
  label{display:block; font-size:12.5px; color:var(--muted); margin:16px 0 6px}
  .painel > form > label:first-child{margin-top:0}
  input[type=text], input[type=email], input[type=password]{
    width:100%; padding:11px 13px; border-radius:9px; font-size:15px;
    background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.12);
    color:var(--text); font-family:inherit;
  }
  input::placeholder{color:#5A7180}
  input:focus-visible, button:focus-visible, a:focus-visible{
    outline:2px solid var(--turq); outline-offset:2px
  }
  .dica{font-size:12px; color:var(--muted); margin-top:7px; line-height:1.5}

  button, .botao{
    font-family:inherit; font-size:14.5px; font-weight:600; cursor:pointer;
    padding:11px 20px; border-radius:9px; border:none;
    background:var(--turq); color:#062126; text-decoration:none; display:inline-block;
  }
  button:hover{filter:brightness(1.08)}
  button.secundario{background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.16)}
  button.perigo{background:transparent; color:var(--erro); border:1px solid rgba(236,123,110,.4)}
  button.mini{font-size:12.5px; padding:6px 12px; font-weight:500}
  .largo{width:100%; margin-top:24px}
  .rodape-form{margin-top:20px; font-size:13px; color:var(--muted); text-align:center}
  .rodape-form a{color:var(--turq-dim)}

  /* ------------------------------------------------------------ tabelas */
  .rolagem{overflow-x:auto; border:1px solid rgba(255,255,255,.08); border-radius:12px;
           background:rgba(0,0,0,.12)}
  table{border-collapse:collapse; width:100%; font-size:13.5px}
  th,td{padding:11px 14px; text-align:left; border-bottom:1px solid rgba(255,255,255,.06); vertical-align:middle}
  th{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
     font-weight:500; background:rgba(0,0,0,.22); white-space:nowrap}
  tr:last-child td{border-bottom:none}
  /* Com quatro acoes, manter tudo em uma linha empurrava a tabela para a
     rolagem horizontal. Deixar quebrar e melhor: o painel e usado de relance,
     e rolar de lado para achar um botao atrapalha mais do que duas linhas. */
  td.acoes{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
  td.acoes form{display:contents}
  .mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:12.5px}

  /* ------------------------------------------------------------- rodape */
  footer{padding:26px 0 34px; border-top:1px solid rgba(255,255,255,.06); margin-top:auto}
  /* Tipografia do rodape — REGISTRADA para reuso. Havia aqui a frase
     "— cada pessoa vê apenas o que lhe foi liberado", removida a pedido do
     Airton. Se voltar a entrar texto complementar, usar exatamente isto:
       texto complementar : font-size 12.5px, color var(--muted)  = #8FA6B8
       trecho em destaque : color var(--text) = #E8F1F5, font-weight 500     */
  .foot{display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
        font-size:12.5px; color:var(--muted)}
  .foot .lock{display:inline-flex; align-items:center; gap:8px}
  .foot .lock b{color:var(--text); font-weight:500}

  /* paginacao numerada no rodape - mesmas paginas do menu do topo, so que
     como numeros (1, 2...) em vez de nome */
  .pager{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; max-width:100%}
  .pager a{
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:50%;
    font-size:12px; font-weight:600; text-decoration:none;
    color:var(--muted); border:1px solid rgba(255,255,255,.10);
    transition:color .2s, border-color .2s, background .2s;
  }
  .pager a:hover{color:var(--text); border-color:var(--line)}
  .pager a.ativo{color:var(--turq); background:rgba(19,220,210,.11); border-color:var(--line)}

  /* mesmo ritmo do pulso do Timber (3.2s ease-in-out), so que mais discreto */
  .dot{
    width:6px; height:6px; border-radius:50%; background:var(--turq);
    box-shadow:0 0 8px var(--turq); flex:none;
    animation:ponto-pulsar 3.2s ease-in-out infinite;
  }
  @keyframes ponto-pulsar{
    0%,100%{ transform:scale(1);    opacity:.75; box-shadow:0 0 6px  var(--turq) }
    50%    { transform:scale(1.28); opacity:1;   box-shadow:0 0 14px var(--turq) }
  }
  @media (prefers-reduced-motion:reduce){
    .dot{animation:none}
  }

  @media (max-width:640px){
    .wrap{padding:0 20px}
    .mascote{height:52vh; opacity:.07}
    main{padding:38px 0}
    .brand .tag{display:none}
    /* uma coluna so, em fila vertical - o grid com auto-fit ja tende a
       isso sozinho (nenhum par de cartoes de 258px cabe lado a lado numa
       tela de celular), mas explicito e mais confiavel que contar com a
       matematica do auto-fit bater certo em toda largura de aparelho */
    .cards{grid-template-columns:1fr}
    /* o menu do topo (Ferramentas / Vigencias) ganha mais respiro para o
       dedo - alvo de toque menor que 44px e o que a maioria erra */
    .paginas a{padding:9px 16px}
  }

/* ---------- painel de administracao ---------- */
  .dupla{display:grid; grid-template-columns:1fr 1fr; gap:16px}
  @media (max-width:640px){.dupla{grid-template-columns:1fr}}
  .marcar{display:flex; align-items:flex-start; gap:9px; margin:9px 0; color:var(--text); font-size:14px}
  .marcar input{margin-top:3px; accent-color:var(--turq); flex:none}
  /* Excluir e visivel, mas com menos peso que as demais: apagado ate o cursor
     passar por cima, quando assume o vermelho de acao destrutiva. */
  button.apagar{
    background:transparent; color:var(--muted);
    border:1px solid rgba(255,255,255,.10);
  }
  button.apagar:hover{
    color:var(--erro); border-color:rgba(236,123,110,.45);
    background:rgba(236,123,110,.08); filter:none;
  }
  .senha-revelada{
    font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
    font-size:22px; letter-spacing:.08em; margin:12px 0; padding:12px 16px;
    border-radius:9px; background:rgba(0,0,0,.35); display:inline-block;
    color:var(--text); user-select:all;
  }

/* ---------- classes que substituiram atributos style= ----------
   Removidos para a CSP poder ser estrita. Enquanto houver style= no HTML, a
   politica precisa de 'unsafe-inline' em style-src, o que enfraquece a
   protecao. */
.pill.linha{position:static}
.sub-nome{color:var(--muted); font-size:12px}
.vazio{color:var(--muted)}
.linha-permissoes > td{background:rgba(0,0,0,.22)}
.espaco-topo{margin-top:12px}
.nota{
  margin:22px 0 0; font-size:13px; color:var(--muted);
  line-height:1.65; max-width:70ch;
}
.nota b{color:var(--text); font-weight:500}
.nota a{color:var(--turq-dim)}

.nota-painel{margin:0 0 18px; color:var(--muted); font-size:14px}
.nota-painel:last-child{margin-bottom:0}

/* ---------- acessos agrupados (23/09/2026) ---------- */
.grupo-acesso{border:0; padding:0; margin:12px 0 4px; min-width:0}
.grupo-acesso legend{padding:0; width:100%}
.grupo-acesso .marcar.grupo{margin:6px 0 2px; font-weight:600}
.grupo-acesso .marcar.item{margin:6px 0 6px 26px}
.lista-acessos{list-style:none; margin:0; padding:0; font-size:13px; line-height:1.5}
.lista-acessos li{white-space:nowrap}

/* ---------- busca de colegas no Microsoft 365 ---------- */
.campo-busca{position:relative}
.sugestoes{
  position:absolute; left:0; right:0; z-index:20; margin:4px 0 0; padding:4px;
  list-style:none; border-radius:9px; max-height:280px; overflow-y:auto;
  background:#0B1E26; border:1px solid var(--line);
  box-shadow:0 12px 28px rgba(0,0,0,.45);
}
.sugestoes li{padding:8px 10px; border-radius:7px; cursor:pointer; line-height:1.35}
.sugestoes li .sug-nome{display:block; color:var(--text); font-size:14px}
.sugestoes li .sug-email{display:block; color:var(--muted); font-size:12px}
.sugestoes li.ativa, .sugestoes li:hover{background:rgba(19,220,210,.10)}
.sugestoes li.ja-tem{cursor:default; opacity:.55}
.sugestoes li.ja-tem:hover{background:transparent}
.sugestoes li .sug-marca{font-size:11px; color:var(--turq-dim)}
.sugestoes li.info{cursor:default; color:var(--muted); font-size:13px}
.sugestoes li.info:hover{background:transparent}

/* ---------- setas laterais de pagina (23/09/2026) ----------
   Marca d'agua, na mesma "profundidade" do mascote grande: quase some,
   acende ao passar o mouse. Na altura do cabecalho, nas margens da tela.
   So aparecem quando sobra margem fora do conteudo (1180px + folga) - em tela
   menor ficariam em cima do logo e do menu, e ali ja ha menu, numeracao e o
   deslizar no celular. */
.seta-pagina{
  position:absolute; z-index:2; top:26px;
  display:none; align-items:center; justify-content:center;
  width:56px; height:72px; border-radius:14px;
  color:var(--turq); opacity:.16; text-decoration:none;
  transition:opacity .2s ease, background-color .2s ease;
}
.seta-pagina.anterior{left:28px}
.seta-pagina.proxima{right:28px}
.seta-pagina svg{width:22px; height:44px; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(19,220,210,.45))}
.seta-pagina:hover, .seta-pagina:focus-visible{opacity:.75; background:rgba(19,220,210,.06)}
@media (min-width:1340px){ .seta-pagina{display:flex} }
@media (prefers-reduced-motion:reduce){ .seta-pagina{transition:none} }

/* ---------- cartao de detalhe ao lado (MS365, 23/09/2026) ----------
   Modelo para os proximos cartoes: resumo a esquerda, detalhe a direita
   (embaixo, em tela estreita). Ver SKILL.md, "Modelo de cartao". */
.hero.larga{max-width:none}
.grade-cartoes{display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start}
.grade-cartoes .painel-licencas{flex:0 1 420px; min-width:0}
.painel-detalhe{flex:1 1 460px; min-width:0}

/* item da lista como botao: sem a cara de botao do resto do portal */
button.legenda-item{
  font:inherit; color:inherit; text-align:left; cursor:pointer;
  background:transparent; border:0; padding:4px 6px; margin:-4px -6px;
  width:calc(100% + 12px); border-radius:7px;
}
button.legenda-item:hover{filter:none; background:rgba(255,255,255,.04)}
button.legenda-item.selecionada{background:rgba(19,220,210,.08)}

.pizza.clicavel .pizza-fatia{cursor:pointer; transition:opacity .15s ease}
.pizza.clicavel .pizza-fatia:hover{filter:brightness(1.12)}
/* sem o retangulo de foco do navegador ao clicar (pedido de 23/09/2026): a
   fatia escolhida ja pulsa. Pelo teclado, o foco aparece como borda da fatia. */
.pizza.clicavel .pizza-fatia:focus{outline:none}
.pizza.clicavel .pizza-fatia:focus-visible{outline:none; stroke:var(--text); stroke-width:2.5}
.pizza.com-selecao .pizza-fatia{opacity:.35}
.pizza.com-selecao .pizza-fatia.selecionada{opacity:1}
.dica-clique{text-align:center}

.detalhe-topo{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.detalhe-titulo{display:flex; align-items:center; gap:10px}
.detalhe-titulo .ponto{width:10px; height:10px; border-radius:50%; flex:none}
button.fechar{
  background:transparent; color:var(--muted); border:1px solid rgba(255,255,255,.12);
  width:30px; height:30px; padding:0; border-radius:8px; font-size:18px; line-height:1;
}
button.fechar:hover{color:var(--text); filter:none}
.detalhe-resumo{display:flex; flex-wrap:wrap; gap:10px 28px; margin:0 0 14px; font-size:13px}
.detalhe-resumo div{min-width:0}
.detalhe-resumo dt{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 3px}
.detalhe-resumo dd{margin:0; color:var(--text)}
.detalhe-estado{margin:6px 0 10px; font-size:13px; color:var(--muted)}
.detalhe-estado.erro{color:var(--aviso)}
.detalhe-estado:empty{display:none}
.detalhe-tabela{max-height:470px; overflow:auto; border-radius:9px; border:1px solid rgba(255,255,255,.06)}
.detalhe-tabela table{font-size:13px}
.detalhe-tabela th{position:sticky; top:0; background:var(--navy); z-index:1}
.detalhe-tabela th, .detalhe-tabela td{padding:9px 10px}
.detalhe-tabela td{white-space:nowrap}
.detalhe-tabela td:first-child{white-space:normal; min-width:130px}
.detalhe-tabela td.email{white-space:normal}
.detalhe-tabela td.data{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:12.5px; color:var(--muted)}

/* Celular (regra de 05/09/2026: no smartphone a leitura muda - blocos
   enfileirados, limpos, letra maior). A tabela de usuarios vira um bloco por
   pessoa: nome em destaque, e-mail embaixo, as duas datas lado a lado com
   rotulo. Sem rolagem interna: a pagina rola inteira, e o deslizar entre
   paginas continua funcionando na borda. */
@media (max-width:640px){
  .grade-cartoes{gap:16px}
  .grade-cartoes .painel-licencas, .painel-detalhe{flex:1 1 100%}
  .painel-detalhe{padding:20px}
  .detalhe-tabela{max-height:none; overflow:visible; border:0}
  .detalhe-tabela thead{display:none}
  .detalhe-tabela table, .detalhe-tabela tbody{display:block}
  .detalhe-tabela tr{
    display:grid; grid-template-columns:1fr 1fr; gap:4px 12px;
    padding:12px 2px; border-bottom:1px solid rgba(255,255,255,.07);
  }
  .detalhe-tabela td{display:block; padding:0; border:0; white-space:normal}
  .detalhe-tabela td:first-child{grid-column:1 / -1; min-width:0; font-size:15px; color:var(--text)}
  .detalhe-tabela td.email{grid-column:1 / -1; color:var(--muted); font-size:13px; overflow-wrap:anywhere}
  .detalhe-tabela td.data{font-size:12.5px; margin-top:4px}
  .detalhe-tabela td.data::before{
    content:attr(data-rotulo); display:block; font-family:inherit;
    font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); opacity:.8;
  }
  .detalhe-resumo{gap:10px 20px}
}

/* ---------- licenca selecionada pulsa (23/09/2026) ----------
   Pedido do Airton: a fatia escolhida e o ponto no titulo do cartao lateral
   pulsam de leve, no mesmo ritmo do selo de sincronizacao do rodape (3,2s).
   O brilho usa a COR DA PROPRIA LICENCA (currentColor), por isso cada classe
   de cor tambem define `color`. */
.ponto-cor-1, .fatia-cor-1{color:var(--turq)}
.ponto-cor-2, .fatia-cor-2{color:var(--aviso)}
.ponto-cor-3, .fatia-cor-3{color:#C9A6F0}
.ponto-cor-4, .fatia-cor-4{color:var(--ok)}
.ponto-azul-1, .fatia-azul-1{color:#7FB8FF}
.ponto-azul-2, .fatia-azul-2{color:#3D86E8}
.ponto-azul-3, .fatia-azul-3{color:#1F57B0}

.detalhe-titulo .ponto{animation:licenca-pulsar 3.2s ease-in-out infinite}
@keyframes licenca-pulsar{
  0%,100%{ transform:scale(1);    opacity:.8; box-shadow:0 0 5px  currentColor }
  50%    { transform:scale(1.28); opacity:1;  box-shadow:0 0 13px currentColor }
}
.pizza.com-selecao .pizza-fatia.selecionada{animation:fatia-pulsar 3.2s ease-in-out infinite}
@keyframes fatia-pulsar{
  0%,100%{ opacity:.85; filter:drop-shadow(0 0 1px currentColor) }
  50%    { opacity:1;   filter:drop-shadow(0 0 8px currentColor) }
}
@media (prefers-reduced-motion:reduce){
  .detalhe-titulo .ponto, .pizza.com-selecao .pizza-fatia.selecionada{animation:none}
}

.detalhe-tabela td.sem-registro{font-family:inherit; font-size:12px; font-style:italic; opacity:.75}
.detalhe-tabela .por-grupo{
  display:block; margin-top:2px; font-family:inherit; font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--turq-dim);
}

/* plano (anual, mensal, gratuita...) embaixo do nome da licenca */
.legenda .nome .plano{display:block; margin-top:2px; font-size:11.5px; color:var(--muted)}
.legenda li + li{margin-top:0}
.detalhe-nota{margin:-4px 0 12px; font-size:12px; color:var(--muted); line-height:1.5}
.detalhe-nota:empty{display:none}

/* nome da pessoa no cartao lateral: link para a ficha no admin center */
.link-usuario{color:var(--text); text-decoration:underline; text-decoration-color:var(--turq-dim);
  text-underline-offset:3px}
.link-usuario:hover{color:var(--turq); text-decoration-color:var(--turq)}

/* titulo do cartao com o total mensal ao lado, no mesmo estilo sublinhado */
.cabecalho-cartao{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:6px 16px; margin:0 0 16px}
.cabecalho-cartao .sublinha{margin:0}
.total-mensal{font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---------- maozinha "toque aqui" na pizza (23/09/2026) ----------
   Uma so, na maior fatia. Repete de leve o gesto de tocar (um toque a cada
   2,8 s - muito abaixo do limite de 3 piscadas por segundo da WCAG) e SOME no
   primeiro toque em qualquer fatia ou licenca (.tocou, via painel.js). Quem
   pediu ao sistema para reduzir movimento ve a maozinha parada. */
.mao-toque{pointer-events:none; transform-box:fill-box; transform-origin:30% 10%;
  animation:mao-tocar 2.8s ease-in-out infinite}
.mao-desenho{fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 1px 1.5px rgba(8,19,32,.85))}
.mao-onda{fill:none; stroke:#fff; stroke-width:1.2; opacity:0;
  transform-box:fill-box; transform-origin:center; animation:mao-onda 2.8s ease-out infinite}
@keyframes mao-tocar{
  0%, 30%, 100%{ transform:translate(0,0) scale(1) }
  45%          { transform:translate(0,-1.6px) scale(1) }
  58%          { transform:translate(0,.6px) scale(.94) }
  70%          { transform:translate(0,0) scale(1) }
}
@keyframes mao-onda{
  0%, 55%{ opacity:0; transform:scale(.4) }
  62%    { opacity:.85; transform:scale(1) }
  100%   { opacity:0; transform:scale(2.6) }
}
.pizza.tocou .mao-toque{display:none}
@media (prefers-reduced-motion:reduce){
  .mao-toque, .mao-onda{animation:none}
}

/* ---------- historico: filtro, exportar, enviar (23/09/2026) ---------- */
select, input[type=date]{
  padding:10px 12px; border-radius:9px; font-size:14.5px; font-family:inherit;
  background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.12); color:var(--text);
  color-scheme:dark;
}
.filtro-historico, .enviar-historico{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 16px; padding:18px 20px; margin:0 0 14px;
}
.filtro-historico .campo, .enviar-historico .campo{display:flex; flex-direction:column; min-width:0}
.filtro-historico label, .enviar-historico label{margin:0 0 6px}
.filtro-historico .campo:first-child{flex:1 1 260px}
.filtro-historico select{width:100%}
.enviar-historico .campo:first-child{flex:1 1 280px}
.enviar-historico .dica{flex-basis:100%; margin:0}
.barra-exportar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px 16px; margin:0 0 14px}
.rotulo-exportar{font-size:13px; color:var(--muted)}
.botoes-exportar{display:flex; flex-wrap:wrap; gap:8px}
a.botao.mini{padding:7px 12px; font-size:12.5px}
.tabela-historico td{font-size:13px}
.tabela-historico td.vazio{text-align:center; color:var(--muted); padding:22px}
@media (max-width:640px){
  .filtro-historico .campo, .enviar-historico .campo{flex:1 1 100%}
  .filtro-historico input[type=date]{width:100%}
  .filtro-historico button, .enviar-historico button{width:100%}
}
a.botao.secundario{background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.16)}
a.botao.secundario:hover{filter:none; border-color:var(--line); color:var(--turq)}
.enviar-historico .campo:first-child{max-width:440px}

/* celular: cada evento vira um bloco (regra do smartphone - sem rolagem lateral) */
@media (max-width:640px){
  .rolagem:has(.tabela-historico){overflow:visible; border:0}
  .tabela-historico thead{display:none}
  .tabela-historico, .tabela-historico tbody{display:block}
  .tabela-historico tr{display:grid; grid-template-columns:1fr auto; gap:4px 10px;
    padding:12px 4px; border-bottom:1px solid rgba(255,255,255,.07)}
  .tabela-historico td{display:block; padding:0; border:0; white-space:normal; min-width:0}
  .tabela-historico td.oque{grid-column:1 / -1; order:-1}
  .tabela-historico td.quem{grid-column:1 / -1; overflow-wrap:anywhere}
  .tabela-historico td.detalhe{grid-column:1 / -1; color:var(--muted); overflow-wrap:anywhere}
  .tabela-historico td.detalhe:empty{display:none}
  .tabela-historico td.quando, .tabela-historico td.ip{font-size:12px; color:var(--muted)}
  .tabela-historico td.vazio{grid-column:1 / -1}
}

/* ---------- MS365 no celular (23/09/2026) ----------
   Recomendacao atual: nao travar o tamanho de letra que a pessoa escolheu no
   aparelho (WCAG: texto ate 200% sem quebrar) - quem se adapta e o layout.
   Por isso so no celular: cartao com menos margem interna, titulo e total lado
   a lado, cabecalho da lista em duas pontas com rotulo curto, numeros sempre
   numa linha. Nada disso vale no computador. */
.rotulo-curto{display:none}
.legenda-cabecalho{gap:12px}
.legenda-cabecalho .cab-numeros{text-align:right; white-space:nowrap}
@media (max-width:640px){
  .grade-cartoes .painel-licencas{padding:18px 16px}
  .cabecalho-cartao{flex-wrap:nowrap; align-items:baseline; gap:10px}
  .cabecalho-cartao .sublinha{font-size:12.5px; min-width:0}
  .cabecalho-cartao .total-mensal{font-size:12.5px; flex:none}
  .rotulo-longo{display:none}
  .rotulo-curto{display:inline}
  .legenda-cabecalho{font-size:10px; letter-spacing:.06em}
  .legenda{gap:10px}
  .legenda li{font-size:13.5px}
  .legenda-item{gap:8px}
  .legenda .nome{min-width:0; overflow-wrap:anywhere}
  .legenda .nome .plano{font-size:11px}
  .legenda .valor{font-size:12px; white-space:nowrap; flex:none}
}
/* tela estreita, ou letra do aparelho grande (Android com fonte aumentada):
   ganha espaco nas laterais e diminui um pouco titulo e total para seguirem
   lado a lado. So se ainda nao couber, o total desce alinhado a direita. */
@media (max-width:380px){
  .wrap{padding:0 12px}
  .grade-cartoes .painel-licencas{padding:16px 13px}
  .cabecalho-cartao{flex-wrap:wrap; gap:4px 8px}
  .cabecalho-cartao .sublinha, .cabecalho-cartao .total-mensal{font-size:11.5px; letter-spacing:.01em}
  .cabecalho-cartao .total-mensal{margin-left:auto}
}

/* iPhone (23/09/2026): o Safari aumenta sozinho a letra quando o aparelho vira
   de lado, e o layout pensado para retrato estoura. Isto desliga SO esse
   aumento automatico - o zoom da pessoa (pinca e o "aA" do Safari) continua. */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}

/* ---------- cartao "Em breve": selo neon pulsando (23/09/2026) ----------
   Pedido do Airton: todo cartao "Em breve" pulsa de leve e o selo ganha um
   neon de outra cor. Violeta: combina com o turquesa e o azul do portal e nao
   se confunde com o ambar (pendente) nem o vermelho (bloqueado). Mesmo ritmo
   de 3,2 s dos outros pulsos do portal; para com "reduzir movimento".
   O cartao apagado (.off) agora apaga SO o conteudo - opacidade no cartao
   inteiro apagaria o neon junto. */
.card.off{opacity:1; border-color:rgba(177,140,255,.14); animation:breve-cartao 3.2s ease-in-out infinite}
.card.off > :not(.pill){opacity:.55}
.pill.breve{
  color:#D9C8FF; background:rgba(177,140,255,.10); border:1px solid rgba(177,140,255,.55);
  text-shadow:0 0 6px rgba(177,140,255,.6);
  animation:breve-neon 3.2s ease-in-out infinite;
}
@keyframes breve-neon{
  0%,100%{ box-shadow:0 0 4px rgba(177,140,255,.35), 0 0 0 rgba(177,140,255,0);   border-color:rgba(177,140,255,.45) }
  50%    { box-shadow:0 0 10px rgba(177,140,255,.75), 0 0 22px rgba(177,140,255,.35); border-color:rgba(200,175,255,.95) }
}
@keyframes breve-cartao{
  0%,100%{ border-color:rgba(177,140,255,.10) }
  50%    { border-color:rgba(177,140,255,.30) }
}
@media (prefers-reduced-motion:reduce){
  .card.off, .pill.breve{animation:none}
}

/* ---------- Cadastro de MAC no portal (23/09/2026) ---------- */
.grade-mac{display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:20px; align-items:start}
.painel-mac .opcional{color:var(--muted); font-weight:400}
input[type=search]{
  width:100%; padding:11px 13px; border-radius:9px; font-size:15px; font-family:inherit;
  background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.12); color:var(--text); margin:0 0 10px;
}
.mac-aviso{margin:12px 0 0; font-size:13px; color:var(--muted); min-height:1em}
.mac-aviso.ok{color:var(--ok)}
.mac-aviso.erro, .mac-estado.erro{color:var(--aviso)}
.mac-total{font-size:12.5px; color:var(--turq); white-space:nowrap}
.mac-estado{margin:4px 0 8px; font-size:13px; color:var(--muted)}
.mac-estado:empty{display:none}
.lista-mac{list-style:none; margin:0; padding:0; max-height:560px; overflow:auto;
  display:flex; flex-direction:column; gap:6px}
.lista-mac li{display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:9px;
  border:1px solid rgba(255,255,255,.06); background:rgba(0,0,0,.18)}
.lista-mac .mac-num{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:11px; color:var(--muted); min-width:26px}
.lista-mac .mac-endereco{flex:1; font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:14px; letter-spacing:.03em}
@media (max-width:760px){
  .grade-mac{grid-template-columns:1fr}
  /* celular: a pagina rola inteira, sem rolagem dentro da lista */
  .lista-mac{max-height:none; overflow:visible}
  .lista-mac .mac-endereco{font-size:13.5px; overflow-wrap:anywhere}
}

/* cabecalho da lista de MACs: titulo | botao de backup | total */
.cabecalho-mac{flex-wrap:wrap; align-items:center}
.cabecalho-mac .sublinha{margin-right:auto}
.cabecalho-mac [data-mac-backup]{order:0}
.cabecalho-mac .mac-total{order:1}
@media (max-width:640px){
  .cabecalho-mac [data-mac-backup]{order:2; width:100%}
}

/* secao "Registros" de todo cartao (politica de 23/09/2026) */
.painel-registros{margin-top:20px}
.painel-registros .dica{margin:0 0 10px}
.tabela-registros td{font-size:12.5px}

/* link "Baixar planilha completa" ao lado do nome da licenca (23/09/2026):
   mesmo sublinhado do titulo, em turquesa para parecer clicavel */
.detalhe-cabeca{display:flex; flex-wrap:wrap; align-items:center; gap:6px 22px; min-width:0}
.detalhe-cabeca .sublinha{margin:0}
a.link-planilha{display:inline-flex; align-items:center; gap:6px; color:var(--turq);
  text-decoration-color:var(--turq-dim); font-weight:500; white-space:nowrap}
a.link-planilha[hidden]{display:none}
a.link-planilha svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; flex:none}
a.link-planilha:hover, a.link-planilha:focus-visible{text-decoration-color:var(--turq)}
@media (max-width:380px){ a.link-planilha{font-size:11.5px; white-space:normal} }

/* secao "Registros" recolhida (23/09/2026): so titulo, "Ver histórico" e a
   seta - a mesma das laterais do cabecalho, deitada; vira para cima aberta */
.cabecalho-registros{align-items:center; margin:0}
.painel-registros.aberta .cabecalho-registros{margin:0 0 14px}
.acoes-registros{display:flex; align-items:center; gap:8px; flex:none}
button.seta-registros{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:34px; padding:0; border:0; border-radius:10px; cursor:pointer;
  background:transparent; color:var(--turq); opacity:.55;
  transition:opacity .2s ease, background-color .2s ease;
}
button.seta-registros svg{width:26px; height:13px; fill:none; stroke:currentColor;
  stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(19,220,210,.45)); transition:transform .25s ease}
.painel-registros.aberta button.seta-registros svg{transform:rotate(180deg)}
button.seta-registros:hover, button.seta-registros:focus-visible{opacity:1; background:rgba(19,220,210,.06)}
.corpo-registros[hidden]{display:none}
@media (prefers-reduced-motion:reduce){ button.seta-registros, button.seta-registros svg{transition:none} }
@media (max-width:380px){ .cabecalho-registros{flex-wrap:wrap} .acoes-registros{margin-left:auto} }

/* ---------- conferencia mensal do RH (24/09/2026) ----------
   Segundo cartao da pagina MS365. So um detalhe aberto por vez: o painel.js
   esconde (hidden) o resumo do outro cartao enquanto um detalhe esta aberto. */
.grade-cartoes > [hidden]{display:none !important}
.rotulo-cartao{margin:0 0 10px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--turq)}
.painel-rh .rotulo-cartao{text-align:center}
.cabecalho-cartao.cabecalho-centro{justify-content:center; text-align:center}
.detalhe-titulo a.link-planilha-titulo{font-size:inherit; font-weight:600}
.rh-barra{display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin:14px 0 4px}
.rh-barra input[type=search]{flex:1 1 260px; margin:0}
.rh-contagem{font-size:12.5px; color:var(--muted)}
.tabela-rh th.col-desligado, .tabela-rh td.col-desligado{text-align:center}
.tabela-rh input[type=date]{padding:4px 6px; font-size:12px; border-radius:7px; width:122px}
/* cinco colunas sem rolagem lateral no computador: nome e e-mail quebram linha */
.tabela-rh table{width:100%}
.tabela-rh th, .tabela-rh td{padding:9px 7px}
.tabela-rh td:first-child{min-width:0; white-space:normal}
.tabela-rh th.col-desligado, .tabela-rh td.col-desligado{width:74px}
/* precisa de ~620px para as cinco colunas: sem espaco ao lado do resumo, desce
   para baixo dele e usa a largura toda (telas de 700 a 1150px) */
.grade-cartoes .painel-detalhe-rh{flex:1 1 620px}
.rh-marca{display:inline-flex; align-items:center; justify-content:center; min-width:34px; min-height:30px; cursor:pointer}
.rh-marca input{width:18px; height:18px; margin:0; accent-color:var(--erro); cursor:pointer}
.tabela-rh tr.desligado td{background:rgba(236,123,110,.08)}
.tabela-rh tr.desligado td:first-child{text-decoration:line-through; text-decoration-color:rgba(236,123,110,.7)}
.tabela-rh tr[hidden]{display:none}
.rh-acoes{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:16px 0 4px}
.rh-acoes .botao{display:inline-flex; align-items:center; gap:8px}
.rh-acoes .botao svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round}
.rh-acoes .botao:disabled{opacity:.45; cursor:not-allowed; filter:none}
.rh-aviso{font-size:13px; color:var(--muted)}
.rh-aviso.erro{color:var(--aviso)}
.rh-aviso.ok{color:var(--ok)}
@media (max-width:640px){
  /* no celular cada colaborador vira um bloco: nome, e-mail, conta criada e,
     embaixo, "Desligado" e "Data" lado a lado, com rotulo */
  .tabela-rh td.data{grid-column:1 / -1}
  .tabela-rh td.col-desligado, .tabela-rh td.col-data{margin-top:6px; text-align:left}
  .tabela-rh .rh-marca{justify-content:flex-start; min-height:34px}
  .tabela-rh td.col-desligado::before, .tabela-rh td.col-data::before{
    content:attr(data-rotulo); display:block; font-size:10px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--muted); opacity:.8; margin:0 0 2px;
  }
  .tabela-rh td.col-data input[type=date]{width:100%; max-width:180px}
  .rh-acoes .botao{width:100%; justify-content:center}
}

/* ---------- Checklist RH aberto no computador (24/09/2026) ----------
   Pedido do Airton: nome e e-mail por extenso, numa linha so, e titulos das
   colunas centralizados. A area dos cartoes se estende para os DOIS lados
   ate 1320px (sem avancar demais sobre o mascote) e o resumo fica mais estreito.
   Nada disso vale no celular (max-width:640px continua como estava). */
@media (min-width:1200px){
  .grade-cartoes[data-aberto="rh"]{
    width:min(1320px, calc(100vw - 112px));
    margin-left:calc(50% - min(660px, 50vw - 56px));
    flex-wrap:nowrap;
  }
  .grade-cartoes[data-aberto="rh"] .painel-rh{flex:0 0 310px}
  .grade-cartoes[data-aberto="rh"] .painel-rh .pizza{width:180px; height:180px}
  .grade-cartoes[data-aberto="rh"] .painel-detalhe-rh{flex:1 1 0; min-width:0}
}
@media (min-width:641px){
  .painel-detalhe-rh{container-type:inline-size}
  .tabela-rh th{text-align:center}
  .tabela-rh th:first-child{text-align:left}
  .tabela-rh td.data, .tabela-rh td.col-data{text-align:center}
}
/* com espaco (detalhe largo), nome e e-mail ficam inteiros; sem espaco, quebram
   de linha como antes - nunca rolagem lateral */
@container (min-width:800px){
  .tabela-rh td.email{white-space:nowrap}
  .tabela-rh td:first-child{white-space:nowrap}
}
@container (min-width:700px) and (max-width:799.98px){
  .tabela-rh td.email{white-space:nowrap}
}

/* ---------- tela Usuarios na largura toda (24/09/2026) ---------- */
.painel-form{max-width:760px}
td.acoes{min-width:210px}
td.acoes button{white-space:nowrap}
/* telas medias: o nome comprido de um acesso quebra linha em vez de empurrar
   a coluna de acoes para a rolagem lateral */
@media (max-width:1180px){
  .lista-acessos li{white-space:normal; min-width:180px}
  .rolagem > table th, .rolagem > table td{padding:11px 10px}
}

.link-sharepoint{margin-top:4px}
.link-sharepoint a{color:var(--turq); text-decoration:underline; text-decoration-color:var(--turq-dim);
  text-underline-offset:3px; overflow-wrap:anywhere}

/* ---------- novas secoes da pagina MS365 (28/09/2026) ----------
   Mesmo titulo grande de "Gestao de Licencas" (h1), mas como h2: a pagina
   continua com um h1 so. */
.secao-ms365{margin-top:64px}
h2.titulo-pagina{
  margin:0 0 42px; font-size:clamp(34px,5.2vw,60px); line-height:1.06;
  font-weight:600; letter-spacing:-.02em;
}
h2.titulo-pagina em{font-style:normal; color:var(--turq)}

/* ---------- Acessos a Bibliotecas SharePoint (28/09/2026) ----------
   Copia do cartao de licencas: cada biblioteca com sua cor (fatia, ponto e o
   pulsar usam currentColor), maozinha, detalhe ao lado, um aberto por vez. */
.fatia-bib-1, .ponto-bib-1{color:#13DCD2} .fatia-bib-1{fill:#13DCD2} .ponto-bib-1{background:#13DCD2}
.fatia-bib-2, .ponto-bib-2{color:#8F87E8} .fatia-bib-2{fill:#8F87E8} .ponto-bib-2{background:#8F87E8}
.fatia-bib-3, .ponto-bib-3{color:#E0A94A} .fatia-bib-3{fill:#E0A94A} .ponto-bib-3{background:#E0A94A}
.fatia-bib-4, .ponto-bib-4{color:#E0714A} .fatia-bib-4{fill:#E0714A} .ponto-bib-4{background:#E0714A}
.fatia-bib-5, .ponto-bib-5{color:#E0689A} .fatia-bib-5{fill:#E0689A} .ponto-bib-5{background:#E0689A}
.fatia-bib-6, .ponto-bib-6{color:#5DCAA5} .fatia-bib-6{fill:#5DCAA5} .ponto-bib-6{background:#5DCAA5}
.fatia-bib-7, .ponto-bib-7{color:#85B7EB} .fatia-bib-7{fill:#85B7EB} .ponto-bib-7{background:#85B7EB}
.fatia-bib-8, .ponto-bib-8{color:#A7D26A} .fatia-bib-8{fill:#A7D26A} .ponto-bib-8{background:#A7D26A}
.fatia-bib-9, .ponto-bib-9{color:#C9A6F0} .fatia-bib-9{fill:#C9A6F0} .ponto-bib-9{background:#C9A6F0}
.ponto-entra{background:transparent; border:1.5px solid var(--muted)}
button.legenda-entra{opacity:.6; cursor:pointer}
button.legenda-entra:hover, button.legenda-entra.selecionada{opacity:1}
.bib-entra{margin:14px 0 0; padding:12px 14px; border-radius:10px; border:1px dashed rgba(255,255,255,.18)}
.bib-entra[hidden], [data-bib-dar][hidden]{display:none}
.bib-grupos-entra{list-style:none; margin:6px 0 0; padding:0; font-size:13px; line-height:1.8}
.bib-grupos-entra li::before{content:"◌"; color:var(--muted); margin-right:8px}
/* 5 colunas sem rolagem lateral: o caminho do acesso e o e-mail quebram linha */
.tabela-bib td{white-space:normal}
.tabela-bib td.via .pill{white-space:normal; line-height:1.35; display:inline-block; max-width:190px}
.tabela-bib td.conta .pill{white-space:nowrap}
.tabela-bib td.email{min-width:0; overflow-wrap:anywhere}
.tabela-bib td.nivel{font-size:12.5px; color:var(--muted)}
.aviso-bib{color:var(--aviso)}
.titulo-dar-acesso{margin:22px 0 10px; font-size:13px}
.form-bib{display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.form-bib .bib-email{width:100%; max-width:460px; padding:10px 12px; border-radius:9px; font-size:14px;
  font-family:inherit; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.12); color:var(--text)}
.bib-niveis{display:flex; flex-wrap:wrap; gap:8px 22px; font-size:13.5px}
.bib-niveis label, .bib-enviar{display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-size:13.5px}
.bib-niveis input, .bib-enviar input{accent-color:var(--turq)}
.nota-nivel{color:var(--muted); font-size:12px}
.bib-niveis [hidden]{display:none}
.bib-resultado{margin-top:14px; padding:12px 14px; border-radius:10px; background:rgba(19,220,210,.06);
  border:1px solid rgba(19,220,210,.18)}
.bib-resultado[hidden]{display:none}
.bib-passos{list-style:none; margin:0 0 10px; padding:0; font-size:13.5px; line-height:1.8}
.bib-passos li::before{content:"✓"; color:var(--ok); font-weight:700; margin-right:8px}
.bib-passos li.neutro::before{content:"–"; color:var(--muted)}
.bib-link{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px}
.bib-link-texto{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:12.5px;
  color:var(--turq); overflow-wrap:anywhere; min-width:0}
.tabela-bib td.email{white-space:normal; overflow-wrap:anywhere}
@media (max-width:640px){
  .form-bib .bib-email{max-width:none}
  .form-bib .botao{width:100%; text-align:center}
  .tabela-bib td:last-child{margin-top:4px}
}

/* 5 colunas precisam de ~600px: sem espaco ao lado do resumo, o detalhe desce e usa a largura toda */
.grade-cartoes .painel-detalhe-bib{flex:1 1 600px}

/* ---------- Bibliotecas aberto no computador (29/09/2026) ----------
   Mesmo alargamento do Checklist RH: a area se estende para os dois lados ate
   1320px. O fundo do cartao e quase transparente, entao o Timber continua
   aparecendo por tras. Celular nao muda. */
@media (min-width:1200px){
  .grade-cartoes[data-aberto="bib"]{
    width:min(1320px, calc(100vw - 112px));
    margin-left:calc(50% - min(660px, 50vw - 56px));
    flex-wrap:nowrap;
  }
  .grade-cartoes[data-aberto="bib"] .painel-bib{flex:0 0 310px}
  .grade-cartoes[data-aberto="bib"] .painel-bib .pizza{width:180px; height:180px}
  .grade-cartoes[data-aberto="bib"] .painel-detalhe-bib{flex:1 1 0; min-width:0}
}
@media (min-width:641px){
  .painel-detalhe-bib{container-type:inline-size}
  .tabela-bib th{text-align:left}
}
@container (min-width:860px){
  .tabela-bib td.email{white-space:nowrap}
  .tabela-bib td:first-child{white-space:nowrap}
  .tabela-bib td.via .pill{max-width:none; white-space:nowrap}
}
.bib-grupos-entra li{margin:2px 0}
.bib-grupos-entra li::before{content:none}
button.bib-grupo-botao{background:transparent; border:0; padding:4px 0; color:var(--text); font-size:13.5px;
  font-weight:500; cursor:pointer; text-align:left; text-decoration:underline; text-decoration-color:var(--turq-dim);
  text-underline-offset:3px}
button.bib-grupo-botao::before{content:"▸"; color:var(--turq); margin-right:8px; display:inline-block; transition:transform .2s ease}
button.bib-grupo-botao[aria-expanded="true"]::before{transform:rotate(90deg)}
button.bib-grupo-botao:disabled{cursor:default; text-decoration:none; opacity:.6}
.bib-membros{margin:6px 0 10px 18px; padding:8px 12px; border-left:2px solid rgba(19,220,210,.3); font-size:13px;
  color:var(--muted)}
.bib-membros.erro{color:var(--aviso)}
.bib-membros-total{margin:0 0 6px; font-size:12px}
.bib-membros ul{list-style:none; margin:0; padding:0}
.bib-membros li{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:5px 0;
  border-bottom:1px solid rgba(255,255,255,.05)}
.bib-membros li .nome{color:var(--text); min-width:180px}
.bib-membros li .mail{overflow-wrap:anywhere; flex:1 1 200px}
@media (prefers-reduced-motion:reduce){ button.bib-grupo-botao::before{transition:none} }

/* ---------- atalhos do admin para o SharePoint + guia dos acessos (29/09/2026) */
.bib-atalhos{list-style:none; margin:4px 0 12px; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px}
.bib-atalhos[hidden]{display:none}
.bib-atalhos a, .guia-links a{color:var(--turq); text-decoration:underline; text-decoration-color:var(--turq-dim);
  text-underline-offset:3px}
.bib-atalhos a::after, .guia-links a::after{content:" ↗"; font-size:11px}
.bib-niveis [hidden]{display:none}
details.guia-acessos{margin-top:20px}
details.guia-acessos > summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px}
details.guia-acessos > summary::-webkit-details-marker{display:none}
details.guia-acessos > summary::before{content:"▸"; color:var(--turq); transition:transform .2s ease}
details.guia-acessos[open] > summary::before{transform:rotate(90deg)}
details.guia-acessos > summary .sublinha{margin:0}
.guia-grade{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin:14px 0 6px}
.guia-item{padding:14px 16px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.12)}
.guia-item h3{margin:0 0 8px; font-size:14px}
.guia-item p{margin:0 0 10px; font-size:13px; line-height:1.55; color:var(--muted)}
.guia-item p b{color:var(--text)}
.guia-links{list-style:none; margin:0; padding:0; font-size:13px; line-height:1.9}
@media (prefers-reduced-motion:reduce){ details.guia-acessos > summary::before{transition:none} }

/* ---------- Bibliotecas: cartao FECHADO mais largo, 3 colunas alinhadas (29/09/2026)
   "total / sem excluir / leitura" viram colunas, cada numero embaixo do seu
   titulo. Aberto (data-aberto="bib"), fica como antes: texto corrido, 310px. */
.cab-bib .sep, .valor-bib .sep{margin:0 .35em; opacity:.6}
@media (min-width:641px){
  /* max-width: o .painel-licencas geral para em 420px */
  .grade-bib:not([data-aberto]) .painel-bib{flex:0 1 490px; max-width:490px}
  /* nome comprido (ADMINISTRACAO E GESTAO) quebra linha em vez de empurrar os numeros */
  .grade-bib:not([data-aberto]) .legenda .nome{min-width:0}
  .grade-bib:not([data-aberto]) .valor-bib{flex:none}
  .grade-bib:not([data-aberto]) .cab-bib,
  .grade-bib:not([data-aberto]) .valor-bib{
    display:inline-grid; grid-template-columns:52px 16px 96px 16px 64px; text-align:center; align-items:baseline;
  }
  .grade-bib:not([data-aberto]) .cab-bib .sep,
  .grade-bib:not([data-aberto]) .valor-bib .sep{margin:0}
  .grade-bib:not([data-aberto]) .legenda-entra .valor{min-width:244px; text-align:center}
}
.nota-repetida{display:block; margin-top:4px; font-size:11.5px; color:var(--aviso)}

/* ---------- Bibliotecas: varredura das permissoes individuais repetidas (29/09/2026)
   Fica no cartao fechado, abaixo da pizza. Cada item abre a biblioteca. */
.bib-repetidas{margin:18px 0 0; padding-top:14px; border-top:1px solid rgba(255,255,255,.08)}
.bib-repetidas-estado{margin:0; font-size:12.5px; color:var(--muted)}
.bib-repetidas-estado.ok{color:var(--ok)}
.bib-repetidas-estado.erro{color:var(--aviso)}
.bib-repetidas-estado[hidden], .bib-repetidas-caixa[hidden]{display:none}
.bib-repetidas-caixa > summary{cursor:pointer; list-style:none; display:flex; align-items:flex-start; gap:8px;
  font-size:13px; font-weight:600; color:var(--aviso)}
.bib-repetidas-caixa > summary::-webkit-details-marker{display:none}
.bib-repetidas-caixa > summary::before{content:"▸"; transition:transform .2s ease}
.bib-repetidas-caixa[open] > summary::before{transform:rotate(90deg)}
.bib-repetidas-ajuda{margin:8px 0 10px; font-size:12px; color:var(--muted); line-height:1.5}
.bib-repetidas-lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px}
.bib-repetida-item{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; width:100%; text-align:left;
  padding:7px 9px; border-radius:8px; border:1px solid rgba(224,169,74,.22); background:var(--aviso-bg);
  color:var(--text); font:inherit; font-size:12.5px; cursor:pointer}
.bib-repetida-item:hover, .bib-repetida-item.selecionada{border-color:var(--aviso)}
.bib-rep-bib{font-weight:600; letter-spacing:.02em}
.bib-rep-nome{color:var(--text)}
.bib-rep-nota{flex-basis:100%; color:var(--muted); font-size:11.5px; overflow-wrap:anywhere}
/* dentro da tabela: nota como link (admin) e o botao de remover */
a.nota-repetida{text-decoration:underline; text-decoration-color:rgba(224,169,74,.5); text-underline-offset:3px}
a.nota-repetida::after{content:" ↗"; font-size:10.5px}
.bib-remover{display:inline-block; margin-top:6px; padding:3px 9px; font:inherit; font-size:11.5px; border-radius:6px;
  background:transparent; color:var(--erro); border:1px solid rgba(236,123,110,.45); cursor:pointer}
.bib-remover:hover{background:var(--erro-bg)}
.bib-remover:disabled{opacity:.5; cursor:wait}
.bib-remocao{margin:0 0 10px}
.bib-remocao[hidden]{display:none}
.bib-remocao.ok{color:var(--ok)}
@media (prefers-reduced-motion:reduce){ .bib-repetidas-caixa > summary::before{transition:none} }

/* individual que nenhum grupo cobre (29/09/2026): o caminho ate poder remover */
.bib-individuais-caixa{margin-top:10px}
.bib-individuais-caixa > summary{color:var(--muted)}
.bib-individuais-caixa .bib-repetida-item{border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.03)}
.bib-individuais-caixa .bib-repetida-item:hover,
.bib-individuais-caixa .bib-repetida-item.selecionada{border-color:var(--turq-dim)}
.nota-individual{display:block; margin-top:4px; font-size:11.5px; color:var(--muted)}
a.nota-individual.link{color:var(--turq); text-decoration:underline; text-decoration-color:var(--turq-dim); text-underline-offset:3px}
a.nota-individual.link::after{content:" ↗"; font-size:10.5px}
.bib-colocar{display:inline-block; margin-top:6px; padding:3px 9px; font:inherit; font-size:11.5px; border-radius:6px;
  background:transparent; color:var(--turq); border:1px solid var(--turq-dim); cursor:pointer}
.bib-colocar:hover{background:rgba(19,220,210,.08)}

/* acesso granular clicavel (29/09/2026): a MESMA pilula roxa, agora botao */
button.pill-botao{font-family:inherit; font-weight:inherit; cursor:pointer; filter:none; box-shadow:none; margin:0}
button.pill-botao:hover, button.pill-botao[aria-expanded="true"]{border-color:#C9A6F0}
button.pill-botao::after{content:" ▸"; font-size:.9em}
button.pill-botao[aria-expanded="true"]::after{content:" ▾"}
.bib-granular-linha > td{padding-top:0}
.bib-granular-lista{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:6px}
.bib-granular-lista li{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.05)}
.bib-granular-lista .caminho{color:var(--text); overflow-wrap:anywhere}
.bib-granular-lista .detalhe{color:var(--muted); font-size:12px}
.bib-granular-lista .acoes{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px}
.bib-granular-lista .acoes a{color:var(--turq); text-decoration:underline; text-decoration-color:var(--turq-dim)}
.bib-granular-lista .acoes a::after{content:" ↗"; font-size:10.5px}
.bib-granular-nota{margin:8px 0 0; font-size:11.5px; color:var(--muted)}

/* contas sem e-mail: explicacao so para admin (29/09/2026) */
.bib-contas{margin-top:12px}
.bib-contas[hidden], .bib-conta-tipo[hidden]{display:none}
.bib-conta-tipo{padding:10px 0 4px; border-top:1px solid rgba(255,255,255,.06)}
.bib-conta-tipo h3{margin:0 0 6px; font-size:13.5px; color:var(--text)}
.bib-conta-tipo p{margin:0 0 6px; font-size:12.5px; line-height:1.55; color:var(--muted)}
.bib-conta-tipo p b{color:var(--text); font-weight:600}

/* nivel que vale (29/09/2026): aviso de acesso maior por outro caminho */
.bib-acima{margin:12px 0 0; padding:10px 12px; border-radius:8px; border:1px solid rgba(224,169,74,.35);
  background:var(--aviso-bg); font-size:12.5px; color:var(--text)}
.bib-acima.ok{border-color:rgba(73,200,143,.35); background:var(--ok-bg); color:var(--ok)}
.bib-acima-titulo{margin:0 0 6px; color:var(--aviso); font-weight:600; line-height:1.45}
.bib-acima ul{margin:0 0 4px; padding-left:18px; line-height:1.6; overflow-wrap:anywhere}
.bib-acima a{color:var(--turq); text-decoration:underline}
.bib-acima a::after{content:" ↗"; font-size:10.5px}
.bib-trocar{margin-top:8px}
.bib-nota-admin{display:block; margin:10px 0 0; font-size:12px; line-height:1.5; color:var(--muted)}
.bib-nota-admin b{color:var(--text)}

/* Intelbras (30/09/2026): esqueleto do card - pizza vazia e itens desligados */
.pizza-vazia{fill:rgba(255,255,255,.04); stroke:rgba(255,255,255,.14); stroke-width:1.5; stroke-dasharray:6 6}
.grade-intelbras .legenda-item[disabled]{cursor:default; opacity:.7}

/* ---------- Intelbras: controle de acesso (30/09/2026) ---------- */
.fatia-alarme{fill:var(--erro)}
.ponto-alarme{background:var(--erro)}
.intel-hoje{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px 16px; font-size:12.5px; color:var(--muted)}
.intel-hoje li{display:flex; align-items:center; gap:6px}
.intel-hoje .ponto{width:9px; height:9px; border-radius:50%; flex:none}
.intel-hoje b{color:var(--text); font-weight:600}
.intel-filtro{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 14px; margin:0 0 14px}
.intel-filtro[hidden], .intel-pessoas[hidden], .intel-imagem[hidden], .intel-mais[hidden]{display:none}
.intel-campo{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); min-width:0}
.intel-campo[hidden]{display:none}
.intel-campo input{min-width:0}
.intel-campo input[type="search"]{width:min(260px, 100%)}
.intel-acoes{display:flex; flex-wrap:wrap; gap:8px}
.tabela-intel tr.intel-negado td{color:var(--aviso)}
.intel-mais{margin-top:10px}
.intel-numeros{display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:6px 16px; margin:0 0 14px; font-size:13px}
.intel-numeros dt{color:var(--muted); overflow-wrap:anywhere}
.intel-numeros dd{margin:0; color:var(--text); font-weight:600; text-align:right}
.intel-sub{margin:6px 0 8px; font-size:13px; color:var(--text)}
.intel-alertas{margin:0; padding-left:18px; font-size:12.5px; line-height:1.6; color:var(--muted)}
.intel-alerta-nome{color:var(--aviso); font-weight:600}
.intel-imagem{margin-top:14px}
.intel-imagem img{display:block; max-width:min(360px, 100%); height:auto; border-radius:10px; margin:8px 0}
@media (min-width:1200px){
  .grade-cartoes[data-aberto="intel"]{
    width:min(1320px, calc(100vw - 112px));
    margin-left:calc(50% - min(660px, 50vw - 56px));
    flex-wrap:nowrap;
  }
  .grade-cartoes[data-aberto="intel"] .painel-intel{flex:0 0 310px}
  .grade-cartoes[data-aberto="intel"] .painel-intel .pizza{width:180px; height:180px}
  .grade-cartoes[data-aberto="intel"] .painel-detalhe-intel{flex:1 1 0; min-width:0}
}
@media (min-width:641px){
  .painel-detalhe-intel{container-type:inline-size}
  .tabela-intel th{text-align:left}
}

/* ---------- Secoes recolhiveis (30/09/2026) ----------
   A seta e a mesma das laterais da pagina (fina, SVG): fechada aponta para a
   direita; aberta gira para baixo. Recolhida, so ficam o kicker e o titulo. */
.hero > section.secao-ms365:first-of-type{margin-top:0}
.secao-ms365[data-recolhida] > :not(.kicker):not(h1):not(.titulo-pagina):not(.selo-desenvolvimento):not(.selos-estado){display:none !important}
.secao-ms365[data-recolhida] > h1, .secao-ms365[data-recolhida] > .titulo-pagina{margin-bottom:0}
.secao-ms365[data-recolhida] + .secao-ms365{margin-top:40px}
.seta-secao{
  display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
  width:34px; height:48px; margin:0 12px 0 -8px; padding:0; border:0; border-radius:8px;
  background:transparent; box-shadow:none; filter:none; color:var(--turq); opacity:.6; cursor:pointer;
  transition:opacity .2s ease, background .2s ease;
}
.seta-secao svg{width:16px; height:34px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease}
.seta-secao[aria-expanded="true"] svg{transform:rotate(90deg)}
.seta-secao:hover, .seta-secao:focus-visible{opacity:1; background:rgba(19,220,210,.07); filter:none}
h2.titulo-pagina .seta-secao{width:30px; height:40px; margin-right:10px}
h2.titulo-pagina .seta-secao svg{height:28px}
@media (max-width:640px){
  .seta-secao{width:30px; height:40px; margin:0 8px 0 -6px}
  .seta-secao svg{width:14px; height:28px}
}
@media (prefers-reduced-motion:reduce){ .seta-secao svg{transition:none} }

/* ---------- cartao "Em desenvolvimento": neon LARANJA pulsante (30/09/2026) ----------
   Padrao de estado do portal (Airton): "Em breve" = violeta (acima);
   "Em desenvolvimento" = ja funciona mas nao esta 100% - o cartao pulsa em
   laranja e o titulo ganha o selo. Mesmo efeito do card da ENGENHARIA no
   dashboard da migracao do SharePoint (pulse-amber, 3 s). */
.em-desenvolvimento{border-color:rgba(245,158,11,.5) !important; animation:dev-neon 3s ease-in-out infinite}
@keyframes dev-neon{
  0%,100%{ box-shadow:0 0 0 0 rgba(245,158,11,.5), 0 0 0 0 rgba(245,158,11,.2) }
  50%    { box-shadow:0 0 0 5px rgba(245,158,11,.55), 0 0 0 14px rgba(245,158,11,.18) }
}
.selo-desenvolvimento{
  display:inline-flex; align-items:center; gap:8px; margin:-4px 0 18px; padding:5px 13px; border-radius:999px;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:#F8B84E; background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.5);
  text-shadow:0 0 6px rgba(245,158,11,.55);
}
.selo-desenvolvimento::before{content:""; width:7px; height:7px; border-radius:50%; background:#F59E0B;
  box-shadow:0 0 8px rgba(245,158,11,.9); animation:dev-ponto 2s ease-in-out infinite}
@keyframes dev-ponto{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.45; transform:scale(.75)} }
.secao-ms365[data-recolhida] > .selo-desenvolvimento{margin:12px 0 0}
.pill.desenvolvimento{color:#F8B84E; background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.55);
  text-shadow:0 0 6px rgba(245,158,11,.55)}
@media (prefers-reduced-motion:reduce){
  .em-desenvolvimento, .selo-desenvolvimento::before{animation:none}
}

/* ---------- "So visualizar" por cartao (30/09/2026) ----------
   Todo controle de ACAO (cadastrar, excluir, enviar, baixar) leva
   data-acao="<cartao>"; o painel.js poe .acao-bloqueada nos do cartao em "so
   visualizar". So conforto: a trava de verdade e no servidor (_trava_so_ver). */
.acao-bloqueada{display:none !important}
.item-acesso{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px}
.item-acesso .marcar.item{margin-right:0}
.modo-acesso{width:auto; min-width:0; padding:3px 8px; font-size:12px; border-radius:6px; margin:0 0 0 26px}
@media (min-width:641px){ .modo-acesso{margin-left:0} }
.so-ver-tag{font-size:10.5px; color:#F8B84E; border:1px solid rgba(245,158,11,.45); border-radius:999px; padding:0 6px; margin-left:4px}
.nota-modo{margin:4px 0 8px; font-size:12.5px}

/* ---------- Usuarios: "so consulta" e explicacao das permissoes (01/10/2026) ---------- */
.modo-consulta{font-size:11.5px; color:var(--muted); border:1px dashed rgba(255,255,255,.14);
  border-radius:6px; padding:2px 8px; margin-left:26px}
@media (min-width:641px){ .modo-consulta{margin-left:0} }
details.explica-permissoes{margin:22px 0 0; max-width:760px}
details.explica-permissoes > summary{cursor:pointer; list-style:none; display:inline-flex; align-items:center;
  gap:8px; font-size:13.5px; font-weight:600; color:var(--text)}
details.explica-permissoes > summary::-webkit-details-marker{display:none}
details.explica-permissoes > summary svg{width:11px; height:22px; fill:none; stroke:var(--turq); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; opacity:.75; transition:transform .25s ease}
details.explica-permissoes[open] > summary svg{transform:rotate(90deg)}
details.explica-permissoes > summary:hover svg, details.explica-permissoes > summary:focus-visible svg{opacity:1}
.explica-permissoes dl{margin:12px 0 0; padding-left:19px; font-size:13px; line-height:1.55}
.explica-permissoes dt{margin:10px 0 2px; color:var(--turq); font-weight:600}
.explica-permissoes dd{margin:0; color:var(--muted)}
.explica-permissoes dd b{color:var(--text); font-weight:600}
.explica-onde{color:var(--muted); font-weight:400; font-size:12px}
.explica-rodape{margin:12px 0 0; padding-left:19px; font-size:12.5px; color:var(--muted)}
@media (prefers-reduced-motion:reduce){ details.explica-permissoes > summary svg{transition:none} }

/* ---------- Subsecoes recolhiveis (01/10/2026): "Criar usuario", "Contas" ----------
   Mesma seta fina do padrao, menor; recolhida, so fica o titulo. */
.subsecao[data-recolhida] > :not(h2.secao){display:none !important}
.subsecao[data-recolhida] > h2.secao{margin-bottom:0}
.subsecao[data-recolhida] + .subsecao > h2.secao{margin-top:22px}
.seta-secao.seta-sub{width:22px; height:30px; margin:0 6px 0 -4px; border-radius:6px}
.seta-secao.seta-sub svg{width:10px; height:20px; stroke-width:2.2}

/* seta de recolher dentro das permissoes abertas de um usuario (01/10/2026) */
.perm-topo{display:flex; align-items:center; gap:2px; margin:0 0 6px}
.perm-titulo{font-size:13px; color:var(--muted)}
.perm-titulo b{color:var(--text); font-weight:600}

/* ---------- Senhas de usuarios (02/10/2026) ---------- */
.painel-contas .rotulo-cartao{text-align:center}
[data-resumo="licencas"] > .rotulo-cartao{text-align:center} /* 11/10/2026: igual ao de Senhas de usuários */
.rotulo-dev{color:#F8B84E}
.contas-busca{margin:4px 0 14px}
.contas-busca input{width:100%}
.contas-lista{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:4px}
.contas-lista[hidden], .contas-ficha[hidden]{display:none}
.contas-pessoa{display:block; width:100%; text-align:left; padding:7px 10px; border-radius:8px; font:inherit;
  background:transparent; border:1px solid rgba(255,255,255,.07); color:var(--text); cursor:pointer}
.contas-pessoa:hover, .contas-pessoa:focus-visible{background:rgba(19,220,210,.08); border-color:var(--turq-dim)}
.contas-pessoa .sug-nome{display:block; font-size:14px}
.contas-pessoa .sug-email{display:block; font-size:12px; color:var(--muted); overflow-wrap:anywhere}
.contas-links{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 6px}
.contas-links [hidden]{display:none}
.contas-campos{margin-top:12px}
/* 11/10/2026 (correcao): texto longo no valor (convidado: acesso no SharePoint,
   "se bloquear") nao pode espremer a coluna dos nomes - as duas colunas tem
   largura propria e o valor quebra linha dentro da sua */
.contas-campos{grid-template-columns:minmax(150px, 1fr) minmax(0, 1.3fr)}
.contas-campos dt{overflow-wrap:normal}
@media (max-width:520px){
  .contas-campos{grid-template-columns:minmax(0, 1fr); gap:2px 0}
  .contas-campos dd{margin-bottom:8px}
}
.contas-campos dd{text-align:left; font-weight:500; overflow-wrap:anywhere}
/* administrar a conta pelo portal (11/10/2026) */
.adm365-caixa{margin:6px 0 10px; padding:12px 14px; border-radius:10px; background:rgba(19,220,210,.05);
  border:1px solid rgba(19,220,210,.18); display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.adm365-caixa[hidden], .adm365 [hidden]{display:none}
.adm365-caixa p{margin:0; font-size:13.5px}
.adm365-caixa .bib-email{max-width:100%}
.adm365-senha{font-family:ui-monospace, Consolas, monospace; font-size:16px; letter-spacing:.5px; color:var(--turq)}
.contas-campos input{width:100%; padding:6px 9px; border-radius:7px; font:inherit; font-weight:400;
  background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.12); color:var(--text)}
.contas-campos .adm-botoes{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
@media (min-width:1200px){
  .grade-cartoes[data-aberto="contas"]{
    width:min(1320px, calc(100vw - 112px));
    margin-left:calc(50% - min(660px, 50vw - 56px));
    flex-wrap:nowrap;
  }
  .grade-cartoes[data-aberto="contas"] .painel-contas{flex:0 0 330px}
  .grade-cartoes[data-aberto="contas"] .painel-contas .pizza{width:180px; height:180px}
  .grade-cartoes[data-aberto="contas"] .painel-detalhe-contas{flex:1 1 0; min-width:0}
}
/* tres resumos lado a lado (02/10/2026): a grade se estica para os lados, como
   ja faz com um cartao aberto, para "Senhas de usuarios" ficar AO LADO do
   Checklist RH no computador. Celular e tela estreita: um embaixo do outro. */
@media (min-width:1200px){
  .grade-cartoes:not([data-aberto]):has(> .painel-contas){
    width:min(1320px, calc(100vw - 112px));
    margin-left:calc(50% - min(660px, 50vw - 56px));
    flex-wrap:nowrap;
  }
}

/* ---------- Estado do cartao: selos + pontinhos do admin (02/10/2026) ----------
   Laranja = "Em desenvolvimento"; roxo (o do COMERCIAL) = "Atualizando dados".
   Pontinho ligado pulsa como o neon; desligado fica apagado. */
.selos-estado{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:-4px 0 18px}
.selos-estado .selo-desenvolvimento{margin:0}
.selos-estado [hidden]{display:none !important}
.secao-ms365[data-recolhida] > .selos-estado{margin:12px 0 0}
.painel .selos-estado{justify-content:center; margin:0 0 10px}
.selo-atualizando{
  display:inline-flex; align-items:center; gap:8px; padding:5px 13px; border-radius:999px;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:#C4BDFF; background:rgba(139,128,240,.12); border:1px solid rgba(139,128,240,.55);
  text-shadow:0 0 6px rgba(139,128,240,.6);
}
.selo-atualizando::before{content:""; width:7px; height:7px; border-radius:50%; background:#8B80F0;
  box-shadow:0 0 8px rgba(139,128,240,.9); animation:dev-ponto 2s ease-in-out infinite}
.atualizando-dados{border-color:rgba(139,128,240,.5) !important; animation:att-neon 3s ease-in-out infinite}
@keyframes att-neon{
  0%,100%{ box-shadow:0 0 0 0 rgba(139,128,240,.5), 0 0 0 0 rgba(139,128,240,.2) }
  50%    { box-shadow:0 0 0 5px rgba(139,128,240,.55), 0 0 0 14px rgba(139,128,240,.18) }
}
.estado-botoes{display:inline-flex; align-items:center; gap:10px; margin-left:4px}
.ponto-estado{width:12px; height:12px; min-width:0; padding:0; border-radius:50%; border:0; cursor:pointer;
  opacity:.35; box-shadow:none; filter:none; transition:opacity .2s ease}
.ponto-estado.laranja{background:#F59E0B}
.ponto-estado.roxo{background:#8B80F0}
.ponto-estado[aria-pressed="true"]{opacity:1; animation:dev-ponto 2s ease-in-out infinite}
.ponto-estado.laranja[aria-pressed="true"]{box-shadow:0 0 8px rgba(245,158,11,.9)}
.ponto-estado.roxo[aria-pressed="true"]{box-shadow:0 0 8px rgba(139,128,240,.9)}
.ponto-estado:hover, .ponto-estado:focus-visible{opacity:1; outline:2px solid rgba(255,255,255,.25); outline-offset:2px}
.ponto-estado:disabled{cursor:wait}
@media (prefers-reduced-motion:reduce){
  .selo-atualizando::before, .atualizando-dados, .ponto-estado[aria-pressed="true"]{animation:none}
}

/* ---------- Copiar e-mail (07/10/2026) - padrao do portal ----------
   Botao discreto ao lado de todo [data-copiar]; o balao "E-mail copiado" sai
   para a ESQUERDA do botao (por cima do proprio e-mail), para nao ser cortado
   pelo topo das tabelas com rolagem. */
.copiar-email{
  position:relative; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
  width:22px; height:22px; min-width:0; margin:0 0 0 6px; padding:0; border:0; border-radius:5px;
  background:transparent; color:var(--muted); opacity:.55; cursor:pointer; box-shadow:none; filter:none;
  transition:opacity .15s ease, color .15s ease, background .15s ease;
}
.copiar-email svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.copiar-email:hover, .copiar-email:focus-visible{opacity:1; color:var(--turq); background:rgba(19,220,210,.08); filter:none}
.copiar-email.copiado{opacity:1; color:var(--ok)}
.copiado-aviso{
  position:absolute; right:calc(100% + 6px); top:50%; transform:translateY(-50%); z-index:5;
  white-space:nowrap; font-size:11px; line-height:1; padding:5px 8px; border-radius:6px;
  background:#0B2A2E; border:1px solid rgba(73,200,143,.5); color:var(--ok); pointer-events:none;
  animation:copiado-some 1.6s ease forwards;
}
@keyframes copiado-some{ 0%{opacity:0} 12%{opacity:1} 75%{opacity:1} 100%{opacity:0} }
.copiar-oculto{position:fixed; top:-1000px; left:-1000px; opacity:0}
@media (prefers-reduced-motion:reduce){ .copiado-aviso{animation:none} }

/* ---------- Gestao de usuarios VIMOB e MEGA (07/10/2026) ----------
   Mesmo molde do Intelbras: aberto, o detalhe se alarga para as laterais. */
.valor-aguarda{font-size:11px; letter-spacing:.04em; color:var(--muted); font-style:italic}
.painel-detalhe-gu .mac-busca{margin:2px 0 10px}
.painel-detalhe-gu [hidden]{display:none}
@media (min-width:1200px){
  .grade-cartoes[data-aberto="gu"]{
    width:min(1320px, calc(100vw - 112px));
    margin-left:calc(50% - min(660px, 50vw - 56px));
    flex-wrap:nowrap;
  }
  .grade-cartoes[data-aberto="gu"] .painel-gu{flex:0 0 310px}
  .grade-cartoes[data-aberto="gu"] .painel-gu .pizza{width:180px; height:180px}
  .grade-cartoes[data-aberto="gu"] .painel-detalhe-gu{flex:1 1 0; min-width:0}
}
@media (min-width:641px){
  .painel-detalhe-gu{container-type:inline-size}
  .tabela-gu th{text-align:left}
}

/* ---------- Bracos do Mega/Senior: esqueletos (07/10/2026) ----------
   Agenda Mega tem 3 cartoes: lado a lado no computador, como no MS365. */
.esqueleto-link{margin:12px 0 0; text-align:center}
@media (min-width:1200px){
  .grade-cartoes.grade-tres:not([data-aberto]){
    width:min(1320px, calc(100vw - 112px));
    margin-left:calc(50% - min(660px, 50vw - 56px));
    flex-wrap:nowrap;
  }
}

/* ---------- Pagina inicial limpa: Timber renascendo no meio (08/10/2026) ----------
   O Timber pequeno do topo termina a animacao dele aos 3,5 s; aos 3,7 s o
   grande comeca a aparecer (de pequeno e desfocado para o tamanho final) e,
   aos 6,3 s, passa a pulsar para sempre. A ORDEM importa: o pulso vem depois
   na lista e so comeca quando o renascimento acabou (sem fill "backwards"),
   para nao apagar o renascimento - mesma licao do Timber do topo.
   Imagem original 300x477: ate ~260px de altura fica nitida. */
.inicio-limpo{display:flex; justify-content:center; align-items:center; min-height:min(46vh, 400px); padding:8px 0 28px}
.timber-central{
  height:clamp(170px, 32vh, 260px); width:auto; opacity:0; transform:scale(.25);
  filter:blur(8px) drop-shadow(0 0 0 rgba(19,220,210,0));
  animation:
    timber-renascer 2.6s cubic-bezier(.22,.9,.3,1) 3.7s forwards,
    timber-central-pulsar 3.2s ease-in-out 6.3s infinite;
}
@keyframes timber-renascer{
  0%   { opacity:0;   transform:scale(.25); filter:blur(8px) drop-shadow(0 0 0 rgba(19,220,210,0)) }
  55%  { opacity:.75; transform:scale(.9);  filter:blur(1px) drop-shadow(0 0 34px rgba(19,220,210,.55)) }
  100% { opacity:.95; transform:scale(1);   filter:blur(0) drop-shadow(0 0 22px rgba(19,220,210,.40)) }
}
@keyframes timber-central-pulsar{
  0%,100% { opacity:.95; transform:scale(1) }
  50%     { opacity:1;   transform:scale(1.05) }
}
@media (prefers-reduced-motion:reduce){
  .timber-central{animation:none; opacity:.95; transform:none; filter:drop-shadow(0 0 22px rgba(19,220,210,.40))}
}

/* ---------- Links e Linhas: Gestao Unifique (08/10/2026) ---------- */
.uni-con{display:inline-block; margin-left:6px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase}
.uni-con.on{color:var(--ok)}
.uni-con.off{color:var(--aviso)}
.uni-resumo{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:4px}
.uni-resumo .legenda-item .valor{font-variant-numeric:tabular-nums}
.uni-wifi{margin:10px 0 0; font-size:12.5px; color:var(--muted)}
.uni-wifi b{color:var(--text); font-weight:500}
.painel-detalhe-uni [hidden]{display:none}
.painel-detalhe-uni dl.intel-numeros{margin-top:6px}
@media (min-width:1200px){
  /* 09/10/2026: mais largo para a direita (coluna Filial) */
  .grade-cartoes[data-aberto^="uni"]{
    width:min(1480px, calc(100vw - 64px));
    margin-left:calc(50% - min(740px, 50vw - 32px));
    flex-wrap:nowrap;
  }
  .grade-cartoes[data-aberto^="uni"] .painel-uni{flex:0 0 360px}
  .grade-cartoes[data-aberto^="uni"] .painel-uni .pizza{width:180px; height:180px}
  .grade-cartoes[data-aberto^="uni"] .painel-detalhe-uni{flex:1 1 0; min-width:0}
}
/* detalhe do plano: rotulo e valor lado a lado, valor alinhado a esquerda */
.painel-detalhe-uni dl.intel-numeros{display:grid; grid-template-columns:minmax(90px, 130px) 1fr; gap:8px 16px; margin:8px 0 0}
.painel-detalhe-uni dl.intel-numeros dt{color:var(--muted); font-size:12.5px; margin:0}
.painel-detalhe-uni dl.intel-numeros dd{margin:0; text-align:left; overflow-wrap:anywhere}

/* atalhos da area do cliente Unifique: chips no padrao do menu (quadrado verde) */
.uni-atalhos{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 14px}
.uni-atalhos a, .uni-atalhos button{font:inherit; background:none; cursor:pointer; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
  text-decoration:none; padding:4px 9px; border:1px solid rgba(19,220,210,.6); border-radius:8px; white-space:nowrap}
.uni-atalhos a:hover, .uni-atalhos a:focus-visible{color:var(--turq); border-color:var(--turq)}
.uni-atalhos button:hover, .uni-atalhos button:focus-visible{color:var(--turq); border-color:var(--turq)}
/* box aberto = destaque cheio, como o item clicado do menu */
.uni-atalhos button.selecionada{color:var(--turq); background:rgba(19,220,210,.14); border-color:var(--turq)}

/* Unifique ao vivo: 2a via / codigo de barras na propria tabela (09/10/2026) */
.uni-acoes{white-space:nowrap}
.uni-acao{font:inherit; font-size:11.5px; color:var(--turq); background:none; cursor:pointer;
  border:1px solid rgba(19,220,210,.6); border-radius:8px; padding:3px 8px; margin:0 4px 0 0; text-decoration:none}
.uni-acao:hover, .uni-acao:focus-visible{border-color:var(--turq); background:rgba(19,220,210,.08)}
.uni-acao[disabled]{opacity:.6; cursor:progress}
.uni-linha{font-family:ui-monospace, Consolas, monospace; font-size:11.5px; overflow-wrap:anywhere; white-space:normal}
.uni-aviso{color:var(--aviso)}
@media (max-width:640px){ .uni-acoes{white-space:normal} .uni-acao{display:inline-block; margin:2px 4px 2px 0} }

/* endereco do link em cada fatura (09/10/2026) */
.uni-end{font-size:12.5px}
.uni-end .plano{display:block; font-size:11px; color:var(--muted)}

/* card Unifique: sublinhado fino no que e clicavel (09/10/2026, Airton) */
.painel-uni .uni-clique{text-decoration:underline; text-decoration-color:rgba(19,220,210,.6);
  text-decoration-thickness:1px; text-underline-offset:3px}
.painel-uni .legenda-item:hover .uni-clique, .painel-uni .legenda-item.selecionada .uni-clique{text-decoration-color:var(--turq)}

/* card Unifique: atendimento por WhatsApp / Telegram no rodape (09/10/2026) */
.uni-contato{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:12px 0 4px; font-size:12px; color:var(--muted)}
.uni-contato a{font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
  padding:4px 10px; border-radius:8px; border:1px solid rgba(19,220,210,.6); color:var(--text)}
.uni-contato a.uni-contato-whatsapp{border-color:rgba(37,211,102,.7)}
.uni-contato a.uni-contato-telegram{border-color:rgba(42,171,238,.7)}
.uni-contato a:hover, .uni-contato a:focus-visible{color:var(--turq); border-color:var(--turq)}

/* Permissoes: setinha fina por grupo (09/10/2026) - mesma seta do portal, menor */
.grupo-acesso > legend{display:flex; align-items:center; gap:4px}
.seta-grupo{background:none; border:0; padding:0 2px; margin:0; cursor:pointer; line-height:0; display:inline-flex}
.seta-grupo svg{width:9px; height:18px; fill:none; stroke:var(--turq); stroke-width:2.2; stroke-linecap:round;
  stroke-linejoin:round; opacity:.75; transition:transform .2s ease}
.seta-grupo[aria-expanded="true"] svg{transform:rotate(90deg)}
.seta-grupo:hover svg, .seta-grupo:focus-visible svg{opacity:1}
@media (prefers-reduced-motion:reduce){ .seta-grupo svg{transition:none} }

/* HOME do menu (09/10/2026): casinha no mesmo quadrado verde, compacta */
.paginas a.menu-home{display:inline-flex; align-items:center; justify-content:center; padding-left:7px; padding-right:7px}
.paginas a.menu-home svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
/* 09/10/2026: com o HOME, o menu tem 7 itens - um pouco menos de respiro para
   caber numa linha em 1280-1366px (antes: 8px de cada lado e 4px entre eles) */
@media (min-width:900px){
  .paginas .menu-principal, .paginas .menu-grupo{column-gap:3px}
  .paginas .menu-principal > a, .paginas .menu-grupo > a{padding-left:6px; padding-right:6px}
}

/* codigo de acesso por e-mail (09/10/2026) */
.codigo-acesso{font-size:24px; letter-spacing:.4em; text-align:center; font-variant-numeric:tabular-nums}
.reenviar-codigo{margin-top:10px; text-align:center}

/* Usuarios: a linha inteira abre/recolhe as permissoes (09/10/2026) */
tr.linha-usuario{cursor:pointer}
tr.linha-usuario:hover > td{background:rgba(19,220,210,.04)}
/* paineis de detalhe abertos: clicar na parte vazia recolhe (09/10/2026) */
.painel-detalhe{cursor:default}

/* MS365: planilha de usuarios + "Ver lista" no topo (09/10/2026) */
.ms-usuarios{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:2px 0 22px}
.ms-usuarios .link-planilha{display:inline-flex; align-items:center; gap:6px; font-size:13.5px}
.ms-usuarios .link-planilha svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.ms-usuarios-ver{font:inherit; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); background:none;
  cursor:pointer; padding:4px 10px; border:1px solid rgba(19,220,210,.6); border-radius:8px}
.ms-usuarios-ver:hover, .ms-usuarios-ver:focus-visible, .ms-usuarios-ver[aria-expanded="true"]{color:var(--turq); border-color:var(--turq)}
.ms-usuarios-ver[aria-expanded="true"]{background:rgba(19,220,210,.14)}
.ms-usuarios-lista{flex-basis:100%; padding:16px}
.ms-usuarios-topo{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.ms-usuarios-topo input{flex:1; min-width:0}
.ms-usuarios-total{color:var(--muted); font-size:12.5px; white-space:nowrap}
.ms-usuarios-lista .detalhe-tabela{max-height:420px; overflow:auto}

/* setinha fina para recolher um grupo dentro do card (09/10/2026, exemplo Redel) */
.seta-grupo-card{background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; letter-spacing:inherit;
  text-transform:inherit; display:inline-flex; align-items:center; gap:6px; cursor:pointer}
.seta-grupo-card svg{width:7px; height:14px; fill:none; stroke:var(--turq); stroke-width:2.4; stroke-linecap:round;
  stroke-linejoin:round; opacity:.75; transition:transform .2s ease}
.seta-grupo-card[aria-expanded="true"] svg{transform:rotate(90deg)}
.seta-grupo-card:hover svg, .seta-grupo-card:focus-visible svg{opacity:1}
@media (prefers-reduced-motion:reduce){ .seta-grupo-card svg{transition:none} }

/* CNPJ logo apos o nome da operadora no titulo (09/10/2026) */
.titulo-pagina .titulo-cnpj{font-size:.42em; font-weight:500; letter-spacing:.02em; color:var(--muted); white-space:nowrap; vertical-align:middle}
.uni-pendente{max-width:620px}

.uni-filial{font-weight:600; color:var(--text)}
.titulo-pagina .titulo-cnpj .copiar-email{vertical-align:middle}

/* 09/10/2026: [hidden] SEMPRE esconde, em todo o portal. Sem isto, elementos com
   display proprio (ex.: .legenda{display:flex}) ignoravam o hidden e as setinhas
   de recolher grupos "nao funcionavam". */
[hidden]{display:none !important}

/* login: "Permanecer conectado" (09/10/2026) */
.manter-conectado{margin:14px 0 4px; font-size:13px}
.manter-conectado .manter-dica{color:var(--muted); font-size:12px}

/* 11/10/2026: cartoes de Ferramentas/Vigencias com estado - selo e pontinhos
   logo acima do cartao (fora do link, para o clique no pontinho nao abrir a ferramenta) */
.card-casca{display:flex; flex-direction:column; min-width:0}
.card-casca > .selos-estado{justify-content:flex-start; margin:0 0 8px}
.card-casca > .card{flex:1}

/* Historico (11/10/2026): IP inteiro (nao corta) e detalhe com mais espaco;
   seta de voltar ao lado do titulo */
@media (min-width:641px){
  /* e-mails e IP inteiros, numa linha so; quem quebra e o detalhe (11/10/2026) */
  .tabela-historico td.ip, .tabela-historico td.quando, .tabela-historico td.quem,
  .tabela-historico td.sobre{white-space:nowrap}
  .tabela-historico td.detalhe{min-width:240px; overflow-wrap:break-word}
  .tabela-historico th:last-child, .tabela-historico td:last-child{padding-right:22px}
  .tabela-historico td.oque .pill{white-space:normal; display:inline-block; max-width:230px; line-height:1.35}
}
/* "o que mudou": campo, valor antigo riscado e o novo em destaque */
.det-contexto{display:block; font-size:12px; color:var(--muted)}
.det-resto{display:block; margin-top:3px}
.mudancas{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:3px}
.mudancas .campo{font-weight:600; color:var(--text)}
.mudancas .campo::after{content:":"}
.mudancas .antes{color:var(--muted); text-decoration:line-through; text-decoration-color:rgba(236,123,110,.7)}
.mudancas .seta-mudou{color:var(--turq-dim); margin:0 2px}
.mudancas .depois{color:var(--turq); font-weight:600}
@media (max-width:640px){
  .tabela-historico td.sobre{grid-column:1 / -1; overflow-wrap:anywhere}
}
.titulo-com-volta{display:flex; align-items:center; gap:10px}
.seta-voltar{display:inline-flex; align-items:center; justify-content:center; width:30px; height:44px; min-width:0;
  padding:0; margin:0 0 0 -6px; background:none; border:0; box-shadow:none; filter:none; cursor:pointer; color:var(--turq)}
.seta-voltar svg{width:16px; height:32px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.seta-voltar:hover, .seta-voltar:focus-visible{color:var(--text)}
.filtro-historico[data-voltar-vazio]{cursor:pointer}
.filtro-historico[data-voltar-vazio] .campo, .filtro-historico[data-voltar-vazio] button{cursor:auto}
.filtro-historico[data-voltar-vazio] button{cursor:pointer}

/* Historico completo (11/10/2026): a pagina pode usar ate 1560px (auditoria
   precisa de e-mail, conta alterada e IP inteiros); quando vira 2 linhas */
.wrap:has(.tabela-historico:not(.tabela-registros)){max-width:1560px}
@media (min-width:641px){
  .tabela-historico th, .tabela-historico td{padding:10px 11px}
  .tabela-historico td.quando{white-space:normal; min-width:84px}
  .tabela-historico td.quando .hora{display:block; color:var(--muted)}
  .tabela-historico td.oque{min-width:170px}
}

/* tipo de caixa nas listas de contas (11/10/2026) */
.contas-pessoa{position:relative; padding-right:170px}
.pill-caixa{position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 9px; border-radius:999px; white-space:nowrap;
  color:var(--turq); background:rgba(19,220,210,.08); border:1px solid rgba(19,220,210,.25)}
.pill-caixa.caixa-shared{color:#C9A6F0; background:rgba(201,166,240,.10); border-color:rgba(201,166,240,.35)}
.pill-caixa.caixa-room, .pill-caixa.caixa-equipment{color:#F8B84E; background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.35)}
.pill-caixa.caixa-sem{color:var(--muted); background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14)}
@media (max-width:640px){
  .contas-pessoa{padding-right:10px}
  .pill-caixa{position:static; transform:none; display:inline-block; margin-top:5px}
}

/* Timber sem espera (11/10/2026, Airton): fora da pagina inicial, ou depois de
   qualquer clique/tecla nela, o Timber ja esta no lugar final, so pulsando.
   (classe posta pelo timber.js no <head> e pelo painel.js no clique) */
.timber-pronto .timber{animation:timber-pulsar 3.2s ease-in-out infinite; z-index:3}
.timber-pronto .timber-central{animation:timber-central-pulsar 3.2s ease-in-out infinite; opacity:.95;
  transform:none; filter:drop-shadow(0 0 22px rgba(19,220,210,.40))}
.pill-caixa.caixa-externa{color:#7FB8FF; background:rgba(127,184,255,.08); border-color:rgba(127,184,255,.35)}
.pill-caixa.caixa-pessoal{color:#F59E8B; background:rgba(236,123,110,.08); border-color:rgba(236,123,110,.35)}

/* auditoria de compartilhamentos no card de senhas (11/10/2026) */
.auditoria-box[hidden]{display:none}
.auditoria-box .contas-links{align-items:center}
.tabela-auditoria td{vertical-align:top; font-size:12.5px}
.tabela-auditoria .aud-item{display:block; font-weight:600; overflow-wrap:anywhere}
.tabela-auditoria .aud-externo{color:#F59E8B; font-weight:600}
@media (max-width:640px){
  .tabela-auditoria thead{display:none}
  .tabela-auditoria, .tabela-auditoria tbody, .tabela-auditoria tr, .tabela-auditoria td{display:block}
  .tabela-auditoria tr{padding:10px 0; border-bottom:1px solid rgba(255,255,255,.07)}
  .tabela-auditoria td{border:0; padding:2px 0}
}
.aud-busca{margin:4px 0 10px}
.aud-busca input{width:100%}
.tabela-auditoria tr.aud-tudo td{background:rgba(0,0,0,.18)}
.tabela-auditoria tr.aud-tudo dl{margin:4px 0; font-size:12px}
@media (max-width:640px){ .tabela-auditoria tr.aud-tudo td{padding:8px} }

/* aviso da auditoria ao lado do TI-CN (11/10/2026): farol laranja maior,
   pulsando mais forte, e a frase; clicar abre a auditoria */
.aviso-auditoria{display:flex; justify-content:center; align-items:center; gap:10px; margin:10px auto 0;
  text-decoration:none; color:#F8B84E; font-size:14px; font-weight:600; letter-spacing:.01em; width:max-content}
.aviso-auditoria[hidden]{display:none}
.aviso-auditoria .farol{width:16px; height:16px; border-radius:50%; background:#F59E0B; flex:none;
  box-shadow:0 0 14px rgba(245,158,11,.95); animation:farol-auditoria 1.6s ease-in-out infinite}
.aviso-auditoria[data-erro]{color:#F59E8B}
.aviso-auditoria[data-erro] .farol{background:#EC7B6E; box-shadow:0 0 14px rgba(236,123,110,.9)}
.aviso-auditoria:hover .texto{text-decoration:underline}
@keyframes farol-auditoria{
  0%,100%{transform:scale(1);   opacity:1;   box-shadow:0 0 14px rgba(245,158,11,.95)}
  50%    {transform:scale(1.25); opacity:.75; box-shadow:0 0 26px rgba(245,158,11,1)}
}
@media (prefers-reduced-motion:reduce){ .aviso-auditoria .farol{animation:none} }
/* ao lado do TI-CN: o texto continua centralizado, o aviso fica a direita dele */
.marca-pagina .marca-texto{position:relative; display:inline-block}
.marca-pagina .aviso-auditoria{position:absolute; left:calc(100% + 22px); top:50%; transform:translateY(-50%);
  margin:0; font-size:15px; letter-spacing:.01em; line-height:1}
@media (max-width:760px){
  .marca-pagina .aviso-auditoria{position:static; transform:none; margin:10px auto 0}
  .marca-pagina .marca-texto{display:block}
}
/* bolinha da Auditoria no card piscando ate abrir o resultado (11/10/2026) */
.ponto.piscando{animation:farol-auditoria 1.6s ease-in-out infinite; box-shadow:0 0 10px rgba(245,158,11,.95)}
@media (prefers-reduced-motion:reduce){ .ponto.piscando{animation:none} }
.aud-filtro{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted)}
.aud-filtro select{max-width:100%}
@media (max-width:640px){ .aud-filtro{width:100%; flex-wrap:wrap} .aud-filtro select{width:100%} }

/* subitens na tela de Permissoes (11/10/2026) */
.item-acesso{flex-wrap:wrap}
.subitens-acesso{flex-basis:100%; margin:4px 0 6px 28px; font-size:13px}
.subitens-acesso summary{cursor:pointer; color:var(--turq); width:max-content}
.subitens-lista{display:flex; flex-direction:column; gap:4px; margin:6px 0 0 6px}

/* card travado pela TI e auditoria rodando (11/10/2026) */
[data-travado], [data-travado] *{cursor:not-allowed}
.aviso-travado{position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:50; max-width:min(92vw, 560px);
  padding:12px 18px; border-radius:12px; background:#2A1B0B; border:1px solid rgba(245,158,11,.6); color:#F8B84E;
  font-size:14px; line-height:1.45; box-shadow:0 8px 30px rgba(0,0,0,.45); text-align:center}
.aviso-travado[hidden]{display:none}
.auditoria-rodando{border-color:rgba(236,123,110,.7) !important; animation:aud-neon 2.4s ease-in-out infinite}
@keyframes aud-neon{
  0%,100%{box-shadow:0 0 0 1px rgba(236,123,110,.35), 0 0 14px rgba(236,123,110,.25)}
  50%    {box-shadow:0 0 0 2px rgba(236,123,110,.75), 0 0 30px rgba(236,123,110,.55)}
}
.selo-auditoria{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:#F59E8B; background:rgba(236,123,110,.10);
  border:1px solid rgba(236,123,110,.55)}
.selo-auditoria::before{content:""; width:6px; height:6px; border-radius:50%; background:#EC7B6E;
  box-shadow:0 0 8px rgba(236,123,110,.9); animation:dev-ponto 2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){ .auditoria-rodando, .selo-auditoria::before{animation:none} }
.aviso-travado.liberado{background:#0B2A22; border-color:rgba(73,200,143,.6); color:var(--ok)}

/* caixinha "Conferir" do admin na lista de acessos das bibliotecas (12/10/2026) */
.bib-conferir-bt{margin-top:6px; padding:2px 10px; border:1px dashed rgba(19,220,210,.45); border-radius:999px; background:transparent;
  color:#13dcd2; font:inherit; font-size:11px; cursor:pointer}
.bib-conferir-bt:hover,.bib-conferir-bt[aria-expanded="true"]{background:rgba(19,220,210,.12)}
.bib-conferir-linha > td{padding-top:0}
.bib-conferir{margin-right:0; max-width:100%}
.bib-conferir-aviso{margin:0 0 8px; font-size:12px; color:var(--aviso)}
.bib-conferir-titulo{margin:10px 0 4px; font-weight:600; color:var(--text)}
.bib-conferir-texto{margin:6px 0 4px; font-size:12.5px}
.bib-conferir-bloco{display:flex; gap:8px; align-items:flex-start; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.1);
  border-radius:8px; padding:8px 10px}
.bib-conferir-bloco pre{margin:0; flex:1 1 auto; min-width:0; white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.45 Consolas,monospace;
  color:var(--text)}
.bib-conferir-passos{margin:4px 0 0 18px; padding:0; font-size:13px; display:flex; flex-direction:column; gap:4px}
.bib-conferir-mail{overflow-wrap:anywhere}
.bib-conferir a, .bib-conferir a:visited{color:#7FE9E2; text-decoration:underline; text-underline-offset:2px}
.bib-conferir a:hover{color:#BFFAF5}
.bib-conferir-linha{cursor:default}
.bib-desligar{margin-top:6px}
.bib-desligar-msg{margin:6px 0; font-size:13px}
.bib-desligar-msg.ok{color:var(--ok)}
.bib-desligar-msg.erro{color:var(--aviso)}
.bib-desligar-lista{margin:2px 0 8px 18px; padding:0; font-size:12.5px; overflow-wrap:anywhere}
.bib-desligar-botoes{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.bib-desligar-marcar{list-style:none; margin-left:0}
.bib-desligar-marcar label{cursor:pointer; display:block; padding:2px 0}
.bib-desligar-marcar input{margin-right:4px}
.bib-desligar-atalhos{margin:2px 0 4px; display:flex; gap:12px}
.bib-desligar-link{background:none; border:0; padding:0; color:#7FE9E2; font:inherit; font-size:12px; cursor:pointer; text-decoration:underline}
.bib-membros .bib-desligar-marcar li{display:block; padding:1px 0; border:0}
.bib-desligar-conferir{font-size:12px; margin-left:4px}
.bib-membros .bib-desligar-lista a{color:#7FE9E2}

/* acesso granular: navegar pelas pastas e dar acesso a uma (13/10/2026) */
.bib-gran{margin-top:16px; border-top:1px dashed rgba(255,255,255,.12); padding-top:10px}
.bib-gran > summary{cursor:pointer; list-style:none}
.gran-grade{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:18px; margin-top:8px}
@media (max-width:820px){ .gran-grade{grid-template-columns:minmax(0,1fr)} }
.gran-trilha{display:flex; flex-wrap:wrap; align-items:center; gap:2px 4px; margin-bottom:6px; font-size:13px}
.gran-migalha{background:none; border:0; padding:2px 4px; color:#7FE9E2; font:inherit; cursor:pointer; text-decoration:underline}
.gran-migalha.atual{color:var(--text); text-decoration:none; cursor:default; font-weight:600}
.gran-sep{color:var(--mut, #8aa)}
.gran-aviso0{margin:4px 0; font-size:13px; color:var(--aviso)}
.gran-pastas{list-style:none; margin:0; padding:0; max-height:340px; overflow:auto}
.gran-pastas li{padding:1px 0}
.gran-pasta{display:block; width:100%; text-align:left; background:none; border:0; padding:6px 8px; color:var(--text); font:inherit; font-size:13.5px; cursor:pointer; border-radius:6px; overflow-wrap:anywhere}
.gran-pasta:hover{background:rgba(19,220,210,.10)}
.gran-vazio{font-size:12.5px; color:var(--mut, #8aa); padding:4px 8px}
.gran-escolher{padding:4px 0 8px}
.gran-linha{margin:2px 0; font-size:13px; overflow-wrap:anywhere}
.gran-linha a, .gran-dir a{color:#7FE9E2}
.gran-quem{margin:2px 0 8px 18px; padding:0; font-size:12.5px; overflow-wrap:anywhere}
.gran-dir form{margin-top:10px}
.gran-dir .campo-busca, .gran-dir .bib-email{width:100%; max-width:100%; box-sizing:border-box}
.gran-dir .bib-niveis{display:flex; flex-wrap:wrap; gap:6px 16px; margin:8px 0}
.bib-gran-atalho{margin:6px 0; display:flex; flex-wrap:wrap; gap:8px}

/* destaque por nivel: clicar em "16 com acesso total" / "9 so leitura" sublinha os nomes com um neon fraquinho (13/10/2026) */
.bib-nivel-bt{background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer;
  text-decoration:underline dotted rgba(255,255,255,.35); text-underline-offset:4px}
.bib-nivel-bt:hover{color:var(--text)}
.bib-nivel-bt[aria-pressed="true"]{text-decoration-style:solid; font-weight:600}
.bib-nivel-total{--dest:#13dcd2} .bib-nivel-editar{--dest:#f5b042} .bib-nivel-leitura{--dest:#a78bfa}
.bib-nivel-bt[aria-pressed="true"]{color:var(--dest); text-decoration-color:var(--dest); text-shadow:0 0 8px color-mix(in srgb, var(--dest) 55%, transparent)}
tr.dest-total{--dest:#13dcd2} tr.dest-editar{--dest:#f5b042} tr.dest-leitura{--dest:#a78bfa}
tr.dest-total td[data-rotulo="Nome"], tr.dest-editar td[data-rotulo="Nome"], tr.dest-leitura td[data-rotulo="Nome"]{
  color:var(--dest); text-decoration:underline; text-decoration-color:var(--dest); text-decoration-thickness:2px; text-underline-offset:5px;
  animation:bib-neon 2.6s ease-in-out infinite}
@keyframes bib-neon{
  0%,100%{text-shadow:0 0 2px color-mix(in srgb, var(--dest) 20%, transparent); text-decoration-color:color-mix(in srgb, var(--dest) 45%, transparent)}
  50%{text-shadow:0 0 9px color-mix(in srgb, var(--dest) 65%, transparent); text-decoration-color:var(--dest)}
}
@media (prefers-reduced-motion:reduce){ tr.dest-total td[data-rotulo="Nome"], tr.dest-editar td[data-rotulo="Nome"], tr.dest-leitura td[data-rotulo="Nome"]{animation:none} }
.bib-sobra{color:#f5b042 !important}
.bib-granular-lista .bib-remover{margin-right:6px}
.bib-granular-ok{color:var(--ok)}
.filtro-lista[hidden]{display:none}
.filtro-lista{margin:8px 0 6px}

/* comparador de e-mails (13/10/2026) */
.ponto-cmp-1, .fatia-cmp-1{color:#13dcd2; background:#13dcd2; fill:#13dcd2}
.ponto-cmp-2, .fatia-cmp-2{color:#f5b042; background:#f5b042; fill:#f5b042}
.ponto-cmp-3, .fatia-cmp-3{color:#C9A6F0; background:#C9A6F0; fill:#C9A6F0}
.ponto-cmp-4, .fatia-cmp-4{color:#EC7B6E; background:#EC7B6E; fill:#EC7B6E}
.pizza-vazia{fill:rgba(255,255,255,.05); stroke:rgba(255,255,255,.18); stroke-width:1.5; stroke-dasharray:4 5}
.painel-comp .pizza-fatia{cursor:pointer; stroke:#0d1c2b; stroke-width:1.5}
.painel-comp .legenda-item.selecionada{background:rgba(19,220,210,.10)}
.comp-form{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.comp-arquivo{cursor:pointer; text-align:center}
.comp-arquivo-nome{font-size:12.5px; color:var(--muted); overflow-wrap:anywhere}
.comp-colar summary{cursor:pointer; font-size:13px; color:#7FE9E2}
.comp-colar textarea{width:100%; box-sizing:border-box; margin-top:6px; font:12px/1.4 Consolas,monospace}
.comp-resultado{margin-top:14px; border-top:1px dashed rgba(255,255,255,.14); padding-top:10px}
.comp-lista{list-style:none; margin:6px 0 10px; padding:0; max-height:380px; overflow:auto}
.comp-lista li{display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; padding:6px 4px; border-bottom:1px solid rgba(255,255,255,.06)}
.comp-lista li.comp-oculto{display:none}
.comp-email{overflow-wrap:anywhere; flex:1 1 200px; font-size:13px}
.comp-nome{flex:1 1 100%; font-size:12px; color:var(--muted)}
.comp-nome:empty{display:none}
.comp-lista li[hidden]{display:none}
.comp-colar textarea{background:rgba(0,0,0,.28); color:var(--text); border:1px solid rgba(255,255,255,.14); border-radius:8px; padding:8px}
.comp-colar textarea::placeholder{color:var(--muted)}

/* comparador: card largo com resultado + alerta dos desligados (13/10/2026) */
.grade-cartoes .painel-licencas.painel-comp{flex:0 1 420px}
.grade-cartoes .painel-licencas.painel-comp.comp-largo{flex:1 1 760px; max-width:min(820px, 100%)}
.comp-alerta:empty{display:none}
.comp-alerta{border-radius:10px; padding:10px 12px; margin:0 0 10px; font-size:13.5px}
.comp-alerta.perigo{background:rgba(236,123,110,.12); border:1px solid rgba(236,123,110,.55)}
.comp-alerta.tudo-certo{background:rgba(73,200,143,.10); border:1px solid rgba(73,200,143,.5); color:var(--ok)}
.comp-alerta-titulo{margin:0 0 4px; font-weight:600}
.comp-alerta.perigo .comp-alerta-titulo{color:#F59E8B}
.comp-alerta-aviso{margin:6px 0 0; color:#F5B042}
.comp-alerta-lista{margin:4px 0 0 18px; padding:0; overflow-wrap:anywhere}
.comp-lista li[data-st="inexistente"]{background:rgba(236,123,110,.10); border-left:3px solid #EC7B6E}
.comp-lista li[data-st="bloqueada"]{background:rgba(245,176,66,.08); border-left:3px solid #F5B042}
.comp-largo .comp-lista{max-height:520px}
.comp-largo .comp-lista li{flex-wrap:nowrap}
.comp-largo .comp-email{flex:1 1 280px}
.comp-largo .comp-nome{flex:1 1 220px}
@media (max-width:640px){ .comp-largo .comp-lista li{flex-wrap:wrap} .comp-largo .comp-nome{flex:1 1 100%} }
.comp-cab{cursor:pointer; user-select:none}
.comp-cab .seta-secao{vertical-align:middle}
.painel-comp[data-recolhido] .comp-corpo{display:none}
.grade-cartoes .painel-licencas.painel-comp.comp-largo[data-recolhido]{flex:0 1 420px; max-width:420px}
/* tela de Usuarios mais larga (13/10/2026, Airton: "ficou desconfigurado, deixe mais aberto"): com cada card novo a coluna Acesso
   cresce e empurrava as Acoes para a rolagem lateral. So esta pagina passa dos 1180 px. */
.wrap:has(.hero.larga #contas){max-width:min(1680px, 100%)}
.wrap:has(.hero.larga #contas) td.acoes{min-width:230px}
.wrap:has(.hero.larga #contas) .lista-acessos{margin:0; padding-left:0}

/* "Auditoria" chamativa enquanto a consulta roda: o NOME oscila (alem do farol) - 13/10/2026 */
.aud-chamativa{animation:aud-nome-oscila 1.8s ease-in-out infinite; color:#F5C46B}
@keyframes aud-nome-oscila{
  0%,100%{text-shadow:0 0 2px rgba(245,158,11,.25); opacity:.82}
  50%{text-shadow:0 0 10px rgba(245,158,11,.85); opacity:1}
}
@media (prefers-reduced-motion:reduce){ .aud-chamativa{animation:none} }

/* ---------- SERVIDOR 252 (13/10/2026): dar acesso e andamento dos pedidos ---------- */
.painel-detalhe-gu .s252-dar{margin:2px 0 12px}
.s252-dar-linha{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.s252-dar-linha select{flex:1 1 220px; min-width:0; max-width:100%}
.s252-dar-linha select + select{flex:0 1 150px}
.s252-ops{list-style:none; margin:0 0 10px; padding:0; display:grid; gap:6px}
.s252-ops:empty{display:none}
.s252-op{font-size:13px; padding:8px 10px; border-radius:8px; background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.35); overflow-wrap:anywhere}
.s252-op.s252-ok{background:var(--ok-bg); border-color:var(--ok)}
.s252-op.s252-erro{color:var(--aviso); border-color:var(--aviso)}
.s252-nao{color:var(--muted); font-size:12px}
.s252-tirar{padding:4px 12px; min-height:0}
@media (min-width:1200px){
  .grade-cartoes[data-aberto="s252"]{
    width:min(1320px, calc(100vw - 112px));
    margin-left:calc(50% - min(660px, 50vw - 56px));
    flex-wrap:nowrap;
  }
  .grade-cartoes[data-aberto="s252"] .painel-gu{flex:0 0 310px}
  .grade-cartoes[data-aberto="s252"] .painel-gu .pizza{width:180px; height:180px}
  .grade-cartoes[data-aberto="s252"] .painel-detalhe-gu{flex:1 1 0; min-width:0}
}
@media (max-width:640px){
  .s252-dar-linha select, .s252-dar-linha select + select, .s252-dar-linha .botao{flex:1 1 100%}
}

/* ---------- nivel por pasta no acesso granular + trocar na hora (13/10/2026) ---------- */
.nv-chip{display:inline-block; padding:1px 9px; border-radius:999px; font-size:12px; border:1px solid currentColor; white-space:nowrap}
.nv-total{color:var(--ok)}
.nv-editar{color:#7CC4FF}
.nv-colab{color:#F5C46B}
.nv-leitura{color:var(--muted)}
.nv-sem{color:var(--aviso)}
.bib-gran-resumo{display:flex; flex-wrap:wrap; gap:6px}
.bib-gran-sem{margin-top:14px; color:var(--aviso)}
.bib-gran-nivel{display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center}
.bib-gran-nivel select{min-width:0; max-width:100%}
@media (max-width:640px){ .bib-gran-nivel{width:100%} .bib-gran-nivel select{flex:1 1 100%} }
.bib-gran-aviso-mail{font-size:12px; color:var(--muted); white-space:nowrap}
.bib-gran-ok{color:var(--ok); font-size:13px}
.bib-teams{text-decoration:none; display:inline-block}

/* ---------- SERVIDOR 252: criar usuario, excluir e remover da lista (13/10/2026) ---------- */
.s252-criar{margin:2px 0 12px; border:1px dashed rgba(255,255,255,.18); border-radius:10px; padding:8px 12px}
.s252-criar summary{cursor:pointer; color:var(--turq)}
.s252-criar .s252-dar-linha input{flex:1 1 200px; min-width:0}
.s252-senha{margin-top:8px; padding:10px 12px; border-radius:8px; background:var(--ok-bg); border:1px solid var(--ok)}
.s252-senha code{font-size:17px; letter-spacing:.06em; user-select:all; overflow-wrap:anywhere}
.s252-acoes{display:flex; flex-wrap:wrap; gap:6px}
@media (max-width:640px){ .s252-criar .s252-dar-linha input, .s252-criar .s252-dar-linha .botao{flex:1 1 100%} }
.s252-passo2{margin-top:10px; padding:10px 12px; border-radius:8px; border:1px dashed var(--turq-dim)}
.s252-passo2 p{margin:0 0 8px}
.s252-atualizar{margin:2px 0 8px}
.s252-op .botao.mini{padding:2px 10px; min-height:0; margin-left:6px}
/* Impressoras / KTI (15/10/2026): botoes das telas "Mais da KTI" abaixo da pizza */
.kti-telas{margin-top:18px}
.kti-telas-botoes{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.kti-telas-botoes .botao{margin:0; flex:1 1 auto; text-align:center}
/* no celular cada impressora vira um bloco; sem o titulo da coluna o "0%" ou o "Ok" nao diz o que e */
@media (max-width:640px){
  .com-rotulos .detalhe-tabela td:not(:first-child)::before{
    content:attr(data-rotulo); display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--muted); opacity:.8; margin:0 0 1px}
  .com-rotulos .detalhe-tabela td:empty{display:none}
}
/* Replicador de permissoes (15/10/2026) */
.copiar-perm{margin-top:16px; padding-top:12px; border-top:1px dashed var(--turq-dim)}
.copiar-perm-titulo{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.copiar-perm-linha{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center}
.copiar-perm-linha select{max-width:100%; min-width:220px}
.copiar-perm-previa{margin-top:10px; font-size:14px}
.copiar-perm-previa p{margin:4px 0}
.copiar-perm-previa .perde{color:var(--erro)}
.copiar-perm-previa .ganha{color:var(--ok)}
@media (max-width:640px){ .copiar-perm-linha select, .copiar-perm-linha .mini{flex:1 1 100%} }
.kti-grupo{margin:12px 0 0; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--turq)}
.kti-telas-botoes{margin-top:6px}
/* Impressoras / KTI: filtros das consultas, link do endereco no mapa e formulario de chamado */
.kti-filtros{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; margin:2px 0 12px}
.kti-filtros[hidden]{display:none}
.kti-filtro{display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted)}
.kti-filtro input, .kti-filtro select, .kti-filtro textarea{min-width:130px; max-width:100%}
.kti-largo{width:100%}
.kti-largo textarea{width:100%; box-sizing:border-box}
.link-mapa{color:inherit; text-decoration:underline dotted; text-underline-offset:3px}
.link-mapa:hover{color:var(--turq)}
.kti-chamado{margin-top:16px; padding-top:14px; border-top:1px dashed var(--turq-dim); display:flex; flex-direction:column; gap:10px}
.kti-chamado[hidden]{display:none}
.kti-chamado-titulo{margin:0; font-size:15px}
.kti-opcoes{border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px 16px}
.kti-opcoes legend{font-size:12px; color:var(--muted); padding:0; margin-bottom:4px}
.kti-chamado-botoes{display:flex; flex-wrap:wrap; gap:8px}
.dica.ok{color:var(--ok)}
.dica.erro{color:var(--erro)}
@media (max-width:640px){ .kti-filtro, .kti-filtro input, .kti-filtro select{width:100%} .kti-filtros .mini{flex:1 1 100%} }
.copiar-perm-nota{margin:8px 0 0; font-size:12px; color:var(--muted)}
.copiar-perm-ok{margin:8px 0 0; padding:8px 10px; border-radius:8px; border:1px solid var(--ok); color:var(--ok); font-size:14px}
/* Comparativo KTI x Monday: linha de divisao antes das colunas da KTI; e o card das impressoras se estende mais para a direita */
.tabela-gu th.sep-kti, .tabela-gu td.sep-kti{border-left:2px solid var(--turq-dim)}
@media (max-width:640px){ .tabela-gu td.sep-kti{border-left:0} }
@media (min-width:1200px){
  .grade-cartoes[data-aberto="gu"]:has(.com-rotulos){
    width:min(1760px, calc(100vw - 40px));
    margin-left:calc(50% - min(880px, 50vw - 20px));
  }
}
/* Conferencia da planilha KTI x Monday */
.kti-conf-acoes{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:10px 0}
.kti-conf-acoes input[type=file]{max-width:100%}
.kti-baixar{margin:2px 0 10px}
.kti-baixar[hidden]{display:none}
.tabela-gu td.fonte-monday{background:rgba(120,170,230,.18)}
.tabela-gu td.fonte-kti{background:rgba(120,200,130,.18)}
@media (max-width:640px){ .kti-conf-acoes .botao, .kti-conf-acoes input{width:100%} }