/* GERADO por app/ferramentas/gera_legado_config.mjs a partir do publico/index.html. NAO EDITE A MAO:
   o app/testes/casca_config.js refaz este arquivo e reprova se divergir. Usuarios e Notificacoes
   da Configuracao do Portal da casca nova (Inicio, 10/10/2026); ver o gerador para o porque. */
@layer legado {
  /* ---------- Central de notificações (admin) ---------- */
  /* As abas da Central são g-abas desde a etapa 8 (comum/componentes/abas.css);
     aqui fica só o espaço em volta delas (a moldura .na-abas). */
  .na-abas{margin:22px 0 20px}

  .na-toolbar{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px}
  .na-toolbar-info{font-size:var(--fs-apoio); color:var(--ink-3)}
  /* o filtro por canal vem antes do contador, que muda de largura com ele:
     preso ao texto, o chip andava debaixo do mouse entre um clique e outro */
  .na-toolbar > [role="group"]{order:-1}
  .na-toolbar > .na-toolbar-info{margin-right:auto}

  .na-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px}
  .na-card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 16px 12px; display:flex; flex-direction:column; gap:11px}
  .na-card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
  .na-quem{display:flex; align-items:center; gap:10px; min-width:0}
  .na-avatares{display:flex; flex:0 0 auto}
  .na-avatar{width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:var(--fs-apoio); font-weight:600; color:#fff; border:2px solid var(--surface); margin-left:-8px}
  .na-avatar:first-child{margin-left:0}
  .na-nome{font-weight:600; font-size:var(--fs-texto); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .na-meta{font-size:var(--fs-apoio); color:var(--ink-3); margin-top:2px; display:flex; gap:6px; flex-wrap:wrap}
  .na-badge{font-size:var(--fs-apoio); font-weight:600; padding:2px 7px; border-radius:5px}
  .na-badge-papel{background:var(--marca-suave); color:var(--marca)}
  .na-badge-grupo{background:var(--surface-2); color:var(--ink-3); border:1px solid var(--line)}
  .na-acoes{display:flex; align-items:center; gap:6px; flex:0 0 auto}

  .na-regras{display:flex; flex-direction:column; gap:5px}
  .na-regra{display:flex; align-items:center; gap:8px; padding:var(--esp-1) 9px; border-radius:8px; background:var(--surface-2); font-size:var(--fs-texto)}
  .na-regra-nome{flex:1; min-width:0; font-weight:600; display:flex; flex-wrap:wrap; align-items:baseline; column-gap:6px}
  .na-regra-cond{font-size:var(--fs-apoio); font-family:var(--ff-dado); font-weight:400; color:var(--marca); background:var(--marca-suave); padding:1px 6px; border-radius:5px; white-space:nowrap}
  .na-regra-canal{font-size:var(--fs-apoio); font-weight:400; color:var(--ink-3)}
  .na-regra-off .na-regra-nome{color:var(--ink-3)}
  .na-regra-pausa{font-size:var(--fs-apoio); font-weight:600; color:var(--today); background:var(--today-soft); padding:1px 7px; border-radius:999px}

  .na-catalogo{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface)}
  .na-catalogo-linha{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); font-size:var(--fs-texto)}
  .na-catalogo-linha:last-child{border-bottom:0}
  .na-catalogo-desc{font-size:var(--fs-apoio); color:var(--ink-3); margin-top:2px}
  .na-catalogo-tag{font-size:var(--fs-apoio); color:var(--ink-3); border:1px solid var(--line); padding:3px 9px; border-radius:999px; white-space:nowrap}
  .na-catalogo-persistente{
    appearance:none; font:inherit; cursor:pointer; white-space:nowrap;
    font-family:var(--ff-titulo); font-size:var(--fs-apoio); font-weight:600; padding:3px 9px; border-radius:999px;
    border:1px solid var(--line); background:var(--surface-2); color:var(--ink-3);
  }
  .na-catalogo-persistente.ativo{background:var(--today-soft); color:var(--today); border-color:transparent}
  .na-catalogo-canal{
    appearance:none; font:inherit; cursor:pointer; white-space:nowrap;
    font-family:var(--ff-titulo); font-size:var(--fs-apoio); font-weight:600; padding:3px 9px; border-radius:999px;
    border:1px dashed var(--line); background:none; color:var(--ink-3);
  }
  .na-catalogo-canal.ativo{background:var(--passo-soft); color:var(--passo); border:1px solid transparent}   /* filtro ligado é passo, não marca (etapa 6; vai ao g-filtro na 8) */
  .na-catalogo-acoes{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}

  .na-contatos-intro{font-size:var(--fs-texto); color:var(--ink-3); margin:0 0 12px; max-width:720px}
  .na-contato-linha{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 16px; border-bottom:1px solid var(--line); font-size:var(--fs-texto)}
  .na-contato-linha:last-child{border-bottom:0}
  .na-contato-email{font-size:var(--fs-apoio); color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .na-contato-email.falta{color:var(--today)}
  .na-contato-form{display:flex; gap:6px; align-items:center}
  .na-contato-form input{width:160px; font:inherit; font-size:var(--fs-texto); height:max(var(--ctl-h-p), var(--alvo-min)); padding:0 8px; border-radius:7px; border:1px solid var(--line-controle); background:var(--surface-2); color:var(--ink)}
  .na-contato-ok{font-size:var(--fs-apoio); color:var(--ink-3); min-width:52px}
  @media (max-width:640px){
    .na-contato-linha{grid-template-columns:1fr}
    .na-contato-form input{flex:1; width:auto}
  }

  .na-campo{margin-bottom:14px}
  .na-campo label{display:block; font-size:var(--fs-apoio); font-weight:600; margin-bottom:6px}
  .na-campo select, .na-campo input[type="text"]{width:100%; font:inherit; font-size:var(--fs-texto); padding:9px 10px; border-radius:8px; border:1px solid var(--line-controle); background:var(--surface-2); color:var(--ink)}
  .na-dica{font-size:var(--fs-apoio); color:var(--ink-3); margin-top:5px}
  .na-dica-sistema{margin:0 0 14px}
  .na-pessoas{display:flex; flex-wrap:wrap; gap:6px; max-height:150px; overflow-y:auto; padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2)}
  .na-pessoa-chip{display:flex; align-items:center; gap:5px; font-size:var(--fs-texto); background:var(--surface); border:1px solid var(--line); padding:4px 9px 4px 6px; border-radius:999px; cursor:pointer}
  .na-pessoa-chip input{margin:0}
  .na-vazio{font-size:var(--fs-texto); color:var(--ink-3); padding:26px 4px; text-align:center; border:1px dashed var(--line); border-radius:10px}

  /* Aba Avisos no Cliq. Desenho de 02/10/2026: os dois avisos lado a lado,
     cada um dizendo para quem vai, por onde e o que faz no teste; o modo é
     um segmentado e toda troca pede confirmação no próprio cartão. Os canais
     viraram lista e editor, e o teste foi para uma área separada (pedido do
     Alex: o teste é coisa de admin e Gestão, não do cartão principal). */
  #view-notificacoesadmin.janela{max-width:1320px}
  .na-cliq-intro{font-size:var(--fs-texto); margin:0 0 18px; max-width:860px; line-height:1.5}
  .na-cliq-titulo{font-family:var(--ff-titulo); font-size:var(--fs-valor); font-weight:600; margin:30px 0 4px}
  .na-cliq-titulo:first-child{margin-top:4px}
  .na-cliq-sub{font-size:var(--fs-texto); color:var(--ink-3); margin:0 0 12px; max-width:860px; line-height:1.45}
  .na-cliq-alerta{font-size:var(--fs-texto); color:var(--today); background:var(--today-soft); padding:7px 11px; border-radius:8px; margin:0 0 12px; max-width:860px}
  .na-cliq-onde{font-size:var(--fs-apoio); color:var(--ink-3); margin-left:auto; padding-left:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .na-cliq-filtro{width:100%; font:inherit; font-size:var(--fs-texto); height:36px; padding:0 10px; border-radius:8px; border:1px solid var(--line-controle); background:var(--surface-2); color:var(--ink); margin-bottom:6px; box-sizing:border-box}
  .na-cliq-ok{font-size:var(--fs-apoio); color:var(--ink-3)}
  .na-cliq-ok.erro{color:var(--late)}
  .na-cliq-acoes{display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:14px}

  .na-avisos{display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:16px}
  /* cada aviso ocupa três linhas da grade (corpo, modo, pé) num subgrid: o
     Modo fica na mesma altura lado a lado, e a faixa aberta num cartão só
     cresce o pé (etapa 8; antes o Modo do vizinho descia ~150 px) */
  .na-aviso{border:1px solid var(--line); border-left:4px solid var(--line); border-radius:12px; background:var(--surface); padding:18px 20px; display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0}
  /* com as duas classes: a de base (.na-aviso-desde, mais abaixo) vencia a cor */
  .na-aviso-desde.na-aviso-velho{color:var(--today); font-weight:600}
  .na-aviso[data-estado="ligado"]{border-left-color:var(--ok)}
  .na-aviso[data-estado="teste"]{border-left-color:var(--today)}
  .na-aviso-topo{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
  .na-selo{font-size:var(--fs-apoio); font-weight:600; padding:3px 10px; border-radius:999px; white-space:nowrap}
  .na-selo-ligado{color:var(--ok); background:var(--ok-soft)}
  .na-selo-teste{color:var(--today); background:var(--today-soft)}
  .na-selo-desligado{color:var(--ink-3); background:var(--surface-2)}
  .na-selo-falta{color:var(--late); background:var(--late-soft)}
  .na-selo-inativo{color:var(--ink-3); background:var(--surface-2)}
  .na-aviso-desde{font-size:var(--fs-apoio); color:var(--ink-3)}
  .na-aviso-nome{font-family:var(--ff-titulo); font-size:var(--fs-valor); font-weight:600; margin:10px 0 4px}
  .na-aviso-frase{font-size:var(--fs-texto); margin:0 0 14px; line-height:1.45}
  .na-aviso-dl{display:grid; grid-template-columns:88px minmax(0,1fr); gap:7px 12px; margin:0 0 16px; font-size:var(--fs-texto); line-height:1.4}
  .na-aviso-dl dt{font-size:var(--fs-apoio); font-weight:400; color:var(--ink-3); padding-top:1px}
  .na-aviso-dl dd{margin:0}
  /* O modo fica no pé, na mesma altura nos dois cartões. */
  .na-aviso-rot{font-size:var(--fs-apoio); font-weight:600; margin:0 0 6px}

  .na-seg-legenda{font-size:var(--fs-apoio); color:var(--ink-3); margin-top:7px}

  /* A faixa de/para: o segmentado é a intenção, só o botão da faixa grava. */
  .na-faixa{border:1px solid var(--line); background:var(--surface-2); border-radius:10px; padding:12px 14px; margin-top:14px; font-size:var(--fs-texto); line-height:var(--lh-texto)}
  .na-faixa[data-para="ligado"]{border-color:var(--ok); background:var(--ok-soft)}
  .na-faixa[data-para="teste"]{border-color:var(--today); background:var(--today-soft)}
  .na-faixa[data-para="desligado"]{border-color:var(--late); background:var(--late-soft)}
  .na-faixa-tit{font-weight:600; margin-bottom:4px}
  .na-faixa p{margin:0 0 4px}
  .na-faixa-acoes{display:flex; justify-content:flex-end; gap:8px; margin-top:10px}

  /* Canais da OP nova: lista à esquerda, editor do escolhido à direita. */
  .na-canais-grade{display:grid; grid-template-columns:280px minmax(0,1fr); gap:20px; align-items:start}
  .na-canais-lista{display:flex; flex-direction:column; gap:6px}
  .na-canal-item{appearance:none; font:inherit; color:var(--ink); text-align:left; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; align-items:center; min-height:64px; padding:10px 12px; border-radius:10px; border:1px solid var(--line); border-left:3px solid transparent; background:var(--surface)}
  .na-canal-item:hover{border-color:var(--marca)}
  .na-canal-item[aria-current="true"]{border-left-color:var(--marca); background:var(--marca-suave)}
  .na-canal-item-nome{font-size:var(--fs-texto); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .na-canal-item-cod{font-size:var(--fs-apoio); color:var(--ink-3); font-family:var(--ff-dado); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .na-canal-item-resumo{grid-column:1 / -1; font-size:var(--fs-apoio); color:var(--ink-3)}
  .na-canal-item .na-selo{grid-row:1 / span 2; grid-column:2}
  .na-nao-salvo{font-size:var(--fs-apoio); color:var(--today); font-weight:600}
  .na-nao-salvo::before{content:"● "}
  .na-canal-editor{border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:18px 20px}
  .na-canal-editor > form[hidden]{display:none}
  .na-canal-cab{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px}
  .na-canal-nome{font-family:var(--ff-titulo); font-size:var(--fs-valor); font-weight:600}
  .na-canal-cab input[name="nome"]{font:inherit; font-size:var(--fs-valor); font-weight:600; padding:8px 10px; border-radius:8px; border:1px solid var(--line-controle); background:var(--surface-2); color:var(--ink); width:280px; max-width:100%}
  .na-interruptor{display:flex; align-items:center; gap:8px; font-size:var(--fs-texto); font-weight:600; cursor:pointer}
  .na-interruptor input{width:18px; height:18px; margin:0; accent-color:var(--ok)}
  .na-campo-cliq{margin-bottom:16px}
  .na-campo-cliq label{display:block; font-size:var(--fs-apoio); font-weight:600; margin-bottom:6px}
  .na-campo-cliq input{font:inherit; font-size:var(--fs-texto); font-family:var(--ff-dado); padding:8px 10px; border-radius:8px; border:1px solid var(--line-controle); background:var(--surface-2); color:var(--ink); width:280px; max-width:100%}
  .na-listas{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
  /* "Como avisa": no canal ou mensagem direta (migração 088). */
  .na-envio{margin-bottom:16px}
  .na-envio label{display:flex; align-items:center; gap:8px; font-size:var(--fs-texto); margin-top:6px; cursor:pointer}
  .na-envio input{width:auto; margin:0}
  .na-lista-sub{margin-top:14px}
  .na-lista-col{min-width:0}
  .na-lista-col > label, .na-lista-tit{display:block; font-size:var(--fs-apoio); font-weight:600; margin-bottom:4px}
  .na-lista-dica{font-size:var(--fs-apoio); color:var(--ink-3); margin:0 0 8px; line-height:1.4}
  .na-lista{border:1px solid var(--line); border-radius:8px; background:var(--surface-2); max-height:min(440px, calc(100vh - 380px)); min-height:120px; overflow-y:auto}
  .na-item{display:flex; align-items:center; gap:8px; min-height:34px; padding:0 10px; font-size:var(--fs-texto); cursor:pointer; border-bottom:1px solid var(--line)}
  .na-item:last-child{border-bottom:0}
  .na-item:hover{background:var(--surface)}
  .na-item input{margin:0; flex:0 0 auto; accent-color:var(--marca)}
  .na-item-txt{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .na-item.sem-email .na-item-txt{color:var(--ink-3); text-decoration:underline dashed; text-underline-offset:3px}
  .na-item[hidden]{display:none}
  .na-lista-sep{font-size:var(--fs-apoio); font-weight:600; color:var(--ink-3); padding:8px 10px 4px; border-bottom:1px solid var(--line)}
  @media (pointer:coarse){ .na-item{min-height:40px} }
  .na-lista-col textarea, .na-lista-col input[name="tarefas"], .na-lista-col input[name="modelos"]{width:100%; box-sizing:border-box; font:inherit; font-size:var(--fs-texto); padding:8px 10px; border-radius:8px; border:1px solid var(--line-controle); background:var(--surface-2); color:var(--ink)}

  /* Área de teste: separada, fechada por padrão. */
  .na-teste-area{margin-top:30px; border:1px dashed var(--line); border-radius:12px; background:var(--surface)}
  .na-teste-area > summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; padding:14px 18px; font-family:var(--ff-titulo); font-weight:600; font-size:var(--fs-valor)}
  .na-teste-area > summary::-webkit-details-marker{display:none}
  .na-teste-area > summary::before{content:"›"; display:inline-block; width:12px; color:var(--ink-3); transition:transform .15s}
  .na-teste-area[open] > summary::before{transform:rotate(90deg)}
  .na-teste-area > summary span{font-family:var(--ff-texto); font-size:var(--fs-apoio); font-weight:600; color:var(--ink-3)}
  .na-teste-corpo{padding:0 18px 18px}
  .na-teste-grade{display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:16px}
  .na-teste-card{border:1px solid var(--line); border-radius:12px; background:var(--surface-2); padding:16px 18px}
  .na-teste-card .na-lista{background:var(--surface)}
  .na-teste-card .na-canal-nome{margin-bottom:4px}

  @media (max-width:900px){
    .na-canais-grade{grid-template-columns:minmax(0,1fr)}
    .na-canais-lista{flex-direction:row; flex-wrap:wrap}
    .na-canal-item{min-height:0; flex:1 1 200px}
  }
  @media (max-width:760px){
    .na-avisos, .na-teste-grade{grid-template-columns:minmax(0,1fr)}
    .na-listas{grid-template-columns:minmax(0,1fr)}
    .na-lista{max-height:50vh}
    .na-aviso{padding:16px}
  }

  /* ---------- Usuários (Configuração do Portal) ----------
     Desenho de 02/10/2026 (docs/PLANO_USUARIOS_E_PESSOAS.md): lista com
     ficha na mesma página; selo só quando pede ação; canais com letra e
     ponto, nunca só cor; toda ação perigosa abre a faixa de/para com o foco
     em Voltar, no padrão da Central. */
  /* A ficha fica em 1100 px; a lista é o modelo Lista do comum (g-pg, etapa 3):
     enquanto ela aparece, a seção não tem a margem nem a largura da .janela. */
  /* Com o menu de admin a lateral passa da janela em 1366x657 (691 px, D3 da
     auditoria de 03/10) e faria a página rolar por baixo da Lista. Enquanto a
     Lista está aberta, a lateral rola sozinha. A casca inteira (100dvh e
     lateral que rola em toda tela) é a etapa 9; aqui só onde a regra de não
     rolar já vale. A section entra no seletor: a #us-area-lista não fica
     hidden quando se sai de Usuários (quem some é a section), e sem ela a
     regra valia no portal inteiro (revisão do frontend, 07/10/2026). */
  .us-tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin:22px 0 16px}
  .us-tab{appearance:none; border:0; background:none; cursor:pointer; font:inherit; font-family:var(--ff-titulo); font-size:var(--fs-texto); font-weight:600; color:var(--ink-3); padding:9px 14px; border-bottom:2px solid transparent}
  .us-tab:hover{color:var(--ink)}
  .us-tab[aria-selected="true"]{color:var(--marca); border-color:var(--marca)}
  .us-tab span{font-weight:500; color:var(--ink-3); margin-left:4px}
  .us-origens-rot, .us-plano th{font-family:var(--ff-titulo); font-size:var(--fs-rotulo); font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3)}
  .us-av{width:32px; height:32px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; font-size:var(--fs-apoio); font-weight:600; color:#fff; object-fit:cover}
  .us-av.grande{width:56px; height:56px; font-size:var(--fs-titulo)}
  .us-nome{font-size:var(--fs-texto); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .us-sub{font-size:var(--fs-apoio); color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .us-dois{min-width:0}
  .us-dois > span{display:block}
  .us-dois > span + span{margin-top:3px}
  .us-selo{display:inline-block; font-size:var(--fs-apoio); font-weight:600; padding:2px 9px; border-radius:999px; white-space:nowrap}
  .us-selo-perigo{color:var(--late); background:var(--late-soft)}
  .us-selo-wip{color:var(--today); background:var(--today-soft)}
  .us-selo-neutro{color:var(--ink-3); background:var(--surface-2)}
  .us-legenda, .us-nota{font-size:var(--fs-apoio); color:var(--ink-3); margin-top:10px}
  .us-ficha-nav{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
  .us-ficha-nav .us-passo{display:flex; gap:6px; align-items:center; font-size:var(--fs-apoio); color:var(--ink-3)}
  .us-ficha-topo{display:flex; gap:16px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-top:14px}
  .us-ficha-topo h1{font-size:var(--fs-destaque)}
  .us-ficha-topo .us-sub{white-space:normal}
  .us-bloco{background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden}
  .us-dl{display:grid; grid-template-columns:200px minmax(0,1fr); margin:0}
  .us-dl dt, .us-dl dd{margin:0; padding:11px 16px; border-bottom:1px solid var(--line); font-size:var(--fs-texto)}
  .us-dl dt{color:var(--ink-3); font-weight:400; font-size:var(--fs-apoio)}
  .us-dl dt:last-of-type, .us-dl dd:last-of-type{border-bottom:0}
  .us-vazio{color:var(--ink-3)}
  .us-acao{display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:6px 16px; align-items:center; padding:13px 16px; border-bottom:1px solid var(--line); font-size:var(--fs-texto)}
  .us-acao:last-child{border-bottom:0}
  .us-acao-rot{font-weight:600; font-size:var(--fs-texto)}
  .us-acao-txt .us-sub{white-space:normal}
  .us-acao .na-faixa{grid-column:1 / -1; margin-top:4px}
  /* campo dentro da faixa de confirmação (fundo tingido de estado): borda
     --ink-3, porque o --line-controle dá 2,5 a 2,8 sobre o âmbar e o vinho
     do escuro; --ink-3 dá 4,3 a 5,8 nos dois temas (cor_asserta, etapa 4) */
  .us-acao .na-faixa input[type="password"]{font:inherit; font-size:var(--fs-texto); height:36px; padding:0 10px; border-radius:8px; border:1px solid var(--ink-3); background:var(--surface); color:var(--ink); width:min(260px,100%)}
  .us-motivo{font-size:var(--fs-apoio); color:var(--ink-3); padding:12px 16px; border-bottom:1px solid var(--line); background:var(--surface-2)}
  .us-papel{display:inline-block; font-size:var(--fs-apoio); font-weight:600; padding:3px 10px; border-radius:999px; background:var(--marca-suave); color:var(--marca); margin:0 4px 4px 0}
  .us-senha-caixa{grid-column:1 / -1; border:2px solid var(--today); background:var(--today-soft); border-radius:12px; padding:16px 18px}
  .us-senha-caixa .us-senha{font-family:var(--ff-dado); font-size:var(--fs-destaque); font-weight:600; letter-spacing:.08em; user-select:all; margin:8px 0}
  .us-senha-caixa p{margin:4px 0; font-size:var(--fs-texto)}
  .us-hist{list-style:none; margin:0; padding:0}
  .us-hist li{padding:9px 16px; border-bottom:1px solid var(--line); font-size:var(--fs-texto); display:flex; gap:12px}
  .us-hist li:last-child{border-bottom:0}
  .us-hist time{color:var(--ink-3); white-space:nowrap; flex:0 0 auto; min-width:118px}
  .us-titulo{font-family:var(--ff-titulo); font-size:var(--fs-valor); font-weight:600; margin:24px 0 8px}
  .us-msg, .us-plano{font-size:var(--fs-texto)}
  .us-msg{margin-top:8px}
  .us-msg.erro{color:var(--late)}
  /* Copiar acessos e Novo terminal (05/10/2026): um modal só, médio (720)
     na cópia, para a prévia caber sem rolar. Verde cheio conclui; laranja
     troca credencial. Desde a etapa 8 é g-dialogo (o tamanho vem do JS). */
  /* tela densa (admin): o corpo do diálogo no 13 da interface, não no 14 de
     leitura que ele herdava (a prévia somava 14, 13, 12 e 10,5; etapa 8) */
  .us-modal{font-size:var(--fs-texto)}
  .us-modal input[type="search"], .us-modal input[type="text"], .us-modal input[type="password"]{width:100%; font:inherit; height:38px; padding:0 10px; border-radius:8px; border:1px solid var(--line-controle); background:var(--surface-2); color:var(--ink)}
  .us-modal .us-prefixo{display:flex; align-items:center; border:1px solid var(--line-controle); border-radius:8px; background:var(--surface-2); overflow:hidden}
  .us-modal .us-prefixo span{padding:0 4px 0 10px; color:var(--ink-3)}
  .us-modal .us-prefixo input{border:0; padding-left:0}
  .us-origens{border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-top:8px}
  .us-origens-rot{margin:12px 0 4px}
  .us-origem{appearance:none; font:inherit; color:inherit; text-align:left; cursor:pointer; width:100%; border:0; border-bottom:1px solid var(--line); background:none; display:flex; align-items:center; gap:10px; padding:8px 12px}
  .us-origem:last-child{border-bottom:0}
  .us-origem:hover{background:var(--surface-2)}
  .us-de{display:flex; align-items:center; gap:10px; margin-bottom:10px}
  .us-plano{width:100%; border-collapse:collapse; margin:6px 0 8px}
  .us-plano th{text-align:left; padding:6px 8px; border-bottom:1px solid var(--line)}
  .us-plano td{padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top}
  .us-plano td:first-child{font-weight:600; white-space:nowrap; width:1%}
  .us-plano td:last-child{white-space:nowrap; width:1%; color:var(--ink-3); font-weight:600}
  .us-plano .us-tudo{color:var(--today); font-weight:600}
  .us-nota{margin:2px 0; line-height:1.4}
  .us-modal .us-plano td{padding:5px 8px}
  .us-escolha{display:flex; gap:14px; flex-wrap:wrap; margin:6px 0}
  .us-botoes{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
  .us-escolha label{font-weight:500; display:flex; gap:6px; align-items:center}
  .us-quadros{display:flex; gap:6px; flex-wrap:wrap}
  /* cadastro: editar na ficha e Novo usuario (09/10/2026), duas colunas */
  .us-ed{padding:16px}
  .us-ed-grade{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px; margin-bottom:8px}
  .us-ed-campo{display:flex; flex-direction:column; gap:5px; min-width:0; margin-bottom:6px}
  .us-ed-grade .us-ed-campo{margin-bottom:0}
  .us-ed-campo.largo{grid-column:1 / -1}
  .us-ed-campo label{font-size:var(--fs-apoio); font-weight:600}
  .us-ed-campo input{width:100%; font:inherit; font-size:var(--fs-texto); height:38px; padding:0 10px; border-radius:8px; border:1px solid var(--line-controle); background:var(--surface-2); color:var(--ink)}
  .us-ed-campo input:focus-visible{outline:2px solid var(--focus, currentColor); outline-offset:1px}
  .us-ed .us-botoes{margin-top:10px}
  .us-ed-topo{margin-bottom:10px}
  .us-nota-colada{margin:0 0 6px}
  .us-sub-quebra{white-space:normal}
  .us-motivo-atencao{color:var(--today)}
  .us-campo-senha{font:inherit; height:36px; padding:0 10px; border-radius:8px; border:1px solid var(--ink-3); background:var(--surface); color:var(--ink); width:min(260px,100%)}
  .na-faixa.us-faixa-topo{margin-top:0}
  /* o erro da cópia desce para a linha de baixo do rodapé, na largura toda */
  .us-modal footer > .us-msg{flex-basis:100%; order:3; margin:0}
  .us-digitada-modal{margin:6px 0 0}
  .us-senha-caixa.us-senha-modal{margin:8px 0}
  @media (max-width:760px){
    .us-dl{grid-template-columns:minmax(0,1fr)}
    .us-dl dt{border-bottom:0; padding-bottom:0}
    .us-ed-grade{grid-template-columns:minmax(0,1fr)}
    .us-acao{grid-template-columns:minmax(0,1fr)}
    .us-ficha-topo{align-items:flex-start}
  }

}
@layer tela {
  /* Descartar só aparece com o que descartar. */
  .na-cliq-acoes [data-cliq-descarta]{display:none}
  form[data-mudou] .na-cliq-acoes [data-cliq-descarta], form[data-cliq-novo-form] .na-cliq-acoes [data-cliq-descarta]{display:inline-flex}
  [data-cliq-novo]{align-self:flex-start; margin-top:4px}
  .na-card-pe{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap}
  /* a faixa de/para do modo (g-confirma, etapa 8) desce do segmentado */
  .na-aviso-pe > [data-para]{margin-top:14px}
  /* "Ver exemplo da mensagem" dentro da faixa (08/10/2026): a nota em apoio,
     a escolha da mensagem e o "Para:" antes da bolha g-msg */
  .na-exemplo-nota{font-size:var(--fs-apoio); color:var(--ink-2)}
  .na-exemplo-escolha{margin:0 0 var(--esp-2)}
  .na-exemplo-escolha select{flex:1 1 auto; max-width:100%}
  .na-exemplo-para{margin:0 0 var(--esp-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  /* "Último envio" (09/10/2026): no pé, sob a legenda do Modo, em uma linha;
     o rótulo no cinza do dt, o valor no corpo, a OP na fonte de dado. Aberto,
     o texto que saiu na mesma bolha g-msg do exemplo (designer) */
  .na-ultimo{margin:var(--esp-2) 0 0; font-size:var(--fs-texto); line-height:1.4; min-width:0}
  /* uma linha, com reticências; o resumo do tamanho do texto (clicar no
     vazio do pé não abre, e o anel de foco não pega o pé inteiro) */
  .na-ultimo > summary, p.na-ultimo{max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .na-ultimo > summary{cursor:pointer; width:fit-content}
  .na-ultimo > summary:focus-visible{outline:2px solid var(--foco); outline-offset:2px}
  .na-ultimo > summary .na-ultimo-valor{text-decoration:underline; text-underline-offset:2px}
  .na-ultimo-rot{font-size:var(--fs-apoio); color:var(--ink-3)}
  .na-ultimo-op{font-family:var(--ff-dado)}
  .na-ultimo-corpo{margin-top:var(--esp-2)}
  /* "Mandar este exemplo para mim no Cliq" (09/10/2026): o pé abaixo da
     bolha, à esquerda, longe do Sim da faixa; a bolha encolhe a altura do
     pé, e a faixa aberta não cresce (designer, 09/10/2026). O pé reserva o
     botão e DUAS linhas de retorno, sempre embaixo dele: ao lado, com
     flex-wrap, o retorno descia de linha conforme o texto e a faixa crescia
     21 px depois de mandar; a 1366x657 o Sim saía da tela com o motivo de
     sem e-mail (frontend, 09/10/2026). A bolha desconta pelo --g-msg-teto
     do componente (a catraca recusa .g-msg-* nomeado aqui). */
  .na-exemplo-msg, .na-exemplo-pe{--na-pe-h:calc(var(--alvo-min) + var(--esp-1) + 2 * var(--fs-apoio) * var(--lh-texto))}
  .na-exemplo-msg{--g-msg-teto:calc(40vh - var(--na-pe-h) - var(--esp-2))}
  .na-exemplo-pe{display:flex; flex-direction:column; align-items:flex-start; gap:var(--esp-1); margin-top:var(--esp-2); min-height:var(--na-pe-h)}
  .na-exemplo-pe:empty{display:none}
  /* Campo de digitar no toque: 16 px (--fs-campo), o piso do iOS para não
     dar zoom no foco. Com a base em 14 (etapa 7) o campo que herdava a letra
     do corpo descia de 16 para 14; na camada tela, vence o tamanho do legado
     e do comum (a busca do g-filtros era 13 no celular desde a etapa 3). */
  @media (pointer:coarse){
    input:not([type="checkbox"],[type="radio"],[type="range"],[type="file"]), select, textarea{font-size:var(--fs-campo)}
  }
  /* Usuários: a lista continua à vista e a ficha vira um painel à direita
     (19/10/2026, recomendação do designer-ux-ui). Na camada tela porque o
     display do g-pg (comum) vence o legado, e todo seletor de view/ficha
     leva :not([hidden]) pelo mesmo motivo. Abaixo de 960 px de largura da
     própria tela a lista some e o painel ocupa tudo: é a ficha em página. */
  #view-usuarios{container:usview / inline-size}
  #view-usuarios.us-com-ficha:not([hidden]){display:grid; grid-template-columns:minmax(0,1fr) clamp(520px,42%,680px); align-items:start; gap:0}
  #view-usuarios.us-com-ficha:not([hidden]) > #us-area-ficha:not([hidden]){display:flex; flex-direction:column; min-width:0; box-sizing:border-box; margin:var(--esp-4) clamp(16px,calc(2.5vw - 14px),32px) var(--esp-3) var(--esp-2); background:var(--surface); border:1px solid var(--line); border-radius:var(--raio-g); overflow:clip}
  @media (min-width:821px){
    #view-usuarios:not([hidden]) > #us-area-lista:not([hidden]){height:calc(100dvh - var(--us-topo,0px) - var(--us-pe,0px))}
    #view-usuarios.us-com-ficha:not([hidden]) > #us-area-ficha:not([hidden]){height:calc(100dvh - var(--us-topo,0px) - var(--us-pe,0px) - var(--esp-4) - var(--esp-3))}
  }
  /* o [hidden] da casca (camada legado) perde para o display de .g-btn (comum):
     "Novo terminal" aparecia em Pessoas e "Novo usuário" em Terminais */
  #view-usuarios [hidden], #view-notificacoesadmin [hidden]{display:none}
  /* a lista ao lado do painel fica com ~560 px, e a regra de celular do comum (até 600)
     empilhava o recorte e a busca e deixava o "Novo usuário" sozinho numa linha: de 480
     para cima a faixa de filtros é a de computador (recorte, busca e chips) */
  @container (min-width:480px) and (max-width:599.98px){
    #us-area-lista [role="search"] input[type="search"]{flex:1 1 160px; max-width:none}
    #us-area-lista [role="group"][aria-label="Mostrar"]{display:inline-flex; width:auto}
    #us-area-lista [role="group"][aria-label="Mostrar"] > button{flex:0 0 auto; padding-inline:var(--esp-3)}
  }
  @container usview (max-width:959px){
    #view-usuarios.us-com-ficha > #us-area-lista{display:none}
    #view-usuarios.us-com-ficha > #us-area-ficha:not([hidden]){grid-column:1 / -1; margin-left:clamp(16px,calc(2.5vw - 14px),32px)}
  }
  #us-area-ficha .us-painel-cab{flex:none; padding:var(--esp-3) var(--esp-4) 0}
  #us-area-ficha .us-ficha-nav{margin-bottom:var(--esp-2)}
  #us-area-ficha .us-passo{gap:var(--esp-1)}
  /* o glifo das setas e do × em corpo de título: em --fs-texto sumiam no botão de 28 px */
  #us-area-ficha .us-ficha-nav button{font-size:var(--fs-titulo); line-height:1}
  #us-area-ficha .us-ficha-topo{background:none; border:0; border-radius:0; padding:0; margin:0; gap:12px}
  #us-area-ficha .us-ficha-topo h2{font-family:var(--ff-titulo); font-size:var(--fs-titulo); font-weight:700; line-height:1.2; margin:0}
  #us-area-ficha .us-av.grande{width:40px; height:40px; font-size:var(--fs-texto)}
  #us-area-ficha .us-tabs{margin:var(--esp-2) 0 0}
  #us-area-ficha .us-painel-corpo{flex:1 1 0; min-height:0; overflow-y:auto; padding:var(--esp-2) var(--esp-4) var(--esp-4); scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:var(--line-controle) transparent}
  #us-area-ficha .us-bloco{background:none; border:0; border-radius:0; overflow:visible}
  /* Descartar e Gravar cadastro ficam presos ao fundo do painel: com a janela
     baixa o corpo rola e eles ficavam abaixo da dobra */
  #us-area-ficha .us-ed .us-botoes{position:sticky; bottom:0; z-index:1; background:var(--surface); border-top:1px solid var(--line); margin-top:var(--esp-2); padding:var(--esp-2) 0}
  /* a linha de ação: rótulo e valor à esquerda, o botão à direita, e o apoio
     com largura de leitura (a frase corria de ponta a ponta) */
  #us-area-ficha .us-acao{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"rot botao" "txt botao"; gap:var(--esp-1) var(--esp-3); align-items:start; padding:var(--esp-2) 0}
  #us-area-ficha .us-acao-rot{grid-area:rot; font-size:var(--fs-apoio); font-weight:400; color:var(--ink-3)}
  #us-area-ficha .us-acao-txt{grid-area:txt}
  /* três pesos: rótulo e apoio são legenda; o valor é o dado */
  #us-area-ficha .us-acao-txt > div:first-child{font-size:var(--fs-texto); font-weight:600; color:var(--ink)}
  #us-area-ficha .us-acao-txt > div.us-vazio:first-child{font-weight:400; color:var(--ink-3)}
  #us-area-ficha .us-acao > :nth-child(3){grid-area:botao; align-self:center; justify-self:end}
  /* a ação de zona (Desativar, Reativar) fica isolada no fim, sem caixa nem fundo */
  #us-area-ficha .us-zona{margin-top:var(--esp-4); padding-top:var(--esp-3); border-top:1px solid var(--line)}
  #us-area-ficha .us-acao-txt .us-sub{max-width:62ch}
  .us-cad{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--esp-3) var(--esp-4)}
  .us-cad-rot{font-size:var(--fs-apoio); color:var(--ink-3)}
  .us-cad-val{font-size:var(--fs-texto); overflow-wrap:anywhere}
  @media (max-width:820px){
    #us-area-ficha .us-painel-corpo{overflow:visible}
  }
}