/* Layout: uma coluna de celular, com motivos de cartão de embarque e carimbo de passaporte. */
:root{
  --azul:#16237A; --azul2:#2A3BB0; --ipe:#FFC928; --papel:#F3F4FA; --branco:#FFFFFF;
  --tinta:#141A3C; --sub:#565D85; --linha:#DCDFEE; --sim:#0E8F46; --nao:#D93A40; --aviso:#FFF3CC; --aviso-t:#6B5100;
  --display:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --texto:"Figtree","Segoe UI",system-ui,sans-serif;
  --dado:"DM Mono",Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--azul);color:var(--tinta);font:400 15px/1.45 var(--texto);display:grid;place-items:center;overflow:hidden}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
:focus-visible{outline:3px solid var(--ipe);outline-offset:2px}
#app{position:relative;width:100%;height:100%;background:var(--papel);overflow:hidden}
@media (min-width:520px){#app{width:420px;height:min(100%,880px);border-radius:28px}}
.tela{position:absolute;inset:0;display:flex;flex-direction:column;min-height:0}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.01em}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 20px;border-radius:14px;font-weight:700;font-size:16px;background:var(--azul);color:#fff;transition:transform .12s}
.btn:active{transform:scale(.98)}
.btn[disabled]{background:var(--linha);color:var(--sub);cursor:default}
.btn.ipe{background:var(--ipe);color:var(--tinta)}
.btn.claro{background:var(--branco);color:var(--azul);box-shadow:inset 0 0 0 1.5px var(--linha)}
.mono{font-family:var(--dado);font-variant-numeric:tabular-nums}
.rotulo{font:500 10.5px/1.2 var(--dado);letter-spacing:.09em;text-transform:uppercase;color:var(--sub)}
.link{color:var(--azul2);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* Início */
.capa{flex:1;min-height:0;position:relative;background:#0d1550 center 30%/cover no-repeat;display:flex;flex-direction:column;justify-content:flex-end;padding:20px 20px 24px;color:#fff}
.capa::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,21,80,.35) 0%,rgba(13,21,80,0) 28%,rgba(13,21,80,.92) 88%)}
.capa>*{position:relative}
.marca{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));left:20px;font:800 22px var(--display);letter-spacing:-.02em}
.marca i{font-style:normal;color:var(--ipe)}
.prot{position:absolute;top:calc(20px + env(safe-area-inset-top,0px));right:20px;font:500 10px var(--dado);letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(255,255,255,.6);border-radius:99px;padding:3px 9px}
.capa h1{font-size:clamp(34px,10vw,42px);line-height:1.02;font-weight:800}
.capa h1 em{font-style:normal;color:var(--ipe)}
.capa p{margin:10px 0 0;font-size:16px;max-width:32ch;color:#E6E8F7}
.base{padding:16px 20px 18px;background:var(--papel);display:flex;flex-direction:column;gap:12px}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px}
.chips::-webkit-scrollbar{display:none}
.destino{flex:none;padding:8px 13px;border-radius:12px;background:var(--branco);box-shadow:inset 0 0 0 1.5px var(--linha);text-align:left;font-weight:600;line-height:1.15}
.destino small{display:block;font:400 10px var(--dado);color:var(--sub);margin-top:2px}
.destino.on{background:var(--azul);color:#fff;box-shadow:none}
.destino.on small{color:var(--ipe)}
.destino[disabled]{color:var(--sub);cursor:default}
.rodape{font-size:12px;color:var(--sub);text-align:center}

/* Cartão de embarque */
.bilhete{margin:calc(14px + env(safe-area-inset-top,0px)) 16px 0;background:var(--azul);color:#fff;border-radius:16px;padding:12px 14px;display:grid;grid-template-columns:auto 1fr;gap:4px 16px;position:relative}
.bilhete .cod{font:800 38px/1 var(--display);color:var(--ipe);grid-row:span 2;align-self:center}
.bilhete .rot{font:500 10px var(--dado);letter-spacing:.08em;text-transform:uppercase;color:#B9C0EE}
.bilhete .val{font-weight:600;font-size:14px;line-height:1.25}
.furo{border-top:2px dashed rgba(255,255,255,.3);grid-column:1/-1;margin:8px 0 4px}
.campos{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.campos .val{font:500 12.5px var(--dado);min-height:17px}
.topo{display:flex;align-items:center;gap:10px;padding:12px 16px 0}
.barra{flex:1;height:5px;border-radius:9px;background:var(--linha);overflow:hidden}
.barra span{display:block;height:100%;background:var(--azul2);transition:width .25s}
.voltar{width:38px;height:38px;border-radius:50%;background:var(--branco);box-shadow:inset 0 0 0 1.5px var(--linha);font-size:18px;flex:none;display:grid;place-items:center}
.miolo{flex:1;min-height:0;overflow-y:auto;padding:16px 16px 12px;display:flex;flex-direction:column;gap:12px}
.miolo h2{font-size:27px;line-height:1.1;font-weight:700}
.ajuda{margin:0;color:var(--sub)}
.acoes{padding:10px 16px calc(14px + env(safe-area-inset-bottom,0px));display:flex;gap:10px}
.acoes .btn{flex:1}
.op{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 14px;border-radius:14px;background:var(--branco);box-shadow:inset 0 0 0 1.5px var(--linha);transition:box-shadow .12s,background .12s}
.op b{display:block;font-weight:600;font-size:16px;line-height:1.2}
.op small{display:block;color:var(--sub);font-size:13px;margin-top:2px}
.op .tic{margin-left:auto;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--linha);flex:none;display:grid;place-items:center;color:#fff;font-size:14px}
.op.on{box-shadow:inset 0 0 0 2px var(--azul2);background:#EEF0FF}
.op.on .tic{background:var(--azul2);box-shadow:none}
.op div{min-width:0}
.grade{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo input{min-height:52px;width:100%;padding:0 14px;border-radius:14px;border:1.5px solid var(--linha);background:var(--branco);font-weight:600;font-size:16px}
.passo{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 6px 0 16px;border-radius:14px;background:var(--branco);box-shadow:inset 0 0 0 1.5px var(--linha)}
.passo b{font:500 18px var(--dado)}
.passo div{display:flex;gap:6px}
.passo button{width:40px;height:40px;border-radius:10px;background:var(--papel);font-size:20px;font-weight:600;color:var(--azul)}

/* Swipe */
.cab-swipe{display:flex;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 10px}
.cab-swipe .meio{flex:1;min-width:0}
.cab-swipe .meio b{display:block;font:700 17px var(--display);line-height:1.15}
.concluir{min-height:40px;padding:0 14px;border-radius:12px;background:var(--azul);color:#fff;font-weight:700;font-size:14px;flex:none}
.concluir[disabled]{background:var(--linha);color:var(--sub);cursor:default}
.pilha{flex:1;min-height:0;position:relative;margin:0 16px}
.carta{position:absolute;inset:0;border-radius:22px;overflow:hidden;background:#222 center/cover no-repeat;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;box-shadow:0 10px 30px rgba(22,35,122,.22)}
.carta.atras{transform:scale(.95) translateY(10px);filter:brightness(.92);transition:transform .22s}
.carta.fora{transition:transform .28s ease-in,opacity .28s}
.carta::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(180deg,rgba(9,13,50,0),rgba(9,13,50,.93) 72%)}
.info{position:absolute;left:16px;right:16px;bottom:12px;color:#fff;z-index:2}
.info h2{font-size:28px;line-height:1.05;font-weight:700}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tag{font:500 11.5px var(--dado);padding:3px 8px;border-radius:7px;background:rgba(255,255,255,.17)}
.tag.must{background:var(--ipe);color:var(--tinta)}
.detalhe{margin-top:9px;font-weight:600;font-size:13.5px;text-decoration:underline;text-underline-offset:2px;color:#fff}
.carimbo{position:absolute;top:26px;z-index:3;padding:7px 12px;border-radius:9px;font:800 25px/1 var(--display);letter-spacing:.02em;border:3px solid;outline:1.5px solid;outline-offset:2.5px;opacity:0;background:rgba(255,255,255,.88);pointer-events:none}
.carimbo.sim{left:20px;color:var(--sim);transform:rotate(-12deg)}
.carimbo.nao{right:20px;color:var(--nao);transform:rotate(12deg)}
.botoes{display:flex;justify-content:center;align-items:center;gap:18px;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px))}
.redondo{width:64px;height:64px;border-radius:50%;background:var(--branco);font-size:26px;font-weight:700;box-shadow:0 4px 14px rgba(22,35,122,.18);display:grid;place-items:center;transition:transform .12s}
.redondo:active{transform:scale(.92)}
.redondo.n{color:var(--nao)}.redondo.s{color:var(--sim)}
.redondo.u{width:46px;height:46px;font-size:19px;color:var(--sub)}
.redondo[disabled]{opacity:.45;cursor:default}
.fim{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:12px;text-align:center;padding:16px}
.fim h2{font-size:28px}

/* Gerando */
.gerando{justify-content:center;padding:24px;gap:18px;background:var(--azul);color:#fff}
.gerando h2{font-size:30px;font-weight:700}
.linha-g{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:13px;background:rgba(255,255,255,.09);opacity:.5;transition:opacity .2s}
.linha-g.on{opacity:1}
.linha-g i{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2px #fff;display:grid;place-items:center;font-style:normal;font-size:13px;flex:none}
.linha-g.ok i{background:var(--ipe);color:var(--tinta);box-shadow:none}

/* Roteiro */
.mapa{position:relative;flex:none;height:40%;background:#EEF0F6;touch-action:none;overflow:hidden}
.mapa canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
.mapa .fechar{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));left:12px}
.osm{position:absolute;right:6px;bottom:20px;font-size:9.5px;color:var(--sub);background:rgba(255,255,255,.8);padding:1px 5px;border-radius:5px}
.folha{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--papel);border-radius:20px 20px 0 0;margin-top:-14px;position:relative;z-index:2}
.fcab{padding:13px 16px 0}
.fcab h2{font-size:23px;font-weight:700;line-height:1.1}
.fcab p{margin:2px 0 0;color:var(--sub);font-size:13px}
.abas{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:9px 12px 0;border-bottom:1.5px solid var(--linha)}
.abas::-webkit-scrollbar{display:none}
.aba{flex:none;padding:7px 10px 9px;font-weight:600;font-size:14px;color:var(--sub);border-bottom:3px solid transparent;margin-bottom:-1.5px}
.aba.on{color:var(--tinta);border-color:var(--cor,var(--azul2))}
.corpo{flex:1;min-height:0;overflow-y:auto;padding:13px 16px 16px;display:flex;flex-direction:column;gap:12px}
.pe{display:flex;gap:8px;padding:9px 16px calc(11px + env(safe-area-inset-bottom,0px));background:var(--branco);border-top:1.5px solid var(--linha)}
.pe .btn{min-height:46px;font-size:14px;padding:0 12px;border-radius:12px}
.pe .btn.princ{flex:1}
.numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.num{background:var(--branco);border-radius:13px;padding:10px 11px;box-shadow:inset 0 0 0 1.5px var(--linha)}
.num b{display:block;font:500 19px var(--dado);line-height:1.2;white-space:nowrap}
.bloco{background:var(--branco);border-radius:14px;padding:13px 14px;box-shadow:inset 0 0 0 1.5px var(--linha);display:flex;flex-direction:column;gap:8px}
.bloco h3{font-size:16px;font-weight:700}
.bloco p{margin:0}
.aviso{background:var(--aviso);color:var(--aviso-t);box-shadow:none}
.resumo-dia{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:8px 0;border-top:1px solid var(--linha)}
.resumo-dia:first-of-type{border-top:0}
.bola{width:28px;height:28px;border-radius:50%;background:var(--cor);color:#fff;display:grid;place-items:center;font:500 12.5px var(--dado);flex:none}
.resumo-dia div{min-width:0;flex:1}
.resumo-dia b{display:block;font-weight:600;font-size:14px}
.resumo-dia small{color:var(--sub);font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cheque{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:14px}
.cheque input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--azul2);flex:none}
.cheque small{display:block;color:var(--sub);font-size:12.5px}
.parada{display:grid;grid-template-columns:44px 1fr;gap:0 10px}
.hora{font:500 12.5px var(--dado);color:var(--sub);padding-top:3px}
.par-card{display:flex;gap:11px;background:var(--branco);border-radius:14px;padding:8px;box-shadow:inset 0 0 0 1.5px var(--linha);min-width:0;transition:box-shadow .2s}
.par-card.foco{box-shadow:inset 0 0 0 2.5px var(--cor)}
.par-card img{width:70px;height:78px;object-fit:cover;border-radius:9px;flex:none;background:var(--linha)}
.par-tx{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.par-tx b{font-weight:600;font-size:15px;line-height:1.2}
.par-tx small{color:var(--sub);font-size:12.5px;line-height:1.3}
.par-ac{display:flex;gap:12px;margin-top:auto;font-size:12.5px;font-weight:600}
.par-ac button,.par-ac a{color:var(--azul2);text-decoration:underline;text-underline-offset:2px}
.par-ac .rem{color:var(--nao)}
.perna{grid-column:2;font:400 11.5px var(--dado);color:var(--sub);padding:7px 0 7px 13px;border-left:2px dashed var(--cor);margin-left:6px}
.pausa{background:transparent;box-shadow:inset 0 0 0 1.5px var(--linha);border-style:dashed;padding:9px 12px;font-size:13.5px;color:var(--sub);border-radius:14px}
.nota-dia{font-size:12px;color:var(--sub);margin:0}

/* Folha modal */
.veu{position:absolute;inset:0;background:rgba(13,21,80,.55);z-index:20;display:flex;align-items:flex-end;animation:ve .18s}
@keyframes ve{from{opacity:0}}
.modal{width:100%;max-height:88%;overflow-y:auto;background:var(--papel);border-radius:22px 22px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:11px;animation:sobe .22s ease-out}
@keyframes sobe{from{transform:translateY(40px)}}
.modal h2{font-size:24px;font-weight:700;line-height:1.1}
.modal .foto{width:100%;height:210px;object-fit:cover;border-radius:14px;background:var(--linha)}
.tags.esc .tag{background:#E5E8F7;color:var(--tinta)}
.plano{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;padding:14px;border-radius:14px;background:var(--branco);box-shadow:inset 0 0 0 1.5px var(--linha)}
.plano.dest{box-shadow:inset 0 0 0 2.5px var(--azul2)}
.plano b{font-size:16px;font-weight:700}
.plano .preco{font:500 22px var(--dado)}
.plano small{color:var(--sub);font-size:13px}
.selo{align-self:flex-start;background:var(--ipe);font:500 10.5px var(--dado);padding:2px 7px;border-radius:6px}
.cred{font-size:12px;line-height:1.35;color:var(--sub);padding:5px 0;border-top:1px solid var(--linha)}
.cred b{color:var(--tinta);font-weight:600}
.add{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:7px;border-radius:12px;background:var(--branco);box-shadow:inset 0 0 0 1.5px var(--linha)}
.add img{width:48px;height:48px;object-fit:cover;border-radius:8px;flex:none}
.add b{font-weight:600;display:block;line-height:1.2}
.add small{font-size:12px;color:var(--sub)}
.add span{margin-left:auto;font-size:21px;color:var(--azul2);padding-right:7px}
.add div{min-width:0}
.aviso-t{position:absolute;left:16px;right:16px;bottom:90px;z-index:30;background:var(--tinta);color:#fff;padding:11px 14px;border-radius:12px;font-size:14px;animation:sobe .2s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Conta, login e lista de viagens */
a.btn{text-decoration:none}
.btn.perigo{background:var(--nao)}
.capa-curta{flex:1 1 40%}
.capa-curta h1{font-size:clamp(28px,8vw,34px)}
form.base{flex:none}
.campo input.mono{font-family:var(--dado);letter-spacing:.3em;font-size:20px;text-align:center}
.erro{margin:0;padding:10px 12px;border-radius:11px;background:#FDECEC;color:#A32227;font-size:14px;font-weight:500}
.linha-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px}
.conta{justify-content:center}
.conta-c{padding:24px 20px;display:flex;flex-direction:column;gap:12px}
.conta-c h2{font-size:28px;font-weight:700;line-height:1.1}
.conta-c .link{align-self:center;font-size:14px}
.marca-e{font:800 22px var(--display);letter-spacing:-.02em;color:var(--azul)}
.marca-e i{font-style:normal;color:#E0A800}
.marca-g{font:800 34px var(--display);letter-spacing:-.02em;text-align:center}
.marca-g i{font-style:normal;color:var(--ipe)}
.selecionavel{user-select:all;-webkit-user-select:all;color:var(--tinta)}
.topo-conta{display:flex;align-items:center;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 0;font-size:14px}
.viagem{display:flex;flex-direction:column;gap:6px;background:var(--branco);border-radius:14px;padding:8px;box-shadow:inset 0 0 0 1.5px var(--linha)}
.viagem .rem{align-self:flex-end;color:var(--nao);font-size:12.5px;padding:0 6px}
.viagem-abre{display:flex;align-items:center;gap:12px;text-align:left;width:100%}
.viagem-abre img{width:64px;height:64px;object-fit:cover;border-radius:10px;flex:none}
.viagem-abre div{min-width:0}
.viagem-abre b{display:block;font:700 18px/1.15 var(--display)}
.viagem-abre small{display:block;color:var(--sub);font-size:13px;margin-top:2px}
.fcab-l{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.selo-s{font:500 11px var(--dado);color:var(--sim);flex:none}
.modal .btn{flex:none}
.gerando .marca-g{color:#fff}