:root {
  --ink: #071421;
  --ink-2: #0c1f31;
  --ink-3: #132a40;
  --papel: #f4f7fa;
  --texto: #132235;
  --texto-2: #5a6b7e;
  --linha: #dde6ee;
  --azul: #73d7f4;
  --azul-forte: #2878ed;
  --menta: #70e4bc;
  --ambar: #f2b33d;
  --erro: #c2362b;
  --fonte: 'DM Sans', system-ui, sans-serif;
  --titulo: 'Manrope', system-ui, sans-serif;
  --painel-w: 400px;
  --sombra: 0 18px 50px rgba(7, 20, 33, .22), 0 2px 6px rgba(7, 20, 33, .08);
  --sombra-p: 0 6px 20px rgba(7, 20, 33, .18);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; font: 15px/1.5 var(--fonte); color: var(--texto); background: #dfe7ee; -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ============ Mapa em tela cheia ============ */
.mapa { position: fixed; inset: 0; }

/* ============ Painel flutuante à esquerda ============ */
.painel {
  position: fixed; z-index: 5; top: 16px; left: 16px; bottom: 16px; width: var(--painel-w);
  display: flex; flex-direction: column;
  background: #fff; border-radius: 18px; box-shadow: var(--sombra);
  transition: transform .25s ease;
}
.painel.is-recolhido { transform: translateX(calc(-100% - 16px)); }
.painel__topo { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--ink); border-radius: 18px 18px 0 0; }
.painel__marca img { width: 104px; height: auto; display: block; }
.painel__sobre { color: #9fb3c7; font-size: 13px; font-weight: 600; text-decoration: none; }
.painel__sobre:hover { color: #fff; }
.painel__corpo { flex: 1; overflow-y: auto; padding: 16px 18px 18px; overscroll-behavior: contain; }
.painel__rodape { flex: none; padding: 10px 18px 12px; border-top: 1px solid var(--linha); background: var(--papel); border-radius: 0 0 18px 18px; }
.painel__rodape small { display: block; font-size: 11px; line-height: 1.4; color: var(--texto-2); }

/* Aba para recolher/abrir o painel */
.painel__aba { position: absolute; top: 22px; right: -34px; width: 34px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 0 10px 10px 0; background: #fff; box-shadow: 6px 4px 14px rgba(7, 20, 33, .14); color: var(--texto-2); cursor: pointer; }
.painel__aba:hover { color: var(--texto); }
.painel__aba svg { width: 20px; height: 20px; transition: transform .25s; }
.painel.is-recolhido .painel__aba svg { transform: rotate(180deg); }

.cota { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 4px 6px; margin-left: -6px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--texto-2); transition: background .3s, color .3s; }
.cota__n { flex: none; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px; background: var(--ink); color: var(--menta); font: 800 12px var(--titulo); }
.cota.is-gasta { background: #e3f8f0; color: #0d6b4b; animation: cota-pulso .9s ease 2; }
.cota.is-gasta .cota__n { background: #0d6b4b; color: #fff; }
.cota.is-zero { background: #fdecea; color: var(--erro); }
.cota.is-zero .cota__n { background: var(--erro); color: #fff; }
@keyframes cota-pulso { 0%, 100% { transform: none; } 40% { transform: scale(1.03); } }

/* ============ Formulário ============ */
.grupo { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.grupo legend { padding: 0; margin-bottom: 8px; font-size: 12px; font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: .05em; }
.grupo__linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding: 0 32px 0 54px; }

.pontos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ponto { display: flex; align-items: center; gap: 6px; border-radius: 12px; background: #fff; }
.ponto__alca { flex: none; display: grid; place-items: center; width: 20px; height: 34px; margin-right: -2px; border-radius: 6px; color: #b3c1cf; cursor: grab; touch-action: none; }
.ponto__alca:hover { color: var(--texto); background: var(--papel); }
.ponto__alca svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.ponto--pegando { box-shadow: 0 8px 24px rgba(7, 20, 33, .18); }
.ponto--pegando .ponto__alca { cursor: grabbing; }
.ponto--fantasma { opacity: .35; }
.ponto__letra { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--azul); font: 800 12px var(--titulo); }
.ponto input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--linha); border-radius: 10px; background: #fff; }
.ponto input:focus { border-color: var(--azul-forte); outline: none; box-shadow: 0 0 0 3px rgba(40, 120, 237, .15); }
.ponto__rem { flex: none; width: 28px; height: 28px; margin-right: -4px; border: 0; border-radius: 8px; background: transparent; color: var(--texto-2); font-size: 20px; line-height: 1; cursor: pointer; }
.ponto__rem:hover { background: var(--papel); color: var(--erro); }
.ponto__rem--vazio { visibility: hidden; }

.link-btn { padding: 4px 0; border: 0; background: none; color: var(--azul-forte); font-weight: 700; font-size: 14px; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.link-btn:disabled { color: var(--texto-2); cursor: default; text-decoration: none; }
.check { display: flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; }

.veic { display: flex; gap: 10px; }
.veic > .campo { flex: 1; }
.veic > .campo--tipo { flex: 1.4; }
.veic-resumo { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 9px 11px; border-radius: 10px; background: var(--papel); font-size: 13px; color: var(--texto-2); line-height: 1.45; }
.veic-resumo svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--azul-forte); }
.veic-resumo b { color: var(--texto); }
.veic-resumo__susp { display: block; color: #0d6b4b; font-weight: 600; }
.campo { display: grid; gap: 4px; min-width: 0; }
.campo span { font-size: 13px; font-weight: 600; }
.campo select { width: 100%; min-width: 0; height: 42px; padding: 0 10px; border: 1px solid var(--linha); border-radius: 10px; background: #fff; }
.campo select:disabled { background: var(--papel); opacity: 1; }
.campo small { font-size: 12px; color: var(--texto-2); }
.campo--susp { margin-top: 12px; }

.erro { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #fdecea; color: var(--erro); font-size: 14px; }
.btn-calc { width: 100%; min-height: 50px; border: 0; border-radius: 12px; background: var(--azul); color: var(--ink); font-weight: 800; font-size: 16px; cursor: pointer; }
.btn-calc:hover { background: #98e3f8; }
.btn-calc:disabled { background: var(--linha); color: var(--texto-2); cursor: not-allowed; }

.aviso-previa { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: #fff7e0; border: 1px solid #f1d58a; font-size: 14px; }
.aviso-previa p { margin: 6px 0 0; }

/* ============ Resultado ============ */
.selo-exemplo { margin: 0 0 12px; padding: 6px 10px; border-radius: 8px; background: #fff7e0; border: 1px dashed #e0b84a; color: #7a5a00; font-size: 12px; font-weight: 700; text-align: center; }
.ir { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; margin: 0 -6px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; }
.ir:hover { background: rgba(40, 120, 237, .08); }
.resumo { padding: 10px 12px; border-radius: 14px; background: var(--papel); }
.resumo__pontos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 14px; font-weight: 600; }
.resumo__pontos .ir { width: calc(100% + 12px); }
.resumo__pontos .ponto__letra { width: 22px; height: 22px; font-size: 11px; }
.resumo__veic { margin: 6px 0 2px 30px; font-size: 13px; color: var(--texto-2); }
.resumo__acoes { display: flex; gap: 16px; margin-left: 30px; }
.resumo__acoes .link-btn { font-size: 13px; }

.nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 0; }
.nums div { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linha); }
.nums dt { font-size: 12px; color: var(--texto-2); font-weight: 600; }
.nums dd { margin: 2px 0 0; font: 800 18px var(--titulo); }
.nums__destaque { grid-column: 1 / -1; background: var(--ink); border-color: var(--ink) !important; }
.nums__destaque dt { color: #9fb3c7; }
.nums__destaque dd { color: var(--menta); font-size: 24px; }

.compartilhar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.btn-mini { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 10px; border: 1px solid var(--linha); border-radius: 10px; background: #fff; color: var(--texto); font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn-mini:hover { border-color: var(--azul-forte); color: var(--azul-forte); }
.btn-mini svg { width: 16px; height: 16px; margin-right: 6px; }
.btn-mini--pdf { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-mini--pdf:hover { background: var(--ink-3); border-color: var(--ink-3); color: #fff; }
.btn-mini:disabled { opacity: .7; cursor: progress; }

.pracas { margin-top: 16px; }
.pracas__topo { margin: 0 0 8px; font: 800 15px var(--titulo); display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.pracas__topo > small { font: 600 12px var(--fonte); color: var(--texto-2); margin-right: auto; }
.pracas__topo b.is-parcial { color: #9a6b00; }
.pracas__topo > span small { font: 700 11px var(--fonte); color: #9a6b00; }
.pracas ol { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; }
.pracas li + li { border-top: 1px solid var(--linha); }
.pracas .ir { margin: 0; padding: 6px 10px; border-radius: 0; gap: 8px; font-size: 13px; align-items: center; }
.praca__n { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ambar); color: var(--ink); font: 800 11px var(--titulo); }
.praca__txt { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.praca__txt small { color: var(--texto-2); font-size: 11.5px; font-weight: 600; }
.pracas strong { white-space: nowrap; }

.btn-sec { width: 100%; margin-top: 14px; display: flex; flex-direction: column; align-items: center; padding: 10px; border: 1.5px solid var(--azul-forte); border-radius: 12px; background: #fff; color: var(--azul-forte); font-weight: 800; cursor: pointer; }
.btn-sec small { font-weight: 600; font-size: 12px; color: var(--texto-2); }
.btn-sec:hover { background: #eef5ff; }

/* ============ Marcadores no mapa ============ */
.marcador { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: var(--ink); border: 3px solid #fff; box-shadow: 0 3px 10px rgba(7, 20, 33, .4); color: var(--azul); font: 800 13px var(--titulo); line-height: 1; cursor: pointer; }
.marcador span { display: block; }
.marcador-praca { padding: 0; border: 0; background: none; cursor: pointer; }  /* sem transform/transition: quem posiciona é o mapa */
.marcador-praca__bola { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ambar); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(7, 20, 33, .35); color: var(--ink); font: 800 11px var(--titulo); line-height: 1; transition: transform .15s; }
.marcador-praca:hover .marcador-praca__bola, .marcador-praca.is-ativo .marcador-praca__bola { transform: scale(1.35); }
.marcador-praca:hover, .marcador-praca.is-ativo { z-index: 2; }

/* ============ "Ir para" A, B, C... (topo do mapa) ============ */
.ir-para {
  position: absolute; z-index: 3; top: 16px; left: calc(var(--painel-w) + 32px + (100% - var(--painel-w) - 32px) / 2); transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 14px; background: #fff; box-shadow: var(--sombra-p);
  max-width: calc(100% - var(--painel-w) - 64px); overflow-x: auto; transition: left .25s ease;
}
body.painel-fechado .ir-para { left: 50%; max-width: calc(100% - 32px); }
.ir-para__rot { padding: 0 8px 0 6px; font-size: 12px; font-weight: 700; color: var(--texto-2); white-space: nowrap; }
.ir-para button { flex: none; min-width: 32px; height: 32px; padding: 0 8px; border: 0; border-radius: 9px; background: var(--papel); color: var(--ink); font: 800 13px var(--titulo); cursor: pointer; }
.ir-para button:hover { background: var(--ink); color: var(--azul); }
.ir-para .ir-para__tudo { font: 700 12px var(--fonte); white-space: nowrap; }

/* ============ Tema (embaixo, recolhido) ============ */
.tema { position: relative; background: none !important; box-shadow: none !important; }
.tema__botao { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: #fff; box-shadow: var(--sombra-p); color: var(--texto); font-size: 13px; font-weight: 700; cursor: pointer; }
.tema__botao svg { width: 17px; height: 17px; }
.tema__botao[aria-expanded="true"] { background: var(--ink); color: #fff; }
.tema__lista { position: absolute; right: 0; bottom: calc(100% + 8px); display: grid; grid-template-columns: repeat(2, 132px); gap: 8px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: var(--sombra); }
.tema__op { display: grid; gap: 6px; padding: 4px; border: 2px solid transparent; border-radius: 12px; background: none; cursor: pointer; text-align: left; }
.tema__op:hover { border-color: var(--linha); }
.tema__op[aria-pressed="true"] { border-color: var(--azul-forte); }
.tema__mini { display: block; width: 120px; height: 78px; border-radius: 8px; overflow: hidden; background: var(--papel); pointer-events: none; }
.tema__nome { padding: 0 2px 2px; font-size: 13px; font-weight: 700; }
.tema__op[aria-pressed="true"] .tema__nome { color: var(--azul-forte); }

/* ============ Aviso rápido ============ */
.toast { position: fixed; z-index: 20; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 10px 16px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; box-shadow: var(--sombra-p); }

/* ============ Celular: mapa em cima, formulário embaixo ============ */
@media (max-width: 760px) {
  body { overflow: auto; }
  .mapa { position: relative; height: 46vh; }
  .painel { position: relative; top: auto; left: auto; bottom: auto; width: auto; margin: -18px 0 0; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(7, 20, 33, .18); }
  .painel__topo { border-radius: 18px 18px 0 0; }
  .painel__rodape { border-radius: 0; }
  .painel__corpo { overflow: visible; }
  .painel__aba { display: none; }
  .ir-para { top: 10px; left: 50%; max-width: calc(100% - 20px); }
  .tema__lista { grid-template-columns: repeat(2, 112px); }
  .tema__mini { width: 100px; height: 66px; }
  .toast { bottom: 16px; }
}

/* ============ Sugestões de endereço ============ */
.ponto { position: relative; }
.sugestoes { position: absolute; z-index: 30; top: calc(100% + 4px); left: 54px; right: 64px; margin: 0; padding: 4px; list-style: none; border: 1px solid var(--linha); border-radius: 12px; background: #fff; box-shadow: var(--sombra); max-height: 260px; overflow-y: auto; }
.sugestoes li { padding: 8px 10px; border-radius: 8px; font-size: 14px; line-height: 1.35; cursor: pointer; }
.sugestoes li:hover, .sugestoes li.is-ativo { background: #eef5ff; color: var(--azul-forte); }

/* ============ Calculando ============ */
.btn-calc.is-carregando { position: relative; color: transparent; background: var(--azul); cursor: progress; }
.btn-calc.is-carregando::after { content: "Calculando rota…"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); animation: calc-pulso 1.2s ease-in-out infinite; }
@keyframes calc-pulso { 50% { opacity: .55; } }

/* ============ Total parcial, avisos e praças sem tarifa ============ */
.nums__destaque.is-parcial dd { color: #ffd17c; }
.nums__destaque small { display: block; margin-top: 2px; color: #ffd17c; font-size: 12px; font-weight: 600; }
.avisos { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #fff7e0; border: 1px solid #f1d58a; font-size: 13px; color: #6b4f00; }
.avisos p { margin: 0; }
.avisos p + p { margin-top: 6px; }
.avisos__base { color: var(--texto-2); }
.pracas__trecho { padding: 7px 12px; background: var(--papel); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); }
.sem-tarifa { font-size: 11px; line-height: 1.2; text-align: right; color: #9a6b00; font-weight: 700; }
.nao-oficial { display: block; margin-top: 2px; font: 700 10px var(--fonte); color: #9a6b00; text-align: right; white-space: nowrap; }
.pracas strong { text-align: right; }
.praca__n--sem { background: #b7c3cf; }
.marcador-praca--sem .marcador-praca__bola { background: #b7c3cf; }

/* ============================================================
   CONTA: botão, coroa, menu, janelas de entrar e de planos
   ============================================================ */
:root { --ouro: #f5c84c; --ouro-escuro: #b8860b; }
.painel__acoes { position: relative; display: flex; align-items: center; gap: 14px; }
.conta-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border: 1.5px solid rgba(115, 215, 244, .45); border-radius: 99px; background: transparent; color: #fff; font: 700 13px var(--fonte); cursor: pointer; }
.conta-btn:hover { border-color: var(--azul); background: rgba(115, 215, 244, .1); }
.conta-btn--logado { padding: 0; border: 0; min-height: 0; background: none; }
.conta-btn--logado:hover { background: none; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink-3); color: var(--azul); font: 800 14px var(--titulo); border: 2px solid rgba(115, 215, 244, .35); }
.conta-btn.is-pago .avatar { border-color: var(--ouro); color: var(--ouro); }
.coroa { width: 16px; height: 16px; fill: var(--ouro); stroke: var(--ouro-escuro); stroke-width: 1; stroke-linejoin: round; flex: none; }
.conta-btn .coroa { position: absolute; top: -12px; right: -8px; width: 22px; height: 22px; transform: rotate(18deg); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }

.conta-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; min-width: 250px; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 14px 40px rgba(7, 20, 33, .25); }
.conta-menu .menu__topo { display: grid; gap: 4px; padding: 10px 10px 12px; border-bottom: 1px solid var(--linha); margin-bottom: 4px; }
.conta-menu .menu__topo b { font-size: 14px; color: var(--texto); word-break: break-all; }
.conta-menu .menu__topo small { font-size: 12px; color: var(--texto-2); }
.conta-menu button, .conta-menu a { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--texto); font: 600 14px var(--fonte); text-align: left; text-decoration: none; cursor: pointer; }
.conta-menu button:hover, .conta-menu a:hover { background: var(--papel); }
.plano-chip { justify-self: start; display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; background: var(--papel); color: var(--texto-2); font: 800 11px var(--titulo); text-transform: uppercase; letter-spacing: .04em; }
.plano-chip--pago { background: #fff6dc; color: #8a6200; }
.plano-chip .coroa { width: 13px; height: 13px; }

.cota.is-premium { background: #fff6dc; color: #8a6200; }
.cota.is-premium .cota__n { display: inline-flex; gap: 3px; background: var(--ink); color: var(--ouro); }
.cota__n .coroa { width: 13px; height: 13px; }
.painel__rodape small .link-btn { padding: 0; font-size: 11px; }

.dlg { width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 28px 26px 24px; border: 0; border-radius: 18px; box-shadow: 0 24px 70px rgba(7, 20, 33, .35); color: var(--texto); }
.dlg::backdrop { background: rgba(7, 20, 33, .55); }
.dlg h2 { margin: 0 0 6px; font: 800 20px var(--titulo); }
.dlg__sub { margin: 0 0 16px; color: var(--texto-2); font-size: 14px; }
.dlg__logo { display: block; margin-bottom: 14px; filter: brightness(0); opacity: .85; }
.dlg__fechar { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--texto-2); font-size: 24px; line-height: 1; cursor: pointer; }
.dlg__fechar:hover { background: var(--papel); color: var(--texto); }
.dlg form { display: grid; gap: 12px; margin-top: 8px; }
.dlg .campo input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--linha); border-radius: 10px; font: inherit; }
.dlg .campo input:focus { border-color: var(--azul-forte); outline: none; box-shadow: 0 0 0 3px rgba(40, 120, 237, .15); }
.dlg__nota { margin: 0; font-size: 12px; color: var(--texto-2); }
.dlg__email { margin: 0; font-size: 14px; }
.dlg .erro { margin: 12px 0 0; }
.entrar__codigo { text-align: center; font: 800 24px var(--titulo) !important; letter-spacing: .3em; }
.dlg-entrar[data-etapa="email"] [data-so="codigo"], .dlg-entrar[data-etapa="codigo"] [data-so="email"] { display: none; }
.dlg-entrar #entrarReenviar { justify-self: center; }

.dlg-planos { width: min(640px, calc(100vw - 32px)); }
.planos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.plano { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1.5px solid var(--linha); border-radius: 14px; background: #fff; }
.plano--pago { border-color: #f1d98c; background: linear-gradient(180deg, #fffaf0, #fff 40%); }
.plano.is-atual { border-color: var(--azul-forte); box-shadow: 0 0 0 3px rgba(40, 120, 237, .12); }
.plano h3 { margin: 0; display: flex; align-items: center; gap: 6px; font: 800 17px var(--titulo); }
.plano h3 .coroa { width: 18px; height: 18px; }
.plano__preco { margin: 0; font: 800 22px var(--titulo); }
.plano__preco small { font: 600 13px var(--fonte); color: var(--texto-2); }
.plano__limite { margin: 0; font-weight: 700; color: var(--texto); }
.plano__desc { margin: 0; font-size: 13px; color: var(--texto-2); flex: 1; }
.plano .btn-calc { margin-top: 8px; min-height: 44px; font-size: 15px; }
.plano__atual { margin-top: 8px; align-self: flex-start; padding: 4px 10px; border-radius: 99px; background: #e8f0fe; color: var(--azul-forte); font: 800 12px var(--titulo); }
.planos__resultado { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: #e3f8f0; color: #0d6b4b; display: grid; gap: 10px; }
.planos__resultado p { margin: 0; }
.planos__resultado .btn-calc { display: grid; place-items: center; text-decoration: none; }
.planos__resultado.is-erro { background: #fdecea; color: var(--erro); }
@media (max-width: 760px) {
  .painel__acoes { gap: 10px; }
  .dlg { padding: 24px 18px 20px; }
}

.dlg__nota--destaque { padding: 10px 12px; border-radius: 10px; background: #eef6ff; color: var(--texto); font-size: 13px; }

/* ============================================================
   GAVETA DA CONTA (barra lateral à direita)
   ============================================================ */
.gaveta-fundo { position: fixed; inset: 0; z-index: 40; background: rgba(7, 20, 33, .35); opacity: 0; transition: opacity .2s; }
.gaveta-fundo.is-aberto { opacity: 1; }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(400px, 100vw); display: flex; flex-direction: column; background: #fff; box-shadow: -16px 0 40px rgba(7, 20, 33, .22); transform: translateX(100%); transition: transform .22s ease; }
.gaveta.is-aberta { transform: none; }
.gaveta__topo { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; background: var(--ink); color: #fff; }
.gaveta__topo h2 { margin: 0; font: 800 18px var(--titulo); }
.gaveta__fechar { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.gaveta__fechar:hover { background: rgba(255, 255, 255, .16); }
.gaveta__corpo { flex: 1; overflow-y: auto; padding: 18px 20px 28px; }
.gaveta [data-so] { display: none; }
.gaveta[data-vista="entrar"] [data-so~="entrar"], .gaveta[data-vista="criar"] [data-so~="criar"],
.gaveta[data-vista="semsenha"] [data-so~="semsenha"], .gaveta[data-vista="codigo"] [data-so~="codigo"],
.gaveta[data-vista="completar"] [data-so~="completar"], .gaveta[data-vista="conta"] [data-so~="conta"],
.gaveta[data-vista="dados"] [data-so~="dados"], .gaveta[data-vista="senha"] [data-so~="senha"] { display: grid; gap: 12px; }
.gaveta .abas { grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 18px; border-radius: 12px; background: var(--papel); }
.gaveta .abas button { height: 38px; border: 0; border-radius: 9px; background: none; color: var(--texto-2); font: 700 14px var(--fonte); cursor: pointer; }
.gaveta .abas button[aria-selected="true"] { background: #fff; color: var(--texto); box-shadow: 0 1px 4px rgba(7, 20, 33, .12); }
.gaveta .campo span em { font-style: normal; font-weight: 500; color: var(--texto-2); font-size: 12px; }
.gaveta .campo input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--linha); border-radius: 10px; font: inherit; background: #fff; }
.gaveta .campo input[readonly] { background: var(--papel); color: var(--texto-2); }
.gaveta .campo input:focus { border-color: var(--azul-forte); outline: none; box-shadow: 0 0 0 3px rgba(40, 120, 237, .15); }
.senha-campo__linha { position: relative; display: block; }
.senha-campo__linha input { padding-right: 76px !important; }
.senha-campo__linha .link-btn { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 12px; }
.gaveta .btn-calc { min-height: 46px; font-size: 15px; }
.gaveta .link-btn { justify-self: center; }
.link-btn--sutil { color: var(--texto-2) !important; font-weight: 600 !important; font-size: 13px !important; }
.gaveta__nota { margin: 0; font-size: 13px; color: var(--texto-2); }
.gaveta__nota--destaque { padding: 10px 12px; border-radius: 10px; background: #eef6ff; color: var(--texto); }
.gaveta .erro { margin: 0; }
.gaveta__ok { margin: 0; padding: 10px 12px; border-radius: 10px; background: #e3f8f0; color: #0d6b4b; font-size: 14px; font-weight: 600; }
.gaveta .perfil { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.avatar--g { position: relative; width: 56px; height: 56px; font-size: 20px; flex: none; background: var(--ink); }
.avatar--g.is-pago { border-color: var(--ouro); color: var(--ouro); }
.avatar--g .coroa { position: absolute; top: -14px; right: -8px; width: 26px; height: 26px; transform: rotate(18deg); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.perfil__txt { display: grid; min-width: 0; }
.perfil__txt b { font: 800 17px var(--titulo); }
.perfil__txt small { color: var(--texto-2); font-size: 13px; word-break: break-all; }
.plano-box { display: grid; gap: 6px; padding: 14px; border: 1.5px solid var(--linha); border-radius: 14px; }
.plano-box--pago { border-color: #f1d98c; background: linear-gradient(180deg, #fffaf0, #fff); }
.plano-box p { margin: 0; font-weight: 700; }
.plano-box small { color: var(--texto-2); }
.plano-box .link-btn { justify-self: start; }
.gaveta__menu { display: grid; margin-top: 16px; border: 1px solid var(--linha); border-radius: 14px; overflow: hidden; }
.gaveta__menu button, .gaveta__menu a { display: block; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--linha); background: #fff; color: var(--texto); font: 600 15px var(--fonte); text-align: left; text-decoration: none; cursor: pointer; }
.gaveta__menu > :last-child { border-bottom: 0; }
.gaveta__menu button:hover, .gaveta__menu a:hover { background: var(--papel); }
.gaveta__sair { color: var(--erro) !important; }
.conta-btn.is-pendente .avatar { border-color: var(--ambar); }
.conta-btn.is-pendente::after { content: ''; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--ambar); border: 2px solid var(--ink); }

/* ============================================================
   BARRA FIXA NO CANTO SUPERIOR DIREITO (planos, como funciona, conta)
   ============================================================ */
:root { --topo-w: 390px; }
.topo-dir { position: fixed; top: 16px; right: 16px; z-index: 30; display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 8px; border-radius: 16px; background: var(--ink); box-shadow: 0 10px 30px rgba(7, 20, 33, .28); }
.topo-dir__item { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: #c9d7e4; font: 700 13px var(--fonte); text-decoration: none; cursor: pointer; white-space: nowrap; }
.topo-dir__item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.topo-dir__planos { color: var(--ouro); }
.topo-dir__planos .coroa { width: 16px; height: 16px; }
.topo-dir .conta-btn { margin-left: 4px; }
.topo-dir .conta-btn--logado { margin: 0 4px 0 6px; }
/* "Ir para A, B, C…" centralizado no espaço livre entre o painel e a barra da direita */
.ir-para { left: calc(var(--painel-w) + 32px + (100% - var(--painel-w) - 32px - var(--topo-w)) / 2); max-width: calc(100% - var(--painel-w) - var(--topo-w) - 64px); }
body.painel-fechado .ir-para { left: calc((100% - var(--topo-w)) / 2); max-width: calc(100% - var(--topo-w) - 48px); }
@media (max-width: 760px) {
  .topo-dir { top: 10px; right: 10px; padding: 4px; gap: 2px; border-radius: 14px; }
  .topo-dir__sobre { display: none; }
  .topo-dir__item { height: 34px; padding: 0 10px; }
  .ir-para, body.painel-fechado .ir-para { top: 58px; left: 50%; max-width: calc(100% - 20px); }
}

.plano { padding-top: 22px; }
.plano__selo { position: absolute; top: -11px; left: 18px; padding: 3px 10px; border-radius: 99px; background: var(--ouro); color: #4a3500; font: 800 11px var(--titulo); text-transform: uppercase; letter-spacing: .04em; }
.plano.is-desejado { border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(245, 200, 76, .3); }
.plano__itens { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; font-size: 13px; color: var(--texto); }
.plano__itens li { position: relative; padding-left: 20px; }
.plano__itens li::before { content: ''; position: absolute; left: 2px; top: 5px; width: 9px; height: 5px; border-left: 2px solid #0d6b4b; border-bottom: 2px solid #0d6b4b; transform: rotate(-45deg); }
.btn-sec--p { margin-top: 8px; min-height: 44px; flex-direction: row; justify-content: center; }

/* ============================================================
   CARGA E OPERAÇÃO (piso ANTT) — formulário
   ============================================================ */
.campo--carga { margin-top: 12px; }
.operacao { display: grid; gap: 8px; margin-top: 12px; }
.operacao__rot { font-size: 13px; font-weight: 600; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--papel); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: grid; place-items: center; min-height: 36px; padding: 0 8px; border-radius: 9px; color: var(--texto-2); font-size: 13px; font-weight: 700; text-align: center; line-height: 1.2; }
.seg input:checked + span { background: #fff; color: var(--texto); box-shadow: 0 1px 4px rgba(7, 20, 33, .12); }
.seg input:focus-visible + span { outline: 3px solid var(--azul); outline-offset: 1px; }
.check-info { display: flex; align-items: center; gap: 8px; }
.check-info--retorno { margin: 0 0 14px; }
.info { flex: none; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1.5px solid #b3c1cf; border-radius: 50%; background: #fff; color: var(--texto-2); font: italic 700 12px/1 Georgia, serif; cursor: pointer; }
.info:hover, .info[aria-expanded="true"] { border-color: var(--azul-forte); color: var(--azul-forte); }
.dica { margin: -2px 0 12px; padding: 8px 10px; border-radius: 10px; background: #eef6ff; color: var(--texto); font-size: 12.5px; line-height: 1.45; }
.operacao .dica { margin: 0; }

/* ============================================================
   RESULTADO: rota, preço de venda e blocos recolhidos
   ============================================================ */
.rota-linha { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 2px 0; font-size: 13px; font-weight: 700; color: var(--texto-2); }
.rota-linha span + span::before { content: '·'; margin-right: 14px; color: #b3c1cf; }

.preco { margin-top: 12px; padding: 16px 16px 12px; border-radius: 16px; background: var(--ink); color: #fff; }
.preco__rot { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9fb3c7; }
.preco__valor { margin: 2px 0 6px; font: 800 30px/1.15 var(--titulo); color: var(--menta); letter-spacing: -.01em; }
.preco__selo { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.preco__selo--ok { background: rgba(112, 228, 188, .14); color: var(--menta); }
.preco__selo--alerta { background: rgba(242, 179, 61, .18); color: #ffd17c; }
.preco__sem { margin: 6px 0 4px; font-size: 14px; color: #ffd17c; font-weight: 600; }
.preco__carga { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12.5px; color: #c9d7e4; }
.preco__carga .link-btn { flex: none; color: var(--azul); font-size: 13px; }
.preco__editor { display: grid; gap: 10px; margin-top: 12px; padding: 12px; border-radius: 12px; background: #fff; color: var(--texto); }
.preco__editor .erro { margin: 0; }
.preco__editor-acoes { display: flex; align-items: center; gap: 14px; }
.btn-calc--p { flex: 1; min-height: 42px; font-size: 14px; }

.bloco { margin-top: 10px; border: 1px solid var(--linha); border-radius: 12px; background: #fff; }
.bloco > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px 11px 30px; list-style: none; position: relative; font-size: 14px; font-weight: 700; cursor: pointer; }
.bloco > summary::-webkit-details-marker { display: none; }
.bloco > summary::before { content: ''; position: absolute; left: 13px; top: 50%; width: 6px; height: 6px; margin-top: -4px; border-right: 2px solid var(--texto-2); border-bottom: 2px solid var(--texto-2); transform: rotate(-45deg); transition: transform .15s; }
.bloco[open] > summary::before { transform: rotate(45deg); margin-top: -5px; }
.bloco > summary small { font-weight: 600; font-size: 12px; color: var(--texto-2); }
.bloco > summary:hover { background: var(--papel); border-radius: 12px; }
.bloco[open] > summary { border-bottom: 1px solid var(--linha); border-radius: 12px 12px 0 0; }
.bloco--pedagio > summary b.is-parcial { color: #9a6b00; }
.check--resumo { flex: none; font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.bloco--pedagio .avisos, .bloco--pedagio .pedagio__parcial { margin: 10px 12px 0; }
.pedagio__parcial { padding: 8px 10px; border-radius: 10px; background: #fff7e0; color: #6b4f00; font-size: 12.5px; }
.bloco--pedagio .pracas { margin: 12px; }

.ajustes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
.campo--largo, .ajustes__nota, .ajustes .erro { grid-column: 1 / -1; }
.sufixo { position: relative; display: block; }
.sufixo input { width: 100%; height: 42px; padding: 0 30px 0 12px; border: 1px solid var(--linha); border-radius: 10px; background: #fff; font: inherit; }
.sufixo--antes input { padding: 0 12px 0 38px; }
.sufixo input:focus { border-color: var(--azul-forte); outline: none; box-shadow: 0 0 0 3px rgba(40, 120, 237, .15); }
.sufixo i { position: absolute; top: 50%; transform: translateY(-50%); right: 12px; font-style: normal; font-size: 13px; font-weight: 700; color: var(--texto-2); pointer-events: none; }
.sufixo--antes i { right: auto; left: 12px; }
.ajustes__nota { margin: 0; font-size: 12px; color: var(--texto-2); }
.ajustes .erro { margin: 0; }

.composicao { width: calc(100% - 24px); margin: 10px 12px 12px; border-collapse: collapse; font-size: 13px; }
.composicao th { padding: 7px 0; text-align: left; font-weight: 600; }
.composicao th small { display: block; font-weight: 500; font-size: 11.5px; color: var(--texto-2); }
.composicao td { padding: 7px 0; text-align: right; font-weight: 700; white-space: nowrap; vertical-align: top; }
.composicao td small { font-weight: 600; color: var(--texto-2); }
.composicao tr + tr { border-top: 1px solid var(--linha); }
.composicao__total th, .composicao__total td { padding-top: 10px; font: 800 15px var(--titulo); }
.composicao caption { caption-side: bottom; padding-top: 8px; text-align: left; font-size: 11px; color: var(--texto-2); }

.compartilhar { margin-top: 12px; }

/* Piso ANTT ao lado do selo, regra de eixos e subtotal do piso */
.preco__linha-piso { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.preco__piso { font-size: 12.5px; font-weight: 700; color: #c9d7e4; }
.preco__regra { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: #9fb3c7; }
.composicao__sub th, .composicao__sub td { color: var(--texto-2); }

/* Tipo de carga tem nomes longos: mais espaço que o campo de eixos */
.veic > .campo--tipo { flex: 2; }

/* Sugestões de endereço: ícone (cidade / rua) e aviso discreto enquanto o servidor responde */
.sugestoes li { display: flex; align-items: center; gap: 8px; }
.sugestoes li svg { flex: none; width: 15px; height: 15px; color: var(--texto-2); }
.sugestoes li.is-ativo svg, .sugestoes li:hover svg { color: var(--azul-forte); }
.sugestoes li span { min-width: 0; }
.sugestoes__buscando { color: var(--texto-2); font-size: 12.5px !important; cursor: default !important; background: none !important; }
.sugestoes__pulso { width: 8px; height: 8px; border-radius: 50%; background: var(--azul-forte); animation: calc-pulso 1s ease-in-out infinite; }

/* Prévia dos pontos enquanto a rota é calculada */
.marcador--previa { opacity: .75; animation: calc-pulso 1.2s ease-in-out infinite; cursor: default; }

/* ============ Aviso "Calculando rota" no meio da área livre do mapa ============ */
.carregando-mapa {
  position: absolute; z-index: 4; top: 50%;
  left: calc(var(--painel-w) + 32px + (100% - var(--painel-w) - 32px) / 2); transform: translate(-50%, -50%);
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px;
  min-width: 270px; padding: 14px 18px 16px; border-radius: 16px; overflow: hidden;
  background: rgba(7, 20, 33, .92); color: #fff; box-shadow: var(--sombra);
  pointer-events: none; animation: carregando-entra .25s ease-out;
}
body.painel-fechado .carregando-mapa { left: 50%; }
.carregando-mapa__icone { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(115, 215, 244, .14); color: var(--azul); }
.carregando-mapa__icone svg { width: 22px; height: 22px; animation: carregando-caminhao .9s ease-in-out infinite; }
.carregando-mapa__txt { display: grid; }
.carregando-mapa__txt b { font: 800 14px var(--titulo); }
.carregando-mapa__txt small { font-size: 12px; color: #9fb3c7; }
.carregando-mapa__barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(115, 215, 244, .15); }
.carregando-mapa__barra::after { content: ''; position: absolute; top: 0; bottom: 0; width: 35%; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--azul), var(--menta)); animation: carregando-barra 1.3s ease-in-out infinite; }
@keyframes carregando-barra { from { left: -35%; } to { left: 100%; } }
@keyframes carregando-caminhao { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes carregando-entra { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 760px) { .carregando-mapa, body.painel-fechado .carregando-mapa { left: 50%; top: 23vh; min-width: 0; width: max-content; max-width: calc(100% - 32px); padding: 12px 14px 14px; } .carregando-mapa__txt b { font-size: 13px; white-space: nowrap; } }
@media (prefers-reduced-motion: reduce) { .carregando-mapa__icone svg, .carregando-mapa__barra::after { animation-duration: 3s; } }

/* Três ações: PDF para o cliente (principal, linha inteira), PDF interno e copiar resumo */
.compartilhar--3 { grid-template-columns: 1fr 1fr; }
.compartilhar__principal { grid-column: 1 / -1; min-height: 42px; font-size: 14px; }

/* ============================================================
   MINHA EMPRESA (marca do PDF)
   ============================================================ */
.gaveta[data-vista="marca"] [data-so~="marca"] { display: grid; gap: 12px; }
.gaveta__menu button small { display: block; font-size: 12px; font-weight: 500; color: var(--texto-2); }
.marca-previa { position: relative; overflow: hidden; border: 1px solid var(--linha); border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(7, 20, 33, .08); font-size: 11px; }
.marca-previa.is-dagua::after { content: ''; position: absolute; inset: 40px 30px 30px; background: var(--dagua) center / contain no-repeat; opacity: .07; pointer-events: none; }
.marca-previa__topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 8px 12px; }
.marca-previa__logo { display: flex; align-items: center; min-width: 0; max-width: 55%; height: 26px; }
.marca-previa__logo img { max-width: 100%; max-height: 26px; object-fit: contain; }
.marca-previa__logo b { font: 800 14px var(--titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca-previa__contato { color: var(--texto-2); font-size: 10px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marca-previa__faixa { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; }
.marca-previa__faixa b { font: 800 11px var(--titulo); letter-spacing: .03em; }
.marca-previa__faixa small { font-size: 10px; opacity: .85; }
.marca-previa__linha { height: 3px; }
.marca-previa__corpo { display: flex; align-items: center; gap: 12px; padding: 12px; }
.marca-previa__ponto { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 800 11px var(--titulo); }
.marca-previa__valor { flex: 1; display: grid; padding: 8px 12px; border-radius: 9px; }
.marca-previa__valor small { font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.marca-previa__valor b { font: 800 17px var(--titulo); }
.marca-previa__rodape { display: flex; justify-content: space-between; gap: 8px; padding: 6px 12px 8px; border-top: 1px solid var(--linha); font-weight: 700; }
.marca-previa__rodape small { color: var(--texto-2); font-weight: 500; font-size: 9px; }

.marca-logo { display: flex; align-items: center; gap: 12px; }
.marca-logo__img { flex: none; display: grid; place-items: center; width: 110px; height: 56px; padding: 6px; border: 1px dashed #b3c1cf; border-radius: 10px; background: #fff; color: var(--texto-2); font-size: 12px; }
.marca-logo__img:not(.is-vazio) { border-style: solid; border-color: var(--linha); }
.marca-logo__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.marca-logo__acoes { display: grid; gap: 4px; justify-items: start; }
.marca-logo__acoes small { font-size: 11.5px; color: var(--texto-2); }
.marca-logo__enviar { cursor: pointer; }

.marca-cores { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.marca-cores legend { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; margin-bottom: 4px; font-size: 13px; font-weight: 700; }
.marca-cores legend .link-btn { font-size: 12.5px; }
.marca-cor { display: grid; grid-template-columns: 38px 1fr 84px; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--linha); border-radius: 10px; cursor: pointer; }
.marca-cor input[type="color"] { width: 38px; height: 30px; padding: 0; border: 0; border-radius: 7px; background: none; cursor: pointer; }
.marca-cor input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.marca-cor input[type="color"]::-webkit-color-swatch { border: 1px solid rgba(7, 20, 33, .15); border-radius: 7px; }
.marca-cor span { display: grid; line-height: 1.25; }
.marca-cor b { font-size: 13px; }
.marca-cor small { font-size: 11.5px; color: var(--texto-2); }
.gaveta .marca-cor__hex { width: 84px; height: 32px; padding: 0 8px; font: 600 12.5px ui-monospace, monospace; text-transform: lowercase; }
.marca-aviso { margin: 0; padding: 8px 10px; border-radius: 9px; background: #fff7e0; color: #6b4f00; font-size: 12px; }
.marca-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gaveta .btn-sec--p { margin-top: 0; min-height: 42px; flex-direction: row; justify-content: center; }

/* Marca no PDF: só planos pagos. No Grátis, o formulário dá lugar ao convite. */
.marca-bloqueio { display: none; }
#fMarca.is-bloqueado > *:not(.marca-bloqueio) { display: none !important; }
#fMarca.is-bloqueado .marca-bloqueio { display: grid; gap: 10px; padding: 16px; border-radius: 14px; background: #fff8e1; border: 1px solid #f3dc9b; }
.marca-bloqueio > b { font: 800 16px var(--titulo); color: #7a5600; }
.marca-bloqueio p { margin: 0; font-size: 14px; }

/* ============ Marcar o ponto exato no mapa (2026-11-11) ============ */
.ponto__mapa { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin: 0 -2px 0 -2px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--texto-2); cursor: pointer; }
.ponto__mapa svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ponto__mapa:hover { background: var(--papel); color: var(--azul-forte); }
.ponto__mapa.is-exato { color: var(--azul-forte); }
.ponto__mapa.is-exato svg { fill: rgba(40, 120, 237, .18); }
.ponto__mapa.is-escolhendo { border-color: var(--azul-forte); background: #eef5ff; color: var(--azul-forte); animation: calc-pulso 1.2s ease-in-out infinite; }

.marcar-aviso {
  position: absolute; z-index: 5; top: 16px;
  left: calc(var(--painel-w) + 32px + (100% - var(--painel-w) - 32px - var(--topo-w)) / 2); transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; max-width: calc(100% - var(--painel-w) - var(--topo-w) - 64px);
  padding: 8px 8px 8px 16px; border-radius: 14px; background: rgba(7, 20, 33, .94); color: #fff;
  font-size: 14px; box-shadow: var(--sombra); animation: carregando-entra .2s ease-out;
}
.marcar-aviso b { color: var(--azul); }
.marcar-aviso button { flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .1); color: #fff; font: 700 13px var(--fonte); cursor: pointer; }
.marcar-aviso button:hover { background: rgba(255, 255, 255, .2); }
body.painel-fechado .marcar-aviso { left: calc((100% - var(--topo-w)) / 2); max-width: calc(100% - var(--topo-w) - 48px); }
body.marcando .ir-para { display: none; }
body.marcando .maplibregl-canvas-container.maplibregl-interactive, body.marcando .maplibregl-canvas { cursor: crosshair; }
.marcador--exato { cursor: grab; }
.marcador--exato:active { cursor: grabbing; }
@media (max-width: 760px) {
  .marcar-aviso, body.painel-fechado .marcar-aviso { top: 58px; left: 50%; max-width: calc(100% - 20px); font-size: 13px; }
}

/* ============================================================
   RECURSOS DO PROFISSIONAL bloqueados no Grátis: visíveis, apagados, com coroa (2026-11-11)
   ============================================================ */
.link-btn.is-pro { display: inline-flex; align-items: center; gap: 5px; color: var(--texto-2); }
.link-btn.is-pro small { padding: 1px 7px; border-radius: 99px; background: #fff6dc; color: #8a6200; font-size: 11px; font-weight: 800; }
.link-btn.is-pro:hover { color: var(--texto); }
.btn-mini.is-pro { gap: 5px; background: #f3f4f6; border-color: var(--linha); border-style: dashed; color: var(--texto-2); }
.btn-mini.is-pro:hover { background: #fff6dc; border-color: var(--ouro-escuro); color: #8a6200; }
.btn-mini.is-pro svg:not(.coroa) { display: none; }
.btn-mini.is-pro .coroa { width: 15px; height: 15px; margin: 0; }
.bloco.is-pro > summary { color: var(--texto-2); }
.bloco.is-pro > summary:hover { color: #8a6200; }
.bloco.is-pro #ajustesResumo { padding: 1px 7px; border-radius: 99px; background: #fff6dc; color: #8a6200; font-size: 11px; font-weight: 800; }
.ajustes__coroa:empty { display: none; }
.ajustes__coroa { display: inline-flex; margin-right: 6px; }
.bloco.is-pro > summary { justify-content: flex-start; }
.bloco.is-pro #ajustesResumo { margin-left: auto; }
.btn-calc--pro { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; background: var(--ink); color: var(--ouro); }
.btn-calc--pro:hover { background: var(--ink-3); }
.btn-calc--pro[hidden] { display: none; }

/* ============ Pedágio: lista em uma linha, alerta e cartão no mapa (2026-11-11) ============ */
.pracas strong i { font-style: normal; color: #9a6b00; margin-left: 1px; }
.pracas strong.is-nao-oficial { color: #9a6b00; }
.pracas .sem-tarifa { font-size: 11.5px; }
.pracas__vazio { margin: 0; font-size: 13px; color: var(--texto-2); }
.alerta { position: relative; font: 700 12px var(--fonte); }
.alerta > summary { list-style: none; padding: 3px 9px; border-radius: 99px; background: #fff3cc; border: 1px solid #f1d58a; color: #7a5700; cursor: pointer; white-space: nowrap; }
.alerta > summary::-webkit-details-marker { display: none; }
.alerta--info > summary { background: var(--papel); border-color: var(--linha); color: var(--texto-2); }
.alerta[open] > summary { background: #ffe9a8; }
.alerta__caixa { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: min(300px, 80vw); padding: 10px 12px; border-radius: 12px; background: #fffaf0; border: 1px solid #f1d58a; box-shadow: 0 8px 24px rgba(7, 20, 33, .18); font: 500 12.5px/1.4 var(--fonte); color: #5c4400; }
.alerta__caixa p { margin: 0; }
.alerta__caixa p + p { margin-top: 6px; }
.alerta__base { color: var(--texto-2); }
.pop-praca .maplibregl-popup-content { padding: 10px 12px; border-radius: 12px; box-shadow: 0 8px 24px rgba(7, 20, 33, .22); }
.praca-pop p { margin: 0; }
.praca-pop__topo { display: flex; align-items: center; gap: 7px; font: 800 13px var(--titulo); color: var(--ink); }
.praca-pop__sub { margin-top: 3px !important; font-size: 11.5px; color: var(--texto-2); }
.praca-pop__valor { margin-top: 6px !important; font: 800 16px var(--titulo); color: var(--ink); display: flex; align-items: baseline; gap: 6px; }
.praca-pop__valor small { font: 600 11px var(--fonte); color: var(--texto-2); }
.praca-pop__nota { margin-top: 4px !important; font-size: 11.5px; font-weight: 600; color: #9a6b00; }

/* ============ Ícones do mapa (rota inteira e tema) e alerta do pedágio dentro do card (2026-11-11) ============ */
.mapa-icone { background: none !important; box-shadow: none !important; }
.mapa-icone[hidden] { display: none; }
.mapa-icone__botao, .tema__botao.mapa-icone__botao { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; gap: 0; border: 0; border-radius: 10px; background: #fff; box-shadow: var(--sombra-p); color: var(--texto); cursor: pointer; }
.mapa-icone__botao:hover { color: var(--azul-forte); }
.mapa-icone__botao svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* A caixa do alerta ocupa a largura da lista de praças (antes saía para fora do card). */
.pracas { position: relative; }
.pracas .alerta { position: static; }
.pracas .alerta__caixa { left: 0; right: 0; width: auto; top: auto; margin-top: 6px; }

/* ============ Cartão dos pontos da rota no mapa e "mover ponto" (2026-11-11) ============ */
.ponto-pop p { margin: 0; }
.ponto-pop__topo { display: flex; align-items: center; gap: 7px; font: 800 13px var(--titulo); color: var(--ink); }
.ponto-pop__topo .ponto__letra { width: 22px; height: 22px; font-size: 11px; }
.ponto-pop__nome { margin-top: 5px !important; font-size: 12.5px; font-weight: 600; color: var(--texto); }
.ponto-pop__coord { margin-top: 3px !important; font-size: 11px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.ponto-pop__acoes { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.ponto-pop__acoes .btn-mini { min-height: 32px; font-size: 12.5px; }
.ponto-pop__acoes .btn-mini svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.ponto-pop__acoes .link-btn { font-size: 12.5px; }
.pop-praca .maplibregl-popup-close-button { font-size: 18px; padding: 0 6px; color: var(--texto-2); }
.marcador.is-movendo { cursor: grab; outline: 3px solid var(--azul); outline-offset: 2px; animation: calc-pulso 1.2s ease-in-out infinite; }
.marcador.is-movendo:active { cursor: grabbing; animation: none; }
.ponto-pop__acoes .btn-mini { white-space: nowrap; padding: 0 12px; }
.ponto-pop__dica { margin-top: 6px !important; font-size: 11px; font-weight: 600; color: var(--azul-forte); }
.marcador { cursor: grab; }
.marcador:active { cursor: grabbing; }

/* ============ Lucro da viagem (2026-11-11): campos discretos no formulário + linha explicada no card ============ */
.custos { display: grid; gap: 6px; margin-top: 12px; }
.custos__rot { display: flex; align-items: center; gap: 6px; }
.custos__rot small { font-size: 12px; font-weight: 500; color: var(--texto-2); }
.custos.is-pro .custos__rot { cursor: pointer; }
.custos.is-pro .custos__rot small { padding: 1px 7px; border-radius: 99px; background: #fff6dc; color: #8a6200; font-size: 11px; font-weight: 800; }
.custos__rot .coroa { width: 14px; height: 14px; }
.custos__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.custos__campos .campo > span:first-child { font-size: 12px; font-weight: 600; color: var(--texto-2); }
.custos__campos .sufixo input { height: 38px; }
.custos__campos .sufixo:not(.sufixo--antes) input { padding-right: 42px; }
.custos.is-pro .sufixo input { background: #f3f4f6; border-style: dashed; cursor: pointer; }
.custos .erro { margin: 0; }
.preco__lucro { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .1); }
.preco__lucro:empty { display: none; }
.preco__lucro p { margin: 0; }
.preco__lucro-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; color: #c9d7e4; }
.preco__lucro-linha b { font: 800 14px var(--titulo); }
.preco__lucro-linha b.is-pos { color: #5fe3a1; }
.preco__lucro-linha b.is-neg { color: #ff8a80; }
.preco__lucro-conta { margin-top: 3px !important; font-size: 11.5px; color: #93a7ba; }
.preco__lucro-conta small { font-size: 11px; }
.preco__lucro-conta.is-neg { color: #ffb4ad; }
.composicao__lucro th, .composicao__lucro td { font-weight: 800; color: #0d6b4b; }
.custos__campos .sufixo:not(.sufixo--antes) input { padding-right: 12px; }
.custos__rot { white-space: nowrap; }

/* ============ Resultado enxuto (2026-11-11): detalhes atrás do "i" do preço ============ */
.preco__rot { display: flex; align-items: center; gap: 8px; }
.preco__info { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: none; color: #c9d7e4; font: italic 700 11px Georgia, serif; text-transform: none; letter-spacing: 0; cursor: pointer; }
.preco__info:hover, .preco__info[aria-expanded="true"] { background: var(--azul); border-color: var(--azul); color: var(--ink); }
.preco__lucro-conta:not(.is-neg) { display: none; }
.preco.is-detalhe .preco__lucro-conta { display: block; }
.bloco--conta { padding: 10px 12px 4px; }
.bloco--conta__tit { margin: 0 0 6px; font-size: 13px; font-weight: 800; }
.bloco--conta .preco__regra { margin: 0 0 6px; color: var(--texto-2); }