/* ==========================================================
   A Floresta Viagens — Trip App

   TEMA CLARO desde 2026-08-04, a partir das 6 referências em
   `Referências VIAJANT\UI\`. O tema anterior era escuro com cartões
   translúcidos; foi trocado por um motivo medido, não por gosto: o app é lido
   NA RUA, SOB SOL, e texto claro sobre fundo escuro desaparece na luz do dia.

   Os TOKENS vivem em `sistema.css` (camada portável, compartilhável com o
   Lojin). Este arquivo é só o que é específico do Viajant.

   O bloco abaixo é uma PONTE: mantém os nomes de variável antigos, que os
   ~1.700 linhas de CSS deste arquivo já consomem, e os reaponta para os tokens
   novos. Assim o tema inteiro vira sem reescrever cada regra.
   ========================================================== */

:root{
  /* ponte: nomes antigos -> tokens do sistema */
  --bg-0:var(--papel);
  --bg-1:var(--papel-2);
  --bg-2:var(--papel-2);
  --grad-accent-a:var(--acao);
  --grad-accent-b:var(--acao-clara);
  --lime:var(--acao);
  --cyan:var(--acao);
  --amber:var(--atencao);
  --coral:var(--erro);
  --green:var(--ok);
  --teal:var(--acao);

  /* o "vidro" some: no tema claro o cartão é sólido e opaco — é o que garante
     contraste previsível, em vez de depender do que estiver atrás */
  --glass-bg:var(--cartao);
  --glass-bg-strong:var(--cartao);
  --glass-border:var(--borda);
  --text-0:var(--tinta);
  --text-1:var(--tinta-media);
  --text-2:var(--tinta-suave);

  --radius-xl:var(--r-cartao);
  --radius-lg:var(--r-cartao);
  --radius-md:var(--r-mini);
  --radius-pill:var(--r-pilula);

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:28px;

  --tap-min:var(--toque);

  --shadow-soft:var(--sombra);
  /* Manrope vinha DEPOIS de -apple-system: como esta sempre resolve, a fonte de
     corpo do app era a do sistema e a Manrope baixada nunca era usada — a
     tipografia era indeterminada por aparelho. Achado do designer-tipografico,
     2026-08-05. A fonte escolhida vem primeiro; sistema e o fallback. */
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Anton", Impact, "Arial Black", sans-serif;

  /* menus também deixam de ser roxo-escuro fixo e passam a seguir a skin */
  --menu-bg:var(--cartao);
  --menu-bg-2:var(--papel-2);
  --menu-accent:var(--acao);
  --menu-gold:var(--atencao);
  --menu-danger:var(--erro);
  --menu-text:var(--tinta);
  --menu-text-dim:var(--tinta-suave);
}

/* ---- Papel de parede customizável pelo usuário ---- */
.app-wallpaper{
  position:fixed; inset:0; z-index:-1;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  opacity:0.5;
}
.app-wallpaper::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.30), rgba(0,0,0,0.68));
}
.app-wallpaper.empty{ display:none; }

*{ box-sizing:border-box; }
button, input, select, textarea{ font-family:var(--font); }

html,body{
  margin:0;
  padding:0;
  height:100%;
  font-family:var(--font);
  color:var(--text-0);
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(235,94,40,0.30), transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, rgba(217,140,61,0.22), transparent 55%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 45%, var(--bg-2) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  overflow-x:hidden;
}
*{ min-width:0; }

#app{
  max-width:560px;
  margin:0 auto;
  min-height:100vh;
  padding:0 0 calc(120px + env(safe-area-inset-bottom)) 0;
  position:relative;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:0; height:0; }

/* ---------- Header ---------- */
.hero{
  padding:28px 20px 18px;
  position:relative;
}
.brand-app{
  font-size:11px;
  font-weight:800;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:10px;
}
.hero-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--text-2);
  letter-spacing:0.02em;
}
.brand .dot{
  width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,var(--lime),var(--cyan));
  box-shadow:0 0 12px rgba(235,94,40,0.7);
}
.avatars{
  display:flex;
  align-items:center;
}
.avatar{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;
  background:linear-gradient(135deg,var(--grad-accent-a),var(--grad-accent-b));
  border:2px solid var(--bg-1);
  color:var(--papel);
}
.avatar + .avatar{ margin-left:-10px; }

.hero-title-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.hero-title{
  font-family:var(--font-display);
  font-size:clamp(28px, 9vw, 44px);
  font-weight:400;
  line-height:0.95;
  letter-spacing:0.01em;
  text-transform:uppercase;
  margin:0 0 6px;
  font-style:italic;
  overflow-wrap:break-word;
  word-break:break-word;
  min-width:0;
  flex:1;
}
.hero-title span{
  background:linear-gradient(135deg,var(--lime),var(--cyan));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-edit-btn{
  flex:none;
  width:30px;height:30px;
  margin-top:4px;
  border-radius:50%;
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  color:var(--text-1);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;
  cursor:pointer;
}
.hero-sub{
  color:var(--text-1);
  font-size:14.5px;
  margin:0 0 18px;
  overflow-wrap:break-word;
}

.hero-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.stat-card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:var(--radius-lg);
  padding:14px 16px;
}
.stat-card .label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--text-2);
  margin-bottom:6px;
}
.stat-card .value{
  font-size:20px;
  font-weight:800;
}
.stat-card .value.countdown{
  background:linear-gradient(135deg,var(--lime),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* progress ring bar */
.progress-wrap{
  margin-top:12px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:14px 16px;
  backdrop-filter:blur(20px);
}
.progress-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:8px;
  font-size:12.5px;
  color:var(--text-1);
}
.progress-head b{ color:var(--text-0); }
.progress-bar{
  height:8px;
  border-radius:99px;
  background:rgba(30,27,24,.05);
  overflow:hidden;
}
.progress-bar > i{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--lime),var(--cyan));
  border-radius:99px;
  transition:width .4s ease;
}

/* ---------- Alerts banner ---------- */
.alerts-banner{
  margin:6px 20px 4px;
  background:linear-gradient(135deg, rgba(193,68,58,0.16), rgba(217,140,61,0.10));
  border:1px solid rgba(255,140,110,0.35);
  border-radius:var(--radius-lg);
  padding:14px 16px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:12px;
}
.alerts-banner .icn{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,140,110,0.2);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex:none;
}
.alerts-banner .txt b{ display:block;font-size:14.5px;margin-bottom:2px;}
.alerts-banner .txt span{ font-size:12.5px;color:var(--text-1);}
.alerts-banner .chevron{ margin-left:auto;color:var(--text-2);font-size:18px; }

/* ---------- Sync status ---------- */
.sync-banner{
  margin:6px 20px 4px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12.5px;
  color:var(--text-1);
}
.sync-banner.error{ border-color:rgba(193,68,58,0.4); color:#f3d3c9; }

/* ---------- Filter pills ---------- */
.filters-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.filters-wrap::before,
.filters-wrap::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:40px;
  z-index:2;
  pointer-events:none;
  transition:opacity .25s ease;
}
.filters-wrap::before{
  left:0;
  background:linear-gradient(90deg, rgba(244,239,233,.75), rgba(244,239,233,0));
}
.filters-wrap::after{
  right:0;
  background:linear-gradient(270deg, rgba(244,239,233,.75), rgba(244,239,233,0));
}
.filters-wrap.at-start::before{ opacity:0; }
.filters-wrap.at-end::after{ opacity:0; }
.filter-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(44,35,36,0.75);
  backdrop-filter:blur(6px);
  border:1px solid var(--glass-border);
  color:var(--text-0);
  font-size:16px;
  line-height:1;
  cursor:pointer;
  z-index:3;
  transition:opacity .2s ease, visibility .2s ease;
}
.filter-arrow-left{ left:8px; }
.filter-arrow-right{ right:8px; }
.filter-arrow.disabled{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.filters{
  display:flex;
  gap:8px;
  padding:16px 20px 6px;
  overflow-x:auto;
  scrollbar-width:none;
  cursor:grab;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.filters:active{ cursor:grabbing; }
.filters::-webkit-scrollbar{ display:none; }
.pill{
  flex:none;
  padding:9px 16px;
  min-height:var(--tap-min);
  border-radius:var(--radius-pill);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  color:var(--text-1);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:all .2s ease;
  display:flex;align-items:center;gap:6px;
}
.pill.active{
  background:var(--text-0);
  color:var(--papel);
  border-color:var(--text-0);
}
.pill .count{
  font-size:11px;
  background:rgba(0,0,0,0.15);
  padding:1px 6px;
  border-radius:99px;
}
.pill.active .count{ background:rgba(0,0,0,0.12); }

/* ---------- Timeline ---------- */
.timeline{
  padding:14px 20px 20px;
  position:relative;
}
.day-label{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:26px 0 10px;
  color:var(--text-0);
  font-family:var(--font-display);
  font-style:italic;
  font-size:19px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:0.02em;
}
.day-label .line{
  flex:1;height:1px;
  background:linear-gradient(90deg, var(--glass-border), transparent);
}

.leg{
  position:relative;
  display:flex;
  gap:12px;
  margin-bottom:10px;
}
.leg-rail{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:34px;
  flex:none;
}
.leg-dot{
  width:34px;height:34px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  flex:none;
}
.leg-dot.confirmed{ box-shadow:inset 0 0 0 2px rgba(138,155,94,0.5); }
.leg-dot.pending{ box-shadow:inset 0 0 0 2px rgba(217,140,61,0.5); }
.leg-dot.alert{ box-shadow:inset 0 0 0 2px rgba(193,68,58,0.6); }
.leg-thread{
  width:2px;
  flex:1;
  background:linear-gradient(180deg, var(--glass-border), transparent);
  margin-top:4px;
}

.card{
  flex:1;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:14px 16px;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:var(--shadow-soft);
  margin-bottom:14px;
  transition:transform .15s ease, background .2s ease, max-height .35s ease;
  max-height:326px;
  overflow:hidden;
  position:relative;
  box-sizing:border-box;
}
.card:active{ transform:scale(0.985); }
.card.expanded{ max-height:1400px; }
.card.reorder-active{ cursor:grab; }
.card-fade-toggle{
  position:absolute; left:0; right:0; bottom:0;
  height:52px;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:8px;
  background:linear-gradient(180deg, rgba(58,45,45,0) 0%, var(--bg-1) 78%);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  cursor:pointer;
  font-size:11.5px;
  font-weight:800;
  color:var(--text-0);
  letter-spacing:0.02em;
}
.card.expanded .card-fade-toggle{ position:static; background:none; padding:8px 0 0; margin-top:2px; }
.card-reorder-handle{
  position:absolute; top:10px; right:10px;
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--glass-bg-strong); border:1px solid var(--glass-border);
  cursor:grab; font-size:15px; color:var(--text-1); z-index:2;
}
.card-reorder-handle:active{ cursor:grabbing; }

.card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:6px;
}
.card-title{
  font-size:15.5px;
  font-weight:700;
  line-height:1.3;
}
.card-meta{
  font-size:12.5px;
  color:var(--text-1);
  margin-top:2px;
}
.card-top-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex:none;
}
.badge{
  flex:none;
  font-size:10.5px;
  font-weight:700;
  padding:4px 9px;
  border-radius:99px;
  text-transform:uppercase;
  letter-spacing:0.03em;
  white-space:nowrap;
}
.badge.confirmed{ background:rgba(138,155,94,0.15); color:var(--green); }
.badge.pending{ background:rgba(217,140,61,0.15); color:var(--amber); }
.badge.alert{ background:rgba(193,68,58,0.18); color:var(--coral); }

.card-route{
  display:flex;
  align-items:center;
  gap:8px;
  margin:10px 0;
  font-size:14px;
  font-weight:600;
}
.airline-badge{
  flex:none; width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:800; letter-spacing:0.02em;
}
.card-route .code{
  background:rgba(30,27,24,.05);
  padding:4px 9px;
  border-radius:8px;
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
  font-size:13px;
}
.card-route .arrow{ color:var(--text-2); }

.card-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  font-size:12.5px;
  color:var(--text-1);
  margin-top:8px;
}
.card-row .k{ color:var(--text-2); margin-right:4px; }

.card-alert{
  margin-top:10px;
  padding:9px 11px;
  border-radius:10px;
  /* Era `color:#ffd7d0` — rosa CLARO, sobra do tema escuro: sobre o cartão
     claro ficava ilegível justamente no elemento que mostra a PENDÊNCIA.
     Achado por captura de tela em 2026-08-04. */
  /* valores SÓLIDOS de propósito: color-mix aqui deu contraste imprevisível na
     medição, e este é o elemento que carrega a PENDÊNCIA — não é lugar para
     depender de mistura resolvida em tempo de render.
     Medido: #8C1D16 sobre #FBEDEB = 8,4:1. */
  background:#FBEDEB;
  border:1px solid #F0C9C4;
  border-left:4px solid #A32B22;
  font-size:var(--t-apoio);
  color:#8C1D16;
  font-weight:600;
  display:flex;
  gap:8px;
}

.card-note{
  margin-top:8px;
  font-size:12.5px;
  color:var(--text-2);
  font-style:italic;
}

.card-actions{
  display:flex;
  gap:8px;
  margin-top:12px;
  flex-wrap:wrap;
}
.btn{
  border:none;
  cursor:pointer;
  font-weight:700;
  font-size:12.5px;
  padding:9px 14px;
  min-height:var(--tap-min);
  border-radius:var(--radius-pill);
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:transform .15s ease, opacity .15s ease;
}
.btn:active{ transform:scale(0.96); }

/* ---------- Feedback de clique padronizado (todos os controles) ---------- */
.nav-btn, .auth-tab, .achv-tab, .font-swatch, .color-swatch, .avatar-color-dot,
.fill-toggle, .side-drawer-item, .photo-gallery-thumb, .filter-arrow, .filter-pill,
.chat-send-btn, .chat-media-btn, .map-close, .side-drawer-close, .icon-btn,
.city-panel-close, .auth-oauth-btn, .auth-forgot, .auth-back, .city-panel-leg,
.category-tile, .h-arrow, .est-card, .place-card, .hero-edit-btn, .view-btn,
.pin-menu-item, .compact-row{
  transition:transform .12s ease, filter .12s ease, opacity .12s ease;
}
.nav-btn:active, .auth-tab:active, .achv-tab:active, .font-swatch:active, .color-swatch:active,
.avatar-color-dot:active, .fill-toggle:active, .side-drawer-item:active, .photo-gallery-thumb:active,
.filter-arrow:active, .filter-pill:active, .chat-send-btn:active, .chat-media-btn:active,
.map-close:active, .side-drawer-close:active, .icon-btn:active, .city-panel-close:active,
.auth-oauth-btn:active, .city-panel-leg:active,
.category-tile:active, .h-arrow:active, .est-card:active, .place-card:active,
.hero-edit-btn:active, .view-btn:active,
.pin-menu-item:active, .compact-row:active{
  transform:scale(0.93);
  filter:brightness(0.85);
}
.btn-primary{
  background:linear-gradient(135deg,var(--lime),var(--cyan));
  color:var(--papel);
}
.btn-ghost{
  background:rgba(30,27,24,.05);
  color:var(--text-0);
  border:1px solid var(--glass-border);
}
.btn-ghost.resolved{
  background:rgba(138,155,94,0.15);
  color:var(--green);
}
.btn-danger{
  background:rgba(193,68,58,0.15);
  color:var(--coral);
  border:1px solid rgba(193,68,58,0.3);
}
.btn-block{ width:100%; justify-content:center; }

.icon-btn{
  width:var(--tap-min);
  height:var(--tap-min);
  flex:none;
  border:1px solid var(--glass-border);
  background:rgba(30,27,24,.05);
  color:var(--text-1);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.icon-btn:active{ transform:scale(0.92); }
.icon-btn.danger:active{ background:rgba(193,68,58,0.18); }

.input-inline{
  margin-top:10px;
  display:flex;
  gap:8px;
}
.input-inline input, .input-inline textarea{
  flex:1;
  background:rgba(0,0,0,0.25);
  border:1px solid var(--glass-border);
  color:var(--text-0);
  border-radius:10px;
  padding:10px 12px;
  font-size:13px;
  min-height:var(--tap-min);
}
.input-inline textarea{ resize:vertical; min-height:38px; }

/* ---------- Botão "Novo Trecho" (agora vive no bottom-nav, ver .nav-btn-accent) ---------- */

/* ---------- Mapa real (Leaflet + OpenStreetMap) ---------- */
/* O mapa precisa ficar abaixo do painel da cidade (bottom sheet que abre por cima
   dele), mas os demais modais genéricos (formulários, chat, conquistas) continuam
   acima de tudo — por isso a sobreposição explícita de z-index só para o mapa. */
.modal-backdrop.map-modal{ z-index:1100; }
.map-modal .modal-sheet{
  padding:0;
  max-height:92vh;
  height:92vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.map-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px 10px;
}
.map-head .modal-title{ margin-bottom:0; font-family:var(--font-display); font-style:italic; text-transform:uppercase; }
.map-close{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--glass-border);
  background:rgba(30,27,24,.05);
  color:var(--text-0);
  font-size:16px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
#map-canvas{
  flex:1;
  width:100%;
  background:#e5e3df;
}

/* Em telas maiores (tablet/desktop), o mapa preenche o dispositivo inteiro,
   como no Google Maps — deixa de ter cara de "cartão de celular". */
@media (min-width: 860px){
  .map-modal{ align-items:stretch; justify-content:stretch; }
  .map-modal .modal-sheet{
    max-width:none;
    width:100vw;
    height:100vh;
    max-height:100vh;
    border-radius:0;
    margin:0;
  }
  .map-head{ padding:22px 32px 14px; }
}
.leaflet-container{
  font-family:var(--font);
  background:#e5e3df;
}
.trip-pin{
  display:flex;
  flex-direction:column;
  align-items:center;
  transform:translateY(-6px);
}
.trip-pin-card{
  min-width:96px;
  max-width:150px;
  background:var(--bg-1);
  border:2px solid var(--text-0);
  border-radius:14px;
  padding:8px 10px 7px;
  box-shadow:0 8px 20px rgba(30,27,24,.10);
  text-align:center;
}
.trip-pin-badge{
  display:inline-block;
  background:var(--coral);
  color:#fff;
  font-size:10px;
  font-weight:800;
  padding:2px 7px;
  border-radius:6px;
  margin-bottom:4px;
  text-transform:uppercase;
}
.trip-pin-title{
  font-family:var(--font-display);
  font-style:italic;
  font-size:14px;
  color:var(--text-0);
  text-transform:uppercase;
  line-height:1.05;
}
.trip-pin-sub{
  font-size:10px;
  color:var(--text-1);
  margin-top:2px;
}
.trip-pin-arrow{
  width:14px;height:14px;
  background:var(--text-0);
  transform:translateY(-9px) rotate(45deg);
  border-radius:2px;
}
.leaflet-popup-content-wrapper{
  background:var(--bg-1);
  color:var(--text-0);
  border-radius:14px;
}
.leaflet-popup-tip{ background:var(--bg-1); }
.popup-leg{
  font-size:12.5px;
  padding:2px 0;
  border-bottom:1px solid var(--glass-border);
}
.popup-leg:last-child{ border-bottom:none; }
.popup-title{
  font-family:var(--font-display);
  font-style:italic;
  font-size:16px;
  text-transform:uppercase;
  margin-bottom:6px;
}

/* ---------- Marcadores isométricos (estabelecimentos) ---------- */
.iso-marker{
  display:flex;
  flex-direction:column;
  align-items:center;
  transform:translateY(-20px);
  cursor:pointer;
}
.iso-marker svg{ display:block; filter:drop-shadow(0 6px 10px rgba(30,27,24,.10)); }
.iso-marker-sm{ transform:translateY(-13px); }
.iso-marker-sm svg{ filter:drop-shadow(0 4px 7px rgba(30,27,24,.10)); }
.traveler-marker{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  transform:translateY(-8px);
  cursor:pointer;
  pointer-events:none;
}
.traveler-marker svg{ display:block; filter:drop-shadow(0 5px 8px rgba(30,27,24,.10)); }
.iso-marker-label{
  margin-top:-8px;
  display:flex;
  align-items:center;
  gap:4px;
  background:var(--bg-1);
  border:1.5px solid var(--text-0);
  border-radius:10px;
  padding:3px 9px;
  font-family:var(--font-display);
  font-style:italic;
  font-size:11px;
  text-transform:uppercase;
  color:var(--text-0);
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(30,27,24,.10);
}
.iso-marker-badge{
  display:inline-block;
  background:var(--coral);
  color:#fff;
  font-size:9px;
  font-weight:800;
  padding:1px 6px;
  border-radius:6px;
  text-transform:uppercase;
}

/* ---------- Painel de cidade (fica sobre o mapa, não fecha sozinho) ---------- */
.city-panel-backdrop{
  position:fixed; inset:0;
  z-index:1200;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(5,7,14,0.4);
}
.city-panel{
  width:100%;
  max-width:560px;
  margin:0 auto;
  max-height:80vh;
  background:var(--bg-1);
  border-radius:22px 22px 0 0;
  border:1px solid var(--glass-border);
  padding:16px 18px calc(18px + env(safe-area-inset-bottom));
  overflow-y:auto;
  box-shadow:0 -20px 50px rgba(30,27,24,.10);
}
.city-panel-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:2px;
}
.city-panel-title{
  font-family:var(--font-display); font-style:italic; text-transform:uppercase;
  font-size:22px; color:var(--text-0);
}
.city-panel-close{
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--glass-border);
  background:rgba(30,27,24,.05); color:var(--text-0);
  display:flex;align-items:center;justify-content:center; cursor:pointer; font-size:14px;
  flex:none;
}
.city-panel-legs{ display:flex; flex-direction:column; gap:8px; margin:10px 0 6px; }
.city-panel-leg{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:12px; padding:10px 12px; cursor:pointer;
}
.city-panel-section-title{
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--text-1); margin:16px 0 8px;
}

/* ---------- Cards de recomendações próximas ---------- */
.places-scroller{
  display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none;
}
.places-scroller::-webkit-scrollbar{ display:none; }
.place-card{
  flex:none; width:190px;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:16px; overflow:hidden;
}
.place-card-img{
  width:100%; height:90px; object-fit:cover; background:var(--bg-2);
  display:flex;align-items:center;justify-content:center;
}
.place-card-img img{ width:100%; height:100%; object-fit:cover; }
.place-card-img svg{ width:44px; height:40px; }
.place-card-body{ padding:10px 11px 12px; }
.place-card-name{ font-size:12.5px; font-weight:800; color:var(--text-0); margin-bottom:3px; line-height:1.2; }
.place-card-meta{ font-size:10.5px; color:var(--text-1); display:flex; align-items:center; gap:6px; margin-bottom:5px; }
.place-card-tags{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:5px; }
.place-tag{
  font-size:9px; font-weight:700; padding:2px 7px; border-radius:99px;
  background:rgba(30,27,24,.05); color:var(--text-1); border:1px solid var(--glass-border);
}
.place-card-blurb{ font-size:10.5px; color:var(--text-1); line-height:1.3; }
.place-open{ color:var(--lime); font-weight:700; }
.place-closed{ color:var(--coral); font-weight:700; }
.place-rating{ font-size:10.5px; color:var(--text-1); margin-bottom:4px; }
.place-card-hours{ font-size:10px; color:var(--text-1); margin-bottom:4px; opacity:0.85; }
.places-demo-note{
  font-size:10.5px; color:var(--text-1); background:rgba(30,27,24,.05);
  border:1px dashed var(--glass-border); border-radius:10px; padding:8px 10px; margin-bottom:10px;
}

/* ---------- Wrapper genérico de scroll horizontal (setas + arraste) ---------- */
.h-scroll-wrap{
  position:relative;
  display:flex;
  align-items:center;
  margin:0 -2px;
}
.h-scroll-wrap::before,
.h-scroll-wrap::after{
  content:"";
  position:absolute;
  top:0; bottom:8px;
  width:22px;
  z-index:2;
  pointer-events:none;
  transition:opacity .2s ease;
}
.h-scroll-wrap::before{ left:0; background:linear-gradient(90deg, var(--bg-1), transparent); }
.h-scroll-wrap::after{ right:0; background:linear-gradient(270deg, var(--bg-1), transparent); }
.h-scroll-wrap.at-start::before{ opacity:0; }
.h-scroll-wrap.at-end::after{ opacity:0; }
.h-scroll-wrap .places-scroller{ flex:1; min-width:0; }
.h-arrow{
  position:absolute;
  top:38%;
  transform:translateY(-50%);
  width:26px; height:26px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(44,35,36,0.78);
  backdrop-filter:blur(6px);
  border:1px solid var(--glass-border);
  color:var(--text-0);
  font-size:14px; line-height:1;
  cursor:pointer;
  z-index:3;
  transition:opacity .2s ease, visibility .2s ease;
}
.h-arrow-left{ left:-4px; }
.h-arrow-right{ right:-4px; }
.h-arrow.disabled{ opacity:0; visibility:hidden; pointer-events:none; }

/* ---------- Estabelecimentos (cards isométricos, mesmo estilo das recomendações) ---------- */
.est-card{ width:136px; }
.est-card .place-card-img{ height:74px; }
.est-card .place-card-body{ padding:8px 9px 10px; }
.est-card .place-card-name{ font-size:11.5px; }
.est-card .place-card-meta{ font-size:10px; margin-bottom:0; }

/* ---------- Filtro de raio (km) ---------- */
.radius-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin:16px 0 0;
}
.radius-row .city-panel-section-title{ margin:0; }
.radius-value{
  font-size:11.5px; font-weight:800; color:var(--teal);
  background:rgba(45,212,191,0.14); border:1px solid rgba(45,212,191,0.3);
  padding:2px 9px; border-radius:99px; flex:none;
}
.radius-slider{
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; border-radius:99px;
  background:var(--glass-bg-strong);
  accent-color:var(--teal);
  margin:8px 0 6px;
  cursor:pointer;
}
.radius-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%;
  background:var(--teal); border:2px solid var(--text-0);
  cursor:pointer;
}

/* ---------- Pin numerado (recomendações no mapa) ---------- */
.osm-badge-marker{
  width:24px; height:24px; border-radius:50%;
  background:var(--amber); color:#2b1900; font-weight:800; font-size:11px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid rgba(255,255,255,0.92);
  box-shadow:0 2px 8px rgba(30,27,24,.10);
}

/* ---------- Menu lateral (drawer) ---------- */
.side-drawer-backdrop{
  position:fixed; inset:0; z-index:1300; background:rgba(5,7,14,0.5);
  display:flex; justify-content:flex-start;
}
.side-drawer{
  position:relative;
  width:min(320px, 84vw); height:100%; background:var(--menu-bg);
  border-right:1px solid rgba(30,27,24,.05);
  padding:calc(24px + env(safe-area-inset-top)) 16px 20px;
  overflow-y:auto;
  box-shadow:20px 0 50px rgba(30,27,24,.10);
  animation:drawerIn .22s ease;
}
@keyframes drawerIn{ from{ transform:translateX(-100%);} to{ transform:translateX(0);} }
.side-drawer-title{
  font-family:var(--font-display); font-style:italic; text-transform:uppercase;
  font-size:20px; color:var(--menu-text); margin-bottom:14px;
}
.side-drawer-item{
  display:flex; align-items:center; gap:12px;
  width:100%; text-align:left; background:transparent; border:none;
  color:var(--menu-text); padding:9px 6px; border-radius:12px; cursor:pointer;
  font-size:13.5px; font-weight:700;
}
.side-drawer-item:hover, .side-drawer-item:active{ background:var(--menu-bg-2); }
.side-drawer-item .ic{ display:flex; align-items:center; justify-content:center; width:19px; height:19px; flex:none; }
.side-drawer-item .ic svg{ width:100%; height:100%; }
/* A cor deixou de vir por índice (ver comentário em `drawerItemHTML`): agora usa
   o par de tokens da skin, que já é medido e inverte no tema escuro.
   Medido: glifo `--acao` sobre `--acao-tenue` fica acima de 4,5:1 nas 5 skins,
   contra os 1,53:1 do pior caso do rodízio antigo. */
.side-drawer-icon-chip{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:32px; height:32px; border-radius:50%; font-size:15px;
  color:var(--acao);
  background:var(--acao-tenue);
}
.side-drawer-icon-chip svg{ width:17px; height:17px; }
.side-drawer-close{
  position:absolute; top:calc(20px + env(safe-area-inset-top)); right:14px;
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--glass-border); background:rgba(30,27,24,.05);
  color:var(--text-0); display:flex;align-items:center;justify-content:center; cursor:pointer;
}

/* ---------- Login / cadastro (porta de entrada do app) ---------- */
#auth-gate{
  position:fixed; inset:0; z-index:5000;
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(235,94,40,0.30), transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, rgba(217,140,61,0.22), transparent 55%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 45%, var(--bg-2) 100%);
  display:flex; align-items:center; justify-content:center;
  padding:24px; overflow-y:auto;
}
.auth-card{
  width:100%; max-width:380px;
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  padding:28px 24px;
  box-shadow:var(--shadow-soft);
}
.auth-brand{ font-size:11px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:var(--cyan); margin-bottom:10px; }
.auth-title{ font-family:var(--font-display); font-style:italic; text-transform:uppercase; font-size:28px; margin-bottom:4px; color:var(--text-0); line-height:1.05; }
.auth-sub{ font-size:13px; color:var(--text-1); margin-bottom:20px; }
.auth-tabs{ display:flex; gap:8px; margin-bottom:18px; }
.auth-tab{
  flex:1; text-align:center; padding:9px; border-radius:var(--radius-pill);
  background:var(--glass-bg); border:1px solid var(--glass-border);
  color:var(--text-1); font-weight:700; font-size:13px; cursor:pointer;
}
.auth-tab.active{ background:linear-gradient(135deg,var(--lime),var(--cyan)); color:var(--papel); border-color:transparent; }
.auth-error{ color:var(--coral); font-size:14px; margin-top:10px; }
.auth-hint{ color:var(--text-1); font-size:14px; margin-top:14px; text-align:center; line-height:1.4; }

/* Era <span onclick>: virou <button> de verdade — alcançável por teclado, anunciado
   por leitor de tela, e com 44px de área de toque (mínimo para uso de pé, na rua). */
.auth-forgot{
  display:block; margin-left:auto; text-align:right; font-size:14px; color:var(--cyan);
  margin-top:10px; cursor:pointer; font-weight:700;
  background:none; border:0; padding:11px 2px; min-height:44px; font-family:inherit;
}
.auth-forgot.em-linha{
  display:inline; margin:0; padding:0; min-height:0; text-align:inherit;
}

/* Campo de senha com botão de revelar. O botão fica DENTRO do campo, mas com
   área própria de 44px — sem isso ele rouba o toque de quem quer digitar. */
.senha-wrap{ position:relative; display:flex; align-items:center; }
.senha-wrap .form-input{ flex:1; padding-right:92px; }
.senha-olho{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  min-height:44px; min-width:44px; padding:0 10px;
  background:none; border:0; cursor:pointer; font-family:inherit;
  font-size:13px; font-weight:700; color:var(--cyan); letter-spacing:.02em;
}
.senha-olho:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; border-radius:8px; }
.auth-back{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-1);
  margin-bottom:14px; cursor:pointer; font-weight:700;
}
.auth-divider{
  display:flex; align-items:center; gap:10px; margin:18px 0;
  color:var(--text-1); font-size:11px; letter-spacing:0.04em; text-transform:uppercase;
}
.auth-divider::before, .auth-divider::after{
  content:""; flex:1; height:1px; background:var(--glass-border);
}
.auth-oauth-row{ display:flex; flex-direction:column; gap:10px; }
.auth-oauth-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:11px; border-radius:var(--radius-pill);
  background:var(--glass-bg); border:1px solid var(--glass-border);
  color:var(--text-0); font-weight:700; font-size:13.5px; cursor:pointer;
}
.auth-oauth-btn .ic{ width:18px; height:18px; display:flex; }
.auth-oauth-btn .ic svg{ width:100%; height:100%; }
.auth-oauth-btn:hover{ background:var(--glass-bg-strong); }
.avatar-color-picker{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.avatar-color-dot{
  width:32px;height:32px;border-radius:50%; cursor:pointer; border:2px solid transparent;
}
.avatar-color-dot.selected{ border-color:#fff; box-shadow:0 0 0 2px rgba(30,27,24,.10); }

/* ---------- Conquistas / medalhas 3D ---------- */
.achv-modal .modal-sheet{ max-height:88vh; overflow-y:auto; }
.achv-head{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.achv-count{ font-size:12.5px; color:var(--text-1); font-weight:700; }
.achv-tabs{ display:flex; gap:8px; }
.achv-tab{
  flex:1; text-align:center; padding:8px; border-radius:var(--radius-pill);
  background:var(--glass-bg); border:1px solid var(--glass-border);
  color:var(--text-1); font-weight:700; font-size:12.5px; cursor:pointer;
}
.achv-tab.active{ background:linear-gradient(135deg,var(--lime),var(--cyan)); color:var(--papel); border-color:transparent; }
.achv-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:14px;
}
@media (min-width:560px){ .achv-grid{ grid-template-columns:repeat(3, 1fr); } }
.achv-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;
  background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-lg);
  padding:14px 10px;
}
.achv-card.locked{ opacity:0.55; }
.medal-canvas{ width:96px; height:96px; }
.achv-title{ font-size:12.5px; font-weight:800; color:var(--text-0); margin-top:4px; }
.achv-desc{ font-size:11px; color:var(--text-1); line-height:1.3; }
.achv-tier{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; margin-top:2px; }

/* ---------- Selos (badges) de cidade e estabelecimento ---------- */
.badge-section-title{
  display:flex; align-items:baseline; gap:8px;
  font-size:13px; font-weight:800; color:var(--text-0);
  margin:22px 2px 12px;
}
.badge-section-count{ font-size:11px; font-weight:700; color:var(--text-1); }
.badge-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;
}
@media (min-width:560px){ .badge-grid{ grid-template-columns:repeat(4, 1fr); } }
.badge-tile{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;
}
.badge-tile svg{ display:block; }
.badge-tile.locked{ opacity:0.75; }
.badge-label{ font-size:10.5px; font-weight:700; color:var(--text-1); line-height:1.2; }
.badge-tile:not(.locked) .badge-label{ color:var(--text-0); }

/* ---------- Editor de fotos (adesivos de texto, fontes, preview) ---------- */
.photo-gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.photo-gallery-thumb{
  position:relative; width:100%; aspect-ratio:1; border-radius:10px; overflow:hidden;
  cursor:pointer; border:1px solid var(--glass-border);
}
.photo-gallery-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-gallery-thumb .pg-title{
  position:absolute; left:0; right:0; bottom:0; padding:4px 6px;
  font-size:10px; font-weight:800; color:#fff; background:linear-gradient(0deg, rgba(0,0,0,0.75), transparent);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.photo-editor-stage{
  position:relative; width:100%; border-radius:var(--radius-lg); overflow:hidden;
  background:#000; margin-bottom:14px; touch-action:none;
}
.photo-editor-stage img{ width:100%; display:block; user-select:none; pointer-events:none; }
.photo-sticker{
  position:absolute; transform:translate(-50%,-50%); cursor:grab; padding:4px 10px;
  border-radius:6px; white-space:nowrap; line-height:1.15; user-select:none;
  text-shadow:0 2px 6px rgba(30,27,24,.10);
}
.photo-sticker.selected{ outline:2px dashed #fff; outline-offset:3px; }
.photo-sticker.no-fill{ text-shadow:0 2px 10px rgba(30,27,24,.10), 0 0 2px rgba(30,27,24,.10); }
.editor-row{ display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.font-swatch-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.font-swatch{
  flex:none; padding:8px 12px; border-radius:var(--radius-pill);
  background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-0);
  font-size:14px; cursor:pointer; white-space:nowrap;
}
.font-swatch.active{ background:linear-gradient(135deg,var(--lime),var(--cyan)); color:var(--papel); border-color:transparent; }
.color-swatch-row{ display:flex; gap:8px; }
.color-swatch{
  width:28px; height:28px; border-radius:50%; cursor:pointer; border:2px solid transparent; flex:none;
}
.color-swatch.active{ border-color:#fff; box-shadow:0 0 0 2px rgba(30,27,24,.10); }
.fill-toggle{
  padding:8px 12px; border-radius:var(--radius-pill); background:var(--glass-bg);
  border:1px solid var(--glass-border); color:var(--text-1); font-size:12px; font-weight:700; cursor:pointer;
}
.fill-toggle.active{ background:rgba(217,161,92,0.18); color:var(--cyan); border-color:var(--cyan); }
.photo-preview-img{ width:100%; border-radius:var(--radius-lg); display:block; margin-bottom:14px; }
.photo-detail-img{ width:100%; border-radius:var(--radius-lg); display:block; margin-bottom:14px; max-height:50vh; object-fit:contain; background:#000; }

/* ---------- Chat da viagem ---------- */
.chat-modal .modal-sheet{
  padding:0; max-height:92vh; height:92vh; display:flex; flex-direction:column; overflow:hidden;
}
.chat-messages{ flex:1; overflow-y:auto; padding:16px 16px 8px; display:flex; flex-direction:column; gap:10px; }
.chat-msg{ display:flex; gap:8px; max-width:82%; }
.chat-msg.mine{ align-self:flex-end; flex-direction:row-reverse; }
.chat-msg-avatar{ width:26px;height:26px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:11px; font-weight:800; color:var(--papel); flex:none; }
.chat-msg-body{ background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:14px; padding:8px 12px; min-width:0; }
.chat-msg.mine .chat-msg-body{ background:linear-gradient(135deg,var(--lime),var(--cyan)); color:var(--papel); border-color:transparent; }
.chat-msg-name{ font-size:10px; font-weight:800; opacity:0.65; margin-bottom:2px; }
.chat-msg-text{ font-size:13.5px; line-height:1.35; white-space:pre-wrap; word-break:break-word; }
.chat-msg-img{ max-width:200px; max-height:200px; border-radius:10px; margin-top:6px; display:block; object-fit:cover; }
.chat-input-bar{ display:flex; align-items:flex-end; gap:8px; padding:10px 14px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--glass-border); flex:none; }
.chat-input-bar textarea{ flex:1; resize:none; max-height:90px; min-height:38px; }
.chat-emoji-bar{ display:flex; gap:2px; padding:6px 14px; overflow-x:auto; flex:none; scrollbar-width:none; }
.chat-emoji-bar::-webkit-scrollbar{ display:none; }
.chat-emoji-bar button{ font-size:19px; background:none; border:none; cursor:pointer; padding:3px 5px; flex:none; }
.chat-send-btn, .chat-media-btn{
  width:38px;height:38px;border-radius:50%; border:none; display:flex;align-items:center;justify-content:center; cursor:pointer; flex:none;
}
.chat-send-btn{ background:linear-gradient(135deg,var(--lime),var(--cyan)); color:var(--papel); }
.chat-send-btn svg, .chat-media-btn svg{ width:18px; height:18px; }
.chat-media-btn{ background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-0); }
.chat-empty{ text-align:center; color:var(--text-1); font-size:13px; margin-top:40px; }

/* ---------- Bottom pill nav ---------- */
.bottom-nav{
  position:fixed;
  left:50%;
  bottom:calc(16px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  display:flex;
  gap:4px;
  padding:6px;
  background:var(--cartao);
  border:1px solid var(--borda);
  border-radius:var(--radius-pill);
  box-shadow:var(--sombra-alta);
  align-items:center;
  z-index:50;
  max-width:calc(100vw - 32px);
}
.nav-btn{
  border:none;
  background:transparent;
  color:var(--menu-text-dim);
  padding:9px 8px;
  min-height:var(--tap-min);
  border-radius:var(--radius-pill);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  min-width:50px;
  flex:1;
  white-space:nowrap;
}
.nav-btn .ic{ display:flex; align-items:center; justify-content:center; width:21px; height:21px; }
.nav-btn .ic svg{ width:100%; height:100%; display:block; color:inherit; }
.nav-btn .nav-label{ white-space:nowrap; }
.nav-btn.active{
  background:var(--acao-tenue);
  color:var(--acao);
}
.nav-btn-menu{ color:var(--tinta-suave); }

/* CENTRO ELEVADO — o padrão das 6 referências de UI (2026-08-04).
   O botão do meio sobe para fora da pílula e vira a AÇÃO principal, não mais
   um destino de navegação como os vizinhos. A borda da cor do papel é o que
   cria o recorte que faz ele parecer flutuar sobre a barra. */
.nav-btn-accent{
  background:var(--acao);
  color:var(--sobre-acao);
  min-width:56px; width:56px; height:56px; flex:0 0 56px;
  margin-top:-24px;
  border-radius:50%;
  border:4px solid var(--papel);
  box-shadow:var(--sombra-alta);
  gap:0;
}
.nav-btn-accent .nav-label{
  /* o rótulo desce para fora do círculo, senão não cabe legível */
  position:absolute; bottom:-15px; font-size:var(--t-rotulo); color:var(--tinta-media);
}
.nav-btn-accent{ position:relative; }
.nav-btn-accent .ic{ width:24px; height:24px; }
.nav-btn-accent.active{ background:var(--acao); color:var(--sobre-acao); }
.nav-btn:focus-visible{ outline:3px solid var(--acao); outline-offset:2px; }

/* ---------- Install banner ---------- */
.install-banner{
  margin:14px 20px 0;
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.install-banner span{ font-size:12.5px; color:var(--text-1); flex:1; }

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(5,7,14,0.7);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:flex-end;
  z-index:1400;
  animation:fadeIn .2s ease;
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.modal-sheet{
  width:100%;
  max-width:560px;
  margin:0 auto;
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--glass-border);
  border-bottom:none;
  border-radius:24px 24px 0 0;
  padding:20px;
  padding-bottom:calc(20px + env(safe-area-inset-bottom));
  max-height:86vh;
  overflow-y:auto;
  animation:slideUp .25s ease;
}
@keyframes slideUp{ from{ transform:translateY(30px); opacity:0;} to{ transform:translateY(0); opacity:1;} }
.modal-handle{
  width:40px;height:4px;border-radius:99px;
  background:var(--glass-border);
  margin:0 auto 16px;
}
.modal-title{ font-size:20px; font-weight:800; margin-bottom:4px; }

/* ---------- Form controls (design system) ---------- */
.form-group{ margin-top:14px; }
.form-label{
  display:block;
  font-size:11.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--text-2);
  margin-bottom:6px;
}
.form-input, .form-select, .form-textarea{
  width:100%;
  background:rgba(0,0,0,0.25);
  border:1px solid var(--glass-border);
  color:var(--text-0);
  border-radius:12px;
  padding:11px 13px;
  font-size:14px;
  min-height:var(--tap-min);
  appearance:none;
}
.form-textarea{ resize:vertical; min-height:70px; }
.form-select{
  background-image:linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position:calc(100% - 18px) center, calc(100% - 13px) center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.form-check{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  font-size:13px;
  color:var(--text-1);
}
.form-check input{ width:18px;height:18px; }
.form-hint{ font-size:11.5px; color:var(--text-2); margin-top:5px; }

/* ---------- Seletor de categoria (grade de ícones, estilo Apple/visionOS) ---------- */
.category-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  max-height:272px;
  overflow-y:auto;
  padding:2px;
  margin-top:2px;
}
.category-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px;
  background:rgba(30,27,24,.05);
  border:1.5px solid var(--glass-border);
  border-radius:16px;
  padding:10px 4px 8px;
  cursor:pointer;
  min-height:76px;
  transition:border-color .15s ease, background .15s ease;
}
.category-tile-icon{ width:32px; height:auto; display:flex; align-items:center; justify-content:center; }
.category-tile-icon svg{ width:30px; height:auto; }
.category-tile-label{
  font-size:9px; font-weight:700; color:var(--text-1);
  text-align:center; line-height:1.15;
}
.category-tile.active{
  background:rgba(45,212,191,0.14);
  border-color:var(--teal);
}
.category-tile.active .category-tile-label{ color:var(--text-0); }
.category-grid::-webkit-scrollbar{ width:5px; }
.category-grid::-webkit-scrollbar-thumb{ background:var(--glass-border); border-radius:99px; }

/* ---------- Seletor de tema (Aparência) ---------- */
.theme-preset-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin-top:2px;
}
.theme-preset-tile{
  display:flex; align-items:center; gap:9px;
  background:rgba(30,27,24,.05); border:1.5px solid var(--glass-border);
  border-radius:14px; padding:10px 12px; cursor:pointer;
}
.theme-preset-dot{ width:22px; height:22px; border-radius:50%; flex:none; box-shadow:0 0 0 2px rgba(30,27,24,.05) inset; }
.theme-preset-label{ font-size:12px; font-weight:700; color:var(--text-1); }
.theme-preset-tile.active{ border-color:var(--teal); background:rgba(45,212,191,0.12); }
.theme-preset-tile.active .theme-preset-label{ color:var(--text-0); }

.segmented{
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding-bottom:2px;
}
.segmented button{
  flex:none;
  padding:10px 14px;
  min-height:var(--tap-min);
  border-radius:12px;
  border:1px solid var(--glass-border);
  background:rgba(30,27,24,.05);
  color:var(--text-1);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.segmented button.active{
  background:linear-gradient(135deg,var(--lime),var(--cyan));
  color:var(--papel);
  border-color:transparent;
}

.modal-actions{
  display:flex;
  gap:10px;
  margin-top:20px;
}

/* animated icon micro-interactions */
@keyframes floaty{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-3px); }
}
.leg-dot{ animation:floaty 3.2s ease-in-out infinite; }
.leg:nth-child(2n) .leg-dot{ animation-delay:.4s; }
.leg:nth-child(3n) .leg-dot{ animation-delay:.8s; }

@keyframes pulseDot{
  0%{ box-shadow:0 0 0 0 rgba(235,94,40,0.5); }
  70%{ box-shadow:0 0 0 10px rgba(235,94,40,0); }
  100%{ box-shadow:0 0 0 0 rgba(235,94,40,0); }
}
.brand .dot{ animation:pulseDot 2s infinite; }

/* empty state */
.empty{
  text-align:center;
  padding:40px 20px;
  color:var(--text-2);
}
.empty .ic{ font-size:34px; margin-bottom:10px; display:block; }

/* toast */
.toast{
  position:fixed;
  left:50%;
  bottom:calc(96px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  background:var(--text-0);
  color:var(--papel);
  padding:10px 18px;
  border-radius:99px;
  font-size:13px;
  font-weight:700;
  z-index:200;
  box-shadow:0 8px 24px rgba(30,27,24,.10);
  animation:toastIn .25s ease, toastOut .25s ease 1.8s forwards;
  max-width:calc(100vw - 40px);
  text-align:center;
}
@keyframes toastIn{ from{opacity:0; transform:translate(-50%,10px);} to{opacity:1; transform:translate(-50%,0);} }
@keyframes toastOut{ to{opacity:0; transform:translate(-50%,10px);} }

/* ---------- Botão "Página inicial" (agora vive dentro da nav/sidebar, ver #global-home-btn.nav-btn) ---------- */

/* ---------- Dock de avatares (sempre visível, com micro-animações) ---------- */
.avatar-dock{
  position:fixed;
  top:calc(14px + env(safe-area-inset-top));
  right:14px;
  display:flex;
  gap:8px;
  z-index:5900;
  pointer-events:none;
}
.avatar-bubble{
  width:42px; height:42px; border-radius:50%;
  overflow:hidden;
  border:2px solid var(--glass-border);
  background:var(--bg-1);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(30,27,24,.10);
  animation: avatarBob 3.6s ease-in-out infinite;
  pointer-events:auto;
}
.avatar-bubble:nth-child(2n){ animation-delay:-1.4s; }
.avatar-bubble:nth-child(3n){ animation-delay:-2.3s; }
.avatar-bubble svg{ width:135%; height:135%; display:block; }
.avatar-bubble:active{ transform:scale(0.92); }
@keyframes avatarBob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}
.avatar-blink{ transform-box:fill-box; transform-origin:center; animation: avatarBlink 4.8s ease-in-out infinite; }
@keyframes avatarBlink{
  0%,90%,100%{ transform:scaleY(1); }
  93%,96%{ transform:scaleY(0.12); }
}
@media (min-width:1024px){
  .avatar-dock{ top:20px; right:24px; }
}

/* ---------- Editor "Meu perfil": abas por categoria ---------- */
.profile-tabs{
  display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; margin-top:6px; scrollbar-width:none;
}
.profile-tabs::-webkit-scrollbar{ display:none; }
.profile-tab-btn{
  flex:none; padding:8px 12px; border-radius:var(--radius-pill);
  background:var(--glass-bg); border:1px solid var(--glass-border);
  color:var(--text-1); font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.profile-tab-btn.active{ background:rgba(45,212,191,0.16); border-color:var(--teal); color:var(--text-0); }

/* ---------- Pin de viajante no mapa (rosto redondo + ponteiro) ---------- */
.traveler-pin-wrap{
  display:flex; flex-direction:column; align-items:center;
  transform:translateY(-50px);
  cursor:pointer;
}
.traveler-pin{
  width:44px; height:44px; border-radius:50%;
  overflow:hidden;
  border:3px solid var(--acao);
  background:var(--bg-1);
  box-shadow:0 6px 14px rgba(30,27,24,.10);
  display:flex; align-items:center; justify-content:center;
}
.traveler-pin svg{ width:135%; height:135%; display:block; }
.traveler-pin-tail{
  width:0; height:0;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-top:10px solid var(--acao);
  margin-top:-2px;
  filter:drop-shadow(0 2px 2px rgba(30,27,24,.10));
}

/* ---------- Seletor de visualização ---------- */
.view-switcher-row{
  display:flex; align-items:center; gap:8px; padding:0 20px 10px;
}
.view-switcher-row .view-switcher{ margin:0; flex:1; min-width:0; }
.reorder-bar{ display:flex; gap:6px; flex:none; padding-bottom:10px; }
.reorder-btn{
  flex:none; display:flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:var(--radius-pill);
  background:var(--menu-bg-2); border:1px solid rgba(30,27,24,.05);
  color:var(--menu-text-dim); font-size:12px; font-weight:700; cursor:pointer;
  white-space:nowrap;
}
.reorder-btn.primary{ background:var(--menu-gold); color:var(--papel); border-color:transparent; }
.reorder-btn.ghost-danger{ background:var(--menu-danger); color:#fff; border-color:transparent; }
.view-switcher{
  display:flex; gap:2px; margin:0 20px 10px; padding:5px;
  background:var(--menu-bg); border-radius:var(--radius-pill);
  overflow-x:auto; scrollbar-width:none;
}
.view-switcher::-webkit-scrollbar{ display:none; }
.view-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 14px; border-radius:var(--radius-pill);
  background:transparent; border:none;
  color:var(--menu-text-dim); font-size:12px; font-weight:700; cursor:pointer;
  white-space:nowrap;
}
.view-btn .ic{ font-size:14px; }
.view-btn.active{
  background:var(--menu-accent); color:#fff;
}

/* ---------- Visualização: Lista compacta ---------- */
.compact-row{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; margin:0 0 6px;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:12px; cursor:pointer;
}
.compact-dot{
  width:28px;height:28px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:13px;
  background:rgba(30,27,24,.05); border:1px solid var(--glass-border);
}
.compact-dot.confirmed{ border-color:var(--green); }
.compact-dot.pending{ border-color:var(--amber); }
.compact-dot.alert{ border-color:var(--coral); }
.compact-title{ flex:1; font-size:13px; font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compact-meta{ font-size:11px; color:var(--text-1); flex:none; }
.compact-chevron{ color:var(--text-1); font-size:16px; flex:none; }

/* ---------- Visualização: Cards em grade ---------- */
.legs-grid{
  display:grid; grid-template-columns:1fr; gap:12px;
}
@media (min-width:640px){ .legs-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1024px){ .legs-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (min-width:1500px){ .legs-grid{ grid-template-columns:repeat(4, 1fr); } }
.legs-grid .card{ margin:0; height:100%; }

/* ---------- Visualização: Agenda (colunas por dia) ---------- */
.agenda-scroller{
  display:flex; gap:14px; overflow-x:auto; padding:2px 2px 8px; scrollbar-width:none; flex:1; min-width:0;
}
.agenda-scroller::-webkit-scrollbar{ display:none; }
.agenda-col{ flex:none; width:280px; display:flex; flex-direction:column; gap:8px; }
.agenda-col-head{
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--text-1); padding:6px 2px;
}
.agenda-col-body{ display:flex; flex-direction:column; gap:10px; }
.agenda-col-body .card{ margin:0; }

/* ---------- Visualização: Kanban por status ---------- */
.kanban-wrap{
  display:flex; gap:14px; overflow-x:auto; padding:2px 2px 8px; scrollbar-width:none;
}
.kanban-wrap::-webkit-scrollbar{ display:none; }
.kanban-col{ flex:none; width:280px; display:flex; flex-direction:column; gap:8px; }
.kanban-col-head{
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--text-1); padding:6px 2px;
}
.kanban-count{
  background:var(--glass-bg-strong); border-radius:99px; padding:1px 8px; font-size:11px;
}
.kanban-col-body{ display:flex; flex-direction:column; gap:10px; }
.kanban-col-body .card{ margin:0; }

/* ---------- Layout desktop: preenche a tela, estilo painel/buscador ---------- */
@media (min-width:1024px){
  #app{
    max-width:1600px;
    margin:0 auto;
    padding:0 28px 40px 128px;
  }
  .bottom-nav{
    left:20px; right:auto; bottom:20px; top:74px;
    transform:none;
    flex-direction:column;
    justify-content:center;
    width:84px;
    height:auto;
    border-radius:28px;
    border:1px solid rgba(30,27,24,.05);
    padding:20px 8px;
    gap:10px;
    box-shadow:0 20px 50px rgba(30,27,24,.10);
  }
  .modal-backdrop:not(.map-modal){ align-items:center; }
  .modal-sheet{ border-radius:24px; }
  .city-panel-backdrop{ align-items:center; }
  .city-panel{ border-radius:24px; max-width:640px; }
  .nav-btn{ padding:15px 6px; font-size:11px; gap:6px; min-height:64px; }
  .nav-btn .ic{ width:29px; height:29px; }
  .nav-btn .nav-label{ font-size:10.5px; }
}

/* ---------- Popup de ações do pin (mapa) ---------- */
.pin-menu-list{ display:flex; flex-direction:column; gap:8px; }
.pin-menu-item{
  display:flex; align-items:center; gap:10px;
  width:100%; text-align:left;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:12px; padding:12px 14px;
  color:var(--text-0); font-size:13px; font-weight:700;
  cursor:pointer;
}
.pin-menu-item .ic{ font-size:16px; flex:none; }

/* ---------- Avaliações (estrelas) ---------- */
.review-stars{ display:flex; gap:6px; font-size:26px; }
.review-star{ color:var(--glass-border); cursor:pointer; transition:color .12s ease, transform .12s ease; }
.review-star.on{ color:var(--amber); }
.review-star:active{ transform:scale(0.88); }
.review-item{
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:12px; padding:10px 12px; margin-bottom:8px;
}
.review-item-head{
  display:flex; align-items:center; justify-content:space-between;
  color:var(--amber); font-size:14px; letter-spacing:1px;
}

/* ==========================================================
   BILHETE — cartão de voo/ferry no formato de passe
   (2026-08-04, a partir das 6 referências de UI)
   Um voo já É um bilhete: mostrar no formato que o olho reconhece
   é mais rápido de ler do que uma lista de campos.
   ========================================================== */
.card--bilhete{ padding:0; overflow:hidden; }
.bilhete{ display:grid; grid-template-columns:1fr 74px; }
.bilhete__corpo{ padding:16px 18px; min-width:0; }
.bilhete__topo{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }

.bilhete__rota{ display:flex; align-items:center; gap:10px; }
.bilhete__ponta{ min-width:0; }
.bilhete__ponta b{
  display:block; font-family:var(--font-display); font-size:30px; line-height:1;
  letter-spacing:.02em; color:var(--tinta);
}
.bilhete__ponta span{
  display:block; font-size:var(--t-apoio); color:var(--tinta-suave); margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bilhete__ponta--fim{ text-align:right; }
/* a linha tracejada entre origem e destino: é o que diz "trajeto" sem escrever */
.bilhete__traco{
  flex:1; position:relative; text-align:center; color:var(--acao); font-size:15px;
}
.bilhete__traco::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  border-top:2px dotted var(--borda);
}
.bilhete__traco{ z-index:1; }

.bilhete__dados{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(72px,1fr)); gap:10px;
  margin-top:14px; padding-top:12px; border-top:1px dashed var(--borda);
}
.bilhete__dados .k{
  display:block; font-size:var(--t-rotulo); text-transform:uppercase;
  letter-spacing:.08em; color:var(--tinta-suave); font-weight:700;
}
.bilhete__dados b{ font-size:var(--t-corpo); color:var(--tinta); }

/* talão: a metade que "se destaca" — com serrilha e código */
.bilhete__talao{
  position:relative; background:var(--acao); color:var(--sobre-acao);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:12px 6px;
}
.bilhete__talao::before{
  content:""; position:absolute; left:-6px; top:0; bottom:0; width:12px;
  background:radial-gradient(circle at 6px 6px, transparent 5px, var(--cartao) 5.5px) 0 0/12px 12px repeat-y;
}
.bilhete__codigo{
  width:26px; height:78px;
  background:repeating-linear-gradient(180deg,
    currentColor 0 2px, transparent 2px 4px, currentColor 4px 5px, transparent 5px 8px);
  opacity:.9;
}
.bilhete__sigla{
  font-size:var(--t-rotulo); font-weight:800; letter-spacing:.08em;
  text-align:center; line-height:1.3; opacity:.95;
}

/* ==========================================================
   MENUS COM ASPECTO DE TECLA (2026-08-04)
   Referência entregue por Marcelo: keycaps 3D, umas brancas e uma translúcida
   colorida. Pedido literal: "quero os menus inspirados literalmente nesse
   aspecto". O vocabulário vive em `sistema.css` (.s-tecla); aqui ele é
   aplicado aos botões que o app já tem, sem trocar marcação.
   ========================================================== */

.bottom-nav .nav-btn{
  background:linear-gradient(180deg, var(--tecla-face) 0%, var(--tecla-face-2) 100%);
  border-radius:14px;
  color:var(--tinta-media);
  box-shadow:
    0 4px 0 0 var(--tecla-borda),
    0 7px 12px rgba(30,27,24,.22);
  transform:translateY(0);
  transition:transform .09s ease-out, box-shadow .09s ease-out, background .2s;
  position:relative;
  margin-bottom:5px; /* espaço para a espessura não ser cortada pela pílula */
}
.bottom-nav .nav-btn::before{
  content:""; position:absolute; inset:2px 2px 45% 2px; border-radius:12px 12px 40% 40%;
  background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,0));
  pointer-events:none;
}
.bottom-nav .nav-btn:active{
  transform:translateY(3px);
  box-shadow:0 1px 0 0 var(--tecla-borda), 0 2px 4px rgba(30,27,24,.26);
}
/* a tecla ativa é a translúcida colorida da referência */
.bottom-nav .nav-btn.active{
  color:var(--sobre-acao);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--acao) 80%, transparent) 0%, var(--acao) 100%);
  box-shadow:
    0 4px 0 0 color-mix(in srgb, var(--acao) 60%, #000),
    0 8px 16px color-mix(in srgb, var(--acao) 45%, transparent);
  backdrop-filter:blur(6px) saturate(160%);
  -webkit-backdrop-filter:blur(6px) saturate(160%);
}
.bottom-nav .nav-btn.active::before{
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0));
}
/* o centro elevado já é colorido: ganha só a espessura de tecla */
.bottom-nav .nav-btn-accent{
  box-shadow:
    0 5px 0 0 color-mix(in srgb, var(--acao) 58%, #000),
    0 10px 20px color-mix(in srgb, var(--acao) 50%, transparent);
}
.bottom-nav .nav-btn-accent:active{
  transform:translateY(4px);
  box-shadow:0 1px 0 0 color-mix(in srgb, var(--acao) 58%, #000), 0 3px 6px rgba(30,27,24,.3);
}
.bottom-nav{ padding-bottom:11px; }

@media (prefers-reduced-motion: reduce){
  .bottom-nav .nav-btn{ transition:none; }
}

/* ==========================================================
   CORREÇÕES DE INTERFACE — 2026-08-04, reportadas por Marcelo com print
   ========================================================== */

/* 1. BILHETE ESTICADO
   Erro: em tela larga o cartão ia a ~1400px, jogando FLN e GRU nas pontas
   extremas com um vazio enorme no meio. Passe não é faixa: nas referências ele
   é um objeto COMPACTO, com proporção de bilhete de verdade. */
/* O `max-width` da tentativa anterior nao pegou: a linha seguinte o anulava com
   `max-width:none` dentro de `.legs-grid`, e e justamente ali que o cartao vive.
   Erro meu, 2026-08-05. Agora o teto vale em todo lugar. */
.card--bilhete{ max-width:560px; }

/* 2. SERRILHA DESLOCADA
   Erro: o recorte ficava FORA do talão, criando uma faixa branca entre o corpo
   e a cor. A serrilha tem que morder a borda do talão, não flutuar ao lado. */
.bilhete__talao::before{
  left:-1px; width:10px;
  background:radial-gradient(circle at 0 6px, var(--vidro) 5px, transparent 5.5px) 0 0/10px 12px repeat-y;
}
.bilhete{ gap:0; }
.bilhete__talao{ margin-left:-1px; }

/* 3. BARRA COM BOTÕES EMPILHADOS E O ÚLTIMO CORTADO
   Erro: 7 botões numa barra desenhada para 5 — em tela estreita ela quebrava em
   coluna e o "Novo" saía cortado na base.
   As referências têm CINCO posições. "Início" e "Menu" saem da barra: Início é
   o próprio destino Visão, e Menu abre pelo cabeçalho. */
.bottom-nav{
  flex-wrap:nowrap;
  max-height:none;
  overflow:visible;
}
#global-home-btn{ display:none !important; }
/* NAO esconder #nav-menu: ele e o UNICO ponto de entrada de openSideMenu em
   todo o projeto. A versao anterior desta regra usava `display:none` no celular
   e deixava os 12 itens do menu INALCANCAVEIS justamente no aparelho da viagem.
   Erro meu, de 2026-08-04, achado pelo curador no mesmo dia.
   Para caber em 5 posicoes sem perder acesso, quem sai da barra e o "Novo"
   (que ja e alcancavel por dentro do roteiro), nao o menu. */
@media (max-width:820px){
  .bottom-nav .nav-label{ font-size:10px; }
  .bottom-nav .nav-btn{ padding:9px 4px; min-width:44px; }
}


/* ==========================================================
   BILHETE — refinamento de ergonomia (2026-08-05)
   Reportado por Marcelo com print: o cartao esticava a largura toda, jogando
   FLN e GRU nas pontas com um vazio no meio, e os botoes de acao eram
   pastilhas pequenas e cinzas, sem hierarquia entre si.
   ========================================================== */

/* Os codigos param de se afastar: a rota vira uma unidade compacta e centrada,
   que e como se le um bilhete de verdade — nao uma faixa de ponta a ponta. */
.bilhete__rota{ max-width:420px; gap:14px; }
.bilhete__ponta b{ font-size:34px; letter-spacing:-.01em; }
.bilhete__traco{ min-width:60px; max-width:150px; }

/* Dados em 4 colunas de largura igual: alinhamento previsivel bate leitura
   "onde couber", principalmente de relance, no aeroporto. */
.bilhete__dados{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.bilhete__dados b{ font-size:16px; }
.bilhete__dados .k{ margin-bottom:1px; }

/* AÇÕES — a correção de ergonomia que ele pediu.
   Antes: 4 pastilhas cinza-claro de mesmo peso, com os icones a 30px (abaixo do
   minimo de 44). O olho nao sabia qual era a acao principal.
   Agora: uma acao em destaque, o resto em texto, e os icones com area de toque
   de verdade — o icone continua pequeno, a AREA nao. */
.card--bilhete .card-actions{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:12px 18px 16px;
  border-top:1px dashed var(--borda);
  margin-top:0;
}
.card--bilhete .card-actions .btn{
  min-height:44px; border-radius:var(--r-pilula);
  font-size:var(--t-apoio); font-weight:700; padding:0 16px;
}
/* icone solto (editar, excluir): area de 44px, glifo de 16 */
.card--bilhete .card-actions .btn:not(.btn-primary):not(.btn-ghost),
.card--bilhete .card-actions .icon-btn{
  min-width:44px; padding:0 12px;
}
/* "excluir" recua para o fim e perde peso — acao destrutiva nao disputa
   atencao com a acao util */
.card--bilhete .card-actions .btn-danger,
.card--bilhete .card-actions .btn:last-child{ margin-left:auto; }

/* ==========================================================
   REMONTAGEM 2026-08-05 — a dobra (DESIGN-SYSTEM v2 §7)
   A tela deixa de ser "hero + 5 modos + filtros + lista" e vira
   R1 topo · R2 faixa · R3 AGORA · R4 A SEGUIR · R5 fita · R6 barra.
   As classes antigas continuam existindo para os modais/cartões
   reaproveitados; nada aqui redefine componente do sistema.css.
   ========================================================== */

/* R1 — barra de topo */
.topo{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:10px;
  min-height:56px; padding:8px 14px;
  padding-top:calc(8px + env(safe-area-inset-top));
  background:color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
}
.topo__titulo{
  flex:1; min-width:0;
  font-family:'Manrope',sans-serif; font-weight:800; font-size:var(--t-cartao);
  letter-spacing:.02em; color:var(--tinta);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; /* nunca 2 linhas */
}
.topo__seg{
  display:flex; background:var(--papel-2); border-radius:var(--r-pilula); padding:3px;
}
.topo__seg button{
  min-height:38px; min-width:64px; padding:0 14px; border:0; cursor:pointer;
  border-radius:var(--r-pilula); background:none; font-family:inherit;
  font-size:var(--t-apoio); font-weight:700; color:var(--tinta-suave);
}
.topo__seg button[aria-selected="true"]{
  background:var(--cartao); color:var(--tinta); box-shadow:var(--sombra);
}
.topo__mais{
  border:0; background:none; cursor:pointer; font-size:22px; font-weight:800;
  color:var(--tinta-media); border-radius:var(--r-botao);
}
.topo__mais:focus-visible{ outline:3px solid var(--acao); outline-offset:2px; }

/* R2 — faixa de alerta: nomeia o buraco, some quando não há o que dizer */
.faixa-alerta{
  display:flex; align-items:center; gap:10px; width:calc(100% - 28px);
  margin:8px 14px 0; padding:10px 14px; min-height:44px;
  border:1px solid color-mix(in srgb, var(--erro) 35%, transparent);
  background:color-mix(in srgb, var(--erro) 9%, var(--cartao));
  border-radius:var(--r-botao); cursor:pointer; text-align:left; font-family:inherit;
}
.faixa-alerta .txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.faixa-alerta .txt b{ font-size:var(--t-corpo); font-weight:700; color:var(--tinta); }
.faixa-alerta .txt span{ font-size:var(--t-apoio); color:var(--tinta-suave); }
.faixa-alerta .chevron{ color:var(--tinta-suave); font-size:18px; }
.faixa-alerta.faixa--urgente{ min-height:72px; border-width:2px; }
.faixa-alerta.faixa--urgente .txt b{ font-size:var(--t-cartao); }
.faixa-alerta:focus-visible{ outline:3px solid var(--erro); outline-offset:2px; }

/* R3/R4/R5 — a dobra */
.dobra{
  max-width:640px; margin:0 auto;
  padding:10px 14px calc(130px + env(safe-area-inset-bottom));
}
.agora-rotulo{ display:block; margin:6px 0 8px; }
#agora .card--bilhete{ margin-bottom:0; }
.agora-parte{
  text-align:center; font-size:var(--t-corpo); font-weight:700;
  color:var(--acao); padding:8px 0 2px;
}
.agora-cartao{
  display:flex; flex-direction:column; gap:6px; margin-bottom:4px;
}
.agora-cartao b{ font-size:var(--t-cartao); color:var(--tinta); }
.agora-cartao span{ font-size:var(--t-apoio); color:var(--tinta-suave); }
.agora-contagem .agora-num{
  font-family:'Poppins',sans-serif; font-weight:900; font-size:var(--t-titulo);
  color:var(--tinta); font-variant-numeric:tabular-nums;
}
.agora-buraco b{ color:var(--erro); }
.agora-buraco .s-btn{ align-self:flex-start; }

#a-seguir{ margin-top:14px; }
.aseguir-linha{
  display:flex; align-items:center; gap:10px; width:100%;
  min-height:56px; margin-top:8px; padding:8px 14px;
  background:var(--cartao); border:1px solid var(--borda);
  border-radius:var(--r-botao); box-shadow:var(--sombra);
  cursor:pointer; text-align:left; font-family:inherit;
}
.aseguir-linha .txt{ flex:1; min-width:0; font-size:var(--t-corpo); font-weight:700; color:var(--tinta); }
.aseguir-linha .chevron{ color:var(--tinta-suave); font-size:18px; }

/* R5 — a fita: grade 20 · 56 · resto · 24, passo de 44px */
#fita-wrap{ margin-top:16px; }
.fita-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom:6px;
}
.fita-frase{ font-size:var(--t-apoio); color:var(--tinta-suave); }
.fita-linha{
  display:grid; grid-template-columns:20px 56px 1fr auto; align-items:center; gap:6px;
  width:100%; min-height:44px; padding:2px 6px;
  border:0; background:none; cursor:pointer; text-align:left; font-family:inherit;
  border-radius:var(--r-mini);
}
.fita-linha:hover{ background:var(--acao-tenue); }
.fita-linha:focus-visible{ outline:3px solid var(--acao); outline-offset:-2px; }
div.fita-linha{ cursor:default; }
div.fita-linha:hover{ background:none; }
.fita-fio{
  font-size:18px; line-height:1; text-align:center; color:var(--tinta-suave);
  font-weight:700;
}
.fio-ok{ color:var(--acao); }
.fio-mov{ color:var(--tinta-media); }
.fio-buraco{ color:var(--erro); }
.fita-data{
  font-size:var(--t-apoio); font-weight:700; color:var(--tinta-media);
  font-variant-numeric:tabular-nums; text-transform:lowercase;
}
.fita-txt{
  min-width:0; font-size:var(--t-corpo); color:var(--tinta);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fita-buraco .fita-txt{ color:var(--erro); font-weight:700; }
.fita-ruptura .fita-txt{ color:var(--erro); font-weight:700; }
.fita-transito .fita-txt, .fita-incerta .fita-txt{ color:var(--tinta-suave); }
.fita-vazia{ opacity:.55; min-height:32px; }
.fita-cta{
  font-size:var(--t-apoio); font-weight:700; color:var(--sobre-erro);
  background:var(--erro); border-radius:var(--r-pilula); padding:6px 12px;
}
.fita-linha .chevron{ color:var(--tinta-suave); font-size:16px; text-align:center; }

/* Folha de detalhe da fita */
.leg-sheet .card, .leg-sheet .card--bilhete{ box-shadow:none; margin:0; }

/* Diário / folha ⋯ */
.diario-lista{ display:flex; flex-direction:column; gap:10px; }
.diario-item{
  display:flex; flex-direction:column; gap:2px; text-align:left; cursor:pointer;
  border:1px solid var(--borda); font-family:inherit; min-height:var(--toque);
}
.diario-item b{ font-size:var(--t-corpo); color:var(--tinta); }
.diario-item span{ font-size:var(--t-apoio); color:var(--tinta-suave); }

/* Ligar 112 — ação direta, antes de qualquer navegação */
.sos-112{
  display:flex; margin:4px 0 12px; background:var(--erro); color:var(--sobre-erro);
  text-decoration:none;
}

/* R6 — rodapé: Socorro FORA da pílula de 5 (mesma geometria da referência) */
.rodape{
  position:fixed; left:12px; right:12px; z-index:40;
  bottom:calc(12px + env(safe-area-inset-bottom));
  display:flex; align-items:flex-end; gap:10px;
}
.rodape .s-barra{ position:static; flex:1; left:auto; right:auto; bottom:auto; }
.rodape__sos{
  --tecla-face:color-mix(in srgb, var(--erro) 92%, #fff);
  --tecla-face-2:var(--erro);
  --tecla-borda:color-mix(in srgb, var(--erro) 60%, #000);
  color:var(--sobre-erro); min-width:64px;
}
.rodape__sos .nav-label{ font-size:var(--t-rotulo); font-weight:700; }
.rodape__sos .ic{ color:var(--sobre-erro); }

/* Tablet ≥820: a trilha assume (sistema.css mostra .s-trilha), a barra some.
   UMA regra, sem exceção que a anule. */
@media (min-width:820px){
  .rodape{ display:none; }
  .dobra{ padding-bottom:40px; }
  .s-trilha .s-tecla{ width:72px; }
  .trilha__sos{ margin-top:14px; }
}