/* =============================================================================
   Bancários Kids — folha de estilo única
   =============================================================================
   Organização:
     1. Tokens          9.  Alertas e mensagens
     2. Reset          10.  Tabelas
     3. Estrutura      11.  Portaria (alto contraste)
     4. Doodles        12.  Fichas de validação (tela cheia)
     5. Tipografia     13.  Rodapé
     6. Cartões        14.  Utilitários
     7. Botões         15.  Acessibilidade
     8. Formulários

   As cores saíram do banner do evento (design/banner.jpg). O cabeçalho é
   remontado em CSS, e não com o JPEG: a arte é 1,84:1 e, no celular, ficaria
   com 190 px de altura, ilegível. O banner inteiro aparece onde há largura de
   verdade — no PDF do convite e no topo do e-mail.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Cores da identidade */
    --sky: #17B7E3;
    --sky-light: #90D2F2;
    --sky-dark: #0E93B8;
    --navy: #084A8B;
    --navy-deep: #133469;
    --purple: #5B2A86;
    --purple-dark: #44205F;
    --yellow: #F5A623;
    --orange: #DC782C;
    --pink: #E6007E;
    --white: #FFFFFF;

    /* Cores de estado (a paleta do banner não tem verde nem vermelho) */
    --verde: #1E9E57;
    --verde-claro: #E3F6EB;
    --vermelho: #C62851;
    --vermelho-claro: #FDE8EE;
    --amarelo-claro: #FEF3DC;

    /* Neutros */
    --tinta: #16283F;
    --tinta-suave: #55677E;
    --borda: #D8E3EF;
    --fundo-suave: #F4F8FC;

    /* Formas */
    --raio: 24px;
    --raio-medio: 16px;
    --raio-pequeno: 10px;
    --sombra: 0 12px 32px rgba(8, 74, 139, .25);
    --sombra-suave: 0 4px 14px rgba(8, 74, 139, .12);
    --relevo: 4px;                    /* espessura da "borda 3D" dos botões */

    /* Tipografia */
    --fonte-titulo: "Fredoka", "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
    --fonte-corpo: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* Medidas */
    --largura-form: 34rem;
    /* Telas administrativas: acompanham a janela em vez de ficarem presas a
       uma coluna estreita. O teto de 100rem existe só para o texto não virar
       linhas longas demais em monitores muito largos. */
    --largura-ampla: min(98vw, 120rem);
    --altura-toque: 52px;             /* alvo mínimo de toque no site */
    --altura-toque-portaria: 68px;    /* portaria: uso em pé, com uma mão */
}

/* -----------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: var(--fonte-corpo);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--tinta);
    background-color: var(--sky);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--navy); }
a:hover { color: var(--navy-deep); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------------------
   3. Estrutura
   -------------------------------------------------------------------------- */
.pagina {
    flex: 1;
    width: 100%;
    max-width: var(--largura-form);
    margin: 0 auto;
    padding: 1.25rem 1rem 2.5rem;
}

/* Telas administrativas e relatórios: acompanham a janela, em vez de ficarem
   presas na coluna estreita do formulário público. */
.pagina--ampla {
    max-width: var(--largura-ampla);
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

@media (min-width: 64rem) {
    .pagina--ampla { padding-left: 2rem; padding-right: 2rem; }
}

/* -----------------------------------------------------------------------------
   4. Fundo com doodles
   O padrão de rabiscos do banner, redesenhado como SVG: escala sem peso de
   imagem e não depende de arquivo externo.
   -------------------------------------------------------------------------- */
.fundo-doodles {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: var(--sky);
    /* Clareamento no topo, como no banner. */
    background-image: radial-gradient(circle at 50% -15%, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 60%);
}

/* O padrão de rabiscos fica numa camada própria, para a opacidade valer só
   para ele — e não para o azul do fundo. */
.fundo-doodles::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .13;
    background-repeat: repeat;
    background-size: 260px 260px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M34 20l5.4 11 12.1 1.8-8.8 8.5 2.1 12-10.8-5.7-10.8 5.7 2.1-12-8.8-8.5 12.1-1.8z'/%3E%3Cpath d='M196 24c7-12 15-12 22 0 3 5 4 12 4 19h-30c0-7 1-14 4-19z'/%3E%3Cpath d='M192 43l-8 9m38-9l8 9m-31 9h16'/%3E%3Cpath d='M60 176a13 13 0 0 1 13-13 16 16 0 0 1 30-4 12 12 0 0 1 5 17z'/%3E%3Ccircle cx='214' cy='196' r='19'/%3E%3Cellipse cx='214' cy='196' rx='30' ry='9' transform='rotate(-22 214 196)'/%3E%3Cpath d='M124 78l16 18-16 18-16-18z'/%3E%3Cpath d='M124 114c-6 6 6 10 0 16s6 10 0 16'/%3E%3Ccircle cx='48' cy='108' r='11'/%3E%3Cpath d='M48 88v-8m0 56v-8m-20-20h-8m56 0h-8m-25-14l-6-6m40 40l-6-6m0-28l6-6m-40 40l6-6'/%3E%3Cpath d='M150 210c8-9 20-9 28 0m-34 8c11-13 29-13 40 0'/%3E%3Cpath d='M96 34l4 8 4-8m-4 8v10'/%3E%3Cpath d='M232 118l3 6 3-6m-3 6v8'/%3E%3C/g%3E%3C/svg%3E");
}

/* -----------------------------------------------------------------------------
   5. Tipografia
   -------------------------------------------------------------------------- */
h1, h2, h3 {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 .75rem;
    color: var(--navy);
}

h1 { font-size: clamp(1.5rem, 5.5vw, 2rem); }
h2 { font-size: clamp(1.25rem, 4.5vw, 1.5rem); }
h3 { font-size: 1.125rem; }

.texto-secundario { color: var(--tinta-suave); font-size: .95rem; }
.texto-centro { text-align: center; }
.texto-forte { font-weight: 700; }

/* Marca "BANCÁRIOS Kids", remontada em CSS a partir do banner. */
.marca {
    text-align: center;
    padding: .5rem 0 1.25rem;
}

.marca__linha1 {
    display: block;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: clamp(1.5rem, 7vw, 2.5rem);
    letter-spacing: .06em;
    color: var(--white);
    text-transform: uppercase;
    transform: skewX(-8deg);
    text-shadow: 0 3px 10px rgba(19, 52, 105, .45);
}

.marca__linha2 {
    display: block;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: clamp(3rem, 15vw, 5.5rem);
    line-height: .95;
    margin-top: -.15em;
    color: var(--yellow);
    transform: rotate(-4deg);
    /* Extrusão roxa: várias sombras empilhadas imitam o bloco 3D da arte. */
    text-shadow:
        1px 1px 0 var(--orange),
        2px 3px 0 var(--purple),
        3px 5px 0 var(--purple),
        4px 7px 0 var(--purple),
        5px 9px 0 var(--purple-dark),
        6px 12px 18px rgba(19, 52, 105, .4);
}

.marca--pequena .marca__linha1 { font-size: 1.05rem; }
.marca--pequena .marca__linha2 {
    font-size: 2.1rem;
    text-shadow: 1px 1px 0 var(--orange), 2px 3px 0 var(--purple), 3px 5px 0 var(--purple-dark);
}

/* -----------------------------------------------------------------------------
   6. Cartões
   -------------------------------------------------------------------------- */
.cartao {
    background: var(--white);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1.5rem 1.25rem;
    margin-bottom: 1.25rem;
}

.cartao:last-child { margin-bottom: 0; }

@media (min-width: 30rem) {
    .cartao { padding: 2rem 1.75rem; }
}

.cartao__titulo {
    font-family: var(--fonte-titulo);
    font-size: clamp(1.35rem, 5vw, 1.75rem);
    color: var(--navy);
    margin: 0 0 1rem;
}

.cartao__rodape {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 2px dashed var(--borda);
}

/* Faixa colorida no topo do cartão, para diferenciar etapas do fluxo. */
.cartao--destaque { border-top: 6px solid var(--yellow); }
.cartao--erro { border-top: 6px solid var(--pink); }
.cartao--ok { border-top: 6px solid var(--verde); }

/* -----------------------------------------------------------------------------
   7. Botões
   O relevo inferior roxo vem do logotipo: o botão "afunda" ao ser pressionado.
   -------------------------------------------------------------------------- */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--altura-toque);
    padding: .7rem 1.75rem;
    border: 0;
    border-bottom: var(--relevo) solid var(--purple);
    border-radius: 999px;
    background: var(--yellow);
    color: var(--navy-deep);
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 1.0625rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, transform .08s ease, border-width .08s ease;
}

.botao:hover { background: var(--orange); color: var(--navy-deep); }

.botao:active {
    transform: translateY(2px);
    border-bottom-width: 2px;
}

.botao:focus-visible {
    outline: 3px solid var(--navy);
    outline-offset: 3px;
}

.botao[disabled], .botao[aria-disabled="true"] {
    background: var(--borda);
    border-bottom-color: var(--tinta-suave);
    color: var(--tinta-suave);
    cursor: not-allowed;
    transform: none;
}

.botao--bloco { display: flex; width: 100%; }

.botao--secundario {
    background: var(--white);
    color: var(--navy);
    border: 2px solid var(--navy);
    border-bottom-width: var(--relevo);
}
.botao--secundario:hover { background: var(--fundo-suave); color: var(--navy-deep); }

/* Sobre fundo azul (fora do cartão). */
.botao--contorno {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
    border-bottom-width: var(--relevo);
}
.botao--contorno:hover { background: rgba(255, 255, 255, .16); color: var(--white); }

.botao--perigo { background: var(--pink); color: var(--white); border-bottom-color: #9E0057; }
.botao--perigo:hover { background: #C4006B; color: var(--white); }

.botao--sucesso { background: var(--verde); color: var(--white); border-bottom-color: #12703C; }
.botao--sucesso:hover { background: #178C4B; color: var(--white); }

.botao--pequeno {
    min-height: 40px;
    padding: .35rem 1rem;
    font-size: .95rem;
    border-bottom-width: 3px;
}

.acoes {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1.5rem;
}

@media (min-width: 30rem) {
    .acoes { flex-direction: row-reverse; }
    .acoes .botao { flex: 1; }
}

/* Link discreto, para "voltar". */
.link-voltar {
    display: inline-block;
    margin-top: 1rem;
    font-weight: 600;
    color: var(--tinta-suave);
    text-decoration: none;
}
.link-voltar:hover { color: var(--navy); text-decoration: underline; }

/* -----------------------------------------------------------------------------
   8. Formulários
   Rótulo flutuante com <label> de verdade — o placeholder é só um espaço,
   usado apenas para o CSS saber se o campo está vazio.
   -------------------------------------------------------------------------- */
.campo {
    position: relative;
    margin-bottom: 1.25rem;
}

.campo__controle {
    width: 100%;
    min-height: var(--altura-toque);
    padding: 1.4rem .9rem .45rem;
    border: 2px solid var(--borda);
    border-radius: var(--raio-pequeno);
    background: var(--white);
    color: var(--tinta);
    transition: border-color .15s ease, box-shadow .15s ease;
    appearance: none;
}

.campo__rotulo {
    position: absolute;
    top: .3rem;
    left: .95rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--navy);
    pointer-events: none;
    transition: top .12s ease, font-size .12s ease, color .12s ease;
}

/* Campo vazio e sem foco: o rótulo desce e vira "placeholder". */
.campo__controle:placeholder-shown:not(:focus) + .campo__rotulo {
    top: .95rem;
    font-size: 1rem;
    font-weight: 400;
    color: var(--tinta-suave);
}

.campo__controle:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 4px rgba(245, 166, 35, .35);
}

.campo__controle:disabled, .campo__controle[readonly] {
    background: var(--fundo-suave);
    color: var(--tinta-suave);
    border-style: dashed;
}

.campo__ajuda {
    display: block;
    margin-top: .3rem;
    font-size: .85rem;
    color: var(--tinta-suave);
}

.campo__erro {
    display: block;
    margin-top: .3rem;
    font-size: .88rem;
    font-weight: 700;
    color: var(--vermelho);
}

.campo--invalido .campo__controle { border-color: var(--vermelho); }
.campo--invalido .campo__rotulo { color: var(--vermelho); }

/* Select precisa da seta própria, já que appearance foi zerado. */
select.campo__controle {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23084A8B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    cursor: pointer;
}

/* Campo de CPF e códigos: dígitos alinhados e legíveis. */
.campo__controle--codigo {
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
}

/* Caixa de aceite (LGPD) */
.aceite {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .9rem 1rem;
    border: 2px solid var(--borda);
    border-radius: var(--raio-medio);
    background: var(--fundo-suave);
    margin-bottom: 1.25rem;
    cursor: pointer;
}

.aceite input[type="checkbox"] {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin: 0;
    accent-color: var(--navy);
    cursor: pointer;
}

.aceite span { font-size: .95rem; line-height: 1.45; }

.aceite:has(input:focus-visible) {
    border-color: var(--sky);
    box-shadow: 0 0 0 4px rgba(245, 166, 35, .35);
}

/* Duas colunas em telas maiores (quantidade de adultos e crianças). */
.linha-campos { display: grid; gap: 0; }

@media (min-width: 30rem) {
    .linha-campos { grid-template-columns: 1fr 1fr; gap: 0 1rem; }
}

/* Resumo de conferência antes de emitir o convite. */
.resumo { margin: 0 0 1.25rem; }

.resumo__item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--borda);
}

.resumo__item:last-child { border-bottom: 0; }
.resumo__rotulo { color: var(--tinta-suave); font-size: .9rem; }
.resumo__valor { font-weight: 700; text-align: right; }

/* -----------------------------------------------------------------------------
   9. Alertas e mensagens
   -------------------------------------------------------------------------- */
.alerta {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .9rem 1.1rem;
    border-radius: var(--raio-medio);
    border-left: 6px solid;
    margin-bottom: 1.25rem;
    font-size: .98rem;
}

.alerta__icone { flex: 0 0 auto; font-size: 1.15rem; line-height: 1.4; }
.alerta p { margin: 0; }

.alerta--ok     { background: var(--verde-claro);    border-color: var(--verde);    color: #14562F; }
.alerta--erro   { background: var(--vermelho-claro); border-color: var(--vermelho); color: #8A1233; }
.alerta--aviso  { background: var(--amarelo-claro);  border-color: var(--yellow);   color: #7A4E06; }
.alerta--info   { background: #E7F4FB;               border-color: var(--sky);      color: var(--navy); }

/* -----------------------------------------------------------------------------
   10. Tabelas
   -------------------------------------------------------------------------- */
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}

.tabela caption {
    text-align: left;
    padding-bottom: .6rem;
    color: var(--tinta-suave);
    font-size: .9rem;
}

.tabela th, .tabela td {
    padding: .6rem .7rem;
    text-align: left;
    border-bottom: 1px solid var(--borda);
    white-space: nowrap;
}

.tabela thead th {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    color: var(--navy);
    border-bottom-width: 2px;
    position: sticky;
    top: 0;
    background: var(--white);
}

.tabela tbody tr:hover { background: var(--fundo-suave); }
.tabela .numero { text-align: right; font-variant-numeric: tabular-nums; }

.ok    { color: var(--verde);    font-weight: 700; }
.falha { color: var(--vermelho); font-weight: 700; }

code {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: .88em;
    background: var(--fundo-suave);
    padding: .1em .35em;
    border-radius: 4px;
}

/* -----------------------------------------------------------------------------
   11. Portaria — alto contraste
   Uso em pé, com o celular na mão, muitas vezes sob sol. Fundo escuro, alvos
   grandes e nada de texto pequeno.
   -------------------------------------------------------------------------- */
.portaria { background: var(--navy-deep); }
.portaria .fundo-doodles { display: none; }

/* Portaria de verdade (leitor, CPF, avulsa): coluna estreita, uso no celular. */
.portaria .pagina { max-width: 32rem; }

/* Administração e relatórios compartilham o fundo escuro da portaria, mas NÃO
   a coluna estreita: são telas de computador, com tabelas largas. Precisa da
   mesma especificidade (duas classes) para vencer a regra acima. */
.portaria .pagina--ampla { max-width: var(--largura-ampla); }

.portaria__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 0 1.25rem;
    color: var(--white);
}

.portaria__operador { font-size: .9rem; opacity: .85; }

.portaria__menu {
    display: grid;
    gap: 1rem;
}

.portaria__botao {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: var(--altura-toque-portaria);
    padding: 1.1rem 1.25rem;
    border: 0;
    border-bottom: 5px solid var(--purple-dark);
    border-radius: var(--raio-medio);
    background: var(--white);
    color: var(--navy-deep);
    font-family: var(--fonte-titulo);
    font-size: 1.25rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.portaria__botao:hover { background: var(--sky-light); color: var(--navy-deep); }
.portaria__botao:active { transform: translateY(2px); border-bottom-width: 3px; }
.portaria__botao:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.portaria__botao--primario { background: var(--yellow); }
.portaria__botao--primario:hover { background: var(--orange); }

.portaria__icone {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(8, 74, 139, .12);
    font-size: 1.4rem;
}

/* Área da câmera do leitor de QR Code. */
.leitor {
    border-radius: var(--raio-medio);
    overflow: hidden;
    background: #000;
    aspect-ratio: 3 / 4;
    margin-bottom: 1rem;
}

.leitor video, .leitor canvas { width: 100%; height: 100%; object-fit: cover; }

/* -----------------------------------------------------------------------------
   12. Fichas de validação — ocupam a tela toda
   A cor precisa ser lida de longe, antes mesmo do texto.
   -------------------------------------------------------------------------- */
.ficha {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem 1.25rem;
    text-align: center;
}

.ficha__estado {
    font-family: var(--fonte-titulo);
    font-size: clamp(2rem, 11vw, 3.5rem);
    font-weight: 700;
    line-height: 1.05;
    margin: 0 0 .35rem;
    text-transform: uppercase;
}

.ficha__simbolo { font-size: clamp(3.5rem, 18vw, 6rem); line-height: 1; margin-bottom: .5rem; }
.ficha__nome { font-size: clamp(1.25rem, 6vw, 1.75rem); font-weight: 700; margin: 0 0 .25rem; }
.ficha__banco { font-size: 1.05rem; opacity: .9; margin: 0 0 1.5rem; }

.ficha__contagem {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.ficha__numero {
    background: rgba(255, 255, 255, .9);
    border-radius: var(--raio-medio);
    padding: .75rem 1.25rem;
    min-width: 7rem;
    color: var(--navy-deep);
}

.ficha__numero strong {
    display: block;
    font-family: var(--fonte-titulo);
    font-size: 2.25rem;
    line-height: 1;
}

.ficha__numero span { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }

.ficha--liberar  { background: var(--verde);     color: var(--white); }
.ficha--repetida { background: var(--yellow);    color: var(--navy-deep); }
.ficha--invalida { background: var(--pink);      color: var(--white); }

.ficha--repetida .ficha__numero { background: rgba(255, 255, 255, .95); }

/* -----------------------------------------------------------------------------
   13. Rodapé
   As logos das entidades não existem em arquivo separado — elas estão dentro
   do banner, usado no convite e no e-mail. Aqui vão em texto.
   -------------------------------------------------------------------------- */
.rodape {
    padding: 1.5rem 1rem 2rem;
    text-align: center;
    color: var(--white);
    font-size: .85rem;
}

.rodape__entidades {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .4rem .9rem;
    margin: 0 0 .6rem;
    padding: 0;
    list-style: none;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    letter-spacing: .02em;
}

.rodape__entidades li { display: flex; align-items: center; gap: .9rem; }
.rodape__entidades li:not(:last-child)::after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
}

.rodape a { color: var(--white); }
.rodape__aviso { opacity: .8; margin: 0; }

.portaria .rodape { color: rgba(255, 255, 255, .7); }

/* -----------------------------------------------------------------------------
   14. Utilitários
   -------------------------------------------------------------------------- */
.centralizado { text-align: center; }
.sem-margem { margin: 0; }
.margem-topo { margin-top: 1.25rem; }
.escondido { display: none !important; }

.selo {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--sky-light);
    color: var(--navy-deep);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.selo--ok    { background: var(--verde-claro);    color: #14562F; }
.selo--erro  { background: var(--vermelho-claro); color: #8A1233; }
.selo--aviso { background: var(--amarelo-claro);  color: #7A4E06; }

.detalhe-erro {
    text-align: left;
    background: var(--fundo-suave);
    border-radius: var(--raio-pequeno);
    padding: 1rem;
    overflow-x: auto;
    font-size: .8rem;
    white-space: pre-wrap;
}

.erro__codigo {
    font-family: var(--fonte-titulo);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--sky);
    margin: 0;
}

/* -----------------------------------------------------------------------------
   15. Acessibilidade
   -------------------------------------------------------------------------- */

/* Visível só para leitores de tela. */
.apenas-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Pular para o conteúdo (primeiro foco da página). */
.pular-conteudo {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 10;
    padding: .75rem 1.25rem;
    background: var(--white);
    color: var(--navy);
    font-weight: 700;
    border-radius: 0 0 var(--raio-pequeno) 0;
}

.pular-conteudo:focus { left: 0; }

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.portaria :focus-visible { outline-color: var(--yellow); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Impressão: sem fundo azul, para não gastar tinta à toa. */
@media print {
    .fundo-doodles, .rodape, .acoes, .link-voltar { display: none !important; }
    body { background: #fff; }
    .cartao { box-shadow: none; border: 1px solid var(--borda); }
}

/* -----------------------------------------------------------------------------
   16. QR Code do convite
   O SVG vem sem dimensão fixa: quem manda no tamanho é este contêiner, para o
   código crescer junto com a tela e continuar legível pelo leitor da portaria.
   -------------------------------------------------------------------------- */
.qrcode-caixa {
    max-width: 17rem;
    margin: 0 auto 1rem;
    padding: 1rem;
    background: var(--white);
    border: 4px solid var(--yellow);
    border-radius: var(--raio-medio);
}

.qrcode-caixa svg {
    display: block;
    width: 100%;
    height: auto;
}

/* O gerador desenha os módulos escuros; o claro fica no fundo do contêiner. */
.qrcode-caixa svg path,
.qrcode-caixa svg rect {
    fill: var(--navy-deep);
}

/* -----------------------------------------------------------------------------
   17. Portaria — complementos
   -------------------------------------------------------------------------- */

/* Botão de ação principal na fila: alvo bem maior que o do site. */
.botao--gigante {
    min-height: var(--altura-toque-portaria);
    font-size: 1.2rem;
    padding: 1rem 1.75rem;
}

.portaria__dica {
    color: var(--white);
    text-align: center;
    font-size: .95rem;
    margin: 0 0 1rem;
}

.portaria__resumo {
    display: flex;
    justify-content: center;
    gap: .75rem;
    margin-top: 1.5rem;
}

.portaria__numero {
    flex: 1;
    background: rgba(255, 255, 255, .1);
    border-radius: var(--raio-medio);
    padding: .85rem .5rem;
    text-align: center;
    color: var(--white);
}

.portaria__numero strong {
    display: block;
    font-family: var(--fonte-titulo);
    font-size: 1.7rem;
    line-height: 1.1;
}

.portaria__numero span {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .85;
}

/* Ações dentro da ficha de validação em tela cheia. */
.ficha__acoes {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    max-width: 26rem;
    margin: 0 auto;
    width: 100%;
}

.ficha__acoes form { margin: 0; }

.ficha__contador {
    margin: 1rem 0 0;
    font-size: .85rem;
    opacity: .75;
}

/* Contato opcional na entrada avulsa, recolhido por padrão. */
.detalhes-opcionais {
    border: 2px dashed var(--borda);
    border-radius: var(--raio-medio);
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
}

.detalhes-opcionais > summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--navy);
}

.detalhes-opcionais[open] > summary { margin-bottom: 1rem; }

/* Formulário de edição embutido na tabela de usuários. */
.form-embutido {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--fundo-suave);
    border-radius: var(--raio-medio);
    min-width: 18rem;
}

.tabela td > details > summary { list-style: none; display: inline-flex; }
.tabela td > details > summary::-webkit-details-marker { display: none; }

/* -----------------------------------------------------------------------------
   18. Administração
   Mesma base escura da portaria, mas com navegação fixa e conteúdo mais largo:
   aqui o uso é sentado, num computador, e não em pé com o celular.
   -------------------------------------------------------------------------- */
.admin__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: .5rem 0 1rem;
}

.admin__marca { text-decoration: none; line-height: 1; }
.admin__marca .marca__linha1 { font-size: 1rem; }
.admin__marca .marca__linha2 {
    font-size: 2rem;
    text-shadow: 1px 1px 0 var(--orange), 2px 3px 0 var(--purple), 3px 5px 0 var(--purple-dark);
}

.admin__conta {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--white);
    font-size: .9rem;
}

.admin__conta a { color: var(--white); font-weight: 700; }

.admin__menu {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.admin__item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: var(--white);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
}

.admin__item:hover { background: rgba(255, 255, 255, .2); color: var(--white); }

.admin__item--ativo {
    background: var(--yellow);
    color: var(--navy-deep);
    border-bottom: 3px solid var(--purple);
}

.admin__item--ativo:hover { background: var(--orange); color: var(--navy-deep); }

/* Blocos de número, usados no painel e nos relatórios. */
.numeros {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}

.numero {
    background: var(--fundo-suave);
    border-radius: var(--raio-medio);
    padding: 1rem .75rem;
    text-align: center;
}

.numero strong {
    display: block;
    font-family: var(--fonte-titulo);
    font-size: 1.8rem;
    line-height: 1.1;
    color: var(--navy);
}

.numero span {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--tinta-suave);
}

/* Pendências do painel. */
.pendencias { list-style: none; margin: 0; padding: 0; }

.pendencia {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .9rem 0;
    border-bottom: 1px solid var(--borda);
}

.pendencia:last-child { border-bottom: 0; }
.pendencia--grave strong { color: var(--vermelho); }

.endereco-publico {
    background: var(--fundo-suave);
    border-radius: var(--raio-pequeno);
    padding: .75rem 1rem;
    overflow-x: auto;
}

.endereco-publico code { background: transparent; font-size: 1rem; }

/* Filtros da lista de convites. */
.filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.filtros .campo { margin-bottom: 0; flex: 1 1 12rem; }
.campo--busca { flex: 2 1 18rem; }

.paginacao {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: 1rem;
}

.paginacao a, .paginacao__atual {
    display: inline-block;
    min-width: 2.5rem;
    padding: .45rem .6rem;
    border-radius: var(--raio-pequeno);
    text-align: center;
    text-decoration: none;
    font-weight: 700;
}

.paginacao a { background: var(--fundo-suave); color: var(--navy); }
.paginacao a:hover { background: var(--sky-light); }
.paginacao__atual { background: var(--navy); color: var(--white); }

.banner-previa {
    border-radius: var(--raio-medio);
    margin-bottom: 1.25rem;
    border: 2px solid var(--borda);
}

.campo__controle--area { min-height: 6rem; resize: vertical; padding-top: 1.6rem; }

.lista-simples { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--tinta-suave); font-size: .92rem; }

.colunas-duplas { display: grid; gap: 1.5rem; }

@media (min-width: 40rem) {
    .colunas-duplas { grid-template-columns: 1fr 1fr; }
}

.variacoes { list-style: none; margin: 0 0 1rem; padding: 0; }

.variacoes li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .3rem 0;
    border-bottom: 1px dashed var(--borda);
}

.variacoes form { margin: 0; }

.botao-texto {
    border: 0;
    background: transparent;
    color: var(--vermelho);
    font-weight: 700;
    cursor: pointer;
    padding: .2rem .4rem;
    border-radius: 6px;
}

.botao-texto:hover { background: var(--vermelho-claro); }

/* -----------------------------------------------------------------------------
   19. Gráfico de entradas por hora
   Barras em CSS puro: nenhuma biblioteca externa, nada para carregar, e
   funciona com a CSP fechada.
   -------------------------------------------------------------------------- */
.grafico {
    display: flex;
    align-items: flex-end;
    gap: .35rem;
    height: 12rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    overflow-x: auto;
}

.grafico__coluna {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
    min-width: 3.2rem;
    height: 100%;
    flex: 1;
}

.grafico__valor { font-size: .8rem; font-weight: 700; color: var(--navy); }

.grafico__barra {
    display: block;
    width: 100%;
    max-width: 2.5rem;
    background: linear-gradient(180deg, var(--sky), var(--navy));
    border-radius: 6px 6px 0 0;
    min-height: 4px;
}

.grafico__rotulo {
    font-size: .7rem;
    color: var(--tinta-suave);
    white-space: nowrap;
    transform: rotate(-45deg);
    transform-origin: center;
    margin-top: .5rem;
}

.tabela tfoot th, .tabela tfoot td {
    border-top: 2px solid var(--navy);
    font-weight: 700;
    background: var(--fundo-suave);
}

/* -----------------------------------------------------------------------------
   20. Administração no desktop
   O restante da interface é pensado para o celular; estas telas são usadas
   sentado, num computador, com muitas colunas na tela ao mesmo tempo.
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) {
    /* Menu numa única faixa, com itens mais compactos: oito pílulas grandes
       quebravam em duas linhas e davam a impressão de aperto. */
    .admin__menu {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .9rem;
        scrollbar-width: thin;
    }

    .admin__item {
        flex: 0 0 auto;
        padding: .5rem .9rem;
        font-size: .9rem;
    }

    /* Tabelas ocupam a largura toda e ficam mais densas: numa lista de
       convites, o que importa é ver muitas linhas de uma vez. */
    .pagina--ampla .cartao { padding: 1.75rem 2rem; }
    .pagina--ampla .tabela { font-size: .9rem; }
    .pagina--ampla .tabela th,
    .pagina--ampla .tabela td { padding: .5rem .65rem; }

    /* Nome do participante pode quebrar; o resto continua numa linha só. */
    .pagina--ampla .tabela th[scope="row"] { white-space: normal; min-width: 12rem; }

    /* Formulário embutido na tabela ganha espaço, sem virar grade: em algumas
       telas ele agrupa mais de um <form>, e colunas os separariam. */
    .form-embutido { min-width: 26rem; }

    /* Cabeçalho do painel: marca à esquerda, conta à direita, sem empilhar. */
    .admin__topo { flex-wrap: nowrap; }

    /* Blocos de número aproveitam a largura em vez de esticar cada caixa. */
    .numeros { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}

@media (min-width: 90rem) {
    /* Em monitor grande, o conteúdo textual não precisa acompanhar a largura
       toda — só as tabelas e os números é que ganham com isso. */
    .pagina--ampla .cartao > p,
    .pagina--ampla .cartao > .texto-secundario { max-width: 70ch; }
}

/* Barra de rolagem fina nas tabelas largas. */
.tabela-rolagem { scrollbar-width: thin; }

/* Ação principal no topo de uma listagem (ex.: "Novo convite avulso"). */
.acoes--topo { margin-top: 0; margin-bottom: .5rem; }

@media (min-width: 30rem) {
    .acoes--topo { flex-direction: row; justify-content: flex-start; }
    .acoes--topo .botao { flex: 0 0 auto; }
}