/* Portal de admissão: feito para o celular primeiro. Sem fontes externas (CSP). */
:root {
   --marinho: #141a3a;
   --azul: #2f4aa1;
   --azul-claro: #e8eefc;
   --fundo: #f4f6fb;
   --borda: #d5dbe7;
   --texto: #1c2233;
   --texto-2: #5a6376;
   --ok: #157a3d;
   --ok-fundo: #e3f6ea;
   --alerta: #8a5300;
   --alerta-fundo: #fff4d6;
   --erro: #b3261e;
   --erro-fundo: #fde8e6;
   --zap: #16a34a;
   color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* vence o display dos campos */
html { -webkit-text-size-adjust: 100%; }
body {
   margin: 0; background: var(--fundo); color: var(--texto);
   font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
/* Topo: marca no centro e o prazo em destaque logo abaixo (é o que o candidato mais precisa ver). */
.topo {
   display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 16px 12px; background: #fff;
   border-bottom: 1px solid var(--borda); text-align: center;
}
.topo img { width: 70px; height: auto; }
.topo strong { color: var(--marinho); font-size: 18px; letter-spacing: .02em; }
.prazo {
   display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 5px 14px; border-radius: 999px;
   background: var(--azul-claro); color: var(--marinho); font-size: 15px; font-weight: 700;
}
.prazo.urgente { background: var(--erro-fundo); color: var(--erro); }
main { max-width: 640px; margin: 0 auto; padding: 16px 16px 96px; outline: none; }
h1 { font-size: 22px; line-height: 1.25; margin: 4px 0 8px; color: var(--marinho); }
h2 { font-size: 18px; margin: 18px 0 8px; color: var(--marinho); }
p { margin: 0 0 12px; }
.suave { color: var(--texto-2); font-size: 14px; }
.carregando { text-align: center; color: var(--texto-2); padding: 40px 0; }
.cartao { background: #fff; border: 1px solid var(--borda); border-radius: 14px; padding: 16px; margin: 0 0 14px; }

.passos { display: flex; gap: 4px; margin: 0 0 14px; }
.passos span { flex: 1; height: 5px; border-radius: 3px; background: var(--borda); }
.passos span.feito { background: var(--azul); }

label.campo { display: block; margin: 0 0 14px; }
label.campo > span { display: block; font-weight: 600; margin-bottom: 4px; }
.obrig { color: var(--erro); }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="password"], select {
   width: 100%; height: 48px; padding: 0 12px; font-size: 16px; color: inherit;
   border: 1px solid #b9c2d3; border-radius: 10px; background: #fff;
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, main:focus-visible {
   outline: 3px solid #8fb0ff; outline-offset: 2px;
}
.invalido input, .invalido select { border-color: var(--erro); }
.erro-campo { color: var(--erro); font-size: 14px; margin-top: 4px; }
.opcoes { display: flex; gap: 8px; flex-wrap: wrap; }
.opcoes label { flex: 1 1 120px; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px;
   border: 1px solid #b9c2d3; border-radius: 10px; background: #fff; }
.opcoes input { width: 20px; height: 20px; }

button, .botao {
   display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
   border-radius: 12px; border: 1px solid var(--borda); background: #fff; color: var(--texto);
   font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none;
}
button[disabled] { opacity: .55; cursor: not-allowed; }
button.esperando { opacity: .6; cursor: progress; }
.primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.largo { width: 100%; }
.zap { background: var(--zap); border-color: var(--zap); color: #fff; }
.perigo { color: var(--erro); }
.barra-acoes { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--borda);
   padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 10px; justify-content: center; z-index: 5; }
.barra-acoes > * { flex: 1; max-width: 300px; }

.aviso { border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; font-size: 15px; }
.aviso ul { margin: 6px 0 0 18px; padding: 0; }
.aviso-erro { background: var(--erro-fundo); color: var(--erro); }
.aviso-ok { background: var(--ok-fundo); color: var(--ok); }
.aviso-alerta { background: var(--alerta-fundo); color: var(--alerta); }
.aviso-info { background: var(--azul-claro); color: var(--marinho); }

.doc { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
.doc h3 { font-size: 16px; margin: 0; }
.doc .estado { font-size: 13px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.estado-ok { background: var(--ok-fundo); color: var(--ok); }
.estado-falta { background: var(--alerta-fundo); color: var(--alerta); }
.doc .corpo { grid-column: 1 / -1; }
.doc input[type="file"] { display: none; }

.filho { border: 1px dashed var(--borda); border-radius: 12px; padding: 12px; margin: 0 0 10px; background: #fafbfe; }
.checar { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.checar input { width: 20px; height: 20px; }

.resumo { width: 100%; border-collapse: collapse; font-size: 15px; }
.resumo td { padding: 6px 0; border-bottom: 1px solid #eef1f6; vertical-align: top; }
.resumo td:first-child { color: var(--texto-2); width: 45%; padding-right: 10px; }
.centro { text-align: center; }
.icone-grande { font-size: 48px; line-height: 1; margin: 10px 0; }

/* ---- início, fila de documentos e avisos (27/09/2026) ---- */
.grande { min-height: 56px; font-size: 18px; margin-top: 6px; }
.sem-margem { margin-top: 0; }
.pequeno { font-size: 13px; }
.lista-docs, .lista-regras { margin: 0 0 6px; padding-left: 20px; }
.lista-docs li, .lista-regras li { margin: 4px 0; }
.lista-regras li::marker { color: var(--azul); }
.doc .opcoes button { flex: 1 1 140px; }
.estado-analise { background: var(--azul-claro); color: var(--azul); }
.estado-alerta { background: var(--alerta-fundo); color: var(--alerta); }
.doc-com-aviso { border: 2px solid #e8b44a; }
.cartao-aviso { border: 2px solid #e8b44a; background: #fffaf0; }
.linha-aviso td { background: #fffaf0; }
.avisos-revisao { margin: 4px 0 0; padding-left: 18px; color: var(--alerta); font-size: 14px; }
@media (max-width: 480px) {
   main { padding: 12px 12px 96px; }
   .cartao { padding: 14px; border-radius: 12px; }
   h1 { font-size: 20px; }
   .resumo td:first-child { width: 42%; }
}