/* Coluna da lista: recolher filtros, modo de exibição e efeito de hover. */

/* ---------- linha da busca + botões de filtros/modo ---------- */
.busca-linha { display: flex; align-items: center; gap: 6px; }
.busca-linha .busca { flex: 1; min-width: 0; }

.btn-filtros-toggle, .btn-modo-lista {
  position: relative; flex: none; width: 32px; height: 32px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--borda);
  background: var(--input); color: var(--texto-2); cursor: pointer; line-height: 1;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.btn-filtros-toggle:hover, .btn-modo-lista:hover { border-color: var(--borda-forte); color: var(--texto); }
/* 3 modos (completo → etapas + ordenar/mostrar → escondido): fora do completo o botão fica dourado. */
.btn-filtros-toggle[data-modo-filtros="etapas"] { color: var(--ouro); border-color: var(--borda-forte); }
.btn-filtros-toggle[data-modo-filtros="escondido"], .btn-filtros-toggle[aria-expanded="false"] { color: var(--ouro); border-color: var(--ouro); }

.btn-filtros-toggle .icone-svg, .btn-modo-lista .icone-svg { display: block; flex: none; }

.marcador-filtros {
  position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px; background: var(--ouro); color: var(--sobre-ouro, #1a1d21); font-size: 9.5px;
  font-weight: 700; display: grid; place-items: center; line-height: 1; border: 1px solid var(--fundo-2);
}

.filtros-corpo { display: flex; flex-direction: column; gap: 8px; }
/* modo intermediário ("etapas", 20/09 pedido do Daniel): ficam as abas coloridas do funil + as pílulas
   Ordenar e Mostrar; Fila, Tipo de caso, Números, Fonte e Sem resposta somem (mas continuam valendo). */
.filtros-corpo[data-modo-filtros="etapas"] > :not(.abas-etapa):not(.ordem-lista):not(.filtros-compactos) { display: none; }
.filtros-corpo[data-modo-filtros="etapas"] .filtros-compactos > .filtro-compacto:not(#ordem-lista):not(#status-lista) { display: none; }

/* ---------- "Ordenar por" e "Mostrar" (19/09 segmentado → 20/09 compacto com balão no hover) ----------
   Os dois ficam na mesma linha, cada um como uma pílula pequena (ícone + rótulo + opção atual).
   As opções completas (segmentado de antes) só aparecem num balão absoluto abaixo da pílula:
   no hover, com foco de teclado (:focus-within) ou por clique/toque na pílula ([data-aberto="true"]).
   O balão é absoluto, então abrir não empurra a lista. */
.filtros-compactos { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.ordem-lista { position: relative; display: flex; align-items: center; min-width: 0; }
.filtro-compacto-gatilho {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 9px 3px 7px;
  border: 1px solid var(--borda); border-radius: 999px; background: var(--input); color: var(--texto-2);
  font: inherit; font-size: 12px; line-height: 1.2; cursor: pointer; transition: border-color .12s, color .12s, background .12s;
}
.filtro-compacto-gatilho .icone-svg { display: block; flex: none; color: var(--texto-3); }
.ordem-lista-rotulo { flex: none; font-size: 10px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; }
.filtro-compacto-atual { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); font-weight: 600; }
.filtro-compacto:hover > .filtro-compacto-gatilho, .filtro-compacto:focus-within > .filtro-compacto-gatilho,
.filtro-compacto[data-aberto="true"] > .filtro-compacto-gatilho {
  border-color: var(--ouro); color: var(--texto); background: color-mix(in srgb, var(--ouro) 12%, var(--input));
}
.filtro-compacto:hover > .filtro-compacto-gatilho .icone-svg, .filtro-compacto:focus-within > .filtro-compacto-gatilho .icone-svg,
.filtro-compacto[data-aberto="true"] > .filtro-compacto-gatilho .icone-svg { color: var(--ouro); }
.filtro-compacto-gatilho:focus-visible { outline: 2px solid var(--ouro); outline-offset: 1px; }

/* balão com as opções: mesmo padrão do .fp-balao/.fc-balao da ficha (oculto por opacity/visibility) */
.ordem-lista-opcoes {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 100%; width: max-content; max-width: 260px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px;
  background: var(--fundo-2); border: 1px solid var(--borda-forte); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.22);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease;
}
/* ponte invisível entre a pílula e o balão, para o mouse não "cair" no vão e fechar */
.ordem-lista-opcoes::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; }
.filtro-compacto:hover > .ordem-lista-opcoes, .filtro-compacto:focus-within > .ordem-lista-opcoes,
.filtro-compacto[data-aberto="true"] > .ordem-lista-opcoes { opacity: 1; visibility: visible; pointer-events: auto; }
/* acabou de escolher com o mouse ainda em cima: fica fechado até o mouse sair (JS tira o atributo no mouseleave) */
.filtro-compacto[data-fechado="true"] > .ordem-lista-opcoes { opacity: 0; visibility: hidden; pointer-events: none; }
.ordem-opcao {
  min-width: 0; padding: 5px 10px; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
  color: var(--texto-2); font-size: 12px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .12s, color .12s;
}
.ordem-opcao:hover { color: var(--texto); background: var(--marca-fundo, transparent); }
.ordem-opcao.ativa {
  background: color-mix(in srgb, var(--ouro) 18%, var(--fundo-2)); color: var(--texto); font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ouro) 60%, transparent);
}
.ordem-opcao:focus-visible { outline: 2px solid var(--ouro); outline-offset: 1px; }
@media (max-width: 760px) { .ordem-opcao { padding-top: 8px; padding-bottom: 8px; } }
/* touch: sem hover de verdade; só o clique/toque na pílula abre (JS) */
@media (pointer: coarse) {
  .filtro-compacto:hover:not([data-aberto="true"]):not(:focus-within) > .ordem-lista-opcoes { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (max-width: 300px) { .ordem-lista-rotulo { display: none; } }

/* Fila/Tipo de caso/Números/Fonte/Sem resposta (20/09 tarde): mesma pílula+balão do Ordenar/Mostrar,
   só que o balão da Fila reaproveita os chips de sempre (#filtros-rapidos, com contagem) e os
   outros quatro nascem em JS a partir do <select> escondido logo abaixo (fonte de verdade). */
#filtros-selects { display: none; }

/* ---------- modo minimalista ---------- */
/* Mesmo esqueleto fixo do card completo (20/09, Daniel), em duas linhas:
   linha 1: ● etapa · nome · [★]   |  hora · slot ⚠/SLA + contador (+ fechada)
   linha 2: tipo de caso (coluna fixa) | prévia
   coluna do avatar do tamanho dele (22px): o nome encosta mais à esquerda (Daniel 20/09) */
.item-mini { min-height: 40px; padding: 4px 11px; align-items: center; grid-template-columns: 22px minmax(0,1fr) auto; gap: 0 8px; }
.item-mini .avatar { width: 22px; height: 22px; font-size: 9.5px; }
.item-mini .item-corpo { gap: 1px; }
.item-mini .item-linha1 { height: 17px; }
.item-mini .item-nome { font-size: 13px; }
.item-mini .item-promissor { width: 11px; }
.item-meta-mini { flex-direction: row; align-items: center; gap: 6px; min-width: 0; }
.item-meta-mini .item-meta-slot { gap: 3px; }
/* linha 2: coluna do tipo com largura fixa (chip invisível reserva o lugar) e a prévia sempre começa no mesmo x */
.item-previa-mini {
  display: grid; grid-template-columns: minmax(0, var(--largura-tipo, 38%)) minmax(0, 1fr); gap: 5px; align-items: center;
  font-size: 11px; height: 15px; line-height: 15px;
}
.item-previa-mini .item-tipo { gap: 3px; }
.item-previa-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* anel do estado no mini: mais fino, cabe nos 22px */
.item-mini .avatar-story { box-shadow: 0 0 0 1.5px var(--fundo), 0 0 0 3px var(--cor-estado); }
.item-mini:hover .avatar-story, .item-mini.ativa .avatar-story { box-shadow: 0 0 0 1.5px var(--fundo-3), 0 0 0 3px var(--cor-estado); }
.tag-mini { flex: none; font-size: 9.5px; padding: 0 6px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-tipo .tag-mini { flex: 0 1 auto; min-width: 0; }
.item-tipo .tag-mini.tag-mais { flex: none; }

@media (max-width: 640px) {
  .item-previa-mini { --largura-tipo: 34%; }
}

/* ---------- modo grade (20/09 noite, Daniel: print do celular) ----------
   Cartões pequenos em 3 colunas, uma grade única que rola inteira (não são colunas independentes).
   Cartão vertical, altura fixa:
     canto sup. direito (absoluto, não empurra nada): ⚠ SLA vencido + contador de não lidas
                                                     ou ponto "cliente aguardando resposta" (+ ⏰ agendado)
     centro: avatar 40px com anel do estado / prioridade (mesmo avatarLista dos outros modos)
     abaixo:  primeiro nome (ellipsis)  ·  hora curta ("8 min", "3 h", "2 d")
   Estado, "há X", pendência e "fechada" ficam por extenso no aria-label do cartão. */
.lista.modo-grade {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px;
  align-content: start; overflow-x: hidden;
}
.lista.modo-grade .vazio { grid-column: 1 / -1; }
/* .item.item-grade: ganha do .item { margin: 0 -4px; border-radius: 8px } do bloco de hover, mais abaixo */
.item.item-grade {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px;
  height: 96px; margin: 0; padding: 12px 6px 8px; box-sizing: border-box; min-width: 0;
  border: 1px solid var(--borda); border-bottom: 1px solid var(--borda); border-radius: 12px;
  background: var(--input); text-align: center;
}
.item-grade:hover { background: var(--fundo-3); }
.item-grade .avatar { width: 40px; height: 40px; font-size: 14px; }
.item-grade .item-nome { flex: none; width: 100%; font-size: 12px; line-height: 15px; height: 15px; }
.item-grade .item-hora { font-size: 10.5px; height: 13px; line-height: 13px; }
/* badges: absolutas no canto, com o slot sempre presente (⏰ do agendamento também cai aqui) */
.item-grade .item-grade-badges {
  position: absolute; top: 4px; right: 4px; height: auto; min-width: 0; gap: 2px; justify-content: flex-end; z-index: 1;
}
.item-grade .contador { min-width: 17px; height: 17px; font-size: 10.5px; padding: 0 4px; }
.item-grade .sla-icone { font-size: 13px; }
.item-pendente {
  width: 9px; height: 9px; margin: 4px; border-radius: 50%; background: var(--ouro);
  box-shadow: 0 0 0 2px var(--input);
}
/* ativa: borda dourada (a barra lateral do modo lista não faz sentido em cartão arredondado) */
.item-grade.ativa { background: var(--marca-fundo); border-color: var(--ouro); box-shadow: 0 0 0 1px var(--ouro); }
.item-grade.ativa::before { display: none; }
.item-grade.item-fixada { box-shadow: inset 0 3px 0 var(--ouro); }
.item-grade.item-fixada.ativa { box-shadow: inset 0 3px 0 var(--ouro), 0 0 0 1px var(--ouro); }
.item-grade.item-fechada .avatar { opacity: .55; }
.item-grade.item-fechada .item-nome { color: var(--texto-3); }
/* anel do estado no cartão: fundo do cartão no vão (não o da página) */
.item-grade .avatar-story { box-shadow: 0 0 0 2px var(--input), 0 0 0 4px var(--cor-estado); }
.item-grade .avatar-prio.avatar-story { box-shadow: 0 0 0 2px var(--cor-prio), 0 0 0 3.5px var(--input), 0 0 0 5.5px var(--cor-estado); }
.item-grade:hover .avatar-story, .item-grade.ativa .avatar-story { box-shadow: 0 0 0 2px var(--fundo-3), 0 0 0 4px var(--cor-estado); }
.item-grade:hover .avatar-prio.avatar-story, .item-grade.ativa .avatar-prio.avatar-story { box-shadow: 0 0 0 2px var(--cor-prio), 0 0 0 3.5px var(--fundo-3), 0 0 0 5.5px var(--cor-estado); }

/* 4 colunas quando a COLUNA da lista (não a janela) tem ≥ 440px e a tela é larga (≥ 900px):
   decidido por container query em .coluna-lista. No celular (lista ocupa a tela toda, ≤ 760px)
   ficam sempre 3. Hoje a coluna no desktop mede 340–360px, então 4 só entra se ela crescer
   (ex.: coluna redimensionável no futuro) — a regra já fica pronta. */
.coluna-lista { container-type: inline-size; container-name: coluna-lista; }
@media (min-width: 900px) {
  @container coluna-lista (min-width: 440px) {
    .lista.modo-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
}

/* celular em modo grade: as abas de etapa viram UMA linha rolável (em vez de 3 linhas),
   para a grade começar mais alto. Fora do grade continua o 3×2 de 20/09. */
@media (max-width: 640px) {
  .coluna-lista[data-modo-lista="grade"] .abas-etapa {
    display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 1px;
  }
  .coluna-lista[data-modo-lista="grade"] .abas-etapa::-webkit-scrollbar { display: none; }
  .coluna-lista[data-modo-lista="grade"] .aba-etapa,
  .coluna-lista[data-modo-lista="grade"] .aba-etapa-todas {
    flex: none; grid-template-columns: 8px auto auto; grid-template-areas: "cor nome num";
    padding: 5px 9px; column-gap: 5px;
  }
  .coluna-lista[data-modo-lista="grade"] .aba-etapa-num { font-size: 12px; }
}

/* ---------- painel de conversas no celular (20/09 noite, Daniel) ----------
   Tela estreita (≤ 760px, o mesmo corte em que estilo.css escondia a lista) com conversa aberta:
   web/js/inbox.js liga .painel-conversas em #tela-inbox e data-painel="aberto|recolhido" em #coluna-lista.
   A tela vira duas linhas: em cima o painel (altura própria), embaixo a conversa com o resto.
     painel expandido: abas de etapa (todas visíveis, quebrando linha — 20/09 noite: o "+N"
       de linha única não coube — Daniel pediu tudo clicável sem esconder nada) + grade 3×3
       (rola por dentro) + puxador ⌃
     painel recolhido: abas de etapa + puxador ⌄
   Busca, Ordenar/Mostrar, selects, contagem e faixa da busca ficam de fora do painel: o "‹" do
   cabeçalho da conversa volta para a lista cheia, onde tudo isso continua. */
.painel-puxador {
  display: flex; align-items: center; justify-content: center; flex: none; width: 100%; height: 22px;
  margin: 0; padding: 0; border: 0; border-top: 1px solid var(--borda); background: var(--fundo-2);
  color: var(--texto-3); font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
}
.painel-puxador:hover, .painel-puxador:focus-visible { color: var(--ouro); outline: none; }
@media (max-width: 760px) {
  /* uma coluna só, largura da janela, nada vaza para o lado (painel + conversa empilhados).
     #tela-inbox no seletor: precisa ganhar do .inbox:has(.coluna-ficha.ficha-expandida) de
     ficha-expandir.css (0,3,0), que senão devolve as 3 colunas do desktop quando a ficha ficou
     "expandida" gravada no navegador. */
  #tela-inbox.painel-conversas, .inbox.painel-conversas {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    width: 100%; max-width: 100vw; min-width: 0; overflow: hidden;
  }
  .inbox.painel-conversas > .coluna { min-width: 0; max-width: 100%; width: auto; }
  /* a ficha continua a de tela estreita (fixa por cima, só com .aberta — estilo.css ≤ 1180px) */
  .inbox.painel-conversas[data-modo="conversa"] .coluna-ficha:not(.aberta) { display: none; }
  .inbox.painel-conversas[data-modo="conversa"] .coluna-lista { display: flex; border-bottom: 1px solid var(--borda); }
  /* só abas de etapa + grade + puxador: some a linha da busca (logo, campo, funil, modo, nova),
     a faixa "Atendimento real · Modo demonstração" (#modo-painel), ordenar/mostrar/pílulas,
     a contagem/"limpar filtros" e a faixa da busca (#faixa-busca, criada pelo inbox.js) */
  .painel-conversas .coluna-lista .busca-linha,
  .painel-conversas .coluna-lista .modo-painel,
  .painel-conversas .coluna-lista .lista-resumo,
  .painel-conversas .coluna-lista .faixa-busca,
  .painel-conversas .coluna-lista .filtros-corpo > :not(.abas-etapa) { display: none !important; }
  .painel-conversas .lista-topo { padding: 6px 8px; gap: 0; }
  .painel-conversas .coluna-lista .abas-etapa {
    display: flex; flex-wrap: wrap; gap: 4px;
  }
  .painel-conversas .coluna-lista .aba-etapa,
  .painel-conversas .coluna-lista .aba-etapa-todas {
    flex: none; grid-template-columns: 8px auto auto; grid-template-areas: "cor nome num";
    padding: 5px 9px; column-gap: 5px;
  }
  .painel-conversas .coluna-lista .aba-etapa-num { font-size: 12px; }
  /* grade: 3 colunas que cabem na largura da coluna (repetido aqui com peso maior, para nenhum
     .lista/.item genérico devolver a lista em bloco ou o cartão em 34px+1fr+auto).
     3 linhas de cartão: 8px de padding + 3×96px + 2×8px de gap + 8px = 320px; o resto rola por dentro */
  .painel-conversas .coluna-lista .lista.modo-grade {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; min-width: 0;
    flex: none; max-height: 320px; overflow-y: auto; overflow-x: hidden;
  }
  .painel-conversas .coluna-lista .item.item-grade { display: flex; min-width: 0; max-width: 100%; width: auto; margin: 0; }
  .painel-conversas .coluna-lista[data-painel="recolhido"] .lista { display: none; }
}

/* ---------- crescer ao passar o mouse ---------- */
.lista { overflow-x: hidden; padding: 0 4px; }
.item {
  margin: 0 -4px; border-radius: 8px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.item:hover, .item:focus-visible {
  transform: scale(1.015);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .18);
  position: relative; z-index: 1;
  outline: none;
}
.item:focus-visible { outline: 2px solid var(--ouro); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  .item { transition: none; }
  .item:hover, .item:focus-visible { transform: none; box-shadow: none; }
}

/* ---------- Promissor: estrela, linha fixada no topo e botões do chat ---------- */
.selo-promissor { flex: none; color: var(--ouro); font-size: 12px; line-height: 1; }

.item-fixada { background: rgba(202, 164, 97, .08); box-shadow: inset 3px 0 0 var(--ouro); }
.item-fixada.ativa { background: var(--marca-fundo); }
.selo-fixada { background: rgba(202, 164, 97, .14); color: var(--ouro); border-color: rgba(202, 164, 97, .45); font-weight: 600; }
.item-encerrou {
  border: 1px solid var(--borda); background: transparent; color: var(--texto-3); cursor: pointer;
  font-size: 10.5px; padding: 1px 7px; border-radius: 999px; line-height: 1.4; white-space: nowrap;
}
.item-encerrou:hover, .item-encerrou:focus-visible { color: var(--texto); border-color: var(--borda-forte); }

.botao-promissor, .botao-encerrou {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 10px;
  border-radius: 999px; border: 1px solid var(--borda); background: transparent;
  color: var(--texto-2); cursor: pointer; white-space: nowrap; line-height: 1.4;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.botao-promissor:hover, .botao-encerrou:not(:disabled):hover { border-color: var(--ouro); color: var(--texto); }
.botao-promissor.ativo { color: var(--ouro); border-color: var(--ouro); background: rgba(202, 164, 97, .12); font-weight: 600; }
.botao-encerrou.ativo, .botao-encerrou:disabled { cursor: default; color: var(--texto-3); border-style: dashed; }

@media (max-width: 640px) {
  .botao-promissor { padding: 3px 8px; }
  .botao-encerrou { font-size: 11px; padding: 3px 7px; }
}

/* Menu do botão direito na lista (web/js/menu-conversa.js). Cores pelos tokens: tema claro e escuro. */
.lista .item { -webkit-touch-callout: none; }
.menu-contexto {
  position: fixed; z-index: 1000; min-width: 210px; max-width: calc(100vw - 16px);
  display: flex; flex-direction: column; gap: 2px; padding: 4px;
  border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo-2);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
  animation: menu-contexto-entra .08s ease-out;
}
.menu-contexto-item {
  text-align: left; padding: 8px 12px; border: none; border-radius: 7px; background: none;
  color: var(--texto); font: inherit; font-size: 13.5px; cursor: pointer; white-space: nowrap;
}
.menu-contexto-item:hover, .menu-contexto-item:focus-visible, .menu-contexto-item:focus {
  background: var(--fundo-3); color: var(--ouro); outline: none;
}
@keyframes menu-contexto-entra { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .menu-contexto { animation: none; } }
@media (pointer: coarse) { .menu-contexto-item { padding: 12px 14px; font-size: 15px; } }

/* ---------- Abertas | Fechadas | Todas (19/09): mesmo segmentado do "Ordenar por" ---------- */
.status-lista .ordem-lista-opcoes { grid-template-columns: repeat(3, 1fr); }
/* busca em tudo ignora o status (procura em abertas e fechadas): atenua como os outros filtros */
.busca-em-tudo .status-lista { opacity: .45; transition: opacity .15s; }
.busca-em-tudo .status-lista:hover { opacity: .75; }
/* conversa fechada: atenuada na lista, volta ao normal no hover/ativa */
.item-fechada { opacity: .62; }
.item-fechada:hover, .item-fechada:focus-visible, .item-fechada.ativa { opacity: 1; }
.item-fechada .item-nome { color: var(--texto-2); }
.selo-fechada { font-size: 10.5px; padding: 1px 6px; color: var(--texto-3); }
/* botão "Fechar"/"Reabrir" do topo: discreto como o "Conversa encerrou" */
.botao-fechar-conversa.ativo { color: var(--texto-2); border-style: solid; cursor: pointer; }
/* aviso com botão ("Conversa fechada · Desfazer") */
.aviso-acao { display: flex; align-items: center; gap: 12px; }
.aviso-acao .aviso-botao { color: var(--ouro); font-weight: 600; text-decoration: none; }
.aviso-acao .aviso-botao:hover, .aviso-acao .aviso-botao:focus-visible { text-decoration: underline; }

/* ---------- droplist das variáveis do card completo (web/js/lista-droplist.js, 20/09 noite) ----------
   Clicar na etapa, no tipo de caso, no responsável ou no avatar (estado do fluxo) abre a listinha
   para trocar ali mesmo. Mesmo visual do menu do botão direito. */
.lista:not(.lista-minimalista) .item [data-var] { cursor: pointer; }
.lista:not(.lista-minimalista) .item [data-var]:hover { filter: brightness(1.15); }
.lista:not(.lista-minimalista) .item [data-var]:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; border-radius: 6px; }
.droplist { max-height: min(60vh, 420px); overflow: auto; overscroll-behavior: contain; }
.menu-contexto-titulo { padding: 6px 12px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); }
.droplist-opcao { display: flex; align-items: center; gap: 8px; }
.droplist-ponto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--cor-opcao, var(--texto-3)); }
.droplist-rotulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.droplist-check { flex: none; width: 14px; text-align: right; color: var(--ouro); font-weight: 700; }
.droplist-opcao.marcada { color: var(--texto); font-weight: 600; }

/* Acesso à demonstração sempre visível, inclusive com o menu da logo fechado. */
.modo-painel {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 6px 12px; padding: 6px 8px; border: 1px solid var(--borda);
  border-radius: 8px; font-size: 11px; color: var(--texto-2);
}
.modo-painel a { color: var(--texto); font-weight: 600; text-underline-offset: 3px; }
.modo-painel a:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
.modo-painel[data-demonstracao="true"] { background: var(--marca-fundo); border-color: var(--ouro); }