/* ===== Clean Design (v5.0): Minimalismo Moderno Orientado a Dados =====
   Fundo cinza claro, cartões brancos de canto arredondado com sombra de 1dp, espaço em branco no lugar de linhas, uma cor viva só para a ação
   principal e estados ativos. A cor viva muda com a companhia escolhida (Todas = coral e degradê da marca na aba ativa; Gol, Latam e Azul = a cor delas).
   O degradê da marca aparece só no logotipo e no painel do topo. Grade de 8px. Veja DESIGN.md na raiz do projeto.
   Carregado por último; o prefixo `html[data-cia]` vence a paleta por companhia do tokens.css. */

/* ---------- Variáveis ---------- */
html[data-theme][data-cia] {
  --bg: #F8F9FA; --surface: #FFFFFF; --surface-2: #F1F3F4; --track: #ECEEF0;
  --text: #1A1A1A; --text-muted: #6B6B6B; --faint: #6B6B6B; --line: #ECEEF0; --rule: #ECEEF0; --hover-line: #D8DBDF;
  --accent: #C2410C; --accent-pressed: #9A3412; --accent-container: #FFF1EA; --accent-on-container: #9A3412;
  --nav-indicator: var(--todas-degrade); --nav-on-indicator: #FFFFFF;
  --primary: var(--accent); --on-primary: #FFFFFF; --primary-fill: var(--accent); --on-primary-fill: #FFFFFF; --focus: var(--accent);
  --elev-1: 0 1px 2px rgb(26 26 26 / .06), 0 1px 3px rgb(26 26 26 / .05); --shadow: var(--elev-1);
  --toast-bg: #1A1A1A; --tabbar-bg: #FFFFFF; --tabbar-h: 72px;
}
html[data-theme="dark"][data-cia] {
  --bg: #0F1115; --surface: #171A21; --surface-2: #20242D; --track: #262B35;
  --text: #F3F5F8; --text-muted: #A8B0BF; --faint: #A8B0BF; --line: #262B35; --rule: #262B35; --hover-line: #363C49;
  --accent: #FF8F5E; --accent-pressed: #FFB08A; --accent-container: rgb(255 143 94 / .16); --accent-on-container: #FFB08A;
  --on-primary: #1A1A1A; --on-primary-fill: #1A1A1A;
  --elev-1: 0 1px 2px rgb(0 0 0 / .5), 0 1px 3px rgb(0 0 0 / .35); --toast-bg: #272C39; --tabbar-bg: #171A21;
}
html[data-theme][data-cia="gol"]   { --accent: #B84300; --accent-pressed: #8F3300; --accent-container: #FFEBDD; --accent-on-container: #8F3300; --nav-indicator: #B84300; }
html[data-theme][data-cia="latam"] { --accent: #1B0088; --accent-pressed: #12005C; --accent-container: #ECE9FA; --accent-on-container: #1B0088; --nav-indicator: #1B0088; }
html[data-theme][data-cia="azul"]  { --accent: #0B4EA2; --accent-pressed: #083A7A; --accent-container: #DFEBFA; --accent-on-container: #083A7A; --nav-indicator: #0B4EA2; }
html[data-theme="dark"][data-cia="gol"]   { --accent: #FF8A3D; --accent-container: rgb(255 138 61 / .16); --accent-on-container: #FFB07A; --nav-indicator: #FF8A3D; --nav-on-indicator: #1A1A1A; }
html[data-theme="dark"][data-cia="latam"] { --accent: #B7A9FF; --accent-container: rgb(183 169 255 / .16); --accent-on-container: #D3CAFF; --nav-indicator: #B7A9FF; --nav-on-indicator: #1A1A1A; }
html[data-theme="dark"][data-cia="azul"]  { --accent: #6FB6FF; --accent-container: rgb(111 182 255 / .16); --accent-on-container: #A9D3FF; --nav-indicator: #6FB6FF; --nav-on-indicator: #1A1A1A; }

html, body { background: var(--bg); color: var(--text); }
body { font-size: calc(1rem * var(--font-scale)); line-height: 1.5; letter-spacing: 0; }
h1, h2, h3 { letter-spacing: 0; }
html[data-cia] h1 { font-size: 1.75rem; line-height: 2.25rem; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
html[data-cia] h2 { font-size: 1rem; line-height: 1.5; font-weight: 700; color: var(--text); }
.secondary, html[data-cia] .muted { color: var(--text-muted); }
.secondary { font-size: .875rem; line-height: 1.43; }
html[data-cia] #view { gap: var(--space-3, 24px); padding-top: 8px; }
html[data-cia] .section { gap: 16px; }
html[data-cia] .section-head { align-items: baseline; }
.text-link { font-size: .875rem; font-weight: 600; color: var(--text-muted); text-decoration: none; padding: 8px 0; }

/* ---------- Topo ---------- */
html[data-cia] .appbar { background: var(--bg); }
html[data-cia] .appbar::after { display: none; }
html[data-cia] .appbar.scrolled { box-shadow: 0 1px 3px rgb(26 26 26 / .08); border-bottom-color: transparent; }
html[data-cia] .brand img { height: calc(26px + (var(--appbar-h) - 54px) * .53); }
html[data-cia] .icon-btn { color: var(--text-muted); }
html[data-cia] .icon-btn:hover, html[data-cia] .icon-btn[aria-current="page"] { background: var(--surface-2); color: var(--text); }

/* ---------- Painel do topo (o cartão em degradê da marca), curto e com a arte ---------- */
html[data-cia] .board, html[data-cia] .board.board-compacto, html[data-cia] .board.board-extra, html[data-cia] .board.board-arte {
  display: grid; align-content: start; gap: 8px; min-height: 176px; padding: 16px !important; border-radius: 16px; box-shadow: var(--elev-1); color: #fff;
}
html[data-cia] .board.board-exterior { min-height: 232px; padding-bottom: 104px !important; }
html[data-cia] .board .board-ico, html[data-cia] .board .route, html[data-cia] .board .board-nota, html[data-cia] .board .board-cta { display: none !important; }
html[data-cia] .board .eyebrow { font-family: var(--font-ui); font-size: .6875rem; line-height: 1rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--board-accent, #FFE2C8); }
html[data-cia] .board .flaps { gap: 4px; font-size: .75rem; }
html[data-cia] .board .flaps span { padding: 4px 0; width: 1.75em; }
html[data-cia] .board .flaps span.gap { width: .6em; }
html[data-cia] .board h1 { max-width: 64%; font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; letter-spacing: -.01em; color: #fff; }
html[data-cia] .board p { max-width: 64%; font-size: .8125rem; line-height: 1.25rem; color: var(--board-text, rgb(255 255 255 / .92)); }
html[data-cia] .board.board-exterior h1, html[data-cia] .board.board-exterior p { max-width: 64%; }
html[data-cia] .board .arte-passaros { bottom: 6% !important; }
html[data-cia] .board .arte-aviao { width: 34%; }

/* ---------- Busca ---------- */
html[data-cia] .search-box { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 0 16px; background: var(--surface); border: 0; border-radius: 16px; box-shadow: var(--elev-1); color: var(--text-muted); }
html[data-cia] .search-box .input, html[data-cia] .search-box .fake-input { background: none; border: 0; box-shadow: none; padding: 0; min-height: 0; color: var(--text-muted); }

/* ---------- Cartões de tema: 2 colunas, um dado real em cada ---------- */
html[data-cia] .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 8px; border-top: 0; }
html[data-cia] .grid > * { min-width: 0; }
html[data-cia] .grid > .destaque, html[data-cia] .grid > .card-wrap.destaque { grid-column: 1 / -1; }
html[data-cia] .grid > .card-wrap { position: relative; display: grid; border: 0; }
html[data-cia] .grid > .card, html[data-cia] .grid > .card-wrap > .card {
  display: grid; align-content: space-between; justify-items: start; gap: 4px; height: 100%; min-height: 104px; padding: 16px;
  background: var(--surface); border: 0; border-radius: 12px; box-shadow: var(--elev-1); color: var(--text); text-align: left; position: relative; overflow: visible; transition: filter .15s;
}
html[data-cia] .grid a.card:hover { background: var(--surface); transform: none; box-shadow: var(--elev-1); }
html[data-cia] .grid a.card:active { filter: brightness(.96); transform: none; }
html[data-cia] .grid .card::before, html[data-cia] .grid .card::after { display: none; }
html[data-cia] .grid .card > *:not(.ico) { grid-column: auto; }
html[data-cia] .grid .card .ico { position: static; width: 24px; height: 24px; margin-bottom: 8px; display: block; background: none; color: var(--text); border-radius: 0; }
html[data-cia] .grid .card .ico svg { width: 24px; height: 24px; stroke-width: 1.75; }
html[data-cia] .grid .card .pill { grid-row: 1; font-size: .75rem; font-weight: 600; color: var(--text-muted); text-transform: none; letter-spacing: 0; background: none; padding: 0; }
html[data-cia] .grid .card b { font-family: var(--font-ui); font-size: .9375rem; line-height: 1.33; font-weight: 600; color: var(--text); }
html[data-cia] .grid .card small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .75rem; line-height: 1.33; color: var(--text-muted); }
html[data-cia] .grid .card .numero { position: absolute; left: 52px; top: 16px; display: block; margin: 0; }
html[data-cia] .grid .card .numero i { font-style: normal; font-family: var(--font-ui); font-size: .875rem; font-weight: 700; line-height: 24px; color: var(--text); font-variant-numeric: tabular-nums; background: var(--surface-2); padding: 2px 8px; border-radius: 8px; white-space: nowrap; }
html[data-cia] .grid .card .numero em { display: none; }
html[data-cia] .grid .card.tem-numero small { display: -webkit-box; }
html[data-cia] .grid .card .tag { position: static; margin-top: 4px; background: var(--surface-2); color: var(--text-muted); font-family: var(--font-ui); font-size: .6875rem; font-weight: 600; letter-spacing: 0; text-transform: none; border-radius: 8px; padding: 2px 8px; }
html[data-cia] .grid .card-wrap > .fav { position: absolute; right: 2px; top: 2px; bottom: auto; transform: none; width: 44px; height: 44px; color: var(--faint); opacity: 1; z-index: 2; }
html[data-cia] .grid .card-wrap > .fav.is-fav { color: var(--accent); }
html[data-cia] .card.soon { opacity: .6; }
html[data-cia] .cap { margin: 8px 0 0; color: var(--text-muted); font-size: .875rem; font-weight: 600; }
html[data-cia] .tabuleiro { display: grid; gap: 8px; }
html[data-cia] .more-themes summary { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; list-style: none; cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--text-muted); }
html[data-cia] .more-themes summary::-webkit-details-marker { display: none; }
html[data-cia] .more-themes[open] summary { margin-bottom: 8px; }
html[data-cia] .more-themes summary .i { transition: transform .2s; }
html[data-cia] .more-themes[open] summary .i { transform: rotate(90deg); }

/* ---------- Chips e seletor ---------- */
html[data-cia] .chips, html[data-cia] .chips.companhias { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-cia] .chips.scroll { flex-wrap: nowrap; }
html[data-cia] .chip { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--surface); color: var(--text-muted); font-weight: 600; font-size: .875rem; box-shadow: var(--elev-1); }
html[data-cia] .chip:hover { background: var(--surface); }
html[data-cia] .chip[aria-pressed="true"], html[data-cia] .chip[aria-checked="true"], html[data-cia][data-cia] .chip[data-id="todas"][aria-checked="true"] { background: var(--selected-bg); color: var(--selected-fg); box-shadow: none; }
html[data-cia] .choose .chip { background: var(--bg); box-shadow: none; }
html[data-cia] .choose .chip[aria-checked="true"] { background: var(--selected-bg); }
html[data-cia] .segmented { background: var(--track); border-radius: 999px; padding: 4px; gap: 4px; box-shadow: none; }
html[data-cia] .segmented button { min-height: 40px; border-radius: 999px; background: transparent; color: var(--text-muted); font-weight: 600; font-size: .875rem; box-shadow: none; }
html[data-cia] .segmented button[aria-checked="true"] { background: var(--selected-bg); color: var(--selected-fg); box-shadow: none; }
html[data-cia] .segmented button[aria-checked="true"] svg { color: var(--selected-icon); }

/* ---------- Tela inicial ---------- */
html[data-cia] .stage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0; }
html[data-cia] .stage { display: grid; justify-items: start; align-content: start; gap: 8px; height: 100%; padding: 16px; background: var(--surface); border-radius: 12px; box-shadow: var(--elev-1); text-decoration: none; color: var(--text); }
html[data-cia] .stage svg { width: 32px; height: 32px; color: var(--text); }
html[data-cia] .stage__name { font-size: .875rem; line-height: 1.43; font-weight: 700; }
html[data-cia] .stage__hint { font-size: .75rem; line-height: 1.33; color: var(--text-muted); }
html[data-cia] .shortcut-row { display: flex; gap: 8px; margin: 0 -16px; padding: 4px 16px 8px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 16px; scrollbar-width: none; list-style: none; }
html[data-cia] .shortcut-row::-webkit-scrollbar { display: none; }
html[data-cia] .shortcut-row li { flex: none; scroll-snap-align: start; }
html[data-cia] .shortcut { display: grid; align-content: space-between; justify-items: start; gap: 8px; width: 128px; min-height: 96px; padding: 16px; background: var(--surface); border-radius: 12px; box-shadow: var(--elev-1); text-decoration: none; color: var(--text); }
html[data-cia] .shortcut svg { width: 32px; height: 32px; }
html[data-cia] .shortcut__name { font-size: .875rem; line-height: 1.43; font-weight: 600; }
html[data-cia] .notice { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; background: var(--surface); border-radius: 16px; box-shadow: var(--elev-1); text-decoration: none; color: var(--text); }
html[data-cia] .notice__text { display: grid; gap: 4px; }
html[data-cia] .notice__title { font-size: 1rem; font-weight: 700; }
html[data-cia] .notice .i { color: var(--text-muted); }
html[data-cia] .choose { padding: 16px; background: var(--surface); border-radius: 16px; box-shadow: var(--elev-1); }
html[data-cia] .choose summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin: -8px 0; list-style: none; cursor: pointer; }
html[data-cia] .choose summary::-webkit-details-marker { display: none; }
html[data-cia] .choose__label { font-size: 1rem; font-weight: 700; }
html[data-cia] .choose__value { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; color: var(--text-muted); }
html[data-cia] .choose summary .i { transition: transform .2s; }
html[data-cia] .choose[open] summary .i { transform: rotate(90deg); }
html[data-cia] .choose .chips, html[data-cia] .choose > div:first-of-type { padding-top: 24px; }
html[data-cia] .choose__hint { display: block; padding-top: 16px; }
html[data-cia] .choose .list { margin-top: 16px; }

/* ---------- Meu voo ---------- */
html[data-cia] .pass { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; background: var(--surface); border-radius: 16px; box-shadow: var(--elev-1); color: var(--text); text-decoration: none; -webkit-mask: none; mask: none; position: relative; }
html[data-cia] .pass::before, html[data-cia] .pass::after { display: none; }
html[data-cia] .pass .main { display: grid; gap: 8px; padding: 0; border: 0; }
html[data-cia] .pass .eyebrow { font-family: var(--font-ui); font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
html[data-cia] .pass .cities { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }
html[data-cia] .pass .cities b { font-family: var(--font-ui); font-size: 1.75rem; line-height: 2rem; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }
html[data-cia] .pass .cities .line { position: relative; display: grid; place-items: center; height: 24px; background: none; color: var(--text-muted); border: 0; }
html[data-cia] .pass .cities .line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dotted var(--hover-line); }
html[data-cia] .pass .cities .line svg { position: relative; padding: 0 8px; box-sizing: content-box; background: var(--surface); width: 24px; height: 24px; }
html[data-cia] .pass .muted.mono { font-family: var(--font-ui); font-size: .875rem; letter-spacing: 0; color: var(--text-muted); }
html[data-cia] .pass .stub { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 8px; padding: 0; border: 0; text-align: left; }
html[data-cia] .pass .stub .eyebrow { grid-column: 1; }
html[data-cia] .pass .stub b { grid-column: 2; font-family: var(--font-ui); font-size: .875rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
html[data-cia] .pass .stub .pass-progress { grid-column: 1 / -1; display: block; height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
html[data-cia] .pass .stub .pass-progress i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
html[data-cia] .pass .stub small { display: none; }
html[data-cia] .pass .cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 16px; background: var(--primary-fill); color: var(--on-primary-fill); font-weight: 600; font-size: 1rem; }
html[data-cia] .pass.empty-pass .stub { display: none; }

/* ---------- Avisos ---------- */
html[data-cia] .sign { border: 0; border-radius: 12px; padding: 16px; background: var(--surface); color: var(--text); font-size: .9375rem; line-height: 1.5; box-shadow: var(--elev-1); }
html[data-cia] .sign .i { color: var(--text-muted); }
html[data-cia] .sign.warn { background: var(--warn-bg); color: var(--warn-fg); box-shadow: none; } html[data-cia] .sign.warn .i { color: var(--warn-fg); }
html[data-cia] .sign.ok { background: var(--ok-bg); color: var(--ok-fg); box-shadow: none; } html[data-cia] .sign.ok .i { color: var(--ok-fg); }
html[data-cia] .sign.wayfind { font-weight: 600; }
html[data-cia] .sign.wayfind .pict { background: none; color: var(--danger-fg); }
html[data-cia] .disclaimer { border-top: 0; padding-top: 8px; color: var(--text-muted); font-size: .75rem; text-align: center; }
html[data-cia] .rede-pilula { border: 0; background: var(--surface); color: var(--text); border-radius: 999px; box-shadow: var(--elev-1); }
html[data-cia] .redes-home { display: grid; gap: 8px; }

/* ---------- Apoio do painel: "Dever do passageiro" e o botão do gerador ---------- */
html[data-cia] .topo-apoio { display: contents; }
html[data-cia] .note, html[data-cia] .cta-card { padding: 16px; background: var(--surface); border-radius: 16px; box-shadow: var(--elev-1); }
html[data-cia] .note summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin: -8px 0; list-style: none; cursor: pointer; font-weight: 700; }
html[data-cia] .note summary::-webkit-details-marker { display: none; }
html[data-cia] .note summary .i { color: var(--text-muted); transition: transform .2s; }
html[data-cia] .note[open] summary .i { transform: rotate(90deg); }
html[data-cia] .note[open] .secondary { padding-top: 24px; }
html[data-cia] .cta-card { display: grid; gap: 16px; }
html[data-cia] .cta-card__text { font-size: .875rem; line-height: 1.43; color: var(--text-muted); }

/* ---------- Telas internas e temas ---------- */
html[data-cia] .page-head h1 { font-size: 1.5rem; line-height: 2rem; }
html[data-cia] .topic-intro { background: none; border: 0; padding: 4px 0 0; box-shadow: none; display: grid; gap: 8px; }
html[data-cia] .topic-intro > .ico { display: none; }
html[data-cia] .eyebrow { font-family: var(--font-ui); font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
html[data-cia] .lead { color: var(--text-muted); font-size: 1rem; line-height: 1.5; }
html[data-cia] .topic-tags .tag, html[data-cia] .tag { background: var(--surface-2); color: var(--text-muted); font-family: var(--font-ui); font-weight: 600; letter-spacing: 0; text-transform: none; }
html[data-cia] .indice .chip { font-size: .875rem; }

/* ---------- Blocos de conteúdo: cada um é um cartão; o espaço separa ---------- */
html[data-cia] .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; background: none; border-radius: 0; overflow: visible; }
html[data-cia] .fact { background: var(--surface); border: 0; border-radius: 12px; box-shadow: var(--elev-1); padding: 16px; }
html[data-cia] .fact::before { display: none; }
html[data-cia] .fact b { font-family: var(--font-ui); font-weight: 700; font-size: 1.5rem; line-height: 2rem; color: var(--text); font-variant-numeric: tabular-nums; }
html[data-cia] .fact small { color: var(--text-muted); font-size: .8125rem; }
html[data-cia] .steps { display: grid; gap: 8px; border-top: 0; }
html[data-cia] .steps li { background: var(--surface); border: 0; border-radius: 12px; box-shadow: var(--elev-1); padding: 16px; }
html[data-cia] .steps li::before { background: var(--bg); border: 0; color: var(--text); font-family: var(--font-ui); font-weight: 700; }
html[data-cia] .checks li { border-bottom: 0; }
html[data-cia] .can-cant > div, html[data-cia] .can, html[data-cia] .cant { border-radius: 12px; box-shadow: none; }
html[data-cia] .accordion { display: grid; gap: 8px; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
html[data-cia] .accordion details { background: var(--surface); border: 0; border-radius: 12px; box-shadow: var(--elev-1); padding: 0 16px; }
html[data-cia] .accordion details + details { border-top: 0; }
html[data-cia] .accordion summary { min-height: 56px; padding: 8px 0; font-weight: 600; font-size: 1rem; }
html[data-cia] .accordion summary:hover { background: none; color: var(--text); }
html[data-cia] .acc-body { padding: 0 0 16px; }
html[data-cia] .airline, html[data-cia] .cta-box { background: var(--surface); border: 0; border-radius: 12px; box-shadow: var(--elev-1); }
html[data-cia] .sources a { color: var(--accent); }
html[data-cia] .topo-btn { background: var(--surface); color: var(--text); border: 0; box-shadow: 0 2px 8px rgb(26 26 26 / .18); }
html[data-cia] .list { display: grid; gap: 8px; border-top: 0; background: none; box-shadow: none; border-radius: 0; }
html[data-cia] .row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 56px; padding: 16px; background: var(--surface); border: 0; border-radius: 12px; box-shadow: var(--elev-1); text-decoration: none; color: var(--text); }
html[data-cia] .row + .row { border-top: 0; }
html[data-cia] .row .ico { background: none; color: var(--text); width: 24px; height: 24px; border-radius: 0; display: grid; place-items: center; }
html[data-cia] .row .txt b { font-size: 1rem; font-weight: 600; } html[data-cia] .row .txt small { font-size: .8125rem; color: var(--text-muted); }
html[data-cia] .setting, html[data-cia] .out-box, html[data-cia] .form fieldset { background: var(--surface); border: 0; border-radius: 16px; box-shadow: var(--elev-1); }

/* ---------- Botões e campos ---------- */
html[data-cia] .btn { min-height: 48px; border-radius: 16px; font-weight: 600; font-size: 1rem; background: var(--surface); color: var(--text); border: 0; box-shadow: var(--elev-1); }
html[data-cia] .btn:hover { background: var(--surface); }
html[data-cia] .btn-primary { background: var(--primary-fill); color: var(--on-primary-fill); box-shadow: none; }
html[data-cia] .btn-primary:hover { background: var(--primary-fill); filter: brightness(1.05); }
html[data-cia] .btn-primary:active { background: var(--accent-pressed); }
html[data-cia] .btn-ghost { background: transparent; box-shadow: none; color: var(--accent); }
html[data-cia] .input { min-height: 48px; border-radius: 12px; border: 0; background: var(--surface); font-size: 1rem; color: var(--text); box-shadow: inset 0 0 0 1px #D8DBDF; }
html[data-theme="dark"][data-cia] .input { box-shadow: inset 0 0 0 1px var(--hover-line); }
html[data-cia] .input:focus { outline: 2px solid var(--accent); outline-offset: 0; box-shadow: none; }
html[data-cia] .progress-bar { background: var(--track); } html[data-cia] .progress-bar span { background: var(--accent); }
html[data-cia] .toast { background: var(--toast-bg); color: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / .22); }

/* ---------- Menu de baixo (Material 3): liso, 4 abas; aba ativa com pílula ---------- */
html[data-cia] .tabbar {
  background: var(--tabbar-bg); -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; border-radius: 0;
  box-shadow: 0 -1px 3px rgb(26 26 26 / .08); padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
html[data-theme="dark"][data-cia] .tabbar { box-shadow: 0 -1px 3px rgb(0 0 0 / .5); }
html[data-cia] .tabbar-in { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--content-max); }
html[data-cia] .tabbar a { gap: 4px; min-height: 56px; padding: 0; border-radius: 0; font-size: .75rem; font-weight: 600; color: var(--text-muted); }
html[data-cia] .tabbar a svg { width: 56px; height: 32px; padding: 4px 16px; stroke-width: 1.75; }
html[data-cia] .tabbar a[aria-current="page"] { color: var(--text); }
html[data-cia] .tabbar a[aria-current="page"] svg { color: var(--nav-on-indicator); background: transparent; }
html[data-cia] .tabbar-pill { background: var(--nav-indicator); box-shadow: none; }
html[data-cia] .tabbar-pill::after { display: none; }

/* ---------- Telas maiores ---------- */
@media (min-width: 600px) {
  html[data-cia] .shortcut-row { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; }
  html[data-cia] .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-cia] .board h1, html[data-cia] .board p { max-width: 52ch; }
}

/* Acertos: busca (o ícone entra no fluxo) e botão do voo em largura total */
html[data-cia] .search-box > svg { position: static; flex: none; width: 24px; height: 24px; color: var(--text-muted); }
html[data-cia] .search-box .fake-input { padding-left: 0; flex: 1; }
html[data-cia] .pass .cta { width: 100%; }
html[data-cia] .pass .stub { width: auto; justify-items: stretch; align-content: start; }
html[data-cia] .pass .stub b { white-space: nowrap; }
html[data-cia] .pass .cities .line { display: flex; align-items: center; justify-content: center; width: 100%; }
html[data-cia] .pass .cities .line svg { color: var(--text-muted) !important; }
html[data-theme][data-cia] .search-box .input, html[data-theme][data-cia] .search-box .fake-input { box-shadow: none !important; background: none !important; }
html[data-cia] .search-box > svg { transform: none; top: auto; left: auto; margin: 0; }

/* ---------- Acerto: as abinhas (details) não herdam mais a altura mínima do cartão antigo ---------- */
html[data-cia] .card { min-height: 0; border: 0; }
html[data-cia] details.card { display: block; gap: 0; }
html[data-cia] .grid > .card, html[data-cia] .grid > .card-wrap > .card { min-height: 104px; }

/* ---------- Botão "Início" no meio do menu: pequeno, elevado, com o símbolo da marca ---------- */
html[data-cia] .tabbar-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 80px minmax(0, 1fr) minmax(0, 1fr); }
html[data-cia] .tabbar a.tabbar-home { overflow: visible; align-content: end; padding-bottom: 2px; }
html[data-cia] .tabbar-home__btn {
  display: grid; place-items: center; width: 56px; height: 56px; box-sizing: border-box; border-radius: 50%; border: 3px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, transparent border-box;
  box-shadow: 0 1px 3px rgb(26 26 26 / .14), 0 2px 8px rgb(26 26 26 / .10); transition: transform .15s var(--ease);
}
html[data-cia] .tabbar-home:active .tabbar-home__btn { transform: scale(.94); }
html[data-cia] .tabbar-home__btn img { display: block; width: 36px; height: auto; }
html[data-theme="dark"][data-cia] .tabbar-home__btn { background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, transparent border-box; box-shadow: 0 1px 3px rgb(0 0 0 / .5); }
html[data-cia] .tabbar a.tabbar-home[aria-current="page"] .tabbar-home__btn { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--nav-indicator) border-box; }
html[data-theme="dark"][data-cia] .tabbar a.tabbar-home[aria-current="page"] .tabbar-home__btn { background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--nav-indicator) border-box; }

/* Telas muito estreitas (320px): enfeites do painel não geram rolagem lateral. A linha "Problema no voo?" segue o estilo novo. */
html[data-cia], html[data-cia] body { overflow-x: clip; }
html[data-cia] .sign.wayfind { font-family: var(--font-ui); text-transform: none; letter-spacing: 0; font-size: .9375rem; font-weight: 600; }


/* ---------- Opção marcada (chips e seletores): tom da companhia; em "Todas", o colorido da marca com transparência ----------
   (a aba ativa do menu de baixo continua forte, com `--nav-indicator`) */
html[data-theme][data-cia] { --selected-bg: var(--accent-container); --selected-fg: var(--accent-on-container); --selected-icon: var(--accent); }
html[data-theme][data-cia="todas"] {
  --selected-bg: linear-gradient(135deg, rgb(11 79 184 / .15), rgb(215 25 63 / .15) 55%, rgb(255 122 26 / .20));
  --selected-fg: var(--text); --selected-icon: var(--text);
}
html[data-theme="dark"][data-cia="todas"] {
  --selected-bg: linear-gradient(135deg, rgb(70 130 235 / .34), rgb(235 60 95 / .30) 55%, rgb(255 140 60 / .34));
}
/* O círculo do meio salta para cima da barra sem aumentá-la; o rótulo "Início" fica alinhado com os das outras abas. */
html[data-cia] .tabbar a.tabbar-home { min-height: 56px; }
html[data-cia] .tabbar-home__btn { margin-top: -22px; }