/* Identidade visual compartilhada por todas as páginas do Portal Betel. */
/* 1. Cores, movimento e base */
:root {
    --cor-primaria: #673ab7;
    --cor-primaria-hover: #512da8;
    --cor-fundo: #f5f3fa;
    --cor-texto: #302b3a;
    --cor-branca: #fff;
    --cor-suave: #f4f0fb;
    --cor-borda: #e2dcec;
    --cor-controle: #887993;
    --cor-secundaria: #696174;
    --sombra: 0 8px 28px rgba(52, 29, 89, .07);
    --tempo-curto: 160ms;
    /* [SITE: ANIMAÇÃO] Entrada mais gradual; controles mantêm resposta de 160 ms. */
    --tempo-entrada: 500ms;
    --curva-suave: cubic-bezier(.25, .1, .25, 1);
}

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

/* A barra só aparece quando necessária; não há faixa vazia nas páginas curtas. */
html {
    overflow-y: auto;
    /* Mantém o fundo claro enquanto a próxima página e sua decoração carregam. */
    background-color: var(--cor-fundo);
    color-scheme: only light;
}

html:has(.modal-dialog[open]) {
    overflow: hidden;
}

[hidden] {
    display: none !important;
}

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--cor-fundo);
    isolation: isolate;
    color: var(--cor-texto);
    line-height: 1.6;
}

/* [SITE: FUNDO] Camada decorativa independente da altura do documento e da barra de rolagem.
   vw mantém a largura com/sem barra; lvh evita saltos quando a barra do navegador móvel recolhe. */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100lvh;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(rgba(245, 243, 250, .88), rgba(245, 243, 250, .88)), url('/fundo.png') center / cover no-repeat;
}

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

button, a, input, select, textarea, summary {
    -webkit-tap-highlight-color: transparent;
}

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

button {
    cursor: pointer;
}

img {
    max-width: 100%;
}

/* [ACESSIBILIDADE: FOCO] Mostra qual controle receberá a próxima ação do teclado. */
:focus-visible {
    outline: 3px solid var(--cor-primaria-hover);
    outline-offset: 3px;
}

/* [ACESSIBILIDADE: LEITURA] Texto disponível ao leitor de tela, sem ocupar espaço visual. */
.somente-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

h1, h2, h3, h4 {
    line-height: 1.3;
    overflow-wrap: anywhere;
}

p, small, strong {
    overflow-wrap: anywhere;
}

/* 2. Marca e navegação */
.site-header {
    background: var(--cor-primaria);
    box-shadow: 0 3px 14px #301b531a;
}

.navbar {
    --largura-conteudo: 1280px;
    max-width: var(--largura-conteudo);
    margin-inline: max(0px, calc((100vw - var(--largura-conteudo)) / 2)) 0;
    padding: 16px 28px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: white;
    text-decoration: none;
    min-width: 0;
    justify-self: start;
}

.logo-projeto {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.logo-texto {
    font-size: 1.3rem;
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1.3;
}

.logo-titulo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 9px;
}

.logo-texto small {
    display: block;
    color: #e6dafb;
    font-size: .76rem;
    font-weight: 400;
    letter-spacing: .03em;
    margin-top: 3px;
}

.nav-menu {
    display: flex;
    gap: 22px;
    align-items: center;
}

.nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 4px;
}

.nav-links a, .perfil a, .perfil button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 9px 12px;
    border-radius: 9px;
    color: #f4ecff;
    text-decoration: none;
    font-size: .92rem;
    font-weight: 600;
    white-space: nowrap;
}

.perfil button {
    background: transparent;
}

.nav-links a:hover, .perfil a:hover, .perfil button:hover {
    background: #ffffff1c;
}

.nav-links a.active, .perfil a.active {
    background: white;
    color: var(--cor-primaria-hover);
}

.perfil {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 18px;
    border-left: 1px solid #ffffff38;
}

.perfil .nav-conta {
    border: 1px solid #ffffff66;
}

.admin-badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: 0;
    color: white;
    background: #ffffff1c;
    border-radius: 6px;
    padding: 4px 6px;
}

.debug-voltar {
    color: white;
    text-decoration: none;
    font-size: .9rem;
    padding: 10px 12px;
    border: 1px solid #ffffff66;
    border-radius: 9px;
    min-height: 44px;
    text-align: center;
}

.debug-voltar:hover {
    background: #ffffff1c;
}

.menu-toggle {
    color: white;
    background: #ffffff14;
    border: 1px solid #ffffff66;
    border-radius: 9px;
    padding: 9px 12px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    font-size: .9rem;
}

.menu-icone {
    display: grid;
    gap: 4px;
    width: 18px;
}

.menu-icone span {
    display: block;
    background: currentColor;
    height: 2px;
    border-radius: 2px;
}

.menu-toggle[aria-expanded='true'] {
    background: var(--cor-primaria-hover);
}

.site-header :focus-visible, .modal-header :focus-visible {
    outline-color: #ffdb84;
}

/* [ACESSIBILIDADE: ATALHO] O link aparece ao receber foco e permite pular a navegação. */
.pular-conteudo {
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: 10;
    padding: 10px 16px;
    background: white;
    border-radius: 8px;
}

.pular-conteudo:focus {
    top: 12px;
}

/* 3. Estrutura das páginas */
/* A margem usa a largura da tela: a barra não desloca o conteúdo para o lado. */
.container, .container-admin {
    --largura-conteudo: 1160px;
    max-width: var(--largura-conteudo);
    margin-block: 32px 56px;
    margin-inline: max(0px, calc((100vw - var(--largura-conteudo)) / 2)) 0;
    padding: 0 28px;
}

.cadastro-container {
    --largura-conteudo: 760px;
}

.registro-container {
    --largura-conteudo: 900px;
}

main:focus {
    outline: none;
}

.content {
    background: white;
    padding: 32px;
    border: 1px solid var(--cor-borda);
    border-top: 4px solid var(--cor-primaria);
    border-radius: 16px;
    box-shadow: var(--sombra);
}

.content h1 {
    color: var(--cor-primaria-hover);
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -.03em;
    margin-bottom: 10px;
}

.content h2 {
    color: var(--cor-primaria-hover);
    font-size: 1.35rem;
    margin-bottom: 10px;
}

.content p {
    margin-bottom: 16px;
    text-align: left;
}

.content > p, .dashboard-header p {
    color: var(--cor-secundaria);
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 28px;
}

.dashboard-header p {
    margin-bottom: 0;
    max-width: 60ch;
}

.dashboard-acoes {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

/* 4. Botões e ações */
.btn-primary, .btn-secundario, .btn-success-entrega, .btn-danger-excluir, .btn-danger, .btn-secondary, .btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 18px;
    border-radius: 9px;
    text-decoration: none;
    font-size: .95rem;
    font-weight: 650;
    line-height: 1.4;
    text-align: center;
    border: 1px solid transparent;
}

.btn-primary {
    background: var(--cor-primaria);
    color: white;
}

.btn-primary:hover {
    background: var(--cor-primaria-hover);
    box-shadow: 0 3px 10px #673ab726;
}

.btn-secundario, .btn-secondary {
    color: var(--cor-primaria-hover);
    background: white;
    border-color: #c9bcdf;
}

.btn-secundario:hover, .btn-secondary:hover {
    background: var(--cor-suave);
    border-color: var(--cor-primaria);
}

.btn-voltar {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 0;
    margin-bottom: 14px;
    font-size: .9rem;
    color: var(--cor-primaria);
    font-weight: 600;
    text-decoration: none;
}

.retorno-pagina {
    margin-bottom: 12px;
}

.btn-voltar:hover {
    text-decoration: underline;
}

.btn-success-entrega {
    background: #2e7d32;
    color: white;
}

.btn-success-entrega:hover {
    background: #236327;
}

.btn-danger-excluir {
    background: #fff5f5;
    border-color: #eabcbc;
    color: #ac2929;
}

.btn-danger-excluir:hover {
    background: #ffe6e6;
}

.btn-danger {
    background: #b52626;
    color: white;
}

.btn-danger:hover {
    background: #912020;
}

/* 5. Formulários e mensagens */
.form-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 7px;
    margin-bottom: 20px;
}

.form-group label {
    font-weight: 650;
    font-size: .92rem;
}

.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid var(--cor-controle);
    border-radius: 9px;
    background: white;
    color: var(--cor-texto);
}

.form-group select {
    cursor: pointer;
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.form-group input::placeholder, .form-group textarea::placeholder {
    color: #706778;
    opacity: 1;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px #673ab71c;
}

.form-group small, .campo-ajuda {
    color: var(--cor-secundaria);
    font-size: .85rem;
}

.campo-ajuda {
    margin: 8px 0 14px;
}

.campo-ajuda:empty {
    display: none;
}

.campo-opcional {
    color: var(--cor-secundaria);
    font-size: .85em;
    font-weight: 400;
}

.campo-obrigatorio {
    color: #922323;
}

/* [ACESSIBILIDADE: ERROS] A mensagem textual complementa a cor de erro do campo. */
.form-group .erro-campo {
    color: #922323;
    font-size: .9rem;
}

.form-group [aria-invalid='true'] {
    border-color: #b52626;
    border-width: 2px;
}

.campo-senha {
    position: relative;
    min-width: 0;
}

.campo-senha input {
    padding-inline-end: 6rem;
}

.alternar-senha {
    position: absolute;
    right: 3px;
    top: 1px;
    min-height: 44px;
    padding: 6px 12px;
    background: transparent;
    color: var(--cor-primaria-hover);
    border: 0;
    border-radius: 7px;
    font-size: .85rem;
    font-weight: 600;
}

.alternar-senha:hover {
    background: var(--cor-suave);
}

.instrucoes-formulario {
    margin-bottom: 18px;
}

.form-row-dois {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}

.grupo-cadastro {
    border: 1px solid var(--cor-borda);
    background: #fdfcff;
    border-radius: 12px;
    padding: 20px;
    margin: 26px 0;
    min-width: 0;
}

.grupo-cadastro legend {
    font-weight: 650;
    color: var(--cor-primaria-hover);
    padding: 0 8px;
}

#local-etapas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.numero-sala {
    max-width: 340px;
}

.numero-sala input {
    max-width: 150px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid var(--cor-borda);
}

.foto-acoes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 4px 0;
}

input[type='file'] {
    font-size: .9rem;
    background: #fcfaff;
}

input[type='file']::file-selector-button {
    background: var(--cor-suave);
    color: var(--cor-primaria-hover);
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-weight: 600;
    padding: 6px 10px;
    margin-right: 12px;
    cursor: pointer;
}

.foto-previa, #camera-video {
    display: block;
    width: min(100%, 360px);
    height: 240px;
    max-width: 100%;
    max-height: 35vh;
    object-fit: contain;
    border: 1px solid var(--cor-borda);
    border-radius: 12px;
    background: var(--cor-fundo);
    margin-top: 8px;
}

#camera-painel {
    min-width: 0;
}

/* 6. Sugestões de alunos */
.autocomplete {
    position: relative;
}

.aluno-sugestoes {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    list-style: none;
    max-height: 290px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: white;
    border: 1px solid #c9bcdf;
    border-radius: 11px;
    padding: 5px;
    box-shadow: 0 10px 28px #30203e26;
}

.aluno-opcao {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 10px;
    border-radius: 7px;
    cursor: pointer;
}

.aluno-opcao:hover, .aluno-opcao[aria-selected='true'] {
    background: var(--cor-suave);
}

.aluno-opcao > span:last-child {
    min-width: 0;
}

.aluno-opcao strong, .aluno-opcao small {
    display: block;
}

.aluno-opcao strong {
    font-size: .9rem;
}

.aluno-opcao small {
    font-size: .78rem;
    margin-top: 3px;
}

.aluno-avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    color: var(--cor-primaria);
    background: #ece3fa;
    font-size: .78rem;
    font-weight: 700;
}

.aluno-confirmado {
    color: #256738;
    background: #edf8f0;
    border: 1px solid #b8ddc3;
    border-radius: 8px;
    padding: 10px 12px;
}

.alerta {
    margin: 16px 0;
    padding: 12px 16px;
    border-radius: 9px;
    border: 1px solid;
}

.alerta.sucesso {
    color: #176b36;
    background: #edf8f0;
    border-color: #9bd3aa;
}

.alerta.erro {
    color: #922323;
    background: #fff0f0;
    border-color: #e3aaaa;
}

/* 7. Cadastros experimentais e ajuda */
.opcoes-cadastro {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 24px;
}

.opcao-cadastro {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    border: 1px solid var(--cor-borda);
    border-radius: 12px;
    text-decoration: none;
    color: var(--cor-texto);
    background: #fdfbff;
}

.opcao-cadastro strong {
    color: var(--cor-primaria);
    font-size: 1.3rem;
}

.opcao-cadastro span {
    color: var(--cor-secundaria);
}

.opcao-cadastro:hover {
    border-color: var(--cor-primaria);
    box-shadow: var(--sombra);
}

.faq-container {
    margin-top: 28px;
}

.content .faq-title {
    margin: 24px 0 14px;
    font-size: 1.1rem;
}

.faq-item {
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
}

.faq-item summary {
    background: #faf8fe;
    padding: 16px 18px;
    font-weight: 600;
    cursor: pointer;
}

.faq-item summary:hover, .faq-item[open] summary {
    color: var(--cor-primaria);
}

.faq-item p {
    padding: 18px;
    margin: 0;
    border-top: 1px solid var(--cor-borda);
}

/* 8. Listagens de produtos */
/* [SITE: PESQUISA] Controles essenciais juntos; etapas de local e opções extras aparecem conforme o uso. */
.filtros-produtos {
    margin: 20px 0;
    padding: 16px 18px;
    border: 1px solid var(--cor-borda);
    border-radius: 12px;
    background: #fcfbfe;
}

.filtros-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.content .filtros-cabecalho h2 {
    font-size: 1.05rem;
    margin: 0;
}

.filtros-limpar {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 0 4px 12px;
    font-size: .9rem;
}

.filtros-principais, .filtros-recebimento, .filtros-local-etapas {
    display: grid;
    gap: 12px;
}

.filtros-principais {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.filtros-recebimento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.filtros-coordenacao {
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
}

.filtros-coordenacao .filtros-recebimento {
    grid-column: 1 / -1;
}

.filtro-local {
    border: 0;
    min-width: 0;
    margin-top: 10px;
}

.filtros-local-etapas {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    align-items: start;
}

.filtros-produtos .form-group {
    margin-bottom: 0;
}

.filtros-adicionais {
    flex: 1;
    min-width: 0;
}

.filtros-adicionais summary {
    cursor: pointer;
    padding: 10px 0;
    min-height: 44px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--cor-primaria-hover);
}

.filtros-adicionais:not([open]) .filtros-recolher,
.filtros-adicionais[open] .filtros-expandir {
    display: none;
}

.filtros-rodape {
    display: flex;
    gap: 20px;
    align-items: start;
    justify-content: space-between;
    margin-top: 14px;
}

.filtros-acoes {
    flex-shrink: 0;
}

.resumo-pesquisa {
    scroll-margin-top: 20px;
    margin-bottom: 18px;
}

.content .resumo-pesquisa h2 {
    margin: 0;
    font-size: 1.05rem;
}

.item-recebimento {
    display: block;
    margin-top: 6px;
}

.mensagem-vazia p {
    text-align: center;
}

.item-list, .item-list-admin {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.list-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: var(--cor-secundaria);
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .06em;
    padding: 16px 18px 10px;
}

.item-row-admin-clicavel, .item-row-aluno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid var(--cor-borda);
    border-radius: 11px;
    background: white;
    color: var(--cor-texto);
    text-decoration: none;
}

.item-row-admin-clicavel:hover {
    border-color: var(--cor-primaria);
    background: #fcfaff;
    box-shadow: 0 3px 12px #673ab710;
}

.item-row-admin-clicavel > div:first-child {
    min-width: 0;
}

.item-row-admin-clicavel small {
    color: var(--cor-secundaria);
}

.item-row-admin-clicavel strong {
    font-size: 1.04rem;
}

.status-opaco {
    background: #faf9fc;
}

.status-indicator-admin {
    display: inline-block;
    font-weight: 650;
    font-size: .76rem;
    padding: 5px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.status-disp {
    background: #e8f5e9;
    color: #256b2b;
}

.status-ent {
    background: #eee9f4;
    color: #645576;
}

.status-desc {
    background: #ffebee;
    color: #a92727;
}

.item-local-esq {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.item-local-esq strong {
    color: var(--cor-primaria-hover);
}

.item-local-esq small {
    display: block;
    color: var(--cor-secundaria);
    margin-top: 3px;
}

.item-data-dir {
    font-size: .83rem;
    color: var(--cor-secundaria);
    white-space: nowrap;
    background: var(--cor-suave);
    border-radius: 6px;
    padding: 5px 9px;
}

.mensagem-vazia {
    text-align: center;
    padding: 36px 20px;
    color: var(--cor-secundaria);
    background: #fcfbfe;
    border: 1px dashed #c9bcdf;
    border-radius: 12px;
}

.cta-section {
    text-align: center;
    margin-top: 32px;
    padding: 28px 20px 4px;
    border-top: 1px solid var(--cor-borda);
}

.cta-section h2 {
    margin-bottom: 10px;
}

.cta-section p {
    text-align: center;
    color: var(--cor-secundaria);
}

.btn-whatsapp {
    background: #167b43;
    color: white;
}

.btn-whatsapp:hover {
    background: #116235;
}

/* 9. Detalhes e histórico */
.detalhes-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-top: 20px;
    align-items: start;
}

.detalhes-grid:has(.detalhes-imagem-box) {
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
}

.detalhes-imagem-box {
    width: 100%;
    min-width: 0;
}

.detalhes-imagem-box img {
    display: block;
    width: 100%;
    height: 260px;
    max-height: 40vh;
    object-fit: contain;
    border: 1px solid var(--cor-borda);
    border-radius: 12px;
    background: var(--cor-fundo);
}

.detalhes-info-box {
    min-width: 0;
}

.info-linha {
    margin: 10px 0;
}

.acoes-admin-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.historico-produto {
    margin-top: 32px;
    border-top: 1px solid var(--cor-borda);
    padding-top: 26px;
}

.historico-lista {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 22px;
}

.historico-item {
    display: grid;
    grid-template-columns: 165px minmax(0, 1fr);
    gap: 24px;
    padding: 20px;
    border: 1px solid var(--cor-borda);
    border-radius: 11px;
}

.historico-evento {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    color: var(--cor-secundaria);
    font-size: .84rem;
}

.historico-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 650;
}

.evento-cadastro {
    background: #eee5fb;
    color: #5e35b1;
}

.evento-devolucao {
    background: #e8f5e9;
    color: #256b2b;
}

.evento-descarte {
    background: #ffebee;
    color: #a92727;
}

.historico-conteudo h2 {
    font-size: 1.08rem;
    margin-bottom: 8px;
}

.historico-conteudo h2 a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
}

.historico-conteudo h2 a:hover {
    text-decoration: underline;
}

.historico-conteudo p {
    font-size: .9rem;
    margin: 5px 0;
}

/* 10. Janelas de confirmação */
.modal-dialog {
    width: calc(100% - 32px);
    max-width: 600px;
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 16px;
    color: var(--cor-texto);
    background: white;
    box-shadow: 0 15px 50px #0003;
}

.modal-dialog::backdrop {
    background: #1b122899;
    backdrop-filter: blur(3px);
}

.modal-container {
    width: 100%;
    background: white;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: white;
    background: var(--cor-primaria);
    padding: 16px 24px;
}

.modal-header h2 {
    font-size: 1.25rem;
}

.header-success {
    background: #2e7d32;
}

.header-danger {
    background: #b52626;
}

.btn-fechar-modal {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: transparent;
    color: white;
    border: 0;
    border-radius: 8px;
    font-size: 1.8rem;
}

.modal-body {
    padding: 24px;
}

.modal-body > p {
    color: var(--cor-secundaria);
    margin-bottom: 20px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid var(--cor-borda);
}

/* 11. Layout responsivo */
@media (max-width: 1100px) {
    .navbar {
        gap: 12px;
        padding: 12px 24px;
    }
    .nav-menu {
        grid-column: 1 / -1;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 12px 0 4px;
        border-top: 1px solid #ffffff33;
    }
    .nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
    }
    .nav-links a {
        display: flex;
    }
    .perfil {
        border-left: 0;
        border-top: 1px solid #ffffff33;
        padding: 14px 0 0;
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (max-width: 700px) {
    .filtros-produtos {
        padding: 16px 12px;
    }
    .filtros-principais, .filtros-recebimento, .filtros-local-etapas {
        grid-template-columns: minmax(0, 1fr);
    }
    .filtros-rodape {
        flex-wrap: wrap;
        gap: 10px;
    }
    .filtros-adicionais[open] {
        flex-basis: 100%;
    }
    .filtros-adicionais[open] + .filtros-acoes,
    .filtros-adicionais[open] + .filtros-acoes .btn-primary {
        width: 100%;
    }
    .navbar {
        padding: 10px 16px;
    }
    .logo-projeto {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
    }
    .logo-texto {
        min-width: 0;
        font-size: 1.08rem;
    }
    .logo-texto small {
        font-size: .66rem;
    }
    .container, .container-admin {
        margin: 20px auto 32px;
        padding: 0 14px;
    }
    .content {
        padding: 22px 18px;
        border-radius: 12px;
    }
    .dashboard-header {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        margin-bottom: 22px;
    }
    .dashboard-acoes, .dashboard-acoes .btn-primary {
        width: 100%;
    }
    .form-row-dois, .opcoes-cadastro, #local-etapas {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    .opcoes-cadastro {
        gap: 14px;
    }
    .grupo-cadastro {
        padding: 16px 12px;
    }
    .form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 10px;
    }
    .form-group input, .form-group select, .form-group textarea {
        font-size: 16px;
    }
    input[type='file'] {
        padding: 8px;
    }
    input[type='file']::file-selector-button {
        display: block;
        margin: 0 0 6px;
    }
    .foto-acoes > button {
        flex: 1;
    }
    .foto-previa, #camera-video {
        height: 200px;
    }
    .list-header {
        display: none;
    }
    .item-row-aluno, .item-row-admin-clicavel {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }
    .item-data-dir {
        white-space: normal;
    }
    .item-data-dir::before {
        content: 'Recebido em ';
    }
    .cta-section {
        padding: 24px 0 0;
    }
    .btn-whatsapp {
        width: 100%;
    }
    .detalhes-grid:has(.detalhes-imagem-box), .historico-item {
        grid-template-columns: minmax(0, 1fr);
    }
    .detalhes-imagem-box {
        max-width: 360px;
        margin-inline: auto;
    }
    .detalhes-imagem-box img {
        height: 220px;
    }
    .historico-item {
        padding: 16px;
        gap: 14px;
    }
    .historico-evento {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }
    .acoes-admin-container {
        flex-direction: column;
    }
    .modal-header {
        padding: 12px 16px;
    }
    .modal-body {
        padding: 18px 16px;
    }
    .modal-footer {
        flex-direction: column-reverse;
    }
}

/* 12. Movimento e preferências de acessibilidade */
/* [ACESSIBILIDADE: MOVIMENTO] Só anima quando o usuário permite movimento. */
@media (prefers-reduced-motion: no-preference) {
    .content {
        animation: entrada-suave var(--tempo-entrada) var(--curva-suave);
    }
    .aluno-sugestoes, .modal-dialog[open], .faq-item[open] > p {
        animation: entrada-suave var(--tempo-curto) var(--curva-suave);
    }
    .modal-dialog[open]::backdrop {
        animation: aparecer var(--tempo-curto) ease-out;
    }
    .nav-links a, .perfil a, button, .debug-voltar, .btn-primary, .btn-secundario,
    .item-row-admin-clicavel, .opcao-cadastro, .faq-item summary, .aluno-opcao {
        transition: background-color var(--tempo-curto) ease, color var(--tempo-curto) ease, border-color var(--tempo-curto) ease, box-shadow var(--tempo-curto) ease;
    }
    .form-group input, .form-group select, .form-group textarea {
        transition: border-color var(--tempo-curto) ease, box-shadow var(--tempo-curto) ease;
    }
    .menu-icone span {
        transition: transform var(--tempo-curto) ease, opacity var(--tempo-curto) ease;
    }
    /* Entradas curtas, sem mudar as dimensões ou atrasar o uso dos controles. */
    .item-row-aluno, .item-row-admin-clicavel, .historico-item, .opcao-cadastro {
        animation: entrada-suave 360ms var(--curva-suave) backwards;
    }
    :is(.item-row-aluno, .item-row-admin-clicavel, .historico-item, .opcao-cadastro):nth-child(2) {
        animation-delay: 35ms;
    }
    :is(.item-row-aluno, .item-row-admin-clicavel, .historico-item):nth-child(3) {
        animation-delay: 70ms;
    }
    :is(.item-row-aluno, .item-row-admin-clicavel, .historico-item):nth-child(n + 4) {
        animation-delay: 105ms;
    }
    .filtros-adicionais[open] .filtro-local, #camera-painel:not([hidden]),
    .foto-previa:not([hidden]), .alerta {
        animation: aparecer 240ms ease-out;
    }
    :is(.btn-primary, .btn-secundario, .btn-success-entrega, .btn-danger-excluir,
        .btn-danger, .btn-secondary, .btn-whatsapp, .menu-toggle, .nav-conta,
        .opcao-cadastro, .item-row-admin-clicavel) {
        transition: transform var(--tempo-curto) var(--curva-suave),
            background-color var(--tempo-curto) ease, color var(--tempo-curto) ease,
            border-color var(--tempo-curto) ease, box-shadow var(--tempo-curto) ease;
    }
    /* Elevação apenas com ponteiro preciso: evita estados hover presos no toque. */
    @media (hover: hover) and (pointer: fine) {
        :is(.btn-primary, .btn-secundario, .btn-success-entrega, .btn-danger-excluir,
            .btn-danger, .btn-secondary, .btn-whatsapp, .opcao-cadastro):hover {
            transform: translateY(-2px);
        }
        .item-row-admin-clicavel:hover {
            transform: translateX(3px);
        }
    }
    :is(.btn-primary, .btn-secundario, .btn-success-entrega, .btn-danger-excluir,
        .btn-danger, .btn-secondary, .btn-whatsapp, .menu-toggle, .nav-conta):active {
        transform: scale(.98);
    }
    /* Quem navega pelo teclado nunca precisa esperar uma animação para ver o foco. */
    :is(.content, .item-row-admin-clicavel, .historico-item, .opcao-cadastro):focus-within {
        animation: none;
    }
    @media (max-width: 1100px) {
        .nav-menu {
            animation: entrada-suave var(--tempo-curto) var(--curva-suave);
        }
    }
}

.menu-toggle[aria-expanded='true'] .menu-icone span:first-child {
    transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded='true'] .menu-icone span:nth-child(2) {
    opacity: 0;
}

.menu-toggle[aria-expanded='true'] .menu-icone span:last-child {
    transform: translateY(-6px) rotate(-45deg);
}

@keyframes aparecer {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes entrada-suave {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* [ACESSIBILIDADE: MOVIMENTO] A preferência do sistema também desativa as transições. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* [ACESSIBILIDADE: CONTRASTE] Preserva bordas e foco com a paleta de alto contraste do sistema. */
@media (forced-colors: active) {
    .content, .modal-dialog, .item-row-admin-clicavel, .admin-badge, .historico-badge {
        border: 1px solid CanvasText;
    }
    :focus-visible, .site-header :focus-visible, .modal-header :focus-visible {
        outline: 3px solid Highlight;
    }
    .form-group [aria-invalid='true'] {
        border: 2px dashed LinkText;
    }
}