/* =============================================================
   60 anos do Oliver — 07.09.2026
   Design baseado no convite "convite_oliver_60_web_elementos".
   Sem fontes externas, sem CDN: funciona 100% offline.
   ============================================================= */

:root {
  --green:      #17824a;
  --green-dark: #0f6137;
  --yellow:     #f0c53f;
  --blue:       #114c97;
  --paper:      #f7f0df;
  --paper-2:    #f3e6c7;
  --ink:        #25412f;
  --card:       rgba(255, 255, 255, .82);
  --shadow:     0 14px 45px rgba(0, 0, 0, .16);
  --radius:     24px;
  --max:        1080px;

  /* acrescentados para a confirmação de presença */
  --red:        #b3352a;
  --red-soft:   #fbeae7;
  --green-soft: #e8f2eb;
  --yellow-soft:#fdf4dc;
  --line:       rgba(23, 130, 74, .18);
  --script:     "Brush Script MT", "Segoe Script", cursive;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 12%, rgba(23, 130, 74, .09) 0 6px, transparent 7px) 0 0/58px 58px,
    radial-gradient(circle at 80% 30%, rgba(17, 76, 151, .08) 0 5px, transparent 6px) 0 0/64px 64px,
    radial-gradient(circle at 55% 80%, rgba(240, 197, 63, .12) 0 5px, transparent 6px) 0 0/72px 72px,
    linear-gradient(180deg, var(--paper), var(--paper-2));
  background-attachment: fixed;
  overflow-x: hidden;
}

/* ---------- elementos decorativos de fundo ---------- */
.bg-el {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  opacity: .22;
  filter: saturate(.95);
  user-select: none;
}
.bg-el img { width: 100%; height: auto; display: block; }
.toucan { top: 0;      left: 0;  width: min(28vw, 290px); }
.flag   { top: 10px;   right: 0; width: min(24vw, 250px); opacity: .18; }
.drum   { bottom: 0;   left: 0;  width: min(28vw, 300px); opacity: .2; }
.rio    { bottom: 0;   right: 0; width: min(32vw, 340px); opacity: .18; }

/* ---------- estrutura ---------- */
.wrap {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 32px), var(--max));
  margin: 0 auto;
  padding: 30px 0 48px;
}
.wrap-estreito { --max: 780px; }

.centro { text-align: center; }
.escondido { display: none !important; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  text-align: center;
  padding: 56px 22px 40px;
  margin-top: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .72));
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 36px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(7px);
}

.eyebrow {
  display: inline-block;
  background: rgba(240, 197, 63, .28);
  color: var(--green-dark);
  padding: 8px 16px;
  border-radius: 999px;
  letter-spacing: .06em;
  font-weight: 700;
  text-transform: uppercase;
  font-size: .92rem;
}

h1 {
  margin: 18px 0 6px;
  font-size: clamp(2.4rem, 7vw, 5.6rem);
  line-height: .94;
  color: var(--blue);
  font-weight: 900;
}
h1 .num { color: var(--green); font-size: 1.1em; }

.script {
  display: block;
  color: var(--green);
  font-family: var(--script);
  font-weight: 600;
  font-size: clamp(2rem, 6vw, 4rem);
  margin-top: 6px;
}

.subtitle {
  max-width: 820px;
  margin: 18px auto 0;
  font-size: clamp(1rem, 2.4vw, 1.38rem);
  line-height: 1.55;
  color: #365845;
}
.subtitle strong { color: var(--blue); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}
.chip {
  background: rgba(23, 130, 74, .1);
  border: 1px solid rgba(23, 130, 74, .18);
  color: var(--green-dark);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
}

/* saudação pessoal do convidado */
.saudacao {
  margin-top: 26px;
  padding: 18px 20px;
  background: rgba(17, 76, 151, .07);
  border: 1px solid rgba(17, 76, 151, .16);
  border-radius: var(--radius);
}
.saudacao .ola {
  font-size: clamp(1.35rem, 4.6vw, 1.9rem);
  font-weight: 900;
  color: var(--blue);
  margin: 0;
}
.saudacao .ola strong { color: var(--green); }
.saudacao .so-seu { margin: 4px 0 0; color: #5e6c61; font-size: .95rem; }
.saudacao .vagas-destaque {
  margin: 10px 0 0;
  display: inline-block;
  background: rgba(23, 130, 74, .12);
  border: 1px solid rgba(23, 130, 74, .28);
  color: var(--green-dark);
  font-weight: 800;
  padding: 7px 16px;
  border-radius: 999px;
}

.botao-escolha small {
  display: block;
  font-weight: 600;
  font-size: .82rem;
  opacity: .8;
  margin-top: 3px;
}

.dica-campo {
  margin: 6px 0 0;
  font-size: .85rem;
  color: #8a6d1f;
  background: var(--yellow-soft);
  border-left: 4px solid var(--yellow);
  padding: 7px 12px;
  border-radius: 8px;
}

.lista-confirmada li.vaga-livre {
  background: var(--yellow-soft);
  border-color: rgba(240, 197, 63, .8);
  color: #6b5200;
  font-weight: 600;
  font-size: .92rem;
}

/* contagem regressiva */
.contagem {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 18px;
  background: rgba(240, 197, 63, .3);
  border: 1px solid rgba(240, 197, 63, .7);
  border-radius: 999px;
  padding: 10px 22px;
}
.contagem .numero {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 900;
  color: var(--blue);
  line-height: 1;
}
.contagem span:last-child { color: var(--green-dark); font-weight: 700; }

/* ---------- cartões ---------- */
.grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .62);
}
.card h2 {
  margin: 0 0 10px;
  color: var(--blue);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.detail-value {
  font-size: clamp(1.3rem, 3vw, 2rem);
  line-height: 1.15;
  color: var(--green-dark);
  font-weight: 900;
  margin-bottom: 6px;
}
.muted { color: #5e6c61; }

.highlight {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 20px;
}
.message p { margin: 0; font-size: 1.12rem; line-height: 1.75; }
.attire {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100%;
  background: linear-gradient(180deg, rgba(240, 197, 63, .19), rgba(23, 130, 74, .08));
}
.attire strong {
  display: block;
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 8px;
}
.attire span {
  font-family: var(--script);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--blue);
  font-weight: 600;
}

.section-title {
  font-size: 1rem;
  margin-bottom: 10px;
  color: var(--green-dark);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .08em;
}

/* ---------- botões ---------- */
.actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  padding: 14px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-family: inherit;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .1);
}
.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity: .55; cursor: wait; transform: none; }
.btn.primary   { background: var(--green); color: #fff; }
.btn.secondary { background: #fff; color: var(--blue); }
.btn.gold      { background: var(--yellow); color: #5a4210; }
.btn.largo     { width: 100%; }

/* ---------- confirmação de presença ---------- */
.rsvp { margin-top: 22px; }
.rsvp h2 { font-size: 1.35rem; }

.escolha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 6px;
}
.botao-escolha {
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  padding: 20px 16px;
  min-height: 66px;
  border-radius: var(--radius);
  border: 2px solid var(--line);
  background: rgba(255, 255, 255, .8);
  color: #5e6c61;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  text-align: center;
}
.botao-escolha:hover { transform: translateY(-2px); }
.botao-escolha.ativo-sim {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  box-shadow: 0 12px 26px rgba(23, 130, 74, .32);
}
.botao-escolha.ativo-nao {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 12px 26px rgba(179, 53, 42, .28);
}

.divisor {
  border: 0;
  border-top: 2px dotted var(--line);
  margin: 22px 0;
}

.rotulo-campo {
  display: block;
  font-weight: 700;
  font-size: .98rem;
  margin-bottom: 10px;
  color: var(--green-dark);
}

input[type="text"], input[type="password"], input[type="number"], select {
  width: 100%;
  font-family: inherit;
  font-size: 1.05rem;
  padding: 14px 16px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  min-height: 50px;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(23, 130, 74, .16);
}
input.erro-campo { border-color: var(--red); background: var(--red-soft); }

/* contador de pessoas */
.contador { display: flex; align-items: center; gap: 14px; }
.contador input {
  text-align: center;
  font-size: 2rem;
  font-weight: 900;
  color: var(--blue);
  padding: 8px;
  flex: 1;
  min-width: 0;
  -moz-appearance: textfield;
}
.contador input::-webkit-outer-spin-button,
.contador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.botao-passo {
  width: 58px; height: 58px;
  flex: 0 0 58px;
  border-radius: 50%;
  border: 2px solid var(--green);
  background: #fff;
  color: var(--green);
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
}
.botao-passo:hover { background: var(--green); color: #fff; }
.botao-passo:disabled { opacity: .35; cursor: not-allowed; background: #fff; color: var(--green); }

.campo-nome { margin-bottom: 14px; }
.campo-nome .rotulo-campo { font-size: .88rem; color: #5e6c61; font-weight: 700; }

/* avisos */
.aviso {
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 16px;
  font-size: .98rem;
  border: 1px solid transparent;
  font-weight: 600;
}
.aviso-erro   { background: var(--red-soft);    border-color: var(--red);    color: #7c2318; }
.aviso-ok     { background: var(--green-soft);  border-color: var(--green);  color: var(--green-dark); }
.aviso-neutro { background: var(--yellow-soft); border-color: var(--yellow); color: #6b5200; }

/* tela de confirmação */
.selo-ok { text-align: center; font-size: 3.4rem; line-height: 1; margin-bottom: 6px; }
.lista-confirmada { list-style: none; padding: 0; margin: 0 0 20px; }
.lista-confirmada li {
  padding: 13px 16px;
  background: var(--green-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 9px;
  font-weight: 700;
}
.lista-confirmada li span { color: var(--green); font-weight: 900; margin-right: 8px; }

/* ---------- rodapé ---------- */
.footer-note {
  text-align: center;
  margin-top: 26px;
  font-size: clamp(1.4rem, 4vw, 2.6rem);
  color: var(--green);
  font-family: var(--script);
  font-weight: 600;
}
.signature {
  text-align: center;
  font-size: clamp(2rem, 5vw, 3.6rem);
  color: var(--blue);
  font-family: var(--script);
  margin-top: 6px;
}

/* ---------- painel do administrador ---------- */
.resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.bloco-resumo {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, .62);
  border-top: 5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  padding: 18px 20px;
}
.bloco-resumo .n { font-size: 2.2rem; font-weight: 900; line-height: 1.1; }
.bloco-resumo .t {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
  color: #5e6c61; font-weight: 800;
}
.bloco-verde    { border-top-color: var(--green); }
.bloco-verde .n { color: var(--green-dark); }
.bloco-amarelo    { border-top-color: var(--yellow); }
.bloco-amarelo .n { color: #a17c00; }
.bloco-vermelho    { border-top-color: var(--red); }
.bloco-vermelho .n { color: var(--red); }
.bloco-azul    { border-top-color: var(--blue); }
.bloco-azul .n { color: var(--blue); }

.rolagem-tabela { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.tabela { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 860px; }
table.tabela th {
  text-align: left;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #5e6c61;
  padding: 12px 10px;
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
table.tabela th:hover { color: var(--green); }
table.tabela td { padding: 12px 10px; border-bottom: 1px solid rgba(23, 130, 74, .1); vertical-align: top; }
table.tabela tbody tr:hover { background: rgba(240, 197, 63, .12); }
.col-nome { font-weight: 800; color: var(--blue); font-size: 1rem; }
.nomes-lista { color: #5e6c61; font-size: .9rem; }
.col-data { white-space: nowrap; font-size: .85rem; color: #5e6c61; }

/* Os botões quebram em várias linhas dentro da coluna. Sem isso a coluna
   fica com ~510px, a tabela passa da largura da tela e os botões da direita
   (WhatsApp, Editar, Excluir) ficam escondidos. */
.col-acoes {
  white-space: normal;
  width: 200px;
  min-width: 200px;
}
.col-acoes .botao-pequeno { margin: 0 4px 4px 0; }
.botao-destaque {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.botao-destaque:hover { background: var(--green-dark); color: #fff; border-color: var(--green-dark); }
.endereco {
  font-family: Consolas, "Courier New", monospace;
  background: rgba(17, 76, 151, .09);
  border: 1px solid rgba(17, 76, 151, .22);
  color: var(--blue);
  padding: 4px 10px;
  border-radius: 8px;
  display: inline-block;
  word-break: break-all;
}

.nota-interna {
  display: inline-block;
  margin-top: 5px;
  background: rgba(17, 76, 151, .1);
  border: 1px solid rgba(17, 76, 151, .25);
  color: var(--blue);
  font-size: .74rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}

.botao-pequeno {
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  padding: 8px 13px;
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--blue);
  cursor: pointer;
  white-space: nowrap;
}
.botao-pequeno:hover { background: var(--green-soft); border-color: var(--green); }
.botao-perigo { color: var(--red); }
.botao-perigo:hover { background: var(--red-soft); border-color: var(--red); }

.tag-status {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.tag-confirmado { background: var(--green);  color: #fff; }
.tag-recusado   { background: var(--red);    color: #fff; }
.tag-pendente   { background: var(--yellow); color: #5a4210; }

.barra-ferramentas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}
.barra-ferramentas input[type="text"],
.barra-ferramentas select { width: auto; flex: 1 1 190px; min-height: 46px; font-size: .95rem; }

.form-linha { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.form-linha > div { flex: 1 1 190px; }
.form-linha > div.estreito { flex: 0 0 140px; }

/* ---------- responsivo ---------- */
/* Em janelas estreitas some a coluna menos importante ("Atualizado"),
   para os botoes de acao continuarem visiveis sem rolar a tabela. */
@media (max-width: 1000px) {
  table.tabela { min-width: 760px; }
  table.tabela th:nth-child(6),
  table.tabela td:nth-child(6) { display: none; }
}

.dica-rolagem {
  margin: 10px 0 0;
  font-size: .86rem;
  font-weight: 700;
  color: var(--blue);
  background: rgba(240, 197, 63, .25);
  border: 1px solid rgba(240, 197, 63, .7);
  border-radius: 10px;
  padding: 8px 12px;
}

@media (max-width: 880px) {
  .grid, .highlight { grid-template-columns: 1fr; }
  .hero { padding: 42px 18px 28px; }
  .wrap { width: min(calc(100% - 22px), var(--max)); }
  .bg-el { opacity: .14; }
}

@media (max-width: 560px) {
  .toucan { width: 160px; }
  .flag   { width: 150px; }
  .drum   { width: 160px; }
  .rio    { width: 170px; }
  .card { padding: 20px; }
  .btn { width: 100%; }
  .escolha { grid-template-columns: 1fr; }
  .form-linha > div, .form-linha > div.estreito { flex: 1 1 100%; }
}