/* =====================================================================
   Ajustes visuais (02/10/2026): fontes, tamanho do texto, ícones neutros,
   menu da pessoa no topo. Só aparência: nenhuma posição de tela muda.
   Carregado por último no index.html, por isso vale sobre os outros CSS.
   ===================================================================== */
:root{--f-display:"IBM Plex Sans","Segoe UI",Roboto,Arial,sans-serif}
body{font-size:15px}

/* barra superior branca de ponta a ponta, sem cortar o menu que abre para baixo */
.top{position:relative;z-index:30;clip-path:none;background:var(--surface);border-bottom-color:transparent;
  box-shadow:-50vw 0 0 var(--surface),50vw 0 0 var(--surface),-50vw 1px 0 var(--line),50vw 1px 0 var(--line),0 1px 0 var(--line)}

/* Archivo itálico fica só no logotipo */
.brand-name{font-family:"Archivo","Helvetica Neue",Arial,sans-serif}

/* títulos: peso 700, sem itálico */
.head h1,.login h1,.login-side h1,.section-t,.slot-label,.tool-t,
.af-modal-h h2,.af-pop-h h2,.ge-titulo,.rs-hero h2,.ge-rn-box .ge-rn-cab h2,.imp-dlg-h h2,.rh-v{
  font-style:normal;font-weight:700}
.head h1{letter-spacing:-.8px}
.login-side h1{letter-spacing:-1.2px;line-height:1.04}
.btn.primary{font-weight:600;letter-spacing:0}

/* cartões de ferramenta: ícone neutro, laranja só no que é ação; sem o "Abrir" repetido */
.tool-ico{background:var(--same-soft);color:var(--ink)}
.tool:hover .tool-ico{background:var(--accent-soft);color:var(--accent-text)}
.tool-go{display:none}

/* rodapé repetia o que já está no topo */
.foot{display:none}

/* menu da pessoa (nome no topo abre Segurança, Trocar senha, Sair…) */
details.user{position:relative;display:block}
.user-sum{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;min-height:40px;padding:4px 10px 4px 4px;border-radius:999px;border:1px solid transparent;font-size:13.5px;color:var(--ink);user-select:none}
.user-sum::-webkit-details-marker{display:none}
.user-sum:hover,details.user[open] .user-sum{border-color:var(--line);background:var(--surface-2)}
.user-sum:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.user-sum svg{color:var(--muted);flex:none;transition:transform .15s}
details.user[open] .user-sum svg{transform:rotate(180deg)}
#userEmail{display:inline-flex;align-items:center;gap:10px;font-weight:600}
#userEmail[data-ini]::before{content:attr(data-ini);width:32px;height:32px;flex:none;border-radius:50%;background:var(--carvao);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600}
.user-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:200px;display:flex;flex-direction:column;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(38,38,38,.14)}
.user-pop .linkbtn{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:8px;font-size:14px;color:var(--ink);text-decoration:none}
.user-pop .linkbtn:hover{background:var(--same-soft);text-decoration:none}
.user-pop .linkbtn[hidden]{display:none}
.user-pop #btnSair{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 8px 8px;color:var(--accent-text)}
@media (max-width:560px){#userEmail{font-size:0;gap:0}#userEmail[data-ini]::before{font-size:13px}}

/* "Ainda não tem acesso? Fale com a WFtec no WhatsApp" na tela de entrada */
.zap-acesso{display:flex;align-items:center;gap:10px;margin:4px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);font-size:14px;color:var(--muted);text-decoration:none}
.zap-acesso svg{flex:none;color:#1C8A4A}
.zap-acesso b{color:var(--ink);font-weight:600}
a.zap-acesso:hover{border-color:#1C8A4A}
a.zap-acesso:hover b{color:#1C8A4A}
a.zap-acesso:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* tela de entrada: quadro com as ferramentas que existem no WFtec (só os nomes) */
.login-ferr{display:flex;flex-direction:column;gap:12px}
.login-ferr-t{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#F58A63}
.login-ferr ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.login-ferr li{display:flex;align-items:center;gap:9px;min-width:0;padding:11px 12px;border:1px solid #3A3735;border-radius:10px;background:rgba(255,255,255,.03);font-size:14px;color:#F1ECE8;line-height:1.3}
.login-ferr li svg{flex:none;color:#F58A63}
@media (max-width:1100px){.login-ferr ul{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* carrossel das ferramentas: corre da esquerda para a direita, o do centro cresce */
.login-ferr ul.carrossel{display:block;position:relative;height:74px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
.login-ferr ul.carrossel{--passo:66%}
.login-ferr ul.carrossel li{position:absolute;left:50%;top:50%;width:60%;transform:translate(-50%,-50%) translateX(calc(var(--d,0) * var(--passo))) scale(var(--s,1));justify-content:center;white-space:nowrap;
  padding:16px 18px;font-size:19px;font-weight:600;gap:12px;
  transition:transform .7s cubic-bezier(.22,.7,.2,1),opacity .7s ease,background-color .7s,border-color .7s}
.login-ferr ul.carrossel li.on{background:rgba(241,90,37,.10);border-color:rgba(241,90,37,.55)}
.login-ferr ul.carrossel li svg{width:22px;height:22px}
.login-ferr-pontos{display:flex;gap:6px;justify-content:center}
.login-ferr-pontos i{width:18px;height:3px;border-radius:3px;background:#4C4845;transition:background .3s}
.login-ferr-pontos i.on{background:#F15A25}
@media (max-width:560px){.login-ferr ul.carrossel{--passo:96%}.login-ferr ul.carrossel li{width:76%;font-size:17px}}