/* ============================================================
   Painel dos noivos — o portal.

   Reescrito do zero em 13/08/2026. Três decisões seguram tudo:

   1. TIPOGRAFIA POR FUNÇÃO. A Italiana é assinatura: marca, título
      de página, título de gaveta — e NUNCA um dígito. Número grande
      (KPI, contagem, dinheiro) vai em Georgia bold, que é serifa de
      tela, desenhada pra ser lida. Número corrido (preço em lista,
      contador de selo) vai na sans do sistema com tabular-nums.
      Cormorant fica só onde a fala é do convidado: recado, bilhete.

   2. CELULAR PRIMEIRO. Uma coluna, barra de abas no polegar, gaveta
      que sobe. Alvo de toque >= 44px, campo >= 16px (senão o iOS dá
      zoom sozinho). O desktop é a segunda leitura: menu lateral fixo
      e o conteúdo em grade.

   3. SUPERFÍCIE CALMA. Fundo papel, cartão branco, uma borda de 9%
      de navy. Cor forte só onde há ação ou estado — o azul do casal
      pros botões, verde pra feito, âmbar pra "precisa de você".
   ============================================================ */

:root {
  /* a paleta do casamento, agora com escala de interface */
  --azul: #2e51a3;
  --azul-escuro: #24408a;
  --azul-10: rgb(46 81 163 / 0.1);
  --azul-16: rgb(46 81 163 / 0.16);
  --navy: #191a3a;
  --pervinca: #b4c4ea;
  --papel: #f6f7fb;
  --papel-2: #eceff7;
  --branco: #fff;

  --tinta: #23244a;                    /* texto corrido */
  --tinta-2: rgb(25 26 58 / 0.62);     /* apoio */
  --tinta-3: rgb(25 26 58 / 0.45);     /* rótulo mudo */

  --verde: #1c6b47;
  --verde-fundo: #e7f3ec;
  --ambar: #8a5a00;
  --ambar-fundo: #fdf3e3;
  --perigo: #8f2833;
  --perigo-fundo: #fbeceb;

  --linha: rgb(25 26 58 / 0.09);
  --linha-forte: rgb(25 26 58 / 0.24);

  /* De que lado vem o padrinho. Isso era uma coluna do quadro e virou
     cor: o que interessa saber de relance é quem já respondeu, não de
     que lado a pessoa vem. A cor nunca vai sozinha — anda com o selo
     escrito, senão quem não distingue as duas fica sem a informação. */
  --lado-noiva: #a9758c;
  --lado-noivo: #4a6fbf;
  --lado-ambos: #8a93a8;

  /* Quatro famílias, quatro trabalhos — ver o cabeçalho do arquivo.
     A regra inegociável: Italiana não encosta em dígito. */
  --display: "Italiana", Georgia, serif;
  --numero: Georgia, "Times New Roman", serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --e1: 0.5rem;
  --e2: 0.75rem;
  --e3: 1rem;
  --e4: 1.5rem;
  --e5: 2rem;
  --e6: 3rem;

  --raio: 14px;
  --raio-2: 10px;
  --sombra-1: 0 1px 2px rgb(25 26 58 / 0.05);
  --sombra-2: 0 10px 30px rgb(25 26 58 / 0.12);

  --margem: clamp(1rem, 4vw, 1.5rem);
  --abas-h: 4.1rem;
  --lateral-l: 16.5rem;
  --suave: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* números de interface alinham em coluna: mesma largura por dígito */
.cartao-sub, .selo-mini, .tab-conta, .coluna-conta,
.falta-linha input[type="number"] {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   PORTA — o cartão de entrada sobre o mural de polaroids
   ============================================================ */

.porta {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--margem);
  background: var(--navy);
  overflow: hidden;
}
.porta-cartao {
  position: relative;
  z-index: 2;
  width: min(24rem, 100%);
  background: var(--papel);
  border-radius: 20px;
  padding: var(--e5) var(--e4) var(--e4);
  text-align: center;
  box-shadow: 0 24px 60px rgb(9 10 28 / 0.45);
}
.marca {
  margin: 0 0 var(--e3);
  font-family: var(--display);
  font-size: 2rem;
  letter-spacing: 0.1em;
  color: var(--azul);
}
.marca span { color: var(--pervinca); }
.porta h1 {
  margin: 0 0 var(--e1);
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.7rem;
  color: var(--navy);
}
.dica { margin: 0 0 var(--e4); font-size: 0.95rem; color: var(--tinta-2); }
.porta form { text-align: left; }

/* saídas da porta — sem elas a tela vira beco sem saída */
.elos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e2);
  margin-top: var(--e2);
}
.elos .elo { width: auto; margin-top: 0; }
.elo {
  display: block;
  width: 100%;
  margin-top: var(--e2);
  padding: var(--e1);
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--azul);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 2.75rem;
}
.socorro {
  margin: var(--e2) 0 0;
  padding: var(--e3);
  background: var(--papel-2);
  border-radius: var(--raio-2);
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: left;
}
.socorro strong { font-weight: 600; }
/* código do convite: monoespaçado e espaçado pra não perder o lugar */
.codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.35rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  text-align: center;
}
.recado {
  margin: 0 0 var(--e2);
  font-size: 1.05rem;
  line-height: 1.55;
  text-align: left;
}

/* ---------- mural de polaroids ----------
   Fotos do casal atrás do cartão. Cada moldura troca no seu tempo,
   com fade — carrossel sincronizado dá cara de banner. */

.mural { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.polaroid {
  position: absolute;
  width: var(--largura, 9rem);
  padding: 0.5rem 0.5rem 1.6rem;
  background: #fdfdf8;
  border-radius: 3px;
  box-shadow: 0 14px 34px rgb(9 10 28 / 0.5);
  rotate: var(--giro, 0deg);
  opacity: 0;
  animation: chega 1.1s var(--suave) var(--atraso, 0s) forwards;
}
.polaroid::after {
  content: "";
  position: absolute;
  left: 1.4rem; right: 1.4rem; bottom: 0.66rem;
  height: 2px;
  border-radius: 2px;
  background: rgb(25 26 58 / 0.14);
}
.polaroid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--papel-2);
  transition: opacity 0.9s var(--suave);
}
.polaroid img.trocando { opacity: 0; }

@keyframes chega {
  from { opacity: 0; translate: 0 1.5rem; scale: 0.94; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

.polaroid.p1 { top: 4%;  left: -3%;  --giro: -7deg; --largura: 8rem; --atraso: 0.1s; }
.polaroid.p2 { top: 2%;  right: -4%; --giro: 6deg;  --largura: 7.5rem; --atraso: 0.35s; }
.polaroid.p3 { bottom: 5%; left: -5%; --giro: 5deg; --largura: 8.5rem; --atraso: 0.6s; }
.polaroid.p4 { bottom: 3%; right: -3%; --giro: -6deg; --largura: 7.5rem; --atraso: 0.85s; }
.polaroid.p5, .polaroid.p6 { display: none; }

@media (min-width: 700px) {
  .polaroid.p1 { top: 8%;  left: 6%;   --largura: 12rem; }
  .polaroid.p2 { top: 12%; right: 7%;  --largura: 11rem; }
  .polaroid.p3 { bottom: 10%; left: 9%; --largura: 12.5rem; }
  .polaroid.p4 { bottom: 8%; right: 8%; --largura: 11rem; }
  .polaroid.p5 { display: block; top: 44%; left: 2%; --giro: 3deg; --largura: 9rem; --atraso: 1.1s; }
  .polaroid.p6 { display: block; top: 40%; right: 2%; --giro: -4deg; --largura: 9.5rem; --atraso: 1.35s; }
}

@media (prefers-reduced-motion: reduce) {
  .polaroid { animation: none; opacity: 1; }
  .polaroid img { transition: none; }
}

/* ============================================================
   CAMPOS DE FORMULÁRIO
   ============================================================ */

label, legend {
  display: block;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tinta-2);
  margin: var(--e3) 0 var(--e1);
}
.opc { text-transform: none; letter-spacing: 0.02em; font-style: italic; opacity: 0.75; }

input[type="text"], input[type="url"], input[type="password"],
input[type="email"], input[type="number"], input[type="tel"],
textarea, select {
  width: 100%;
  /* 16px é o piso: abaixo disso o Safari do iPhone dá zoom ao focar */
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--tinta);
  background: var(--branco);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-2);
  padding: 0.7rem var(--e2);
  min-height: 2.9rem;
  appearance: none;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%),
    linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: right 1.1rem center, right 0.8rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px var(--azul-16);
}
textarea { resize: vertical; min-height: 5rem; line-height: 1.45; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }
.caixa {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-top: var(--e4);
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--tinta);
  min-height: 2.75rem;
}
.caixa input { width: 1.3rem; height: 1.3rem; min-height: 0; accent-color: var(--azul); }
.ajuda { margin: var(--e1) 0 0; font-size: 0.85rem; color: var(--tinta-2); }
.ajuda.ruim { color: var(--perigo); }
.aviso { margin: var(--e3) 0 0; min-height: 1.3em; font-size: 0.92rem; color: var(--perigo); }
.aviso.ok { color: var(--verde); }

.previa-mini {
  margin-top: var(--e2);
  width: 5.5rem;
  height: 5.5rem;
  border-radius: var(--raio-2);
  overflow: hidden;
  background: var(--papel-2);
}
.previa-mini img { width: 100%; height: 100%; object-fit: cover; }

/* estado do presente dentro da gaveta: quem reservou e o que fazer */
.estado {
  margin-top: var(--e4);
  padding: var(--e3);
  background: var(--papel-2);
  border-radius: var(--raio-2);
}
.estado-texto { margin: 0 0 var(--e2); font-size: 0.92rem; line-height: 1.5; }
.estado-acoes { display: grid; gap: var(--e2); }
.estado-acoes .bt { width: 100%; }

/* ============================================================
   BOTÕES
   ============================================================ */

.bt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e1);
  min-height: 2.75rem;
  padding: 0.6rem var(--e3);
  border: 1px solid transparent;
  border-radius: var(--raio-2);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--tinta);
  cursor: pointer;
  background: transparent;
  transition: background-color 0.18s var(--suave), color 0.18s var(--suave),
    border-color 0.18s var(--suave), opacity 0.18s var(--suave);
}
.bt-cheio { background: var(--azul); border-color: var(--azul); color: var(--branco); }
.bt-cheio:hover { background: var(--azul-escuro); }
.bt-vazado { border-color: var(--linha-forte); background: var(--branco); }
.bt-vazado:hover { border-color: var(--azul); color: var(--azul); }
.bt-perigo { color: var(--perigo); border-color: rgb(143 40 51 / 0.35); }
.bt-perigo:hover { background: var(--perigo); border-color: var(--perigo); color: var(--branco); }
.bt-largo { width: 100%; margin-top: var(--e4); }
.bt[disabled] { opacity: 0.5; pointer-events: none; }

/* ============================================================
   A MOLDURA DO PORTAL

   Celular: topo fino com a marca, conteúdo, abas fixas embaixo.
   Desktop (>=1020px): menu lateral fixo à esquerda, conteúdo com
   cabeçalho de página à direita. A mesma página, duas leituras.
   ============================================================ */

.app { min-height: 100svh; }

/* ---------- a assinatura do casal ---------- */
.marca-nav {
  margin: 0;
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: var(--navy);
  white-space: nowrap;
}
.marca-nav .amp {
  margin: 0 0.3em;
  font-style: italic;
  color: var(--azul);
  opacity: 0.75;
}

/* ---------- menu lateral (desktop) ---------- */

.lateral { display: none; }

.lateral-marca { padding: var(--e4) var(--e4) var(--e3); }
.lateral-selo {
  margin: 0.2rem 0 0;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.menu {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--e2) var(--e3);
  display: grid;
  align-content: start;
  gap: 2px;
}
.menu-grupo {
  margin: var(--e3) var(--e2) 0.35rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

/* o item do menu — é o mesmo .tab que a barra do celular usa */
.menu .tab {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 2.6rem;
  padding: 0.45rem var(--e2);
  border: 0;
  border-radius: var(--raio-2);
  background: none;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--tinta-2);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.menu .tab:hover { background: var(--papel); color: var(--navy); }
.menu .tab.ativa { background: var(--azul-10); color: var(--azul); font-weight: 600; }
.menu .tab svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
.menu .tab > span:first-of-type { flex: 1; }

/* o distintivo de pendência: só aparece quando há o que resolver */
.tab-conta {
  min-width: 1.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--ambar-fundo);
  color: var(--ambar);
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
}
.menu .tab.ativa .tab-conta { background: var(--branco); }

.lateral-pe {
  padding: var(--e3) var(--e4) var(--e4);
  border-top: 1px solid var(--linha);
  display: grid;
  gap: var(--e2);
}

/* a data do casamento: o relógio que corre por trás de tudo */
.contagem {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.contagem strong {
  display: block;
  font-family: var(--numero);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--navy);
}

.barra-sair {
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.45rem var(--e3);
  min-height: 2.25rem;
  cursor: pointer;
}
.barra-sair:hover { background: var(--papel-2); }

/* ---------- topo do celular ---------- */

.topo-m {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding: calc(env(safe-area-inset-top) + 0.55rem) var(--margem) 0.55rem;
  background: rgb(246 247 251 / 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linha);
}
.topo-m .marca-nav { font-size: 1.1rem; }
.topo-m-lado { display: flex; align-items: center; gap: var(--e2); }
.contagem-m {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tinta-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- cabeçalho da página ---------- */

.pagina {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e4) var(--margem) 0;
}
.pagina-texto { min-width: 0; }
.pagina-titulo {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--navy);
}
.pagina-sub {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}
/* no celular a ação principal é o FAB; o botão do cabeçalho é do desktop */
.pagina-acao { display: none; }

.conteudo {
  padding: var(--e3) var(--margem)
           calc(var(--abas-h) + 5.5rem + env(safe-area-inset-bottom));
}
.resumo {
  margin: 0 0 var(--e3);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}
.ferramentas { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0 0 var(--e3); }

/* a linha que diz o que vai na exportação anda junto com os botões dela */
.saidas .modo-dica { margin: 0 0 var(--e2); }

/* ---------- abas do celular ---------- */

.abas {
  position: fixed;
  z-index: 26;
  left: 0; right: 0; bottom: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: calc(var(--abas-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--linha);
}
.aba {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.3rem;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta-3);
  padding: 0 0.15rem;
  transition: color 0.2s var(--suave);
}
.aba svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.aba-mais svg circle { fill: currentColor; stroke: none; }
.abas .ativa { color: var(--azul); }

/* ---------- botão flutuante (celular) ---------- */

.fab {
  position: fixed;
  z-index: 25;
  right: var(--margem);
  bottom: calc(var(--abas-h) + var(--e3) + env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  min-height: 3.1rem;
  padding: 0 var(--e4);
  border: 0;
  border-radius: 999px;
  background: var(--azul);
  color: var(--branco);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: 0 12px 28px rgb(25 26 58 / 0.3);
}
.fab span:first-child { font-size: 1.3rem; line-height: 1; }
.fab:hover { background: var(--azul-escuro); }

/* ---------- a gaveta "Mais" ---------- */

.mais-lista { display: grid; gap: var(--e1); padding-top: var(--e2); }
.mais-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 3.1rem;
  padding: 0.6rem var(--e3);
  border: 1px solid var(--linha);
  border-radius: var(--raio-2);
  background: var(--branco);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
}
.mais-item:hover { border-color: var(--azul); color: var(--azul); }
.mais-item svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}

/* ============================================================
   PEÇAS DE LISTA
   ============================================================ */

.lista { display: grid; gap: var(--e2); }
.grupo-titulo {
  margin: var(--e4) 0 var(--e1);
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--tinta-3);
}
.grupo-titulo:first-child { margin-top: 0; }

.cartao {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  text-align: left;
  padding: var(--e2) var(--e3);
  min-height: 4.25rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: var(--sombra-1);
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cartao:hover { border-color: var(--pervinca); box-shadow: var(--sombra-2); }
.cartao.apagado { opacity: 0.55; }
.cartao-capa {
  position: relative;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: var(--raio-2);
  overflow: hidden;
  background: var(--papel-2);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--azul);
}
/* Fora do fluxo do grid de propósito: imagem é elemento substituído e
   mantém a proporção própria mesmo com height:100%. Presa nos quatro
   cantos, ela obedece. */
.cartao-capa img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cartao-capa img[src$=".svg"] { object-fit: contain; padding: 0.35rem; }
.cartao-corpo { min-width: 0; }
.cartao-nome {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.cartao-sub {
  margin: 0.15rem 0 0;
  font-size: 0.84rem;
  color: var(--tinta-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cartao-seta { color: var(--linha-forte); font-size: 1.4rem; line-height: 1; }

.selos { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.selo-mini {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--papel-2);
  color: var(--tinta-2);
}
.selo-mini.forte { background: var(--azul); color: var(--branco); }
.selo-mini.quieto { background: transparent; border: 1px solid var(--linha); color: var(--tinta-3); }
/* comprado é fim de linha (verde); reservado ainda pede ação (âmbar) */
.selo-mini.feito { background: var(--verde-fundo); color: var(--verde); }
.selo-mini.atencao { background: var(--ambar-fundo); color: var(--ambar); }
/* de que lado vem o padrinho: o selo escrito acompanha a cor do cartão */
.selo-mini.lado-noiva { background: #f4e9ee; color: #8a5f74; }
.selo-mini.lado-noivo { background: #e7ecfa; color: #33559f; }
.selo-mini.lado-ambos { background: var(--papel-2); color: var(--tinta-2); }

/* o cartão ganha a faixa do lado — cor à esquerda, texto no selo */
.cartao[data-lado], .par[data-lado] {
  border-left: 4px solid var(--lado, var(--linha));
}
[data-lado="noiva"] { --lado: var(--lado-noiva); }
[data-lado="noivo"] { --lado: var(--lado-noivo); }
[data-lado="ambos"] { --lado: var(--lado-ambos); }

/* a bandeirinha da loja usa a cor da marca, então o texto precisa de
   peso e caixa alta pra continuar legível em fundo forte */
.bandeira {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* setas de ordem, coladas no cartão da foto */
.ordena { display: grid; gap: 0.25rem; }
.ordena button {
  width: 2.25rem;
  height: 2.1rem;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--papel);
  color: var(--tinta);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}
.ordena button:hover { border-color: var(--azul); color: var(--azul); }

.vazio {
  margin: 0;
  padding: var(--e6) var(--e3);
  text-align: center;
  font-style: italic;
  color: var(--tinta-3);
}

/* ============================================================
   NÚMEROS QUE CONTAM — os cartões de visão geral

   O valor é Georgia bold (serifa de tela, feita pra ser lida);
   o rótulo é sans miúda em caixa alta. Italiana aqui é proibida:
   número se lê, não se desenha.
   ============================================================ */

.visao {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e2);
  margin-bottom: var(--e3);
}
.pedra {
  display: grid;
  gap: 0.15rem;
  align-content: start;
  /* enxuta: a visão geral é o aperitivo, a lista é o prato — cada
     centímetro que ela toma é uma pessoa a menos visível embaixo */
  padding: var(--e2) var(--e3);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
}
.pedra span {
  order: -1;                       /* rótulo em cima, número embaixo */
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--tinta-3);
}
.pedra strong {
  font-family: var(--numero);
  font-weight: 700;
  /* encolhe um pouco em tela estreita em vez de quebrar o número ao
     meio — "R$ 10.171,/30" não é um valor, é um acidente */
  font-size: clamp(1.25rem, 4.8vw, 1.55rem);
  line-height: 1.05;
  color: var(--navy);
  white-space: nowrap;
}

/* pedra que filtra: parece tocável e mostra quando está ligada */
.pedra-toca {
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.pedra-toca:hover { border-color: var(--azul); }
.pedra-toca.ativa {
  border-color: var(--azul);
  background: var(--azul-10);
  box-shadow: inset 0 0 0 1px var(--azul);
}
.pedra-toca.ativa strong { color: var(--azul); }

/* ============================================================
   INÍCIO — a mesa de trabalho
   ============================================================ */

.painel-home { display: grid; gap: var(--e3); }

/* a faixa do dia: a contagem é o número mais importante do painel */
.hero-dia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e4);
  border-radius: var(--raio);
  background: var(--navy);
  color: var(--branco);
  overflow: hidden;
  position: relative;
}
.hero-dia::after {
  content: "";
  position: absolute;
  right: -4rem; top: -6rem;
  width: 16rem; height: 16rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(180 196 234 / 0.35), transparent 65%);
  pointer-events: none;
}
.hero-num {
  margin: 0;
  font-family: var(--numero);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--branco);
}
.hero-rotulo {
  margin: 0.3rem 0 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pervinca);
}
.hero-data {
  margin: 0;
  text-align: right;
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--pervinca);
  white-space: nowrap;
}
.hero-data small {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.55);
}

/* KPIs do topo */
.kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e2);
}

/* o que precisa de você: pendência é linha resolvível, não parágrafo */
.home-grupo {
  margin: var(--e2) 0 0;
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--tinta-3);
}
.tarefas {
  display: grid;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}
.tarefa {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: 3.1rem;
  padding: 0.6rem var(--e3);
  border: 0;
  border-bottom: 1px solid var(--linha);
  background: var(--branco);
  font: inherit;
  font-size: 0.9rem;
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
}
.tarefa:last-child { border-bottom: 0; }
.tarefa:hover { background: var(--papel); }
.tarefa-conta {
  flex: 0 0 auto;
  min-width: 2rem;
  text-align: center;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: var(--ambar-fundo);
  color: var(--ambar);
  font-weight: 700;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.tarefa-texto { flex: 1; min-width: 0; }
.tarefa-ir { flex: 0 0 auto; color: var(--tinta-3); font-size: 1.2rem; line-height: 1; }
.tarefas-vazia {
  margin: 0;
  padding: var(--e3);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio);
  font-size: 0.9rem;
  color: var(--verde);
  background: var(--verde-fundo);
}

/* blocos por área */
.blocos { display: grid; gap: var(--e2); }
.bloco-home {
  display: grid;
  gap: var(--e2);
  padding: var(--e3);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.bloco-home:hover { border-color: var(--pervinca); box-shadow: var(--sombra-2); }
.bloco-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2);
}
.bloco-nome {
  margin: 0;
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--navy);
}
.bloco-ir { font-size: 0.72rem; font-weight: 600; color: var(--azul); }
.bloco-numeros { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e4); }
.bloco-num { display: grid; gap: 0.15rem; }
.bloco-num strong {
  font-family: var(--numero);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.05;
  color: var(--navy);
}
.bloco-num span {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.bloco-alerta {
  margin: 0;
  padding: var(--e2);
  background: var(--ambar-fundo);
  border-radius: var(--raio-2);
  font-size: 0.85rem;
  color: var(--ambar);
}

/* os últimos recados, na voz de quem escreveu */
.recados-home { display: grid; gap: var(--e2); }
.recado-item {
  display: grid;
  gap: 0.3rem;
  padding: var(--e3);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--pervinca);
  border-radius: var(--raio);
  background: var(--branco);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.recado-item:hover { border-color: var(--pervinca); }
.recado-fala {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.45;
  color: var(--tinta);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recado-quem {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

/* ============================================================
   RELATÓRIOS — metas de hoje, visitas quando a coleta ligar
   ============================================================ */

.painel-relatorios { display: grid; gap: var(--e3); }

.metas {
  display: grid;
  gap: var(--e3);
  padding: var(--e3);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: var(--sombra-1);
}
.metas-titulo {
  margin: 0 0 0.2rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--navy);
}
.meta { display: grid; gap: 0.4rem; }
.meta-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem var(--e2);
  /* nome comprido + dinheiro comprido: o valor desce inteiro para a
     linha de baixo, em vez de espremer o nome palavra por palavra */
  flex-wrap: wrap;
}
.meta-nome { margin: 0; font-size: 0.88rem; font-weight: 600; color: var(--tinta); }
.meta-num {
  margin: 0;
  font-family: var(--numero);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  white-space: nowrap;
}
.trilho {
  height: 6px;
  border-radius: 999px;
  background: var(--papel-2);
  overflow: hidden;
}
.trilho-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--azul);
  transition: width 0.6s var(--suave);
}
.trilho-fill.cheia { background: var(--verde); }
.meta-nota { margin: 0; font-size: 0.78rem; color: var(--tinta-2); }

/* o card do que ainda não chegou: honesto sobre o que vem */
.aguardando {
  display: grid;
  gap: var(--e2);
  padding: var(--e4);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio);
  background: var(--branco);
}
.aguardando h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--navy);
}
.aguardando p { margin: 0; font-size: 0.9rem; color: var(--tinta-2); }
.aguarda-lista {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.3rem;
  font-size: 0.88rem;
  color: var(--tinta);
}

/* ============================================================
   COLAR DA LISTA DE COMPRAS / DE CONVIDADOS
   ============================================================ */

.colagem {
  margin-bottom: var(--e3);
  padding: var(--e3);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
}
.colagem-titulo {
  margin: 0 0 0.15rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--navy);
}
.colagem-dica { margin: 0 0 var(--e3); font-size: 0.88rem; color: var(--tinta-2); }
.colagem-linha { display: grid; gap: var(--e2); }
.colagem-linha input { width: 100%; }
.colagem-pe { margin-top: var(--e3); }
.rotulo-chips {
  margin: 0 0 var(--e2);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tinta-2);
}

@media (min-width: 700px) {
  .colagem-linha { grid-template-columns: 1fr auto; }
}

.colagem-fila { display: grid; gap: var(--e1); margin-top: var(--e2); }
.colagem-item {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e1) 0;
  font-size: 0.92rem;
  border-top: 1px solid var(--linha);
}
.colagem-item span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.colagem-item .falta { color: var(--perigo); font-size: 0.82rem; white-space: nowrap; }
.colagem-item .ok { color: var(--verde); font-size: 0.82rem; }
.colagem-item button {
  border: 0;
  background: none;
  color: var(--azul);
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.35rem;
}

#colar-convidados textarea { min-height: 6rem; }

/* ---------- chips ---------- */

.chips { display: flex; flex-wrap: wrap; gap: var(--e1); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.4rem;
  padding: 0.4rem var(--e3);
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: var(--branco);
  font: inherit;
  font-size: 0.88rem;
  color: var(--tinta);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chip:hover { border-color: var(--azul); }
/* aria-checked é escolha única (categoria, lado); aria-pressed é liga-desliga
   (etiqueta, que se acumula). O desenho do "ligado" é o mesmo nos dois. */
.chip[aria-checked="true"], .chip[aria-pressed="true"] {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--branco);
  font-weight: 600;
}
.chip-mais { border-style: dashed; color: var(--azul); font-weight: 600; }
.chip-nova {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--e2);
  margin-top: var(--e2);
  max-width: 26rem;
}
.chip-nova input { min-height: 2.75rem; font-size: 1rem; }

/* ============================================================
   MODO LISTA — a mesma informação, em tabela

   Cartão é bom para reconhecer (foto, nome grande, selo colorido);
   tabela é boa para comparar e varrer trinta linhas. Cada seção lembra
   o modo que você escolheu, porque a preferência é sua e não muda de
   um dia para o outro.
   ============================================================ */

.barra-modo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  flex-wrap: wrap;
  margin-bottom: var(--e3);
}
.barra-modo .chips { flex: 0 0 auto; }

/* legenda das cores — cor sozinha não conta a história a quem não a vê */
.legenda {
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
  margin: 0;
  font-size: 0.74rem;
  color: var(--tinta-2);
}
.legenda span { display: inline-flex; align-items: center; gap: 0.35rem; }
.ponto {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--tinta-3);
  flex: 0 0 auto;
}
.ponto.noiva { background: var(--lado-noiva); }
.ponto.noivo { background: var(--lado-noivo); }
.ponto.ambos { background: var(--lado-ambos); }

.tabela-caixa {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: var(--sombra-1);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
table.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.tabela th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  white-space: nowrap;
  padding: 0.5rem var(--e2);
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
/* Linha enxuta de propósito: com 18 padrinhos ou 30 confirmações, o
   que se quer é ver todo mundo de uma vez. Cada 10px de respiro a mais
   custa duas pessoas fora da tela — e aí volta a rolagem que a tabela
   veio resolver. */
.tabela td {
  padding: 0.3rem var(--e2);
  border-bottom: 1px solid var(--linha);
  vertical-align: middle;
  line-height: 1.35;
}
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr { cursor: pointer; transition: background 0.12s; }
.tabela tbody tr:hover { background: var(--papel); }
.tabela tbody tr:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
/* a primeira coluna é a âncora da linha: fica marcada, e ela é que
   ganha a faixa de cor quando a linha tem lado */
.tabela .principal {
  font-weight: 600;
  color: var(--tinta);
  /* a coluna âncora não pode ser espremida pelas outras: é por ela que
     se acha a linha */
  min-width: 8rem;
}
.tabela .numero {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tabela .apagada { opacity: 0.5; }
/* selo dentro de célula estreita não pode quebrar: "✓ vem" em duas
   linhas engorda a linha inteira e faz a tabela perder o ritmo */
.tabela .selo-mini { white-space: nowrap; }
.tabela .selos { flex-wrap: wrap; gap: 0.25rem; }
/* linha com lado: a faixa entra na primeira célula */
.tabela tr[data-lado] .principal {
  border-left: 3px solid var(--lado, transparent);
  padding-left: calc(var(--e2) - 3px);
}
.tabela-vazia { margin: 0; padding: var(--e4); text-align: center; color: var(--tinta-3); font-style: italic; }
/* grupo dentro da tabela: "Confirmados · 10" como faixa */
.tabela .faixa td {
  background: var(--papel);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-3);
  padding: 0.3rem var(--e2);
}
.tabela .faixa { cursor: default; }
.tabela .faixa:hover td { background: var(--papel); }

/* no celular a tabela mostra só o que decide; o resto está na ficha */
@media (max-width: 760px) {
  .tabela .esconde-mini { display: none; }
  .tabela th, .tabela td { padding: 0.55rem var(--e1); }
  table.tabela { font-size: 0.84rem; }
}

/* a grade de cartões não pode se impor quando a lista virou tabela */
.lista.modo-tabela { display: block; }

/* ============================================================
   EDITAR NA PRÓPRIA CÉLULA

   Corrigir um telefone não devia custar abrir uma ficha, mudar um
   campo e salvar. Aqui o valor é o campo: um toque e você está
   digitando. Nada de botão "editar" — o alvo é o próprio dado.

   O que muda de estado (resposta, lado, no site) não abre campo:
   um toque cicla e grava, porque escolher entre três coisas é mais
   rápido tocando do que digitando.
   ============================================================ */

.edita { display: inline-flex; align-items: center; max-width: 100%; }

/* Sem `overflow: hidden` de propósito: um botão que corta o próprio
   texto não empurra a coluna, e a tabela inteira colapsa em "Ca…",
   "Jan…". Deixando o conteúdo mandar na largura, a coluna do nome
   nasce do tamanho do maior nome — e, se faltar tela, a caixa da
   tabela rola de lado, que é o comportamento honesto. */
.edita-valor {
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  padding: 0.2rem 0.35rem;
  margin: -0.2rem -0.35rem;      /* o campo cresce sem empurrar a linha */
  min-height: 1.7rem;
  white-space: nowrap;
  cursor: text;
  transition: background 0.12s, border-color 0.12s;
}
.edita-valor:hover {
  border-color: var(--linha-forte);
  background: var(--branco);
}
.edita-valor.vazio { color: var(--tinta-3); font-style: italic; }

.edita-campo {
  width: 100%;
  min-width: 3.5rem;
  padding: 0.2rem 0.35rem;
  margin: -0.2rem -0.35rem;
  border: 1px solid var(--azul);
  border-radius: 6px;
  background: var(--branco);
  font: inherit;
  /* 16px no celular, senão o iOS dá zoom e a tabela pula de lugar */
  font-size: 16px;
  min-height: 1.9rem;
  box-shadow: 0 0 0 3px var(--azul-16);
}
@media (min-width: 761px) { .edita-campo { font-size: 0.88rem; } }

/* selo que cicla: continua parecendo selo, mas se sabe tocável */
.edita-selo {
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: box-shadow 0.12s, border-color 0.12s;
}
.edita-selo:hover { border-color: currentColor; box-shadow: 0 1px 4px rgb(25 26 58 / 0.15); }

.edita.salvando { opacity: 0.45; pointer-events: none; }
.edita.salvo .edita-valor,
.edita.salvo .edita-selo { animation: piscaSalvo 0.9s var(--suave); }
@keyframes piscaSalvo {
  from { background: var(--verde-fundo); box-shadow: 0 0 0 3px var(--verde-fundo); }
  to { background: transparent; box-shadow: none; }
}
.edita.erro .edita-valor, .edita.erro .edita-selo {
  border-color: var(--perigo);
  color: var(--perigo);
}

@media (prefers-reduced-motion: reduce) {
  .edita.salvo .edita-valor, .edita.salvo .edita-selo { animation: none; }
}

/* ============================================================
   RECEBIDOS — a ficha do que chegou

   Etiqueta é do casal: "família", "trabalho", "conferir". Ela aparece
   no cartão com desenho próprio (pervinca, não azul) para não competir
   com o estado — que é o que manda na leitura da lista.
   ============================================================ */

.selo-mini.etiqueta {
  background: rgb(180 196 234 / 0.4);
  color: var(--azul-escuro);
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 700;
}

.filtro-etiquetas { margin-bottom: var(--e3); }

/* os itens do pedido, dentro da ficha: leitura, porque quem escolheu
   foi o convidado — o painel não reescreve a escolha dele */
.itens-pedido {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-2);
  background: var(--branco);
  padding: var(--e2) var(--e3);
}
.itens-pedido li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2);
  font-size: 0.9rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--linha);
}
.itens-pedido li:last-child { border-bottom: 0; }
.itens-pedido .item-nome { min-width: 0; overflow-wrap: anywhere; }
.itens-pedido .item-preco {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2);
}
.itens-total {
  margin: var(--e2) 0 0;
  text-align: right;
  font-family: var(--numero);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--navy);
}

/* ============================================================
   AVISAR QUEM PEDIU — a lista cresceu, quem espera é chamado
   ============================================================ */

/* A frase de apoio embaixo de um campo: diz o que acontece se ele
   ficar vazio. Vazio ≠ sem efeito, e é isso que ela conta. */
.campo-dica {
  margin: -0.35rem 0 0.75rem;
  font-size: 0.72rem;
  line-height: 1.45;
  opacity: 0.75;
}

.campo-dica.sem-valor { opacity: 0.55; }
.campo-dica:empty { display: none; }

.avisos {
  margin: 0 0 var(--e3);
  padding: var(--e3);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: rgb(180 196 234 / 0.12);
}
.avisos-topo { margin-bottom: 0.5rem; }
.avisos-titulo {
  margin: 0 0 0.25rem;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--navy);
}
.avisos-resumo { margin: 0; font-size: 0.8rem; color: var(--tinta-2); }
.avisos-novos { margin: 0 0 0.75rem; font-size: 0.86rem; }
.avisos-novos.sem-valor { font-size: 0.78rem; color: var(--tinta-3); }
.avisos-acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.avisos-status:empty { display: none; }
.avisos-status { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--perigo); }
.avisos-status.ok { color: var(--verde); }
.avisos-gente {
  margin-top: 0.75rem;
  border-top: 1px solid var(--linha);
  max-height: 20rem;
  overflow-y: auto;
}
.avisos-linha {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--linha);
  font-size: 0.84rem;
}
.avisos-quem { flex: 0 1 auto; font-weight: 600; }
.avisos-como {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tinta-3);
}
.avisos-acao {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--azul);
}

/* ============================================================
   O QUE FALTA — pendência com o campo do lado
   ============================================================ */

.falta {
  margin-bottom: var(--e3);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}
.falta-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding: var(--e3);
}
.falta-titulo {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--navy);
}
.falta-alterna {
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--tinta);
  padding: 0.45rem var(--e3);
  min-height: 2.4rem;
  cursor: pointer;
}
.falta-corpo { padding: 0 var(--e3) var(--e3); }
.falta-grupo {
  margin: var(--e3) 0 var(--e1);
  font-weight: 700;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--tinta-3);
}
.falta-item {
  display: grid;
  gap: var(--e1);
  padding: var(--e2) 0;
  border-top: 1px solid var(--linha);
}
.falta-nome { font-size: 0.94rem; overflow-wrap: anywhere; }
.falta-linha { display: grid; grid-template-columns: 1fr auto; gap: var(--e2); }
.falta-linha input { min-height: 2.75rem; font-size: 1rem; }
.falta-linha .bt { min-height: 2.75rem; padding: 0.5rem var(--e3); }
.falta-vazio {
  margin: 0;
  padding: 0 var(--e3) var(--e3);
  font-size: 0.92rem;
  color: var(--verde);
}

@media (min-width: 861px) {
  .falta-item { grid-template-columns: minmax(10rem, 1fr) minmax(16rem, 1.2fr); align-items: center; }
  .falta-item .falta-nome { padding-right: var(--e3); }
}

/* ============================================================
   SELETOR DE TIPO (produto | pix)
   ============================================================ */

.tipo-seg {
  border: 0;
  padding: 0;
  margin: var(--e2) 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e1);
}
.tipo-seg legend { padding: 0; margin: 0 0 var(--e1); }
.tipo-seg label { margin: 0; }
.tipo-seg input { position: absolute; opacity: 0; pointer-events: none; }
.tipo-seg span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-2);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinta);
  cursor: pointer;
  transition: background-color 0.2s var(--suave), color 0.2s var(--suave),
    border-color 0.2s var(--suave);
}
.tipo-seg input:checked + span {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--branco);
}
.tipo-seg input:focus-visible + span { box-shadow: 0 0 0 3px var(--azul-16); }

/* ============================================================
   COLAR LINK DA LOJA (dentro do editor de presente)
   ============================================================ */

.colar {
  margin: var(--e2) 0 var(--e4);
  padding: var(--e3);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio);
  background: var(--papel-2);
}
.colar label { margin-top: 0; }
.colar-linha { display: flex; gap: var(--e2); }
.colar-linha input { flex: 1; min-width: 0; }
.colar-linha .bt { flex: none; padding-inline: var(--e4); }

/* ---------- conferir o que a loja devolveu ---------- */

.conferir {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-2);
  background: rgb(180 196 234 / 0.12);
}
.conferir-selo {
  margin: 0 0 0.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.conferir-cartao {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.6rem;
  border-radius: var(--raio-2);
  background: var(--branco);
}
.conferir-capa {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border-radius: 8px;
  background: rgb(180 196 234 / 0.25);
}
.conferir-capa img { width: 100%; height: 100%; object-fit: contain; }
.conferir-semfoto {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.conferir-corpo { flex: 1 1 auto; min-width: 0; text-align: left; }
.conferir-nome { margin: 0 0 0.2rem; font-size: 0.92rem; font-weight: 500; line-height: 1.25; }
.conferir-preco { margin: 0; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.conferir-preco.sem-valor { font-size: 0.8rem; font-weight: 400; color: var(--tinta-3); }
.conferir-loja { margin: 0.2rem 0 0; font-size: 0.7rem; color: var(--tinta-3); overflow-wrap: anywhere; }
.conferir-falta { margin: 0.6rem 0 0.75rem; font-size: 0.78rem; color: var(--tinta-2); }
.conferir-falta.ruim { color: var(--ambar); }
.conferir-acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- completar o que a loja não deu ---------- */

.completar {
  margin: 0 0 0.75rem;
  padding: 0.7rem;
  border-radius: var(--raio-2);
  background: var(--branco);
  display: grid;
  gap: 0.55rem;
}
.completar-linha { display: grid; gap: 0.25rem; }
.completar-linha > label {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.completar-linha input,
.completar-foto input[type="url"] {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--linha-forte);
  border-radius: 8px;
  font: inherit;
  /* 16px cravado: abaixo disso o iPhone dá zoom sozinho ao focar */
  font-size: 16px;
  background: var(--branco);
  min-height: 2.6rem;
}
.completar-foto {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}
.completar-foto .bt { flex: 0 0 auto; }
.completar-foto input[type="url"] { flex: 1 1 12rem; min-width: 0; }
.completar-dica { margin: 0; font-size: 0.74rem; color: var(--tinta-2); }
.completar-dica.ruim { color: var(--perigo); }

/* ============================================================
   PADRINHOS — quadro, duplas e arrasto
   ============================================================ */

.modo-barra {
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
  margin-bottom: var(--e3);
}
.modo-dica { margin: 0; font-size: 0.85rem; color: var(--tinta-2); }

.quadro {
  display: grid;
  gap: var(--e2);
  grid-auto-flow: column;
  grid-auto-columns: minmax(17rem, 1fr);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: var(--e2);
  scroll-snap-type: x mandatory;
}
.coluna {
  scroll-snap-align: start;
  display: grid;
  align-content: start;
  gap: var(--e2);
  padding: var(--e2);
  background: var(--papel-2);
  border: 1px solid transparent;
  border-radius: var(--raio);
  min-height: 8rem;
}
.coluna.alvo { border-color: var(--azul); background: var(--azul-10); }
.coluna-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2);
  padding: 0 var(--e1);
}
.coluna-nome { margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--navy); }
.coluna-conta {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.coluna .cartao, .coluna .par { background: var(--branco); }
.coluna-vazia {
  margin: 0;
  padding: var(--e3) var(--e1);
  font-size: 0.88rem;
  color: var(--tinta-3);
  text-align: center;
}

/* a dupla na lista: um bloco só, com as duas pessoas dentro */
.par {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: var(--sombra-1);
  padding: var(--e2);
  display: grid;
  gap: var(--e1);
}
.par-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding: 0 var(--e1) var(--e1);
  border-bottom: 1px solid var(--linha);
}
.par-nome { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--navy); }
.par .cartao { border: 0; box-shadow: none; border-radius: var(--raio-2); min-height: 0; }
.par .cartao:hover { background: var(--papel); box-shadow: none; }
.par-acao {
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.75rem;
  color: var(--azul);
  text-decoration: underline;
  cursor: pointer;
  padding: 0.4rem;
  white-space: nowrap;
}

/* arrastar: o cartão que segue o dedo e o buraco que ele deixou */
.cartao.arrastando, .par.arrastando { opacity: 0.35; }
.fantasma {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  margin: 0;
  box-shadow: 0 18px 40px rgb(9 10 28 / 0.28);
  rotate: -1.5deg;
  opacity: 0.96;
}
.cartao.alvo-par {
  border-color: var(--azul);
  background: var(--azul-10);
  box-shadow: inset 0 0 0 1px var(--azul);
}
.arrastavel { touch-action: pan-y; cursor: grab; }
.arrastavel:active { cursor: grabbing; }

/* o quadro traz as próprias colunas; a grade da lista não se impõe */
.lista.sem-grade { display: block; }

/* ============================================================
   FILA DE PEDIDOS DE ACESSO (Equipe)
   ============================================================ */

#lista-pendentes .cartao {
  grid-template-columns: auto 1fr;
  row-gap: var(--e2);
}
#lista-pendentes .ordena {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e2);
}
#lista-pendentes .ordena .bt { width: 100%; font-size: 0.78rem; }

/* ---------- convite da equipe ---------- */

.envios { display: grid; gap: var(--e2); margin-top: var(--e3); }
.envios .bt { width: 100%; }
.passo-a-passo {
  margin-top: var(--e4);
  padding: var(--e3);
  background: var(--papel-2);
  border-radius: var(--raio-2);
  font-size: 0.9rem;
}
.passo-a-passo summary { cursor: pointer; font-weight: 600; min-height: 1.75rem; }
.passo-a-passo ol { margin: var(--e2) 0 0; padding-left: 1.2rem; }
.passo-a-passo li { margin-bottom: var(--e1); }
.passo-a-passo p { margin: var(--e2) 0 0; color: var(--tinta-2); }

/* ============================================================
   RECADOS E BILHETES — a voz do convidado é serifa itálica
   ============================================================ */

.bilhete {
  margin: calc(var(--e2) * -1 + 0px) 0 var(--e2);
  padding: var(--e3) var(--e4);
  border-left: 3px solid var(--pervinca);
  border-radius: 0 var(--raio) var(--raio) 0;
  background: var(--papel-2);
  font-family: var(--serif);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--tinta);
  text-wrap: pretty;
}

.recado-cheio {
  margin: 0;
  padding: var(--e3);
  background: var(--papel-2);
  border-left: 3px solid var(--pervinca);
  border-radius: 0 var(--raio-2) var(--raio-2) 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.recado-cheio.vazio-recado {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--tinta-3);
  font-style: italic;
}

/* ============================================================
   GAVETAS
   ============================================================ */

.sombra {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgb(25 26 58 / 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: aparece 0.25s var(--suave) both;
}
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

.gaveta {
  position: fixed;
  z-index: 31;
  left: 0; right: 0; bottom: 0;
  max-height: 92svh;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -18px 50px rgb(25 26 58 / 0.3);
  animation: sobe 0.35s var(--suave) both;
}
@keyframes sobe { from { translate: 0 100%; } to { translate: 0 0; } }
.gaveta-puxador {
  width: 2.6rem; height: 4px;
  border-radius: 999px;
  background: var(--linha-forte);
  opacity: 0.4;
  margin: var(--e2) auto 0;
}
.gaveta-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding: var(--e2) var(--margem) 0;
}
.gaveta-topo h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--navy);
}
.gaveta-x {
  border: 0;
  background: none;
  color: var(--tinta);
  font-size: 1.9rem;
  line-height: 1;
  opacity: 0.5;
  cursor: pointer;
  width: 2.75rem;
  height: 2.75rem;
}
.gaveta-x:hover { opacity: 1; }
.gaveta-corpo {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--margem) var(--e4);
}
.gaveta-corpo label:first-child { margin-top: var(--e2); }
/* as ações ficam presas no rodapé: o polegar não precisa caçar */
.gaveta-pe {
  display: flex;
  gap: var(--e2);
  padding: var(--e3) var(--margem) calc(var(--e3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linha);
  background: var(--papel);
}
.gaveta-pe .bt { flex: 1; }
.gaveta-pe .bt-cheio { flex: 1.6; }

.passos {
  margin: 0.15rem 0 0;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.passo > *:first-child { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .gaveta, .sombra { animation: none; }
}

/* ============================================================
   DESKTOP (>= 1020px) — o portal de verdade

   Menu lateral fixo, conteúdo centrado em coluna larga, gaveta
   entrando pela direita, ação principal no cabeçalho da página.
   ============================================================ */

@media (min-width: 1020px) {
  .app {
    display: grid;
    grid-template-columns: var(--lateral-l) minmax(0, 1fr);
    min-height: 100svh;
  }

  .lateral {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100svh;
    background: var(--branco);
    border-right: 1px solid var(--linha);
  }

  .topo-m, .abas, .fab { display: none !important; }

  .palco { min-width: 0; }

  .pagina {
    max-width: 76rem;
    margin: 0 auto;
    padding: var(--e5) var(--e5) 0;
    align-items: center;
  }
  .pagina-titulo { font-size: 2rem; }
  .pagina-sub { font-size: 0.88rem; }
  .pagina-acao { display: inline-flex; }
  .pagina-acao span:first-child { font-size: 1.15rem; line-height: 1; }

  .conteudo {
    max-width: 76rem;
    margin: 0 auto;
    width: 100%;
    padding: var(--e4) var(--e5) var(--e6);
  }

  .visao { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
  .kpis { grid-template-columns: repeat(4, 1fr); }
  .blocos { grid-template-columns: repeat(2, 1fr); }
  .recados-home { grid-template-columns: repeat(3, 1fr); }
  .painel-relatorios { grid-template-columns: 1fr 1fr; align-items: start; }
  .envios { grid-template-columns: repeat(3, 1fr); }

  .hero-dia { padding: var(--e4) var(--e5); }
  .hero-num { font-size: 3.2rem; }

  /* as listas viram grade: a tela larga cabe três ou quatro cartões */
  .lista { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--e3); }
  .grupo-titulo { grid-column: 1 / -1; margin: var(--e4) 0 0; }
  .resumo, .vazio, .bilhete { grid-column: 1 / -1; }
  #lista-rsvp, #lista-textos { grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); }

  /* cartão em grade vira ficha: a foto ganha altura de verdade */
  .lista .cartao {
    grid-template-columns: 1fr;
    align-items: start;
    align-content: start;
    gap: var(--e2);
    padding: var(--e3);
    min-height: 0;
  }
  .lista .cartao-capa {
    width: 100%;
    height: 9.5rem;
    border-radius: var(--raio-2);
    font-size: 2rem;
  }
  .lista .cartao-seta { display: none; }
  .lista .cartao .ordena { justify-self: start; }

  /* listas sem foto seguem em linha */
  #lista-textos .cartao, #lista-rsvp .cartao,
  #lista-doacoes .cartao, #lista-pedidos .cartao, #lista-equipe .cartao,
  #lista-padrinhos .cartao, #lista-convidados .cartao {
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }
  #lista-textos .cartao-capa, #lista-rsvp .cartao-capa,
  #lista-doacoes .cartao-capa, #lista-pedidos .cartao-capa,
  #lista-equipe .cartao-capa, #lista-padrinhos .cartao-capa,
  #lista-convidados .cartao-capa {
    width: 3rem;
    height: 3rem;
    font-size: 1.1rem;
  }
  #lista-equipe .cartao-seta { display: block; }

  #lista-pendentes .cartao { grid-template-columns: auto 1fr auto; }
  #lista-pendentes .ordena { grid-column: auto; display: flex; gap: var(--e1); }
  #lista-pendentes .ordena .bt { width: auto; min-width: 7rem; }

  /* gaveta vira painel lateral */
  .gaveta {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    translate: 0;
    width: min(30rem, 94vw);
    max-height: none;
    border-radius: 20px 0 0 20px;
    animation: entra-lado 0.32s var(--suave) both;
  }
  @keyframes entra-lado { from { translate: 100% 0; } to { translate: 0 0; } }
  .gaveta-puxador { display: none; }
  .gaveta-topo { padding-top: var(--e4); }
  .bt-largo { width: auto; min-width: 12rem; }
}

/* ============================================================
   DUAS TRAVAS GLOBAIS

   As duas causaram cinco defeitos diferentes neste site, sempre em
   silêncio — nada quebra, só não acontece o que devia.

   1. `[hidden]` TEM QUE GANHAR. O `display: none` que o navegador dá pro
      atributo vem da folha do UA, então QUALQUER `display: grid/flex/
      block` de autor o vence, e o elemento fica na tela mesmo com
      `hidden`. Foi assim que a caixa de sugestões de e-mail continuou
      montada depois do blur, e que a tela do RSVP ficava sempre presente.

   2. CAMPO NUNCA ABAIXO DE 16px NO CELULAR. Fonte menor que isso faz o
      Safari do iPhone dar zoom sozinho ao focar, e o zoom desalinha a
      tela inteira. Aconteceu no RSVP e na gaveta do Pix.
   ============================================================ */
[hidden] { display: none !important; }

@media (max-width: 760px) {
  input, textarea, select { font-size: max(16px, 1em); }
}

/* ============================================================
   COTAS DE CONTRIBUIÇÃO — as brincadeiras, editáveis no painel

   Moram num acordeão como o "o que falta": são poucas e não podem
   roubar a tela da lista de presentes. Dentro, cada linha edita na
   própria célula, igual às tabelas.
   ============================================================ */

.cotas-acoes { display: flex; align-items: center; gap: var(--e2); }
.cotas-acoes .bt { min-height: 2.4rem; padding: 0.4rem var(--e3); font-size: 0.78rem; }
.cotas-resumo { margin: 0 0 var(--e2); font-size: 0.85rem; color: var(--tinta-2); }
.cota-excluir {
  border: 0;
  background: none;
  color: var(--perigo);
  font: inherit;
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.3rem;
  white-space: nowrap;
}

/* ============================================================
   A JORNADA DO PRESENTE

   Um convidado tocou "já comprei" sem comprar, e o painel não tinha
   como mostrar onde cada pessoa parou. Agora cada pedido carrega as
   etapas com hora, e a cor diz o que cada uma pede:

     âmbar cheio    = precisa de você (falta finalizar, Pix a confirmar)
     âmbar vazado   = a pessoa DISSE que finalizou — é declaração, não
                      confirmação; falta você conferir
     verde          = confirmado / chegou em casa
     sem cor        = agradecido, desistiu — acabou

   Nada de cor nova: é a paleta do cabeçalho do arquivo, em mais um
   arranjo.
   ============================================================ */

/* a declaração do convidado: âmbar, mas só o contorno — ainda não é fato */
.selo-mini.declarou {
  background: transparent;
  border: 1px solid rgb(138 90 0 / 0.4);
  color: var(--ambar);
}

/* quem desistiu fica na lista (o casal precisa saber que chegou até
   ali), mas apagado e sem ação — não compete com quem está em aberto */
.cartao.desistiu { opacity: 0.5; }
.cartao.desistiu:hover { border-color: var(--linha); box-shadow: var(--sombra-1); }

/* botão de ação dentro da linha da tabela: menor que o .bt de gaveta
   para não engordar a linha; no celular volta aos 44px do polegar */
.bt-mini {
  min-height: 2.4rem;
  padding: 0.3rem 0.8rem;
  font-size: 0.76rem;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .bt-mini { min-height: 2.75rem; }
}

/* ---------- a linha do tempo na ficha ---------- */

.jornada-bloco { margin-top: var(--e3); }
.jornada {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.jornada-passo {
  position: relative;
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 var(--e2);
  padding: 0.3rem 0;
  font-size: 0.88rem;
  color: var(--tinta-3);
}
/* o fio que liga os pontos: atrás deles, do meio do primeiro ao meio
   do último */
.jornada-passo::before {
  content: '';
  position: absolute;
  left: calc(0.5rem - 1px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--linha);
}
.jornada-passo:first-child::before { top: 50%; }
.jornada-passo:last-child::before { bottom: 50%; }
.jornada-passo:only-child::before { display: none; }
.jornada-ponto {
  position: relative;
  z-index: 1;
  width: 0.65rem;
  height: 0.65rem;
  justify-self: center;
  border-radius: 999px;
  background: var(--papel);
  border: 2px solid var(--linha-forte);
}
.jornada-nome { min-width: 0; overflow-wrap: anywhere; }
.jornada-data {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--tinta-3);
}
/* passo feito: tinta cheia e ponto azul; o que não aconteceu fica
   apagado, mas presente — a lacuna também conta a história */
.jornada-passo.feito { color: var(--tinta); }
.jornada-passo.feito .jornada-ponto { background: var(--azul); border-color: var(--azul); }
.jornada-passo.feito .jornada-data { color: var(--tinta-2); }
.jornada-passo.feito.bom .jornada-ponto { background: var(--verde); border-color: var(--verde); }
.jornada-passo.feito.ruim { color: var(--tinta-2); }
.jornada-passo.feito.ruim .jornada-ponto { background: var(--tinta-3); border-color: var(--tinta-3); }

.jornada-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
  margin-top: var(--e2);
}
.jornada-acoes:empty { display: none; }
.jornada-acoes .bt { font-size: 0.8rem; padding: 0.45rem 0.85rem; }

/* ---------- relatórios: o funil ---------- */

.funil { display: grid; gap: 0.45rem; }
.funil-linha {
  display: grid;
  grid-template-columns: minmax(6.5rem, 11rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e2);
}
.funil-rotulo {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.25;
  color: var(--tinta-2);
}
.funil-trilho {
  height: 0.9rem;
  border-radius: 4px;
  background: var(--papel-2);
  overflow: hidden;
}
.funil-barra {
  height: 100%;
  border-radius: 4px;
  background: var(--azul);
  transition: width 0.6s var(--suave);
}
/* o fim do funil é o que está resolvido: verde, como nas metas */
.funil-barra.feito { background: var(--verde); }
.funil-num {
  min-width: 2.4rem;
  text-align: right;
  font-family: var(--numero);
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.funil-linha.zero .funil-num { color: var(--tinta-3); }

/* a foto pequena ao lado do nome, na tabela por presente */
.funil-presente { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.funil-foto {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  object-fit: cover;
  background: var(--papel-2);
}
.funil-presente span { min-width: 0; overflow-wrap: anywhere; }

/* tabela que só se lê: sem cursor de mão nem realce de linha */
.tabela.so-leitura tbody tr { cursor: default; }
.tabela.so-leitura tbody tr:hover { background: transparent; }

/* as cotas mais escolhidas */
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.ranking li {
  display: flex;
  justify-content: space-between;
  gap: var(--e2);
  font-size: 0.86rem;
}
.ranking-nome { min-width: 0; overflow-wrap: anywhere; }
.ranking-num { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--tinta-2); }

/* os últimos passos: hora à esquerda, frase à direita */
.passos-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.passo-evento {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e2);
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--linha);
  font-size: 0.86rem;
}
.passo-evento:last-child { border-bottom: 0; }
.passo-quando {
  padding-top: 0.1rem;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--tinta-3);
}
.passo-frase { margin: 0; color: var(--tinta); overflow-wrap: anywhere; }
.passo-frase strong { font-weight: 600; }

@media (min-width: 1020px) {
  /* o funil tem tabela larga: toma as duas colunas dos relatórios */
  .funil-secao { grid-column: 1 / -1; }
}

/* ============================================================
   CHEGADA — a portaria do sábado

   A única tela deste painel que é usada em pé, com uma mão, com fila
   na frente e sol na cara. Ela é o oposto do resto: em vez de caber
   muita coisa, cabe pouca coisa grande.

   - O alvo do polegar tem 3.5rem (56px) de altura e toda a largura
     que sobra da linha. Errar quem chegou custa uma conversa
     constrangedora na porta; o botão tem que ser difícil de errar.
   - O campo de busca é o único elemento acima da lista que não é
     número, e passa dos 16px de propósito — abaixo disso o Safari do
     iPhone dá zoom ao focar e joga metade da tela pra fora.
   - Cor com o significado de sempre: azul do casal é ação, âmbar é
     "precisa de você" (não confirmou), verde é resolvido (chegou).
   - Dígito nenhum em Italiana. O placar é Georgia (via .pedra); a hora
     e o contador são sans com tabular-nums, porque são número corrido.
   ============================================================ */

/* o placar: "31 de 76" é o número que se lê de longe, então toma a
   linha inteira e cresce; faltam e última chegada dividem a de baixo */
.visao-chegada .pedra:first-child { grid-column: 1 / -1; }
.visao-chegada .pedra:first-child strong { font-size: clamp(1.9rem, 9vw, 2.6rem); }

/* input[type=search] não entra na regra geral de campo deste arquivo:
   o desenho dele mora todo aqui */
.chegada-busca { margin: 0 0 var(--e2); }
.chegada-busca input[type="search"] {
  width: 100%;
  min-height: 3.5rem;
  padding: 0.7rem var(--e3);
  font-family: var(--sans);
  font-size: 1.05rem;
  color: var(--tinta);
  background: var(--branco);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  -webkit-appearance: none;
  appearance: none;
}
.chegada-busca input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.chegada-busca input[type="search"]:focus-visible {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px var(--azul-16);
}

/* o aviso de "não gravou" só ocupa espaço quando tem o que dizer */
.aviso-chegada { margin: 0 0 var(--e2); min-height: 0; font-size: 0.88rem; }
.aviso-chegada:empty { display: none; }

/* ---------- a linha de um grupo ---------- */

.lista-chegada { gap: var(--e1); }

.chegou-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e2) var(--e3);
  padding: var(--e2) var(--e2) var(--e2) var(--e3);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: var(--sombra-1);
}
/* quem já entrou vai perdendo peso: a lista é a fila que ainda falta */
.chegou-linha.chegou {
  background: var(--papel);
  border-color: var(--linha);
  box-shadow: none;
}
.chegou-quem { min-width: 0; }
.chegou-nome {
  margin: 0;
  /* legível de longe: é o que ela confere olhando pro convidado */
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--navy);
  overflow-wrap: anywhere;
}
.chegou-linha.chegou .chegou-nome { color: var(--tinta-2); font-weight: 500; }

.chegou-detalhe {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  margin-top: 0.2rem;
}

/* "3 pessoas" é botão: abre o contador. Sublinhado tracejado porque
   texto que se toca tem que parecer que se toca. */
.chegou-quantos {
  display: inline-flex;
  align-items: center;
  min-height: 2.1rem;
  padding: 0 0.15rem;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  color: var(--azul);
  text-decoration: underline dashed;
  text-underline-offset: 3px;
  cursor: pointer;
}
.chegou-quantos[aria-expanded="true"] { font-weight: 600; }
.chegou-hora {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2);
}

/* ---------- o alvo principal ---------- */

.chegou-bt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  /* 56px de altura: é o alvo que ela acerta sem olhar. A largura é a
     que sobrar da linha — o mínimo aqui só garante que ele não encolha
     junto com um nome comprido. */
  min-height: 3.5rem;
  min-width: 6.75rem;
  padding: 0.5rem var(--e2);
  border: 1px solid var(--azul);
  border-radius: var(--raio-2);
  background: var(--azul);
  color: var(--branco);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.chegou-bt:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); }
.chegou-bt:active { background: var(--azul-escuro); }

/* marcado: vira placa verde e para de aceitar toque (desfazer é embaixo).
   Não usa a opacidade do [disabled] geral — isto aqui é estado, não
   impedimento, e tem que continuar legível ao sol. */
.chegou-bt.feito,
.chegou-bt.feito[disabled] {
  background: var(--verde-fundo);
  border-color: rgb(28 107 71 / 0.3);
  color: var(--verde);
  opacity: 1;
  cursor: default;
}
.chegou-bt.feito strong { font-weight: 700; font-size: 0.9rem; }
.chegou-bt.feito span {
  font-weight: 600;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

/* ---------- o pé da linha: contador e desfazer ---------- */

.chegou-pe {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2);
  padding-top: var(--e1);
  border-top: 1px solid var(--linha);
}

/* desfazer é de propósito o menos vistoso da linha: existe, mas não
   disputa o polegar com o botão de marcar */
.chegou-desfaz {
  min-height: 2.75rem;
  padding: 0 0.3rem;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--tinta-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.chegou-desfaz:hover { color: var(--perigo); }

/* o contador: cada toque já grava, não há Salvar */
.contador {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: 0.15rem;
}
.contador-bt {
  width: 3rem;
  height: 2.9rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-2);
  background: var(--branco);
  color: var(--azul);
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.contador-bt:hover { border-color: var(--azul); background: var(--azul-10); }
.contador-bt[disabled] { opacity: 0.35; pointer-events: none; }
/* número corrido é sans com tabular-nums — Georgia é pro placar */
.contador-num {
  min-width: 1.4rem;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.contador-de {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2);
}

@media (min-width: 480px) {
  /* com um pouco mais de largura o botão respira em vez de crescer a
     lista pra baixo — mais gente cabe na tela sem rolar */
  .chegou-bt { min-width: 9.5rem; }
}

/* ---------- portaria: os ajustes que a fila exige ----------

   Tudo aqui nasceu da revisão pensando na cena real: sol, fila de doze
   pessoas, celular numa mão. */

/* A busca é a ferramenta usada em TODO convidado — ela não pode sair da
   tela quando a lista rola. */
.chegada-busca {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--papel);
  padding-bottom: var(--e2);
}

/* "3 pessoas" é o único caminho para a chegada parcial, que é caso
   normal, não exceção: tem que ter tamanho de dedo. */
.chegou-quantos {
  min-height: 2.75rem;
  padding: 0 0.5rem;
}

/* Marcado na tela mas ainda não gravado: a linha inteira avisa. */
.chegou-linha.nao-gravou {
  border-left: 4px solid var(--perigo);
  background: color-mix(in srgb, var(--perigo) 5%, transparent);
}
.chegou-bt.repetir {
  background: var(--perigo);
  border-color: var(--perigo);
  color: #fff;
}

/* O lugar do "desfazer" existe desde antes de haver o que desfazer: sem
   isso a linha crescia de repente e empurrava a lista sob o dedo. */
.chegou-desfaz.vago { visibility: hidden; pointer-events: none; }

/* O "Sem lista" ao lado da busca, no lugar do FAB — que caía em cima do
   botão "Chegou" da última linha. */
.chegada-busca { display: flex; gap: var(--e2); align-items: stretch; }
.chegada-busca input { flex: 1; min-width: 0; }
#bt-avulso {
  flex: 0 0 auto;
  min-height: 3.5rem;
  padding: 0 var(--e3);
  white-space: nowrap;
}

/* O tom `perigo` não existia como selo — só como token de cor. */
.selo-mini.perigo {
  background: var(--perigo-fundo);
  color: var(--perigo);
  border-color: color-mix(in srgb, var(--perigo) 30%, transparent);
}