/* estilo.css — identidade da Carvoli (brasão vermelho e preto, ver
 * `_arquivos/Briefing_Carvoli_Identidade_Visual.pdf`). Vermelho e preto extraídos por
 * amostragem direta do PDF (capa e caixas de destaque): vermelho #D41418, maroon escuro
 * #8B0709 nas caixas de setor, quase-preto #161616 no fundo da capa.
 */

/* Refinamento Visual e UI/UX (Briefing V1.0, outubro de 2026, pedido do gestor,
 * 01/10/2026): vermelho Carvoli vira cor de AÇÃO e destaque, não cor dominante -
 * fundo geral passa a cinza muito claro, cards/superfícies continuam brancos, pra criar
 * profundidade sem poluir ("tela chapada"). Tipografia Inter (carregada no `<head>` de
 * `app.html`, Google Fonts), escala de espaçamento fixa (8/16/24/32px) e paleta de
 * prioridade/indicador alinhada à tabela do briefing (normal=azul, alta=laranja,
 * urgente=vermelho) - tudo documentado em PROJETO.md, seção "Refinamento visual".
 */
:root {
  --marca: #d41418;
  --marca-escura: #8b0709;
  --marca-clara: #f7dcdc;
  --marca-fraca: #fdf0f0;
  --tinta: #1f2937;
  --tinta-fraca: #6b7280;
  --linha: #e5e7eb;
  --fundo: #ffffff;
  --fundo-app: #f3f4f6;
  --fundo-suave: #f8f8f9;
  --ok: #2e7d52;
  --ok-fundo: #e7f4ec;
  --atencao: #b45309;
  --atencao-fundo: #fef3e2;
  --alerta: #b3261e;
  --alerta-fundo: #fbeae9;
  --info: #2563eb;
  --info-fundo: #e8f0fe;
  --raio: 10px;
  --sombra: 0 1px 3px rgba(31, 31, 31, .08), 0 4px 14px rgba(31, 31, 31, .06);
  --esp-1: 8px; --esp-2: 16px; --esp-3: 24px; --esp-4: 32px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fundo-app);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--marca-escura); }

/* ---------------------------------------------------------------- estrutura */

.cabecalho {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem var(--esp-3);
  background: #fff;
  border-bottom: 1px solid var(--linha);
}
.cabecalho .marca { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--marca-escura); font-weight: 700; font-size: 1rem; }
.cabecalho .marca img { height: 34px; width: auto; display: block; }
.cabecalho .quem { margin-left: auto; }
.cabecalho .sino {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; padding: .4rem; border-radius: 8px; color: var(--tinta-fraca);
}
.cabecalho .sino:hover { background: var(--fundo-app); color: var(--marca-escura); }
.cabecalho .sino .bolha { position: absolute; top: -.1rem; right: -.1rem; background: var(--alerta); color: #fff; border-radius: 999px; font-size: .62rem; padding: .05rem .32rem; font-weight: 700; line-height: 1.3; }
.icone { display: inline-block; vertical-align: -3px; flex: 0 0 auto; }

/* Menu de conta no cabeçalho (pedido do gestor, Briefing de Refinamento Visual,
   01/10/2026) - reaproveita o MESMO componente do menu de navegação (`.menu-grupo` /
   `.menu-gatilho` / `.menu-suspenso`, abrir/fechar em `app.js#ligarGatilhoSuspenso`),
   só com modificadores de layout: avatar com iniciais, painel encostado na direita (a
   faixa padrão nasce encostada à esquerda, que vazaria pra fora da tela aqui). */
.conta-gatilho { padding: .3rem .5rem .3rem .3rem; gap: .5rem; color: var(--tinta); }
.conta-gatilho:hover, .conta-gatilho.ativo { background: var(--fundo-app); }
/* `.cabecalho` na frente só pra ganhar de `.menu-gatilho[aria-expanded="true"]` (vermelho
   cheio, pensado pro menu de navegação) - mesma especificidade, mas aquela regra vem
   depois no arquivo e venceria no empate; a conta não deve ficar vermelha ao abrir, só
   o menu de navegação. */
.cabecalho .conta-gatilho[aria-expanded="true"] { background: var(--fundo-app); color: var(--tinta); }
.avatar-iniciais {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--marca); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem;
  flex: 0 0 auto;
}
.conta-texto { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.conta-texto strong { font-size: .88rem; color: var(--tinta); }
.conta-texto .rotulo-pequeno { margin: 0; }
.conta-suspenso { left: auto; right: 0; min-width: 170px; }
.conta-suspenso a, .conta-suspenso button {
  display: flex; align-items: center; justify-content: flex-start; gap: .5rem; width: 100%; text-align: left;
  border: 0; background: none; border-radius: 8px; font: inherit; font-size: .88rem;
  color: var(--tinta); padding: .5rem .7rem; cursor: pointer;
}
.conta-suspenso a:hover, .conta-suspenso button:hover { background: var(--marca-fraca); }

.menu {
  display: flex; gap: .25rem; padding: .4rem .75rem;
  background: var(--marca-fraca); border-bottom: 1px solid var(--linha);
  position: sticky; top: 57px; z-index: 29;
}
/* Achado real (relatado pelo gestor em produção, 01/10/2026): esta regra tinha
   `overflow-x: auto` (sobrava de quando o menu tinha até 9+ links de setor numa fila
   só, antes da reestruturação) - e o CSS NÃO deixa misturar eixo "visible" com eixo
   não-"visible": `overflow-y` (que eu não declarava) virava "auto" também, sozinho.
   Isso cortava o menu suspenso de Demandas/Buscar Peça, que é posicionado por fora da
   faixa do menu (`top: 100%`) - o botão ficava "apertado" (`aria-expanded="true"`),
   mas a lista nunca aparecia na tela, por mais que o `hidden` do painel estivesse
   certo por dentro. Tentei corrigir só com `overflow-y: visible` explícito - não
   funciona, o navegador promove de volta pra "auto" do mesmo jeito (regra do CSS,
   não bug de navegador). A correção de verdade é não precisar de `overflow-x`
   nenhum: com só 5 itens no topo (Início, Demandas, Buscar Peça, Películas, Troca de
   Óleo) depois da reestruturação, e esta barra ficando escondida no mobile (onde a
   rolagem horizontal fazia sentido), não existe mais cenário de desktop em que ela
   precise rolar - removida junto a regra de rolagem escondida (`::-webkit-scrollbar`,
   `scrollbar-width`), que não tinha mais efeito nenhum sem overflow. */
.menu:empty { display: none; }
.menu a {
  flex: 0 0 auto; padding: .45rem .8rem; border-radius: 999px;
  text-decoration: none; color: var(--marca-escura); font-size: .9rem; font-weight: 500; white-space: nowrap;
}
.menu a:hover { background: var(--marca-clara); }
.menu a[aria-current="page"] { background: var(--marca); color: #fff; }

main { max-width: 1200px; margin: 0 auto; padding: 1rem .75rem 5rem; position: relative; z-index: 1; }
/* Kanban usa a largura toda do monitor (pedido do gestor, 25/09/2026) - com muitos
   setores/colunas, o teto de 1200px sobrava tela sem usar de um lado e cortava coluna
   do outro. Só o Kanban muda; formulário e lista continuam com o teto, pra não ficar
   linha enorme de tanto esticar. */
main.tela-larga { max-width: none; }

/* Escala tipográfica do briefing de refinamento visual (01/10/2026): título principal
   24-28px semibold/bold, título de seção 18-20px semibold, texto auxiliar 12-14px
   (`.rotulo-pequeno`, já nesse intervalo). */
h1 { font-size: 1.65rem; font-weight: 700; margin: .2rem 0 1rem; color: var(--marca-escura); }
h2 { font-size: 1.2rem; font-weight: 600; margin: var(--esp-4) 0 var(--esp-2); color: var(--tinta); }
h3 { font-size: 1rem; font-weight: 600; margin: var(--esp-2) 0 .4rem; color: var(--marca); }

.cartao { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem; margin-bottom: .85rem; box-shadow: var(--sombra); }
.cartao.suave { background: var(--fundo-suave); box-shadow: none; }
.cartao > :first-child { margin-top: 0; }
.cartao > :last-child { margin-bottom: 0; }

/* Indicadores da Home viraram cards de dashboard (pedido do gestor, Briefing de
   Refinamento Visual, 01/10/2026, diretriz 05): ícone + número + rótulo, cada um com
   uma cor de destaque própria (neutro/azul = abertas, azul/âmbar = andamento, vermelho
   Carvoli só pra atrasadas - "evitar vermelho forte em todos os cards"). Continuam
   botão (`.cartao-clicavel`, pedido de 29/09/2026: clicar abre a lista); "apertado"
   usa a regra global de `aria-pressed` mais abaixo, só inverte pro fundo da cor. */
.cartao-clicavel {
  display: flex; align-items: center; gap: .85rem; width: 100%; border: 1px solid var(--linha);
  text-align: left; cursor: pointer; font: inherit; color: inherit; border-radius: var(--raio);
  background: #fff; padding: .9rem 1rem; box-shadow: var(--sombra);
}
.cartao-clicavel:hover { border-color: var(--cor-indicador, var(--linha)); }
.cartao-clicavel .icone-indicador {
  width: 2.5rem; height: 2.5rem; border-radius: 10px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cor-indicador-fundo, var(--fundo-suave)); color: var(--cor-indicador, var(--tinta-fraca));
}
.cartao-clicavel[data-grupo="aberto"] { --cor-indicador: var(--info); --cor-indicador-fundo: var(--info-fundo); }
.cartao-clicavel[data-grupo="andamento"] { --cor-indicador: var(--atencao); --cor-indicador-fundo: var(--atencao-fundo); }
.cartao-clicavel[data-grupo="atrasado"] { --cor-indicador: var(--marca); --cor-indicador-fundo: var(--marca-fraca); }
.cartao-clicavel[aria-pressed="true"] { background: var(--cor-indicador, var(--marca)); border-color: var(--cor-indicador, var(--marca)); }
.cartao-clicavel[aria-pressed="true"] .numero-grande,
.cartao-clicavel[aria-pressed="true"] .rotulo-pequeno { color: #fff; }
.cartao-clicavel[aria-pressed="true"] .icone-indicador { background: rgba(255, 255, 255, .25); color: #fff; }

/* Busca de palheta (pedido do gestor, 30/09/2026): um cartão por aplicação encontrada.
   Cada código em bloco vertical (rótulo em cima, valor embaixo - pedido do gestor,
   30/09/2026, revendo o formato anterior de tabela com rótulo e valor lado a lado). */
.lista-cartoes { display: grid; gap: .7rem; margin-top: 1rem; }
.codigos-verticais { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .8rem; margin-top: .7rem; }
.codigo-vertical { display: flex; flex-direction: column; gap: .15rem; padding: .5rem .6rem; background: var(--fundo-suave); border-radius: var(--raio); }
.codigo-vertical strong { font-size: 1.05rem; }

.linha { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.linha.fim { justify-content: flex-end; }
.entre { display: flex; gap: .6rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.crescer { flex: 1 1 auto; min-width: 0; }
.grade { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grade.larga { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* ---------------------------------------------------------------- formulário */

label.campo { display: block; margin-bottom: .75rem; }
label.campo > span.rotulo { display: block; font-size: .82rem; font-weight: 600; color: var(--marca); margin-bottom: .25rem; }
label.campo > span.dica { display: block; font-size: .75rem; color: var(--tinta-fraca); margin-top: .2rem; }

input, select, textarea {
  width: 100%; font: inherit; font-size: 16px;   /* 16px evita o zoom automático do iPhone */
  padding: .55rem .65rem; border: 1px solid var(--linha); border-radius: 8px;
  background: #fff; color: var(--tinta);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--marca); outline-offset: -1px; border-color: var(--marca-escura); }
textarea { min-height: 5rem; resize: vertical; line-height: 1.45; }
input.invalido, select.invalido { border-color: var(--alerta); background: var(--alerta-fundo); }
input[type="checkbox"], input[type="radio"] { width: auto; }

.opcoes { display: flex; flex-wrap: wrap; gap: .35rem; }
.opcoes button {
  padding: .4rem .75rem; border: 1px solid var(--linha); background: #fff; color: var(--tinta);
  border-radius: 999px; font: inherit; font-size: .85rem; cursor: pointer;
}
.opcoes button:hover { border-color: var(--marca-escura); }
/* Global, não só dentro de .opcoes: qualquer botão-toggle (setor vinculado, responsável
   por setor, ativo/inativo) precisa mostrar visualmente que está apertado - senão o
   clique muda o estado por dentro mas parece que "não fez nada" (achado em 18/09/2026,
   quando o toggle de setor/responsável da tela de Usuários saiu do <div class="opcoes">
   e ficou sem essa regra). A variante `:hover` tem que vir explícita e com o mesmo peso
   de seletor do `button:hover` genérico (abaixo) - senão, com o mouse ainda parado em
   cima do botão que acabou de ser clicado, o hover claro vence o vermelho de "apertado"
   e parece que o clique não fez nada (o próprio bug que essa regra veio corrigir). */
button[aria-pressed="true"],
button[aria-pressed="true"]:hover {
  background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 600;
}

/* ---------------------------------------------------------------- botões */

button, .botao {
  font: inherit; font-size: .92rem; padding: .55rem 1rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--linha); background: #fff; color: var(--marca-escura); text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem; justify-content: center;
}
button:hover, .botao:hover { border-color: var(--marca-escura); background: var(--marca-fraca); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.principal, .botao.principal { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 600; }
button.principal:hover, .botao.principal:hover { background: var(--marca-escura); border-color: var(--marca-escura); }
button.perigo { color: var(--alerta); border-color: #e8c9c6; }
button.perigo:hover { background: var(--alerta-fundo); border-color: var(--alerta); }
button.discreto { border-color: transparent; background: transparent; color: var(--tinta-fraca); }
button.discreto:hover { background: var(--fundo-suave); }
button.pequeno, .botao.pequeno { padding: .3rem .6rem; font-size: .82rem; }

/* ---------------------------------------------------------------- etiquetas e listas */

.etiqueta { display: inline-block; padding: .15rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--fundo-suave); color: var(--tinta-fraca); border: 1px solid var(--linha); }
.etiqueta.ok { background: var(--ok-fundo); color: var(--ok); border-color: #c6e3d2; }
.etiqueta.atencao { background: var(--atencao-fundo); color: var(--atencao); border-color: #f3dcb9; }
.etiqueta.alerta { background: var(--alerta-fundo); color: var(--alerta); border-color: #eecac7; }
.etiqueta.info { background: var(--info-fundo); color: var(--info); border-color: #c9dbfb; }
.etiqueta.marca { background: var(--marca-clara); color: var(--marca-escura); border-color: var(--marca); }

.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { border-bottom: 1px solid var(--linha); padding: .7rem .2rem; }
.lista > li:last-child { border-bottom: 0; }
.lista a.item { display: block; text-decoration: none; color: inherit; }
.lista a.item:hover { background: var(--marca-fraca); }

/* Lista de @menção no comentário, estilo WhatsApp (pedido do gestor, 28/09/2026) -
   fica no fluxo normal da página (não flutua por cima), pra não disputar posição com
   a rolagem do modal nem quebrar no celular. */
.autocomplete-mencao { border: 1px solid var(--linha); border-radius: var(--raio); margin: -.4rem 0 .6rem; max-height: 9rem; overflow-y: auto; }
.autocomplete-mencao button { display: block; width: 100%; text-align: left; padding: .45rem .6rem; border: 0; background: none; border-radius: 0; font: inherit; }
.autocomplete-mencao button.ativo, .autocomplete-mencao button:hover { background: var(--marca-fraca); }

.chave-valor { display: grid; grid-template-columns: minmax(120px, 32%) 1fr; gap: .35rem .75rem; font-size: .9rem; }
.chave-valor dt { color: var(--tinta-fraca); font-size: .82rem; }
.chave-valor dd { margin: 0; }

.numero-grande { font-size: 1.9rem; font-weight: 700; color: var(--tinta); line-height: 1; }
.data-hora-inicio { color: var(--tinta-fraca); font-size: .92rem; margin: -.4rem 0 1.25rem; display: flex; align-items: center; gap: .4rem; }
.rotulo-pequeno { font-size: .78rem; color: var(--tinta-fraca); text-transform: uppercase; letter-spacing: .03em; }

/* ---------------------------------------------------------------- Home (Briefing de
   Refinamento Visual, 01/10/2026): favoritos em grade compacta, demandas atribuídas
   como cards estruturados com badge, notificações em lista com ícone e estado não
   lida, e as duas últimas em duas colunas no desktop (diretriz 04). */

/* Favoritos: atalho compacto (ícone + nome), não um bloco grande vazio quando tem
   poucos - a grade se ajusta sozinha à quantidade (`auto-fill`, mesmo princípio já
   usado nas outras grades do sistema). */
.favoritos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; }
.favorito-item {
  display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center;
  padding: .9rem .6rem; border: 1px solid var(--linha); border-radius: var(--raio); background: #fff;
  text-decoration: none; color: var(--tinta); font-size: .82rem; font-weight: 600;
}
.favorito-item:hover { border-color: var(--marca); background: var(--marca-fraca); color: var(--marca-escura); }
.favorito-item .icone { width: 22px; height: 22px; color: var(--marca-escura); }

.home-colunas { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--esp-3); align-items: start; }
.home-colunas > div > h2:first-child { margin-top: 0; }

/* Demandas atribuídas: cada uma vira um card (não mais texto solto numa <li>) com
   número+título, setor/status/prioridade/prazo em badge - a prioridade fica colada
   no próprio card, nunca solta longe dele (diretriz 07, "não deverá ficar numa
   posição distante do item ao qual pertence"). */
.demandas-grade { display: flex; flex-direction: column; gap: .6rem; }
.demanda-card {
  display: block; text-decoration: none; color: inherit; padding: .8rem .9rem;
  border: 1px solid var(--linha); border-radius: var(--raio); background: #fff;
}
.demanda-card:hover { border-color: var(--marca); box-shadow: var(--sombra); }
.demanda-card .titulo-demanda { font-weight: 600; font-size: .95rem; color: var(--tinta); }
.demanda-card .titulo-demanda .numero { color: var(--tinta-fraca); font-weight: 500; margin-right: .3rem; }
.demanda-card .badges-demanda { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }

/* Garantias em destaque na Home da Denise (pedido do gestor, 27/10/2026) - caixa com
   fundo e borda na cor de marca, pra chamar atenção sem repetir a estrutura de aviso
   de erro/sucesso que já existe. Os cards dentro continuam o `.demanda-card` normal. */
.bloco-garantias {
  background: var(--marca-fraca); border: 1px solid var(--marca); border-radius: var(--raio); padding: 1rem;
}
.bloco-garantias h2 { display: flex; align-items: center; gap: .4rem; color: var(--marca-escura); }
.bloco-garantias .demanda-card { background: #fff; }

/* Notificações: lista estruturada - ícone, texto, tempo relativo, e fundo levemente
   destacado pra quem ainda não leu (sem usar vermelho em excesso, diretriz 08). */
.notificacoes-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.notificacoes-lista > li { border-radius: 8px; }
.notificacao-item {
  display: flex; gap: .65rem; align-items: flex-start; text-decoration: none; color: inherit;
  padding: .6rem .7rem; border-radius: 8px;
}
.notificacao-item:hover { background: var(--fundo-app); }
.notificacao-item.nao-lida { background: var(--info-fundo); }
.notificacao-item.nao-lida:hover { background: #ddeafd; }
.notificacao-item .icone-notificacao {
  width: 2rem; height: 2rem; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fundo-suave); color: var(--tinta-fraca);
}
.notificacao-item.nao-lida .icone-notificacao { background: #fff; color: var(--info); }
.notificacao-item .texto-notificacao { font-size: .88rem; }
.notificacao-item.nao-lida .texto-notificacao { font-weight: 600; }

@media (max-width: 900px) {
  .home-colunas { grid-template-columns: 1fr; }
}

.vazio { text-align: center; padding: 2rem 1rem; color: var(--tinta-fraca); }
.vazio p { margin: .3rem 0 1rem; }

.aviso { padding: .7rem .85rem; border-radius: 8px; background: var(--atencao-fundo); border: 1px solid #f0dcb6; color: #6b4407; font-size: .88rem; margin-bottom: .75rem; }
.aviso.erro { background: var(--alerta-fundo); border-color: #eecac7; color: #7d1c16; }
.aviso.ok { background: var(--ok-fundo); border-color: #c6e3d2; color: #1c5637; }

/* ---------------------------------------------------------------- abas */

.abas { display: flex; gap: .2rem; overflow-x: auto; border-bottom: 2px solid var(--linha); margin: .75rem 0 1rem; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.abas button {
  flex: 0 0 auto; border: 0; background: transparent; border-radius: 0; padding: .55rem .8rem;
  border-bottom: 2px solid transparent; margin-bottom: -2px; color: var(--tinta-fraca); font-size: .9rem;
}
.abas button:hover { background: var(--marca-fraca); }
.abas button[aria-selected="true"] { color: var(--marca-escura); font-weight: 700; border-bottom-color: var(--marca); }

/* ---------------------------------------------------------------- kanban */

/* A barra de rolar do quadro (eixo X) fica na base da coluna mais alta - com muito card
   numa coluna só, ela "afundava" longe do topo (pedido do gestor, 24/09/2026). Cada
   coluna agora tem altura máxima e rola por dentro (eixo Y só dos cartões) - o quadro
   inteiro fica mais baixo, e a barra de rolar horizontal sobe pra perto do cabeçalho. */
.kanban { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; }
.kanban .coluna {
  flex: 0 0 260px; background: var(--fundo-suave); border-radius: var(--raio); padding: .6rem;
  min-height: 120px; max-height: 70vh; display: flex; flex-direction: column;
  border-top: 3px solid var(--cor-coluna, var(--linha));
}
.kanban .coluna h3 { margin: 0 0 .5rem; font-size: .88rem; display: flex; justify-content: space-between; align-items: flex-start; gap: .35rem; color: var(--cor-coluna, var(--marca)); flex: 0 0 auto; }
.kanban .coluna h3 .titulo-coluna { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.kanban .coluna h3 .n { background: var(--linha); color: var(--tinta-fraca); border-radius: 999px; font-size: .74rem; padding: .05rem .45rem; flex: 0 0 auto; }
/* Numeração e selo de round-trip (pedido do gestor, 26/09/2026, itens 3-4) - só o
   caminho da peça entre Cotação e Comercial é numerado (app/setores.js#FLUXOS), pra
   identificar visualmente a ordem sem virar automação nenhuma. */
.kanban .coluna h3 .numero-fluxo {
  background: var(--cor-coluna, var(--marca)); color: #fff; border-radius: 50%;
  width: 1.3rem; height: 1.3rem; display: inline-flex; align-items: center;
  justify-content: center; font-size: .72rem; font-weight: 700; flex: 0 0 auto;
}
.kanban .coluna h3 .selo-round-trip {
  background: #fef3c7; color: #92400e; border-radius: 999px; font-size: .68rem;
  font-weight: 600; padding: .1rem .5rem; white-space: nowrap;
}
.kanban .coluna .cartoes { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.kanban .card {
  background: #fff; border: 1px solid var(--linha); border-left: 4px solid var(--cor-coluna, var(--linha));
  border-radius: 8px; padding: .55rem .65rem;
  margin-bottom: .5rem; cursor: pointer; box-shadow: var(--sombra); font-size: .86rem;
}
.kanban .card:hover { border-color: var(--marca); border-left-color: var(--cor-coluna, var(--marca)); }
.kanban .card .num { font-size: .72rem; color: var(--tinta-fraca); }
.kanban .card .titulo { font-weight: 600; margin: .1rem 0 .3rem; }
.kanban .card .meta { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; font-size: .74rem; color: var(--tinta-fraca); }
.kanban .card select.mover { width: 100%; margin-top: .4rem; font-size: .78rem; padding: .3rem .4rem; }
.kanban .card .atrasado { color: var(--alerta); font-weight: 600; }

/* Arrastar card entre colunas (pedido do gestor, 13/10/2026, via SortableJS) - só o
   card que o usuário pode mover (`.pode-mover`) dá a dica visual de "pegável"; os
   demais continuam com o cursor padrão de "abre o card" (`.card` já tem
   `cursor: pointer` acima). `.card-arrastando` é o placeholder que o Sortable deixa
   no lugar enquanto o card é arrastado (`ghostClass`). */
.kanban .card.pode-mover { cursor: grab; }
.kanban .card.pode-mover:active { cursor: grabbing; }
.kanban .card.card-arrastando { opacity: .4; }

/* Achado real do gestor usando o sistema de verdade: mover um card selecionava todo
   o texto da tela. O `forceFallback` do Sortable arrasta simulando mouse por JS, mas
   não trava a seleção de texto nativa do navegador durante o `mousedown` que precede
   o início do arrasto (o `delay` de 200ms dá tempo de sobra pro navegador começar a
   "selecionar" antes do Sortable assumir). Trava aqui, só no card que pode ser
   arrastado - o resto do sistema continua selecionável normalmente. */
.kanban .card.pode-mover { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* ---------------------------------------------------------------- linha do tempo */

.tempo { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--marca-clara); }
.tempo > li { position: relative; padding: 0 0 1.1rem .9rem; }
.tempo > li::before {
  content: ''; position: absolute; left: -1.42rem; top: .35rem; width: .62rem; height: .62rem;
  border-radius: 50%; background: var(--marca); border: 2px solid #fff;
}
.tempo .quando { font-size: .78rem; color: var(--tinta-fraca); }
.tempo .titulo { font-weight: 600; font-size: .92rem; }
.tempo .detalhe { font-size: .85rem; color: var(--tinta-fraca); }

/* ---------------------------------------------------------------- modal */

dialog {
  border: 0; border-radius: 14px; padding: 0; width: min(680px, 94vw); max-height: 88vh;
  box-shadow: 0 12px 40px rgba(30, 41, 59, .28); color: var(--tinta);
}
dialog::backdrop { background: rgba(30, 41, 59, .45); }
dialog .topo { position: sticky; top: 0; background: #fff; border-bottom: 1px solid var(--linha); padding: .85rem 1rem; display: flex; align-items: center; gap: .5rem; }
dialog .topo h2 { margin: 0; font-size: 1.05rem; }
dialog .topo button { margin-left: auto; }
dialog .conteudo { padding: 1rem; overflow-y: auto; }
dialog .rodape { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--linha); padding: .75rem 1rem; display: flex; gap: .5rem; justify-content: flex-end; }

/* ---------------------------------------------------------------- recado flutuante */

#recados { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1rem; z-index: 100; display: flex; flex-direction: column; gap: .4rem; align-items: center; width: max-content; max-width: 92vw; }
#recados div { background: var(--marca-escura); color: #fff; padding: .6rem .95rem; border-radius: 999px; font-size: .88rem; box-shadow: var(--sombra); }
#recados div.erro { background: var(--alerta); }
#recados div.ok { background: var(--ok); }

/* Barra fixa avisando que tem deploy novo no ar - fica até a pessoa clicar em
   Atualizar, nunca some ou recarrega sozinha (pedido do gestor, 18/09/2026: publicar
   sem atropelar quem já está usando). Fixed, não sticky, pra não disputar posição com o
   cabeçalho (que também é sticky no topo) - empurra o conteúdo com padding-top no body. */
#avisoVersaoNova {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--marca); color: #fff;
  padding: .55rem 1rem; display: flex; gap: .75rem; flex-wrap: wrap;
  align-items: center; justify-content: center; text-align: center;
  font-size: .88rem; box-shadow: var(--sombra);
}
#avisoVersaoNova button { background: #fff; color: var(--marca-escura); border-color: #fff; font-weight: 700; }
body.tem-aviso-versao { padding-top: 2.75rem; }
body.tem-aviso-versao .cabecalho { top: 2.75rem; }
body.tem-aviso-versao .menu { top: calc(2.75rem + 57px); }

@media (max-width: 640px) {
  main { padding: .75rem .6rem 5rem; }
  .chave-valor { grid-template-columns: 1fr; gap: 0 0; }
  .chave-valor dd { margin-bottom: .5rem; }
  h1 { font-size: 1.2rem; }
  .kanban .coluna { flex-basis: 78vw; }
}

/* ---------------------------------------------------------------- navegação (pedido
   do gestor, 01/10/2026, Briefing de Navegação e Experiência Responsiva) */

.btn-hamburguer { display: none; align-items: center; background: none; border: none; cursor: pointer; padding: .4rem; border-radius: 8px; color: var(--marca-escura); line-height: 1; }
.btn-hamburguer:hover { background: var(--fundo-app); }

/* Demandas/Buscar Peça viraram grupo com menu suspenso no desktop - clicar no gatilho
   abre/fecha (alterna), clicar fora ou escolher um item fecha (app.js#fecharSuspensos).
   Sem hover-only de propósito: hover-only não funciona bem em tablet com touch. */
.menu-grupo { position: relative; display: inline-flex; }
.menu-gatilho {
  background: none; border: none; color: var(--marca-escura); font: inherit; font-size: .9rem; font-weight: 500;
  padding: .45rem .8rem; border-radius: 999px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .3rem;
}
.menu-gatilho:hover, .menu-gatilho.ativo { background: var(--marca-clara); }
.menu-gatilho[aria-expanded="true"] { background: var(--marca); color: #fff; }
.menu-gatilho .seta { font-size: .65rem; }
.menu-suspenso {
  position: absolute; top: 100%; left: 0; margin-top: .35rem; background: #fff; border: 1px solid var(--linha);
  border-radius: var(--raio); box-shadow: var(--sombra); min-width: 190px; padding: .3rem; z-index: 40;
  display: flex; flex-direction: column;
}
.menu-suspenso a { padding: .5rem .7rem; border-radius: 8px; text-decoration: none; color: var(--tinta); font-size: .88rem; white-space: nowrap; }
.menu-suspenso a:hover { background: var(--marca-fraca); }
.menu-suspenso a[aria-current="page"] { background: var(--marca); color: #fff; }

/* "Demandas › Comercial" + estrela de favorito, abaixo do menu em toda página (menos
   Início) - pedido do gestor: "o usuário deverá saber claramente em qual módulo está". */
.caminho { display: flex; align-items: center; justify-content: space-between; gap: .5rem; max-width: 1200px; margin: 0 auto; padding: .6rem .75rem 0; font-size: .85rem; color: var(--tinta-fraca); }
.separador-caminho { margin: 0 .3rem; }
.btn-favorito { background: none; border: none; cursor: pointer; font-size: 1.25rem; color: var(--atencao); padding: .1rem .35rem; line-height: 1; border-radius: 6px; }
.btn-favorito:hover { background: var(--marca-fraca); }
/* Achado real (visto na tela, não só hipótese): a regra global de botão-toggle
   (`button[aria-pressed="true"]`, mais acima - usada em ★ Responsável/setor
   vinculado na tela de Usuários) tem mais especificidade que `.btn-favorito` sozinha
   (um atributo + elemento bate uma classe só) - a estrela favoritada virava um
   quadrado vermelho cheio em vez de continuar um ícone. `.caminho` na frente só pra
   ganhar essa comparação, sem precisar de `!important`. */
.caminho .btn-favorito[aria-pressed="true"] { background: none; border: none; color: var(--marca); font-weight: inherit; }
.caminho .btn-favorito[aria-pressed="true"]:hover { background: var(--marca-fraca); }

/* Menu lateral mobile: hambúrguer abre, 80% da largura (75-85% pedido), accordion nos
   mesmos dois grupos do desktop (Demandas/Buscar Peça). `hidden` (atributo, não classe)
   de propósito - tira do fluxo de acessibilidade quando fechado, sem precisar de JS
   extra pra isso. */
.sobreposicao-menu { position: fixed; inset: 0; background: rgba(30, 41, 59, .45); z-index: 198; }
.menu-lateral {
  position: fixed; top: 0; left: 0; bottom: 0; width: 80%; max-width: 340px; background: #fff; z-index: 199;
  box-shadow: 4px 0 20px rgba(0, 0, 0, .18); display: flex; flex-direction: column; overflow-y: auto;
}
/* Achado real, mesmo motivo nos três: `display: flex` de cada bloco vence o
   `display: none` padrão do atributo `hidden` (regra de autor bate regra da UA, mesmo
   em empate de especificidade) - sem isso o menu lateral, o suspenso de Demandas/
   Buscar Peça e o painel do accordion ficavam SEMPRE renderizados por cima do resto,
   mesmo "fechados" (achado testando o clique em "Buscar Peça": o menu lateral mobile,
   nunca visível mas sempre no DOM com `display: flex`, interceptava o clique). */
.menu-lateral[hidden], .menu-suspenso[hidden], .accordion-painel[hidden] { display: none; }
.topo-menu-lateral { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; border-bottom: 1px solid var(--linha); flex: 0 0 auto; }
.topo-menu-lateral strong { color: var(--marca-escura); }
#itensMenuLateral { padding: .5rem; display: flex; flex-direction: column; gap: .1rem; }
#itensMenuLateral .item-nivel1 { padding: .75rem .8rem; border-radius: 8px; text-decoration: none; color: var(--tinta); font-weight: 600; font-size: .95rem; }
#itensMenuLateral a:hover { background: var(--marca-fraca); }
#itensMenuLateral a[aria-current="page"] { background: var(--marca); color: #fff; }
.accordion-grupo { display: flex; flex-direction: column; }
.accordion-gatilho {
  display: flex; align-items: center; justify-content: space-between; background: none; border: none; cursor: pointer;
  padding: .75rem .8rem; font: inherit; font-weight: 600; font-size: .95rem; color: var(--tinta); border-radius: 8px; text-align: left;
}
.accordion-gatilho:hover { background: var(--marca-fraca); }
.accordion-gatilho .seta { color: var(--tinta-fraca); }
.accordion-painel { display: flex; flex-direction: column; padding-left: .75rem; }
#itensMenuLateral .item-sub { padding: .6rem .8rem; text-decoration: none; color: var(--tinta-fraca); font-size: .9rem; border-radius: 8px; }

@media (max-width: 768px) {
  .btn-hamburguer { display: inline-flex; align-items: center; }
  .texto-marca { display: none; }
  /* Menu horizontal do desktop some por completo no mobile (pedido do gestor: "não
     deverá ser comprimido") - a navegação é só pelo menu lateral a partir daqui. */
  .menu { display: none; }
  body.tem-aviso-versao .cabecalho { top: 2.75rem; }
  /* Achado real ao testar (não só hipótese): nome + cargo completos ao lado do avatar
     entortavam o cabeçalho no celular - com hambúrguer, sino e o menu de conta inteiro
     na mesma linha de 390px, o cabeçalho passava da largura da tela (439px de conteúdo
     medido num viewport de 390px, confirmado via `scrollWidth`). Esconde só o texto;
     o avatar continua clicável e abre o mesmo menu (Minha senha/Sair). */
  .conta-texto { display: none; }
  .conta-gatilho { padding: .3rem; gap: .3rem; }
}

/* ---------------------------------------------------------------- NetFone (chat
   interno, pedido do gestor, 30/10/2026). Desktop: painel lateral DIREITO flutuante,
   não troca `#tela`. Mobile: tela cheia de verdade (`.netfone-tela-cheia`), dentro do
   `#tela` normal - o `.menu` horizontal já some inteiro abaixo de 768px (regra acima),
   então o botão do painel nunca aparece lá; só o link do menu lateral existe. */

.contador-netfone {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.1rem; height: 1.1rem;
  padding: 0 .3rem; background: var(--alerta); color: #fff; border-radius: 999px; font-size: .68rem; font-weight: 700;
}

.netfone-painel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 92vw; background: #fff;
  border-left: 1px solid var(--linha); box-shadow: -4px 0 20px rgba(0, 0, 0, .12); z-index: 150;
  display: flex; flex-direction: column;
}
.netfone-painel[hidden] { display: none; }
@media (max-width: 768px) { .netfone-painel { display: none !important; } }

.netfone-cabecalho {
  display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--linha); flex: 0 0 auto;
}
.netfone-cabecalho strong { color: var(--marca-escura); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.netfone-cabecalho button { background: none; border: none; cursor: pointer; color: var(--tinta); padding: .3rem; border-radius: 8px; line-height: 1; font-size: 1.1rem; }
.netfone-cabecalho button:hover { background: var(--fundo-app); }
.netfone-titulo-bloco { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.netfone-titulo-bloco #netfonePresenca, .netfone-titulo-bloco #netfonePresencaCheia { font-size: .72rem; }
.netfone-bt-som { display: flex; align-items: center; justify-content: center; }
/* Sobrescreve o `button[aria-pressed="true"]` genérico (vermelho sólido, pensado pro
   ★ Responsável) com um seletor mais específico - mesma correção já aplicada no
   ☆ favorito (`.caminho .btn-favorito[aria-pressed="true"]`, acima) pro mesmo motivo:
   aqui "apertado" é só "mudo", não precisa do visual de botão-ação cheio. */
.netfone-cabecalho .netfone-bt-som[aria-pressed="true"] { background: none; border: none; color: var(--tinta-fraca); font-weight: inherit; }
.netfone-cabecalho .netfone-bt-som[aria-pressed="true"]:hover { background: var(--fundo-app); }

.netfone-conteudo { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }

.netfone-tela-cheia { display: flex; flex-direction: column; height: calc(100vh - 57px - 3.2rem); margin: -1rem -.75rem -5rem; }
.netfone-cabecalho-cheia { background: #fff; }
.netfone-conteudo-cheia { flex: 1; }

/* Busca (conversa e mensagem) */
.netfone-busca { padding: .6rem .75rem 0; flex: 0 0 auto; }
.netfone-busca input {
  width: 100%; padding: .5rem .7rem; border: 1px solid var(--linha); border-radius: var(--raio); font: inherit;
}
#netfoneListaWrap { flex: 1; overflow-y: auto; }

/* Administração de grupo personalizado */
.netfone-grupo-admin { flex: 0 0 auto; padding: .5rem .75rem; border-bottom: 1px solid var(--linha); background: var(--fundo-app); }

/* Lista de conversas */
.netfone-lista { display: flex; flex-direction: column; padding: .4rem; }
.netfone-item-conversa {
  display: flex; align-items: center; gap: .7rem; width: 100%; background: none; border: none; cursor: pointer;
  padding: .7rem .6rem; border-radius: var(--raio); text-align: left; font: inherit; color: inherit;
}
.netfone-item-conversa:hover { background: var(--fundo-app); }
.netfone-avatar {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--marca); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem;
}
.netfone-avatar.pequeno { width: 1.9rem; height: 1.9rem; font-size: .72rem; }
.netfone-item-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.netfone-item-topo { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.netfone-item-topo strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.netfone-item-hora { font-size: .72rem; color: var(--tinta-fraca); flex: 0 0 auto; }
.netfone-item-previa { font-size: .83rem; color: var(--tinta-fraca); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.netfone-badge-nao-lida {
  flex: 0 0 auto; min-width: 1.3rem; height: 1.3rem; padding: 0 .35rem; background: var(--marca); color: #fff;
  border-radius: 999px; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* Chat */
.netfone-mensagens { flex: 1; overflow-y: auto; padding: .75rem; display: flex; flex-direction: column; gap: .4rem; background: var(--fundo-app); }
.netfone-bolha { max-width: 78%; padding: .5rem .7rem; border-radius: 12px; font-size: .9rem; display: flex; flex-direction: column; gap: .1rem; }
.netfone-bolha.minha { align-self: flex-end; background: var(--marca); color: #fff; border-bottom-right-radius: 3px; }
.netfone-bolha.dele { align-self: flex-start; background: #fff; border: 1px solid var(--linha); border-bottom-left-radius: 3px; }
.netfone-autor { font-size: .72rem; font-weight: 700; color: var(--marca-escura); }
.netfone-texto { white-space: pre-wrap; word-break: break-word; }
.netfone-hora { font-size: .68rem; opacity: .75; align-self: flex-end; }
.netfone-ticks { margin-left: .2rem; letter-spacing: -1px; }
.netfone-ticks.lido { color: var(--info); opacity: 1; }

.netfone-anexos:empty { display: none; }
.netfone-anexo { display: block; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; }
.netfone-anexo img { max-width: 100%; max-height: 14rem; border-radius: 8px; display: block; }
.netfone-anexo-generico { display: inline-block; padding: .3rem .5rem; border-radius: 8px; background: rgba(0, 0, 0, .08); font-size: .85rem; }

.netfone-card-compartilhado {
  display: flex; align-items: center; gap: .35rem; width: 100%; text-align: left;
  border: 1px solid rgba(0, 0, 0, .12); background: rgba(255, 255, 255, .5); border-radius: 8px;
  padding: .4rem .55rem; font: inherit; font-size: .82rem; cursor: pointer; margin-bottom: .15rem;
}
.netfone-bolha.dele .netfone-card-compartilhado { background: var(--fundo-app); }
.netfone-card-compartilhado span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.netfone-form-envio { display: flex; gap: .5rem; padding: .6rem; border-top: 1px solid var(--linha); flex: 0 0 auto; background: #fff; }
.netfone-form-envio textarea {
  flex: 1; resize: none; max-height: 6rem; padding: .55rem .7rem; border: 1px solid var(--linha); border-radius: var(--raio); font: inherit;
}
.netfone-form-envio button { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; transform: rotate(90deg); }
.netfone-form-envio #netfoneBtAnexar { transform: none; font-size: 1.1rem; background: none; }

/* Nova conversa / novo grupo */
.netfone-nova { padding: .8rem; display: flex; flex-direction: column; gap: .6rem; overflow-y: auto; }
.netfone-lista-usuarios { display: flex; flex-direction: column; gap: .15rem; max-height: 40vh; overflow-y: auto; border: 1px solid var(--linha); border-radius: var(--raio); padding: .3rem; }
.netfone-item-usuario { display: flex; align-items: center; gap: .6rem; padding: .5rem; border-radius: 8px; cursor: pointer; font-size: .9rem; }
.netfone-item-usuario:hover { background: var(--fundo-app); }
.netfone-item-usuario input { flex: 0 0 auto; }