/* RUVAI · base: tokens do design system, tipografia, botões, campos, estados, avisos, janelas e listas de escolha. */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 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; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --carbono: #10212b;
  --carbono-2: #172d39;
  --ambar: #f7bd4b;
  --ambar-escuro: #e0a32c;
  --ambar-suave: #fdf1d8;
  --neve: #f7f9f7;
  --branco: #ffffff;
  --ardosia: #263b45;
  --texto-2: #63727a;
  --borda: #e2e8e7;
  --borda-forte: #cbd5d2;
  --verde: #218c78;
  --verde-suave: #e3f3ef;
  --vermelho: #d74e4e;
  --vermelho-suave: #fbe9e9;
  --azul-suave: #e7f0f6;
  --mapa-rua: #ffffff;
  --mapa-bloco: #ebf0ed;
  --mapa-verde: #dce8dc;
  --mapa-principal: #cbd5d2;
  --raio-campo: 12px;
  --raio-card: 16px;
  --raio-painel: 20px;
  --sombra: 0 1px 2px rgba(16, 33, 43, 0.06), 0 8px 24px rgba(16, 33, 43, 0.08);
  --sombra-forte: 0 2px 4px rgba(16, 33, 43, 0.08), 0 18px 48px rgba(16, 33, 43, 0.16);
  --fonte: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--fonte); font-size: 16px; line-height: 1.5; color: var(--carbono); background: var(--neve); -webkit-font-smoothing: antialiased; font-feature-settings: 'tnum' 0; }
body.com-janela { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; font-weight: 750; }
p { margin: 0; }
.num, .tabular { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; border-radius: 10px; background: var(--carbono); color: #fff; font-weight: 700; text-decoration: none; transition: top 0.2s; }
.pular:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; border-radius: 6px; }
.ico { flex: none; }
.carregando-inicial { min-height: 100vh; display: grid; place-items: center; font-weight: 800; letter-spacing: 0.08em; font-size: 28px; color: var(--carbono); }
.noscript { padding: 24px; text-align: center; }

/* Marca */
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: 0.04em; font-size: 26px; color: var(--carbono); text-decoration: none; line-height: 1; }
.marca img { width: 34px; height: 34px; border-radius: 9px; }
.marca-clara { color: #fff; }

/* Botões */
.botao { --altura: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--altura); padding: 0 20px; border-radius: 12px; border: 1.5px solid transparent; font-weight: 700; font-size: 16px; line-height: 1.1; text-decoration: none; white-space: nowrap; transition: background 0.18s var(--ease), border-color 0.18s, transform 0.12s var(--ease), box-shadow 0.18s; -webkit-tap-highlight-color: transparent; }
.botao:active:not(:disabled) { transform: scale(0.98); }
.botao:disabled, .botao[aria-disabled='true'] { cursor: not-allowed; opacity: 0.55; }
.botao-primario { background: var(--ambar); color: var(--carbono); }
.botao-primario:hover:not(:disabled) { background: var(--ambar-escuro); }
.botao-escuro { background: var(--carbono); color: #fff; }
.botao-escuro:hover:not(:disabled) { background: var(--carbono-2); }
.botao-contorno { background: var(--branco); color: var(--carbono); border-color: var(--carbono); }
.botao-contorno:hover:not(:disabled) { background: var(--neve); }
.botao-suave { background: var(--neve); color: var(--carbono); border-color: var(--borda); }
.botao-suave:hover:not(:disabled) { border-color: var(--borda-forte); }
.botao-perigo { background: var(--vermelho); color: #fff; }
.botao-perigo-contorno { background: #fff; color: var(--vermelho); border-color: var(--vermelho); }
.botao-verde { background: var(--verde); color: #fff; }
.botao-texto { background: none; border: 0; padding: 0 6px; color: var(--carbono); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
.botao-bloco { width: 100%; }
.botao-pequeno { --altura: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.botao-grande { --altura: 56px; font-size: 17px; }
.botao[aria-busy='true'] { position: relative; color: transparent !important; }
.botao[aria-busy='true']::after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--carbono); border-right-color: transparent; animation: girar 0.7s linear infinite; }
.botao-escuro[aria-busy='true']::after, .botao-perigo[aria-busy='true']::after { border-color: #fff; border-right-color: transparent; }
.botao-icone { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: var(--carbono); position: relative; }
.botao-icone:hover { background: var(--neve); }
.ponto-alerta::after { content: ''; position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--ambar); border: 2px solid #fff; }

/* Campos */
.campo { display: grid; gap: 6px; font-size: 14px; font-weight: 650; color: var(--ardosia); }
.campo > span b { color: var(--vermelho); }
.campo input, .campo textarea, .entrada { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--borda); border-radius: var(--raio-campo); background: var(--branco); font-size: 16px; font-weight: 500; color: var(--carbono); transition: border-color 0.15s, box-shadow 0.15s; }
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:hover, .campo textarea:hover { border-color: var(--borda-forte); }
.campo input:focus, .campo textarea:focus, .entrada:focus { outline: none; border-color: var(--carbono); box-shadow: 0 0 0 4px rgba(247, 189, 75, 0.35); }
.campo input[aria-invalid='true'], .campo textarea[aria-invalid='true'] { border-color: var(--vermelho); box-shadow: 0 0 0 3px var(--vermelho-suave); }
.campo-ajuda { font-size: 13px; font-weight: 500; color: var(--texto-2); }
.erro-campo { color: var(--vermelho); font-size: 14px; font-weight: 650; display: flex; gap: 6px; align-items: center; }
.campo-icone { position: relative; }
.campo-icone > .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--texto-2); pointer-events: none; }
.campo-icone input { padding-left: 44px; }
.marcar { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ardosia); line-height: 1.45; cursor: pointer; }
.marcar input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--carbono); flex: none; }
.form-erro { padding: 12px 14px; border-radius: 12px; background: var(--vermelho-suave); color: #9b2c2c; font-weight: 650; font-size: 14px; display: flex; gap: 8px; align-items: flex-start; }

/* Selos */
.selo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; background: var(--neve); color: var(--ardosia); border: 1px solid var(--borda); }
.selo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.selo-sem-ponto::before { display: none; }
.selo-verde { background: var(--verde-suave); color: #176b5b; border-color: #c4e5dd; }
.selo-vermelho { background: var(--vermelho-suave); color: #a83b3b; border-color: #f1caca; }
.selo-ambar { background: var(--ambar-suave); color: #7a5306; border-color: #f2d9a1; }
.selo-azul { background: var(--azul-suave); color: #2b5770; border-color: #cfe0ea; }
.selo-escuro { background: var(--carbono); color: #fff; border-color: var(--carbono); }

/* Estados */
.estado { display: grid; justify-items: center; gap: 8px; padding: 32px 20px; text-align: center; color: var(--texto-2); }
.estado strong { color: var(--carbono); font-size: 16px; }
.estado span { max-width: 36ch; font-size: 14px; }
.estado .botao { margin-top: 8px; }
.estado-carregando { grid-auto-flow: column; justify-content: center; align-items: center; }
.estado-erro .ico { color: var(--vermelho); }
.girar { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--borda); border-top-color: var(--carbono); animation: girar 0.8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.esqueleto { background: linear-gradient(90deg, #eef2f1 0%, #f7f9f8 50%, #eef2f1 100%); background-size: 200% 100%; animation: brilho 1.4s ease-in-out infinite; border-radius: 10px; }
@keyframes brilho { to { background-position: -200% 0; } }

/* Avisos */
.aviso { position: fixed; z-index: 2000; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; max-width: min(92vw, 460px); padding: 14px 18px; border-radius: 14px; background: var(--carbono); color: #fff; font-weight: 600; font-size: 15px; box-shadow: var(--sombra-forte); animation: entrar-aviso 0.28s var(--ease); }
.aviso-ok .ico { color: #7ed3c1; }
.aviso-erro { background: #7d2424; }
.aviso-info .ico { color: var(--ambar); }
@keyframes entrar-aviso { from { opacity: 0; transform: translate(-50%, 12px); } }

/* Janelas */
.janela-fundo { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: 20px; }
.janela-sombra { position: absolute; inset: 0; background: rgba(16, 33, 43, 0.45); animation: aparecer 0.2s; }
.janela { position: relative; width: min(100%, 480px); max-height: min(88vh, 760px); overflow: auto; background: var(--branco); border-radius: var(--raio-painel); box-shadow: var(--sombra-forte); animation: subir 0.26s var(--ease); }
.janela-larga { width: min(100%, 760px); }
.janela-topo { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 16px 10px 24px; background: var(--branco); }
.janela-topo h2 { font-size: 20px; }
.janela-corpo { padding: 4px 24px 24px; display: grid; gap: 16px; }
.janela-texto { color: var(--ardosia); }
.janela-acoes { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }
.janela-folha { place-items: end center; padding: 0; }
.janela-folha .janela { width: min(100%, 520px); border-radius: 24px 24px 0 0; max-height: 86vh; animation: subir-folha 0.3s var(--ease); }
.janela-folha .janela-topo { padding-top: 22px; }
.alca { position: absolute; left: 50%; top: 8px; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: var(--borda-forte); }
@keyframes aparecer { from { opacity: 0; } }
@keyframes subir { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes subir-folha { from { transform: translateY(40%); opacity: 0.6; } }

/* Lista de escolha (no lugar do select) */
.escolha { position: relative; display: grid; gap: 6px; }
.escolha-rotulo { font-size: 13px; font-weight: 650; color: var(--texto-2); }
.escolha-botao { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 12px 0 14px; border: 1.5px solid var(--borda); border-radius: 12px; background: var(--branco); font-weight: 650; font-size: 15px; text-align: left; }
.escolha-botao:hover { border-color: var(--borda-forte); }
.escolha-botao[aria-expanded='true'] { border-color: var(--carbono); }
.escolha-lista { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 100%; max-height: 300px; overflow: auto; margin: 0; padding: 6px; list-style: none; background: var(--branco); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra-forte); }
.escolha-lista li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap; }
.escolha-lista li small { font-weight: 500; color: var(--texto-2); font-size: 12.5px; }
.escolha-lista li:hover, .escolha-lista li:focus { background: var(--neve); outline: none; }
.escolha-lista li[aria-selected='true'] { background: var(--ambar-suave); }
.escolha-lista li[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }
.escolha-inline { grid-auto-flow: column; align-items: center; justify-content: start; gap: 8px; }

/* Mapa */
.mapa { width: 100%; height: 100%; background: var(--mapa-bloco); user-select: none; }
.mapa-fundo { fill: var(--mapa-bloco); }
.mapa-verde { fill: var(--mapa-verde); }
.mapa-rio { fill: none; stroke: #cfe3ea; stroke-width: 54; stroke-linecap: round; }
.mapa-vias-principais path { stroke: var(--mapa-principal); stroke-width: 34; stroke-linecap: round; fill: none; }
.mapa-vias path { stroke: var(--mapa-rua); stroke-width: 18; stroke-linecap: round; fill: none; }
.mapa-rua { font-size: 17px; font-weight: 650; fill: #7d8b90; text-anchor: middle; letter-spacing: 0.01em; }
.mapa-poi { font-size: 20px; font-weight: 700; fill: var(--ardosia); paint-order: stroke; stroke: rgba(255, 255, 255, 0.9); stroke-width: 5px; }
.mapa-zona { stroke-width: 5; stroke-dasharray: 18 12; fill-opacity: 0.06; }
.mapa-zona.ativa { stroke: var(--verde); fill: var(--verde); }
.mapa-zona.estudo { stroke: var(--texto-2); fill: var(--texto-2); }
.mapa-busca { fill: rgba(247, 189, 75, 0.14); stroke: rgba(224, 163, 44, 0.55); stroke-width: 3; animation: pulsar 2.4s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulsar { 0% { transform: scale(0.82); opacity: 0.9; } 100% { transform: scale(1.06); opacity: 0.35; } }
.mapa-rota-sombra { fill: none; stroke: #fff; stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; }
.mapa-rota { fill: none; stroke: var(--carbono); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.mapa-rota-feita { fill: none; stroke: #b9c4c2; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.mapa-rota-alt { fill: none; stroke: #9aa7a9; stroke-width: 8; stroke-dasharray: 2 16; stroke-linecap: round; }
.mk-passageiro circle { fill: var(--carbono); stroke: #fff; stroke-width: 5; }
.mk-passageiro .anel { fill: rgba(16, 33, 43, 0.12); stroke: none; }
.mk-embarque circle { fill: var(--ambar); stroke: #fff; stroke-width: 5; }
.mk-embarque .miolo { fill: var(--carbono); stroke: none; }
.mk-destino path { fill: var(--carbono); stroke: #fff; stroke-width: 4; }
.mk-destino .miolo { fill: #fff; }
.mk-carro .gota { fill: var(--ambar); stroke: #fff; stroke-width: 4; }
.mk-carro .carrinho path, .mk-carro .carrinho circle { fill: var(--carbono); }
.mk-carro.mk-em_viagem .gota { fill: var(--carbono); }
.mk-carro.mk-em_viagem .carrinho path, .mk-carro.mk-em_viagem .carrinho circle { fill: var(--ambar); }
.mk-carro.mk-offline .gota { fill: #c3ccca; }
.mk { transition: transform 1.2s linear; }
.mapa-etiqueta rect { fill: #fff; stroke: var(--borda); stroke-width: 2; }
.mapa-etiqueta text { font-size: 21px; font-weight: 750; fill: var(--carbono); }
.mapa-legenda { font-size: 12px; color: var(--texto-2); }

/* Assinatura FGDeveloper's (kit) */
.fgd-assinatura-rodape { display: flex; justify-content: center; padding: 18px 16px 22px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Impressão do comprovante: só a janela aberta aparece no papel */
@media print {
  body.imprimindo > :not(#janela) { display: none !important; }
  body.imprimindo #janela, body.imprimindo #janela * { box-shadow: none !important; }
  body.imprimindo #janela { position: static !important; inset: auto !important; background: #fff !important; }
  body.imprimindo #janela [data-fechar], body.imprimindo #janela .janela-acoes { display: none !important; }
}
/* Cubo FGD ao lado da assinatura */
.fgd-assinatura-rodape { display: inline-flex; align-items: center; gap: 8px; }
.fgd-cubo { width: 20px; height: 20px; border-radius: 4px; flex: none; }

.form-erro[hidden], .form-erro:empty { display: none; }
.folha-pilha > * { min-width: 0; }