/* =====================================================================
   ConviteQR — tema claro, azul, alto contraste.

   As medidas aqui não são gosto: quem vai usar isto tem 60, 70 anos, no
   celular, muitas vezes na rua. Por isso o corpo é 18px em vez de 16, o
   alvo de toque mínimo é 56px em vez dos 44 do padrão, e nada depende de
   cor sozinha — todo estado tem também um texto.
   ===================================================================== */

:root {
    --azul: #1565C0;
    --azul-escuro: #0D47A1;
    --azul-claro: #E3F0FC;
    --verde: #1B7F4B;
    --verde-claro: #E4F3EA;
    --vermelho: #C62828;
    --vermelho-claro: #FDEAEA;
    --ambar: #8A5A00;
    --ambar-claro: #FBF0DA;

    --tinta: #16202B;
    --tinta-2: #5A6672;
    --tinta-3: #8B96A1;
    --linha: #DCE3EA;
    --fundo: #F4F7FA;
    --papel: #FFFFFF;

    --raio: 12px;
    --toque: 56px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--tinta);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 18px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.env {
    max-width: 560px;
    margin: 0 auto;
    padding: 16px 16px 64px;
}

/* ---------- cabeçalho ---------- */
.topo {
    background: var(--azul);
    color: #fff;
    padding: 16px;
}
.topo .env { padding: 0; }
.topo h1 { font-size: 1.25rem; margin: 0; font-weight: 700; }
.topo p { margin: 2px 0 0; font-size: .95rem; opacity: .9; }

/* ---------- blocos ---------- */
.cartao {
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 14px;
}
.pilha { display: flex; flex-direction: column; gap: 12px; }
.linha { display: flex; gap: 10px; align-items: center; }
.cresce { flex: 1; min-width: 0; }

h2 { font-size: 1.1rem; margin: 0 0 8px; }
.discreto { color: var(--tinta-2); font-size: .92rem; }
.mono { font-variant-numeric: tabular-nums; }

/* ---------- botões ---------- */
.botao {
    display: block;
    width: 100%;
    min-height: var(--toque);
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: var(--raio);
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background: var(--azul);
    color: #fff;
}
.botao:active { transform: translateY(1px); }
.botao:focus-visible { outline: 3px solid var(--azul-escuro); outline-offset: 2px; }
.botao[disabled] { opacity: .5; cursor: not-allowed; }

.botao-zap { background: var(--verde); font-size: 1.08rem; }
.botao-vazio { background: transparent; color: var(--azul); border-color: var(--linha); }
.botao-perigo { background: transparent; color: var(--vermelho); border-color: var(--vermelho); }
.botao-pequeno { min-height: 44px; padding: 8px 12px; font-size: .9rem; width: auto; }

/* ---------- formulário ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-weight: 600; font-size: .95rem; }
.campo input, .campo select, .campo textarea {
    width: 100%;
    min-height: var(--toque);
    padding: 12px 14px;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    font: inherit;
    background: var(--papel);
    color: var(--tinta);
}
.campo input:focus, .campo select:focus {
    outline: 3px solid var(--azul-claro);
    border-color: var(--azul);
}
.campo .ajuda { color: var(--tinta-2); font-size: .85rem; }
.campo.ruim input { border-color: var(--vermelho); background: var(--vermelho-claro); }

/* Teclado numérico de PIN e de código: fonte grande e espaçada, porque é
   digitado sob pressão, com a fila esperando. */
.pin {
    font-size: 1.6rem !important;
    letter-spacing: .3em;
    text-align: center;
}

/* ---------- avisos ---------- */
.aviso {
    border-radius: var(--raio);
    padding: 12px 14px;
    border: 1px solid;
    font-size: .95rem;
}
.aviso strong { display: block; margin-bottom: 2px; }
.aviso-ambar { background: var(--ambar-claro); border-color: #E0C083; color: #4A3400; }
.aviso-vermelho { background: var(--vermelho-claro); border-color: #EFAFAF; color: #6B1616; }
.aviso-azul { background: var(--azul-claro); border-color: #A9CDEE; color: #0B3C6B; }
.aviso-verde { background: var(--verde-claro); border-color: #A6D8BC; color: #10462A; }

/* ---------- lista de convites ---------- */
.item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    text-decoration: none;
    color: inherit;
    min-height: var(--toque);
}
.item .nome { font-weight: 600; }
.item .sub { color: var(--tinta-2); font-size: .85rem; }

.selo {
    font-size: .75rem;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.selo-rascunho { background: #EEF1F4; color: var(--tinta-2); }
.selo-enviado  { background: var(--azul-claro); color: var(--azul-escuro); }
.selo-parcial  { background: var(--ambar-claro); color: var(--ambar); }
.selo-esgotado { background: var(--verde-claro); color: var(--verde); }
.selo-revogado { background: var(--vermelho-claro); color: var(--vermelho); }

/* ---------- placar do admin ---------- */
.placar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.placar div {
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 10px;
    text-align: center;
}
.placar .num { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.placar .rot { font-size: .75rem; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .05em; }
.placar .destaque .num { color: var(--verde); }

/* ---------- portaria ---------- */
.camera {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #0B1015;
    border-radius: var(--raio);
    overflow: hidden;
}
.camera video { width: 100%; height: 100%; object-fit: cover; }
.camera .mira {
    position: absolute;
    inset: 15%;
    border: 3px solid rgba(255, 255, 255, .7);
    border-radius: 10px;
    pointer-events: none;
}
.camera .dica {
    position: absolute;
    left: 0; right: 0; bottom: 10px;
    text-align: center;
    color: #fff;
    font-size: .85rem;
    text-shadow: 0 1px 3px #000;
}

/* O veredito ocupa a tela inteira: o segurança olha de longe, com o braço
   esticado, e tem que acertar em meio segundo. */
.veredito {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
    color: #fff;
}
.veredito-ok { background: var(--verde); }
.veredito-nao { background: var(--vermelho); }
.veredito .marca { font-size: 4.5rem; line-height: 1; font-weight: 800; }
.veredito .titulo { font-size: 1.4rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.veredito .nome { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.veredito .detalhe { font-size: 1rem; opacity: .95; max-width: 30ch; }
.veredito .acoes { margin-top: 18px; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 10px; }
.veredito .botao { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); color: #fff; }

.quantos { display: flex; gap: 8px; }
.quantos button {
    flex: 1;
    min-height: 64px;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: var(--raio);
    border: 1px solid var(--linha);
    background: var(--papel);
    color: var(--tinta);
    font-family: inherit;
    cursor: pointer;
}

/* ---------- convite ---------- */
.previa {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    border-radius: var(--raio);
    border: 1px solid var(--linha);
}

.rodape { margin-top: 28px; text-align: center; }
.rodape a { color: var(--tinta-2); font-size: .85rem; }

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