:root {
  --azul: #17458F;        /* azul real do Rotary */
  --azul-fundo: #E8EEF8;
  --ouro: #F7A81B;        /* dourado do Rotary */
  --tinta: #1C2A3F;
  --suave: #5B6B82;
  --fundo: #F4F6FA;
  --papel: #FFFFFF;
  --linha: #D5DCE8;
  --verde: #2E7D4F;
  --vermelho: #B83227;
  --raio: 10px;
  font-size: 17px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--tinta);
  background: var(--fundo);
  line-height: 1.5;
}
main { max-width: 980px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
h1 { font-size: 1.9rem; line-height: 1.15; margin: 0 0 .5rem; color: var(--azul); }
h2 { font-size: 1.2rem; margin: 0 0 .5rem; }
a { color: var(--azul); }
:focus-visible { outline: 3px solid var(--ouro); outline-offset: 2px; }

/* Topo */
.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--azul); color: #fff; padding: .7rem 1.25rem;
  border-bottom: 5px solid var(--ouro);
}
.topo .marca { color: #fff; font-weight: 700; text-decoration: none; font-size: 1.1rem; }
.topo nav { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }
.topo nav a, .topo .link { color: #fff; text-decoration: none; opacity: .9; }
.topo nav a:hover, .topo .link:hover { opacity: 1; text-decoration: underline; }
.topo form { margin: 0; }

/* Formulários */
label { display: block; font-weight: 700; font-size: .92rem; }
input, select, textarea {
  display: block; width: 100%; margin-top: .3rem;
  font: inherit; font-weight: 400; color: var(--tinta);
  padding: .55rem .7rem; border: 1.5px solid var(--linha); border-radius: 8px; background: #fff;
}
input:focus, select:focus, textarea:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px var(--azul-fundo); }
fieldset { border: 1.5px solid var(--linha); border-radius: var(--raio); padding: 1rem; margin: 0; }
legend { font-weight: 700; color: var(--azul); padding: 0 .4rem; }
.pilha { display: grid; gap: 1rem; }
.pilha.mini { gap: .6rem; margin: .6rem 0; }
.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.grade-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.curto { max-width: 280px; }
.dica { color: var(--suave); font-weight: 400; font-size: .88rem; }
label .dica { margin-left: .3rem; }
.check { display: flex; align-items: center; gap: .4rem; font-weight: 400; white-space: nowrap; }
.check input { width: auto; margin: 0; }

/* Botões */
button, .botao {
  display: inline-block; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
  padding: .6rem 1.1rem; border-radius: 8px;
  border: 1.5px solid var(--azul); background: #fff; color: var(--azul);
}
button:hover, .botao:hover { background: var(--azul-fundo); }
.primario { background: var(--azul); color: #fff; }
.primario:hover { background: #10336d; }
.secundario { border-color: var(--linha); color: var(--suave); }
button:disabled { opacity: .5; cursor: default; background: #fff; color: var(--suave); border-color: var(--linha); }
button.link { border: 0; background: none; padding: 0; font-weight: 400; text-decoration: underline; }
.topo button.link { text-decoration: none; }
.acoes, .barra-acoes { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.barra-acoes { margin: 1rem 0; }
.barra-acoes form { margin: 0; }

/* Blocos */
.cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.25rem; margin: 1rem 0; }
.estreito { max-width: 400px; margin: 4rem auto; }
.cabecalho-pagina { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.meta { margin: 0; color: var(--suave); }
.aviso { background: var(--azul-fundo); border-left: 5px solid var(--azul); padding: .7rem 1rem; border-radius: 6px; }
.erro { background: #FBEAE8; border-left: 5px solid var(--vermelho); padding: .7rem 1rem; border-radius: 6px; color: #7d1f17; }
.fila { color: var(--suave); font-style: italic; }
.vazio { color: var(--suave); padding: 2rem 0; }
.pauta { white-space: pre-wrap; margin: 0; }

/* Lista de reuniões */
.lista-reunioes { list-style: none; padding: 0; margin: 1rem 0; border-top: 1px solid var(--linha); }
.reuniao-linha {
  display: grid; grid-template-columns: 13rem 1fr auto; gap: 1rem; align-items: center;
  padding: .9rem .3rem; border-bottom: 1px solid var(--linha); color: var(--tinta); text-decoration: none;
}
.reuniao-linha:hover { background: var(--papel); }
.reuniao-linha .quando { color: var(--suave); font-size: .92rem; }
.numeros { display: flex; align-items: center; gap: .5rem; color: var(--suave); }
.ponto { width: .8rem; height: .8rem; border-radius: 50%; display: inline-block; }
.ponto.verde { background: var(--verde); }
.ponto.amarelo { background: var(--ouro); }
.ponto.vermelho { background: var(--vermelho); }

/* Régua do jantar: o elemento de destaque do painel */
.regua { background: var(--papel); border-radius: var(--raio); padding: 1.25rem 1.25rem 1rem; margin: 1rem 0; border: 1px solid var(--linha); border-top: 6px solid var(--verde); }
.regua.amarelo { border-top-color: var(--ouro); }
.regua.vermelho { border-top-color: var(--vermelho); }
.regua-topo { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; color: var(--suave); }
.regua .grande { font-size: 2.4rem; font-weight: 700; color: var(--tinta); line-height: 1; margin-right: .35rem; }
.regua .custo { text-align: right; }
.trilho { position: relative; display: flex; height: 18px; border-radius: 9px; overflow: visible; margin: 1.2rem 0 .3rem; }
.zona { height: 100%; }
.z-verde { background: #CBE6D6; border-radius: 9px 0 0 9px; }
.z-amarelo { background: #FCE3B0; }
.z-vermelho { background: #F3CFCB; border-radius: 0 9px 9px 0; }
.marcador {
  position: absolute; top: -7px; width: 6px; height: 32px; margin-left: -3px;
  background: var(--tinta); border-radius: 3px; box-shadow: 0 0 0 2px #fff;
  transition: left .6s ease;
}
.escala { position: relative; height: 1.2rem; font-size: .8rem; color: var(--suave); }
.escala span { position: absolute; transform: translateX(-50%); }
.regua p { margin: .6rem 0 0; font-weight: 700; }
.regua.verde p { color: var(--verde); }
.regua.amarelo p { color: #8a5a00; }
.regua.vermelho p { color: var(--vermelho); }

.contagem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 1rem 0; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); }
.contagem div { padding: .8rem 1rem; border-left: 1px solid var(--linha); }
.contagem div:first-child { border-left: 0; }
.contagem dt { color: var(--suave); font-size: .85rem; }
.contagem dd { margin: 0; font-size: 1.5rem; font-weight: 700; }

/* Tabela de convites */
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); }
.tabela th { text-align: left; font-size: .85rem; color: var(--suave); padding: .6rem .8rem; border-bottom: 2px solid var(--linha); }
.tabela td { padding: .7rem .8rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela small { color: var(--suave); }
.detalhe { font-size: .88rem; color: var(--suave); margin-top: .25rem; }
.tag { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .85rem; font-weight: 700; }
.tag.vou { background: #D9EFE2; color: var(--verde); }
.tag.nao { background: #ECEFF4; color: var(--suave); }
.tag.pendente { background: #FFF1D6; color: #8a5a00; }
.envio { font-size: .88rem; }
.envio.falhou { color: var(--vermelho); font-weight: 700; cursor: help; }
.envio.na_fila { color: #8a5a00; }
.envio.enviado { color: var(--verde); }
.acoes-linha { width: 1%; white-space: nowrap; }
.acoes-linha summary { cursor: pointer; color: var(--azul); }
.acoes-linha details[open] { white-space: normal; min-width: 240px; }

/* Membros */
.lista-membros { display: grid; gap: .4rem; margin: 1rem 0; }
.membro { display: grid; grid-template-columns: 2fr 1.3fr auto auto auto; gap: .6rem; align-items: center; margin: 0; }
.membro input:not([type=checkbox]) { margin: 0; }
.membro.inativo input:not([type=checkbox]) { color: var(--suave); background: #F0F2F6; }
.membro.novo { grid-template-columns: 2fr 1.3fr auto auto; }
.importar summary { cursor: pointer; font-weight: 700; color: var(--azul); }
.importar form { margin-top: 1rem; }

/* Página pública de confirmação */
body.publico { background: var(--azul); min-height: 100vh; }
body.publico main { max-width: 520px; padding: 1.5rem 1rem 3rem; }
.convite { background: var(--papel); border-radius: 16px; padding: 1.5rem 1.4rem 1.8rem; border-top: 8px solid var(--ouro); }
.convite .clube { margin: 0 0 .3rem; color: var(--suave); font-weight: 700; }
.convite h1 { font-size: 1.7rem; }
.info { margin: 1rem 0; display: grid; gap: .4rem; }
.info div { display: grid; grid-template-columns: 7.5rem 1fr; }
.info dt { color: var(--suave); }
.info dd { margin: 0; font-weight: 700; }
.pauta-publica { margin: .5rem 0 1rem; }
.pauta-publica summary { cursor: pointer; color: var(--azul); }
.saudacao { font-size: 1.25rem; font-weight: 700; margin: 1.2rem 0 .7rem; }
.saudacao .atual { display: block; font-size: .92rem; font-weight: 400; color: var(--suave); }
.escolha { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.opcao { position: relative; cursor: pointer; }
.opcao input { position: absolute; opacity: 0; }
.opcao span {
  display: block; text-align: center; padding: 1.1rem .5rem; font-size: 1.3rem;
  border: 2px solid var(--linha); border-radius: 12px; background: #fff; transition: all .15s ease;
}
.opcao input:focus-visible + span { outline: 3px solid var(--ouro); outline-offset: 2px; }
.opcao.sim input:checked + span { border-color: var(--verde); background: #D9EFE2; color: var(--verde); }
.opcao.nao input:checked + span { border-color: var(--suave); background: #ECEFF4; }
.bloco { margin-top: 1rem; display: grid; gap: .8rem; }
.bloco[hidden] { display: none; }
.nomes { display: grid; gap: .6rem; }
.resposta .primario.grande { width: 100%; margin-top: 1.4rem; padding: .95rem; font-size: 1.15rem; }
.confirmado { background: #D9EFE2; color: var(--verde); font-weight: 700; padding: .8rem 1rem; border-radius: 8px; }
.encerrado { background: var(--azul-fundo); padding: .8rem 1rem; border-radius: 8px; }

@media (max-width: 700px) {
  h1 { font-size: 1.6rem; }
  .reuniao-linha { grid-template-columns: 1fr auto; }
  .reuniao-linha .quando { grid-column: 1 / -1; }
  .contagem { grid-template-columns: 1fr 1fr; }
  .contagem div:nth-child(3) { border-left: 0; }
  .contagem div:nth-child(n+3) { border-top: 1px solid var(--linha); }
  .membro, .membro.novo { grid-template-columns: 1fr 1fr; }
  .membro button { grid-column: 1 / -1; }
  .regua .custo { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Tela do WhatsApp */
.estado-wa { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.1rem; margin: 0 0 1rem; }
.estado-wa i { width: .85rem; height: .85rem; border-radius: 50%; background: var(--suave); }
.estado-wa.conectado i { background: var(--verde); }
.estado-wa.aguardando i { background: var(--ouro); }
.estado-wa.desconectado i, .estado-wa.erro i, .estado-wa.inexistente i { background: var(--vermelho); }
.info-wa { display: grid; gap: .4rem; margin: 0 0 1rem; }
.info-wa div { display: grid; grid-template-columns: 11rem 1fr; }
.info-wa dt { color: var(--suave); }
.info-wa dd { margin: 0; font-weight: 700; }
.troca summary { cursor: pointer; color: var(--azul); font-weight: 700; }
.troca p { max-width: 60ch; }
.perigo { border-color: var(--vermelho); color: var(--vermelho); }
.perigo:hover { background: #FBEAE8; }
.formas { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; margin: 1rem 0; }
.formas figure { margin: 0; text-align: center; }
.formas img { display: block; border: 1px solid var(--linha); border-radius: 8px; background: #fff; }
.formas figcaption { color: var(--suave); font-size: .88rem; margin-top: .4rem; }
.codigo { max-width: 22rem; }
.codigo-num { font-size: 2rem; font-weight: 700; letter-spacing: .15em; color: var(--azul); margin: .3rem 0; }
@media (max-width: 700px) { .info-wa div { grid-template-columns: 1fr; } }