/* ============================================================================================= REDESIGN V2, direção B "Bilhete" - etapa 1, CELULAR (29/10/2026) Relatório: research/2026-10-28-redesign-v2.md (seções 2, 3, 4, 11, 14, 15, 17, 17b, 17c). Carrega DEPOIS do style.css e sobrepõe o que for preciso. O que mudou e por quê: - letra Atkinson Hyperlegible Next no texto (V4) e Manrope SÓ nos algarismos (F16): a Atkinson corta o zero; o subconjunto da Manrope (unicode-range 0-9) devolve o zero limpo e mantém os algarismos tabulares. As duas são arquivos locais: o CSP só aceita fonte do próprio site, e o app precisa abrir sem internet; - paleta "três degraus" P2 ajustada (F6): claro / médio / escuro antes do matiz; - texto mínimo de 16 px (13 px só no rótulo de aba, da barra, da legenda e do nome na poltrona); - alvo de toque de 48 px no celular, e todo botão com relevo (borda de baixo mais escura, que cede 2 px no toque); - barra fixa embaixo (Viagens, Clientes, Dinheiro, Menu) e as faixas de aviso no TOPO (V3); - aviso (toast) embaixo, acima da barra, sem cobrir o Voltar (B10). PC: nesta etapa o desenho do celular fica centralizado (a lateral e as tabelas são a etapa 2). ============================================================================================= */ @font-face { font-family: 'Atkinson Next'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/atkinson-next.woff2') format('woff2'); } /* Só os algarismos 0-9 vêm desta família (F16). Todo o resto cai na Atkinson. */ @font-face { font-family: 'FB Algarismos'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/manrope.woff2') format('woff2'); unicode-range: U+0030-0039; } :root { --tinta: #0E1726; --tinta-2: #475467; --linha: #D0D5DD; --fundo: #F2F4F7; --cartao: #FFFFFF; --azul: #0B5CAD; --azul-escuro: #084A8C; --azul-claro: #E6F0FA; --verde: #12733A; --verde-claro: #E7F5EC; --vermelho: #B42318; --vermelho-claro: #FDECEA; --vermelho-escuro: #8A1B12; --ambar-texto: #92400E; --ambar-claro: #FEF3C7; --relevo: #B9C0CB; --trilho: #E4E7EC; /* poltronas e estados (P2 ajustada, seção 11) */ --pol-livre: #FFFFFF; --pol-livre-borda: #475467; --pol-minha: #4A8BE0; --pol-minha-borda: #2F6DBF; --pol-minha-tx: #0E1726; --pol-vendida: #344054; --pol-vendida-tx: #FFFFFF; --fx-falta: #B42318; --fx-embarcou: #12733A; --st-pago-bg: #C6E5D0; --st-pago-tx: #0B4D26; --st-falta-bg: #F5CBC6; --st-falta-tx: #8A1B12; --st-vence-bg: #F0DAA6; --st-vence-tx: #6B3A06; --st-emb-bg: #B8DFC6; --st-emb-tx: #0B4D26; --barra-h: 64px; /* Os nomes antigos passam a apontar para a paleta nova: as telas que ainda não foram redesenhadas (licença, contrato, cadastros) mudam de cor junto, sem mexer nelas uma a uma. */ --navy: #0E1726; --navy-2: #1D2939; --brand: #0B5CAD; --brand-d: #084A8C; --brand-soft: #E6F0FA; --bg: #F2F4F7; --card: #FFFFFF; --ink: #0E1726; --muted: #475467; --line: #D0D5DD; --ok: #12733A; --ok-bg: #E7F5EC; --warn: #92400E; --warn-bg: #FEF3C7; --danger: #B42318; --danger-bg: #FDECEA; --red: #B42318; --red-bg: #FDECEA; --free: #F2F4F7; --shadow: none; --shadow-lift: 0 2px 8px rgba(14, 23, 38, .12); } body { font-family: 'FB Algarismos', 'Atkinson Next', 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-variant-numeric: tabular-nums; background: var(--fundo); color: var(--tinta); font-size: 16px; line-height: 1.45; padding-bottom: 24px; } body.com-barra { padding-bottom: calc(var(--barra-h) + 24px + env(safe-area-inset-bottom)); } :focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; } html { overflow-x: hidden; } /* Rede de proteção (01/11/2026): o `overflow-x: hidden` do html sozinho NÃO segura o celular - quando algo passa da largura, o Chrome do Android alarga a área da página e tudo desliza de lado. `clip` corta só o que passa da borda, sem virar caixa de rolagem (o position: sticky continua funcionando). Navegador antigo que não conhece `clip` ignora a linha: fica como antes. A causa de verdade se conserta no elemento (ver .cab-nav); isto é só para um estouro novo não arrastar a tela. */ body { overflow-x: clip; } /* ---------- faixas de aviso: no TOPO (V3) ---------- */ #faixas .demo-bar { position: static; border-top: 0; border-bottom: 1px solid #F5D98B; font-size: 16px; padding: 8px 12px; flex-wrap: wrap; gap: 8px; justify-content: flex-start; } #faixas .demo-bar > span { flex: 1 1 180px; min-width: 0; } #faixas .demo-bar button.small { min-height: 48px; padding: 0 14px; font-size: 16px; border-radius: 12px; font-weight: 700; background: var(--cartao); color: var(--tinta); border: 1.5px solid var(--linha); border-bottom: 3px solid var(--relevo); } #faixas .demo-bar button.small:active { transform: translateY(2px); border-bottom-width: 1.5px; } #faixas .teste-bar { border-bottom-color: #bfdbfe; } #faixas .confirma-bar { border-bottom-color: #bbf7d0; } #faixas .legado-bar { border-bottom-color: #fecaca; } /* ---------- cabeçalho branco ---------- */ #topbar { background: var(--cartao); color: var(--tinta); box-shadow: none; border-bottom: 1px solid var(--linha); min-height: 64px; padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top)); gap: 12px; } #topbar .title { font-size: 22px; font-weight: 800; letter-spacing: 0; } #topbar button.ghost#btnVoltar { background: var(--cartao); color: var(--azul); min-width: 48px; min-height: 48px; padding: 0 12px; border: 1.5px solid var(--linha); border-bottom: 3px solid var(--relevo); font-size: 28px; line-height: 1; } #topbar button.ghost#btnVoltar:active { transform: translateY(2px); border-bottom-width: 1.5px; } #btnMenu { display: none !important; } #topAcao { display: flex; gap: 8px; flex: none; } #topAcao:empty { display: none; } #topAcao .btn { width: auto; } /* Na viagem quem faz o papel do cabeçalho é a própria viagem ("‹ Viagens", título e abas). */ body.cab-proprio #topbar { display: none; } main { padding: 16px; max-width: 640px; } /* ---------- barra de baixo: Viagens, Clientes, Dinheiro, Menu ---------- */ .nav-baixo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--cartao); border-top: 1px solid var(--linha); display: grid; grid-template-columns: repeat(4, 1fr); height: calc(var(--barra-h) + env(safe-area-inset-bottom)); padding: 0 max(0px, calc((100% - 640px) / 2)) env(safe-area-inset-bottom); } .nav-baixo button { border: 0; border-radius: 0; background: transparent; color: var(--tinta-2); padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; position: relative; box-shadow: none; font-weight: 600; } .nav-baixo .pil { display: flex; align-items: center; justify-content: center; width: 56px; height: 30px; border-radius: 15px; } .nav-baixo .pil svg.ic { width: 24px; height: 24px; vertical-align: 0; } .nav-baixo .r { font-size: 13px; font-weight: 600; line-height: 1.1; } .nav-baixo button[aria-current="page"] { color: var(--azul); } .nav-baixo button[aria-current="page"] .pil { background: var(--azul-claro); } .nav-baixo button[aria-current="page"] .r { font-weight: 800; } /* ---------- botões: todos com relevo ---------- */ button { padding: 0 16px; } .btn { min-height: 48px; padding: 0 16px; border-radius: 12px; font-size: 16px; font-weight: 700; line-height: 1.2; background: var(--azul); color: #fff; border: 0; border-bottom: 3px solid var(--azul-escuro); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); text-align: center; } .btn:active { background: var(--azul-escuro); transform: translateY(2px); border-bottom-width: 1px; box-shadow: none; } .btn.sec { background: var(--cartao); color: var(--azul); border: 1.5px solid var(--linha); border-bottom: 3px solid var(--relevo); box-shadow: none; } .btn.sec:active { background: var(--azul-claro); border-bottom-width: 1.5px; } .btn.danger { background: var(--cartao); color: var(--vermelho); border: 1.5px solid var(--vermelho); border-bottom: 3px solid var(--vermelho-escuro); box-shadow: none; } .btn.pri { min-height: 56px; font-size: 18px; } .btn.compacto { min-height: 48px; font-size: 16px; padding: 0 12px; } .btn.compacto .ic { width: 20px; height: 20px; } button.small { min-height: 48px; padding: 0 14px; font-size: 16px; } .btn.sec.forte { color: var(--verde); border-color: var(--linha); } .row-btns .btn, .acoes-viagem .btn { font-size: 16px; } /* Fila de botões que não cabe na largura QUEBRA A LINHA em vez de cortar o texto (31/10: no celular, "+ Quarto · PDF para o hotel · Imprimir" saía "PDF para o hot"). Cada botão parte do próprio tamanho (style.css, flex 1 1 auto): o que não couber desce e ocupa a linha de baixo. Fila que cabe continua numa linha só. Antes valia só para a fila com o "Imprimir" do Android. `width: auto`: o .btn tem width 100% (style.css); dentro da fila isso faria CADA botão descer para uma linha sozinho, até no computador. Empilhado (coluna, <= 340px) o botão continua com a largura toda (o flex estica). */ .row-btns { flex-wrap: wrap; } .row-btns > .btn { width: auto; } .btnspin { border-color: rgba(127, 127, 127, .35); border-top-color: currentColor; } .list-item .acoes button.small { min-height: 48px; } /* ---------- campos ---------- */ label { font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--tinta); margin: 14px 0 6px; } input, select, textarea { min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--tinta-2); border-radius: 12px; font-size: 16px; color: var(--tinta); } input[type="checkbox"], input[type="radio"] { min-height: 0; width: 24px; height: 24px; padding: 0; accent-color: var(--azul); } input:focus, select:focus, textarea:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(11, 92, 173, .2); } .campo-rs input { padding-left: 46px; font-weight: 700; font-size: 18px; } .campo-rs-pref { left: 14px; color: var(--tinta-2); } .campo-senha > .olho { min-width: 48px; min-height: 48px; display: flex; align-items: center; justify-content: center; right: 2px; padding: 0; } .fam-pax, .pg-escolha, .pas-ativo { font-size: 16px; min-height: 48px; } /* ---------- texto: mínimo 16 px ---------- */ .card { box-shadow: none; border-radius: 16px; } .card h2 { font-size: 18px; } .card .sub, .list-item .meta, .lic-card .meta, .lic-nota, .lic-auto, .lic-passos li, .pin-hint, .aviso-atual, .stat .l, .pgto-detalhe, .pgto-nota, .pg-info, .pg-aviso, .pg-vazio, .pg-linha .meta, .parc-linha .meta, .parc-pol, .parc-tot-i span, .fam-falta, .fam-falta small, .viagem-faixa, .pas-cat .meta, .pas-saldo, .q-topo .meta, .q-doc, .mx-erro, .empty, .loading, .pg-escolha .meta, .pg-tres span, .pg-tres small, .pg-tit, .pg-tit-nota, .fam-previa-tit, .sect-title, .lic-card .lic-rot, .lic-passos-t, .comp-visor-dica, table.mini, table.mini th, .ct-box, .ct-aceite label, .grp-head, .route, .periodo-datas label, .periodo-datas input, .periodo-datas-wrap > summary, .lic-suporte > summary span span, .periodo-datas-wrap .sub, .lic-link, .conta .linha, .pgto-bloco.erro .pgto-saldo-valor, .parc-linha .big, .pas-tog, .conf-tab, .badge, .chip, .bus-front, .ct-hash, .ct-box table.ct-t, .fam-previa-aviso, .btn.sec.lic-discreto, .login-wrap .tg { font-size: 16px; } .sect-title, .pg-tit, .lic-passos-t, .fam-previa-tit, table.mini th { text-transform: none; letter-spacing: 0; } @media (max-width: 430px) { table.mini { font-size: 16px; } } .list-item { box-shadow: none; border-radius: 14px; min-height: 64px; } .list-item .big { font-size: 18px; } .chip { min-height: 32px; padding: 2px 12px; display: inline-flex; align-items: center; border-radius: 999px; white-space: nowrap; } .badge { padding: 2px 10px; font-weight: 700; } .badge.pago { background: var(--st-pago-bg); color: var(--st-pago-tx); } .badge.resta { background: var(--st-falta-bg); color: var(--st-falta-tx); } .badge.aberta { background: var(--st-vence-bg); color: var(--st-vence-tx); } .periodo button { min-height: 48px; padding: 0 16px; border-radius: 999px; background: var(--cartao); color: var(--tinta); border: 1.5px solid var(--linha); border-bottom: 3px solid var(--relevo); } .periodo button.on { background: var(--azul-claro); color: var(--azul); border-color: var(--azul); border-bottom-color: var(--azul-escuro); } .periodo-datas button { min-height: 48px; } .conf-tab { min-height: 56px; border-bottom: 3px solid var(--relevo); background: var(--cartao); color: var(--azul); } /* 01/11/2026: Embarque | Descida | Entrega | Malas passava da tela em 344 px e com fonte grande (o "Malas" ficava cortado). Quando não cabe, a fileira quebra em duas linhas; nenhum botão some. */ .conf-tabs { flex-wrap: wrap; } .conf-tab { flex: 1 1 auto; } .conf-tab.on { background: var(--azul-claro); color: var(--azul); border-color: var(--azul); border-bottom-color: var(--azul-escuro); } .pas-tog { min-height: 48px; border-bottom: 3px solid var(--relevo); box-shadow: none; } .pas-tog.on { background: var(--azul-claro); border-color: var(--azul); border-bottom-color: var(--azul-escuro); } .lic-link { min-height: 48px; } .voltar-pe { margin-top: 8px; } .empty { padding: 24px 10px; } /* valor nunca quebra: R$ e número juntos (brl() usa espaço inseparável) */ .valor { white-space: nowrap; font-variant-numeric: tabular-nums; } /* ---------- aviso (toast) embaixo, acima da barra (B10) ---------- */ .toast { left: 12px; right: 12px; transform: none; max-width: 616px; margin: 0 auto; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; background: var(--cartao); color: var(--tinta); border: 1.5px solid var(--verde); border-left: 6px solid var(--verde); border-radius: 12px; padding: 10px 12px; font-size: 16px; font-weight: 700; text-align: left; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; box-shadow: 0 4px 16px rgba(14, 23, 38, .2); } .toast.hidden { display: none; } .toast.err { background: var(--cartao); border-color: var(--vermelho); color: var(--vermelho-escuro); } .toast .tx { flex: 1 1 180px; min-width: 0; } .toast .btn { width: auto; flex: none; } body.com-barra .toast { bottom: calc(var(--barra-h) + 12px + env(safe-area-inset-bottom)); } body.com-folha .toast { bottom: calc(12px + env(safe-area-inset-bottom)); } /* ---------- folha que sobe (os modais viram folha) ---------- */ .modal-back { z-index: 50; background: rgba(14, 23, 38, .5); backdrop-filter: none; } .modal { border-radius: 20px 20px 0 0; padding: 8px 16px calc(24px + env(safe-area-inset-bottom)); animation: v-sobe .2s ease-out; } .modal::before { width: 40px; height: 4px; margin: 0 auto 8px; } .modal h3 { font-size: 22px; line-height: 1.2; } @keyframes v-sobe { from { transform: translateY(30%); opacity: .5; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .modal { animation: none; } } .folha-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .folha-topo h3 { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; } .folha-topo .btn { width: auto; flex: none; } /* ---------- peças comuns ---------- */ .v-mut { color: var(--tinta-2); } .v-forte { font-weight: 700; } .v-18 { font-size: 18px; font-weight: 700; } .v-verm { color: var(--vermelho); } .v-verde { color: var(--verde); } .v-azul { color: var(--azul); } .v-amb { color: var(--ambar-texto); } .v-seg { display: flex; gap: 4px; padding: 4px; background: var(--trilho); border-radius: 14px; box-shadow: inset 0 1px 3px rgba(14, 23, 38, .18); } .v-seg > button { flex: 1 1 0; min-height: 48px; border: 0; border-radius: 10px; background: transparent; font-weight: 700; color: var(--tinta-2); padding: 0 8px; font-size: 16px; box-shadow: none; min-width: 0; } .v-seg > button[aria-pressed="true"] { background: var(--cartao); color: var(--azul); box-shadow: 0 1px 3px rgba(14, 23, 38, .25), 0 2px 0 var(--relevo); } .v-seg.mini { flex: none; } .v-seg.mini > button { flex: none; padding: 0 14px; } .v-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 16px; font-weight: 700; line-height: 1.45; white-space: nowrap; } .v-tag svg.ic { width: 18px; height: 18px; vertical-align: 0; } .v-tag.g { background: var(--st-pago-bg); color: var(--st-pago-tx); } .v-tag.v { background: var(--st-falta-bg); color: var(--st-falta-tx); } .v-tag.a { background: var(--st-vence-bg); color: var(--st-vence-tx); } .v-tag.c { background: var(--trilho); color: var(--tinta-2); } .v-prog { height: 8px; border-radius: 4px; background: var(--trilho); overflow: hidden; } .v-prog > i { display: block; height: 100%; background: var(--azul); border-radius: 4px; } .v-grupo-tit { font-size: 18px; font-weight: 800; margin: 24px 0 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } details.v-abre { background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; margin-top: 16px; } details.v-abre > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; padding: 8px 16px; font-weight: 800; font-size: 18px; cursor: pointer; border-radius: 16px; border-bottom: 3px solid var(--relevo); } details.v-abre > summary::-webkit-details-marker { display: none; } details.v-abre > summary svg.ic { transition: transform .15s; flex: none; } details.v-abre[open] > summary { border-bottom: 1px solid var(--linha); border-radius: 16px 16px 0 0; } details.v-abre[open] > summary svg.ic { transform: rotate(180deg); } details.v-abre > .dentro { padding: 4px 16px 16px; } .v-vazio { text-align: center; padding: 32px 16px; } .v-vazio h2 { font-size: 22px; font-weight: 800; margin: 0 0 6px; } .v-vazio p { color: var(--tinta-2); margin: 0 0 16px; } /* ---------- Viagens: cartão-bilhete ---------- */ .v-lista-viagens > * + * { margin-top: 16px; } .v-filtros { margin-bottom: 16px; } .bilhete { background: var(--cartao); border: 1px solid var(--linha); border-bottom: 3px solid var(--relevo); border-radius: 16px; position: relative; } .bilhete .b-top { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 16px 16px 14px; color: var(--tinta); border-radius: 16px; box-shadow: none; font-weight: 400; } .bilhete .b-top:active { background: var(--fundo); transform: none; } .bilhete .b-dest { display: block; font-size: 28px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; } .bilhete .b-data { display: block; font-size: 18px; font-weight: 700; margin-top: 2px; } .bilhete .b-rota { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--tinta-2); margin-top: 6px; } .bilhete .b-rota svg.ic { width: 18px; height: 18px; vertical-align: 0; } .picote { position: relative; display: block; height: 20px; margin: 12px -16px 8px; } .picote::before { content: ""; position: absolute; left: 16px; right: 16px; top: 50%; border-top: 2px dashed var(--linha); } .picote .m { position: absolute; top: 0; width: 10px; height: 20px; background: var(--fundo); border: 1px solid var(--linha); } .picote .m.e { left: -1px; border-radius: 0 10px 10px 0; border-left: 0; } .picote .m.d { right: -1px; border-radius: 10px 0 0 10px; border-right: 0; } .bilhete .b-pe { display: block; color: var(--tinta-2); } .bilhete.hoje { border: 2px solid var(--azul); border-bottom: 3px solid var(--azul-escuro); } .hoje-faixa { display: flex; align-items: center; gap: 8px; background: var(--azul-claro); color: var(--azul); font-weight: 800; font-size: 18px; padding: 10px 16px; border-radius: 14px 14px 0 0; } .hoje-acao { padding: 0 16px 16px; } /* ---------- Viagem: cabeçalho e 4 abas ---------- */ .cab-viagem { background: var(--cartao); margin: -16px -16px 0; padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top)); } /* 01/11/2026 (Galaxy Z Flip 5, fonte grande): com a estrela da avaliação, "← Viagens + Incluir ★ ✎" passava da tela e o celular ALARGAVA a página inteira (até o sheet de venda deslizava de lado). Agora a fileira cabe sempre: os botões só de ícone ficam quadrados, e se ainda não couber os da direita descem para a linha de baixo, encostados à direita. Nenhuma ação some. Prova: web/teste-largura-celular.mjs (344 a 412 px, fonte 100/115/130%). */ .cab-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; } .cab-nav .btn { width: auto; flex: none; padding: 0 12px; } .cab-nav .dir { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; min-width: 0; } .cab-nav .dir .btn[aria-label] { min-width: 48px; } /* 01/11/2026 (o dono no Flip 5: "← Viagens" sozinho em cima e o resto embaixo ficou feio): no celular a fileira fica numa linha só. Com a fileira estreita (< 400 px de conteúdo, celular em pé) o "← Viagens" vira quadrado só com a seta, do tamanho de ★ e ✎ (o nome vem do aria-label "Voltar para Viagens"). O "+ Incluir" mantém o texto enquanto cabe: com fonte 130% ele tem ~117 px e a fileira inteira ~285 px, que cabe a partir de 290 px de conteúdo (celular de 322 px). Abaixo disso vira "+" quadrado. (Em `em` não serve: no Chrome o em da container query não acompanha o text-size-adjust da fonte do sistema - medido.) A quebra de linha acima continua como último recurso. PC: nada muda. Prova: web/teste-largura-celular.mjs. */ .cab-nav { container-type: inline-size; } .cab-nav #cabVoltar, .cab-nav #cabIncluir { gap: 6px; } @container (max-width: 399.98px) { .cab-nav #cabVoltar { min-width: 48px; padding: 0 12px; } .cab-nav #cabVoltar .rot { display: none; } } @container (max-width: 289.98px) { .cab-nav #cabIncluir { min-width: 48px; padding: 0 12px; } .cab-nav #cabIncluir .rot { display: none; } } .cab-viagem h1 { font-size: 28px; font-weight: 800; line-height: 1.12; margin: 10px 0 2px; overflow-wrap: anywhere; } .cab-viagem .cab-sub { color: var(--tinta-2); } .cab-num { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; } .cab-serv { margin-top: 10px; justify-content: flex-start; text-align: left; } .cab-serv > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .abas-wrap { position: sticky; top: 0; z-index: 15; background: var(--cartao); margin: 0 -16px 12px; padding: 6px 16px 8px; border-bottom: 1px solid var(--linha); } .abas { display: flex; gap: 4px; padding: 4px; background: var(--trilho); border-radius: 14px; box-shadow: inset 0 1px 3px rgba(14, 23, 38, .18); } .abas > button { flex: 1 1 0; min-width: 0; min-height: 56px; border: 0; border-radius: 10px; background: transparent; color: var(--tinta-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 2px; box-shadow: none; } .abas > button svg.ic { width: 24px; height: 24px; vertical-align: 0; } /* max-width + reticências (01/11/2026): com a fonte grande do Android (130%) em 360 px os nomes passavam da aba e um escrevia em cima do outro ("PassageirosEncomendas"). */ .abas > button span { font-size: min(13px, 3.4vw); font-weight: 600; line-height: 1.1; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .abas > button[aria-selected="true"] { background: var(--cartao); color: var(--azul); box-shadow: 0 1px 3px rgba(14, 23, 38, .25), 0 2px 0 var(--relevo); } .abas > button[aria-selected="true"] span { font-weight: 800; } .abas > button[aria-disabled="true"] { opacity: .6; } .v-semrede { background: var(--ambar-claro); color: var(--ambar-texto); font-weight: 700; padding: 10px 12px; border-radius: 12px; margin-bottom: 12px; border: 1px solid #F5D98B; } .v-semrede .meta { display: block; font-weight: 400; } /* ---------- Passageiros: mapa ---------- */ .linha-mapa { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .linha-mapa > p { flex: 1; min-width: 0; margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; } .v-legenda { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; font-weight: 600; line-height: 1.2; margin: 0 0 10px; } .v-legenda > span { display: flex; align-items: center; gap: 4px; white-space: nowrap; } .amostra { width: 16px; height: 16px; border-radius: 4px; flex: none; position: relative; overflow: hidden; display: inline-block; } .bus { background: var(--cartao); border: 1px solid var(--linha); border-radius: 24px 24px 16px 16px; padding: 8px; box-shadow: none; } .bus-front { display: flex; align-items: center; justify-content: space-between; color: var(--tinta-2); font-weight: 700; text-transform: none; letter-spacing: 0; padding: 0 4px 6px; border-bottom: 2px solid var(--linha); margin-bottom: 8px; } .seat-row { grid-template-columns: 1fr 1fr 14px 1fr 1fr; gap: 8px 6px; } .seat { position: relative; min-height: 72px; height: auto; border-radius: 12px; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; background: var(--pol-vendida); color: var(--pol-vendida-tx); border: 1.5px solid var(--pol-vendida); box-shadow: none; font-size: 20px; font-weight: 700; } .seat .sn { font-size: 20px; font-weight: 700; line-height: 1.1; } .seat .sw { font-size: 13px; font-weight: 600; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seat.livre { background: var(--pol-livre); color: var(--tinta); border: 2px solid var(--pol-livre-borda); border-bottom: 4px solid var(--pol-livre-borda); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } .seat.livre .sw { color: var(--azul); } .seat.livre:active { transform: translateY(2px); border-bottom-width: 2px; } .seat.livre.semnet { border-style: dashed; border-bottom-width: 2px; box-shadow: none; } .seat.livre.semnet .sw { color: var(--tinta-2); } .seat.minha { background: var(--pol-minha); color: var(--pol-minha-tx); border: 2px solid var(--pol-minha-borda); } .seat .minha-ic { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; color: var(--pol-minha-tx); } .seat.falta { padding-bottom: 20px; } .seat .fx { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: var(--fx-falta); color: #fff; font-size: 13px; font-weight: 800; line-height: 18px; text-align: center; } .seat:active { transform: none; } .seat.empty-slot { visibility: hidden; } /* Troca rápida de poltrona (30/10/2026, app.js abrirTrocaPoltrona): no mapa da troca só a LIVRE se toca. Ocupada fica apagada (sem relevo, cursor de proibido); a poltrona atual da pessoa ganha contorno. */ .troca-bus { margin-top: 12px; } .troca-bus .seat.troca-ocupada { opacity: .35; cursor: not-allowed; } .troca-bus .seat.troca-atual { cursor: default; outline: 3px solid var(--azul); outline-offset: 2px; } .ficha-trocar .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; } /* ---------- listas por ponto (Passageiros > Lista, Clientes, Menu) ---------- */ .v-lista { background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; overflow: hidden; } .v-lista + .v-lista, .v-lista + .btn, .btn + .v-lista { margin-top: 12px; } .v-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 16px; background: var(--cartao); border: 0; border-bottom: 1px solid var(--linha); border-radius: 0; text-align: left; color: var(--tinta); box-shadow: none; font-weight: 400; cursor: pointer; } .v-lista > .v-item:last-child { border-bottom: 0; } .v-item:active { background: var(--fundo); transform: none; } .v-item .cx { flex: 1; min-width: 0; } .v-item .nm { display: block; font-weight: 700; font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; } .v-item .mt { display: block; color: var(--tinta-2); } .v-item > svg.ic { flex: none; width: 24px; height: 24px; color: var(--tinta-2); vertical-align: 0; } .v-item .ico-q { margin: 0; } .num-bola { flex: none; min-width: 48px; height: 40px; border-radius: 10px; background: var(--fundo); border: 1px solid var(--linha); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; } .ponto-tit { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 12px 16px; background: var(--fundo); border-bottom: 1px solid var(--linha); font-weight: 800; } /* ---------- Serviços: cartões ---------- */ .serv-cartao { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--cartao); color: var(--tinta); border: 1px solid var(--linha); border-bottom: 3px solid var(--relevo); border-radius: 16px; padding: 14px 16px; min-height: 72px; font-weight: 400; box-shadow: none; } .serv-cartao:active { transform: translateY(2px); border-bottom-width: 1px; } .serv-cartao + .serv-cartao { margin-top: 12px; } .serv-cartao .cx { flex: 1; min-width: 0; } .serv-cartao .nm { display: block; font-size: 18px; font-weight: 800; } .serv-cartao .mt { display: block; color: var(--tinta-2); overflow-wrap: anywhere; } .ico-q { flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--azul-claro); color: var(--azul); display: flex; align-items: center; justify-content: center; } .ico-q svg.ic { width: 24px; height: 24px; vertical-align: 0; } /* ---------- Ficha do passageiro e venda ---------- */ .conta-cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; padding: 16px; margin-top: 12px; } .conta-cartao .rot { font-weight: 700; color: var(--tinta-2); } .conta-cartao .btn { margin-top: 10px; } .heroi { font-size: clamp(30px, 9.4vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -.5px; white-space: nowrap; margin: 2px 0 4px; } .cli-ok { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: var(--st-pago-bg); color: var(--st-pago-tx); font-weight: 700; } .cli-ok .cli-tx { flex: 1 1 180px; min-width: 0; } .cli-ok .btn { width: auto; flex: none; background: var(--cartao); color: var(--tinta); } .sug { margin-top: 6px; border: 1.5px solid var(--linha); border-radius: 12px; overflow: hidden; background: var(--cartao); } .sug:empty { display: none; } .sug button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--linha); border-radius: 0; background: var(--cartao); text-align: left; color: var(--tinta); font-weight: 400; box-shadow: none; margin: 0; } .sug button:last-child { border-bottom: 0; } .sug button:active { background: var(--azul-claro); } #fx_achados .btn { justify-content: flex-start; text-align: left; min-height: 56px; height: auto; padding: 8px 14px; white-space: normal; } .ja-pagou { margin-top: 14px; } .ja-pagou > span { display: block; font-weight: 700; margin-bottom: 6px; } .ficha-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ficha-acoes .btn { min-height: 56px; } .ficha-acoes .btn:last-child:nth-child(odd) { grid-column: 1 / -1; } .ficha-acoes .fam-pax { grid-column: 1 / -1; border: 0; padding: 4px 0; } .ficha-perigo { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--linha); display: grid; gap: 8px; } .v-alheia { background: var(--fundo); border-radius: 12px; padding: 12px 14px; margin-top: 8px; } .pg-caixa { border-radius: 16px; } /* ---------- Menu ---------- */ .menu-quem { background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; padding: 14px 16px; } .menu-quem b { display: block; font-size: 18px; } .menu-quem .mail { display: block; word-break: break-all; color: var(--tinta-2); } .menu-quem .ok { color: var(--verde); font-weight: 800; } .v-item.sair { color: var(--vermelho); } .v-item.sair .nm { color: var(--vermelho); } /* ---------- Embarque (Conferência): linha de 72 px ---------- */ .list-item.pax-emb { min-height: 72px; } .emb-check { width: 36px; height: 36px; border-radius: 10px; } .list-item.done { background: var(--st-emb-bg); border-color: #8FC9A3; } .list-item.done .big { color: var(--st-emb-tx); } /* ---------- "O que mudou" (V2): aparece uma vez ---------- */ .mudou { background: var(--azul-claro); border: 1.5px solid var(--azul); border-radius: 16px; padding: 14px 16px; margin-bottom: 16px; } .mudou h2 { font-size: 18px; margin: 0 0 6px; } .mudou ul { margin: 0 0 12px; padding-left: 20px; } .mudou li + li { margin-top: 4px; } /* ---------- Novidade (01/11/2026, até 01/12/2026): selo "Novo" e cartão da tela inicial ---------- No Menu o selo vai ao lado do nome (inline, não deforma a linha). No botão ★ da viagem ele é um badge ABSOLUTO no canto superior direito (01/11/2026, reclamação do dono no celular): não ocupa largura, ★ e ✎ ficam do mesmo tamanho; sobe acima da borda de cima mas não passa das laterais do botão (web/teste-largura-celular.mjs mede as duas coisas). */ .selo-novo { display: inline-block; background: var(--ambar-claro); color: var(--ambar-texto); border: 1px solid #F0DAA6; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; padding: 3px 7px; vertical-align: 2px; white-space: nowrap; letter-spacing: .02em; } .cab-nav .dir #cabAvaliar { position: relative; overflow: visible; } .cab-nav .dir #cabAvaliar .selo-novo { position: absolute; top: -8px; right: -1px; font-size: 10px; padding: 1px 4px; letter-spacing: 0; vertical-align: 0; box-shadow: 0 0 0 2px var(--cartao); } .novidade { position: relative; background: var(--ambar-claro); border: 1.5px solid #F0DAA6; border-radius: 16px; padding: 12px 52px 12px 16px; margin-bottom: 16px; color: var(--tinta); } .novidade p { margin: 0; overflow-wrap: anywhere; } .novidade p + p { margin-top: 6px; } .novidade .novidade-x { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; min-height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; box-shadow: none; color: var(--ambar-texto); border-radius: 12px; } .novidade .novidade-x svg.ic { width: 22px; height: 22px; vertical-align: 0; } .conta .linha.lucro.previsto b { color: var(--ambar-texto); } .ct-box h4.ct-h, .ct-box h3.ct-h { font-size: 16px; } .pg-tres b { font-size: 16px; } table.mini td, table.mini th { font-size: 16px; } .stat .n { white-space: nowrap; font-size: 20px; } @media (max-width: 430px) { table.mini td::before { font-size: 16px; text-transform: none; letter-spacing: 0; } table.mini td:first-child { font-size: 18px; } } .cli-tirado { display: flex; gap: 8px; align-items: center; margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: var(--ambar-claro); color: var(--ambar-texto); font-weight: 700; } .cli-tirado svg.ic { flex: none; vertical-align: 0; } /* Com uma folha aberta, a barra fica atrás do véu: o aviso desce para o pé da tela. */ body.com-barra:has(.modal-back) .toast { bottom: calc(12px + env(safe-area-inset-bottom)); } /* PC e tablet (etapa 1): o mapa não estica - largura fixa de ônibus (seção 11, --mapa-w 392px). */ @media (min-width: 600px) { .bus { max-width: 392px; margin: 0 auto; } } .seat { aspect-ratio: auto; } /* ============================================================================================= REDESIGN V2 - etapa 2 (29/10/2026): cartão com a contagem, Dinheiro, Clientes, tabelas, tablet (trilho) e PC (menu lateral, lista ao lado da viagem, ficha em painel). Relatório: seções 2, 4b, 10, 11, 12, 13, 16, 17c. ============================================================================================= */ /* ---------- cartão-bilhete: "12 de 44 vendidas" e "Falta R$ X" (gestão) ---------- */ .bilhete .b-num { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .bilhete .b-vend { font-size: 18px; font-weight: 700; } .bilhete .b-falta { font-size: 18px; font-weight: 800; color: var(--vermelho); } .bilhete .b-pago { font-size: 18px; font-weight: 800; color: var(--verde); } .bilhete .b-prog { display: block; margin-top: 6px; } /* ---------- ficha: só a conta de cima; o bloco de baixo é a lista de parcelas ---------- */ .pg-info { font-size: 16px; } /* ---------- Dinheiro ---------- */ .din-seg { display: grid; grid-template-columns: 1fr 1fr; } .din-seg > button { min-height: 48px; height: auto; padding: 6px 8px; line-height: 1.2; } .din-embreve { margin: 8px 2px 16px; color: var(--tinta-2); font-size: 16px; } .din-topo { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 8px; } .din-topo > div { background: var(--cartao); border: 1px solid var(--linha); border-radius: 14px; padding: 12px 14px; min-width: 0; } .din-topo .rot { display: block; color: var(--tinta-2); font-weight: 600; } .din-topo b { display: block; font-size: 22px; font-weight: 800; white-space: nowrap; } .ar-lista { background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; overflow: hidden; } .ar-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 16px; border-bottom: 1px solid var(--linha); align-items: center; } .ar-linha:last-child { border-bottom: 0; } .ar-linha.atrasado { box-shadow: inset 4px 0 0 var(--vermelho); } .ar-linha .cx { min-width: 0; } .ar-linha .nm { display: block; font-size: 18px; font-weight: 700; overflow-wrap: anywhere; } .ar-linha .mt { display: block; color: var(--tinta-2); } .ar-linha .v-tag { margin-top: 4px; } .ar-falta { font-size: 18px; font-weight: 800; color: var(--vermelho); text-align: right; } .ar-acoes { grid-column: 1 / -1; display: flex; gap: 8px; } .ar-acoes .btn { flex: 1 1 0; } .vg-avisos { display: grid; gap: 8px; margin-bottom: 12px; } .vg-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 12px; font-weight: 600; } .vg-aviso svg.ic { flex: none; width: 22px; height: 22px; vertical-align: 0; margin-top: 2px; } .vg-aviso.amb { background: var(--ambar-claro); color: var(--ambar-texto); border: 1px solid #F5D98B; } .vg-aviso.verm { background: var(--vermelho-claro); color: var(--vermelho-escuro); border: 1px solid #F5CBC6; } .vg-cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; padding: 16px; margin-bottom: 12px; } .vg-cartao .rot { font-weight: 700; color: var(--tinta-2); } .vg-tres { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 10px 0; } @media (min-width: 600px) { .vg-tres { grid-template-columns: repeat(3, 1fr); } } .vg-tres > div { background: var(--fundo); border-radius: 12px; padding: 10px 12px; min-width: 0; } .vg-tres span { display: block; color: var(--tinta-2); font-weight: 600; } .vg-tres b { display: block; font-size: 24px; font-weight: 800; } .vg-tres small { display: block; font-size: 16px; font-weight: 700; } .vg-tres .pos b { color: var(--verde); } .vg-tres .neg { background: var(--vermelho-claro); } .vg-tres .neg b, .vg-tres .neg small { color: var(--vermelho-escuro); } .vg-def { margin: 0; } /* ---------- Clientes ---------- */ .cb-acoes { margin: 12px 0 0; } .cf-topo { margin-bottom: 4px; } .cf-nome { font-size: 28px; font-weight: 800; line-height: 1.15; margin: 0 0 4px; overflow-wrap: anywhere; } /* ---------- tabelas (PC) que viram cartões (celular e tablet) ---------- */ .tab-cabe { width: 100%; overflow-x: auto; } .tab-v2 { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; overflow: hidden; } .tab-v2 th { text-align: left; padding: 10px 12px; background: var(--fundo); font-weight: 800; font-size: 16px; border-bottom: 1px solid var(--linha); white-space: nowrap; } .tab-v2 td { padding: 10px 12px; border-bottom: 1px solid var(--linha); font-size: 16px; vertical-align: top; overflow-wrap: anywhere; } .tab-v2 tbody tr:last-child td { border-bottom: 0; } .tab-v2 th.num, .tab-v2 td.num { text-align: right; white-space: nowrap; overflow-wrap: normal; } .tab-v2 .vg-nome { font-weight: 700; } .tab-v2 tr[tabindex] { cursor: pointer; } .tab-v2 tbody tr[tabindex]:hover td { background: var(--azul-claro); } @media (max-width: 1099px) { .tab-cabe { overflow: visible; } .tab-v2, .tab-v2 tbody, .tab-v2 tr, .tab-v2 td { display: block; width: auto; } .tab-v2 { background: transparent; border: 0; border-radius: 0; overflow: visible; } .tab-v2 thead { display: none; } .tab-v2 tr { background: var(--cartao); border: 1px solid var(--linha); border-bottom: 3px solid var(--relevo); border-radius: 14px; padding: 10px 14px; } .tab-v2 tr + tr { margin-top: 10px; } .tab-v2 td, .tab-v2 tbody tr:last-child td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: right; } .tab-v2 td::before { content: attr(data-rot); color: var(--tinta-2); font-weight: 600; text-align: left; flex: none; } .tab-v2 td.vg-nome { display: block; font-size: 18px; text-align: left; padding-bottom: 4px; } .tab-v2 td.vg-nome::before { content: none; } .tab-v2 td:empty { display: none; } .tab-v2 th.num, .tab-v2 td.num { white-space: normal; } } .so-pc { display: none !important; } @media (min-width: 1100px) { .so-pc { display: revert !important; } .so-cel { display: none !important; } div.so-pc { display: block !important; } button.so-pc { display: inline-flex !important; } } /* ---------- a mesma