/* Vale de Pagamento Online (DecoderX): layout claro, mesmo padrão da calculadora */
:root {
    --vl-ink: #1c2b3a;
    --vl-ink-2: #4a5b6c;
    --vl-azul: #1a3a5c;
    --vl-acao: #2563a8;
    --vl-acao-esc: #1d4f89;
    --vl-ambar: #c97d00;
    --vl-fundo: #f5f8fc;
    --vl-card: #ffffff;
    --vl-linha: #dbe5ef;
    --vl-suave: #eaf3fc;
    --vl-aviso: #fff7e6;
    --vl-aviso-borda: #f1d9a3;
    --vl-erro: #b42318;
    --vl-ok: #17683a;
    --vl-raio: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--vl-fundo);
    color: var(--vl-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    font-size: 1rem;
}
a { color: var(--vl-acao); }
a:hover { color: var(--vl-acao-esc); }
img { max-width: 100%; height: auto; }
.vl-wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.vl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Cabeçalho: faixa azul com o logo + barra de menu ───── */
.vl-topo { background: #0d1f33; }
.vl-topo-logo .vl-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.vl-marca { text-decoration: none; color: #fff; font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.vl-marca:hover { color: #fff; }
.vl-marca b { color: #e8a020; font-weight: 700; }
.vl-marca small { display: block; font-size: .72rem; font-weight: 500; color: #9db4c9; }
.vl-menu-bt { display: none; appearance: none; align-items: center; gap: 9px; background: rgba(255, 255, 255, .1); color: #fff; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 10px; padding: 8px 14px; font: inherit; font-weight: 650; font-size: .95rem; cursor: pointer; }
.vl-menu-bt:hover { background: rgba(255, 255, 255, .18); }
.vl-menu-bt:focus-visible { outline: 3px solid #e8a020; outline-offset: 2px; }
.vl-menu-ico, .vl-menu-ico::before, .vl-menu-ico::after { display: block; width: 20px; height: 2.5px; background: #fff; border-radius: 2px; transition: transform .2s, opacity .2s; }
.vl-menu-ico { position: relative; }
.vl-menu-ico::before, .vl-menu-ico::after { content: ""; position: absolute; left: 0; }
.vl-menu-ico::before { top: -6.5px; }
.vl-menu-ico::after { top: 6.5px; }
.vl-menu-bt[aria-expanded="true"] .vl-menu-ico { background: transparent; }
.vl-menu-bt[aria-expanded="true"] .vl-menu-ico::before { top: 0; transform: rotate(45deg); }
.vl-menu-bt[aria-expanded="true"] .vl-menu-ico::after { top: 0; transform: rotate(-45deg); }
.vl-barra-menu { background: #fff; border-bottom: 1px solid var(--vl-linha); box-shadow: 0 2px 8px rgba(26, 58, 92, .06); }
.vl-nav { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 0; }
.vl-nav a { text-decoration: none; color: var(--vl-ink-2); font-weight: 650; font-size: .9rem; padding: 8px 11px; border-radius: 8px; }
.vl-nav a:hover { background: var(--vl-suave); color: var(--vl-azul); }
.vl-nav a[aria-current="page"] { background: #e8a020; color: #0d1f33; font-weight: 750; box-shadow: 0 2px 6px rgba(232, 160, 32, .45); }

/* ── Abertura ────────────────────────────────────────────── */
.vl-hero { background: linear-gradient(180deg, #eaf3fc 0%, #f5f8fc 100%); padding: 34px 0 10px; text-align: center; }
.vl-hero h1 { margin: 0 0 10px; font-size: 2.1rem; line-height: 1.2; color: var(--vl-azul); font-weight: 750; }
.vl-hero p { margin: 0 auto; max-width: 780px; color: var(--vl-ink-2); font-size: 1.05rem; }
.vl-selos { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0 0; padding: 0; }
.vl-selos li { background: #fff; border: 1px solid var(--vl-linha); border-radius: 999px; padding: 4px 14px; font-size: .85rem; font-weight: 600; color: var(--vl-azul); }

/* ── Simulador ───────────────────────────────────────────── */
.vl-main { padding: 18px 0 40px; }
.vl-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.vl-card { background: var(--vl-card); border: 1px solid var(--vl-linha); border-radius: var(--vl-raio); box-shadow: 0 6px 22px rgba(26, 58, 92, .07); padding: 22px; }
.vl-card h2 { margin: 0 0 4px; font-size: 1.25rem; color: var(--vl-azul); }
.vl-sub { margin: 0 0 14px; color: var(--vl-ink-2); font-size: .92rem; }

.vl-abas { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--vl-linha); }
.vl-abas button { appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; padding: 9px 14px; font: inherit; font-weight: 650; font-size: .93rem; color: var(--vl-ink-2); cursor: pointer; margin-bottom: -1px; }
.vl-abas button[aria-selected="true"] { color: var(--vl-azul); border-bottom-color: var(--vl-ambar); }
.vl-abas button:hover { color: var(--vl-azul); }

.vl-campo { margin-bottom: 14px; }
.vl-campo label, .vl-rotulo { display: block; font-weight: 650; font-size: .9rem; color: var(--vl-azul); margin-bottom: 4px; }
.vl-opc { font-weight: 400; color: #5b6b7c; font-size: .82rem; }
.vl-dica { display: block; font-size: .8rem; color: #5b6b7c; margin-top: 3px; }
.vl-in { display: flex; align-items: stretch; border: 1.5px solid #c3d1df; border-radius: 10px; background: #fff; overflow: hidden; }
.vl-in:focus-within { border-color: var(--vl-acao); box-shadow: 0 0 0 3px rgba(37, 99, 168, .18); }
.vl-in span { display: flex; align-items: center; padding: 0 11px; background: #f0f5fa; color: var(--vl-ink-2); font-weight: 650; font-size: .92rem; white-space: nowrap; }
.vl-in { min-width: 0; }
.vl-in input, .vl-in select { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1.05rem; padding: 10px 12px; height: 46px; color: var(--vl-ink); }
.vl-in select { flex: 0 0 auto; width: auto; max-width: 48%; font-size: .95rem; font-weight: 600; background: #f0f5fa; border-left: 1.5px solid #c3d1df; cursor: pointer; }
.vl-in input[aria-invalid="true"] { background: #fff5f4; }
.vl-par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.vl-par > *, .vl-campo { min-width: 0; }
.vl-erro { color: var(--vl-erro); font-size: .83rem; min-height: 1.1em; margin-top: 2px; }

.vl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.vl-chips button { appearance: none; border: 1.5px solid #c3d1df; background: #fff; color: var(--vl-ink-2); border-radius: 999px; padding: 3px 12px; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.vl-chips button:hover { border-color: var(--vl-acao); color: var(--vl-acao-esc); }
.vl-chips button[aria-pressed="true"] { background: var(--vl-suave); border-color: var(--vl-acao); color: var(--vl-azul); }

.vl-bc { appearance: none; margin-top: 8px; border: 1.5px dashed var(--vl-acao); background: #f4f9ff; color: var(--vl-acao-esc); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: .88rem; font-weight: 650; cursor: pointer; width: 100%; }
.vl-bc:hover { background: var(--vl-suave); }
.vl-bc:disabled { opacity: .7; cursor: progress; }
.vl-fonte { font-size: .82rem; color: var(--vl-ok); margin-top: 6px; }
.vl-fonte:empty { display: none; }
.vl-fonte-erro { color: var(--vl-erro); }

.vl-mais { border: 1px solid var(--vl-linha); border-radius: 12px; background: #fafcfe; margin-bottom: 14px; }
.vl-mais summary { cursor: pointer; padding: 11px 14px; font-weight: 650; font-size: .92rem; color: var(--vl-azul); list-style-position: inside; }
.vl-mais[open] summary { border-bottom: 1px solid var(--vl-linha); }
.vl-mais-corpo { padding: 14px; }
.vl-mais-corpo .vl-par .vl-campo { margin-bottom: 10px; }
.vl-check { display: flex; gap: 9px; align-items: flex-start; font-size: .9rem; margin: 6px 0 10px; color: var(--vl-ink); }
.vl-check input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--vl-acao); flex: none; }
.vl-iof-box { margin: 0 0 10px 0; padding: 10px 12px; background: var(--vl-aviso); border: 1px solid var(--vl-aviso-borda); border-radius: 10px; }
.vl-iof-box[hidden] { display: none; }

.vl-botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.vl-bt { appearance: none; border: 1.5px solid transparent; border-radius: 10px; padding: 11px 20px; font: inherit; font-weight: 700; font-size: .97rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; }
.vl-bt-prim { background: var(--vl-acao); color: #fff; flex: 1 1 200px; }
.vl-bt-prim:hover { background: var(--vl-acao-esc); color: #fff; }
.vl-bt-sec { background: #fff; color: var(--vl-azul); border-color: #b5c6d8; }
.vl-bt-sec:hover { background: var(--vl-suave); border-color: var(--vl-acao); color: var(--vl-azul); }
.vl-bt:disabled { opacity: .65; cursor: progress; }
.vl-bt:focus-visible, .vl-chips button:focus-visible, .vl-bc:focus-visible, .vl-abas button:focus-visible, .vl-mais summary:focus-visible { outline: 3px solid rgba(37, 99, 168, .45); outline-offset: 2px; }

/* ── Vale: seletor de modelo, prévia e ações ───────────────── */
.vl-seg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.vl-seg button { appearance: none; flex: 1 1 auto; border: 1.5px solid #c3d1df; background: #fff; color: var(--vl-ink-2); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: .9rem; font-weight: 650; cursor: pointer; text-align: center; }
.vl-seg button:hover { border-color: var(--vl-acao); color: var(--vl-azul); }
.vl-seg button[aria-pressed="true"] { background: var(--vl-suave); border-color: var(--vl-acao); color: var(--vl-azul); box-shadow: inset 0 0 0 1px var(--vl-acao); }
.vl-seg button:focus-visible { outline: 3px solid rgba(37, 99, 168, .45); outline-offset: 2px; }
.vl-extenso { display: block; font-size: .84rem; color: var(--vl-ok); margin-top: 3px; min-height: 1.2em; }
.vl-extenso::first-letter { text-transform: uppercase; }
.vl-extenso:empty { display: none; }
.vl-grupo { margin: 0 0 14px; padding: 12px 14px; background: #f7fafd; border: 1px solid var(--vl-linha); border-radius: 12px; }
.vl-grupo > legend, .vl-grupo-t { font-weight: 700; font-size: .92rem; color: var(--vl-azul); margin: 0 0 8px; padding: 0; }
.vl-grupo[hidden], .vl-campo[hidden] { display: none; }
fieldset.vl-grupo { min-width: 0; }
.vl-campo > input[type="text"], .vl-campo > input[type="date"], .vl-campo > select, .vl-campo > textarea { width: 100%; min-width: 0; border: 1.5px solid #c3d1df; border-radius: 10px; background: #fff; font: inherit; font-size: 1rem; padding: 10px 12px; height: 46px; color: var(--vl-ink); }
.vl-campo > textarea { height: auto; min-height: 70px; resize: vertical; }
.vl-campo > input:focus, .vl-campo > select:focus, .vl-campo > textarea:focus { outline: 0; border-color: var(--vl-acao); box-shadow: 0 0 0 3px rgba(37, 99, 168, .18); }
.vl-campo > .is-invalid { border-color: var(--vl-erro); background: #fff5f4; }
.vl-in .is-invalid { background: #fff5f4; }
.vl-check small { color: #5b6b7c; display: block; }
.vl-alerta { color: var(--vl-erro); font-size: .88rem; min-height: 1.2em; margin-top: 8px; }
.vl-previa-t { scroll-margin-top: 14px; }
.vl-folha { background: #eef3f8; border: 1px solid var(--vl-linha); border-radius: 12px; padding: 12px; margin: 10px 0 0; overflow-x: auto; }
.vl-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vl-acoes .vl-bt { flex: 1 1 130px; padding: 10px 12px; }
.vl-msg { font-size: .86rem; min-height: 1.2em; margin-top: 6px; }
.vl-msg-ok { color: var(--vl-ok); }
.vl-msg-erro { color: var(--vl-erro); }
.vl-ta-oculto { position: fixed; left: -9999px; top: 0; }
.vl-aviso { background: var(--vl-aviso); border: 1px solid var(--vl-aviso-borda); border-radius: 10px; padding: 8px 12px; font-size: .86rem; color: #5a4208; margin: 0 0 4px; }
.vl-modelo-ex { background: #fff; border: 1px solid var(--vl-linha); border-left: 4px solid var(--vl-ambar); border-radius: 10px; padding: 14px 18px; font-size: .96rem; white-space: pre-wrap; margin: 12px 0; }
.vl-tabela-doc { width: 100%; border-collapse: collapse; background: #fff; font-size: .93rem; }
.vl-tabela-doc th { text-align: left; background: #eef4fa; color: var(--vl-azul); padding: 9px 12px; }
.vl-tabela-doc td { padding: 9px 12px; border-bottom: 1px solid #e7eef6; vertical-align: top; }
.vl-tabela-doc td:first-child { font-weight: 650; color: var(--vl-azul); white-space: nowrap; }
.vl-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--vl-linha); border-radius: 12px; }
.vl-usar { margin-top: 10px; }
.vl-usar .vl-bt { padding: 7px 14px; font-size: .88rem; }

.vl-painel { max-height: calc(100vh - 28px); overflow-y: auto; border-radius: 14px; }
@media (max-width: 899.98px) { .vl-painel { max-height: none; overflow: visible; } }

/* ── Conteúdo ────────────────────────────────────────────── */
.vl-conteudo { padding: 8px 0 30px; }
.vl-conteudo section { margin-bottom: 26px; }
.vl-conteudo h2 { font-size: 1.5rem; color: var(--vl-azul); margin: 0 0 10px; line-height: 1.25; }
.vl-conteudo h3 { font-size: 1.1rem; color: var(--vl-azul); margin: 18px 0 6px; }
.vl-conteudo p, .vl-conteudo li { color: #2d3e50; }
.vl-conteudo ol, .vl-conteudo ul { padding-left: 1.3rem; }
.vl-texto { max-width: 860px; }
.vl-formula { background: #fff; border: 1px solid var(--vl-linha); border-left: 4px solid var(--vl-ambar); border-radius: 10px; padding: 12px 16px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95rem; overflow-x: auto; margin: 12px 0; }
.vl-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vl-mini { background: #fff; border: 1px solid var(--vl-linha); border-radius: 12px; padding: 14px 16px; }
.vl-mini h3 { margin-top: 0; font-size: 1rem; }
.vl-mini p { margin: 0; font-size: .92rem; }
.vl-faq details { background: #fff; border: 1px solid var(--vl-linha); border-radius: 12px; margin-bottom: 8px; }
.vl-faq summary { cursor: pointer; padding: 13px 16px; font-weight: 650; color: var(--vl-azul); }
.vl-faq details p { margin: 0; padding: 0 16px 14px; }
.vl-veja { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; list-style: none; }
.vl-veja a { display: block; background: #fff; border: 1px solid var(--vl-linha); border-radius: 10px; padding: 9px 14px; font-weight: 600; text-decoration: none; }
.vl-veja a:hover { background: var(--vl-suave); }
.vl-aviso-legal { font-size: .88rem; color: var(--vl-ink-2); border-top: 1px solid var(--vl-linha); padding-top: 14px; }

.vl-rodape { background: #fff; border-top: 1px solid var(--vl-linha); padding: 22px 0; text-align: center; font-size: .86rem; color: var(--vl-ink-2); }
.vl-rodape a { color: var(--vl-acao-esc); }
.vl-rodape p { margin: 4px 0; }

@media (max-width: 899.98px) {
    .vl-grade { grid-template-columns: minmax(0, 1fr); }
    .vl-painel { position: static; }
    .vl-grid3 { grid-template-columns: minmax(0, 1fr); }
    .vl-hero h1 { font-size: 1.7rem; }
}
@media (max-width: 767.98px) {
    .vl-menu-bt { display: inline-flex; }
    .vl-barra-menu { display: none; border-top: 1px solid var(--vl-linha); }
    .vl-barra-menu.vl-aberto { display: block; }
    .vl-nav { flex-direction: column; flex-wrap: nowrap; gap: 2px; padding: 8px 0 12px; }
    .vl-nav a { padding: 13px 14px; font-size: 1rem; }
    .vl-hero { padding-top: 22px; }
    .vl-hero p { font-size: .98rem; }
    .vl-selos { margin-top: 12px; }
    .vl-selos li { font-size: .8rem; padding: 3px 11px; }
}
@media (max-width: 480px) {
    .vl-card { padding: 16px; }
    .vl-par { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .vl-par.vl-par-fixo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
    .vl-dest-n, .vl-dest-v { font-size: 1.9rem; }
    .vl-linha { font-size: .9rem; gap: 10px; }
}


/* ── Documento (prévia, impressão e PDF) ───────────────────── */
.vl-via { background: #fff; color: #111; border: 1.5px solid #1a3a5c; border-radius: 6px; padding: 5mm 6mm; font-family: Arial, Helvetica, sans-serif; font-size: 10.5pt; line-height: 1.5; box-shadow: 0 2px 8px rgba(26, 58, 92, .08); }
.vl-via p { margin: 0 0 2.6mm; }
.vl-doc-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 4mm; border-bottom: 2px solid #1a3a5c; padding-bottom: 2.5mm; margin-bottom: 3.5mm; }
.vl-titulo { font-size: 20pt; font-weight: 800; letter-spacing: .14em; color: #1a3a5c; line-height: 1; }
.vl-doc-sub { font-size: 9.5pt; color: #555; margin: 1.4mm 0 0; }
.vl-valor { font-size: 15pt; font-weight: 800; color: #1a3a5c; border: 1.5px solid #1a3a5c; padding: 1.2mm 3mm; border-radius: 2mm; white-space: nowrap; }
.vl-vazio-campo { background: #fff3cd; color: #7a5a00; padding: 0 3px; border-radius: 2px; }
.vl-local { margin-top: 4mm; }
.vl-ass { display: flex; gap: 8mm; margin-top: 13mm; }
.vl-ass > div { flex: 1; text-align: center; font-size: 9pt; min-width: 0; overflow-wrap: anywhere; }
.vl-ass-linha { border-top: 1px solid #111; margin-bottom: 1mm; }
.vl-test { margin-top: 10mm; }
.vl-rotulo-via { text-align: right; font-size: 8pt; color: #777; margin-top: 3mm; }
.vl-corte { border-top: 1px dashed #999; text-align: center; font-size: 8pt; color: #777; margin: 4mm 0; padding-top: 1mm; }
#vl-print { display: none; }
@media print {
    @page { size: A4; margin: 8mm 10mm; }
    body > *:not(#vl-print) { display: none !important; }
    #vl-print { display: block !important; }
    #vl-print .vl-via { box-shadow: none; break-inside: avoid; }
}