/* ==========================================================================
   MINHA LISTA: a tela do consultor.

   Mesma família de cores da recepção (creme, verde, dourado) e pelo mesmo
   motivo: é ferramenta de trabalho, aberta no meio do dia, no celular, no
   claro. Texto escuro sobre fundo claro é o que se lê nessa situação.

   A DIFERENÇA PARA A RECEPÇÃO É PROPOSITAL

   A recepção tem alvos grandes porque a mão dela está ocupada e a fila está
   andando. Esta tela aqui não tem nenhum alvo de ação, porque não existe ação
   nenhuma para tomar: só o botão de copiar o link e o campo de busca. Então o
   espaço vai para o texto, que é o que a pessoa veio ler.

   BLINDAGEM CONTRA O TEMA

   Os blocos com #sdcm existem porque cor DECLARADA ganha de cor HERDADA,
   independente de especificidade. Se o tema declara uma cor em button ou em
   code, ela vence a nossa herdada e o elemento some no fundo. Já aconteceu
   com o ícone do QR na recepção. Aqui o valor é declarado, não herdado.
   ========================================================================== */

.sdc-meus{
  --papel: #F3EFE6;
  --cartao: #FFFFFF;
  --caixa: #F7F4EC;
  --verde: #14432F;
  --ouro: #7E5F14;
  --tinta: #143428;
  --suave: #55675C;
  --linha: #E1D9C7;
  --ok: #1C7A4B;
  --ok-fundo: #E4F2E9;
  --erro: #9A2C1C;
  --erro-fundo: #FBE9E6;

  box-sizing: border-box;
  min-height: 100vh; min-height: 100dvh;
  padding: 22px 16px calc(48px + env(safe-area-inset-bottom));
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
.sdc-meus *, .sdc-meus *::before, .sdc-meus *::after{ box-sizing: border-box; }

.sdc-meus__previa,
.sdc-meus__topo,
.sdc-meus__placar,
.sdc-meus__link,
.sdc-meus__busca,
.sdc-meus__lista,
.sdc-meus__nada,
.sdc-meus__pe,
.sdc-meus__ok,
.sdc-meus__eventos,
.sdc-meus__anterior,
.sdc-meus__grupo{
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------- faixa de prévia ---------------- */

/*
 * Só aparece para quem administra o evento, olhando a tela de um consultor.
 * Precisa ser impossível de confundir com a própria lista: a pessoa que
 * administra vê as 25 telas, e uma delas parecer a dela é como ela acaba
 * achando que um consultor tem convite que não tem.
 */
.sdc-meus__previa{
  margin: 0 auto 16px; padding: 11px 14px; border-radius: 12px;
  font-size: 13px; line-height: 1.45;
}
.sdc-meus__previa a{ text-decoration: underline; font-weight: 600; }

/* ---------------- topo ---------------- */

.sdc-meus__topo{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.sdc-meus__olho{
  margin: 0 0 2px; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.sdc-meus__titulo{
  margin: 0; font-size: 26px; line-height: 1.2; font-weight: 700;
}
.sdc-meus__sair{
  flex: none; font-size: 14px; font-weight: 600; text-decoration: underline;
  padding-top: 6px;
}

/* ---------------- placar ---------------- */

.sdc-meus__placar{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-bottom: 18px;
}
.sdc-meus__cartao{
  padding: 14px 10px; border-radius: 14px; text-align: center;
  border: 1px solid var(--linha);
}
.sdc-meus__cartao strong{
  display: block; font-size: 26px; line-height: 1.1; font-weight: 700;
}
.sdc-meus__cartao span{
  display: block; margin-top: 3px; font-size: 12px; line-height: 1.3;
}

/* ---------------- link do consultor ---------------- */

.sdc-meus__link{ margin-bottom: 18px; }
.sdc-meus__rotulo{
  margin: 0 0 6px; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.sdc-meus__linha{
  display: flex; align-items: stretch; gap: 8px;
}
.sdc-meus__linha code{
  flex: 1 1 auto; min-width: 0;
  padding: 11px 12px; border-radius: 12px;
  border: 1px solid var(--linha);
  font-family: inherit; font-size: 13px;
  overflow-x: auto; white-space: nowrap;
}
.sdc-meus__copiar{
  flex: none; padding: 11px 16px; border: 0; border-radius: 12px;
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}

/* ---------------- busca ---------------- */

.sdc-meus__busca{ margin-bottom: 14px; }
.sdc-meus__busca input{
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--linha);
  font-family: inherit; font-size: 16px; /* 16px evita o zoom do iOS */
}
.sdc-meus__vazio{ margin: 10px 2px 0; font-size: 14px; }

/* ---------------- lista ---------------- */

/*
 * "margin: 0 auto" e não "margin: 0".
 *
 * O bloco lá de cima já dá margin-left e margin-right automáticos para todas
 * as faixas da tela. Um "margin: 0" aqui embaixo é atalho que apaga os dois,
 * porque é a MESMA propriedade declarada depois, e a lista sai encostada na
 * esquerda enquanto o resto da página fica centralizado. Já aconteceu antes
 * neste projeto, na lista da recepção, e pela mesma razão.
 */
.sdc-meus__lista{ list-style: none; margin: 0 auto; padding: 0; }
.sdc-meus__item{
  padding: 14px 16px; margin-bottom: 10px; border-radius: 14px;
  border: 1px solid var(--linha);
}
.sdc-meus__item-topo{
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.sdc-meus__nome{ margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.sdc-meus__selo{
  flex: none; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.sdc-meus__meta{ margin: 10px 0 0; font-size: 12px; }

/* ---------------- contato e WhatsApp ----------------

   O botão é do tamanho do dedo de propósito. Esta tela é usada em pé, no
   dia do evento, procurando alguém que não chegou: o alvo tem que ser fácil
   de acertar sem olhar com calma. */

.sdc-meus__contato{ margin: 8px 0 0; }
.sdc-meus__zap{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  min-height: 34px;
}
.sdc-meus__zap-icone{ width: 16px; height: 16px; flex: none; }
.sdc-meus__zap--mini{ padding: 4px 10px; font-size: 13px; min-height: 28px; }
.sdc-meus__zap--mini .sdc-meus__zap-icone{ width: 14px; height: 14px; }
.sdc-meus__tel{ font-size: 13px; }

/* ---------------- acompanhantes ---------------- */

.sdc-meus__acomp{ margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--linha); }
.sdc-meus__acomp-titulo{
  margin: 0 0 7px; font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.sdc-meus__acomp-lista{ list-style: none; margin: 0; padding: 0; }
.sdc-meus__acomp-lista li{
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0 0 6px; font-size: 14px; line-height: 1.35;
}
.sdc-meus__acomp-lista li:last-child{ margin-bottom: 0; }
.sdc-meus__acomp-nome{ font-weight: 500; }

/* ---------------- lista vazia ---------------- */

.sdc-meus__nada{
  padding: 26px 20px; border-radius: 14px; text-align: center;
  border: 1px dashed var(--linha);
}
.sdc-meus__nada-titulo{ margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.sdc-meus__texto{ margin: 0; font-size: 15px; line-height: 1.5; }

/* ---------------- pé ---------------- */

.sdc-meus__pe{ margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linha); }
.sdc-meus__pulseira{ margin: 0 0 8px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.sdc-meus__bolinha{
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid rgba(20,52,47,.25); flex: none;
}
.sdc-meus__aviso{ margin: 0; font-size: 12px; line-height: 1.45; }

/* ---------------- telas de aviso e de senha ---------------- */

.sdc-meus--aviso{ display: flex; align-items: center; justify-content: center; }
.sdc-meus__caixa{
  width: 100%; max-width: 420px; padding: 28px 24px;
  border-radius: 16px; border: 1px solid var(--linha);
}
.sdc-meus__form{ margin-top: 18px; }
.sdc-meus__form label{
  display: block; margin: 14px 0 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.sdc-meus__form input{
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--linha);
  font-family: inherit; font-size: 16px;
}
.sdc-meus__dica{ margin: 10px 0 0; font-size: 12px; line-height: 1.45; }
.sdc-meus__botao{
  display: inline-block; width: 100%; margin-top: 16px;
  padding: 14px 18px; border: 0; border-radius: 12px;
  font-family: inherit; font-size: 15px; font-weight: 600;
  text-align: center; text-decoration: none; cursor: pointer;
}
.sdc-meus__erro, .sdc-meus__ok{
  margin: 14px 0 0; padding: 11px 14px; border-radius: 12px;
  font-size: 14px; line-height: 1.45;
}

/* ---------------- eventos: o atual e os anteriores ----------------

   Uma fileira de cartões que rola de lado no celular. Cada um diz o nome do
   evento e quantos foram e não foram: a pessoa escolhe olhando o número que
   interessa, sem precisar abrir um por um. */

.sdc-meus__eventos{
  display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
  margin-bottom: 16px; padding-bottom: 4px;
}
.sdc-meus__evento{
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; border-radius: 12px; border: 1px solid var(--linha);
  text-decoration: none; min-width: 150px; max-width: 240px;
}
.sdc-meus__evento strong{ font-size: 14px; line-height: 1.3; }
.sdc-meus__evento span{ font-size: 12px; }

.sdc-meus__anterior{ margin-bottom: 14px; }
.sdc-meus__anterior-titulo{ margin: 2px 0 8px; font-size: 20px; font-weight: 600; line-height: 1.25; }
.sdc-meus__grupo{ margin-top: 18px; }
.sdc-meus__grupo-titulo{
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 4px; font-size: 17px; font-weight: 600;
}
.sdc-meus__grupo-conta{
  font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 999px;
}
.sdc-meus__grupo .sdc-meus__texto{ font-size: 13.5px; margin: 0 0 10px; }
.sdc-meus__contato .sdc-meus__tel{ margin-left: 8px; }

/* ==========================================================================
   BLINDAGEM: valores declarados, nunca herdados.
   Precisa vir depois de tudo, e com o id na frente para ganhar do tema.
   ========================================================================== */

#sdcm, .sdc-meus{ background: #F3EFE6; color: #143428; }
#sdcm .sdc-meus__olho, .sdc-meus__olho{ color: #7E5F14; }
#sdcm .sdc-meus__titulo, .sdc-meus__titulo{ color: #14432F; }
#sdcm .sdc-meus__sair, .sdc-meus--aviso .sdc-meus__sair{ color: #14432F; }
#sdcm .sdc-meus__cartao, .sdc-meus__cartao{ background: #FFFFFF; }
#sdcm .sdc-meus__cartao strong{ color: #14432F; }
#sdcm .sdc-meus__cartao span{ color: #55675C; }
#sdcm .sdc-meus__rotulo, .sdc-meus__rotulo{ color: #7E5F14; }
#sdcm .sdc-meus__linha code{ background: #FFFFFF; color: #143428; }
#sdcm .sdc-meus__copiar, .sdc-meus__copiar{ background: #14432F; color: #FFFFFF; }
#sdcm .sdc-meus__busca input, .sdc-meus__form input{ background: #FFFFFF; color: #143428; }
#sdcm .sdc-meus__vazio{ color: #55675C; }
#sdcm .sdc-meus__item, .sdc-meus__item{ background: #FFFFFF; }
#sdcm .sdc-meus__nome{ color: #143428; }
#sdcm .sdc-meus__acomp-titulo, .sdc-meus__acomp-titulo{ color: #7E5F14; }
#sdcm .sdc-meus__acomp-nome, .sdc-meus__acomp-nome{ color: #143428; }
#sdcm .sdc-meus__tel, .sdc-meus__tel{ color: #55675C; }

/*
 * O verde do WhatsApp não entra aqui: é a cor de outra marca, e num cartão
 * creme com verde da casa ele vira a coisa mais chamativa da tela. O botão
 * usa o verde do projeto, e quem diz que é WhatsApp é o símbolo.
 *
 * O fill do símbolo vai DECLARADO: atributo de apresentação no SVG perde
 * para qualquer regra de tema em "a svg" ou "button svg", e foi assim que o
 * ícone do QR sumiu na recepção uma vez.
 */
#sdcm .sdc-meus__zap, .sdc-meus__zap{ background: #14432F; color: #FFFFFF; }
#sdcm .sdc-meus__zap-icone, .sdc-meus__zap-icone{ fill: currentColor; stroke: none; }
#sdcm .sdc-meus__zap--mini, .sdc-meus__zap--mini{ background: #E4EDE7; color: #14432F; }
#sdcm .sdc-meus__meta{ color: #55675C; }
#sdcm .sdc-meus__nada{ background: #F7F4EC; }
#sdcm .sdc-meus__nada-titulo{ color: #14432F; }
#sdcm .sdc-meus__texto, .sdc-meus__texto{ color: #143428; }
#sdcm .sdc-meus__pulseira{ color: #143428; }
#sdcm .sdc-meus__aviso{ color: #55675C; }
.sdc-meus__caixa{ background: #FFFFFF; }
.sdc-meus__botao{ background: #14432F; color: #FFFFFF; }
.sdc-meus__dica{ color: #55675C; }
.sdc-meus__erro{ background: #FBE9E6; color: #9A2C1C; }
.sdc-meus__ok{ background: #E4F2E9; color: #1C7A4B; }

#sdcm .sdc-meus__evento, .sdc-meus__evento{ background: #FFFFFF; color: #143428; }
#sdcm .sdc-meus__evento span, .sdc-meus__evento span{ color: #55675C; }
#sdcm .sdc-meus__evento[aria-current="page"], .sdc-meus__evento[aria-current="page"]{
  background: #14432F; border-color: #14432F; color: #FFFFFF;
}
#sdcm .sdc-meus__evento[aria-current="page"] span, .sdc-meus__evento[aria-current="page"] span{ color: #E4EDE7; }
#sdcm .sdc-meus__anterior-titulo, .sdc-meus__anterior-titulo{ color: #14432F; }
#sdcm .sdc-meus__grupo-titulo, .sdc-meus__grupo-titulo{ color: #14432F; }
#sdcm .sdc-meus__grupo-conta, .sdc-meus__grupo-conta{ background: #E4EDE7; color: #14432F; }
#sdcm .sdc-meus__grupo--nao_foram .sdc-meus__grupo-conta{ background: #FBEDDF; color: #7A3A0E; }
#sdcm .sdc-meus__selo--neutro, .sdc-meus__selo--neutro{ background: #EEEAE0; color: #55675C; }
#sdcm .sdc-meus__selo--vem, .sdc-meus__selo--vem{ background: #E4F2E9; color: #1C6B43; }

#sdcm .sdc-meus__previa, .sdc-meus__previa{ background: #FBEDDF; color: #7A3A0E; }
#sdcm .sdc-meus__previa a, .sdc-meus__previa a{ color: #7A3A0E; }
#sdcm .sdc-meus__meta a{ color: #14432F; text-decoration: underline; }

/*
 * Quem já chegou: verde, riscado e com um check na frente.
 *
 * Mesma decisão da recepção, pelo mesmo motivo: no celular, no claro, a
 * diferença entre o verde e o preto some. Risco e check continuam legíveis
 * mesmo com a cor lavada. Precisa vir DEPOIS da blindagem, senão a blindagem
 * apaga justamente a informação que a pessoa abriu a tela para ver.
 */
#sdcm .sdc-meus__item.esta-aqui .sdc-meus__nome,
.sdc-meus__item.esta-aqui .sdc-meus__nome{
  color: #1C7A4B;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(28,122,75,.55);
}
#sdcm .sdc-meus__item.esta-aqui .sdc-meus__nome::before,
.sdc-meus__item.esta-aqui .sdc-meus__nome::before{
  content: '✓';
  display: inline-block;
  margin-right: 7px;
  font-weight: 700;
  text-decoration: none;
  color: #1C7A4B;
}
#sdcm .sdc-meus__item.esta-aqui .sdc-meus__selo,
.sdc-meus__item.esta-aqui .sdc-meus__selo{ background: #E4F2E9; color: #1C7A4B; }

@media (max-width: 420px){
  .sdc-meus__placar{ grid-template-columns: 1fr 1fr; }
  .sdc-meus__placar .sdc-meus__cartao:last-child{ grid-column: 1 / -1; }
  .sdc-meus__titulo{ font-size: 22px; }
}

#sdcm .sdc-meus__alerta, .sdc-meus__alerta{
  margin:12px 0 0; padding:10px 12px; border-radius:10px; font-size:14px; line-height:1.45;
  background:#FDF5E9; border-left:4px solid #B07514; color:#6E4A0E;
}

/* ---------------- presença pessoa a pessoa, no evento anterior (3.20.1) ----------------

   Selo colado no WhatsApp de cada pessoa: verde "Compareceu", vermelho
   "Não compareceu". Cor E símbolo E palavra, porque no sol a cor some.
   Vem depois da blindagem pelo mesmo motivo do "esta-aqui". */

.sdc-meus__pessoa{ display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sdc-meus__contato.sdc-meus__pessoa{ display: flex; }
.sdc-meus__acomp-pessoa{ justify-content: space-between; }
#sdcm .sdc-meus__presenca, .sdc-meus__presenca{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px; border: 1px solid transparent;
  font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap;
}
#sdcm .sdc-meus__presenca--sim, .sdc-meus__presenca--sim{ background: #E4F2E9; color: #1C6B43; border-color: #BFDFCB; }
#sdcm .sdc-meus__presenca--nao, .sdc-meus__presenca--nao{ background: #FBEDEC; color: #A8322A; border-color: #EBC4C0; }

.sdc-meus__placar--anterior{ margin-top: 14px; }
#sdcm .sdc-meus__cartao--sim strong{ color: #1C6B43; }
#sdcm .sdc-meus__cartao--nao strong{ color: #A8322A; }

/* O botão "voltar ao topo" do tema do site cobre botões desta tela no celular. */
#ast-scroll-top{ display:none !important; }