/* COFRE — protótipo web (G2). Padrão visual da suíte Tri7, sem framework.
 *
 * Por que sem framework: o protótipo precisa ser conferível por comando (`tsc`, `node --test`) e
 * lido por inteiro numa revisão. O que ele NÃO pode fazer é inventar identidade visual própria —
 * então as cores, os raios e as escalas vêm dos tokens da suíte (§3 do PADROES-SUITE): teal
 * #0F5C5E como primária, laranja #F5A018 como acento, cores semânticas, tema claro e escuro.
 *
 * Regra que a suíte cobra e que aqui vale igual: cor nova nasce TOKEN. Não existe `#fff` solto no
 * meio de um componente — isso é exatamente o que quebra o tema escuro.
 */

:root {
  /* marca */
  --primaria: #0f5c5e;
  --primaria-forte: #0a4446;
  --primaria-fraca: #e6f0f0;
  --acento: #f5a018;
  --acento-forte: #d98a0c;
  --acento-fraco: #fdf1dd;

  /* superfícies */
  --fundo: #f6f7f8;
  --cartao: #ffffff;
  --cartao-2: #fbfcfc;
  --borda: #dfe3e6;
  --borda-forte: #c7ced3;

  /* texto */
  --texto: #16201f;
  --texto-suave: #5c6b6a;
  --texto-fraco: #8a9897;

  /* semânticas */
  --ok: #1d7a4c;
  --ok-fraco: #e4f4ea;
  --atencao: #9a6205;
  --atencao-fraco: #fdf3dc;
  --perigo: #a32020;
  --perigo-fraco: #fbe7e7;
  --info: #1b5f93;
  --info-fraco: #e6f1f9;

  /* escala */
  --r-pequeno: 8px;
  --r: 12px;
  --r-grande: 16px;
  --sombra: 0 1px 2px rgb(22 32 31 / 6%), 0 4px 12px rgb(22 32 31 / 5%);
  --sombra-forte: 0 8px 28px rgb(22 32 31 / 14%);
  --foco: 0 0 0 3px rgb(245 160 24 / 45%);
}

:root[data-tema="escuro"] {
  --primaria: #4fb3b5;
  --primaria-forte: #6ec8ca;
  --primaria-fraca: #16302f;
  --acento: #f9b64a;
  --acento-forte: #ffc971;
  --acento-fraco: #38290f;

  --fundo: #0e1413;
  --cartao: #161e1d;
  --cartao-2: #1b2423;
  --borda: #2a3534;
  --borda-forte: #3b4847;

  --texto: #e8efee;
  --texto-suave: #a3b2b0;
  --texto-fraco: #7c8b8a;

  --ok: #5fd08e;
  --ok-fraco: #12291d;
  --atencao: #f0c164;
  --atencao-fraco: #302614;
  --perigo: #f08b8b;
  --perigo-fraco: #2e1717;
  --info: #7bbbe8;
  --info-fraco: #142735;

  --sombra: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 14px rgb(0 0 0 / 30%);
  --sombra-forte: 0 10px 34px rgb(0 0 0 / 55%);
}

* { box-sizing: border-box; }

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

body {
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Nada pode passar da borda: o celular é o caso base. */
  overflow-x: hidden;
}

a { color: var(--primaria); }

:focus-visible {
  outline: none;
  box-shadow: var(--foco);
  border-radius: var(--r-pequeno);
}

/* `hidden` tem de ESCONDER, sempre.
 *
 * O atributo `hidden` vale por uma regra da folha do próprio navegador (`display: none`), e qualquer
 * `display` declarado aqui a vence — não por especificidade, mas por origem: regra de autor ganha de
 * regra do navegador. O menu de seções aprendeu isso do jeito caro: `.menu-lista { display: grid }`
 * fazia a lista recolhida aparecer aberta, com o gatilho ao lado dizendo "recolhido". O `!important`
 * aqui não é força bruta, é a única forma de devolver ao atributo o significado que ele deveria ter. */
[hidden] { display: none !important; }

/* ─────────────────────────── estrutura ─────────────────────────── */

.faixa-topo {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Faixa fixa é SEMPRE opaca (regra da suíte): translúcida come o texto por baixo. */
  background: var(--cartao);
  border-bottom: 1px solid var(--borda);
  box-shadow: var(--sombra);
}

.faixa-topo .interno {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 16px;
  min-width: 0;
}

.marca {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: -0.01em;
  min-width: 0;
}

.marca .selo {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--primaria);
  color: #fff;
  font-size: 16px;
  flex: none;
}

:root[data-tema="escuro"] .marca .selo { color: #0e1413; }

/* O bloco de texto da marca é uma COLUNA: "Cofre" em cima, "Acessos e Serviços" embaixo, cada um em
 * UMA linha. Antes era um `<span>` solto, inline, sem regra nenhuma — e o subtítulo quebrava onde
 * coubesse. No celular ele virava "Acessos / e / Serviços", três linhas empilhadas ao lado do
 * logotipo. */
.marca .texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  line-height: 1.25;
}
.marca .nome { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca .sub {
  font-size: 11px;
  color: var(--texto-fraco);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.espaco-flex { flex: 1 1 auto; min-width: 0; }

#seletor-espaco { max-width: 220px; }

/* Em tela estreita o cabeçalho passa a ocupar DUAS linhas.
 *
 * Não é preferência: a 390 px sobram ~358 px, e o seletor (220) mais tema, Sair e espaçamentos já
 * consomem ~336 — restam ~22 px para o logotipo e o nome. Numa linha só, alguma coisa teria de ser
 * cortada, sobreposta ou escondida. Com duas linhas cabe tudo inteiro: marca em cima, controles
 * embaixo, o seletor ocupando a largura que tiver. */
@media (max-width: 560px) {
  .faixa-topo .interno { flex-wrap: wrap; row-gap: 8px; }
  .marca { flex: 1 1 100%; }
  .espaco-flex { display: none; }
  /* `width: auto` é o que faz o seletor dividir a segunda faixa com o tema e o Sair. A regra global
   * `select, input, textarea { width: 100% }` o fazia ocupar a linha inteira e empurrar os dois
   * botões para uma terceira faixa — correto, mas desperdiçando altura de tela. */
  #seletor-espaco { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; }
}

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px;
  min-width: 0;
}

/* ─────────────────────────── controles ─────────────────────────── */

button, .botao {
  font: inherit;
  cursor: pointer;
  border-radius: var(--r-pequeno);
  border: 1px solid var(--borda-forte);
  background: var(--cartao);
  color: var(--texto);
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  transition: background 120ms, border-color 120ms;
}

button:hover:not(:disabled) { background: var(--cartao-2); border-color: var(--texto-fraco); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

button.primaria { background: var(--primaria); border-color: var(--primaria); color: #fff; font-weight: 600; }
button.primaria:hover:not(:disabled) { background: var(--primaria-forte); border-color: var(--primaria-forte); }
:root[data-tema="escuro"] button.primaria { color: #0e1413; }

button.acento { background: var(--acento); border-color: var(--acento); color: #2a1c00; font-weight: 600; }
button.acento:hover:not(:disabled) { background: var(--acento-forte); border-color: var(--acento-forte); }

button.discreta { border-color: transparent; background: transparent; color: var(--texto-suave); }
button.discreta:hover:not(:disabled) { background: var(--cartao-2); color: var(--texto); }

button.perigo { color: var(--perigo); border-color: var(--perigo); background: transparent; }
button.perigo:hover:not(:disabled) { background: var(--perigo-fraco); }

button.pequena { min-height: 32px; padding: 5px 9px; font-size: 13px; }

select, input, textarea {
  font: inherit;
  color: var(--texto);
  background: var(--cartao);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-pequeno);
  padding: 8px 10px;
  min-height: 38px;
  width: 100%;
  min-width: 0;
}

input[type="checkbox"] { width: auto; min-height: 0; }

label.campo { display: block; margin-bottom: 10px; }
label.campo > .rotulo {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--texto-suave);
  margin-bottom: 4px;
}
label.campo .ajuda { font-size: 12px; color: var(--texto-fraco); margin-top: 4px; }
/* Campo Nome é maior e em linha própria (regra da suíte). */
label.campo.nome input { min-height: 44px; font-size: 16px; }

/* ─────────────────────────── pills (abas) ─────────────────────────── */

/* Abas em pill, não abas "secas": padrão visual suave da suíte.
 *
 * Elas QUEBRAM LINHA; não rolam na horizontal. A versão anterior usava `overflow-x: auto`, e no
 * celular isso produzia uma barra de rolagem na faixa com "Da organização" cortado na borda — opções
 * que existem mas não se veem. Faixa que rola esconde escolha: quem não sabe que há mais à direita
 * não arrasta. Quebrar linha ocupa mais altura e mostra tudo, que é a troca certa numa tela de
 * navegação. */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0 8px;
}

.pill {
  border-radius: 999px;
  border: 1px solid var(--borda);
  background: var(--cartao);
  color: var(--texto-suave);
  padding: 7px 13px;
  white-space: nowrap;
  font-size: 14px;
  min-height: 36px;
  flex: none;
  /* Rede de segurança: nenhuma aba pode ser mais larga que a faixa. Em tela muito estreita o
   * rótulo passa a quebrar dentro da própria pill — feio é melhor que fora da tela. */
  max-width: 100%;
}

@media (max-width: 420px) {
  .pill { white-space: normal; }
}

.pill[aria-selected="true"] {
  background: var(--primaria);
  border-color: var(--primaria);
  color: #fff;
  font-weight: 600;
}
:root[data-tema="escuro"] .pill[aria-selected="true"] { color: #0e1413; }

.pill .conta {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px;
  background: var(--primaria-fraca);
  color: var(--primaria);
  font-size: 12px; font-weight: 700;
}
.pill[aria-selected="true"] .conta { background: rgb(255 255 255 / 25%); color: inherit; }

/* ─────────────────── menu de seções (substitui as abas no celular) ─────────────────── */

.menu-secao { margin: 4px 0 10px; }

.menu-gatilho {
  width: 100%;
  justify-content: flex-start;
  gap: 8px;
  min-height: 42px;
}
.menu-gatilho .atual { font-weight: 600; }
/* A seta é empurrada para a borda: dá o ponto de toque e diz, sem texto, que aquilo abre. */
.menu-gatilho .seta { margin-left: auto; color: var(--texto-fraco); }

.menu-lista {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  padding: 6px;
  border: 1px solid var(--borda);
  border-radius: var(--r);
  background: var(--cartao);
  box-shadow: var(--sombra);
}

.menu-opcao {
  width: 100%;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  border-color: transparent;
}
.menu-opcao:hover:not(:disabled) { background: var(--cartao-2); }
.menu-opcao[aria-current="true"] {
  background: var(--primaria);
  border-color: var(--primaria);
  color: #fff;
  font-weight: 600;
}
:root[data-tema="escuro"] .menu-opcao[aria-current="true"] { color: #0e1413; }

.menu-gatilho .conta,
.menu-opcao .conta {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px;
  background: var(--primaria-fraca);
  color: var(--primaria);
  font-size: 12px; font-weight: 700;
  flex: none;
}
.menu-opcao[aria-current="true"] .conta { background: rgb(255 255 255 / 25%); color: inherit; }

/* ─────────────────────────── sanfona (painel recolhível) ─────────────────────────── */

.sanfona { padding: 0; }

.sanfona-cabeca {
  width: 100%;
  justify-content: flex-start;
  gap: 9px;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 11px 12px;
  min-height: 44px;
  flex-wrap: wrap;
}
.sanfona-cabeca:hover:not(:disabled) { background: var(--cartao-2); }
.sanfona-titulo { font-weight: 600; }
.sanfona-cabeca .seta { margin-left: auto; color: var(--texto-fraco); }

.sanfona-corpo { padding: 0 12px 12px; }

/* ─────────────────────────── cartões ─────────────────────────── */

.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  box-shadow: var(--sombra);
  padding: 14px;
  min-width: 0;
  overflow: hidden;
}

.grade {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .grade.duas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .grade.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cabeca-secao {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0 10px;
}
.cabeca-secao .olho {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--acento);
}
.cabeca-secao h2 { margin: 2px 0 0; font-size: 19px; letter-spacing: -0.01em; }
.cabeca-secao p { margin: 4px 0 0; font-size: 13px; color: var(--texto-suave); max-width: 62ch; }

/* ─────────────────────────── selo (badge) ─────────────────────────── */

.selo-txt {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px; font-weight: 600;
  background: var(--cartao-2); color: var(--texto-suave);
  border: 1px solid var(--borda);
  white-space: nowrap;
  max-width: 100%;
}
.selo-txt.ok { background: var(--ok-fraco); color: var(--ok); border-color: transparent; }
.selo-txt.atencao { background: var(--atencao-fraco); color: var(--atencao); border-color: transparent; }
.selo-txt.perigo { background: var(--perigo-fraco); color: var(--perigo); border-color: transparent; }
.selo-txt.info { background: var(--info-fraco); color: var(--info); border-color: transparent; }
.selo-txt.acento { background: var(--acento-fraco); color: var(--atencao); border-color: transparent; }

.selos { display: flex; flex-wrap: wrap; gap: 5px; }

/* ─────────────────────────── item ─────────────────────────── */

.item {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  padding: 12px;
  min-height: 0;
  border-radius: var(--r);
  border: 1px solid var(--borda);
  background: var(--cartao);
}
.item:hover { background: var(--cartao-2); }
.item[aria-current="true"] {
  /* Selecionado se distingue por COR, não por intensidade (regra da suíte). */
  background: var(--acento-fraco);
  border-color: var(--acento);
  box-shadow: inset 3px 0 0 var(--acento);
}

.item .icone {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--primaria-fraca);
  color: var(--primaria);
  font-size: 17px;
}
.item .corpo { min-width: 0; flex: 1 1 auto; }
.item .titulo {
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item .linha2 { font-size: 12.5px; color: var(--texto-suave); margin-top: 2px; }

/* ─────────────────────────── estados ─────────────────────────── */

.vazio {
  border: 1px dashed var(--borda-forte);
  border-radius: var(--r);
  padding: 26px 18px;
  text-align: center;
  color: var(--texto-suave);
  background: transparent;
}
.vazio .titulo { font-weight: 600; color: var(--texto); margin-bottom: 4px; }
.vazio .dica { font-size: 13px; }

.aviso {
  border-radius: var(--r);
  padding: 11px 13px;
  font-size: 13.5px;
  border: 1px solid var(--borda);
  background: var(--cartao-2);
  display: flex; gap: 9px; align-items: flex-start;
}
.aviso .sigla { flex: none; font-size: 15px; line-height: 1.3; }
.aviso.atencao { background: var(--atencao-fraco); border-color: transparent; color: var(--atencao); }
.aviso.perigo { background: var(--perigo-fraco); border-color: transparent; color: var(--perigo); }
.aviso.info { background: var(--info-fraco); border-color: transparent; color: var(--info); }
.aviso b { color: inherit; }

.esqueleto {
  border-radius: var(--r);
  background: linear-gradient(90deg, var(--cartao-2) 25%, var(--borda) 50%, var(--cartao-2) 75%);
  background-size: 200% 100%;
  animation: desliza 1.2s linear infinite;
  height: 62px;
}
@keyframes desliza { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } }

/* ─────────────────────────── painel lateral / diálogo ─────────────────────────── */

.fundo-modal {
  position: fixed; inset: 0; z-index: 40;
  background: rgb(10 16 15 / 55%);
  /* flex, não grid: o filho de grid tem `min-width: auto` e se RECUSA a encolher abaixo do
     conteúdo — foi assim que o diálogo ficou mais largo que a tela a 390 px e o conteúdo saiu pela
     direita. Como o fundo é `fixed`, isso não aparecia em `document.scrollWidth`: a tela parecia
     certa na medição e estava errada no olho. */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}
/* A margem em volta entra a 760 px, e não a 720, para acompanhar o `max-width: 720px` do diálogo.
 * Com a fronteira em 720 a largura do diálogo ANDAVA PARA TRÁS: 719 px de janela dava um diálogo de
 * 719, e 720 px dava um de 680, porque a margem nascia antes de haver espaço para ela. Largura que
 * diminui quando a janela cresce faz a forma das ações piscar de exposta para menu e voltar. */
@media (min-width: 760px) { .fundo-modal { align-items: center; padding: 20px; } }

.dialogo {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--r-grande) var(--r-grande) 0 0;
  box-shadow: var(--sombra-forte);
  width: 100%;
  /* 720 px, e não 640: com 640 o rodapé tinha 608 px úteis e as seis ações pediam ~662 — o Negar
   * sobrava numa linha só dele. Alargar o diálogo é mais honesto que fingir que cabe. */
  max-width: 720px;
  min-width: 0;
  /* dvh, não vh: no celular a barra do navegador entra e sai. */
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
@media (min-width: 760px) { .dialogo { border-radius: var(--r-grande); } }

.dialogo > header {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--borda);
  flex: none;
}
.dialogo > header .quadrado {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--primaria-fraca); color: var(--primaria);
}
.dialogo > header h3 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.dialogo > header p { margin: 2px 0 0; font-size: 12.5px; color: var(--texto-suave); overflow-wrap: anywhere; }

/* Só o miolo rola: os botões ficam sempre à vista. */
.dialogo > .miolo { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 14px 16px; }
.dialogo > footer {
  flex: none;
  /* Cinco ações não cabem numa linha a 390 px: elas QUEBRAM, não empurram o diálogo. */
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--borda);
  background: var(--cartao);
}
.dialogo > footer button { flex: 1 1 auto; min-width: 0; justify-content: center; }
@media (min-width: 720px) { .dialogo > footer { justify-content: flex-end; } }
/* Parar de esticar depende do espaço no RODAPÉ, não do tamanho da janela: a 640 px de janela o
 * Negar chegou a ocupar 606 px sozinho porque continuava mandado por uma media query. */
@container (min-width: 672px) { .dialogo > footer button { flex: 0 0 auto; } }

/* Fechar no canto do cabeçalho. Alvo de 40 px: dedo não acerta ✕ de 20 px. */
.dialogo > header .fechar-x {
  margin-left: auto;
  flex: none;
  width: 40px; min-width: 40px; height: 40px; min-height: 40px;
  padding: 0;
  justify-content: center;
  border-color: transparent;
  background: transparent;
  color: var(--texto-suave);
  font-size: 15px;
}
.dialogo > header .fechar-x:hover:not(:disabled) { background: var(--cartao-2); color: var(--texto); }

/* ─────────────────── ações do diálogo: duas formas, um conjunto ─────────────────── */

/* A forma das ações segue a largura do DIÁLOGO, não a da janela.
 *
 * A primeira versão usava `@media (min-width: 720px)` e estava errada por um motivo que só aparece
 * numa faixa: o diálogo cresce até 640 px e PARA. De 720 px de janela em diante ele tem sempre a
 * mesma largura — então uma janela de 800 px trocava para a forma larga e enfiava cinco botões em
 * 640 px, com o Negar sobrando na linha de baixo. Janela larga não é o mesmo que diálogo largo.
 *
 * `container-type: inline-size` faz o rodapé virar a referência, e `@container` pergunta o que
 * importa: "cabe AQUI DENTRO?". */
.dialogo > footer { container-type: inline-size; }

.acoes { flex: 1 1 100%; gap: 8px; flex-wrap: wrap; align-items: center; }
.acoes-estreito.acoes-estreito { display: flex; }
.acoes-largo.acoes-largo { display: none; }
/* 680 px é a medida do grupo inteiro (seis botões + traço + espaçamentos). A forma exposta só
 * aparece quando ela CABE; abaixo disso, o menu. Assim não existe estado espremido. */
@container (min-width: 672px) {
  .acoes-estreito.acoes-estreito { display: none; }
  .acoes-largo.acoes-largo { display: flex; }
}

.acoes > button { flex: 1 1 auto; min-width: 0; justify-content: center; min-height: 44px; }
@media (min-width: 720px) {
  .acoes-largo > button { flex: 0 0 auto; min-height: 38px; }
}
/* No computador as seis ações formam UM grupo só, e o Negar é o último dele.
 *
 * Já tentei duas coisas piores. Primeiro um espaçador elástico, para empurrá-lo até a direita: a
 * linha não cabia, o espaçador quebrava e o Negar caía embaixo — certo por acidente. Depois uma
 * quebra explícita com alinhamento à direita: aí ele ficava sozinho no canto inferior, parecendo
 * pertencer a outra coisa. Separar não é afastar. O que distingue o Negar é a COR e um traço
 * vertical antes dele; a posição continua sendo a do grupo, e quando a linha enche ele quebra junto
 * com os outros, alinhado com eles. */
.divisor-v {
  width: 1px;
  align-self: stretch;
  min-height: 24px;
  background: var(--borda-forte);
  margin: 0 3px;
  flex: none;
}

.mais-acoes { position: relative; flex: 1 1 auto; min-width: 0; }
.mais-acoes > button { width: 100%; justify-content: center; min-height: 44px; }
.mais-acoes .menu-lista { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 30; }
.mais-acoes .menu-lista button { width: 100%; justify-content: flex-start; min-height: 44px; }
/* Linha fina antes do Negar: nas duas formas ele fica separado das ações comuns. */
.separador { height: 1px; background: var(--borda); margin: 4px 2px; }

/* ─────────────────────────── tabela → cartões no celular ─────────────────────────── */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-fraco); padding: 8px 10px; border-bottom: 1px solid var(--borda); }
td { padding: 9px 10px; border-bottom: 1px solid var(--borda); vertical-align: top; }
tr:last-child td { border-bottom: none; }

/* Troca entre a forma larga (tabela) e a estreita (cartões).
 *
 * A classe aparece DUPLICADA de propósito. `.so-estreito` sozinho tem a mesma especificidade que
 * qualquer regra de layout de uma classe só — e `.lista-limpa { display: grid }`, logo abaixo neste
 * arquivo, vencia por vir depois. O resultado era a trilha desenhando a tabela E os 200 cartões no
 * computador: 45.491 px de conteúdo duplicado que ninguém pediu, e que nem aparecia como erro porque
 * duplicar não estoura a largura. `.x.x` sobe a especificidade para (0,2,0) e passa a vencer
 * independentemente da ORDEM, inclusive de regra que alguém acrescente depois. */
.so-largo.so-largo { display: none; }
.so-estreito.so-estreito { display: block; }
@media (min-width: 900px) {
  .so-largo.so-largo { display: block; }
  .so-estreito.so-estreito { display: none; }
}

.lista-limpa { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

.linhas { display: grid; gap: 2px; min-width: 0; }
/* Chave e valor quebram em duas linhas quando não cabem lado a lado, em vez de esticar a caixa. */
.linha-dado { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13.5px; padding: 6px 0; border-bottom: 1px solid var(--borda); min-width: 0; }
.linha-dado:last-child { border-bottom: none; }
.linha-dado .chave { color: var(--texto-suave); flex: 0 1 auto; min-width: 34%; overflow-wrap: anywhere; }
.linha-dado .valor { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.guardado { overflow-wrap: anywhere; }
/* G3 · E7 — revelação. A linha do campo vira coluna de itens que quebram: valor, botões e a nota. */
.linha-dado .valor:has(.botao-mini), .linha-dado .valor:has(.segredo-aberto) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.botao-mini { font-size: 12.5px; padding: 2px 10px; border-radius: 999px; min-height: 28px; }
.segredo-aberto {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  background: var(--fundo-suave, rgba(127,127,127,.12)); border: 1px solid var(--borda-forte);
  border-radius: 6px; padding: 2px 8px; overflow-wrap: anywhere; min-width: 0; max-width: 100%;
  /* `pre-wrap`: espaços duplos, espaços nas pontas e quebras de linha FAZEM parte de um segredo.
     Sem isto a tela mostraria (e a seleção manual copiaria) um texto diferente do valor. */
  white-space: pre-wrap;
  user-select: all;
}
.nota-segredo { flex-basis: 100%; font-size: 12px; color: var(--texto-fraco); }
.linha-dado .valor.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }

.guardado {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--texto-fraco);
  border: 1px dashed var(--borda-forte);
  border-radius: 999px;
  padding: 2px 10px;
}

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.entrada {
  max-width: 440px;
  margin: 8vh auto;
  padding: 0 16px;
}

.perfil-teste {
  display: flex; gap: 9px; align-items: center;
  width: 100%; text-align: left;
  padding: 9px 11px;
  border-radius: var(--r-pequeno);
  border: 1px solid var(--borda);
  background: var(--cartao);
  min-height: 0;
}
.perfil-teste:hover { background: var(--cartao-2); }
.perfil-teste .quem { min-width: 0; }
.perfil-teste .quem b { display: block; font-size: 14px; }
.perfil-teste .quem span { display: block; font-size: 12px; color: var(--texto-suave); }

.rodape { color: var(--texto-fraco); font-size: 12px; padding: 22px 16px 34px; text-align: center; }

/* ─────────────────────────── lista de acessos ─────────────────────────── */

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.lista-acessos { display: grid; gap: 10px; min-width: 0; }
#lista-controles { display: grid; gap: 8px; }
.busca-lista input { width: 100%; }

.atalhos-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.atalho-lista {
  display: inline-flex; align-items: baseline; gap: 7px;
  border: 1px solid var(--borda); background: var(--cartao); border-radius: var(--r);
  padding: 7px 12px; font-size: 13px; color: var(--texto-suave); text-align: left;
}
.atalho-lista b { font-size: 17px; color: var(--texto); font-variant-numeric: tabular-nums; }
.atalho-lista.atencao b { color: var(--atencao); }
.atalho-lista[aria-pressed="true"] { border-color: var(--primaria); box-shadow: inset 0 0 0 1px var(--primaria); color: var(--texto); }

.filtro-lista { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.filtro-lista .pills { padding: 0; }
.filtro-lista .pill { min-height: 32px; padding: 4px 11px; font-size: 13px; }
.rotulo-lista { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-fraco); min-width: 64px; }
.pill[aria-pressed="true"] { background: var(--primaria); border-color: var(--primaria); color: #fff; font-weight: 600; }
:root[data-tema="escuro"] .pill[aria-pressed="true"] { color: #0e1413; }

.caixa-lista { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--r); background: var(--cartao); }
.tabela-lista { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela-lista thead th {
  text-align: left; padding: 0; border-bottom: 1px solid var(--borda); white-space: nowrap;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-suave);
}
.ordem-lista {
  border: 0; background: transparent; min-height: 0; padding: 10px 12px; width: 100%;
  justify-content: flex-start; gap: 4px; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
}
.ordem-lista .seta { color: var(--primaria); }
.tabela-lista td { padding: 8px 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela-lista tbody tr:last-child td { border-bottom: 0; }
.tabela-lista tbody tr[data-linha-item] { cursor: pointer; }
.tabela-lista tbody tr[data-linha-item]:hover { background: var(--cartao-2); }
.tabela-lista tbody tr[aria-current="true"] { background: var(--acento-fraco); }
.grupo-lista th {
  text-align: left; padding: 6px 12px; background: var(--cartao-2); border-bottom: 1px solid var(--borda);
  font-size: 12.5px; color: var(--texto-suave); font-weight: 600;
}
.grupo-lista .conta { font-weight: 400; color: var(--texto-fraco); margin-left: 4px; }

.col-nome { min-width: 220px; }
.nome-celula { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nome-lista {
  display: flex; align-items: center; gap: 10px; border: 0; background: transparent;
  padding: 0; min-height: 0; text-align: left; min-width: 0; flex: 1 1 auto;
}
.nome-lista:hover:not(:disabled) { background: transparent; }
.nome-lista .icone {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: 8px; background: var(--primaria-fraca); color: var(--primaria); font-size: 15px;
}
.nome-lista .corpo { min-width: 0; display: grid; }
.nome-lista .titulo { font-weight: 600; overflow-wrap: anywhere; }
.nome-lista .endereco { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--texto-fraco); overflow-wrap: anywhere; }
.col-tipo, .col-grupo, .col-dono { color: var(--texto-suave); }

.estado-lista { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.estado-lista::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--borda-forte); flex: none; }
.estado-lista.ok::before { background: var(--ok); }
.estado-lista.atencao { color: var(--atencao); }
.estado-lista.atencao::before { background: var(--atencao); }
.estado-lista.perigo { color: var(--perigo); font-weight: 600; }
.estado-lista.perigo::before { background: var(--perigo); }
.estado-lista.info { color: var(--info); }
.estado-lista.info::before { background: var(--info); }

.rodape-lista { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 12.5px; color: var(--texto-fraco); }
.rodape-lista span:last-child { margin-left: auto; }

/* No celular a tabela vira linhas empilhadas: nome em cima, o resto em pares rótulo/valor. */
@media (max-width: 760px) {
  .caixa-lista { overflow: visible; border: 0; background: transparent; }
  .tabela-lista, .tabela-lista tbody { display: block; }
  .tabela-lista thead { display: none; }
  .tabela-lista tbody tr[data-linha-item] {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px;
    border: 1px solid var(--borda); border-radius: var(--r); background: var(--cartao); margin-bottom: 8px;
  }
  .tabela-lista tbody tr[aria-current="true"] { background: var(--acento-fraco); border-color: var(--acento); }
  .tabela-lista td { display: block; padding: 0; border: 0; min-width: 0; font-size: 13px; }
  .tabela-lista td.col-nome { grid-column: 1 / -1; min-width: 0; }
  .tabela-lista td[data-rotulo]::before {
    content: attr(data-rotulo); display: block; font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--texto-fraco); margin-bottom: 1px;
  }
  .tabela-lista .grupo-lista { display: block; margin: 6px 0; }
  .tabela-lista .grupo-lista th { display: block; border-radius: var(--r); border: 0; }
  .estado-lista { white-space: normal; }
  .rodape-lista span:last-child { margin-left: 0; }
}