/* ==========================================================================
   Digiliza — Página índice (uso interno)
   Reaproveita os tokens; só o layout da listagem mora aqui.
   ========================================================================== */

.pagina-indice { align-items: flex-start; }

.indice {
  width: 100%;
  max-width: var(--card-max-width);
  padding: var(--space-6) var(--space-5);

  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.indice__logo {
  height: var(--logo-height);
  width: auto;
  display: block;
  margin-bottom: var(--space-6);
}

.indice__titulo {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.indice__sub {
  margin: 0 0 var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.indice__lista { margin: 0; padding: 0; list-style: none; }

.indice__lista > li + li {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target-min);
  text-decoration: none;
}

.item__foto {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
}

.item__texto { display: flex; flex-direction: column; }

.item__nome {
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.item__cargo {
  color: var(--color-text-muted);
  font-size: var(--text-micro);
  line-height: var(--leading-snug);
}

.item__links {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-micro);
  word-break: break-all;
}

.item__links a {
  color: var(--color-text);
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

.indice__nota {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-micro);
  line-height: var(--leading-snug);
}

.indice__nota code {
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
}

/* --------------------------------------------------------------------------
   QR Codes, um por botão

   Fechados por padrão: sete QR à mostra viram parede e ninguém acha o certo.
   Um botão por código, não um por pessoa, porque no estande se mostra um de
   cada vez — e com um só aberto ele ocupa a largura inteira, bem mais fácil
   de escanear que dois lado a lado.

   É <details>/<summary>, então funciona sem JavaScript, responde ao teclado
   e anuncia o estado sozinho. Fechado, o navegador nem baixa o SVG.
   -------------------------------------------------------------------------- */

.qr { margin-top: var(--space-2); }

.qr__botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);

  min-height: var(--tap-target-min);
  padding: var(--space-2) var(--space-4);

  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  list-style: none;

  color: var(--color-text);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);

  transition: border-color var(--duration) var(--ease),
              background-color var(--duration) var(--ease);
}

/* O marcador nativo brigaria com a seta própria. */
.qr__botao::-webkit-details-marker { display: none; }
.qr__botao::marker { content: ''; }

@media (hover: hover) {
  .qr__botao:hover {
    border-color: var(--color-accent);
    background: var(--color-bg-subtle);
  }
}

.qr__botao:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

/* Aberto, o botão vira cabeçalho do que está abaixo: emenda com o QR. */
.qr[open] .qr__botao {
  border-color: var(--color-accent);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.qr__seta {
  flex: none;
  color: var(--color-text-muted);
  transition: transform var(--duration) var(--ease);
}

.qr[open] .qr__seta { transform: rotate(180deg); }

/* Largura cheia: é o ganho de ter um QR por vez. Fundo branco explícito
   porque leitor de QR depende do contraste — o SVG já traz a zona
   silenciosa, a borda aqui é só enquadramento. */
.qr__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-accent);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--brand-white-50);
}

.qr__dica {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-micro);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

/* Visível só para leitor de tela: distingue botões que, na tela, repetem o
   mesmo texto sob nomes diferentes. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A seta é a única coisa que se move aqui. */
@media (prefers-reduced-motion: reduce) {
  .qr__seta { transition: none; }
}

/* --------------------------------------------------------------------------
   Bloco do WhatsApp geral

   Fica na home interna, não nos cartões: ali a conversa é com uma pessoa, e
   um segundo QR competiria com ela.
   -------------------------------------------------------------------------- */

.geral {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.geral__link {
  margin: var(--space-2) 0 0;
  font-size: var(--text-caption);
  text-align: center;
}

.geral__link a {
  display: inline-block;
  min-height: var(--tap-target-min);
  padding-block: var(--space-3);
  color: var(--color-text);
  font-weight: var(--weight-bold);
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}