/* ===========================================================================
   Lista de inscritos — modal da página do evento (docs/specs/lista-de-inscritos.md)
   Mobile first: no celular ocupa a tela toda; do tablet para cima, janela
   central. Botões com 44px de toque.
   =========================================================================== */

.lista-inscritos__abrir {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 12px;
    padding: 0 18px;
    border: 2px solid #0d1b2a;
    border-radius: 999px;
    background: #fff;
    color: #0d1b2a;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.lista-inscritos__abrir strong {
    background: #0d1b2a;
    color: #fff;
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 13px;
}

.lista-inscritos__abrir:hover { background: #f2f6fb; }

body.lista-inscritos-aberta { overflow: hidden; }

/* Com o modal aberto, o WhatsApp e o botão fixo de inscrição não ficam por cima. */
body.lista-inscritos-aberta .zap-flutuante,
body.lista-inscritos-aberta .cta-button { visibility: hidden; }

.lista-inscritos {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.lista-inscritos[hidden] { display: none; }

.lista-inscritos__fundo {
    position: absolute;
    inset: 0;
    background: rgba(13, 27, 42, .55);
    backdrop-filter: blur(3px);
}

.lista-inscritos__janela {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 100%;
    background: #f5f8fb;
    color: #0d1b2a;
    animation: listaInscritosEntra .2s ease-out;
}

@keyframes listaInscritosEntra {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.lista-inscritos__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 10px;
    background: #0d1b2a;
    color: #fff;
}

.lista-inscritos__topo h2 { margin: 0; font-size: 1.2rem; font-weight: 800; color: #fff; }
.lista-inscritos__evento { margin: 2px 0 0; font-size: .85rem; opacity: .8; }

.lista-inscritos__fechar {
    flex: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.lista-inscritos__busca {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #0d1b2a;
}

.lista-inscritos__busca input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    font-size: 16px; /* abaixo disso o iPhone dá zoom */
}

.lista-inscritos__contagem { color: #cfe0f2; font-size: .85rem; white-space: nowrap; }

.lista-inscritos__abas {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid #e3e9f0;
    -webkit-overflow-scrolling: touch;
}

.lista-inscritos__abas[hidden] { display: none; }

.lista-inscritos__aba {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid #cfd8e2;
    border-radius: 999px;
    background: #fff;
    color: #0d1b2a;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}

.lista-inscritos__aba.ativa { background: #0d1b2a; border-color: #0d1b2a; color: #fff; }

.lista-inscritos__num {
    display: inline-block;
    min-width: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #e7edf3;
    color: #46586b;
    font-size: 12px;
    text-align: center;
}

.lista-inscritos__aba.ativa .lista-inscritos__num { background: rgba(255, 255, 255, .2); color: #fff; }

/* Topo, busca e abas no tamanho natural: numa coluna flexível o navegador
   espremia as abas quando a lista crescia, e o scroll "comia" os botões.
   Só o corpo rola (min-height: 0 é o que deixa ele encolher e rolar). */
.lista-inscritos__topo,
.lista-inscritos__busca,
.lista-inscritos__abas { flex: 0 0 auto; }

.lista-inscritos__corpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px 24px;
    -webkit-overflow-scrolling: touch;
}

.lista-inscritos__aviso { color: #5b6b7b; text-align: center; margin: 32px 0; }

.lista-inscritos__grupo { margin-bottom: 18px; }

.lista-inscritos__grupo h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #46586b;
}

.lista-inscritos__pessoas {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid #e3e9f0;
    border-radius: 12px;
    overflow: hidden;
}

.lista-inscritos__pessoa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid #eef2f6;
}

.lista-inscritos__pessoa:first-child { border-top: 0; }

.lista-inscritos__info { display: flex; flex-direction: column; min-width: 0; }
.lista-inscritos__info strong { font-size: .95rem; }
.lista-inscritos__info span { font-size: .8rem; color: #5b6b7b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lista-inscritos__selo {
    flex: none;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

.lista-inscritos__selo.ok { background: #dcfce7; color: #166534; }
.lista-inscritos__selo.pendente { background: #fef3c7; color: #92400e; }

@media (min-width: 720px) {
    .lista-inscritos { align-items: center; padding: 32px; }

    .lista-inscritos__janela {
        max-width: 760px;
        max-height: 88vh;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
    }

    .lista-inscritos__topo { padding: 20px 22px 12px; }
    .lista-inscritos__busca, .lista-inscritos__abas, .lista-inscritos__corpo { padding-left: 22px; padding-right: 22px; }
}