:root { --navy:#0A1E4A; --navy-2:#112C6B; --royal:#1F4FD6; --royal-hi:#3C6DF2; --sky:#E7EEFC; --ink:#0E1A33; --muted:#566789; --line:#D7E0F0; --bg:#EBF0F9; --card:#fff;
  --ok:#0E7F55; --ok-bg:#DDF3E9; --warn:#8F5B00; --warn-bg:#FFEFC9; --bad:#B0302B; --bad-bg:#FCE2E0; --info:#1B45B8; --info-bg:#E2EAFD;
  --metal:linear-gradient(135deg,#8DA2C8 0%,#EAF1FC 26%,#B3C3DF 47%,#F8FBFF 62%,#8CA2C7 100%); }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; max-width: 100%; overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; }
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-size: 112.5%; } /* 18 px: letra maior para ler no celular, dentro do carro e com pressa */
img, svg, video { max-width: 100%; }
body, .card, .banner, .prow .quem, td, th, h1, h2, h3 { overflow-wrap: anywhere; }
body { background: var(--bg); color: var(--ink); font: 400 1rem/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--royal-hi); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
#app { min-height: calc(100vh / var(--z, 1)); min-height: calc(100dvh / var(--z, 1)); display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 20; background: var(--navy); padding: 8px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--metal); }
.top img { height: 30px; width: auto; max-width: 48%; object-fit: contain; display: block; }
.top .sp { flex: 1; min-width: 0; }
.net { max-width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 10px; font-size: .9rem; font-weight: 600; min-height: 36px; display: inline-flex; align-items: center; gap: 6px; }
.net::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.net.on { color: var(--ok); background: var(--ok-bg); border-color: #A9DCC4; } .net.off { color: var(--bad); background: var(--bad-bg); border-color: #F2B5B0; } .net.sync { color: var(--info); background: var(--info-bg); border-color: #B9C9F3; }
.corpo { flex: 1; min-width: 0; padding: 14px; display: flex; flex-direction: column; gap: 12px; max-width: 40rem; width: 100%; margin: 0 auto; padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
.pagina-login { justify-content: center; }
h3.tit { font-size: 1.3125rem; line-height: 1.2; } .mut { color: var(--muted); font-size: 1rem; } .num { font-variant-numeric: tabular-nums; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.card h3 { font-size: 1.25rem; line-height: 1.2; }
.meta { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 1rem; } .meta span { display: flex; align-items: center; gap: 7px; }
.linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn { max-width: 100%; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1.5px solid var(--line); background: #fff; border-radius: 12px; min-height: 46px; padding: 8px 16px; font-weight: 600; color: var(--ink); }
.btn.peq { min-height: 42px; padding: 4px 14px; font-size: 1rem; }
.btn.pri { background: linear-gradient(180deg, var(--royal-hi), var(--royal)); border-color: #1a45bb; color: #fff; }
.btn.vermelho { background: linear-gradient(180deg, #D8402F, #B1261A); border-color: #8F1D13; color: #fff; }
.btn.verde { background: linear-gradient(180deg, #128F61, #0B6B47); border-color: #0B5E3F; color: #fff; }
.btn.perigo { background: var(--bad); border-color: #8f2420; color: #fff; }
.btn.grande { width: 100%; min-height: 52px; border-radius: 13px; font-weight: 700; font-size: 1rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 11px; font-size: .88rem; font-weight: 600; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.p-ok { background: var(--ok-bg); color: var(--ok); } .p-warn { background: var(--warn-bg); color: var(--warn); } .p-bad { background: var(--bad-bg); color: var(--bad); } .p-info { background: var(--info-bg); color: var(--info); } .p-neutral { background: #E9EDF5; color: #46556F; }
.tag { display: inline-block; font-size: .84rem; font-weight: 600; padding: 2px 9px; border-radius: 6px; background: var(--sky); color: var(--info); margin-right: 4px; }
.tag.acomp { background: #EEE9FB; color: #4F3FA8; } .tag.fora { background: var(--warn-bg); color: var(--warn); } .tag.ok { background: var(--ok-bg); color: var(--ok); }
.banner { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-radius: 12px; font-size: 1rem; border: 1px solid; }
.b-bad { background: var(--bad-bg); border-color: #F2B5B0; color: #7A1F1B; } .b-info { background: var(--info-bg); border-color: #B9C9F3; color: #173A99; }
.b-warn { background: var(--warn-bg); border-color: #EBCB86; color: #6B4400; } .b-ok { background: var(--ok-bg); border-color: #A9DCC4; color: #0B5E3F; }
.banner .acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: #E3E9F6; border-radius: 12px; padding: 3px; }
.seg button { border: 0; background: transparent; border-radius: 10px; padding: 9px; font-weight: 700; color: var(--muted); min-height: 42px; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(10,30,74,.2); }
.prog { height: 8px; background: #E0E7F4; border-radius: 99px; overflow: hidden; } .prog i { display: block; height: 100%; background: var(--ok); transition: width .2s; }
.prow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; background: #fff; border: 1.5px solid var(--line); border-radius: 13px; min-height: 60px; }
.prow[aria-pressed="true"] { border-color: var(--ok); background: #F1FAF6; }
.prow .quem { flex: 1; min-width: 0; } .prow .quem b { display: block; font-size: 1.1rem; overflow-wrap: anywhere; } .prow .quem small { color: var(--muted); font-size: .95rem; }
.chk { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: #fff; flex: none; }
.prow[aria-pressed="true"] .chk { background: var(--ok); border-color: var(--ok); } .chk .ico { width: 16px; height: 16px; stroke-width: 3; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--sky); color: var(--info); display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex: none; }
.pilha { display: flex; flex-direction: column; gap: 8px; }
.fld { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 1rem; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea { width: 100%; padding: 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font-weight: 400; font-size: 1rem; }
textarea { min-height: 96px; resize: vertical; }
.opts { display: flex; gap: 6px; flex-wrap: wrap; } .opts button { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 600; min-height: 42px; }
.opts button[aria-pressed="true"] { border-color: var(--royal); background: var(--info-bg); color: var(--info); }
.opts.grav button { flex: 1; border-radius: 12px; }
.opts.grav button[data-g="grave"][aria-pressed="true"] { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); }
.erro { color: var(--bad); font-weight: 600; }
.abas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border-top: 1px solid var(--line); padding: 6px 6px calc(8px + env(safe-area-inset-bottom, 0px)); }
.abas button { min-width: 0; overflow-wrap: normal; hyphens: none; text-align: center; line-height: 1.15; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border-radius: 10px; font-size: clamp(.62rem, 3.2vw, .8rem); font-weight: 600; color: var(--muted); min-height: 52px; position: relative; }
.abas button[aria-current="page"] { color: var(--royal); background: var(--sky); } .abas .ico { width: 22px; height: 22px; }
.abas .bolinha { position: absolute; top: 4px; right: calc(50% - 22px); background: var(--bad); color: #fff; border-radius: 99px; font-size: 0.6875rem; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; }
dialog { border: 0; border-radius: 18px; padding: 18px; width: min(92vw, 30rem); max-height: calc(100svh / var(--z, 1) - 1.5rem); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-shadow: 0 12px 40px #0A1E4A55; } dialog::backdrop { background: #0A1E4A88; }
dialog h2 { font-size: 1.15rem; margin-bottom: .4rem; } dialog .fld { margin-top: .6rem; } dialog .btn.grande { margin-top: .7rem; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-top: .6rem; } .check input { width: 22px; height: 22px; }
.foto-prev { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.fiscal { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .fiscal .fh { background: var(--navy); color: #fff; padding: 12px 14px; } .fiscal .fh small { color: #B9CBF3; display: block; }
.fiscal .dados { padding: 10px 14px; display: grid; gap: 2px; font-size: 1rem; }
.fiscal table { width: 100%; border-collapse: collapse; font-size: 1rem; } .fiscal th, .fiscal td { padding: 8px 10px; text-align: left; border-top: 1px solid var(--line); vertical-align: top; } .fiscal th { background: var(--sky); font-size: .8rem; }
.fiscal .ff { padding: 10px 14px; font-size: .95rem; color: var(--muted); border-top: 1px solid var(--line); }

/* REGRA DE TELA: nada de largura fixa em px; textos em rem (seguem a fonte do aparelho); tudo quebra linha em vez de cortar. Conferir com e2e/telas.py */
dialog { max-height: calc(90vh / var(--z, 1)); overflow-y: auto; }

.cron { background: linear-gradient(180deg, var(--navy-2), var(--navy)); color: #fff; border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cron small { color: #B9CBF3; font-size: .95rem; text-align: center; }
.cron .cron-t { font-size: clamp(1.6rem, 9vw, 2.4rem); font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1.1; }
.cron-mini { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--info); }

.acoes-pausa { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 8px; }
.card.jornada { align-items: center; text-align: center; gap: 2px; } .card.jornada .linha { width: 100%; }
.jornada-t { font-size: clamp(1.4rem, 8vw, 2rem); font-variant-numeric: tabular-nums; line-height: 1.1; }
.alertinha { background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 5px 10px; font-size: 1rem; font-weight: 600; margin-top: 6px; }
.dica{color:#5b6b8a;font-size:1rem;margin:.4rem 0 0}

/* Lista de passageiros (fiscalização): linhas compactas, sem tabela que quebra */
.fiscal .dados { font-size: .9rem; } .fiscal { font-size: .9rem; }
.fcab, .frow { display: grid; grid-template-columns: 1.6rem 1fr 2.6rem 2.6rem; align-items: center; gap: 4px; padding: 6px 10px; }
.fcab { background: var(--sky); font-size: .72rem; font-weight: 700; } .fcab span:first-child { grid-column: 1 / 3; } .fcab span:not(:first-child) { text-align: center; }
.frow { border-top: 1px solid var(--line); } .frow .fn { color: var(--muted); font-size: .8rem; }
.frow .fq b { display: block; font-size: .88rem; line-height: 1.2; font-weight: 600; } .frow .fq small { color: var(--muted); font-size: .78rem; }
.frow .fm { text-align: center; color: var(--muted); } .frow .fm.ok { color: var(--ok); font-weight: 800; }
.fiscal.grande .frow .fq b { font-size: 1.15rem; } .fiscal.grande .frow .fq small { font-size: 1rem; } .fiscal.grande .dados { font-size: 1.1rem; }
.linha-bt { display: flex; gap: 8px; flex-wrap: wrap; margin: .6rem 0; } .linha-bt .btn { flex: 1; min-width: 9rem; }
@media print { .abas, header, .topo, .linha-bt, .banner { display: none !important; } body { background: #fff; } .fiscal { border: 0; } .fiscal .fh { background: #fff; color: #000; } .fiscal .fh small { color: #333; } }


/* Pedido de ajuda (socorro) */
dialog.sos-dlg { padding: 0; overflow-x: hidden; }
.sos-topo { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, var(--navy), var(--royal)); color: #fff; position: sticky; top: 0; z-index: 2; }
.sos-topo h2 { margin: 0; color: #fff; font-size: 1.25rem; } .sos-topo span { font-size: .95rem; opacity: .9; }
.sos-sirene { font-size: 1.7rem; width: 46px; height: 46px; border-radius: 50%; background: #ffffff26; display: grid; place-items: center; flex: none; }
.sos-corpo { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.sos-grupo { border-radius: 14px; overflow: hidden; border: 1.5px solid var(--line); background: #fff; }
.sos-grupo-h { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: #fff; font-size: 1.05rem; min-height: 52px; }
.sos-grupo.veiculo .sos-grupo-h { background: linear-gradient(135deg, var(--navy), var(--royal)); }
.sos-grupo.paciente .sos-grupo-h { background: linear-gradient(135deg, #0B6B47, #1AA37A); }
.sos-veic { height: 38px; width: auto; max-width: 84px; object-fit: contain; background: #ffffffd9; border-radius: 10px; padding: 2px 6px; }
.sos-cruz { width: 34px; height: 34px; fill: #fff; background: #ffffff26; border-radius: 10px; padding: 6px; flex: none; }
.sos-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.sos-op { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 10px 6px; min-height: 92px; background: var(--sky); border: 2px solid transparent; border-radius: 12px; }
.sos-emoji { font-size: 1.9rem; line-height: 1; } .sos-txt { font-weight: 700; font-size: .98rem; line-height: 1.15; }
.sos-grupo.veiculo .sos-op[aria-pressed="true"] { border-color: var(--royal); background: #fff; box-shadow: 0 0 0 3px #1F4FD633; }
.sos-grupo.paciente .sos-op { background: #E3F5EE; }
.sos-grupo.paciente .sos-op[aria-pressed="true"] { border-color: var(--ok); background: #fff; box-shadow: 0 0 0 3px #0E7F5533; }
.sos-gps { font-size: .95rem; padding: 8px 10px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); } .sos-gps.ok { background: var(--ok-bg); color: var(--ok); }
dialog.sos-dlg .btn.grande { margin-top: 0; }
.sos-grupo.tel .sos-grupo-h { background: linear-gradient(135deg, #8F5B00, #D98E0B); } .sos-ic { font-size: 1.5rem; width: 34px; text-align: center; }
.sos-tel { padding: 10px; } .sos-tel .banner { margin-bottom: 8px; } .sos-tel .pilha { margin: 0 0 8px !important; }
.sos-sep { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; } .sos-sep b { font-size: 1.15rem; }
.sos-tel .prow { min-height: 48px; padding: 6px 10px; gap: 8px; } .sos-tel .prow .quem b { font-size: 1rem; } .sos-tel .prow .quem small { font-size: .85rem; line-height: 1.2; }
.sos-tel .pilha { gap: 6px; }

/* Destinos da viagem */
.dest-linha { display: block; }
.dest { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; background: #fff; border: 1.5px solid var(--line); border-radius: 13px; min-height: 60px; }
.dest:active { background: var(--sky); }
.dest-pin { font-size: 1.5rem; flex: none; } .dest-tx { flex: 1; min-width: 0; } .dest-tx b { display: block; font-size: 1.05rem; } .dest-tx small { display: block; color: var(--muted); font-size: .9rem; line-height: 1.25; }
.dest-go { font-size: 1.6rem; color: var(--royal); flex: none; }
a.btn { text-decoration: none; }

.sos-tel-bt { width: 100%; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; } .sos-seta { margin-left: auto; font-size: 1.3rem; padding-right: 6px; }
.sos-corpo .foto-prev { max-width: 100%; max-height: 220px; border-radius: 10px; margin: 6px 0; display: block; } .sos-corpo .foto-prev[hidden], .sos-tel[hidden] { display: none; }
.fiscal.grande .lp td, .fiscal.grande .lp th { font-size: 16px; } .fiscal .lp { padding: 10px; } .fiscal .lp table th, .fiscal .lp table td { border: 1px solid #333; }

.def-grade { grid-template-columns: repeat(3, 1fr); padding: 0; } .def-op { background: #fff; border-color: var(--line); min-height: 84px; }
.def-op[aria-pressed="true"] { border-color: var(--royal); background: var(--info-bg); box-shadow: 0 0 0 3px #1F4FD633; }
.opts.grav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 66px; line-height: 1.15; font-size: 1.1rem; }
.opts.grav button small { font-size: .85rem; font-weight: 600; }
.opts.grav button[data-g="leve"] { border-color: #8CD3B6; background: #E3F5EE; color: #0B6B49; }
.opts.grav button[data-g="leve"][aria-pressed="true"] { border-color: var(--ok); background: #CFEFE1; box-shadow: 0 0 0 3px #0E7F5533; }
.opts.grav button[data-g="grave"] { border-color: #F0A8A8; background: #FDECEC; color: var(--bad); }
.opts.grav button[data-g="grave"][aria-pressed="true"] { border-color: var(--bad); background: #FAD4D4; box-shadow: 0 0 0 3px #C0392B33; }

/* ---- Botões padrão (iguais aos do painel): metalizados; só a cor muda (azul = principal, vermelho = perigo/socorro, verde = confirmar) ---- */
.btn { background: linear-gradient(180deg, #FFFFFF 0%, #E6EDF9 52%, #CBD8EE 100%); border: 1.5px solid #8FA5CC; color: var(--navy); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 3px rgba(10,30,74,.18); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(10,30,74,.2); }
.btn.pri { background: linear-gradient(180deg, #2F63EA, #1A43B5); border-color: #143594; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 6px -2px rgba(20,53,148,.6); }
.btn.vermelho, .btn.perigo { background: linear-gradient(180deg, #E24B39, #B1261A); border-color: #8F1D13; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 6px -2px rgba(143,29,19,.6); }
.btn.verde { background: linear-gradient(180deg, #17A06E, #0B6B47); border-color: #0B5E3F; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 6px -2px rgba(11,94,63,.6); }

.pwrap { display: grid; gap: 6px; } .prow .quem small.emb { color: var(--text, #1B2A41); font-weight: 600; margin-top: 2px; } .emb-nav { padding: 0 4px 4px; gap: 8px; flex-wrap: wrap; }
.prow .quem small.emb { display: block; }

/* Botão de pedir ajuda: discreto, âmbar suave, ao lado da Secretaria */
.ajuda-linha { margin: 0; flex-wrap: nowrap; } .ajuda-linha .btn { margin: 0; min-width: 0; flex: 1; }
.btn.ajuda { background: #FFF3D6; border-color: #E2B24A; color: #6B4500; }
.sos-sub { text-wrap: balance; font-size: .8rem; font-weight: 500; line-height: 1.15; color: var(--muted); }
.sos-grupo.paciente .sos-op.grave { background: #FCE2E0; border-color: #E8A39E; } .sos-grupo.paciente .sos-op.grave .sos-txt { color: #8F1D13; }
.sos-grupo.paciente .sos-op.grave[aria-pressed="true"] { background: #fff; border-color: var(--bad); box-shadow: 0 0 0 3px #B0302B33; }

/* ====== Repaginada visual (59m): identidade azul-marinho + prata, cartões de viagem em "bilhete de rota" ====== */
:root { --canvas: #EEF3FC; --sombra: 0 1px 2px rgba(10,30,74,.06), 0 6px 18px -8px rgba(10,30,74,.18); }
body { background: var(--canvas); }
h3.tit, .card h3 { letter-spacing: -.01em; font-weight: 800; }

/* topo */
.top { background: linear-gradient(180deg, #0C2557, var(--navy)); padding: 10px 14px; }
.top img { height: 32px; }
.top.funde::after { display: none; }
.net { background: #ffffff1f; border-color: #ffffff33; color: #fff; backdrop-filter: blur(4px); }
.net.on { color: #8FF0C6; background: #12A37A33; border-color: #12A37A66; } .net.off { color: #FFC9C4; background: #B0302B55; border-color: #E8706A88; } .net.sync { color: #CFE0FF; background: #3C6DF244; border-color: #3C6DF288; }
.top .btn { background: #ffffff1a; border-color: #ffffff40; color: #fff; box-shadow: none; }

/* saudação da lista: faixa azul-marinho que continua o topo */
.hero { margin: -14px -14px 2px; padding: 4px 18px 26px; background: linear-gradient(180deg, var(--navy), #123A8C); color: #fff; border-radius: 0 0 28px 28px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 10px 22px -14px rgba(10,30,74,.7); }
.hero p { color: #B9CBF3; font-size: 1rem; } .hero h3 { color: #fff; font-size: 1.55rem; line-height: 1.15; }
.hero-n { margin-top: 8px; align-self: flex-start; background: #ffffff1f; border: 1px solid #ffffff33; border-radius: 999px; padding: 3px 12px; font-size: .9rem; font-weight: 600; color: #E3ECFF; }
.btn-sec { margin-top: 4px; }

/* cartões */
.card { border: 1px solid #DCE5F5; box-shadow: var(--sombra); border-radius: 20px; }
.viagem-card { gap: 10px; padding: 16px; }
.vc-hora { display: flex; flex-direction: column; align-items: flex-end; font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--navy); } .vc-hora small { font-size: .8rem; font-weight: 600; color: var(--muted); margin-top: 3px; }
.vc-locais { color: var(--muted); font-size: .92rem; padding-left: 28px; }
.viagem-card .meta { background: var(--canvas); border-radius: 14px; padding: 10px 12px; gap: 6px; font-size: .95rem; }
.viagem-card .meta .ico { color: var(--royal); }

/* rota em linha do tempo */
.rota { display: flex; gap: 12px; align-items: stretch; }
.rota-p { display: flex; flex-direction: column; align-items: center; padding: 6px 0 4px; width: 16px; flex: none; }
.rota-o { width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--royal); background: #fff; }
.rota-fio { flex: 1; width: 0; border-left: 2.5px dotted #9DB4E6; margin: 3px 0; min-height: 22px; }
.rota-d { width: 14px; height: 14px; background: var(--royal); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 0 0 3px #1F4FD622; }
.rota-t { display: flex; flex-direction: column; min-width: 0; } .rota-t small { color: var(--muted); font-size: .78rem; font-weight: 600; line-height: 1.2; } .rota-t b { font-size: 1.12rem; line-height: 1.2; margin-bottom: 8px; } .rota-t b.rota-dest { font-size: 1.3rem; margin-bottom: 0; letter-spacing: -.01em; }

/* primeira viagem: cartão de destaque em azul-marinho */
.viagem-card.destaque { background: linear-gradient(160deg, #0F2C6B, #0A1E4A 70%); border-color: #1E3E8F; color: #fff; box-shadow: 0 14px 28px -14px rgba(10,30,74,.8); position: relative; overflow: hidden; }
.viagem-card.destaque::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, #3C6DF255, transparent 70%); pointer-events: none; }
.destaque .vc-hora { color: #fff; } .destaque .vc-hora small, .destaque .rota-t small, .destaque .vc-locais { color: #AFC3F0; }
.destaque .rota-o { background: #0F2C6B; border-color: #8FB0FF; } .destaque .rota-fio { border-color: #5E7FCC; } .destaque .rota-d { background: #6F95FF; box-shadow: 0 0 0 3px #6F95FF33; }
.destaque .meta { background: #ffffff14; color: #DCE7FF; } .destaque .meta .ico { color: #8FB0FF; }
.destaque .btn.pri { background: linear-gradient(180deg, #4D7BFF, #2F63EA); border-color: #7C9DFF; }

/* viagem aberta: cabeçalho com a rota */
.vhead { background: linear-gradient(160deg, #0F2C6B, #0A1E4A 70%); color: #fff; border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--sombra); }
.vhead .rota-t small { color: #AFC3F0; } .vhead .rota-o { background: #0F2C6B; border-color: #8FB0FF; } .vhead .rota-fio { border-color: #5E7FCC; } .vhead .rota-d { background: #6F95FF; box-shadow: 0 0 0 3px #6F95FF33; }
.vhead-i { font-size: .95rem; color: #CFE0FF; border-top: 1px solid #ffffff22; padding-top: 10px; }

/* passageiros */
.prow { border-radius: 16px; border-color: #DCE5F5; box-shadow: 0 1px 2px rgba(10,30,74,.05); min-height: 66px; }
.avatar { background: linear-gradient(135deg, #DCE7FF, #BFD1FA); color: var(--navy); width: 44px; height: 44px; font-size: .9rem; }
.chk { width: 34px; height: 34px; border-width: 2.5px; border-color: #B8C8E8; }
.prow[aria-pressed="true"] { background: #EAF8F2; border-color: #7CCBAA; } .prow[aria-pressed="true"] .avatar { background: linear-gradient(135deg, #BFEBD7, #8FD8B7); color: #0B5E3F; }
.prog { height: 10px; background: #DCE5F5; } .prog i { background: linear-gradient(90deg, #12A37A, #1AC892); }

/* barra de abas flutuante */
.abas { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 6px; background: linear-gradient(180deg, #102B66, var(--navy)); border: 1px solid #1E3E8F; border-radius: 22px; box-shadow: 0 12px 28px -10px rgba(10,30,74,.75); gap: 4px; }
.abas button { color: #9FB3DD; border-radius: 16px; }
.abas button[aria-current="page"] { background: linear-gradient(180deg, #3C6DF2, #2650CC); color: #fff; box-shadow: inset 0 1px 0 #ffffff40; }
.corpo { padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px)); }

/* login */
#app:has(.pagina-login) { background: linear-gradient(180deg, var(--navy) 0%, #123A8C 46%, var(--canvas) 46.1%); }
.pagina-login { justify-content: flex-start; padding-top: 12vh; gap: 18px; }
.login-marca { display: flex; flex-direction: column; align-items: center; gap: 8px; } .login-marca img { height: 58px; max-width: 80%; object-fit: contain; } .login-marca p { color: #B9CBF3; font-size: 1rem; }
.login-card { padding: 20px; box-shadow: 0 18px 36px -16px rgba(10,30,74,.55); } .login-card h3 { font-size: 1.5rem; }
.login-card a { color: var(--royal); font-weight: 600; }
.top { flex-wrap: nowrap; gap: 8px; } .top img { height: 28px; max-width: 42%; flex: 0 1 auto; } .top .net { flex: none; padding: 3px 9px; font-size: .85rem; } .top .btn.peq { flex: none; min-height: 38px; padding: 2px 12px; }
.lista-conf .linha { gap: 10px; } .lista-conf b { font-size: 1.1rem; }