/* Passeios · Anglo — CSS com tokens + BEM, mobile-first, sem framework.
 * Direção: institucional-operacional. Marca Anglo: azul da logo (#00508b) para ação, marinho na lateral,
 * vermelho só como detalhe de marca (nunca botão: não pode ser confundido com erro).
 * Contrastes medidos (WCAG 2.2 AA) em docs/UI.md — trocar cor aqui obriga a medir de novo. */

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* marca */
    --cor-primaria: #00508b;          /* 8.33:1 com branco */
    --cor-primaria-hover: #003e6c;
    --cor-primaria-suave: #e6f0f8;    /* primária sobre ela: 7.22:1 */
    --cor-marca-acento: #c8102e;      /* só decorativo / marca */
    --cor-marca-dourado: #e2c26a;     /* sobre marinho: 9.63:1 */

    /* neutros com tinta azul */
    --cor-fundo: #f4f6fa;
    --cor-superficie: #ffffff;
    --cor-superficie-2: #f8fafc;
    --cor-texto: #16213a;             /* 14.79:1 sobre fundo */
    --cor-texto-suave: #4d5b70;       /* 6.89:1 sobre branco · 6.37:1 sobre fundo */
    --cor-borda: #dde3ec;             /* divisória decorativa */
    --cor-borda-controle: #7a889e;    /* contorno de campo: 3.59:1 */
    --cor-foco: #b07800;              /* 3.8:1 sobre branco */

    /* lateral (escura nos dois temas: tokens próprios) */
    --lateral: #0c1d3f;
    --lateral-texto: #c9d4e6;         /* 11.12:1 */
    --lateral-rotulo: #8ea0bd;        /* 6.26:1 */
    --lateral-ativo-fundo: rgba(255, 255, 255, .09);
    --lateral-foco: #d99a00;          /* 6.79:1 sobre marinho */
    --lateral-largura: 248px;

    /* estados (medidos) */
    --cor-ok: #146c2e;  --cor-ok-fundo: #e6f4ea;
    --cor-alerta: #8a5a00; --cor-alerta-fundo: #fff4d6;
    --cor-erro: #b3261e; --cor-erro-fundo: #fdecea;

    /* tipografia — escala 1.25 */
    --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fonte-titulo: "Plus Jakarta Sans", var(--fonte);
    --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
    --t-12: .75rem; --t-14: .875rem; --t-16: 1rem; --t-20: 1.25rem; --t-25: 1.5625rem; --t-31: 1.9375rem;

    /* espaço 4/8 */
    --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px;
    --espaco: var(--e-4);

    --raio: 8px;
    --raio-grande: 12px;
    --sombra-flutuante: 0 12px 32px rgba(12, 29, 63, .22);
    --transicao: 160ms ease-out;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--t-16)/1.55 var(--fonte); color: var(--cor-texto); background: var(--cor-fundo); }
h1, h2, h3, .titulo, .subtitulo { font-family: var(--fonte-titulo); letter-spacing: -.015em; }
a { color: var(--cor-primaria); text-underline-offset: 3px; }
a:hover { color: var(--cor-primaria-hover); }
:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 2px; }
code { font-family: var(--mono); font-size: .9em; background: var(--cor-primaria-suave); color: var(--cor-primaria-hover); padding: 1px 5px; border-radius: 4px; }
small { font-size: var(--t-14); }
.icone { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.pular { position: absolute; left: -9999px; }
.pular:focus { left: var(--e-4); top: var(--e-4); background: var(--cor-superficie); padding: var(--e-2) var(--e-3); border-radius: var(--raio); z-index: 50; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.texto-suave { color: var(--cor-texto-suave); }
.texto-pequeno { font-size: var(--t-14); }
.vazio { padding: var(--e-6) var(--e-5); background: var(--cor-superficie); border: 1px dashed var(--cor-borda-controle); border-radius: var(--raio-grande); color: var(--cor-texto-suave); text-align: center; }

/* ---------- casca do painel: lateral + conteúdo ---------- */
.painel { min-height: 100vh; }
.lateral {
    position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(84vw, var(--lateral-largura));
    display: flex; flex-direction: column; gap: var(--e-5); padding: var(--e-5) var(--e-3);
    background: var(--lateral); color: var(--lateral-texto);
    transform: translateX(-100%); transition: transform var(--transicao); visibility: hidden;
}
.lateral :focus-visible { outline-color: var(--lateral-foco); }
.menu-aberto .lateral { transform: none; visibility: visible; box-shadow: var(--sombra-flutuante); }
.lateral__marca { display: flex; align-items: center; gap: var(--e-3); padding: 0 var(--e-2); color: #fff; text-decoration: none; }
.lateral__marca img { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.lateral__marca strong { display: block; font-family: var(--fonte-titulo); font-size: var(--t-16); line-height: 1.2; }
.lateral__marca > span > span { display: block; font-size: var(--t-12); color: var(--lateral-rotulo); letter-spacing: .06em; text-transform: uppercase; }
.lateral__marca:hover { color: #fff; }
.lateral__nav { display: grid; gap: 2px; }
.lateral__secao { margin: var(--e-4) var(--e-3) var(--e-1); font-size: var(--t-12); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lateral-rotulo); }
.lateral__link {
    position: relative; display: flex; align-items: center; gap: var(--e-3); min-height: 44px; padding: var(--e-2) var(--e-3);
    border-radius: var(--raio); color: var(--lateral-texto); text-decoration: none; font-weight: 600;
    transition: background var(--transicao), color var(--transicao);
}
.lateral__link:hover { background: var(--lateral-ativo-fundo); color: #fff; }
.lateral__link[aria-current="page"] { background: var(--lateral-ativo-fundo); color: #fff; }
.lateral__link[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--cor-marca-acento); }
.lateral__rodape { margin-top: auto; display: grid; gap: var(--e-2); padding-top: var(--e-4); border-top: 1px solid rgba(255, 255, 255, .1); }
.lateral__usuario { margin: 0; padding: 0 var(--e-3); font-size: var(--t-14); }
.lateral__usuario strong { display: block; color: #fff; }
.lateral__usuario span { color: var(--lateral-rotulo); text-transform: capitalize; }
.lateral__sair { margin: 0; }
.lateral__sair .lateral__link { width: 100%; background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.veu { position: fixed; inset: 0; z-index: 30; background: rgba(12, 29, 63, .45); opacity: 0; visibility: hidden; transition: opacity var(--transicao); }
.menu-aberto .veu { opacity: 1; visibility: visible; }

.barra-topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-4); background: var(--lateral); color: #fff; }
.barra-topo__botao { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: calc(var(--e-2) * -1); border: 0; border-radius: var(--raio); background: none; color: #fff; cursor: pointer; }
.barra-topo__botao:hover { background: var(--lateral-ativo-fundo); }
.barra-topo__botao:focus-visible { outline-color: var(--lateral-foco); }
.barra-topo__marca { display: flex; align-items: center; gap: var(--e-2); color: #fff; text-decoration: none; font-family: var(--fonte-titulo); font-weight: 700; }
.barra-topo__marca img { width: 32px; height: 32px; border-radius: 50%; }

.pagina { max-width: 1160px; margin: 0 auto; padding: var(--e-5) var(--e-4) var(--e-7); }
.cabecalho { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-4); align-items: flex-end; justify-content: space-between; margin-bottom: var(--e-5); }
.cabecalho > div { min-width: 0; }
.titulo { font-size: var(--t-25); font-weight: 800; line-height: 1.15; margin: 0 0 var(--e-2); }
.subtitulo { font-size: var(--t-20); font-weight: 700; line-height: 1.25; margin: 0 0 var(--e-3); }
.cabecalho .titulo { margin: 0; }
.pagina > .titulo { margin-bottom: var(--e-5); }
.cabecalho p { margin: var(--e-1) 0 0; }

/* ---------- botões: default · hover · foco · ativo · desabilitado · carregando ---------- */
.botao {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 44px; padding: var(--e-2) var(--e-4);
    font: inherit; font-weight: 700; line-height: 1.2; color: var(--cor-primaria); background: var(--cor-superficie);
    border: 1px solid var(--cor-borda-controle); border-radius: var(--raio); cursor: pointer; text-decoration: none;
    transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.botao:hover { background: var(--cor-primaria-suave); border-color: var(--cor-primaria); color: var(--cor-primaria-hover); }
.botao:active { transform: translateY(1px); }
.botao:disabled, .botao[aria-disabled="true"] { color: #6b7686; border-color: #b6bfcc; background: #eef1f5; cursor: not-allowed; transform: none; }
.botao--primario { color: #fff; background: var(--cor-primaria); border-color: var(--cor-primaria); }
.botao--primario:hover { color: #fff; background: var(--cor-primaria-hover); border-color: var(--cor-primaria-hover); }
.botao--largo { width: 100%; }
.botao--pequeno { min-height: 36px; padding: var(--e-1) var(--e-3); font-size: var(--t-14); }
.botao--link { border: 0; background: none; padding: 0; min-height: 0; text-decoration: underline; font-weight: 600; }
.botao--link:hover { background: none; }
.botao[data-carregando="1"] { cursor: progress; }
.botao[data-carregando="1"]::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- formulários ---------- */
.form { display: grid; gap: var(--e-4); }
.form--largo { max-width: 860px; }
.form--linha { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: flex-end; }
.grupo { display: grid; gap: var(--e-4); margin: 0; padding: var(--e-5); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); }
.grupo legend { float: left; width: 100%; padding: 0 0 var(--e-1); margin-bottom: var(--e-2); font-family: var(--fonte-titulo); font-size: var(--t-20); font-weight: 700; letter-spacing: -.01em; border-bottom: 1px solid var(--cor-borda); padding-bottom: var(--e-3); }
.grupo legend + * { clear: both; }
.grupo__nota { margin: 0; padding: var(--e-3) var(--e-4); background: var(--cor-primaria-suave); border-radius: var(--raio); color: var(--cor-texto); font-size: var(--t-14); overflow-wrap: anywhere; }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo__rotulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-weight: 600; font-size: var(--t-14); }
.campo__ajuda { margin: 0; font-size: var(--t-14); color: var(--cor-texto-suave); }
.campo__entrada {
    width: 100%; min-height: 44px; padding: 10px var(--e-3); font: inherit; color: var(--cor-texto); background: var(--cor-superficie);
    border: 1px solid var(--cor-borda-controle); border-radius: var(--raio); transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo__entrada:hover { border-color: var(--cor-texto-suave); }
.campo__entrada:focus-visible { outline: none; border-color: var(--cor-primaria); box-shadow: 0 0 0 3px rgba(0, 80, 139, .25), 0 0 0 1px var(--cor-primaria); }
.campo__entrada::placeholder { color: #6b778a; }
.campo__entrada:disabled { background: #eef1f5; cursor: not-allowed; }
.campo__entrada[aria-invalid="true"] { border: 2px solid var(--cor-erro); }
.campo__entrada--mono { font-family: var(--mono); font-size: var(--t-14); }
select.campo__entrada { padding-right: var(--e-6); appearance: none; background: var(--cor-superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%234d5b70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center; }
textarea.campo__entrada { line-height: 1.5; resize: vertical; }
input[type="file"].campo__entrada { padding: 5px; cursor: pointer; }
input[type="file"].campo__entrada::file-selector-button { margin-right: var(--e-3); padding: 7px var(--e-3); font: inherit; font-weight: 700; color: var(--cor-primaria); background: var(--cor-primaria-suave); border: 0; border-radius: 6px; cursor: pointer; }
input[type="file"].campo__entrada:hover::file-selector-button { background: #d3e4f3; }
.campo__erro { display: flex; gap: 6px; color: var(--cor-erro); margin: 0; font-size: var(--t-14); font-weight: 600; }
.campo__erro::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--cor-erro); color: #fff; font-size: var(--t-12); font-weight: 800; margin-top: 1px; }
.grade-3 { display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr); }
.lista-marcar { display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.marcar { display: flex; gap: var(--e-3); align-items: flex-start; min-height: 44px; padding: var(--e-3) 0; cursor: pointer; font-weight: 600; }
.marcar input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--cor-primaria); cursor: pointer; }
.lista-marcar .marcar { padding: var(--e-3); border: 1px solid var(--cor-borda); border-radius: var(--raio); font-weight: 500; }
.lista-marcar .marcar:has(input:checked) { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); }
.marcar--grande { font-weight: 700; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.acoes--pilha { flex-direction: column; }
.filtros { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: flex-end; margin: var(--e-5) 0 var(--e-4); padding: var(--e-4); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); }
.filtros .campo { flex: 1 1 160px; }
.rodape-acao { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: var(--e-3); padding: var(--e-3) 0; background: linear-gradient(to top, var(--cor-fundo) 70%, rgba(244, 246, 250, 0)); }
.rodape-acao .botao { min-width: 200px; }

/* ---------- avisos ---------- */
.aviso { padding: var(--e-3) var(--e-4); border-radius: var(--raio); margin-bottom: var(--e-4); border: 1px solid; border-left-width: 4px; font-weight: 500; }
.aviso--ok { background: var(--cor-ok-fundo); border-color: #b9dcc3; border-left-color: var(--cor-ok); color: #0f4d22; }
.aviso--erro { background: var(--cor-erro-fundo); border-color: #f2c1bc; border-left-color: var(--cor-erro); color: #8c1d17; }
.aviso--alerta { background: var(--cor-alerta-fundo); border-color: #f0d68a; border-left-color: var(--cor-alerta); color: #6b4600; }
.aviso a { color: inherit; font-weight: 700; }

/* ---------- tabelas ---------- */
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); background: var(--cor-superficie); }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-14); }
.tabela th, .tabela td { text-align: left; padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--cor-borda); vertical-align: middle; }
.tabela thead th { position: sticky; top: 0; background: var(--cor-superficie-2); font-size: var(--t-12); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cor-texto-suave); white-space: nowrap; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--cor-superficie-2); }
.tabela td a { font-weight: 700; text-decoration: none; }
.tabela td a:hover { text-decoration: underline; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- selos: texto sempre presente (cor não é o único sinal) ---------- */
.selo { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: var(--t-12); font-weight: 700; line-height: 1.6; background: #eef1f5; color: var(--cor-texto); white-space: nowrap; }
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.selo--pago, .selo--autorizado, .selo--aberto, .selo--enviada { background: var(--cor-ok-fundo); color: var(--cor-ok); }
.selo--pendente, .selo--aguardando, .selo--rascunho, .selo--incerta { background: var(--cor-alerta-fundo); color: var(--cor-alerta); }
.selo--recusado, .selo--cancelado, .selo--falhou { background: var(--cor-erro-fundo); color: var(--cor-erro); }

/* ---------- indicadores ---------- */
.indicadores { display: grid; gap: var(--e-3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--e-4); }
.indicador { display: grid; gap: 2px; padding: var(--e-4); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); }
.indicador__valor { order: 2; font-family: var(--fonte-titulo); font-size: var(--t-31); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.indicador__rotulo { order: 1; color: var(--cor-texto-suave); font-size: var(--t-14); font-weight: 600; }
.indicador--ok { border-top: 3px solid var(--cor-ok); }
.indicador--ok .indicador__valor { color: var(--cor-ok); }
.indicador--alerta { border-top: 3px solid var(--cor-alerta); }
.indicador--alerta .indicador__valor { color: var(--cor-alerta); }
.barra { display: flex; height: 10px; background: #e3e8ef; border-radius: 999px; overflow: hidden; margin-bottom: var(--e-2); }
.barra__pago { background: var(--cor-ok); }
.barra__autorizado { background: #6fbf73; }
.acoes-bloco { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: flex-end; margin: var(--e-5) 0; padding: var(--e-4); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); }
.acoes-bloco form { margin: 0; }
.acoes-bloco__linha { display: flex; gap: var(--e-2); }

/* ---------- cartões ---------- */
.cartao { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); padding: var(--e-5); margin-bottom: var(--e-4); }
.cartao > :last-child { margin-bottom: 0; }
.cartao--centro { text-align: center; }
.cartao--ok { border-color: #b9dcc3; background: var(--cor-ok-fundo); }
.cartao--neutro { background: var(--cor-superficie-2); }

/* ---------- usuários ---------- */
.grade-2 { display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr); }
.opcoes { display: grid; gap: var(--e-2); grid-template-columns: minmax(0, 1fr); }
.opcao { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3) var(--e-4); border: 1px solid var(--cor-borda); border-radius: var(--raio); cursor: pointer; }
.opcao:has(input:checked) { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); }
.opcao input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--cor-primaria); }
.opcao span { display: grid; gap: 2px; }
.secao-titulo { margin-top: var(--e-6); }
.link-senha { border-color: var(--cor-primaria); border-left: 4px solid var(--cor-primaria); }
.link-senha__linha { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.link-senha__linha .campo__entrada { flex: 1 1 280px; }
.form-linha-compacta { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; margin: 0; }
.form-linha-compacta .campo__entrada { width: auto; min-height: 36px; padding-top: 4px; padding-bottom: 4px; font-size: var(--t-14); }
.linha--inativa td { color: var(--cor-texto-suave); background: var(--cor-superficie-2); }
@media (min-width: 720px) {
    .grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .opcoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- primeiros passos (painel vazio) ---------- */
.inicio { padding: var(--e-6); }
.passos { list-style: none; margin: var(--e-5) 0 0; padding: 0; display: grid; gap: var(--e-3); }
.passos__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-3) var(--e-4); align-items: center; padding: var(--e-4); border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); }
.passos__item > .botao { grid-column: 1 / -1; }
.passos__numero { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cor-primaria-suave); color: var(--cor-primaria); font-family: var(--fonte-titulo); font-weight: 800; }
.passos__texto { display: grid; gap: 2px; }
.passos__texto strong { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-family: var(--fonte-titulo); }
.passos__item--feito { background: var(--cor-superficie-2); }
.passos__item--feito .passos__numero { background: var(--cor-ok); color: #fff; }
@media (min-width: 720px) {
    .passos__item { grid-template-columns: auto minmax(0, 1fr) auto; }
    .passos__item > .botao { grid-column: auto; min-width: 180px; }
}

/* ---------- embarque ---------- */
.embarque { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-2); }
.embarque__item { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: space-between; align-items: center; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: var(--e-3) var(--e-4); }
.embarque__item--ok { background: var(--cor-ok-fundo); border-color: #b9dcc3; }
.embarque__nome { font-weight: 700; min-width: 0; }

/* ---------- login (padrão da casa: marca à esquerda, formulário à direita) ---------- */
.login { background: var(--cor-superficie); }
.login__grade { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); }
.login__lado { display: none; }
.login__form { display: grid; place-items: center; padding: var(--e-6) var(--e-4); }
.login__form .form { width: 100%; max-width: 400px; gap: var(--e-4); }
.login__topo-movel { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-3); }
.login__topo-movel img { width: 48px; height: 48px; border-radius: 50%; }
.login__topo-movel strong { font-family: var(--fonte-titulo); font-size: var(--t-16); }
.login__form .titulo { font-size: var(--t-31); margin: 0; }
.login__subtitulo { margin: calc(var(--e-2) * -1) 0 var(--e-2); color: var(--cor-texto-suave); }
.login__rodape { margin: var(--e-2) 0 0; text-align: center; font-size: var(--t-14); color: var(--cor-texto-suave); }
.campo__caixa { position: relative; }
.campo__caixa > .icone { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--cor-texto-suave); pointer-events: none; }
.campo__caixa > .campo__entrada { padding-left: 42px; }
.campo__caixa > .campo__entrada--com-olho { padding-right: 52px; }
.campo__olho { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: inline-grid; place-items: center; width: 44px; height: 40px; border: 0; border-radius: var(--raio); background: none; color: var(--cor-texto-suave); cursor: pointer; }
.campo__olho:hover { color: var(--cor-primaria); background: var(--cor-primaria-suave); }
.login__slogan { font-family: var(--fonte-titulo); font-size: var(--t-31); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; max-width: 16ch; margin: 0; color: #fff; }
.login__acento { width: 56px; height: 4px; border-radius: 4px; background: var(--cor-marca-acento); }
.login__apoio { margin: 0; max-width: 40ch; color: var(--lateral-texto); font-size: var(--t-16); }
.login__recursos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.login__recursos li { display: flex; align-items: center; gap: var(--e-3); color: #fff; font-weight: 600; }
.login__recursos .login__chip { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--cor-marca-dourado); }
.login__marca { display: flex; align-items: center; gap: var(--e-3); color: #fff; }
.login__marca img { width: 56px; height: 56px; border-radius: 50%; }
.login__marca strong { display: block; font-family: var(--fonte-titulo); font-size: var(--t-20); }
.login__marca > span > span { display: block; font-size: var(--t-12); letter-spacing: .08em; text-transform: uppercase; color: var(--lateral-rotulo); }

/* ---------- público (responsável, celular) ---------- */
.publico { background: var(--cor-fundo); }
.publico__topo { display: flex; justify-content: center; padding: var(--e-3) var(--e-4); background: var(--lateral); border-bottom: 3px solid var(--cor-marca-acento); }
.publico__marca { display: flex; align-items: center; gap: var(--e-3); color: #fff; }
.publico__marca strong { font-family: var(--fonte-titulo); font-size: var(--t-16); }
.publico__logo { width: 44px; height: 44px; border-radius: 50%; }
.publico__corpo { max-width: 560px; margin: 0 auto; padding: var(--e-5) var(--e-4); }
.publico__rodape { text-align: center; color: var(--cor-texto-suave); padding: var(--e-4) var(--e-4) var(--e-6); font-size: var(--t-14); }
.dados { display: grid; gap: 0; margin: var(--e-4) 0 0; border-top: 1px solid var(--cor-borda); }
.dados div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--e-3); padding: var(--e-3) 0; border-bottom: 1px solid var(--cor-borda); }
.dados dt { color: var(--cor-texto-suave); font-size: var(--t-14); }
.dados dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.termo { max-height: 260px; overflow-y: auto; padding: var(--e-4); background: var(--cor-superficie-2); border: 1px solid var(--cor-borda); border-radius: var(--raio); font-size: var(--t-14); line-height: 1.6; }
.pix__qr { display: block; margin: var(--e-4) auto; width: 240px; height: 240px; image-rendering: pixelated; background: #fff; padding: var(--e-2); border: 1px solid var(--cor-borda); border-radius: var(--raio); }
.pix__status { font-weight: 700; }
.pix__status--pago { color: var(--cor-ok); }

/* ---------- telas maiores ---------- */
@media (min-width: 720px) {
    .grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .indicadores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pagina { padding: var(--e-6) var(--e-6) var(--e-7); }
    .titulo { font-size: var(--t-31); }
}

@media (min-width: 1024px) {
    .barra-topo, .veu { display: none; }
    .lateral { transform: none; visibility: visible; width: var(--lateral-largura); }
    .menu-aberto .lateral { box-shadow: none; }
    .painel__conteudo { margin-left: var(--lateral-largura); }
    .indicadores { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .login__grade { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
    .login__lado {
        position: relative; overflow: hidden; display: grid; align-content: space-between; gap: var(--e-6); padding: var(--e-7);
        background: radial-gradient(circle at 110% -10%, rgba(0, 80, 139, .9), transparent 55%), linear-gradient(160deg, #10284f 0%, var(--lateral) 60%);
        color: #fff;
    }
    .login__lado::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 380px; height: 380px; border-radius: 50%; border: 56px solid rgba(255, 255, 255, .04); pointer-events: none; }
    .login__lado-meio { display: grid; gap: var(--e-5); }
    .login__topo-movel { display: none; }
}

@media print {
    .lateral, .barra-topo, .veu, .filtros, .acoes-bloco, .nao-imprimir, .botao, .publico__rodape { display: none !important; }
    .painel__conteudo { margin: 0 !important; }
    body { background: #fff; }
    .cartao, .indicador { border-color: #999; }
}

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