/* ==========================================================================
   Eventos ABRHidro — componentes.
   Os valores vêm todos de css/tokens.css. Nada de cor ou medida solta aqui.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--fundo-app);
    color: var(--texto-principal);
    font-family: var(--fonte-base);
    font-size: var(--texto-corpo);
    line-height: var(--altura-linha-corpo);
    /* Respeita o notch e a barra inferior quando instalado na tela inicial. */
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.app {
    max-width: var(--largura-max);
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--fundo-app);
}

.aviso-noscript {
    padding: var(--espaco-6) var(--espaco-4);
    color: var(--texto-secundario);
    text-align: center;
}

/* Tela de abertura. As cores são fixas de propósito, sem passar pelos tokens:
   ela existe para emendar na tela que o Android desenha a partir do manifest,
   e aquele fundo é branco nos dois temas. Seguir o tema aqui criaria um degrau
   de cor bem no meio da abertura. */
.abertura {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-4);
    background: #ffffff;
}

.abertura__marca {
    width: 200px;
    height: auto;
}

.abertura__texto {
    margin: 0;
    font-size: var(--texto-subtitulo);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #26348b;
}

/* --------------------------------------------------------------- tipografia */

h1, h2, h3 {
    margin: 0 0 var(--espaco-2);
    line-height: var(--altura-linha-titulo);
    font-weight: 600;
}

h1 { font-size: var(--texto-titulo); }
h2 { font-size: var(--texto-subtitulo); }
h3 { font-size: var(--texto-subtitulo); }

p { margin: 0 0 var(--espaco-3); }

a { color: var(--cor-primaria); }

.fraco { color: var(--texto-secundario); }
.miudo { font-size: var(--texto-legenda); }

/* -------------------------------------------------------------------- telas */

.tela {
    flex: 1;
    padding: var(--espaco-4);
    display: flex;
    flex-direction: column;
}

.tela--centrada {
    justify-content: center;
    gap: var(--espaco-5);
}

.pilha { display: flex; flex-direction: column; gap: var(--espaco-3); }

.oculto { display: none !important; }

.so-leitor {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------ cabeçalho */

.cabecalho {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    padding: var(--espaco-3) var(--espaco-4);
    /* Gradiente no lugar da barra branca com borda: é o que mais muda a
       primeira impressão sem tocar na paleta. */
    background: var(--cabecalho-gradiente);
    color: var(--texto-sobre-cabecalho);
    position: sticky;
    top: 0;
    z-index: 10;
}

.cabecalho__titulo {
    margin: 0;
    font-size: var(--texto-titulo);
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.botao-icone {
    font: inherit;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--raio-campo);
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.botao-icone--texto { font-size: var(--texto-corpo); font-weight: 600; }

.botao-icone:focus-visible,
.cabecalho a:focus-visible {
    outline: 2px solid var(--texto-sobre-cabecalho);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ marca */

.marca { text-align: center; }

.marca__logo {
    width: 168px;
    height: 41px;
    margin: 0 auto var(--espaco-3);
    /* Imagem por CSS, e não por <img>, só para poder trocar a versão colorida
       pela branca no tema escuro — o azul da marca some em fundo escuro. */
    background: url("../icones/marca-abrhidro.png") center / contain no-repeat;
}

@media (prefers-color-scheme: dark) {
    .marca__logo { background-image: url("../icones/marca-abrhidro-branco.png"); }
}

.marca__sub {
    margin: 0;
    color: var(--texto-secundario);
    font-size: var(--texto-subtitulo);
    font-weight: 600;
}

/* --------------------------------------------------------------------- cartão */

.cartao {
    background: var(--fundo-card);
    border-radius: var(--raio-card);
    padding: var(--espaco-4);
    box-shadow: var(--sombra-card);
    border: none;
}

/* ---------------------------------------------------------------- formulário */

.formulario { display: flex; flex-direction: column; gap: var(--espaco-4); }

.campo { display: flex; flex-direction: column; gap: var(--espaco-1); }

.campo__rotulo {
    font-size: var(--texto-legenda);
    font-weight: 600;
    color: var(--texto-secundario);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.campo__ajuda { font-size: var(--texto-legenda); color: var(--texto-secundario); }

.campo__entrada {
    font: inherit;
    font-size: var(--texto-campo);
    color: var(--texto-principal);
    background: var(--fundo-card);
    border: 1px solid transparent;
    border-radius: var(--raio-campo);
    padding: var(--espaco-3);
    width: 100%;
    box-shadow: var(--sombra-card);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.campo__entrada::placeholder { color: var(--texto-desabilitado); }

.campo__entrada:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: var(--sombra-card), 0 0 0 3px var(--tinta-primaria);
}

.campo__entrada[aria-invalid="true"] { border-color: var(--cor-erro); }

/* -------------------------------------------------------------------- botões */

.botao {
    font: inherit;
    font-size: var(--texto-corpo);
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--raio-campo);
    padding: var(--espaco-3) var(--espaco-4);
    cursor: pointer;
    /* Alvo de toque confortável mesmo com o celular na mão e gente passando. */
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-2);
    text-decoration: none;
    transition: background .15s ease, box-shadow .15s ease;
}

.botao--principal {
    background: var(--cor-primaria);
    color: var(--texto-sobre-primaria);
    box-shadow: var(--sombra-card);
}

.botao--principal:active { background: var(--cor-primaria-escura); }

.botao--secundario {
    background: var(--fundo-card);
    color: var(--cor-primaria);
    box-shadow: var(--sombra-card);
}

.botao[disabled] { opacity: .55; cursor: default; }

.botao:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }

/* ------------------------------------------------------------------ mensagens */

.mensagem {
    border-radius: var(--raio-campo);
    padding: var(--espaco-3);
    font-size: var(--texto-corpo);
    border: none;
}

.mensagem--erro   { background: var(--cor-erro-fundo);    color: var(--cor-erro); }
.mensagem--ok     { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }
.mensagem--alerta { background: var(--cor-alerta-fundo);  color: var(--cor-alerta); }

/* ------------------------------------------------------------------ skeleton */

/* Enquanto a API não responde, blocos no formato do que vai chegar — em vez de
   tela vazia ou de um "carregando" solto no meio do nada. */

.skeleton {
    background: linear-gradient(90deg, var(--skeleton-de) 25%, var(--skeleton-para) 37%, var(--skeleton-de) 63%);
    background-size: 400% 100%;
    animation: skeleton-pulso 1.4s ease infinite;
    border-radius: var(--espaco-2);
}

@keyframes skeleton-pulso {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.skeleton--linha    { height: 12px; }
.skeleton--titulo   { height: 16px; width: 70%; }
.skeleton--curta    { width: 45%; }
.skeleton--bloco    { height: 60px; }
.skeleton--quadrado { width: 56px; height: 56px; border-radius: var(--raio-campo); flex: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ==========================================================================
   Componentes das demais telas.
   Já convertidos para os tokens novos — a troca de tokens atinge o app inteiro
   de uma vez. O acabamento tela a tela (chips, skeleton, hierarquia) vem em
   seguida, uma por vez.
   ========================================================================== */

.saudacao { margin: 0; color: var(--texto-secundario); }

.faixa-origem {
    margin: 0;
    padding: var(--espaco-2) var(--espaco-3);
    background: var(--fundo-afundado);
    color: var(--texto-secundario);
    border-radius: var(--raio-campo);
    font-size: var(--texto-legenda);
}

/* Só quando a revalidação falhou o aviso fica âmbar. Enquanto atualiza, é
   informação de rodapé, não alarme. */
.faixa-origem--offline {
    background: var(--cor-alerta-fundo);
    color: var(--cor-alerta);
}

.estado-carregando { color: var(--texto-secundario); padding: var(--espaco-4) 0; }

.estado-vazio {
    text-align: center;
    padding: var(--espaco-6) var(--espaco-4);
    color: var(--texto-secundario);
}

.estado-vazio__titulo {
    font-weight: 600;
    font-size: var(--texto-subtitulo);
    color: var(--texto-principal);
    margin-bottom: var(--espaco-1);
}

/* ------------------------------------------------------------------ logo */

.logo {
    border-radius: var(--raio-campo);
    background: var(--fundo-afundado);
    object-fit: contain;
    flex: none;
}

.logo--lista   { width: 56px; height: 56px; }
.logo--detalhe { width: 96px; height: 96px; margin-bottom: var(--espaco-3); }

.logo--vazio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cor-primaria);
    font-weight: 700;
}

.logo--vazio span { font-size: var(--texto-subtitulo); }

/* -------------------------------------------------------- lista de eventos */

.lista-eventos { display: flex; flex-direction: column; gap: var(--espaco-3); }

.cartao-evento {
    display: flex;
    gap: var(--espaco-3);
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
}

.cartao-evento__texto { min-width: 0; }

.cartao-evento__nome {
    font-size: var(--texto-subtitulo);
    font-weight: 600;
    margin: 0 0 var(--espaco-1);
    color: var(--texto-principal);
}

.cartao-evento__linha { margin: 0; }

/* ------------------------------------------------------------------ selos */

.selos { display: flex; flex-wrap: wrap; gap: var(--espaco-1); margin-top: var(--espaco-2); }

.selo {
    font-size: var(--texto-legenda);
    font-weight: 600;
    padding: 2px var(--espaco-2);
    border-radius: var(--raio-pilula);
    background: var(--fundo-afundado);
    color: var(--texto-secundario);
}

.selo--andamento { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }
.selo--inscrito  { background: var(--tinta-primaria);    color: var(--cor-primaria); }
.selo--encerrado { background: var(--fundo-afundado);    color: var(--texto-secundario); }

/* ------------------------------------------------------- detalhe do evento */

.capa { text-align: center; }

.capa__nome { margin: 0 0 var(--espaco-1); font-size: var(--texto-titulo); }

.capa p { margin: 0 0 2px; }

.capa .selos { justify-content: center; margin-top: var(--espaco-3); }

.secao h3 { margin-bottom: var(--espaco-3); }

.html-api { overflow-wrap: break-word; }
.html-api :is(img) { max-width: 100%; height: auto; border-radius: var(--raio-campo); }
.html-api :is(table) { width: 100%; border-collapse: collapse; font-size: var(--texto-corpo); }
.html-api :is(th, td) { border: 1px solid var(--fundo-afundado); padding: var(--espaco-1) var(--espaco-2); text-align: left; }
.html-api :is(p):last-child { margin-bottom: 0; }
/* Marca-texto sem cor escolhida pela organização. Fixo nos dois temas de
   propósito: destaque amarelo com o texto claro do tema escuro some da tela. */
.html-api :is(mark) { background: #ffe98a; color: #10131a; padding: 0 2px; border-radius: 3px; }
/* Trecho com fundo escolhido no editor: um respiro para o realce não colar nas
   letras vizinhas. A cor do texto quem decide é o js/util/html-api.js. */
.html-api :is(span)[style*="background"] { padding: 0 2px; border-radius: 3px; }

.lista-pessoas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--espaco-3);
}

.pessoa { display: flex; flex-direction: column; }

.pessoa__nome { font-weight: 600; }

.pessoa__cargo { font-size: var(--texto-legenda); color: var(--cor-primaria); font-weight: 600; }

/* ------------------------------------------------------------- navegação */

.navegacao { display: flex; flex-wrap: wrap; gap: var(--espaco-2); }

.navegacao__item {
    flex: 1 1 auto;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    color: var(--cor-primaria);
    background: var(--fundo-card);
    border-radius: var(--raio-campo);
    box-shadow: var(--sombra-card);
    padding: var(--espaco-3) var(--espaco-4);
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ------------------------------------------------------------ abas de dia */

.abas {
    display: flex;
    gap: var(--espaco-1);
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 var(--espaco-4) var(--espaco-1);
    margin: 0 calc(var(--espaco-4) * -1);
}

.abas::-webkit-scrollbar { display: none; }

.aba {
    font: inherit;
    font-size: var(--texto-corpo);
    font-weight: 600;
    white-space: nowrap;
    flex: none;
    color: var(--texto-secundario);
    background: var(--fundo-card);
    border: none;
    box-shadow: var(--sombra-card);
    border-radius: var(--raio-pilula);
    padding: var(--espaco-2) var(--espaco-4);
    min-height: 44px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.aba--ativa {
    background: var(--cor-primaria);
    color: var(--texto-sobre-primaria);
}

.aba:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }

/* ---------------------------------------------------- lista de atividades */

.lista-atividades { display: flex; flex-direction: column; gap: var(--espaco-3); }

.atividade__topo {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    margin-bottom: var(--espaco-1);
}

.atividade__hora {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: var(--texto-corpo);
    color: var(--cor-primaria);
}

.atividade__tipo {
    flex: 1;
    min-width: 0;
    font-size: var(--texto-legenda);
    font-weight: 600;
    color: var(--texto-secundario);
    text-transform: uppercase;
    letter-spacing: .04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.atividade__titulo {
    font-size: var(--texto-subtitulo);
    font-weight: 600;
    margin: 0 0 var(--espaco-1);
}

.atividade__sala { margin: 0 0 var(--espaco-2); }

.atividade__link {
    display: inline-block;
    margin-top: var(--espaco-2);
    font-weight: 600;
    font-size: var(--texto-corpo);
}

.marcador {
    flex: none;
    font-size: 20px;
    line-height: 1;
    background: none;
    border: 0;
    color: var(--texto-desabilitado);
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, color .2s ease;
}

.marcador--ativo { color: var(--cor-destaque); background: var(--tinta-destaque); }

.marcador:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }

.marcador[disabled] { opacity: .5; }

.lista-pessoas--compacta { gap: var(--espaco-2); margin-top: var(--espaco-2); }

.lista-pessoas--compacta .pessoa__nome { font-weight: 400; font-size: var(--texto-corpo); }

/* ==========================================================================
   Barra inferior do evento
   ========================================================================== */

/* O conteúdo das telas com barra reserva o espaço dela, senão o último cartão
   fica escondido embaixo. */
.tela--com-barra {
    padding-bottom: calc(var(--altura-barra) + var(--espaco-5) + env(safe-area-inset-bottom));
}

.barra-inferior {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100%;
    max-width: var(--largura-max);
    z-index: 20;
    display: flex;
    background: var(--fundo-card);
    box-shadow: 0 -1px 3px rgba(10, 26, 78, .08);
    padding-bottom: env(safe-area-inset-bottom);
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--altura-barra);
    padding: var(--espaco-2) var(--espaco-1);
    text-decoration: none;
    color: var(--texto-secundario);
    transition: color .2s ease;
}

.nav-item.ativo { color: var(--cor-primaria); }

.nav-icone-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--raio-pilula);
    padding: 2px var(--espaco-3);
    transition: background .2s ease;
}

.nav-item.ativo .nav-icone-wrap { background: var(--tinta-primaria); }

.nav-rotulo { font-size: 11px; font-weight: 600; }

.nav-item:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: -2px; }

/* Troca de aba com esmaecida curta, para não parecer corte seco. */
.painel-aba { animation: painel-entra .15s ease; }

@keyframes painel-entra {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Esqueletos
   ========================================================================== */

.esqueleto-texto { display: flex; flex-direction: column; gap: var(--espaco-2); flex: 1; }

.esqueleto-texto .skeleton--linha { width: 100%; }

.esqueleto-capa { display: flex; flex-direction: column; align-items: center; gap: var(--espaco-2); }

.skeleton--capa { width: 96px; height: 96px; border-radius: var(--raio-campo); }

.esqueleto-capa .skeleton--linha { width: 80%; }
.esqueleto-capa .skeleton--curta { width: 50%; }

.esqueleto-abas { gap: var(--espaco-1); }

.skeleton--aba { height: 44px; width: 128px; flex: none; border-radius: var(--raio-pilula); }

/* ==========================================================================
   Chip do marcador de agenda (especificação §5)
   ========================================================================== */

.marcador {
    flex: none;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    background: var(--tinta-primaria);
    border: 0;
    border-radius: 50%;
    color: var(--cor-primaria);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, color .2s ease, transform .1s ease;
}

.marcador--ativo { background: var(--tinta-destaque); color: var(--cor-destaque); }

.marcador:active { transform: scale(.92); }

/* O alvo de toque continua com 44px, mesmo o chip tendo 36. */
.marcador::before {
    content: '';
    position: absolute;
    width: 44px;
    height: 44px;
}

.atividade__topo { position: relative; }

/* ==========================================================================
   Credencial
   ========================================================================== */

.credencial { text-align: center; }

/* O nome do evento encabeça o cartão. Sem ele, duas inscrições da mesma pessoa
   viram o mesmo desenho com números diferentes — e é no balcão, com a fila
   andando, que a dúvida aparece. Discreto de propósito: quem confere procura o
   número, que continua sendo a maior coisa da tela. */
.credencial__evento {
    margin: 0 0 var(--espaco-4);
    font-size: var(--texto-corpo);
    font-weight: 600;
    line-height: var(--altura-linha-titulo);
}

.credencial__rotulo {
    margin: 0;
    font-size: var(--texto-legenda);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-secundario);
}

.credencial__numero {
    margin: 0 0 var(--espaco-2);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--cor-primaria);
    font-variant-numeric: tabular-nums;
}

.credencial__nome { margin: 0 0 var(--espaco-1); font-size: var(--texto-titulo); }

.credencial__categoria { margin: 0; font-size: var(--texto-corpo); }

.credencial .selos { justify-content: center; }

.credencial__qr {
    margin: var(--espaco-5) 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espaco-2);
}

/* A imagem vem em 200 px e tem 4 px por módulo — o mínimo para leitura
   confiável. Esticar borra as bordas e o leitor do credenciamento falha, então
   200 px é teto, não sugestão. Fundo branco fixo: no tema escuro um QR sobre
   superfície escura não é lido. */
.credencial__qr img {
    /* content-box de propósito: com o border-box global, o padding comeria 16 px
       da própria imagem e ela seria reduzida a 184 px — 3,68 px por módulo em vez
       de 4, que é o ponto em que as bordas borram e o leitor começa a falhar.
       Assim a imagem fica exatamente 1:1 com os 200 px que a API entrega. */
    box-sizing: content-box;
    width: 200px;
    height: 200px;
    /* Placa branca fixa: no tema escuro um QR sobre superfície escura não é lido. */
    background: #ffffff;
    padding: var(--espaco-2);
    border-radius: var(--raio-campo);
}

.skeleton--qr { width: 200px; height: 200px; border-radius: var(--raio-campo); }

/* Informação sem ação, dentro do cartão de acessórios: o certificado que ainda
   não saiu tem o que dizer, mas não tem para onde levar. Vira linha de texto,
   e não botão cinza — botão pede toque, e toque sem resposta parece defeito. */
.dado-linha { margin: 0; }

.dado-linha__rotulo { font-weight: 600; }

/* ==========================================================================
   Trabalhos
   ========================================================================== */

.trabalho__tema {
    margin: 0;
    font-size: var(--texto-legenda);
    font-weight: 600;
    /* Era na cor de destaque e disputava atenção com o título do trabalho, que
       é o conteúdo. O ciano fica reservado para o que responde ao toque. */
    color: var(--texto-secundario);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.trabalho__titulo { margin: 0; font-size: var(--texto-subtitulo); }

.trabalho__resumo { margin: 0; color: var(--texto-secundario); }

/* Botão que se comporta como link, para o "ler mais" dentro do parágrafo. */
.ligacao {
    font: inherit;
    font-weight: 600;
    background: none;
    border: 0;
    padding: 0;
    color: var(--cor-primaria);
    cursor: pointer;
    text-decoration: underline;
}

.ligacao:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }

/* ==========================================================================
   Ajustes vindos do teste no aparelho
   ========================================================================== */

/* O Chrome do Android pinta o campo preenchido automaticamente com o fundo
   claro dele, ignorando o tema — no escuro o formulário virava duas faixas
   brancas. Não existe como desligar isso; o caminho é cobrir com uma sombra
   interna da cor certa e fixar a cor do texto. A transição longuíssima existe
   porque o Chrome reaplica o estilo dele por alguns instantes após o foco. */
.campo__entrada:-webkit-autofill,
.campo__entrada:-webkit-autofill:hover,
.campo__entrada:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--texto-principal);
    -webkit-box-shadow: 0 0 0 1000px var(--fundo-card) inset;
    box-shadow: 0 0 0 1000px var(--fundo-card) inset;
    caret-color: var(--texto-principal);
    transition: background-color 100000s ease 0s;
}

/* Cada tela é um <div> embrulhando cabeçalho, conteúdo e barra. Sem isto ele
   não estica, e o <main> lá dentro fica do tamanho do conteúdo — foi por isso
   que o estado vazio não centralizava. */
.app > div { display: flex; flex-direction: column; flex: 1; }

/* Estado vazio ocupando a tela: encostado no topo, com o resto em branco,
   parecia conteúdo que não terminou de carregar. */
.tela > .pilha > .estado-vazio,
.tela > .pilha > .pilha > .estado-vazio {
    margin-top: auto;
    margin-bottom: auto;
}

.tela > .pilha { flex: 1; display: flex; flex-direction: column; }

.credencial__nota { margin: 0; }

/* Link auxiliar dentro de um campo (recuperar senha). O respiro vertical existe
   para dar alvo de toque decente sem virar botão. */
.link-auxiliar {
    align-self: flex-start;
    font-size: var(--texto-corpo);
    font-weight: 600;
    text-decoration: none;
    /* 12px em cima e embaixo levam o alvo de toque a 45px, o mesmo piso do
       resto do app. A margem negativa devolve o respiro visual que o respiro
       de toque tomou. */
    padding: var(--espaco-3) 0;
    margin-top: calc(var(--espaco-2) * -1);
    margin-bottom: calc(var(--espaco-2) * -1);
}

.link-auxiliar:hover,
.link-auxiliar:focus-visible { text-decoration: underline; }

.link-auxiliar:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }

/* Marca no cabeçalho.
   Sempre a versão branca: o gradiente do cabeçalho é escuro nos dois temas.
   Largura fixa para o título saber com quanto espaço pode contar. */
.cabecalho__marca {
    flex: none;
    width: 85px;
    height: 20px;
    background: url("../icones/marca-abrhidro-branco.png") center / contain no-repeat;
    opacity: .92;
}

/*
 * Em tela estreita a marca sai para a lupa caber.
 *
 * Medido: com voltar + título + lupa + marca, a 320px sobram 91px para o
 * título e "Credencial" — o mais curto das abas — precisa de 102px. A 360px
 * só "Minha agenda" ainda corta; de 375px para cima cabe tudo.
 *
 * Some a marca, e não o título: no corredor do evento, saber em que tela se
 * está e poder buscar valem mais do que a assinatura, que continua no ícone do
 * app, na tela de Eventos e em todo aparelho de 375px ou mais.
 */
@media (max-width: 374px) {
    .cabecalho__marca { display: none; }
}

/* ==========================================================================
   Busca na lista de trabalhos
   ========================================================================== */

.busca { position: relative; display: block; }

.busca__icone {
    position: absolute;
    left: var(--espaco-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--texto-secundario);
    pointer-events: none;
    display: flex;
}

.busca__icone svg { width: 18px; height: 18px; }

.campo__busca {
    padding-left: calc(var(--espaco-3) * 2 + 18px);
    appearance: none;
    -webkit-appearance: none;
}

.busca__contador { margin: 0; }

/* Nome e papéis na mesma linha, quebrando quando o nome é comprido. */
.pessoa__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espaco-1) 6px;
}

.selo--papel {
    background: var(--tinta-primaria);
    color: var(--cor-primaria);
    font-size: 11px;
}

/* Código e tema dividem a primeira linha do cartão do trabalho. O código vem
   primeiro por ser único e por ser como a pessoa se refere ao trabalho; o tema
   se repete em quase todos os trabalhos da mesma sessão, então cede o espaço. */
.trabalho__topo {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    min-width: 0;
}

.trabalho__codigo {
    flex: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 3px var(--espaco-2);
    border-radius: 6px;
    background: var(--fundo-afundado);
    color: var(--texto-principal);
    white-space: nowrap;
}

.trabalho__topo .trabalho__tema {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   Compartilhar e tela do trabalho
   ========================================================================== */

/*
 * Faixa de versão nova: mesma altura de voo do aviso rápido, mas com botão e
 * sem prazo — ela fica até a pessoa atualizar.
 */
.nova-versao {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--altura-barra) + var(--espaco-4) + env(safe-area-inset-bottom));
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    width: calc(100% - var(--espaco-6));
    max-width: calc(var(--largura-max) - var(--espaco-6));
    background: var(--fundo-card);
    padding: var(--espaco-3);
    padding-left: var(--espaco-4);
    border-radius: var(--raio-card);
    box-shadow: var(--sombra-elevada);
}

.nova-versao__texto { flex: 1; font-size: var(--texto-corpo); font-weight: 600; }

/* O botão não estica: o texto é curto e um botão largo demais parece alarme. */
.nova-versao__botao { width: auto; flex: none; padding: var(--espaco-2) var(--espaco-4); }
.aviso-rapido {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--altura-barra) + var(--espaco-4) + env(safe-area-inset-bottom));
    z-index: 30;
    margin: 0;
    max-width: calc(var(--largura-max) - var(--espaco-6));
    background: var(--texto-principal);
    color: var(--fundo-card);
    font-size: var(--texto-corpo);
    font-weight: 600;
    padding: var(--espaco-3) var(--espaco-4);
    border-radius: var(--raio-campo);
    box-shadow: var(--sombra-elevada);
}

.botao svg { width: 18px; height: 18px; flex: none; }

/* Botões lado a lado, dividindo a largura igualmente. */
.acoes-lado-a-lado { display: flex; gap: var(--espaco-2); }

.acoes-lado-a-lado > * { flex: 1; min-width: 0; }

/* Título do trabalho na lista: abre a tela dedicada. */
.trabalho__link {
    color: var(--cor-primaria);
    text-decoration: none;
}

.trabalho__link:active { text-decoration: underline; }

/* -------------------------------------------------------- tela do trabalho */

.trabalho-detalhe__titulo {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    margin: var(--espaco-2) 0 var(--espaco-3);
}

.trabalho-detalhe__tema {
    margin: 0;
    font-size: var(--texto-legenda);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--texto-secundario);
}

.palavras-chave { display: flex; flex-wrap: wrap; gap: 6px; }

.palavra-chave {
    font-size: var(--texto-legenda);
    padding: 3px var(--espaco-3);
    border-radius: var(--raio-pilula);
    background: var(--fundo-afundado);
    color: var(--texto-secundario);
}

/*
 * Palavra-chave que leva à busca.
 *
 * Ganha a cor da marca e uma borda: sem isso ela continuaria com cara de
 * etiqueta, e ninguém descobre que dá para tocar. O alvo tem altura de dedo —
 * as pílulas ficam lado a lado e errar a de baixo é fácil.
 */
.palavra-chave--busca {
    background: var(--tinta-primaria);
    color: var(--cor-primaria);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
}

.palavra-chave--busca:active { background: var(--tinta-destaque); }

/* ==========================================================================
   Nota pessoal
   ========================================================================== */

/*
 * O campo cresce com o texto até um teto e então rola. Anotação de sessão tem
 * duas linhas na maioria das vezes, e um campo alto e vazio parece cobrança de
 * quem só queria escrever "perguntar sobre a calibração".
 */
.nota__campo {
    font: inherit;
    font-size: var(--texto-campo);
    color: var(--texto-principal);
    background: var(--fundo-afundado);
    border: 1px solid transparent;
    border-radius: var(--raio-campo);
    padding: var(--espaco-3);
    width: 100%;
    min-height: 76px;
    max-height: 40vh;
    resize: vertical;
    line-height: 1.5;
}

.nota__campo::placeholder { color: var(--texto-desabilitado); }

.nota__campo:focus {
    outline: none;
    border-color: var(--cor-primaria);
    background: var(--fundo-card);
}

/* Recado à esquerda, contagem à direita; nenhum dos dois empurra o outro. */
.nota__rodape {
    display: flex;
    justify-content: space-between;
    gap: var(--espaco-2);
    margin: 0;
    min-height: 1.2em;
}

.nota__contador { font-variant-numeric: tabular-nums; }
.nota__contador--no-teto { color: var(--cor-alerta); font-weight: 600; }
.resumo-inteiro { margin: 0; color: var(--texto-secundario); line-height: 1.6; }

/* Cabeçalho de dia dentro da agenda. */
.agenda__dia {
    margin: var(--espaco-2) 0 0;
    font-size: var(--texto-legenda);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--texto-secundario);
}

.agenda__dia:first-child { margin-top: 0; }

/* ==========================================================================
   Convite para salvar o app na tela inicial
   ========================================================================== */

/* A vaga existe para o banner poder abrir sem empurrão: fechada ela não ocupa
   nada — nem o espaçamento da pilha. A altura é animada em pixels, medidos no
   momento da abertura pelo JS: tentei antes a transição de `0fr` para `1fr`,
   mais limpa, mas numa grade de altura indefinida o `1fr` resolveu só o padding
   do cartão e o conteúdo ficou cortado em 28px. */
.banner-vaga { display: none; }

.banner-vaga--visivel {
    display: block;
    overflow: hidden;
    transition: height .25s ease;
}

.banner-instalar {
    position: relative;
    display: grid;
    /* Duas colunas, não três: o × sai do fluxo e vai para o canto, o que
       devolve meia dúzia de caracteres por linha ao texto — a diferença entre
       três linhas e duas, num cartão que já está roubando espaço da grade. */
    grid-template-columns: auto 1fr;
    gap: var(--espaco-3);
    align-items: start;
    padding: var(--espaco-3) var(--espaco-4) var(--espaco-4);
    background: var(--fundo-card);
    border-radius: var(--raio-card);
    box-shadow: var(--sombra-card);
    /* O ciano da marca marca o cartão como convite do app, não como aviso da
       organização — que é o que a faixa âmbar acima dele significa. */
    border-left: 3px solid var(--cor-destaque);
}

.banner-instalar__icone {
    width: 40px;
    height: 40px;
    border-radius: 9px;
}

.banner-instalar__texto {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espaco-1);
}

.banner-instalar__titulo {
    margin: 0;
    /* Espaço reservado para o × que flutua no canto. */
    padding-right: var(--espaco-6);
    font-size: var(--texto-subtitulo);
    font-weight: 700;
    color: var(--texto-principal);
}

.banner-instalar__detalhe {
    margin: 0;
    font-size: var(--texto-corpo);
    line-height: var(--altura-linha-corpo);
    color: var(--texto-secundario);
}

/* O ícone de compartilhar entra no meio da frase, na altura da linha. */
.banner-instalar__glifo svg {
    width: 17px;
    height: 17px;
    vertical-align: -4px;
    color: var(--cor-primaria);
}

.banner-instalar__acao {
    margin-top: var(--espaco-2);
    min-height: 44px;
    padding: var(--espaco-2) var(--espaco-5);
}

/* Alvo de toque de 40px sem desenhar 40px: o × fica leve, mas não escapa do
   dedo de quem está em pé no corredor. */
.banner-instalar__fechar {
    position: absolute;
    top: var(--espaco-1);
    right: var(--espaco-1);
    font: inherit;
    font-size: 22px;
    line-height: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--raio-pilula);
    color: var(--texto-secundario);
    cursor: pointer;
}

.banner-instalar__fechar:active { background: var(--fundo-afundado); }

.banner-instalar__fechar:focus-visible {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 2px;
}

/* ==========================================================================
   Página da pessoa
   ========================================================================== */

.pessoa-ficha__topo {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
}

/* Sem foto o bloco de texto ocupa a linha inteira: `foto_url` vem null em todo
   o cadastro de hoje, e um círculo cinza permanente seria só ruído. */
.pessoa-ficha__foto {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: var(--raio-pilula);
    object-fit: cover;
    background: var(--fundo-afundado);
}

.pessoa-ficha__texto { min-width: 0; }

.pessoa-ficha__nome {
    margin: 0;
    font-size: var(--texto-titulo);
    line-height: var(--altura-linha-titulo);
}

.pessoa-ficha__inst { margin: var(--espaco-1) 0 0; }

/* O minicurrículo entra como texto puro; as quebras de linha de quem digitou
   são a única formatação que sobrevive, e é aqui que elas continuam valendo. */
/* O minicurrículo é HTML da API, como o `info` dos Avisos: quem cuida de
   parágrafo, lista e link é o .html-api. Aqui só a cor e o fecho do cartão —
   sem o `margin-bottom: 0` no último filho, o parágrafo final empurraria um
   respiro a mais para dentro da borda. */
.pessoa-ficha__mini {
    color: var(--texto-secundario);
}

.pessoa-ficha__mini > :last-child { margin-bottom: 0; }

.secao-pessoa__titulo {
    margin: var(--espaco-2) 0 0;
    font-size: var(--texto-subtitulo);
}

/* Cartão inteiro clicável, na página da pessoa. O padrão do app é o título
   levar adiante; aqui o cartão é curto e o alvo de toque é o cartão todo. */
.cartao-toque {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease;
}

.cartao-toque:active { box-shadow: var(--sombra-elevada); }

.cartao-toque:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }

.cartao-toque .trabalho__titulo,
.cartao-toque .atividade__titulo { color: var(--cor-primaria); }

/* O cartão de atividade aqui não tem estrela; o selo de papel fica no lugar
   dela, encostado à direita. */
.cartao-toque .atividade__topo .selo { margin-left: auto; }

/* Nome de participante que leva à página da pessoa. Discreto de propósito: o
   nome continua sendo texto do cartão, e só a cor diz que responde ao toque —
   sublinhado permanente em lista de seis autores viraria uma cerca. */
.pessoa__link {
    color: var(--cor-primaria);
    text-decoration: none;
}

.pessoa__link:active { text-decoration: underline; }

.pessoa__link:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }

/* "Ver os outros N" ao pé de uma lista de participantes recolhida. O respiro
   vertical dá alvo de toque sem afastar o botão dos nomes que ele completa. */
.lista-pessoas__mais {
    display: flex;
    padding: var(--espaco-1) 0;
}

/* ==========================================================================
   Estrela nos cartões de trabalho e na ficha da pessoa
   ========================================================================== */

/* Encostada à direita nas duas, como no cartão de atividade. O `auto` importa
   quando não há tema para esticar: sem ele a estrela colaria no código. */
.trabalho__topo .marcador,
.pessoa-ficha__topo .marcador {
    margin-left: auto;
}

/* A estrela tem 44px de alvo de toque e empurraria a linha do topo para baixo.
   A margem negativa devolve o respiro sem tirar área de toque nenhuma. */
.trabalho__topo .marcador {
    margin-top: calc(var(--espaco-2) * -1);
    margin-bottom: calc(var(--espaco-2) * -1);
}

/* Sem isto o bloco de nome não estica e a estrela fica no meio do cartão. */
.pessoa-ficha__texto { flex: 1; }

/* ==========================================================================
   Agenda em grupos
   ========================================================================== */

/* Título de grupo: acima do dia, que continua sendo a divisão de dentro das
   atividades. O primeiro não leva o respiro de cima, que sobraria no topo. */
.agenda__grupo {
    margin: var(--espaco-4) 0 0;
    font-size: var(--texto-subtitulo);
}

.agenda__grupo:first-child { margin-top: 0; }

/* Cartão de pessoa na agenda: nome à esquerda, estrela à direita. */
.cartao-pessoa {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
}

.cartao-pessoa__texto { flex: 1; min-width: 0; }

.cartao-pessoa__nome {
    margin: 0;
    font-size: var(--texto-subtitulo);
    color: var(--cor-primaria);
}

.cartao-pessoa__texto p { margin: 0; }

/*
 * Quem não tem ficha não se veste de link.
 *
 * O azul do nome é o que anuncia que o cartão abre a pessoa. Nos membros de
 * comissão não há ficha para abrir — a API não manda `id_pessoa` — e um nome
 * azul que não leva a lugar nenhum é uma promessa que a tela não cumpre.
 */
.cartao-pessoa--sem-ficha .cartao-pessoa__nome { color: var(--texto-principal); }

/* ==========================================================================
   Anotação dentro do cartão de atividade
   ========================================================================== */

/*
 * Atividade não tem tela própria: uma palestra ou uma mesa só existem como
 * cartão. A anotação mora aqui, então, separada do resto por uma linha.
 */
.cartao-nota {
    margin-top: var(--espaco-3);
    padding-top: var(--espaco-3);
    border-top: 1px solid var(--fundo-afundado);
}

/* Fechado, com nota: mostra o começo do texto, em duas linhas no máximo. */
.cartao-nota__resumo,
.cartao-nota__abrir {
    font: inherit;
    font-size: var(--texto-corpo);
    text-align: left;
    background: none;
    border: 0;
    padding: 0;
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: var(--espaco-2);
    cursor: pointer;
    color: var(--texto-secundario);
    min-height: 32px;
}

.cartao-nota__resumo span,
.cartao-nota__abrir span { flex: 1; min-width: 0; }

.cartao-nota__resumo span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Sem nota é convite, não conteúdo: fica na cor de link e discreto. */
.cartao-nota__abrir { color: var(--cor-primaria); font-weight: 600; }

.cartao-nota svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }

.cartao-nota__resumo:focus-visible,
.cartao-nota__abrir:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }

/* No cartão que já é link, a nota é texto e não abre nada. */
.cartao-nota--leitura {
    display: flex;
    align-items: flex-start;
    gap: var(--espaco-2);
    margin: 0;
    font-size: var(--texto-corpo);
    color: var(--texto-secundario);
}

.cartao-nota--leitura span {
    flex: 1;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}