/* ==========================
   FONTE (Google Fonts)
   Asap = tipografia oficial da marca Tocando em Frente, usada em
   todo o sistema (títulos com peso mais forte, textos com peso
   regular/médio) — conforme o manual de identidade visual.
========================== */
@import url('https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

/* Item 9 do pedido de melhorias: o SIGTEF é um site de várias páginas
   (cada clique no menu recarrega a página), então tecnicamente sempre
   vai existir um recarregamento — não dá pra manter o menu 100% fixo
   sem reescrever o sistema inteiro como SPA (mudança grande demais pra
   arriscar sem poder testar ao vivo). O que dá pra fazer com segurança
   é isso aqui: liga a transição nativa do navegador entre páginas, que
   troca a tela com um esmaecimento suave em vez do "flash" branco duro
   de sempre. Só funciona em navegadores que já suportam (Chrome/Edge
   recentes) — nos outros, ignora essa regra e continua como antes, sem
   quebrar nada. Respeita quem pediu "menos movimento" no sistema. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

/* ==========================
   CONFIGURAÇÕES GERAIS
========================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Cor principal — azul-marinho institucional da marca Tocando em
       Frente (extraído do manual de identidade visual: pantone da
       família P99/P100, o mesmo azul do logotipo). Contraste com
       branco: 12.45:1 (bem acima do mínimo AA de 4.5:1). */
    --cor-primaria: #212C76;
    --cor-primaria-escura: #12184A;
    --cor-primaria-clara: #E8EAF6;

    /* Cor de destaque (ações positivas, links de apoio) — dourado
       derivado do amarelo institucional da marca (que no manual
       representa "alegria"). Escurecido o suficiente para ter
       contraste de texto: 5.59:1 sobre branco. O amarelo puro da
       marca (usado em várias telas de forma decorativa) não tem
       contraste suficiente para texto, por isso não é usado aqui. */
    --cor-acento: #8A6000;
    --cor-acento-escura: #5C4100;

    /* Cor de erro (mensagens de validação) — vermelho institucional
       da marca (que no manual representa "amor ao próximo"),
       escurecido para acessibilidade.
       #A81F1D sobre #FDECEC = 7.29:1 (WCAG AA para texto normal exige 4.5:1) */
    --cor-erro: #A81F1D;
    --cor-erro-fundo: #FDECEC;

    /* Neutros */
    --cor-fundo: #F5F6FA;
    --cor-fundo-2: #EEF0F8;
    --cor-texto: #1A1D2E;
    --cor-texto-suave: #5D6072;
    --cor-branco: #FFFFFF;
    --cor-borda: #DEDFEC;

    /* Cor de foco (acessibilidade — usada em :focus).
       #0F172A sobre branco/#F4F7FC = ~17:1. Sobre os fundos escuros
       do cabeçalho e do menu lateral o contraste é insuficiente, por
       isso esses dois contextos têm uma regra de foco própria (ver
       seção ACESSIBILIDADE) que inverte a ordem do anel para manter
       3:1 também ali. */
    --cor-foco: #0F172A;

    /* Altura de referência do cabeçalho — usada para o menu lateral
       grudar (sticky) exatamente abaixo dele, sem sobrepor nem deixar
       vão. Ver .cabecalho e .menu-lateral.
       A soma com env(safe-area-inset-top) é para quando o SIGTEF está
       instalado como app no iPhone (modo standalone): nesse caso o
       cabeçalho ganha um respiro extra no topo pra não ficar embaixo
       do notch/status bar (ver .cabecalho), e esta variável precisa
       "saber" desse respiro extra pra continuar batendo certo. Em
       qualquer outro caso (navegador normal, Android, desktop) esse
       env() vale 0px e nada muda. */
    --altura-cabecalho: calc(92px + env(safe-area-inset-top, 0px));

    /* Escala de raio com intenção: elementos "de dados" (tabela, inputs,
       fieldset) usam --raio-sm; blocos comuns usam --raio; o
       arredondamento mais generoso (--raio-lg) fica reservado para
       cards/hero, em vez de aplicar a mesma curva em tudo. */
    --raio-sm: 8px;
    --raio: 16px;
    --raio-lg: 24px;
    --sombra: 0 18px 40px rgba(23, 32, 71, 0.10);
    --sombra-2: 0 10px 24px rgba(23, 32, 71, 0.07);
    --transicao: 180ms ease;
}

/* ==========================
   CORPO DA PÁGINA
========================== */

body {
    font-family: 'Asap', Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

h1, h2, h3 {
    font-family: 'Asap', Arial, Helvetica, sans-serif;
    font-weight: 700;
    line-height: 1.2;
}

h1 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

h2 {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

h3 {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

a {
    color: inherit;
}

/* ==========================
   ACESSIBILIDADE
========================== */

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px white, 0 0 0 5px var(--cor-foco);
    border-radius: 4px;
}

/* Sobre fundos escuros (cabeçalho e rodapé), --cor-foco não tem
   contraste suficiente. Nesses dois contextos o anel é invertido:
   um traço escuro colado ao elemento e um anel branco por fora,
   que mantém 3:1+ contra o azul do fundo. */
.cabecalho a:focus,
.cabecalho button:focus,
.rodape a:focus {
    box-shadow: 0 0 0 2px var(--cor-primaria-escura), 0 0 0 5px var(--cor-branco);
}

/* Modo de alto contraste do Windows ignora box-shadow — sem isto,
   o foco fica invisível nesse modo. */
@media (forced-colors: active) {
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 3px solid CanvasText;
        outline-offset: 2px;
    }
}

/* Só ativa animações suaves para quem não pediu "reduzir movimento" */
@media (prefers-reduced-motion: no-preference) {
    .botao,
    .acoes-topo button,
    .menu-lateral,
    .menu-lateral a,
    .cartao {
        transition: background-color 0.2s ease, width 0.3s ease, transform 0.15s ease, box-shadow 0.15s ease;
    }

    .cartao:hover {
        transform: translateY(-2px);
    }
}

/* LINK PULAR CONTEÚDO */

.pular-conteudo {
    position: absolute;
    left: -9999px;
}

.pular-conteudo:focus {
    left: 10px;
    top: 10px;
    background: white;
    padding: 10px;
    z-index: 10;
}

/* LINK "VOLTAR AO PAINEL" — usado nas páginas de Termo de Uso de
   Imagem e Política de Privacidade, que podem ser abertas direto pelo
   rodapé (sem nova aba) e antes não tinham nenhum jeito de retornar. */
.link-voltar {
    display: inline-block;
    margin-bottom: 20px;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

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

/* Some visualmente, mas continua audível pra quem usa leitor de tela
   — usado, por exemplo, na descrição completa do logotipo institucional. */
.visualmente-oculto {
    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 {
    background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-primaria-escura) 100%);
    color: var(--cor-branco);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(18px + env(safe-area-inset-top, 0px)) calc(30px + env(safe-area-inset-right, 0px)) 18px calc(30px + env(safe-area-inset-left, 0px));
    box-shadow: var(--sombra-2);
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    min-height: var(--altura-cabecalho);
    box-sizing: border-box;
}

.logo-area {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.logo-area__titulo {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.subtitulo {
    margin-top: 4px;
    font-size: 0.95rem;
    color: #DCE7FA;
}

.acoes-topo {
    display: flex;
    gap: 12px;
    align-items: center;
}

.acoes-topo button {
    background: rgba(255,255,255,0.96);
    color: var(--cor-primaria);
    border: 1px solid rgba(255,255,255,0.18);
    padding: 10px 18px;
    border-radius: var(--raio-sm);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
}

.acoes-topo button:hover {
    background: var(--cor-branco);
    transform: translateY(-1px);
}

/* ==========================
   LAYOUT GERAL (menu + conteúdo lado a lado)
========================== */

.layout {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - var(--altura-cabecalho));
}

/* ==========================
   MENU LATERAL
========================== */

.menu-lateral {
    width: 260px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #12184A 0%, #090C2E 100%);
    color: white;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    /* Fica "grudado" logo abaixo do cabeçalho e não rola junto com o
       conteúdo da página — só o próprio menu ganha barra de rolagem
       interna, se a lista de links for maior que a tela. */
    position: sticky;
    top: var(--altura-cabecalho);
    align-self: flex-start;
    max-height: calc(100vh - var(--altura-cabecalho));
}

.menu-lateral nav {
    padding: 18px 14px;
}

.menu-lateral ul {
    list-style: none;
    display: grid;
    gap: 8px;
}

.menu-lateral li {
    margin: 0;
}

.menu-lateral a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 12px 14px;
    white-space: nowrap;
    border-left: 3px solid transparent;
    border-radius: var(--raio);
    font-weight: 600;
    font-size: 0.96rem;
}

.menu-lateral a:hover,
.menu-lateral a:focus,
.menu-lateral a[aria-current="page"] {
    background: rgba(255, 255, 255, 0.14);
    border-left-color: var(--cor-acento);
    transform: translateX(2px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

/* MENU FECHADO (recolhido, só ícone/pouco espaço)
   Antes o texto só encolhia a 0 (font-size: 0): o link ficava
   tecnicamente acessível a leitor de tela, mas sobrava um retângulo
   vazio pra quem enxerga. Agora o texto é deslocado para fora da tela
   com text-indent — a mesma técnica visualmente-oculta usada em
   .campo-oculto, só que sem precisar mexer no HTML/JS existente — e
   um ícone genérico (::before, fora do fluxo de texto, portanto não
   afetado pelo indent) ocupa o espaço visualmente. O ícone é puramente
   decorativo: não é lido por leitor de tela porque não faz parte do
   nome acessível do link.
   Dica de evolução: se puder tocar no HTML, um atributo
   data-icone="…" por item permite trocar o círculo genérico abaixo
   por um ícone específico de cada página — já há suporte pronto para
   isso logo abaixo (a[data-icone]::before). */
.menu-lateral.fechado {
    width: 70px;
}

.menu-lateral.fechado a {
    position: relative;
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
}

.menu-lateral.fechado a::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
    text-indent: 0;
}

.menu-lateral.fechado a[data-icone]::before {
    content: attr(data-icone);
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    font-size: 1.2rem;
    line-height: 1;
}

/* ==========================
   CONTEÚDO PRINCIPAL
========================== */

.conteudo {
    flex: 1;
    padding: 28px;
    min-width: 0;
    background: var(--cor-branco);
    border: 1px solid rgba(216, 225, 238, 0.9);
    border-radius: var(--raio);
    margin: 18px;
}

.conteudo h2 {
    margin-bottom: 12px;
    color: var(--cor-primaria-escura);
    font-size: 1.35rem;
}

.conteudo section + section {
    margin-top: 30px;
}

.conteudo__hero {
    display: grid;
    grid-template-columns: 1.6fr 0.9fr;
    align-items: center;
    gap: 20px;
    padding: 24px;
    border-radius: var(--raio-lg);
    background: var(--cor-fundo-2);
    border: 1px solid rgba(33, 44, 118, 0.10);
    margin-bottom: 24px;
}

/* Versão sem o painel lateral de números (ex: home antes de logar
   dados reais) — ocupa a largura toda em vez de deixar uma coluna
   vazia no lugar onde ficava o antigo resumo fixo. */
.conteudo__hero--simples {
    grid-template-columns: 1fr;
}

.conteudo__hero-texto {
    max-width: 640px;
}

.conteudo__badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 12px;
    border-radius: var(--raio-sm);
    background: rgba(138, 96, 0, 0.14);
    color: var(--cor-acento-escura);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

.conteudo__descricao {
    color: var(--cor-texto-suave);
    margin-top: 10px;
    max-width: 650px;
}

.conteudo__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.conteudo__bloco {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 22px;
}

.conteudo__bloco h2 {
    color: var(--cor-primaria-escura);
    font-size: 1.18rem;
    margin-bottom: 8px;
}

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cor-primaria) 0%, #33418F 100%);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: var(--raio-sm);
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
}

.botao:hover,
.botao:focus {
    background: linear-gradient(135deg, var(--cor-primaria-escura) 0%, var(--cor-primaria) 100%);
    transform: translateY(-1px);
}

.botao:disabled {
    background: var(--cor-texto-suave);
    cursor: not-allowed;
}

.botao.largura-total {
    width: 100%;
}

.botao.margem-superior {
    margin-top: 10px;
}

.campo-oculto {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.texto-auxiliar {
    color: var(--cor-texto-suave);
    font-size: 0.95rem;
    margin: 15px 0;
}

.texto-auxiliar--pequeno {
    color: var(--cor-texto-suave);
    font-size: 0.9rem;
    margin: 0;
}

.espaco-superior {
    margin-top: 40px;
}

.acoes-em-massa {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 760px;
}

.espaco-superior-pequeno {
    margin-top: 30px;
}

.botao-secundario {
    /* IMPORTANTE: usar "background" (shorthand) e não só
       "background-color". .botao define um gradiente através da
       propriedade "background", que inclui um background-image. Se
       aqui a gente só sobrescrevesse "background-color", o gradiente
       continuaria por cima do fundo claro, e o texto escuro deste
       botão ficaria quase ilegível (texto escuro sobre o próprio
       gradiente azul). Usar o shorthand limpa o gradiente herdado. */
    background: rgba(255, 255, 255, 0.95);
    color: var(--cor-primaria);
    border: 1px solid rgba(33, 44, 118, 0.18);
    box-shadow: none;
}

.botao-secundario:hover,
.botao-secundario:focus {
    background: var(--cor-primaria-clara);
    box-shadow: 0 8px 18px rgba(33, 44, 118, 0.10);
}

/* Ação destrutiva/irreversível (ex: apagar um comunicado, recusar um
   cadastro) — mesma base do .botao-secundario, mas com a cor de erro
   no texto/borda, pra diferenciar visualmente de uma ação reversível. */
.botao-perigo {
    background: rgba(255, 255, 255, 0.95);
    color: var(--cor-erro);
    border: 1px solid rgba(178, 30, 30, 0.35);
    box-shadow: none;
}

.botao-perigo:hover,
.botao-perigo:focus {
    background: var(--cor-erro-fundo);
    box-shadow: 0 8px 18px rgba(178, 30, 30, 0.10);
}

/* Selo pequeno ao lado de um título (ex: comunicado encerrado) —
   só um indicador visual de estado, não é interativo. */
.selo {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    vertical-align: middle;
}

.selo-encerrado {
    background: #EEE;
    color: #555;
}

/* Bloco de endereço colapsável (Configurações > Dados pessoais) —
   fica escondido atrás de um botão "Editar/Adicionar endereço" em vez
   de aparecer com os campos soltos direto na tela. Mantém o mesmo
   ritmo visual do restante da seção (rótulo + campo soltos), só com
   um respiro extra ao redor do bloco inteiro e do botão "Cancelar". */
#botao-editar-endereco {
    margin-bottom: 20px;
}

#conta-bloco-endereco-edicao {
    margin-bottom: 20px;
}

#conta-bloco-endereco-edicao #botao-cancelar-endereco {
    display: inline-block;
    margin-top: 10px;
}

/* ==========================================
   MODAL (itens 18, 21, 22 — cadastro de oficina, comunicado e usuário
   passam a abrir em um modal em vez de ficar sempre visíveis na página)
========================================== */

.modal {
    border: none;
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 26px;
    width: min(680px, calc(100vw - 40px));
    max-height: calc(100vh - 60px);
    margin: auto;
}

.modal::backdrop {
    background: rgba(15, 18, 42, 0.55);
}

.modal__cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
}

.modal__cabecalho h2 {
    color: var(--cor-primaria-escura);
    font-size: 1.3rem;
}

.modal__fechar {
    background: transparent;
    border: none;
    color: var(--cor-texto-suave);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--raio-sm);
    flex-shrink: 0;
    /* Área de toque mínima recomendada (44x44px), sem aumentar o
       tamanho visual do "×" — só o espaço clicável ao redor dele. */
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.modal__fechar:hover,
.modal__fechar:focus {
    background: var(--cor-fundo-2);
    color: var(--cor-primaria);
}



input,
select,
textarea {
    width: 100%;
    padding: 13px 14px;
    font-size: 18px;
    font-family: inherit;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    background: var(--cor-branco);
    color: var(--cor-texto);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

input:hover,
select:hover,
textarea:hover {
    border-color: #b8c7da;
}

input:focus,
select:focus,
textarea:focus {
    box-shadow: 0 0 0 4px rgba(33, 44, 118, 0.12);
    border-color: var(--cor-primaria);
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

/* INDICAÇÃO DE CAMPO OBRIGATÓRIO
   Aplica um "*" automaticamente em qualquer label seguida de um campo
   com o atributo "required" — não precisa marcar cada label na mão
   em cada formulário (cadastro, oficinas, comunicados, usuários...),
   e continua funcionando em formulários novos que forem criados no
   futuro, desde que sigam o mesmo padrão (label logo antes do campo).
   O último seletor cobre o caso dos campos de senha, onde o <input>
   fica dentro de uma <div class="campo-senha"> (por causa do botão de
   mostrar/ocultar) em vez de ser irmão direto do label. */
label:has(+ input[required])::after,
label:has(+ select[required])::after,
label:has(+ textarea[required])::after,
label:has(+ div.campo-senha input[required])::after {
    content: " *";
    color: var(--cor-erro);
}

/* Legenda curta explicando o "*", usada no topo dos formulários que
   têm campo obrigatório (ver classe "legenda-obrigatorio" no HTML). */
.legenda-obrigatorio {
    font-size: 0.9rem;
    color: var(--cor-texto-secundario, #555);
    margin-bottom: 15px;
}

/* Asterisco ao lado do rótulo de cada campo obrigatório (o texto
   explicando o que ele significa vem da ".legenda-obrigatorio" no
   topo do formulário). aria-hidden no HTML porque o próprio atributo
   "required" do campo já é anunciado pelo leitor de tela — isto aqui
   é só a marcação visual para quem enxerga a tela. */
.obrigatorio {
    color: var(--cor-erro);
    margin-left: 2px;
}

/* Mensagem de erro de um campo específico */
.erro-campo {
    color: var(--cor-erro);
    font-size: 0.9rem;
    margin-top: -10px;
    margin-bottom: 15px;
    font-weight: 600;
}

/* Faixa de status/erro geral do formulário (anunciada ao NVDA via aria-live) */
.mensagem-status {
    padding: 14px 16px;
    border-radius: var(--raio-sm);
    margin-bottom: 20px;
    font-weight: 600;
    display: none;
}

.mensagem-status.mostrar {
    display: block;
}

.mensagem-status.erro {
    background: var(--cor-erro-fundo);
    color: var(--cor-erro);
    border: 1px solid var(--cor-erro);
}

.mensagem-status.sucesso {
    background: #E7F7F5;
    color: var(--cor-acento-escura);
    border: 1px solid var(--cor-acento);
}

/* ==========================
   RODAPÉ
========================== */

.rodape {
    background: linear-gradient(135deg, var(--cor-primaria-escura) 0%, #12315D 100%);
    color: #DCE7FA;
    text-align: center;
    padding: 24px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.rodape a {
    color: #EAF1FC;
    text-decoration: none;
}

.rodape a:hover {
    text-decoration: underline;
}

/* ==========================
   PÁGINAS COM FORMULÁRIO (internas, com menu)
   (cadastro de pessoas, oficinas, turmas...)
========================== */

.pagina {
    max-width: 920px;
    margin: 0 auto;
    padding: 30px;
    background: var(--cor-branco);
    border: 1px solid rgba(216, 225, 238, 0.95);
    border-radius: var(--raio);
}

/* Páginas com listas/tabelas longas (oficinas disponíveis, oficinas,
   comunicados, usuários) ficam espremidas com o limite de 920px —
   aqui elas ganham mais respiro lateral (item 11). */
.pagina--larga {
    max-width: 1180px;
}

.pagina h1 {
    margin-bottom: 15px;
}

.pagina p {
    margin-bottom: 25px;
    color: var(--cor-texto-suave);
}

form {
    background: var(--cor-branco);
    padding: 24px;
    border-radius: var(--raio);
    display: grid;
    gap: 20px;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    border: 1px solid var(--cor-borda);
}

fieldset {
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    padding: 20px;
    margin-bottom: 20px;
    display: grid;
    gap: 16px;
    background: #fbfcfe;
}

legend {
    display: inline-block;
    font-weight: 700;
    padding: 0 12px;
    color: var(--cor-primaria);
    font-family: 'Asap', Arial, sans-serif;
    font-weight: 700;
    margin-bottom: 8px;
    background: var(--cor-branco);
}

form label {
    margin-bottom: 8px;
    color: var(--cor-texto);
    font-size: 0.98rem;
}

.campo {
    margin-bottom: 20px;
    display: grid;
    gap: 10px;
}

/* Pares de campos lado a lado dentro de um fieldset, ex: número +
   complemento ou cidade + estado no endereço preenchido pelo CEP. */
.linha-campos {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

/* Mesma ideia do .linha-campos acima, mas com as duas colunas do
   mesmo tamanho — usado quando os dois campos são igualmente
   importantes (ex: Nome/E-mail), em vez de um campo principal e
   um campo curto de apoio (ex: Cidade/Estado). */
.linha-campos--igual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 500px) {
    .linha-campos,
    .linha-campos--igual {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Opções de rádio/checkbox (ex: "qual é o seu papel?") —
   área de toque generosa, boa pra quem tem baixa visão
   ou pouca precisão com o mouse/dedo. */
.campo-opcao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    margin-bottom: 10px;
    background: var(--cor-branco);
}

.campo-opcao input[type="radio"],
.campo-opcao input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 2px;
}

.campo-opcao label {
    margin-bottom: 0;
    font-weight: 500;
    cursor: pointer;
}

.campo-opcao:has(input:checked) {
    border-color: var(--cor-primaria);
    background: var(--cor-primaria-clara);
}

form .campo {
    margin-bottom: 20px;
}

form input,
form select,
form textarea {
    margin-bottom: 0;
    padding: 14px 16px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    background: var(--cor-branco);
    color: var(--cor-texto);
    min-height: 48px;
}

form select {
    background-image: linear-gradient(45deg, transparent 50%, var(--cor-texto) 50%),
        linear-gradient(135deg, var(--cor-texto) 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 44px;
}

form textarea {
    min-height: 132px;
}

.tela-acesso__cartao form {
    width: 100%;
}

.tela-acesso__cartao .botao {
    width: 100%;
}

.tela-acesso__cartao .botao-link {
    display: inline-block;
}

.tela-acesso__link-esqueci {
    text-align: right;
    margin: -6px 0 16px;
}

.main-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: transparent;
}

@media (max-width: 768px) {
    /* Mesmo problema do .conteudo (ver comentário na media query dele):
       sem isto, esse wrapper vira do tamanho do próprio conteúdo em vez
       de preencher a tela, e força rolagem horizontal na página. */
    .main-content-wrapper {
        align-self: stretch;
    }
}



/* ==========================
   TELA DE ACESSO (login e cadastro)
   Layout dividido: painel de marca + cartão do formulário.
   Em telas pequenas, empilha (painel vira uma faixa no topo).
========================== */

.tela-acesso {
    min-height: 100vh;
    display: flex;
}

.tela-acesso__marca {
    flex: 1;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(215, 40, 37, 0.22) 0%, transparent 40%),
        radial-gradient(circle at 60% 100%, rgba(255, 209, 0, 0.18) 0%, transparent 45%),
        linear-gradient(145deg, var(--cor-primaria) 0%, var(--cor-primaria-escura) 100%);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px;
}

.tela-acesso__marca::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
    pointer-events: none;
}

.tela-acesso__marca .tela-acesso__titulo-marca {
    font-size: 2.4rem;
    margin-bottom: 16px;
}

.tela-acesso__marca p {
    font-size: 1.1rem;
    color: #DCE7FA;
    max-width: 420px;
}

/* Selo: em vez do mesmo padrão "pílula clara + texto colorido" dos
   outros dois badges, usa um formato de etiqueta com cantos discretos
   e um marcador circular à esquerda, pra não repetir a fórmula. */
.tela-acesso__selo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: white;
    padding: 8px 16px 8px 12px;
    border-radius: var(--raio-sm);
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 32px;
    width: fit-content;
}

.tela-acesso__selo::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cor-acento);
    flex-shrink: 0;
}

.tela-acesso__conteudo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

.tela-acesso__cartao {
    width: 100%;
    max-width: 520px;
    background: var(--cor-branco);
    border-radius: var(--raio-lg);
    padding: 40px 32px;
    margin-bottom: 8px;
    border: 1px solid rgba(216, 225, 238, 0.95);
}

.tela-acesso__cartao > p {
    color: var(--cor-texto-suave);
    margin-bottom: 24px;
}

.tela-acesso__cabecalho {
    margin-bottom: 24px;
}

/* Chip: contorno em vez de preenchido, pra não repetir a mesma
   fórmula visual do badge do conteúdo e do selo da tela de marca. */
.tela-acesso__chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: var(--raio-sm);
    background: transparent;
    border: 1px solid var(--cor-primaria);
    color: var(--cor-primaria);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-bottom: 10px;
}

.tela-acesso__cabecalho h1 {
    margin-bottom: 8px;
    font-size: 1.7rem;
}

.tela-acesso__cabecalho p {
    color: var(--cor-texto-suave);
    margin: 0;
}

.tela-acesso__cartao--cadastro {
    border: 1px solid rgba(215, 222, 232, 0.95);
    /* O cadastro tem bem mais campos que o login, então usa um
       cartão mais largo (a mesma classe base .tela-acesso__cartao
       continua com 520px para o login, que só tem 2 campos e fica
       melhor mais estreito e centralizado). Ampliado de 760px para
       860px para aproveitar melhor o espaço horizontal em telas
       largas, já que o formulário tem várias linhas de 2 colunas. */
    max-width: 860px;
}

.tela-acesso__cartao--cadastro form {
    max-width: none;
}

.tela-acesso__rodape-link {
    margin-top: 20px;
    text-align: center;
}

/* Tela de biometria (primeira tela do login no celular). A tela
   inteira é clicável (ver autenticacao.js) — o cursor de "mão" e a
   reação do ícone ao toque deixam isso visualmente claro, mesmo pra
   quem não olha o texto "Toque para entrar". */
#tela-biometria {
    text-align: center;
    cursor: pointer;
}

#tela-biometria h1 {
    margin-bottom: 8px;
    font-size: 1.7rem;
}

#tela-biometria > p {
    color: var(--cor-texto-suave);
    margin-bottom: 24px;
}

.biometria-icone {
    width: 88px;
    height: 88px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria);
    transition: transform var(--transicao), background var(--transicao);
}

#tela-biometria:hover .biometria-icone,
#tela-biometria:active .biometria-icone {
    background: var(--cor-primaria);
    color: var(--cor-branco);
    transform: scale(1.05);
}

/* Os elementos que têm sua própria ação (botão e link) voltam ao
   cursor normal de botão/link, pra não parecer que "arrastar" neles
   faz algo diferente de tocar. */
#tela-biometria button {
    cursor: pointer;
}

#botao-tentar-biometria.carregando {
    opacity: 0.85;
}

/* Trava de segurança extra: mesmo que a detecção de "aparelho móvel"
   no JavaScript (autenticacao.js) considere por engano um computador
   como celular — o que pode acontecer em notebooks com tela touch,
   por exemplo — a biometria nunca deve aparecer numa tela larga de
   computador. Força também a tela de senha a ficar visível nesse
   caso (o JavaScript pode tê-la escondido, achando que ia mostrar a
   de biometria) — senão as duas ficariam escondidas ao mesmo tempo,
   deixando a pessoa sem nenhum formulário na tela. O !important é
   necessário porque o JavaScript mexe ativamente no atributo
   "hidden" desses elementos; sem ele, essa regra de CSS perderia
   para aquela mudança feita por script. */
@media (min-width: 768px) {
    #tela-biometria,
    #botao-entrar-biometria {
        display: none !important;
    }

    #tela-senha {
        display: block !important;
    }
}

.tela-acesso__rodape-link a {
    color: var(--cor-primaria);
    font-weight: 600;
    text-decoration: none;
}

.tela-acesso__rodape-link a:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .conteudo__hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .tela-acesso {
        flex-direction: column;
    }

    .cabecalho {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .acoes-topo {
        width: 100%;
        flex-wrap: wrap;
    }

    .conteudo {
        padding: 20px;
        margin: 12px;
    }

    .tela-acesso__marca {
        flex: none;
        padding: 32px 24px;
        text-align: center;
        align-items: center;
    }

    .tela-acesso__marca p {
        max-width: none;
    }

    .tela-acesso__selo {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Campo de senha com o ícone de "olho" dentro do campo, alinhado à
   direita — em vez de um botão de texto ao lado. */
.campo-senha {
    position: relative;
    margin-bottom: 15px;
}

.campo-senha input {
    margin-bottom: 0;
    width: 100%;
    /* Espaço reservado à direita para o ícone não ficar por cima do
       texto digitado. */
    padding-right: 46px;
}

.botao-mostrar-senha {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: transparent;
    color: var(--cor-texto-suave);
    border: none;
    border-radius: var(--raio-sm);
    padding: 0;
    cursor: pointer;
}

.botao-mostrar-senha svg {
    width: 22px;
    height: 22px;
}

/* O "olho riscado" só aparece quando a senha está visível — os dois
   ícones ficam sempre no HTML, e o CSS mostra só um por vez, conforme
   aria-pressed (evita reconstruir o SVG via JS a cada clique). */
.botao-mostrar-senha .icone-olho-aberto {
    display: block;
}

.botao-mostrar-senha .icone-olho-fechado {
    display: none;
}

.botao-mostrar-senha[aria-pressed="true"] .icone-olho-aberto {
    display: none;
}

.botao-mostrar-senha[aria-pressed="true"] .icone-olho-fechado {
    display: block;
}

.botao-mostrar-senha:hover,
.botao-mostrar-senha:focus {
    color: var(--cor-primaria);
}

/* Botão de texto simples (ex: "Esqueci minha senha") */
.botao-link {
    background: none;
    border: none;
    color: var(--cor-primaria);
    font-weight: 600;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    padding: 4px;
    text-decoration: underline;
}

.botao-link:hover {
    color: var(--cor-primaria-escura);
}

/* Lista de resultados da busca de aluno, no modal de "Adicionar
   aluno" (tela de Edições) — cada resultado é um botao-link inteiro
   clicável, então a lista em si só precisa tirar o marcador padrão
   e dar um respiro entre os itens. */
.lista-resultados-busca {
    list-style: none;
    margin: 8px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
}

.lista-resultados-busca li {
    border-bottom: 1px solid var(--cor-borda);
}

.lista-resultados-busca li:last-child {
    border-bottom: none;
}

.lista-resultados-busca .botao-link {
    display: block;
    width: 100%;
    text-align: left;
    text-decoration: none;
    padding: 8px 12px;
}

.lista-resultados-busca .botao-link:hover {
    background: var(--cor-primaria-clara);
}

/* Painel de "recuperar senha" que se abre embaixo do link */
.painel-esqueci-senha {
    margin-top: 20px;
    padding: 20px;
    background: var(--cor-primaria-clara);
    border-radius: var(--raio);
}

.painel-esqueci-senha h2 {
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.painel-esqueci-senha p {
    color: var(--cor-texto-suave);
    margin-bottom: 15px;
    font-size: 0.95rem;
}

.painel-esqueci-senha input {
    margin-bottom: 10px;
}
.nota-papel-solicitado {
    font-size: 0.85rem;
    color: var(--cor-acento-escura);
    font-weight: 600;
    margin-bottom: 4px;
}

/* Botão "Salvar perfil" na tabela de Usuários — menor que os botões
   padrão pra caber bem ao lado do seletor de perfil, dentro da célula
   da tabela. */
.botao-salvar-papel {
    display: block;
    margin-top: 8px;
    padding: 8px 14px;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Painel que aparece dentro do modal de "Adicionar usuário" depois do
   convite ser enviado com sucesso — mostra o link de primeiro acesso
   para quem convidou também poder copiar (além do e-mail já enviado).
   Mesmo padrão visual do .painel-esqueci-senha (fundo azul-claro,
   cantos arredondados), pra destacar do resto do formulário — antes
   esse bloco não tinha nenhum estilo próprio e aparecia "cru", sem
   separação visual do resto da página. */
.convite-resultado {
    margin-top: 20px;
    padding: 20px;
    background: var(--cor-primaria-clara);
    border-radius: var(--raio);
}

.convite-resultado p {
    margin-bottom: 10px;
}

.convite-resultado p:last-child {
    margin-bottom: 0;
}

.convite-resultado__link {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
    margin-top: 8px;
}

.convite-resultado__campo-link {
    flex: 1 1 220px;
    width: auto;
    font-size: 0.85rem;
    font-family: "SFMono-Regular", Consolas, monospace;
    background: var(--cor-fundo);
    color: var(--cor-texto-suave);
}

.convite-resultado__link .botao {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .convite-resultado__link {
        flex-direction: column;
    }

    .convite-resultado__campo-link {
        /* Sem isto, o campo herdava flex-basis: 220px do estilo base,
           que no modo coluna vira ALTURA (não largura) — deixando o
           campo enorme e vazio. Precisa resetar para a direção nova. */
        flex-basis: auto;
        width: 100%;
    }
}

/* Lista de itens em formato de cartão (oficinas, turmas, etc.) —
   organiza em colunas conforme o espaço disponível: uma coluna em
   telas estreitas (celular), várias em telas largas (monitor). A
   ordem de leitura para quem usa leitor de tela continua a mesma,
   isso só afeta a disposição visual. */
.lista-cartoes {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

/* Variante "lista" (em vez de grade de cards): cada item ocupa 100% da
   largura, empilhados verticalmente — mais fácil de escanear numa
   lista longa do que em colunas lado a lado (itens 11, 13, 14, 19:
   oficinas disponíveis, minhas inscrições, oficinas cadastradas,
   comunicados, usuários). */
.lista-cartoes--coluna {
    grid-template-columns: 1fr;
}

.cartao {
    background: var(--cor-branco);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    padding: 18px;
    position: relative;
}

.cartao:has(.cartao__link):hover,
.cartao:has(.cartao__link):focus-within {
    border-color: rgba(33, 44, 118, 0.22);
    transform: translateY(-2px);
    box-shadow: var(--sombra-2);
}

/* Card clicável (painel principal): a âncora usa margem negativa pra
   ocupar o card inteiro (área de clique = card inteiro), com padding
   próprio pra manter o mesmo respiro visual de antes. Sem sublinhado,
   e uma setinha sutil aparece no hover indicando que leva a outra
   tela. Isso não altera o `.cartao` "padrão" (sem link), usado em
   várias outras telas do sistema. */
.cartao__link {
    display: block;
    margin: -18px;
    padding: 18px;
    color: inherit;
    text-decoration: none;
    border-radius: inherit;
}

.cartao__link::after {
    content: "→";
    position: absolute;
    top: 18px;
    right: 18px;
    color: var(--cor-primaria);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--transicao), transform var(--transicao);
}

.cartao__link:hover::after,
.cartao__link:focus-visible::after {
    opacity: 1;
    transform: translateX(0);
}

section {
    margin-top: 24px;
}

section h2 {
    margin-bottom: 8px;
    font-size: 1.2rem;
}

section p {
    color: var(--cor-texto-suave);
}

.cartao h3 {
    margin-bottom: 6px;
}

.cartao__info {
    color: var(--cor-texto-suave);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.cartao__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.cartao__acoes .botao,
.cartao__acoes .botao-secundario {
    flex: 1 1 auto;
    text-align: center;
}

.cartao__cabecalho-selecionavel {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 4px;
}

/* Sem isso, o checkbox herda a regra genérica "input { width: 100% }"
   do topo do arquivo e "estica" a linha inteira, empurrando o título
   pra baixo e ficando com cara de bug — tanto no computador quanto,
   principalmente, no celular (onde o card já é estreito). */
.cartao__cabecalho-selecionavel input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 3px;
}

.cartao__cabecalho-selecionavel h3 {
    margin: 0;
}

.campo-selecionar-todas-inscricoes {
    align-self: center;
}

/* ==========================================
   APP SHELL
   (tela de carregamento, área do usuário,
   botão sair, destaque da página atual no menu)
========================================== */

/* Tela de carregamento em tela cheia — o primeiro
   momento que a pessoa vê, antes do conteúdo aparecer.
   É essa tela que dá a sensação de "abrir um aplicativo". */
.carregando-app {
    position: fixed;
    inset: 0;
    background: var(--cor-fundo);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 24px;
}

/* Sem isto, o atributo HTML "hidden" não tinha nenhum efeito aqui:
   a regra acima (display: flex) é do autor da página, e uma regra de
   autor sempre vence a regra padrão do navegador para [hidden]
   (display: none), não importa a especificidade. Resultado: mesmo com
   "hidden" no elemento, ele continuava ocupando a tela inteira e
   bloqueando cliques em tudo por baixo (bug real encontrado e
   confirmado em teste — não é só uma garantia preventiva). */
.carregando-app[hidden] {
    display: none;
}

.carregando-app__caixa {
    text-align: center;
    max-width: 420px;
}

.carregando-app__caixa--bloqueio {
    background: var(--cor-branco);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 40px 32px;
}

.carregando-app__marca {
    font-family: 'Asap', Arial, sans-serif;
    font-weight: 700;
    color: var(--cor-primaria);
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
}

.carregando-app__caixa--bloqueio h1 {
    margin-bottom: 12px;
}

.carregando-app__caixa--bloqueio p {
    color: var(--cor-texto-suave);
    margin-bottom: 20px;
}

.carregando-app__spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 16px auto;
    border: 4px solid var(--cor-primaria-clara);
    border-top-color: var(--cor-primaria);
    border-radius: 50%;
    animation: girar 0.8s linear infinite;
}

@keyframes girar {
    to {
        transform: rotate(360deg);
    }
}

/* Quem pede para reduzir movimento não vê o giro —
   só o texto "Carregando...", que já é suficiente. */
@media (prefers-reduced-motion: reduce) {
    .carregando-app__spinner {
        animation: none;
    }
}

/* Área do usuário no cabeçalho ("Nome · Perfil") */
.area-usuario {
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    margin-right: 4px;
    white-space: nowrap;
}

/* Botão "Sair", pensado para ficar sobre o fundo azul do cabeçalho */
.botao-sair {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.7);
    padding: 8px 16px;
    border-radius: var(--raio-sm);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
}

.botao-sair:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Link da página atual no menu lateral — ajuda tanto
   visualmente quanto para quem usa leitor de tela
   (o NVDA anuncia "página atual" graças ao aria-current). */
.menu-lateral a[aria-current="page"] {
    background-color: rgba(255, 255, 255, 0.14);
    border-left-color: var(--cor-acento);
    font-weight: 700;
}

/* No cabeçalho, em telas estreitas, evita que tudo
   fique espremido numa linha só. */
@media (max-width: 700px) {
    .cabecalho {
        flex-wrap: wrap;
        gap: 12px;
    }

    .acoes-topo {
        flex-wrap: wrap;
    }
}



/* ==========================
   RESPONSIVIDADE (páginas internas)
========================== */

@media (max-width: 768px) {

    .layout {
        flex-direction: column;
    }

    .menu-lateral {
        width: 100%;
        position: static;
        max-height: none;
        overflow: visible;
    }

    .menu-lateral.fechado {
        width: 100%;
        max-height: 0;
    }

    .conteudo {
        padding: 20px;
        /* Sem isto, com .layout em coluna (align-items: flex-start),
           o <main> vira do tamanho do próprio conteúdo em vez de
           preencher a largura da tela — e qualquer coisa larga por
           dentro (como a tabela de usuários) força rolagem horizontal
           na página inteira. "stretch" (em vez de width:100%) já
           desconta a margem sozinho, sem sobrar nem faltar pixel.
           O .menu-lateral logo acima resolve o mesmo problema com
           width: 100% porque ali não há margem lateral somada. */
        align-self: stretch;
    }
}

/* Bloco "Permissão de coordenador nesta oficina" — dentro do
   cartão de cada oficina, visível só para coordenador/administrador */
.delegacao {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--cor-borda);
}

.delegacao__titulo {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 8px;
}

.delegacao__vazio {
    color: var(--cor-texto-suave);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.delegacao__lista {
    list-style: none;
    margin-bottom: 12px;
}

.delegacao__lista li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--cor-fundo);
}

.delegacao__form label {
    font-size: 0.9rem;
}

.delegacao__linha-campo {
    display: flex;
    gap: 8px;
}

.delegacao__linha-campo input {
    margin-bottom: 0;
    flex: 1;
}

/* Bloco de justificativa de falta, dentro da lista de chamada */
.justificativa-falta {
    margin-top: 10px;
    padding: 12px;
    background: var(--cor-fundo);
    border-radius: var(--raio-sm);
    width: 100%;
}

.justificativa-falta label {
    font-size: 0.9rem;
    margin-top: 8px;
}

.justificativa-falta select,
.justificativa-falta textarea {
    margin-bottom: 8px;
}

.justificativa-falta__mensagem {
    font-size: 0.9rem;
    color: var(--cor-acento-escura);
    font-weight: 600;
}

/* ==========================================
   PAINEL DE ACESSIBILIDADE
========================================== */

.menu-acessibilidade {
    position: relative;
}

.painel-acessibilidade {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--cor-branco);
    color: var(--cor-texto);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 16px;
    width: 240px;
    z-index: 100;
}

.painel-acessibilidade__titulo {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.painel-acessibilidade__botoes {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.painel-acessibilidade__botoes button {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-weight: 700;
    cursor: pointer;
}

.painel-acessibilidade__botoes button:hover {
    background: var(--cor-primaria-clara);
}

#btnAltoContraste {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-weight: 600;
    cursor: pointer;
}

#btnAltoContraste[aria-pressed="true"] {
    background: var(--cor-primaria);
    color: white;
}

/* Tamanhos de texto (aplicados na tag <html>) */
html.texto-grande {
    font-size: 120%;
}

html.texto-extra-grande {
    font-size: 140%;
}

/* Alto contraste (aplicado na tag <html>) */
html.alto-contraste {
    --cor-primaria: #003399;
    --cor-primaria-escura: #001a4d;
    --cor-primaria-clara: #cce0ff;
    --cor-fundo: #ffffff;
    --cor-texto: #000000;
    --cor-texto-suave: #1a1a1a;
    --cor-borda: #000000;
    --cor-branco: #ffffff;
}

html.alto-contraste body {
    background: #ffffff;
}

html.alto-contraste .cartao,
html.alto-contraste form,
html.alto-contraste .painel-acessibilidade {
    border: 2px solid #000000;
}

/* ==========================================
   TABELAS (Usuários, Relatórios, etc.)
========================================== */

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--cor-branco);
    border: 1px solid var(--cor-borda);
    margin-top: 10px;
    border-radius: var(--raio-sm);
    overflow: hidden;
}

/* CORREÇÃO DE ACESSIBILIDADE — funcionava com leitor de tela no
   computador, mas quebrava no celular: antes, em telas pequenas, a
   própria <table> virava "display: block" pra caber a rolagem
   horizontal. Só que, quando o navegador muda o "display" de uma
   tabela pra algo fora do padrão (table/table-row/table-cell), ele
   também apaga a semântica de tabela que chega pro leitor de tela —
   ou seja, no Android (TalkBack) e no iPhone (VoiceOver), a pessoa
   deixa de saber em que linha/coluna está, ou que aquele "select" de
   Perfil pertence à conta de fulano. Isso só acontecia abaixo de
   700px de largura (por isso "no computador funciona"). A correção:
   quem rola na horizontal agora é este wrapper (div em volta da
   tabela), e a <table> continua sendo uma tabela de verdade. */
.tabela-scroll {
    overflow-x: auto;
    margin-top: 10px;
}

.tabela-scroll table {
    margin-top: 0;
}

thead {
    background: #F4F8FF;
}

th {
    color: var(--cor-primaria-escura);
    text-align: left;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 0.95rem;
}

td {
    padding: 12px 16px;
    border-top: 1px solid var(--cor-borda);
    font-size: 0.97rem;
}

tbody tr:hover {
    background: #F8FBFF;
}

@media (max-width: 700px) {
    .tabela-scroll table {
        width: max-content;
        min-width: 100%;
    }

    .tabela-scroll th,
    .tabela-scroll td {
        white-space: nowrap;
    }
}

.tabela-scroll td select {
    /* "Administrador" é o rótulo mais longo entre os perfis — sem uma
       largura mínima, a coluna encolhe pra caber ao lado das outras
       (Nome, E-mail) e o texto do perfil selecionado corta no meio
       ("Administrad..."), mesmo o <select> tendo width: 100%. */
    min-width: 180px;
}

/* Números grandes do resumo de Relatórios e do Painel (home) */
#lista-resumo,
#lista-dashboard {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

#lista-resumo .cartao,
#lista-dashboard .cartao {
    flex: 1;
    min-width: 150px;
    text-align: center;
    background: var(--cor-primaria-clara);
    border: none;
    border-top: 4px solid var(--cor-primaria);
}

/* Alterna a cor de destaque entre azul e verde-água, pra cada
   cartão de número ter um pouco mais de identidade visual. */
#lista-resumo .cartao:nth-child(3n+2),
#lista-dashboard .cartao:nth-child(3n+2) {
    background: #E7F7F5;
    border-top-color: var(--cor-acento);
}

#lista-resumo .cartao:nth-child(3n+2) h3,
#lista-dashboard .cartao:nth-child(3n+2) h3 {
    color: var(--cor-acento-escura);
}

#lista-resumo h3,
#lista-dashboard h3 {
    font-size: 2.2rem;
    color: var(--cor-primaria);
    font-family: 'Asap', Arial, sans-serif;
    font-weight: 700;
}

/* ==========================
   BARRA DE FERRAMENTAS — tela de Usuários
   (busca, filtro por status e aprovação em lote)
========================== */

.barra-ferramentas-usuarios {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 16px;
    padding: 16px;
    background: var(--cor-fundo-2);
    border-radius: var(--raio);
    border: 1px solid rgba(33, 44, 118, 0.10);
}

.campo-busca-usuarios,
.campo-filtro-usuarios {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.campo-busca-usuarios {
    flex: 1 1 220px;
}

.campo-filtro-usuarios {
    flex: 0 1 200px;
}

.campo-filtro-usuarios select {
    /* Em telas mais estreitas o container pode encolher abaixo de
       200px — sem isso, opções mais longas ("Todos os comunicados",
       "Todos os status") cortam no meio do texto. O select tem
       padding-right: 44px reservado pro ícone da seta (ver regra de
       "select, textarea" mais acima), então a largura mínima precisa
       sobrar bem mais que o texto puro pra não cortar de novo. */
    min-width: 260px;
}

.campo-busca-usuarios label,
.campo-filtro-usuarios label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cor-texto-suave);
}

/* Contador de resultados ("X encontrados") ao lado dos filtros de
   busca — em Usuários, Comunicados, Oficinas, Inscrições, Relatórios,
   Frequência, Documentos e Oficinas Disponíveis. Força quebra pra
   própria linha (em vez de disputar espaço com os campos de busca/
   filtro na mesma linha), senão o <select> ao lado espreme e corta o
   texto da opção selecionada em telas mais estreitas. */
[id^="contador-resultados-"] {
    flex-basis: 100%;
    margin: 0;
}

/* Filtro de Modalidade (reaproveitado na tela de Oficinas Disponíveis,
   dentro da mesma .barra-ferramentas-usuarios acima) — grupo de botões
   alternáveis (Todas / Presencial / Online) que troca a lista na hora,
   sem recarregar a página. Segue o mesmo padrão de botão com
   aria-pressed já usado em outras telas do sistema (ex: mostrar/ocultar
   senha), só que em grupo. */
/* Sobrescreve o estilo padrão de <fieldset> (borda grossa, padding
   grande, display:grid) — aqui ele precisa ficar compacto, lado a
   lado com os outros campos da barra de ferramentas. */
.campo-filtro-modalidade {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
}

.campo-filtro-modalidade legend {
    padding: 0;
    margin: 0;
    background: transparent;
    font-size: 0.9rem;
    color: var(--cor-texto-suave);
}

.campo-filtro-modalidade > div {
    display: inline-flex;
    flex-direction: row;
    border: 2px solid var(--cor-primaria);
    border-radius: var(--raio-sm);
    overflow: hidden;
    width: fit-content;
}

.botao-segmentado {
    background: var(--cor-branco);
    color: var(--cor-primaria);
    border: none;
    border-right: 2px solid var(--cor-primaria);
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao);
}

.botao-segmentado:last-child {
    border-right: none;
}

.botao-segmentado:hover {
    background: var(--cor-primaria-clara);
}

.botao-segmentado[aria-pressed="true"] {
    background: var(--cor-primaria);
    color: var(--cor-branco);
}

.botao-segmentado[aria-pressed="true"]:hover {
    background: var(--cor-primaria-escura);
}

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

/* Em telas de celular, o grupo passa a ocupar a largura toda da barra
   de ferramentas (em vez de ficar do tamanho do texto) e os 3 botões
   dividem esse espaço em partes iguais — ficam alinhados entre si dos
   dois lados, com o mesmo tamanho, em vez de cada um ficar largo
   conforme o texto ("Presencial" é bem maior que "Online"). */
@media (max-width: 480px) {
    .campo-filtro-modalidade {
        width: 100%;
    }

    .campo-filtro-modalidade > div {
        width: 100%;
    }

    .botao-segmentado {
        flex: 1;
        text-align: center;
        padding: 10px 8px;
    }
}


/* ==========================================
   Minha Conta — Biometria e trava de app (adicionado)
   ========================================== */

.margem-superior {
    margin-top: 1rem;
}

.lista-simples {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
}

.lista-simples li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--cor-borda, #d7dee8);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.trava-biometrica {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F6F8FB;
    padding: 1.5rem;
}

.trava-biometrica__caixa {
    max-width: 24rem;
    width: 100%;
    text-align: center;
    background: #fff;
    border-radius: 12px;
    padding: 2rem 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.trava-biometrica__icone {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}


/* ==========================
   Logotipo real da marca — tela de login e cabeçalho (adicionado)
   ========================== */

.tela-acesso__logo {
    max-width: 140px;
    width: 40%;
    height: auto;
    margin-bottom: 16px;
    border-radius: 12px;
}

.rodape__logo {
    display: block;
    width: 64px;
    height: auto;
    margin: 0 auto 12px;
    border-radius: 8px;
}

.cabecalho__logo {
    height: 40px;
    width: auto;
    display: block;
}

.cabecalho__marca {
    display: flex;
    align-items: center;
    gap: 12px;
}


/* ==========================================
   Aviso de atualização do PWA (adicionado)
   ========================================== */

.aviso-atualizacao-pwa {
    position: fixed;
    left: 16px;
    right: 16px;
    /* env(safe-area-inset-bottom) = altura da barra de gestos do
       iPhone quando o app está instalado (modo standalone). Sem isso,
       este aviso fixo no rodapé fica meio grudado nela. */
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 10000;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    background: var(--cor-primaria);
    color: var(--cor-branco);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}

.aviso-atualizacao-pwa__texto {
    margin: 0;
    flex: 1 1 200px;
    font-weight: 500;
}

.aviso-atualizacao-pwa__botao {
    flex: 0 0 auto;
    background: var(--cor-branco);
    color: var(--cor-primaria);
}

.aviso-atualizacao-pwa__botao:hover,
.aviso-atualizacao-pwa__botao:focus {
    background: var(--cor-fundo);
}

.aviso-atualizacao-pwa__fechar {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--cor-branco);
    font-size: 1.1rem;
    line-height: 1;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: var(--raio-sm);
    /* Área de toque mínima recomendada (44x44px). */
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.aviso-atualizacao-pwa__fechar:hover,
.aviso-atualizacao-pwa__fechar:focus {
    background: rgba(255, 255, 255, 0.18);
}

@media (max-width: 480px) {
    .aviso-atualizacao-pwa {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .aviso-atualizacao-pwa__fechar {
        position: absolute;
        top: 8px;
        right: 8px;
    }
}