:root {
  /* Tokens da identidade (out/2026): tudo deriva do board — navy, azul-royal do cartão, roxo e ciano.
     --purple-2 continua sendo o nome da "cor interativa" usada no CSS inteiro; agora é o azul-royal da marca. */
  --navy-900: #0b0f38;
  --navy-700: #141a5c;
  --navy-600: #1d2470;
  --blue-500: #3b2bd9;
  --accent: #06d6ff;
  --bg: #f2f4fc;
  --surface: #ffffff;
  --surface-2: #f7f8ff;
  --border: #e3e6f6;
  --border-strong: #d3d8f0;
  --text: #141a4a;
  --muted: #6b7399;
  --muted-2: #9299bf;
  --purple: #2a1fb5;          /* royal escuro: hover/pressed */
  --purple-2: #3b2bd9;        /* azul-royal: links, abas ativas, ícones */
  --purple-3: #8b5cf6;        /* roxo da marca: preenchimentos e badges */
  --purple-soft: #e6e9ff;
  --purple-softer: #f1f3ff;
  --cyan: #06d6ff;
  /* --- Identidade de marca (brand board) --- */
  --brand-purple: #8b5cf6;
  --brand-cyan: #06d6ff;
  --brand-lavender: #e0e7ff;
  --brand-navy: #0b0f38;
  --brand-royal: #3b2bd9;              /* azul do cartão de embarque */
  --brand-grad: linear-gradient(120deg, #06d6ff 0%, #5b8cff 45%, #8b5cf6 100%);
  --f-display: "Montserrat", "Inter", system-ui, sans-serif; /* títulos e marca */
  --f-body: "Manrope", "Inter", system-ui, sans-serif;       /* texto */
  --green: #16a37b;
  --amber: #d9902a;
  --red: #dc4b52;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(20, 22, 40, 0.04), 0 8px 24px rgba(20, 22, 40, 0.05);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* o atributo hidden sempre esconde (senão display:grid/flex de .bell/.avatar-top/.pill ignora) */
[hidden] { display: none !important; }

html, body { height: 100%; }
/* visão compacta (o zoom de 67% que você curtiu) virou o padrão da tela — só em telas
   grandes (desktop); no celular já é ajustado à parte, então fica como está.
   overflow-x:hidden evita a barra de rolar lateral (alguns elementos usam vw, que não
   encolhe junto com o zoom e sobra um resto de largura). */
@media (min-width: 900px) { html { zoom: 0.75; overflow-x: hidden; } body { overflow-x: hidden; } }
body {
  font-family: var(--f-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
img { display: block; }

/* % em vez de 100vh: "vh" não acompanha o zoom (CSS zoom ignora unidades de viewport),
   sobrava uma faixa branca embaixo. Com %, encadeado a partir de html,body{height:100%},
   acompanha o zoom certinho. */
.app { display: flex; height: 100%; overflow: hidden; }

/* ================= MAIN ================= */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: 56px; flex: none;
  background: var(--navy-900);
  border-bottom: 1px solid rgba(224, 231, 255, 0.08);
  color: #fff;
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px;
}
/* menu principal no topo (desktop). No celular (≤640px) some e entram as abas de baixo, .mtabs */
.topnav { display: flex; align-items: center; gap: 4px; margin-left: 6px; }
.topnav-item { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent;
  color: rgba(224, 231, 255, 0.74); font: 600 13.5px var(--f-body); white-space: nowrap; transition: background .18s, color .18s, box-shadow .18s; }
.topnav-item svg { width: 18px; height: 18px; flex: none; }
.topnav-item:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.topnav-item.active { background: var(--brand-royal); color: #fff; box-shadow: 0 6px 16px rgba(59, 43, 217, 0.35); }
.topnav-item:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 2px; }
.view-title { margin-left: auto; min-width: 0; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-wrap .menu-pop { top: calc(100% + 8px); min-width: 200px; }
.avatar-top { border: 2px solid rgba(255, 255, 255, 0.25); padding: 0; }
.avatar-top:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 2px; }
@media (max-width: 900px) { .topnav-item span { display: none; } .topnav-item { padding: 0 11px; } }
.brand { display: flex; align-items: center; gap: 9px; }
.brand strong { font-size: 15px; font-weight: 700; }
.brand-mark { width: 30px; height: 30px; flex: none; overflow: visible; }

/* aviãozinho da marca com movimento contínuo (topbar) */
.mini-plane { animation: planebob 3.2s ease-in-out infinite; will-change: transform; }
@keyframes planebob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes planetakeoff { 0% { transform: translate(0, 0); } 45% { transform: translate(7px, -9px); } 100% { transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .mini-plane { animation: none; } }
.brand-word { font-size: 15px; font-weight: 800; letter-spacing: -0.2px; }
#viewTitle { color: rgba(224, 231, 255, 0.78); font-weight: 600; font-size: 14px; }
.loader-logo {
  width: 22px; height: 22px; border-radius: 50%;
  background: conic-gradient(from 0deg, #06d6ff, #5b8cff, #8b5cf6, #06d6ff);
  -webkit-mask: radial-gradient(circle 6px at center, transparent 96%, #000 0);
  mask: radial-gradient(circle 6px at center, transparent 96%, #000 0);
  animation: spin 3.5s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.topbar-actions { display: flex; align-items: center; gap: 10px; }
.pill {
  height: 34px; padding: 0 14px; border-radius: 9px; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent;
  transition: all 0.18s;
}
.pill.ghost { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.22); color: #fff; }
.pill.ghost:hover { border-color: var(--purple-3); color: var(--purple-2); }
.pill.primary { background: var(--purple-2); color: #fff; }
.pill.primary:hover { background: var(--purple); }
.dot-ai { width: 12px; height: 12px; border-radius: 50%; background: conic-gradient(from 0deg, #06d6ff, #5b8cff, #8b5cf6, #06d6ff); }
.avatar-top {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(135deg, #3b2bd9, #8b5cf6); color: #fff; font-size: 13px; font-weight: 700;
}

/* ---------- Sino de notificações ---------- */
.bell {
  position: relative; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; cursor: pointer; transition: all .18s;
}
.bell:hover { border-color: rgba(255, 255, 255, 0.4); color: #fff; background: rgba(255, 255, 255, 0.16); }
.bell svg { width: 19px; height: 19px; }
.bell-dot {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: #ef4444; color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center;
  border: 2px solid var(--navy-900); line-height: 1;
}
.notif-pop {
  position: fixed; z-index: 1200; width: min(380px, calc(100vw - 24px)); max-height: min(560px, 78vh);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 16px; overflow: hidden;
  box-shadow: 0 22px 60px rgba(20,22,40,.22); display: flex; flex-direction: column;
  opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top right; transition: opacity .16s, transform .16s;
}
.notif-pop.show { opacity: 1; transform: translateY(0) scale(1); }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.notif-head strong { font-size: 15px; }
.notif-readall { font-size: 12px; font-weight: 600; color: var(--purple-2); }
.notif-readall:hover { text-decoration: underline; }
.notif-list { overflow-y: auto; }
.notif-item { position: relative; display: flex; gap: 11px; padding: 13px 14px 13px 15px; border-bottom: 1px solid var(--border); transition: background .15s; }
.notif-item:hover { background: var(--purple-softer); }
.notif-item.unread { background: linear-gradient(90deg, rgba(124,58,237,.07), transparent 60%); }
.notif-item.unread::before { content: ''; position: absolute; left: 5px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--purple-2); transform: translateY(-50%); }
.notif-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; background: var(--purple-soft); }
.notif-ico.ni-pay { background: #dcfce7; }
.notif-ico.ni-invite { background: #e6e9ff; }
.notif-ico.ni-update { background: #dbeafe; }
.notif-ico.ni-photo { background: #fce7f3; }

/* ---------- Carrossel de membros (arco dock) ---------- */
.mcar { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 10px 0 2px; }
.mcar-hero { width: 128px; height: 128px; border-radius: 50%; overflow: hidden; border: 4px solid #fff; background: var(--purple-soft); box-shadow: 0 12px 32px rgba(124,58,237,.28); display: grid; place-items: center; }
.mcar-hero img { width: 100%; height: 100%; object-fit: cover; }
.mcar-hero .mcar-ini { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font-size: 46px; font-weight: 800; }
.mcar-name { text-align: center; line-height: 1.25; }
.mcar-name b { font-size: 20px; font-weight: 800; display: block; }
.mcar-name small { font-size: 13px; color: var(--purple-2); font-weight: 700; }
.mcar-strip { position: relative; width: 100%; overflow: hidden; }
.mcar-btn { position: absolute; left: 50%; top: 0; margin-left: -24px; margin-top: -24px; width: 48px; height: 48px; border: none; background: none; padding: 0; cursor: pointer; transform-origin: center; will-change: transform, opacity; }
.mcar-in { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; transform-origin: center; border: 2.5px solid #fff; background: var(--purple-soft); box-shadow: 0 3px 10px rgba(20,22,40,.18); }
.mcar-btn.on .mcar-in { border-color: var(--purple-2); box-shadow: 0 4px 16px rgba(124,58,237,.55); }
.mcar-in img { width: 100%; height: 100%; object-fit: cover; }
.mcar-in .mcar-ini { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font-size: 18px; font-weight: 800; }

/* ---------- Carrossel de fotos (dock magnético) ---------- */
.pcar-hint { text-align: center; color: var(--muted); font-size: 12.5px; margin: 2px 0 8px; }
.pcar { position: relative; }
.pcar-track { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 380px; padding: 8px 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.pcar-track::-webkit-scrollbar { height: 8px; }
.pcar-bar { flex: none; margin: auto 0; border-radius: 16px; background-size: cover; background-position: center; background-repeat: no-repeat; cursor: pointer; box-shadow: 0 8px 24px rgba(20,22,40,.14); will-change: width, height; }
.pcar-bar:hover { box-shadow: 0 12px 30px rgba(124,58,237,.28); }

/* ---------- Lightbox (foto ampliada) ---------- */
.lightbox { position: relative; padding: 0; background: transparent; box-shadow: none; max-width: 92vw; width: auto; }
.lb-img { display: block; max-width: 92vw; max-height: 80vh; border-radius: 16px; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.lb-close { position: absolute; top: -12px; right: -12px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--text); box-shadow: 0 4px 14px rgba(0,0,0,.3); z-index: 2; }
.lb-close svg { width: 17px; height: 17px; }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; color: #fff; font-size: 13px; font-weight: 600; }
.notif-txt { flex: 1; min-width: 0; }
.notif-txt b { font-size: 13.5px; font-weight: 700; display: block; line-height: 1.3; }
.notif-txt p { font-size: 12.5px; color: var(--muted); margin: 3px 0 0; line-height: 1.4; }
.notif-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.notif-foot > span { font-size: 11px; color: var(--muted); }
.notif-cta { font-size: 12px; font-weight: 700; color: #fff; background: var(--purple-2); padding: 5px 12px; border-radius: 8px; transition: background .15s; }
.notif-cta:hover { background: var(--purple); }
.notif-cta.ghost { background: transparent; color: var(--purple-2); border: 1px solid var(--border-strong); }
.notif-cta.ghost:hover { border-color: var(--purple-3); background: var(--purple-softer); }
.notif-cta.danger { background: transparent; color: var(--red); border: 1px solid #f1c6c9; }
.notif-cta.danger:hover { background: #fdecec; border-color: var(--red); }
.notif-cta[disabled] { opacity: .6; pointer-events: none; }
.notif-x { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: var(--muted); opacity: 0; transition: all .15s; align-self: flex-start; }
.notif-item:hover .notif-x { opacity: 1; }
.notif-x:hover { background: var(--border); color: var(--text); }
.notif-x svg { width: 13px; height: 13px; }
.notif-empty { padding: 40px 20px; text-align: center; }
.notif-empty .ne-ico { font-size: 34px; opacity: .5; display: block; }
.notif-empty p { font-weight: 700; margin: 10px 0 3px; }
.notif-empty span { font-size: 12.5px; color: var(--muted); }

/* banner "você foi convidado — só visualização" */
.ro-banner { display: flex; align-items: center; gap: 11px; padding: 13px 16px; margin-bottom: 14px;
  background: linear-gradient(90deg, var(--purple-softer), transparent); border: 1px solid var(--border-strong);
  border-left: 4px solid var(--purple-2); border-radius: 12px; }
.ro-banner svg { width: 20px; height: 20px; color: var(--purple-2); flex: none; }
.ro-banner b { font-size: 13.5px; }
.ro-banner span { font-size: 12.5px; color: var(--muted); }

/* ---------- Botão "Ver no mapa" / "Ver lista" (pin pulsando) ---------- */
.ph-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.citymap-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 50ch;
  background: linear-gradient(135deg, #3b2bd9, #8b5cf6); color: #fff; font-weight: 700; font-size: 14px;
  border: none; cursor: pointer; box-shadow: 0 6px 16px rgba(124,58,237,.28); transition: transform .2s, box-shadow .2s, background .2s;
}
.citymap-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(124,58,237,.38); }
.citymap-btn svg { width: 18px; height: 18px; }
.citymap-btn .cmb-pin { display: inline-flex; animation: cmb-bounce 1.5s ease-in-out infinite; }
@keyframes cmb-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.citymap-btn.ghost { background: var(--surface); color: var(--purple-2); border: 1px solid var(--border-strong); box-shadow: none; }
.citymap-btn.ghost:hover { border-color: var(--purple-3); background: var(--purple-softer); transform: translateY(-1px); }

/* ---------- Mapa da cidade (inline, no lugar dos cards) ---------- */
.city-map-panel { display: flex; flex-direction: column; gap: 12px; }
.cmp-hint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; color: var(--text);
  background: var(--purple-softer); border: 1px solid var(--border); border-radius: 12px; padding: 11px 15px; }
.cmp-hint svg { width: 18px; height: 18px; flex: none; color: var(--purple-2); }
.cmp-hint .muted { color: var(--muted); font-weight: 500; }
.city-map-inline { width: 100%; height: min(62vh, 560px); border-radius: 16px; overflow: hidden; border: 1px solid var(--border-strong); box-shadow: var(--shadow); z-index: 1; }
.map-fallback { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 13px; }
/* filtro leve pra dar um ar Tripza aos tiles */
.city-map-inline .leaflet-tile-pane { filter: saturate(1.08); }

/* pin roxo em gota */
.map-pin-wrap { background: transparent !important; border: none !important; }
.cmap-pin { position: relative; display: block; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: linear-gradient(135deg, #3b2bd9, #8b5cf6); border: 2.5px solid #fff; box-shadow: 0 3px 10px rgba(124,58,237,.5); }
.cmap-pin::after { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); }
.cmap-pin.on { background: linear-gradient(135deg, #10b981, #34d399); box-shadow: 0 3px 10px rgba(16,185,129,.5); }

/* popup do ponto (foto + adicionar ao roteiro) */
.cmap-pop .leaflet-popup-content-wrapper { border-radius: 14px; padding: 0; overflow: hidden; box-shadow: 0 18px 44px rgba(20,22,40,.22); }
.cmap-pop .leaflet-popup-content { margin: 0; width: 230px !important; }
.cmap-pop .leaflet-popup-tip { box-shadow: 0 18px 44px rgba(20,22,40,.22); }
.cmap-card { font-family: var(--f-body); }
.cmap-img { height: 118px; background: var(--purple-soft); }
.cmap-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmap-img.noimg { background: linear-gradient(135deg, var(--purple-3), var(--purple-2)); }
.cmap-body { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 4px; }
.cmap-cat { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--purple-2); }
.cmap-card b { font-size: 14.5px; line-height: 1.25; color: var(--text); }
.cmap-price { font-size: 12.5px; font-weight: 700; color: var(--text); }
.cmap-add { margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  padding: 9px 12px; border-radius: 9px; background: var(--purple-2); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; transition: background .15s; }
.cmap-add:hover { background: var(--purple); }
.cmap-add svg { width: 15px; height: 15px; }
.cmap-add.added { background: #10b981; cursor: default; }
.cmap-links { display: flex; gap: 6px; margin-top: 8px; }
.cmap-link { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 8px; border-radius: 8px; font-size: 12px; font-weight: 700; background: var(--purple-soft); color: var(--purple-2); }
.cmap-link:hover { background: var(--purple-softer); }
.cmap-link.ghost { background: transparent; border: 1px solid var(--border-strong); color: var(--text); }
.cmap-link svg { width: 13px; height: 13px; }
.item-dir { height: 32px; padding: 0 12px; border-radius: 9px; display: inline-flex; align-items: center; gap: 6px; flex: none; color: #fff; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: background .15s; }
.item-dir:hover { background: var(--purple-3); }
/* "Como chegar?" so aparece ao passar o mouse (ou com foco) no item; no toque fica sempre, so o icone */
.item-card .item-dir { opacity: 0; transition: opacity .15s; }
.item-card:hover .item-dir, .item-card:focus-within .item-dir, .item-card .item-dir:focus-visible { opacity: 1; }
@media (hover: none) { .item-card .item-dir { opacity: 1; padding: 0; width: 32px; justify-content: center; } .item-card .item-dir span { display: none; } }
.item-dir svg { width: 16px; height: 16px; }
@media (max-width: 560px) { .item-dir { padding: 0; width: 34px; justify-content: center; } .item-dir span { display: none; } }

/* ---------- Anotações por categoria ---------- */
.nota-group { margin-bottom: 22px; }
.nota-cat { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.nota-cat .nota-emoji { font-size: 20px; }
.nota-cat h3 { font-size: 16px; font-weight: 800; }
.nota-cat .nota-count { font-size: 11px; font-weight: 800; color: var(--purple-2); background: var(--purple-soft); border-radius: 20px; padding: 2px 9px; }
.nota-add-cat { margin-left: auto; width: 30px; height: 30px; padding: 0; }
.nota-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.nota-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--purple-3); border-radius: 12px; padding: 13px 15px; box-shadow: var(--shadow); }
.nota-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.nota-top b { font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.nota-acts { display: flex; gap: 4px; flex: none; opacity: .55; transition: opacity .15s; }
.nota-card:hover .nota-acts { opacity: 1; }
.nota-acts .mini { width: 28px; height: 28px; padding: 0; }
.nota-card p { margin-top: 7px; font-size: 13px; color: var(--text); line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
/* banner "só você vê" no topo de Anotações */
.notas-banner { display: flex; align-items: center; gap: 14px; background: var(--purple-softer); border: 1px solid var(--purple-soft); border-radius: 14px; padding: 14px 18px; margin: 2px 0 20px; flex-wrap: wrap; }
.notas-banner-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--purple-2); color: #fff; display: grid; place-items: center; }
.notas-banner-ic svg { width: 18px; height: 18px; }
.notas-banner-txt { flex: 1; min-width: 180px; }
.notas-banner-txt b { display: block; font-size: 14.5px; font-weight: 700; }
.notas-banner-txt span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
/* estado vazio com ícone e CTA, em vez do texto genérico centralizado no .empty-note */
.notas-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 48px 24px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 16px; }
.notas-empty svg { width: 30px; height: 30px; color: var(--purple-2); }
.notas-empty b { font-size: 15.5px; font-weight: 700; }
.notas-empty span { color: var(--muted); font-size: 13px; max-width: 420px; }
.notas-empty .btn-primary { margin-top: 6px; }
/* ---------- Checklist de mala ---------- */
.chk-wrap { margin-top: 8px; }
.chk-prog { height: 6px; border-radius: 999px; background: var(--purple-soft); overflow: hidden; margin-bottom: 4px; }
.chk-bar { height: 100%; background: linear-gradient(90deg, var(--purple-3), var(--purple-2)); border-radius: 999px; transition: width .3s ease; }
.chk-count { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.chk-item { display: flex; align-items: center; gap: 11px; padding: 6px 0; cursor: pointer; }
.chk-item input { position: absolute; opacity: 0; width: 0; height: 0; }
/* checkbox gradiente (roxo→magenta), com giro e brilho ao marcar */
.chk-box { width: 28px; height: 28px; flex: none; border-radius: 9px; border: 2px solid var(--purple-3); background: var(--surface); display: grid; place-items: center; color: #fff; transition: all .3s cubic-bezier(.2, .8, .2, 1); }
.chk-box svg { width: 15px; height: 15px; opacity: 0; transition: opacity .3s ease; }
.chk-item:hover .chk-box { box-shadow: 0 0 15px rgba(59, 43, 217, .5); }
.chk-item.on .chk-box { background: linear-gradient(135deg, var(--purple-2) 0%, #d9469c 100%); border-color: transparent; transform: rotate(12deg); }
.chk-item.on .chk-box svg { opacity: 1; }
/* aceite dos termos no cadastro (checkbox gradiente) */
.auth-terms { display: flex; align-items: center; gap: 10px; cursor: pointer; grid-column: 1 / -1; }
.auth-terms input { position: absolute; opacity: 0; width: 0; height: 0; }
.auth-terms .chk-box { width: 26px; height: 26px; }
.auth-terms:hover .chk-box { box-shadow: 0 0 12px rgba(59, 43, 217, .4); }
.auth-terms input:checked ~ .chk-box { background: linear-gradient(135deg, var(--purple-2), #d9469c); border-color: transparent; transform: rotate(12deg); }
.auth-terms input:checked ~ .chk-box svg { opacity: 1; }
.auth-terms small { font-size: 12.5px; color: var(--muted); font-weight: 500; line-height: 1.35; }
.auth-terms small a { color: var(--purple-2); font-weight: 700; }
/* foto de perfil no cadastro */
.auth-avatar-row { display: flex; grid-column: 1 / -1; }
.auth-avatar { display: flex; align-items: center; gap: 12px; cursor: pointer; width: 100%; }
.auth-avatar .aa-img { width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--purple-soft); display: grid; place-items: center; font-size: 22px; overflow: hidden; border: 2px dashed var(--purple-3); transition: border-color .15s; }
.auth-avatar:hover .aa-img { border-color: var(--purple-2); }
.auth-avatar .aa-img img { width: 100%; height: 100%; object-fit: cover; }
.auth-avatar .aa-txt { display: flex; flex-direction: column; gap: 1px; }
.auth-avatar .aa-txt b { font-size: 13.5px; }
.auth-avatar .aa-txt small { font-size: 11.5px; color: var(--muted); }
/* convite por link (WhatsApp) */
.invite-or { display: flex; align-items: center; text-align: center; color: var(--muted); font-size: 12px; margin: 14px 0 10px; }
.invite-or::before, .invite-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.invite-or span { padding: 0 10px; }
.invite-link-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; border: none; border-radius: 12px; background: #25d366; color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.invite-link-btn:hover { filter: brightness(1.05); }
.invite-link-btn svg { width: 18px; height: 18px; }
.invite-link-btn:disabled { opacity: .6; cursor: default; }
.chk-label { font-size: 13.5px; transition: color .15s; }
.chk-item.on .chk-label { color: var(--muted); text-decoration: line-through; }
.chk-add { display: flex; gap: 6px; margin-top: 8px; }
.chk-add input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 13px; background: var(--surface); }
.chk-add input:focus { outline: none; border-color: var(--purple-3); }
.chk-add .mini { flex: none; }

/* ---------- PWA: botão instalar ---------- */
/* banner dispensável, ancorado no rodapé da janela (não flutua mais sobre o mapa) */
.pwa-install-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 60;
  display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 16px; max-width: calc(100vw - 24px);
  border-radius: 999px; background: linear-gradient(135deg, var(--purple-2, #3b2bd9), #2a1fb5); color: #fff;
  font-size: 13px; font-weight: 700; box-shadow: 0 10px 26px rgba(59, 43, 217, .4); }
.pwa-install-bar .pi-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pwa-install-bar .pi-go { border: none; border-radius: 999px; background: #fff; color: var(--purple-2); font-family: inherit;
  font-size: 12.5px; font-weight: 800; padding: 7px 14px; min-height: 32px; cursor: pointer; flex: none; }
.pwa-install-bar .pi-x { border: none; background: rgba(255,255,255,.18); color: #fff; width: 30px; height: 30px; border-radius: 50%;
  font-size: 13px; cursor: pointer; flex: none; }
.pwa-install-bar .pi-x:hover { background: rgba(255,255,255,.3); }
@media (max-width: 640px) { .pwa-install-bar { bottom: 100px; } }
@media (max-width: 720px) { .pwa-install { bottom: 78px; } }

/* ---------- Enquetes (decisão em grupo) ---------- */
.poll-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); margin-bottom: 14px; }
.poll-card.is-closed { opacity: .94; }
.poll-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.poll-head h3 { font-size: 16px; font-weight: 700; line-height: 1.3; }
.poll-acts { display: flex; align-items: center; gap: 6px; flex: none; }
.poll-badge { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--purple-soft); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.poll-opts { display: flex; flex-direction: column; gap: 8px; }
.poll-opt { position: relative; width: 100%; text-align: left; border: 1.5px solid var(--border); background: var(--surface); border-radius: 11px; padding: 0; overflow: hidden; cursor: pointer; transition: border-color .15s; }
.poll-opt:hover:not([disabled]) { border-color: var(--purple-3); }
.poll-opt.on { border-color: var(--purple-2); }
.poll-opt[disabled] { cursor: default; }
.po-bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--purple-soft); transition: width .4s ease; }
.poll-opt.on .po-bar { background: linear-gradient(90deg, rgba(59, 43, 217, .22), rgba(59, 43, 217, .1)); }
.po-fg { position: relative; display: flex; align-items: center; gap: 8px; padding: 11px 13px; }
.po-check { width: 16px; flex: none; color: var(--purple-2); display: inline-grid; place-items: center; }
.po-check svg { width: 15px; height: 15px; }
.po-text { font-size: 14px; font-weight: 600; flex: 1; min-width: 0; }
.po-voters { display: flex; flex: none; padding-left: 6px; }
.po-voters .pv-av { width: 22px; height: 22px; border-radius: 50%; margin-left: -6px; border: 2px solid var(--surface); background: var(--purple-3); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; overflow: hidden; }
.po-voters .pv-av img { width: 100%; height: 100%; object-fit: cover; }
.po-pct { font-size: 13px; font-weight: 800; color: var(--purple-2); flex: none; min-width: 34px; text-align: right; }
.poll-foot { margin-top: 10px; font-size: 12px; color: var(--muted); }
.pf-opt { display: flex; gap: 6px; margin-bottom: 6px; }
.pf-opt input { flex: 1; min-width: 0; }
.pf-multi { flex-direction: row !important; align-items: center; gap: 8px; }
.pf-multi input { width: auto; }
.voo-box { margin-top: 10px; }
.voo-check { width: 100%; justify-content: center; border-color: var(--purple-3); color: var(--purple-2, #2a1fb5); font-weight: 600; font-size: 12px; opacity: .8; }
.voo-check:hover { opacity: 1; }
.voo-result { font-size: 12.5px; }
.voo-result:not([hidden]) + .voo-check { margin-top: 8px; }
.voo-st { display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 700; background: #e6e9ff; color: #2a1fb5; }
.voo-st.voo-active { background: #dbeafe; color: #1d4ed8; }
.voo-st.voo-landed { background: #dcfce7; color: #15803d; }
.voo-st.voo-cancelled, .voo-st.voo-diverted, .voo-st.voo-incident, .voo-st.voo-na { background: #fee2e2; color: #b91c1c; }
/* ---------- Clima da viagem ---------- */
.wx { margin: 4px 0 14px; }
/* card de clima em destaque (gradiente roxo Tripza) */
.wx-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 18px 20px; color: #fff; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(120deg, #5936B4 0%, #362A84 100%); box-shadow: 0 14px 32px rgba(54, 42, 132, .34); margin-bottom: 12px; }
.wxh-cloud { position: absolute; right: 14px; top: -8px; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18)); }
.wxh-cloud svg { height: 104px; width: auto; }
.wxh-temp { font-size: 46px; font-weight: 800; line-height: 1; position: relative; z-index: 2; letter-spacing: -1px; }
.wxh-info { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; position: relative; z-index: 2; }
.wxh-hl { color: rgba(235, 235, 245, .62); font-size: 13px; font-weight: 600; }
.wxh-city { font-size: 15px; font-weight: 700; margin-top: 3px; }
.wxh-cond { font-size: 14px; font-weight: 600; align-self: flex-end; white-space: nowrap; }
.wx-strip-label { font-size: 12px; font-weight: 700; color: var(--muted); margin: 2px 0 8px; }

/* calendário das datas da viagem */
.trip-cal { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px 20px; box-shadow: var(--shadow); margin-bottom: 14px; }
.trip-cal-info h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; margin-bottom: 5px; }
.trip-cal-info h3 svg { width: 18px; height: 18px; color: var(--purple-2); }
.trip-cal-info p { font-size: 13px; color: var(--muted); max-width: 34ch; }
.tc-range { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--purple); background: var(--purple-soft); padding: 7px 13px; border-radius: 999px; }
.tc-range svg { width: 14px; height: 14px; }
.tc-grid-wrap { border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; background: var(--surface-2); min-width: 258px; }
.tc-month { font-size: 13px; font-weight: 700; margin-bottom: 9px; text-align: center; text-transform: capitalize; color: var(--text); }
.tc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.tc-cell { aspect-ratio: 1 / 1; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--text); border-radius: 9px; }
.tc-cell.dow { color: var(--muted-2); font-size: 10px; font-weight: 800; }
.tc-cell.in-range { background: var(--purple-soft); color: var(--purple); }
.tc-cell.edge { background: linear-gradient(135deg, var(--purple-3), var(--purple)); color: #fff; box-shadow: 0 4px 10px rgba(59, 43, 217, .35); }
.tc-cell.today { outline: 2px solid var(--purple-3); outline-offset: -2px; }
@media (max-width: 720px) { .trip-cal { grid-template-columns: 1fr; } .tc-grid-wrap { min-width: 0; } .wxh-cond { font-size: 12.5px; } }
.wx-head { display: flex; align-items: center; gap: 6px; font-size: 14px; margin-bottom: 10px; }
.wx-head svg { width: 16px; height: 16px; color: var(--purple-2); }
.wx-head b { font-weight: 700; }
.wx-head span { color: var(--muted); font-size: 12.5px; }
.wx-msg { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.wx-msg svg { width: 15px; height: 15px; }
.wx-days { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px; }
.wx-day { flex: none; min-width: 74px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.wx-date { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.wx-emoji { font-size: 24px; line-height: 1; }
.wx-temp { font-size: 13px; }
.wx-temp b { font-weight: 800; }
.wx-temp i { font-style: normal; color: var(--muted); margin-left: 3px; }
.wx-rain { font-size: 10.5px; color: #2563eb; font-weight: 600; }
.voo-sub { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--text); }
.voo-legs { display: flex; align-items: flex-start; gap: 12px; margin-top: 10px; }
.voo-legs > div { display: flex; flex-direction: column; gap: 1px; }
.voo-legs b { font-size: 15px; font-weight: 800; }
.voo-legs span { font-size: 11.5px; color: var(--muted); }
.voo-city { font-size: 12px !important; font-weight: 700; color: var(--text) !important; }
.voo-extra { color: var(--purple-2, #2a1fb5) !important; }
.voo-arrow { display: flex; flex-direction: column; align-items: center; color: var(--purple-3); font-size: 16px; padding-top: 2px; }
.voo-arrow small { font-size: 10px; color: var(--muted); }

/* ---------- Estado vazio (nenhum roteiro): caixas rolando pra cima ---------- */
.roteiro-empty { max-width: 460px; margin: 6vh auto 0; text-align: center; }
.re-stack { position: relative; height: 220px; width: min(360px, 88vw); margin: 0 auto 18px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); }
.re-box { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 8px 22px rgba(124,58,237,.08); opacity: 0; animation: re-rise 4.8s cubic-bezier(.4,0,.2,1) infinite; }
.re-box:nth-child(1) { animation-delay: 0s; }
.re-box:nth-child(2) { animation-delay: 1.2s; }
.re-box:nth-child(3) { animation-delay: 2.4s; }
.re-box:nth-child(4) { animation-delay: 3.6s; }
@keyframes re-rise {
  0%   { transform: translateY(150px) scale(.92); opacity: 0; }
  16%  { opacity: 1; }
  50%  { transform: translateY(70px) scale(1); opacity: 1; }
  84%  { opacity: 1; }
  100% { transform: translateY(-10px) scale(.95); opacity: 0; }
}
.re-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--purple-soft); color: var(--purple-2); }
.re-ic svg { width: 19px; height: 19px; }
.re-bar { flex: 1; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--purple-soft), var(--border)); }
.re-dot { width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--purple-soft); }
.roteiro-empty h1 { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.roteiro-empty p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin-bottom: 22px; }
.roteiro-empty .re-cta { padding: 13px 26px; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .re-box { animation-duration: 0s; opacity: 1; position: relative; margin-bottom: 12px; } .re-stack { height: auto; mask-image: none; -webkit-mask-image: none; } }

/* ---------- Roteiro: split lista (esquerda) + mapa (direita) ---------- */
.rot-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 8px; }
.rot-left { min-width: 0; }
.rot-right { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 10px; }
.rot-map-head { display: flex; align-items: center; }
.rot-map-head h3 { font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; gap: 7px; }
.rot-map-head h3 svg { width: 18px; height: 18px; color: var(--purple-2); }
.roteiro-map.split { height: min(74vh, 660px); border-radius: 16px; border: 1px solid var(--border-strong); box-shadow: var(--shadow); }
.roteiro-map.split .leaflet-tile-pane { filter: saturate(1.08); }
.rot-right .map-filter { flex-wrap: wrap; gap: 7px; }
/* busca dentro do mapa */
.map-search { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 11px; }
.map-search:focus-within { border-color: var(--purple-2); box-shadow: 0 0 0 3px rgba(124,58,237,.14); }
.map-search .ms-ic { color: var(--muted); display: inline-flex; } .map-search .ms-ic svg { width: 17px; height: 17px; }
.map-search input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: 13.5px; color: var(--text); padding: 8px 0; }
.map-search .ms-clear { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); flex: none; }
.map-search .ms-clear:hover { background: var(--border); color: var(--text); } .map-search .ms-clear svg { width: 14px; height: 14px; }
.map-search-res { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 500; max-height: 320px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 18px 44px rgba(20,22,40,.18); padding: 5px; }
.msr-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 9px; text-align: left; cursor: pointer; transition: background .14s; }
.msr-item:hover { background: var(--purple-softer); }
.msr-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--purple-soft); color: var(--purple-2); } .msr-ic svg { width: 15px; height: 15px; }
.msr-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; } .msr-tx b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msr-tx small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msr-add { color: var(--purple-2); flex: none; } .msr-add svg { width: 17px; height: 17px; }
.msr-empty { padding: 14px; text-align: center; font-size: 12.5px; color: var(--muted); }
/* botões de categoria (estilo Google Maps) */
/* ====== Mapa do roteiro: busca + categorias viram overlay DENTRO do mapa
   (antes eram 3 fileiras de controles empilhadas em cima dele) ====== */
.map-shell { position: relative; overflow: hidden; border-radius: 16px; }
/* min-width:0 é obrigatório: item de grid não encolhe abaixo do conteúdo (min-width:auto),
   então a fileira de categorias empurrava o overlay ~170px pra fora do mapa, cortando a
   busca e cobrindo o "−" do zoom. */
.map-overlay { position: absolute; z-index: 500; top: 12px; left: 12px; right: 12px; max-width: calc(100% - 24px);
  display: grid; gap: 7px; pointer-events: none; }
.map-overlay > * { pointer-events: auto; min-width: 0; max-width: 100%; }
.map-overlay .map-search { width: 100%; box-sizing: border-box; }
.map-overlay .map-search { box-shadow: 0 6px 20px rgba(20,22,40,.18); }
.map-cats-wrap { position: relative; }
/* fade + seta na borda: antes o último chip ficava cortado ("Farmá…") sem indicar rolagem */
.map-cats-wrap::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 46px; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--bg) 62%); border-radius: 0 10px 10px 0; }
.map-cats-more { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); z-index: 2; width: 26px; height: 26px;
  border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--purple-2);
  font-size: 17px; font-weight: 800; line-height: 1; display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 10px rgba(20,22,40,.16); }
.map-cats-more:hover { background: var(--purple-soft); }
.map-cats-wrap.at-end::after, .map-cats-wrap.at-end .map-cats-more { opacity: 0; pointer-events: none; }
.map-cats { display: flex; gap: 7px; overflow-x: auto; padding: 2px 1px 3px; scrollbar-width: none; scroll-behavior: smooth; }
.map-cats::-webkit-scrollbar { display: none; }
.map-cat { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 50ch; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .14s; }
.map-cat .mc-e { font-size: 14px; }
.map-cat:hover { border-color: var(--purple-3); background: var(--purple-softer); }
.map-cat.active { background: var(--purple-2); border-color: var(--purple-2); color: #fff; }
.search-pin { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #f97316; border: 2.5px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.3); color: #fff; }

/* overlay de carregamento do mapa + spinner three-body (Uiverse) */
.map-loading { position: absolute; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(255,255,255,.55); backdrop-filter: blur(1px); }
.three-body { --uib-size: 40px; --uib-speed: .8s; --uib-color: #3b2bd9; position: relative; display: inline-block; height: var(--uib-size); width: var(--uib-size); animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear; }
.three-body__dot { position: absolute; height: 100%; width: 30%; }
.three-body__dot::after { content: ''; position: absolute; height: 0%; width: 100%; padding-bottom: 100%; background-color: var(--uib-color); border-radius: 50%; }
.three-body__dot:nth-child(1) { bottom: 5%; left: 0; transform: rotate(60deg); transform-origin: 50% 85%; }
.three-body__dot:nth-child(1)::after { bottom: 0; left: 0; animation: wobble1 var(--uib-speed) infinite ease-in-out; animation-delay: calc(var(--uib-speed) * -0.3); }
.three-body__dot:nth-child(2) { bottom: 5%; right: 0; transform: rotate(-60deg); transform-origin: 50% 85%; }
.three-body__dot:nth-child(2)::after { bottom: 0; left: 0; animation: wobble1 var(--uib-speed) infinite calc(var(--uib-speed) * -0.15) ease-in-out; }
.three-body__dot:nth-child(3) { bottom: -5%; left: 0; transform: translateX(116.666%); }
.three-body__dot:nth-child(3)::after { top: 0; left: 0; animation: wobble2 var(--uib-speed) infinite ease-in-out; }
@keyframes spin78236 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes wobble1 { 0%, 100% { transform: translateY(0%) scale(1); opacity: 1; } 50% { transform: translateY(-66%) scale(0.65); opacity: 0.8; } }
@keyframes wobble2 { 0%, 100% { transform: translateY(0%) scale(1); opacity: 1; } 50% { transform: translateY(66%) scale(0.65); opacity: 0.8; } }
.dest-remove { margin-left: 6px; }

/* globo do perfil (cobe) */
.globe-panel { margin-top: 18px; }
.globe-panel .panel-head h3 { display: inline-flex; align-items: center; gap: 8px; }
.globe-panel .panel-head h3 svg { width: 18px; height: 18px; flex: none; color: var(--purple-2); }
.globe-wrap { display: flex; justify-content: center; padding: 10px 20px 26px; }
.globe-wrap canvas { width: min(340px, 78vw); height: min(340px, 78vw); aspect-ratio: 1; }
/* no celular o globo comia metade da tela antes da lista de viagens */
@media (max-width: 560px) { .globe-wrap { padding: 4px 16px 14px; } .globe-wrap canvas { width: min(190px, 48vw); height: min(190px, 48vw); } }

/* Onde já viajei — país + estados/regiões */
.visited-block { margin-top: 4px; }
.add-pais { position: relative; display: flex; align-items: center; gap: 8px; padding: 3px 6px 3px 12px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 11px; margin: 10px 0 12px; }
.add-pais:focus-within { border-color: var(--purple-2); box-shadow: 0 0 0 3px rgba(124,58,237,.14); }
.add-pais > svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.add-pais input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: 13.5px; padding: 9px 0; color: var(--text); }
.pais-dd { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 18px 40px rgba(20,22,40,.18); padding: 5px; max-height: 300px; overflow-y: auto; }
.pais-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px; border-radius: 9px; font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left; }
.pais-opt:hover { background: var(--purple-softer); }
.pais-opt .flag-img, .pais-opt .flag-emoji { width: 22px; height: 16px; }
.visited-list { display: flex; flex-direction: column; gap: 10px; }
.pais-card { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.pais-card-head { display: flex; align-items: center; gap: 9px; }
.pais-card-head b { font-size: 14px; }
.pc-flag .flag-img, .pc-flag .flag-emoji { width: 24px; height: 17px; display: block; }
.pc-count { font-size: 11px; font-weight: 800; color: var(--purple-2); background: var(--purple-soft); border-radius: 20px; padding: 2px 8px; }
.pc-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.pc-remove { width: 28px; height: 28px; padding: 0; }
.pais-states { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.pais-states .uf-chip { width: auto; min-width: 0; height: auto; padding: 7px 12px; white-space: nowrap; line-height: 1.15; display: inline-flex; align-items: center; }
.search-pin svg { width: 15px; height: 15px; transform: rotate(45deg); }
.add-day-place { display: flex; align-items: center; gap: 11px; padding: 12px 14px; background: var(--purple-softer); border-radius: 11px; }
.add-day-place svg { width: 20px; height: 20px; color: var(--purple-2); flex: none; }
.add-day-place b { font-size: 14.5px; display: block; } .add-day-place small { font-size: 12px; color: var(--muted); }
.rot-left .item-card[data-focus] { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.rot-left .item-card[data-focus]:hover { box-shadow: 0 10px 26px rgba(20,22,40,.28); transform: translateY(-2px); }
@media (max-width: 900px) {
  .rot-split { grid-template-columns: 1fr; }
  /* roteiro (dias+atividades) vem PRIMEIRO; o mapa e ferramentas descem pra baixo */
  .rot-right { position: static; order: 2; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
  .roteiro-map.split { height: 38vh; }
}

.content { flex: 1; overflow-y: auto; padding: 26px 30px 40px; }
.content::-webkit-scrollbar { width: 10px; }
.content::-webkit-scrollbar-thumb { background: #dfe0ea; border-radius: 10px; border: 3px solid var(--bg); }

/* ============ TÍTULOS DE SEÇÃO ============ */
.page-head { margin-bottom: 22px; }
.page-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.4px; }
.page-head p { color: var(--muted); font-size: 14px; margin-top: 4px; }

/* ============ BUSCA ============ */
.searchbar {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1.5px solid var(--border-strong);
  border-radius: 12px; padding: 0 14px; height: 46px; max-width: 480px; margin-bottom: 18px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.searchbar:focus-within { border-color: var(--purple-2); box-shadow: 0 0 0 4px rgba(59, 43, 217, 0.16); }
.searchbar:focus-within svg { color: var(--purple-2); }
.searchbar svg { width: 18px; height: 18px; color: var(--muted); transition: color 0.18s; }
.searchbar input { border: none; outline: none; flex: 1; font-size: 14px; background: transparent; color: var(--text); }
.searchbar input::placeholder { color: var(--muted-2); }

/* ============ GRID DE CIDADES ============ */
.city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
/* filtro de país em faixa compacta (pills que rolam na horizontal, com setas) */
.pais-pills-wrap { position: relative; margin-bottom: 14px; }
.pais-pills { display: flex; gap: 8px; overflow-x: auto; padding: 2px 36px; scrollbar-width: none; scroll-behavior: smooth; }
.pais-pills::-webkit-scrollbar { display: none; }
.pp-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); box-shadow: 0 2px 10px rgba(20, 22, 40, .14); cursor: pointer; display: grid; place-items: center; color: var(--purple-2); }
.pp-arrow.left { left: -4px; } .pp-arrow.right { right: -4px; }
.pp-arrow:hover { border-color: var(--purple-3); background: var(--purple-softer); }
.pp-arrow svg { width: 15px; height: 15px; }
@media (hover: none) { .pp-arrow { display: none; } .pais-pills { padding: 2px 2px; } }
/* carrossel de DESTAQUES do mundo (ponto-bandeira por país) — card abre o destino */
.hc-label { margin-top: 2px; }
.hero-carousel { position: relative; overflow: hidden; margin: 0 0 26px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.hc-track { display: flex; gap: 12px; width: max-content; padding: 2px; animation: hcMarquee var(--hc-dur, 120s) linear infinite; will-change: transform; }
.hero-carousel:hover .hc-track, .hc-track.hc-paused { animation-play-state: paused; }
@keyframes hcMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hc-track { animation: none; overflow-x: auto; width: auto; } .hero-carousel { -webkit-mask-image: none; mask-image: none; } }
.hc-card { flex: 0 0 auto; width: 300px; height: 230px; position: relative; border: none; border-radius: 16px; overflow: hidden; cursor: pointer; padding: 0; background-size: cover; background-position: center; background-color: #241b3a; text-align: left; font-family: inherit; box-shadow: 0 10px 30px rgba(20, 22, 40, .16); transition: transform .18s ease, box-shadow .18s ease; }
.hc-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(11, 15, 56, .28); }
.hc-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,20,0) 30%, rgba(10,8,20,.28) 55%, rgba(10,8,20,.82) 100%); }
.hc-body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 4px; padding: 15px 16px; color: #fff; }
.hc-cat { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #e9d8fd; opacity: .95; }
.hc-title { font-size: 19px; font-weight: 800; line-height: 1.14; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.hc-sub { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; opacity: .95; margin-top: 2px; }
.hc-sub .flag-img { width: 20px; height: 14px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.hc-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); box-shadow: 0 3px 14px rgba(20, 22, 40, .2); cursor: pointer; display: grid; place-items: center; color: var(--purple-2); }
.hc-arrow.left { left: -6px; } .hc-arrow.right { right: -6px; }
.hc-arrow:hover { border-color: var(--purple-3); background: var(--purple-softer); }
.hc-arrow svg { width: 18px; height: 18px; }
@media (max-width: 1000px) { .hc-card { width: 260px; height: 210px; } .hc-title { font-size: 20px; } }
@media (max-width: 640px) { .hc-card { width: 240px; height: 200px; } .hc-title { font-size: 20px; } .hc-arrow { display: none; } }
/* faixa de países que rola sozinha (marquee infinito) — pausa no hover/toque p/ clicar */
.pais-marquee { position: relative; overflow: hidden; margin-bottom: 16px; padding: 2px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.pais-track { display: flex; gap: 8px; width: max-content; animation: paisMarquee var(--pm-dur, 80s) linear infinite; will-change: transform; }
.pais-marquee:hover .pais-track, .pais-track.pm-paused { animation-play-state: paused; }
@keyframes paisMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pais-track { animation: none; } .pais-marquee { overflow-x: auto; scrollbar-width: none; } }
.pais-pill { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; transition: border-color .15s, background .15s, color .15s; }
.pais-pill:hover { border-color: var(--purple-3); }
.pais-pill.on { background: var(--purple-2); border-color: var(--purple-2); color: #fff; }
.pais-pill .flag-img { width: 22px; height: 15px; border-radius: 3px; display: block; }
.sec-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 6px 0 12px; }
.sec-label svg { width: 14px; height: 14px; color: var(--purple-2); }
.searchbar.sb-explore.wide { width: 100%; max-width: 520px; }
.explore-bar { position: relative; }
.sb-clear { margin-left: auto; border: none; background: none; color: var(--muted); font-size: 15px; cursor: pointer; padding: 4px 6px; border-radius: 50%; line-height: 1; }
.sb-clear:hover { background: var(--purple-softer); color: var(--purple-2); }
/* caixa de sugestões (autocomplete) abaixo do input */
.search-sug { position: absolute; top: calc(100% + 6px); left: 0; width: 100%; max-width: 520px; z-index: 40; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: 0 14px 40px rgba(20, 22, 40, .18); overflow: hidden; max-height: 340px; overflow-y: auto; padding: 6px; }
.sug-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: none; background: none; border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 14px; color: var(--text); text-align: left; }
.sug-item:hover { background: var(--purple-softer); }
.sug-item .sug-nm { font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug-item em { font-style: normal; font-size: 12px; color: var(--muted); flex: none; }
.sug-item .flag-img { width: 24px; height: 16px; border-radius: 3px; flex: none; }
.sug-item .sug-ic { display: grid; place-items: center; width: 22px; flex: none; color: var(--purple-2); }
.sug-item .sug-ic svg { width: 16px; height: 16px; }
.pais-titulo { display: flex; align-items: center; gap: 10px; font-size: 22px; margin: 6px 0 14px; }
.pais-titulo b { font-weight: 800; letter-spacing: -.02em; }
.pais-titulo .flag-img { width: 34px; height: 24px; border-radius: 4px; }
.city-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  position: relative; box-shadow: var(--shadow); cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.city-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(20,22,40,0.10); border-color: var(--purple-3); }
.city-img { height: 150px; background: linear-gradient(135deg, #e6e9ff, #e0e7ff); position: relative; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.city-img img { width: 100%; height: 100%; object-fit: cover; }
.city-badge {
  position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,0.92);
  color: var(--purple-2); font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 7px;
}
.city-body { padding: 13px 15px 15px; }
.city-body h3 { font-size: 16px; font-weight: 700; }
.city-body .uf { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.city-body p { color: var(--muted); font-size: 12.5px; margin-top: 8px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.city-meta { margin-top: 11px; display: flex; align-items: center; gap: 6px; color: var(--purple-2); font-size: 12px; font-weight: 600; }
.city-meta svg { width: 14px; height: 14px; }

/* ============ DETALHE CIDADE / GALERIA ============ */
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 600; background: none; border: none; margin-bottom: 16px; }
.back-link:hover { color: var(--purple-2); }
.back-link svg { width: 16px; height: 16px; }

.hero-city { position: relative; height: 240px; border-radius: 18px; overflow: hidden; margin-bottom: 22px; }
.hero-city img { width: 100%; height: 100%; object-fit: cover; }
.hero-city .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,16,30,0.78), rgba(15,16,30,0.05)); }
.hero-city .cap { position: absolute; left: 24px; bottom: 20px; color: #fff; }
.hero-city .cap h1 { font-size: 30px; font-weight: 800; }
.hero-city .cap span { opacity: 0.9; font-size: 14px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.spot-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); position: relative; box-shadow: var(--shadow); transition: box-shadow .25s, transform .25s; }
.spot-card:hover { box-shadow: 0 10px 34px rgba(59, 43, 217, 0.18); }
.spot-img { height: 150px; overflow: hidden; background: #e6e9ff; border-radius: var(--radius) var(--radius) 0 0; }

/* ---- Borda neon animada (só no HOVER, com brilho pra fora) — cards de ponto e de cidade ---- */
@property --neon-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.spot-card, .city-card { --neon-a: 0deg; }
.spot-card::before, .spot-card::after,
.city-card::before, .city-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--neon-a), transparent 0deg 226deg, var(--cyan) 286deg, var(--purple-3) 322deg, transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0; transition: opacity .3s;
}
.spot-card::before, .city-card::before { z-index: 3; }                                 /* linha neon nítida */
.spot-card::after, .city-card::after { z-index: -1; padding: 3px; filter: blur(12px); } /* brilho que vaza pra fora */
/* aparece e anima só ao passar o mouse */
.spot-card:hover::before, .city-card:hover::before { opacity: 1; animation: neonSpin 4.5s linear infinite; }
.spot-card:hover::after, .city-card:hover::after { opacity: .85; animation: neonSpin 4.5s linear infinite; }
@keyframes neonSpin { to { --neon-a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .spot-card:hover::before, .spot-card:hover::after, .city-card:hover::before, .city-card:hover::after { animation: none; } }
.spot-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.spot-card:hover .spot-img img { transform: scale(1.06); }
.spot-body { padding: 12px 14px 14px; }
.spot-cat { font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--purple-2); background: var(--purple-soft); padding: 3px 8px; border-radius: 6px; display: inline-block; }
.spot-body h4 { font-size: 15px; font-weight: 700; margin: 9px 0 5px; }
.spot-body .desc { color: var(--muted); font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spot-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.rating { display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--amber); }
.rating svg { width: 14px; height: 14px; fill: var(--amber); stroke: var(--amber); }
.price { font-size: 13px; font-weight: 700; }
.price.free { color: var(--green); }
.btn-add { border: 1px solid var(--purple-3); background: var(--purple-softer); color: var(--purple-2); font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 8px; display: inline-flex; align-items: center; gap: 5px; }
.btn-add svg { width: 14px; height: 14px; }
.btn-add:hover { background: var(--purple-soft); }

/* ============ TABS ============ */
.crumb { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 0 0 6px; }
.crumb:hover { color: var(--purple-2); }
.crumb svg { width: 15px; height: 15px; }
/* abas roláveis com "fade" na borda direita — no celular as últimas (Membros, Fotos)
   sumiam sem nenhuma indicação de que dava pra arrastar */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%); mask-image: linear-gradient(to right, #000 88%, transparent 100%); }
.tabs::-webkit-scrollbar { display: none; }
.tabs .tab { scroll-snap-align: start; flex: none; }
/* quando tudo cabe, não precisa do fade */
@media (min-width: 900px) { .tabs { -webkit-mask-image: none; mask-image: none; } }
.tabs::-webkit-scrollbar { display: none; }
.tab { white-space: nowrap; flex: none; }
.tab { border: none; background: none; padding: 11px 16px; font-size: 14px; font-weight: 600; color: var(--muted); position: relative; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--purple-2); }
.tab.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px; background: var(--purple-2); }

/* ============ ROTEIRO (timeline) ============ */
.day-block { margin-bottom: 26px; }
.day-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.day-num { width: 30px; height: 30px; border-radius: 9px; background: var(--purple-2); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.day-head h3 { font-size: 16px; font-weight: 700; }
.day-head span { color: var(--muted); font-size: 13px; }
.timeline { border-left: 2px dashed var(--border-strong); margin-left: 15px; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
/* card do roteiro: foto do ponto como fundo, selo de horario/categoria no topo, titulo em branco embaixo */
.item-card { position: relative; min-height: 132px; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 14px; background: linear-gradient(135deg, #1a1f3d, #2a1f4d); box-shadow: var(--shadow); }
.item-card::before { content: ""; position: absolute; left: -29px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--purple-2); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--purple-soft); }
.item-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.item-card-bg.noimg { display: grid; place-items: center; color: rgba(255,255,255,.3); }
.item-card-bg.noimg svg { width: 26px; height: 26px; }
.item-card-ov { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,12,30,.55) 0%, rgba(10,12,30,.15) 38%, rgba(10,12,30,.78) 100%); }
.item-card-top, .item-card-bottom { position: relative; z-index: 2; }
.item-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.item-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.item-badge:empty { display: none; }
/* sem horario: nada de "--:--"; quem pode editar ve um "+ horario" discreto que abre a edicao */
.item-time.unset { height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; }
button.item-time.unset { background: rgba(255,255,255,.14); backdrop-filter: blur(6px); border: 1px dashed rgba(255,255,255,.45); cursor: pointer; }
button.item-time.unset:hover { background: rgba(255,255,255,.26); border-color: #fff; }
.item-card-bottom h4 { font-size: 16px; font-weight: 800; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.4); margin-bottom: 8px; }
.item-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.item-price { font-size: 13px; font-weight: 700; color: #fff; }

/* ============ CARDS RESUMO / STAT ============ */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.stat .lbl { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.stat .lbl svg { width: 15px; height: 15px; color: var(--purple-2); }
.stat .val { font-size: 24px; font-weight: 800; margin-top: 8px; letter-spacing: -0.5px; }
.stat .val small { font-size: 13px; font-weight: 600; color: var(--muted); }

/* ============ GASTOS / DIVISÃO ============ */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 12px; }
.panel-head h3 { font-size: 16px; font-weight: 700; }
.panel-head .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.payer-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--purple-softer); border: 1px solid var(--purple-soft); padding: 5px 11px 5px 5px; border-radius: 30px; font-size: 12.5px; font-weight: 600; }
.payer-chip .av { width: 24px; height: 24px; }
.payer-chip b { color: var(--purple-2); }

/* toggle de visibilidade */
.visibility { display: flex; align-items: center; gap: 12px; }
.switch { position: relative; width: 42px; height: 24px; flex: none; }
.switch input { display: none; }
.switch .track { position: absolute; inset: 0; background: #d7d9e3; border-radius: 20px; transition: background 0.2s; }
.switch .thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.switch input:checked + .track { background: var(--purple-2); }
.switch input:checked + .track + .thumb { transform: translateX(18px); }
.visibility .txt small { display: block; color: var(--muted); font-size: 11.5px; }
.visibility .txt b { font-size: 13px; font-weight: 600; }

/* tabela de pagamentos */
.pay-table { width: 100%; overflow-x: auto; }
table.pay { width: 100%; border-collapse: collapse; min-width: 560px; }
table.pay th, table.pay td { padding: 12px 14px; text-align: left; font-size: 13px; border-bottom: 1px solid var(--border); }
table.pay th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; }
table.pay th.month, table.pay td.month { text-align: center; }
table.pay tr:last-child td { border-bottom: none; }
.mrow { display: flex; align-items: center; gap: 10px; }
.mrow .role { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 5px; }
.role.owner { background: linear-gradient(135deg, #3b2bd9, #8b5cf6); color: #fff; padding: 3px 10px; }
.role.membro { background: #eceef4; color: #6a7086; }
.mrow .who small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 400; }
.mrow .who b { font-size: 13.5px; font-weight: 600; }

.paycell { width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid var(--border-strong); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; margin: 0 auto; transition: all 0.16s; }
.paycell svg { width: 18px; height: 18px; opacity: 0; transition: opacity 0.16s; }
.paycell.pago { background: var(--green); border-color: var(--green); color: #fff; }
.paycell.pago svg { opacity: 1; }
.paycell.pendente { border-style: dashed; color: var(--muted-2); }
.paycell.clickable { cursor: pointer; }
.paycell.clickable:hover { border-color: var(--purple-3); }
.owner-cell { color: var(--green); font-size: 12px; font-weight: 700; }

.month-prog { font-size: 11.5px; font-weight: 600; color: var(--muted); display: block; margin-top: 3px; }

/* barra "ver como" */
.viewas { display: inline-flex; background: #eef0f6; border-radius: 9px; padding: 3px; gap: 3px; }
.viewas button { border: none; background: transparent; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 6px 12px; border-radius: 7px; }
.viewas button.active { background: #fff; color: var(--purple-2); box-shadow: var(--shadow); }
.hint { font-size: 12.5px; color: var(--muted); background: var(--purple-softer); border: 1px solid var(--purple-soft); padding: 10px 14px; border-radius: 10px; margin-bottom: 18px; display: flex; gap: 8px; align-items: center; }
.hint svg { width: 16px; height: 16px; color: var(--purple-2); flex: none; }

/* ============ MEMBROS ============ */
/* banner do grupo: foto da viagem como fundo (igual aos cards de viagem/roteiro), degradê navy como fallback */
.group-hero { position: relative; display: flex; gap: 20px; align-items: center; overflow: hidden; height: 150px; border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); margin-bottom: 24px; background: linear-gradient(135deg, var(--navy-900), var(--brand-royal) 70%, #4a3fd6); }
.group-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.group-hero-bg.noimg { display: grid; place-items: center; color: rgba(255,255,255,.35); }
.group-hero-bg.noimg svg { width: 32px; height: 32px; }
.group-hero-ov { position: absolute; inset: 0; z-index: 1; background: linear-gradient(120deg, rgba(11,15,56,.82), rgba(11,15,56,.5) 55%, rgba(11,15,56,.25)); }
.group-hero > * { position: relative; z-index: 2; }
.group-photo { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; flex: none; background: rgba(255,255,255,.12); backdrop-filter: blur(6px); border: 2px solid rgba(255,255,255,.25); position: relative; overflow: hidden; }
.group-photo .cam { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.group-photo .cam svg { width: 20px; height: 20px; }
@media (max-width: 640px) { .group-photo { width: 56px; height: 56px; border-radius: 12px; } .group-photo .cam svg { width: 16px; height: 16px; } }
.group-info h2 { font-size: 21px; font-weight: 800; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.3); }
.group-info .loc { color: rgba(255,255,255,.85); font-size: 13.5px; margin-top: 5px; display: flex; align-items: center; gap: 6px; }
.group-info .loc svg { width: 15px; height: 15px; color: var(--brand-cyan); }
.avatars-stack { display: flex; margin-top: 14px; }
.avatars-stack .av { margin-left: -8px; border: 2px solid var(--navy-900); }
.avatars-stack .av:first-child { margin-left: 0; }
.avatars-stack .more { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-left: -8px; border: 2px solid var(--navy-900); }
.group-hero-cta { margin-left: auto; flex: none; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.3); }
.group-hero-cta:hover { background: rgba(255,255,255,.26); }

.members-list { display: flex; flex-direction: column; gap: 10px; }
.member-row { position: relative; display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow); transition: box-shadow .15s, transform .15s; }
.member-row:hover { box-shadow: 0 8px 20px rgba(20,22,40,.08); transform: translateY(-1px); }
.member-row.is-owner { border-left: 3px solid var(--purple-2); }
.member-row .who { flex: 1; }
.member-row .who b { font-size: 14px; font-weight: 600; }
.member-row .who small { display: block; color: var(--muted); font-size: 12px; }

/* avatar genérico */
.av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 700; overflow: hidden; }
.av img { width: 100%; height: 100%; object-fit: cover; }

.btn-primary { background: var(--purple-2); color: #fff; border: none; height: 38px; padding: 0 18px; border-radius: 999px; font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; box-shadow: 0 8px 20px rgba(59, 43, 217, 0.28); transition: filter .18s, box-shadow .18s, transform .12s; }
.btn-primary:hover { background: var(--purple); box-shadow: 0 10px 24px rgba(59, 43, 217, 0.32); }
.btn-primary:active { transform: scale(.97); }
.btn-primary svg { width: 16px; height: 16px; }

.empty-note { text-align: center; color: var(--muted); padding: 60px 20px; font-size: 14px; }

@media (max-width: 720px) {
  .content { padding: 20px 16px 32px; }
  .group-hero { flex-direction: column; text-align: center; height: auto; min-height: 150px; }
}

/* ============ CHIPS DE ESTADO ============ */
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip { border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted);
  font-size: 12.5px; font-weight: 700; padding: 7px 13px; border-radius: 999px; transition: all 0.16s; }
.chip:hover { border-color: var(--purple-3); color: var(--purple-2); }
.chip.active { background: var(--purple-2); border-color: transparent; color: #fff; }
.chip.dim { opacity: 0.45; }

/* ============ BOTÕES MINI / LINHAS ============ */
.mini { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--muted); font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px; transition: all 0.16s; }
.mini:hover { border-color: var(--purple-3); color: var(--purple-2); }
.mini svg { width: 14px; height: 14px; }
.mini.primary { background: var(--purple-2); border-color: transparent; color: #fff; }
.mini.primary:hover { background: var(--purple); color: #fff; }
/* degradê da marca só no assistente de IA (colar roteiro → criar viagem) */
.btn-ai, .mini.primary.btn-ai, .btn-primary.btn-ai { background: var(--brand-grad); }
.btn-ai:hover, .mini.primary.btn-ai:hover, .btn-primary.btn-ai:hover { background: var(--brand-grad); filter: brightness(1.07); }
.mini.danger:hover { border-color: var(--red); color: var(--red); }
.mini.upload { cursor: pointer; }
.row-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }

/* ============ ROTEIRO (pool + itens) ============ */
.pool { background: var(--purple-softer); border: 1px solid var(--purple-soft); border-radius: var(--radius); padding: 16px; margin-bottom: 24px; }
.pool-head { font-size: 13.5px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.pool-head svg { width: 16px; height: 16px; stroke: var(--purple-2); fill: var(--purple-2); }
.pool-head span { color: var(--muted); font-weight: 400; }
.pool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.pool-card { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--border); border-radius: 11px; padding: 8px; }
.pool-thumb { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: #e6e9ff; flex: none; }
.pool-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pool-info { flex: 1; min-width: 0; } .pool-info b { font-size: 13px; } .pool-info small { display: block; color: var(--muted); font-size: 11.5px; }
.pool-actions { display: flex; gap: 5px; }

.day-total { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--purple-2); }
.item-btns { display: flex; gap: 5px; }
.item-btns .mini { background: rgba(255,255,255,.16); backdrop-filter: blur(6px); color: #fff; border-color: rgba(255,255,255,.3); }
.item-btns .mini:hover { background: rgba(255,255,255,.3); }
.item-btns .mini.danger:hover { background: var(--red); border-color: var(--red); color: #fff; }
.empty-day { color: var(--muted); font-size: 13px; padding: 8px 2px; }

/* ============ FACES (quem pagou) ============ */
.faces-strip { display: flex; flex-wrap: wrap; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.face { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 66px; text-align: center; }
.face .av { border: 3px solid #d7d9e3; }
.face.full .av { border-color: var(--green); }
.face.partial .av { border-color: var(--amber); }
.face.none .av { border-color: #e2867f; }
.face-name { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; max-width: 66px; text-overflow: ellipsis; }
.face-tag { font-size: 10px; font-weight: 700; color: var(--muted); }
.face.full .face-tag { color: var(--green); }
.face.partial .face-tag { color: var(--amber); }
.face.none .face-tag { color: var(--red); }

/* ============ APPLY BAR + CARTÕES DE PAGAMENTO ============ */
/* dividir gastos: total → divide igual */
.split-bar { background: var(--purple-softer); border: 1px solid var(--purple-soft); border-radius: 14px; padding: 16px; margin: 16px 0; }
.split-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.split-head svg { width: 18px; height: 18px; color: var(--purple-2); flex: none; }
.split-head b { font-weight: 800; color: var(--text); }
.split-head span { flex-basis: 100%; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.split-row { display: flex; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
.split-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 700; }
.split-row label:first-child { flex: 1; min-width: 150px; }
.split-row input { border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 15px; font-weight: 600; background: var(--surface); color: var(--text); }
.split-row input:focus { outline: none; border-color: var(--purple-2); box-shadow: 0 0 0 3px rgba(59, 43, 217, .14); }
.split-info { font-size: 13.5px; margin-bottom: 12px; color: var(--text); }
.split-info b { color: var(--purple-2); font-weight: 800; }
.split-bar .btn-primary { width: 100%; justify-content: center; }
.apply-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; margin-bottom: 16px; font-size: 13px; font-weight: 600; }
.apply-bar label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 500; }
.apply-bar input { width: 74px; height: 32px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 8px; font-family: inherit; font-size: 13px; }
.apply-bar input:focus { outline: none; border-color: var(--purple-2); box-shadow: 0 0 0 3px rgba(124,58,237,0.14); }

.pay-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.pay-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--surface); box-shadow: var(--shadow); }
.pay-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pay-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pay-progress .bar { flex: 1; height: 7px; background: #eceef4; border-radius: 6px; overflow: hidden; }
.pay-progress .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), #37c99a); border-radius: 6px; transition: width 0.3s; }
.pay-progress span { font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.parcelas { display: flex; flex-wrap: wrap; gap: 8px; }
.parcela { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 1.5px solid var(--border-strong); background: var(--surface);
  border-radius: 10px; padding: 8px 11px; min-width: 96px; text-align: left; transition: all 0.16s; }
.parcela .pnum { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.parcela .pval { font-size: 14px; font-weight: 700; color: var(--text); }
.parcela .pstate { font-size: 10.5px; font-weight: 700; color: var(--muted-2); display: inline-flex; align-items: center; gap: 3px; text-transform: uppercase; }
.parcela .pstate svg { width: 11px; height: 11px; }
.parcela.pendente { border-style: dashed; }
.parcela.pago { border-color: var(--green); background: #eafaf4; }
.parcela.pago .pstate { color: var(--green); }
.parcela.clickable { cursor: pointer; }
.parcela.clickable:hover { border-color: var(--purple-3); box-shadow: 0 4px 10px rgba(124,58,237,0.1); }

/* ============ MODAL ============ */
.modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(20, 18, 40, 0.5); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.show { display: flex; }
.modal-card { width: 100%; max-width: 560px; background: var(--surface); border-radius: 18px; box-shadow: 0 30px 80px rgba(20,10,50,0.4); overflow: hidden; max-height: 90vh; display: flex; flex-direction: column; }
.modal-card.sm { max-width: 400px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-head h3 { display: flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 700; }
.modal-head h3 svg { width: 17px; height: 17px; flex: none; }
.modal-body { padding: 18px 20px; overflow-y: auto; overflow-x: hidden; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); }
/* link "Como faço isso?" dentro de uma frase, nos cartões do perfil público */
.pf-help-link { display: inline; border: none; background: none; padding: 0; margin-left: 4px; color: var(--purple-2); font-weight: 700; font-size: inherit; text-decoration: underline; cursor: pointer; }
.pf-help-link:hover { color: var(--purple); }
.pf-empty .pf-help-link { display: block; margin: 10px auto 0; font-size: 13px; }
/* guia interativo "como marco uma viagem como pública" */
.pg-foot { justify-content: space-between; }
.pg-body { display: flex; flex-direction: column; gap: 16px; }
.pg-dots { display: flex; gap: 6px; justify-content: center; }
.pg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); transition: background .2s, width .2s; }
.pg-dot.on { width: 20px; border-radius: 4px; background: var(--purple-2); }
.pg-dot.done { background: var(--purple-3); }
.pg-step-n { display: inline-block; font-size: 11px; font-weight: 800; color: var(--purple-2); background: var(--purple-softer); padding: 2px 8px; border-radius: 999px; margin-bottom: 6px; }
.pg-step h4 { font-size: 16px; font-weight: 800; margin-top: 4px; }
.pg-step p { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin-top: 6px; }
.pg-mock { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 76px; }
.pg-mock-btns { gap: 8px; flex-wrap: wrap; }
.pg-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 7px 10px; border-radius: 999px; white-space: nowrap; }
.pg-btn svg { width: 13px; height: 13px; }
.pg-btn-ghost { background: var(--surface); border: 1px solid var(--border-strong); color: var(--muted); }
.pg-btn-primary { background: var(--purple-2); color: #fff; }
.pg-btn-more { background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); width: 30px; height: 30px; padding: 0; justify-content: center; }
.pg-tab { font-size: 12.5px; font-weight: 700; color: var(--muted); padding: 6px 10px; border-bottom: 2px solid transparent; }
.pg-tab.active { color: var(--purple-2); border-color: var(--purple-2); }
.pg-mock-menu { flex-direction: column; align-items: stretch; gap: 4px; padding: 8px; }
.pg-menu-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; padding: 9px 11px; border-radius: 9px; background: var(--purple-softer); color: var(--purple-2); }
.pg-menu-item svg { width: 14px; height: 14px; }
.pg-menu-dim { background: none; color: var(--muted-2); }
.pg-menu-danger { color: var(--red); }
.pg-mock-check { flex-direction: column; gap: 4px; }
.pg-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; }
.pg-check-box { width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--border-strong); display: grid; place-items: center; flex: none; }
.pg-check-box.on { background: var(--purple-2); border-color: var(--purple-2); color: #fff; }
.pg-check-box svg { width: 12px; height: 12px; }
.pg-mock-check small { color: var(--muted); font-size: 11px; }
.pg-mock-done { color: var(--green); font-weight: 800; font-size: 14px; }
.pg-mock-done svg { width: 24px; height: 24px; }
.pg-pulse { animation: pgPulse 1.6s ease-in-out infinite; }
@keyframes pgPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(59,43,217,.35); } 50% { box-shadow: 0 0 0 6px rgba(59,43,217,0); } }

/* minmax(0,1fr) e min-width:0 evitam a rolagem horizontal: sem isso um campo com
   conteúdo/placeholder longo empurra a coluna e estoura o modal */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; }
.form-grid > * { min-width: 0; }
.form-grid input, .form-grid select { max-width: 100%; }
.hint-inline { display: block; color: var(--muted); font-size: 11.5px; font-weight: 500; margin-top: 4px; }
.form-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.form-grid label.wide { grid-column: 1 / -1; }
.form-grid input, .form-grid select { height: 40px; border: 1px solid var(--border-strong); border-radius: 10px; padding: 0 12px; font-family: inherit; font-size: 14px; color: var(--text); background: var(--surface); }
.form-grid input:focus, .form-grid select:focus { outline: none; border-color: var(--purple-2); box-shadow: 0 0 0 3px rgba(124,58,237,0.14); }
/* ============================================================
   GASTOS — modelo "quem pagou o quê"
   ============================================================ */
.gx-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .gx-grid { grid-template-columns: 1fr; } }

/* card de saldo (escuro, protagonista da tela) */
.gx-saldo { position: relative; overflow: hidden; border-radius: 20px; padding: 22px 22px 18px; color: #fff;
  background: linear-gradient(145deg, #241b3a 0%, #2f2150 52%, #3b2566 100%); box-shadow: 0 16px 40px -18px rgba(40, 20, 90, .7); }
.gx-saldo::after { content: ''; position: absolute; right: -60px; top: -70px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(167, 139, 250, .38), transparent 68%); pointer-events: none; }
.gxs-top { display: flex; flex-direction: column; gap: 2px; }
.gxs-lbl { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .65); }
.gxs-val { font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gx-saldo.is-pos .gxs-val { color: #4ade80; }
.gx-saldo.is-neg .gxs-val { color: #fca5a5; }
.gxs-sub { font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.gxs-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.gxs-pills span { display: flex; flex-direction: column; gap: 1px; padding: 8px 13px; border-radius: 12px; background: rgba(255, 255, 255, .1); }
.gxs-pills i { font-style: normal; font-size: 10.5px; font-weight: 600; color: rgba(255, 255, 255, .6); text-transform: uppercase; letter-spacing: .04em; }
.gxs-pills b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gxs-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.gxs-actions .btn-primary { background: #fff; color: var(--purple); }
.gxs-actions .btn-primary:hover { background: #f3f0ff; }
.gxs-actions .btn-primary svg { stroke: var(--purple); }
.mini.ghost-light { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: #fff; }
.mini.ghost-light:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .4); color: #fff; }
.mini.ghost-light svg { stroke: #fff; }

/* lista de gastos por dia */
.gx-lista { margin-top: 16px; display: grid; gap: 14px; }
.gx-daygroup { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.gx-dayhead { display: flex; align-items: center; gap: 6px; padding: 11px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 12.5px; }
.gx-dayhead b { font-weight: 700; }
.gx-dayhead span { color: var(--muted); }
.gx-dayhead em { margin-left: auto; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.gx-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .15s; }
.gx-item:last-child { border-bottom: none; }
.gx-item:hover { background: var(--purple-softer); }
.gx-cat { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 17px; }
.gx-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gx-item-info b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-item-info small { color: var(--muted); font-size: 12px; }
.gx-item-val { flex: none; text-align: right; display: flex; flex-direction: column; }
.gx-item-val b { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gx-item-val small { font-size: 11.5px; font-weight: 600; }
.imp-verde { color: var(--green); }
.imp-vermelho { color: var(--red); }
.imp-neutro { color: var(--muted-2); }
/* alvo de toque de 44px (WCAG 2.5.8) */
.gx-item-del { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: none; background: none;
  border-radius: 10px; color: var(--muted-2); cursor: pointer; opacity: 0; transition: opacity .15s, color .15s, background .15s; }
.gx-item:hover .gx-item-del, .gx-item-del:focus-visible { opacity: 1; }
.gx-item-del:hover { background: #fdecec; color: var(--red); }
.gx-item-del svg { width: 16px; height: 16px; }
@media (hover: none) { .gx-item-del { opacity: 1; } }
.gx-item-acerto { opacity: .78; cursor: default; }
.gx-item-acerto:hover { background: transparent; }

/* painéis da coluna da direita */
.gx-col-side { display: grid; gap: 14px; }
.gx-panel { padding: 16px 18px; }
.gx-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.gx-panel-head h3 { font-size: 14.5px; font-weight: 700; }
.gx-panel-head small { color: var(--muted); font-size: 11.5px; }

/* barra empilhada por categoria */
.gx-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--border); }
.gx-bar i { display: block; height: 100%; }
.gx-leg { display: grid; gap: 6px; margin-top: 12px; }
.gx-leg span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.gx-leg span i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.gx-leg span b { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }

/* saldos: barra divergente (zero no meio) */
.gx-saldos { display: grid; gap: 9px; }
.gx-sal { display: grid; grid-template-columns: 82px 1fr 84px; align-items: center; gap: 9px; font-size: 12.5px; }
.gx-sal.eu .gx-sal-nome { font-weight: 700; color: var(--purple-2); }
.gx-sal-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-sal-bar { position: relative; height: 16px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.gx-sal-bar i { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; }
.gx-sal-bar i.pos { background: var(--green); }
.gx-sal-bar i.neg { background: var(--red); }
.gx-sal-bar .zero { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border-strong); }
.gx-sal-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* acertar contas */
.gx-acertos { display: grid; gap: 10px; }
.gx-acerto { padding: 11px 13px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); }
.gx-acerto.sou-devedor { border-color: var(--red); background: #fdf1f1; }
.gx-acerto.sou-credor { border-color: var(--green); background: #f0faf6; }
.gx-acerto-txt { font-size: 13px; line-height: 1.45; }
.gx-acerto-txt .val { font-variant-numeric: tabular-nums; }
.gx-acerto-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.gx-acerto-btns .mini { min-height: 34px; font-size: 12px; padding: 0 11px; }
.gx-tudocerto { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--green); }
.gx-tudocerto span { color: var(--muted); }
.gx-tudocerto svg { width: 18px; height: 18px; }

/* orçamento */
.gx-orc-num { display: flex; align-items: baseline; gap: 6px; }
.gx-orc-num b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gx-orc-num span { color: var(--muted); font-size: 13px; }
.gx-orc-bar { height: 10px; border-radius: 999px; background: var(--border); overflow: hidden; margin: 9px 0 7px; }
.gx-orc-bar i { display: block; height: 100%; border-radius: 999px; transition: width .4s ease, background .3s; }
.gx-orc-bar.ok i { background: var(--purple-2); }
.gx-orc-bar.medio i { background: var(--amber); }
.gx-orc-bar.alto i { background: var(--red); }
.gx-orc-sub { color: var(--muted); font-size: 12px; }
.gx-orc-vazio { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin-bottom: 10px; }

/* estado vazio */
.gx-empty { text-align: center; padding: 54px 24px; }
.gx-empty-ill { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 24px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--purple-soft), #e0f2fe); color: var(--purple-2); }
.gx-empty-ill svg { width: 34px; height: 34px; }
.gx-empty h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.gx-empty p { max-width: 460px; margin: 8px auto 20px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.gx-empty-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.skel-block { background: linear-gradient(90deg, #ececf2, #f5f5f9, #ececf2); background-size: 200% 100%; border-radius: 20px; animation: skpulse 1.2s ease-in-out infinite; }

/* bottom sheet de adicionar gasto */
.gsheet { max-width: 520px; }
.gsheet-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; overflow-x: hidden; } /* minmax(0) = nada estoura a largura do modal */
.gsheet-val { flex-wrap: wrap; }
.gsheet-val .field-err-msg { flex-basis: 100%; }
.gsheet-val { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: 15px; background: var(--surface-2); }
.gsheet-val:focus-within { border-color: var(--purple-2); box-shadow: 0 0 0 3px rgba(59, 43, 217, .14); }
.gv-cifrao { font-size: 20px; font-weight: 700; color: var(--muted); }
.gsheet-val input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit;
  font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; padding: 0; }
.gsheet-desc { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.gsheet-desc input { height: 42px; border: 1px solid var(--border-strong); border-radius: 11px; padding: 0 12px; font-family: inherit; font-size: 14px; color: var(--text); background: var(--surface); }
.gsheet-desc input:focus { outline: none; border-color: var(--purple-2); box-shadow: 0 0 0 3px rgba(59, 43, 217, .14); }
.gsheet-blk { display: grid; gap: 8px; }
.gsheet-lbl { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.gs-todos { margin-left: auto; border: none; background: none; color: var(--purple-2); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: underline; }
.gsheet-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.gs-cat { border: 1px solid var(--border-strong); background: var(--surface); border-radius: 999px; padding: 8px 13px; min-height: 38px;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; transition: all .18s; }
.gs-cat:hover { border-color: var(--cc); }
.gs-cat.on { background: color-mix(in srgb, var(--cc) 14%, white); border-color: var(--cc); color: var(--cc); }
.gsheet-avs { display: flex; flex-wrap: wrap; gap: 7px; }
.gsheet-av { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 9px; min-width: 62px; min-height: 44px;
  border: 1px solid var(--border); background: var(--surface); border-radius: 13px; cursor: pointer; transition: all .18s; }
.gsheet-av span { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.gsheet-av:hover { border-color: var(--purple-3); }
.gsheet-av.on { border-color: var(--purple-2); background: var(--purple-softer); box-shadow: 0 0 0 2px rgba(59, 43, 217, .12); }
.gsheet-av.on span { color: var(--purple-2); }
.gsheet-av:not(.on) .av, .gsheet-av:not(.on) img { filter: grayscale(1); opacity: .5; }
.gsheet-previa { padding: 11px 14px; border-radius: 12px; background: var(--purple-softer); border: 1px dashed var(--purple-3);
  font-size: 13px; color: var(--purple); text-align: center; }
.gsheet-previa b { font-weight: 800; font-variant-numeric: tabular-nums; }
.gsheet-mais summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--purple-2); }
/* no celular o sheet cola embaixo, estilo app */
@media (max-width: 560px) {
  .gsheet { position: fixed; left: 0; right: 0; bottom: 0; max-width: none; border-radius: 22px 22px 0 0; max-height: 92vh; }
  .gsheet-val input { font-size: 28px; }
}

/* ====== Menus da barra de ações do roteiro ("+ Adicionar" e "⋯") ====== */
.rot-actions { align-items: center; gap: 12px; flex-wrap: wrap; }
.act-right { display: flex; align-items: center; gap: 8px; }
.menu-wrap { position: relative; }
.mini.icon-only { width: 40px; padding: 0; display: grid; place-items: center; font-size: 19px; line-height: 1; font-weight: 800; letter-spacing: 1px; }
.menu-pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 220px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 13px; box-shadow: 0 18px 44px rgba(20,22,40,.18); }
.menu-pop.right { left: auto; right: 0; }
.menu-item { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px; padding: 9px 11px; border: none; background: none;
  border-radius: 9px; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); text-align: left; cursor: pointer; }
.menu-item:hover { background: var(--purple-softer); color: var(--purple-2); }
.menu-item svg { width: 16px; height: 16px; flex: none; }
/* destrutivo separado do benigno por um divisor, em vermelho */
.menu-item.danger { color: var(--red); }
.menu-item.danger:hover { background: #fdecec; color: var(--red); }
.menu-item.danger:first-of-type { margin-top: 5px; border-top: 1px solid var(--border); padding-top: 12px; border-radius: 0 0 9px 9px; }

/* card "Já tem um roteiro pronto?" — substitui o balão flutuante que cobria os botões */
.onboard-paste { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px;
  background: var(--purple-softer); border: 1px solid var(--purple-3); border-radius: 14px; text-align: left; }
.onboard-paste .op-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--purple-2), var(--purple-3)); color: #fff; }
.onboard-paste .op-av svg { width: 17px; height: 17px; }
.onboard-paste .op-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.onboard-paste .op-txt b { font-size: 13.5px; }
.onboard-paste .op-txt small { color: var(--muted); font-size: 12px; line-height: 1.35; }
@media (max-width: 560px) { .onboard-paste { flex-direction: column; align-items: flex-start; } }



/* acessibilidade: existem 14 "outline:none" no arquivo (todos em :focus de campo/botão).
   Isto devolve um anel visível para quem navega por teclado, sem voltar o outline no clique. */
:focus-visible { outline: 3px solid var(--purple-3); outline-offset: 2px; border-radius: 6px; }
.topnav-item:focus-visible, .tab:focus-visible, .mini:focus-visible, .btn-primary:focus-visible { outline-offset: 3px; }
/* spinner das etapas ("Lendo os dias…", "Achando o destino…") */
.spin-dot { display: inline-block; width: 12px; height: 12px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spinDot .7s linear infinite; vertical-align: -1px; margin-right: 6px; }
@keyframes spinDot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin-dot { animation-duration: 2s; } }
.field-err { border-color: var(--red) !important; }
.field-err:focus { box-shadow: 0 0 0 3px rgba(220,75,82,.14) !important; }
.field-err-msg { display: block; color: var(--red); font-size: 11.5px; font-weight: 600; margin-top: 4px; }

.img-picker { margin-top: 16px; display: flex; gap: 14px; }
.img-preview { width: 120px; height: 90px; border-radius: 12px; background: var(--purple-softer); border: 1px solid var(--purple-soft); flex: none; overflow: hidden; display: grid; place-items: center; }
.img-preview img { width: 100%; height: 100%; object-fit: cover; }
.img-preview span { color: var(--purple-3); font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.img-preview span svg { width: 22px; height: 22px; }
.img-tabs { flex: 1; min-width: 0; }
.img-tab-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.img-tab-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.gimg-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.gimg { width: 60px; height: 46px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; flex: none; padding: 0; cursor: pointer; background: #e6e9ff; }
.gimg img { width: 100%; height: 100%; object-fit: cover; }
.gimg.sel { border-color: var(--purple-2); }

/* ============ CONFIG ============ */
.config-grid { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.form-grid label.check-row { flex-direction: row; align-items: center; gap: 9px; font-weight: 600; }
.form-grid label.check-row input { width: 18px; height: 18px; margin: 0; accent-color: var(--purple-2); flex: none; }
.form-grid label.check-row small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; }
/* Zona de perigo: no fim da página, longe de "Sair da conta" */
.danger-zone { margin-top: 20px; border-color: #f3c3c6; }
.danger-zone .panel-head h3 { color: var(--red); }
.dz-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 20px; }
.dz-row b { font-size: 14px; }
.dz-row small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.dz-row .mini.danger { border-color: var(--red); color: var(--red); }
.dz-row .mini.danger:hover { background: var(--red); color: #fff; }
.trip-ended-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 7px 12px; }
.trip-ended-note svg { width: 14px; height: 14px; }
.cfg-photo { padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.cfg-photo b { font-size: 16px; margin-top: 6px; } .cfg-photo small { color: var(--muted); }
.photo-big { width: 120px; height: 120px; border-radius: 50%; position: relative; overflow: hidden; cursor: pointer; background: var(--purple-soft); display: grid; place-items: center; }
.photo-big img { width: 100%; height: 100%; object-fit: cover; }
.photo-big .cam { color: var(--purple-2); } .photo-big .cam svg { width: 34px; height: 34px; }
.photo-edit { position: absolute; bottom: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; background: var(--purple-2); color: #fff; display: grid; place-items: center; border: 2px solid #fff; }
.photo-edit svg { width: 15px; height: 15px; }
.pais-flag { margin-top: 8px; font-size: 13px; font-weight: 600; background: var(--purple-softer); padding: 6px 12px; border-radius: 20px; }
.cfg-form { padding: 22px; }
.uf-block { margin-top: 18px; }
.uf-label { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.uf-label b { color: var(--purple-2); }
.uf-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.uf-chip { width: 42px; height: 34px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 700; border-radius: 8px; transition: all 0.14s; }
.uf-chip:hover { border-color: var(--purple-3); }
.uf-chip.on { background: var(--purple-2); border-color: var(--purple-2); color: #fff; }
.cfg-form .btn-primary { margin-top: 20px; }

/* ============ TOAST ============ */
.toast { position: fixed; z-index: 200; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  display: flex; align-items: center; gap: 12px;
  background: var(--navy-900); color: #fff; font-size: 13.5px; font-weight: 600; padding: 12px 20px; border-radius: 14px; border: 1px solid rgba(224, 231, 255, 0.14);
  box-shadow: 0 12px 30px rgba(0,0,0,0.3); opacity: 0; pointer-events: none; transition: all 0.28s cubic-bezier(0.16,1,0.3,1); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast-act { flex: none; background: none; border: none; color: var(--brand-cyan); font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; padding: 0; text-decoration: underline; }
.toast-act:hover { color: #fff; }

/* botão adicionado */
.btn-add.added { background: #eafaf4; border-color: var(--green); color: var(--green); cursor: default; }
.btn-add.added svg { stroke: var(--green); }

/* CTA no card de cidade */
.city-cta { margin-top: 11px; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.city-cta svg { width: 14px; height: 14px; color: var(--purple-2); }
.city-cta b { color: var(--purple-2); display: inline-flex; align-items: center; gap: 3px; }
.city-cta b svg { width: 13px; height: 13px; }

/* barra flutuante "montar roteiro" */
.fab-bar { position: sticky; bottom: 14px; margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--navy-900); color: #fff; border: 1px solid rgba(224, 231, 255, 0.12); border-radius: 16px; padding: 12px 16px;
  box-shadow: 0 16px 36px rgba(11, 15, 56, 0.35); z-index: 15; }
.fab-bar > span { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.fab-bar > span svg { width: 16px; height: 16px; fill: var(--brand-cyan); stroke: var(--brand-cyan); }
.fab-bar > span b { color: var(--brand-cyan); }
.fab-bar .btn-primary svg { width: 15px; height: 15px; }

/* papéis */
.role.roteirista { background: #e5dbff; color: #6941c6; }
.role.convidado { background: #eceef4; color: #6a7086; }
.member-ctrl { display: flex; align-items: center; gap: 8px; }
.role-select { height: 34px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 8px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--surface); }
.role-select:focus { outline: none; border-color: var(--purple-2); box-shadow: 0 0 0 3px rgba(124,58,237,0.14); }
.you { font-size: 10px; font-weight: 700; color: var(--purple-2); background: var(--purple-soft); padding: 1px 6px; border-radius: 5px; vertical-align: middle; }

/* anel de bandeiras na foto de perfil */
.photo-wrap { position: relative; width: 200px; height: 200px; display: grid; place-items: center; margin: 0 auto; }
.photo-wrap .photo-big { position: relative; z-index: 2; }
.photo-ring { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ring-badge { position: absolute; transform: translate(-50%, -50%); background: #fff; border: 1px solid var(--border-strong);
  box-shadow: 0 3px 8px rgba(0,0,0,0.12); border-radius: 8px; min-width: 26px; height: 24px; padding: 0 5px;
  display: grid; place-items: center; font-size: 14px; font-weight: 800; }
.ring-badge.uf { color: var(--purple-2); font-size: 11px; background: var(--purple-soft); border-color: transparent; cursor: default; }
/* bandeiras reais (Windows não desenha emoji de bandeira) */
.flag-img { object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.08); vertical-align: middle; border-radius: 3px; }
.ring-badge.flag { padding: 2px; background: #fff; }
.ring-badge .flag-img.ring-flag { width: 26px; height: 18px; display: block; }
.ring-badge.uf .uf-flag { display: none; width: 24px; height: 17px; }
.ring-badge.uf:hover .uf-code { display: none; }
.ring-badge.uf:hover .uf-flag { display: block; }
.pais-flag { display: inline-flex; align-items: center; gap: 7px; }
.pais-flag .flag-img { width: 22px; height: 16px; }
.pais-chip { display: inline-flex; align-items: center; gap: 6px; }
.pais-chip .flag-img { width: 20px; height: 14px; }

/* toggles menores + países */
.visited-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mini-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.switch.sm { width: 36px; height: 20px; }
.switch.sm .thumb { width: 14px; height: 14px; }
.switch.sm input:checked + .track + .thumb { transform: translateX(16px); }
.pais-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pais-chip { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 12.5px; font-weight: 600; padding: 7px 11px; border-radius: 9px; transition: all 0.14s; }
.pais-chip:hover { border-color: var(--purple-3); }
.pais-chip.on { background: var(--purple-soft); border-color: var(--purple-2); color: var(--purple-2); }

/* ============ MINHAS VIAGENS ============ */
.viagens-intro { display: flex; align-items: center; gap: 28px; background: linear-gradient(120deg, #f3efff, #eef2ff); border: 1px solid var(--purple-soft); border-radius: 20px; padding: 22px 28px; margin-bottom: 26px; }
.folder-svg { width: 190px; height: auto; flex: none; overflow: visible; filter: drop-shadow(0 14px 24px rgba(90, 50, 170, 0.22)); }
.intro-txt h1 { font-size: 26px; font-weight: 800; }
.intro-txt p { color: var(--muted); font-size: 14px; margin: 6px 0 16px; max-width: 420px; }

.trips-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.trip-folder { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; margin-top: 10px; }
.trip-folder:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(30,20,60,0.12); border-color: var(--purple-3); }
.tf-del { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border-strong); background: var(--surface); border-radius: 9px; color: var(--muted-2); cursor: pointer; opacity: 0.6; transition: opacity 0.16s, color 0.16s, border-color 0.16s; z-index: 2; }
.trip-folder:hover .tf-del { opacity: 1; }
.tf-del:hover { color: var(--red); border-color: var(--red); background: #fff5f5; }
.tf-del svg { width: 15px; height: 15px; }
.tf-tab { position: absolute; top: -10px; left: 20px; width: 78px; height: 16px; border-radius: 8px 8px 0 0; background: linear-gradient(135deg, #3b2bd9, #8b5cf6); }
.tf-badges { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.tf-status { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 6px; }
.tf-status.live { background: #dcfce7; color: #15803d; }
.tf-status.soon { background: #e0eaff; color: #2b57c9; }
.tf-status.done { background: #eceef4; color: #6a7086; }
.tf-status.pend { background: #ffe9c8; color: #a15c10; }
.tf-body h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.tf-meta { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.tf-meta svg { width: 14px; height: 14px; color: var(--purple-2); }
.tf-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.tf-photos { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 600; }
.tf-photos svg { width: 15px; height: 15px; }

/* fotos da viagem */
.photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.photo-cell { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; background: #e6e9ff; }
.photo-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.photo-cell:hover img { transform: scale(1.05); }
.photo-del { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(20,18,40,0.6); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity 0.2s; }
.photo-cell:hover .photo-del { opacity: 1; }
.photo-del svg { width: 14px; height: 14px; }
.ghostp { background: var(--surface) !important; color: var(--purple-2) !important; border: 1px solid var(--purple-3) !important; }
.ghostp:hover { background: var(--purple-softer) !important; }

/* ============ ROTEIRO: banner + share + editar ============ */
.past-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--purple-softer); border: 1px solid var(--purple-soft); border-left: 3px solid var(--purple-2); border-radius: 12px; padding: 10px 14px; margin-bottom: 16px; font-size: 13px; color: var(--text); }
.past-banner > div:first-child { display: flex; align-items: center; gap: 8px; }
.past-banner svg { width: 15px; height: 15px; fill: none; stroke: var(--purple-2); vertical-align: -3px; flex: none; }
.past-banner .mini { padding: 6px 10px; font-size: 12px; }
.pb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-cluster { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-whats { display: inline-flex; align-items: center; gap: 8px; background: #25d366; color: #fff; border: none; font-family: inherit; font-size: 13.5px; font-weight: 700; padding: 9px 16px; border-radius: 10px; text-decoration: none; transition: background 0.18s; }
.btn-whats:hover { background: #1fb855; }
.btn-whats svg { width: 17px; height: 17px; stroke: #fff; }

/* aviso de parcela */
.alert-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; background: #fff7ed; border: 1px solid #ffe4c2; border-radius: 11px; padding: 12px 14px; margin-bottom: 16px; font-size: 13px; font-weight: 600; color: #8a5a12; }
.alert-bar svg { width: 17px; height: 17px; stroke: var(--amber); }
.alert-bar input { width: 62px; height: 32px; border: 1px solid #f0c890; border-radius: 8px; padding: 0 8px; font-family: inherit; font-size: 14px; font-weight: 700; text-align: center; background: #fff; }
.alert-bar input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(217,144,42,0.18); }
.alert-bar small { flex-basis: 100%; color: #b07d34; font-weight: 500; }

/* prévia WhatsApp */
.whats-preview { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #e5ddd5; }
.wp-head { display: flex; align-items: center; gap: 8px; background: #075e54; color: #fff; padding: 8px 12px; font-size: 13px; }
.wp-head svg { width: 16px; height: 16px; stroke: #fff; }
.wp-head span { color: #cfe9e4; font-size: 11px; margin-left: auto; }
.wp-body { background: #dcf8c6; margin: 12px; padding: 12px 14px; border-radius: 10px; font-family: inherit; font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; color: #1b1e28; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }

/* ============ GASTOS: seletor grupo/individual ============ */
.gasto-switch { display: inline-flex; background: #eef0f6; border-radius: 12px; padding: 4px; gap: 4px; margin-bottom: 20px; }
.gseg { display: inline-flex; align-items: center; gap: 7px; border: none; background: transparent; color: var(--muted); font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 9px 16px; border-radius: 9px; transition: all 0.18s; }
.gseg svg { width: 16px; height: 16px; }
.gseg:hover { color: var(--text); }
.gseg.active { background: #fff; color: var(--purple-2); box-shadow: var(--shadow); }

.val.pos { color: var(--green); }
.val.neg { color: var(--red); }
.val small { font-size: 13px; font-weight: 600; color: var(--muted); }

/* insights */
.insights { background: linear-gradient(120deg, #f3efff, #eef6ff); border: 1px solid var(--purple-soft); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 22px; }
.ins-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--purple); margin-bottom: 12px; }
.ins-title svg { width: 17px; height: 17px; stroke: var(--purple-2); }
.ins-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ins { background: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.9); border-radius: 11px; padding: 12px 14px; }
.ins b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.4px; }
.ins span { font-size: 11.5px; color: var(--muted); }

/* categorias */
.blk { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); margin-bottom: 12px; }
.cats { display: flex; flex-direction: column; gap: 12px; }
.cat-row { display: flex; align-items: center; gap: 12px; }
.cat-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; font-size: 19px; }
.cat-ic svg { width: 18px; height: 18px; }
.cat-ic.sm { width: 34px; height: 34px; border-radius: 9px; font-size: 17px; }
.cat-ic.sm svg { width: 16px; height: 16px; }

/* atalhos rápidos por categoria */
.cat-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 50ch; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .16s; }
.cat-chip .ce { font-size: 15px; }
.cat-chip:hover { border-color: var(--purple-3); background: var(--purple-softer); color: var(--purple-2); transform: translateY(-1px); }
.cat-chip.new { color: var(--purple-2); border-style: dashed; }
.cat-chip.new svg { width: 15px; height: 15px; }
/* toggle do resumo (categoria/dia/lugar) */
.blk-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.resumo-switch { display: inline-flex; background: #eef0f6; border-radius: 10px; padding: 3px; gap: 3px; }
.rseg { border: none; background: transparent; color: var(--muted); font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: all .16s; }
.rseg:hover { color: var(--text); }
.rseg.active { background: #fff; color: var(--purple-2); box-shadow: var(--shadow); }
.cat-bar-wrap { flex: 1; min-width: 0; }
.cat-bar-head { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }
.cat-bar-head b { font-weight: 600; } .cat-bar-head span { color: var(--muted); font-weight: 600; }
.cat-bar { height: 8px; background: #eceef4; border-radius: 6px; overflow: hidden; }
.cat-bar i { display: block; height: 100%; border-radius: 6px; transition: width 0.3s; }

/* barra de moeda */
.moeda-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 10px 14px; margin-bottom: 18px; font-size: 13px; font-weight: 600; color: var(--muted); }
.moeda-bar svg { width: 17px; height: 17px; color: var(--purple-2); }
.moeda-bar select { height: 34px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 8px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text); background: #fff; }
.moeda-bar label { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 500; }
.moeda-bar input { width: 84px; height: 34px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 8px; font-family: inherit; font-size: 13px; font-weight: 600; }
.moeda-bar input:focus, .moeda-bar select:focus { outline: none; border-color: var(--purple-2); box-shadow: 0 0 0 3px rgba(124,58,237,0.14); }
.moeda-bar small { flex-basis: 100%; color: var(--muted-2); font-weight: 500; }

/* acerto final (settle-up) */
.settle-list { padding: 8px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.settle-row { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 10px 14px; }
.settle-row .sname { font-size: 13.5px; font-weight: 600; }
.settle-row .arrow { color: var(--muted-2); display: inline-flex; }
.settle-row .arrow svg { width: 16px; height: 16px; }
.settle-val { margin-left: auto; font-size: 15px; font-weight: 800; color: var(--amber); }
.settle-row .btn-whats.sm { padding: 7px 12px; font-size: 12.5px; }
.settle-row .btn-whats.sm svg { width: 15px; height: 15px; }
.settle-ok { display: flex; align-items: center; gap: 8px; color: var(--green); font-weight: 600; font-size: 14px; padding: 10px 4px; }
.settle-ok svg { width: 18px; height: 18px; stroke: var(--green); }

/* lançamentos */
.gi-list { display: flex; flex-direction: column; gap: 8px; }
.gi-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px; box-shadow: var(--shadow); }
.gi-info { flex: 1; min-width: 0; } .gi-info b { font-size: 14px; font-weight: 600; } .gi-info small { display: block; color: var(--muted); font-size: 12px; }
.gi-val { font-size: 15px; font-weight: 700; margin-right: 4px; }
.mini.paid { background: #eafaf4; border-color: var(--green); color: var(--green); }
.mini.inline { padding: 3px 7px; }

/* ============ MAPA DO ROTEIRO ============ */
.map-panel .panel-head { flex-wrap: wrap; gap: 12px; }
.map-filter { margin: 0; }
.map-filter .chip { display: inline-flex; align-items: center; }
.day-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.roteiro-map { height: 440px; width: 100%; position: relative; z-index: 1; }
.map-note { padding: 12px 20px; color: var(--muted); font-size: 12.5px; display: flex; gap: 8px; align-items: center; }
.map-note svg { width: 16px; height: 16px; color: var(--purple-2); stroke: var(--purple-2); }
.map-fallback { display: grid; place-items: center; height: 100%; color: var(--muted); font-size: 14px; text-align: center; padding: 30px; }
.map-pin-wrap { background: transparent !important; border: none !important; }
.map-pin { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); color: #fff; border: 2.5px solid #fff; box-shadow: 0 3px 8px rgba(20,20,40,0.35); }
.map-pin i { transform: rotate(45deg); font-style: normal; font-weight: 700; font-size: 13px; }
.leaflet-popup-content { font-family: "Inter", sans-serif; font-size: 13px; }
.leaflet-container { font-family: "Inter", sans-serif; }

/* ============ TÍTULO MULTILÍNGUE ============ */
.lang-title { overflow: hidden; min-height: 1.1em; }
.lang-title #langPhrase { display: inline-block; will-change: transform, opacity; }

/* ============ AMIGOS ============ */
.friends-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.friend-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 18px 18px; box-shadow: var(--shadow); cursor: pointer; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.friend-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(30,20,60,0.1); border-color: var(--purple-3); }
.friend-card-accent { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--purple-2); }
.friend-top { display: flex; align-items: center; gap: 12px; }
.friend-id b { font-size: 15px; font-weight: 700; display: block; }
.friend-id small { color: var(--muted); font-size: 12.5px; }
.friend-stats-row { display: flex; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.friend-stats-row span { font-size: 12px; color: var(--muted); }
.friend-stats-row b { color: var(--text); font-family: var(--f-display); font-size: 15px; margin-right: 4px; }
.friend-meta { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; margin-top: 12px; }
.friend-meta svg { width: 14px; height: 14px; color: var(--purple-2); }
.friend-flags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.mini-uf { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: var(--purple-2); background: var(--purple-soft); padding: 3px 7px; border-radius: 6px; }
.mini-uf .flag-img { width: 18px; height: 13px; }
.mini-uf.more { background: #eceef4; color: var(--muted); }
.follow-btn { width: 100%; margin-top: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: inherit; font-size: 13px; font-weight: 700; padding: 9px 14px; border-radius: 10px; background: var(--purple-2); color: #fff; border: 1px solid var(--purple-2); transition: all 0.18s; }
.follow-btn:hover { background: var(--purple); }
.follow-btn svg { width: 15px; height: 15px; stroke: currentColor; }
.follow-btn.on { background: var(--purple-softer); color: var(--purple-2); border-color: var(--purple-soft); }
.follow-btn.on:hover { background: var(--purple-soft); }

/* detalhe do amigo */
.friend-hero { display: flex; align-items: center; gap: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); margin-bottom: 22px; }
.friend-hero-info h2 { font-size: 22px; font-weight: 800; }
.friend-hero-info small { color: var(--muted); font-size: 13.5px; }
.friend-stats { display: flex; gap: 18px; margin-top: 10px; }
.friend-stats span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.friend-stats svg { width: 15px; height: 15px; color: var(--purple-2); }
.friend-flags2 { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
/* no desktop o hero e flex-row: botao seguir dimensiona pelo conteudo (no mobile vira coluna e volta a 100%) */
@media (min-width: 721px) { .friend-hero .follow-btn { width: auto; flex: none; margin-top: 0; } }

.ftrip { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin-bottom: 16px; }
.ftrip-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ftrip-cover { width: 70px; height: 70px; border-radius: 12px; overflow: hidden; flex: none; background: #e6e9ff; }
.ftrip-cover img { width: 100%; height: 100%; object-fit: cover; }
.ftrip-info b { font-size: 16px; font-weight: 700; }
.ftrip-photos { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.fp { width: 150px; height: 110px; border-radius: 10px; overflow: hidden; flex: none; background: #e6e9ff; }
.fp img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.fp:hover img { transform: scale(1.06); }
.fp-more { display: grid; place-items: center; width: 84px; font-weight: 800; color: var(--brand, #3b2bd9); background: linear-gradient(135deg, #e6e9ff, #e0e7ff); }

/* ============ MODELOS / TEMPLATES ============ */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.tpl-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s; }
.tpl-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(30,20,60,0.1); }
.tpl-img { height: 140px; position: relative; background: linear-gradient(135deg,#e6e9ff,#e0e7ff); }
.tpl-img img { width: 100%; height: 100%; object-fit: cover; }
.tpl-tag { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,0.92); color: var(--purple-2); font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 7px; }
.tpl-body { padding: 14px 15px 16px; }
.tpl-body h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 6px; }

/* ============ BADGES / CONQUISTAS ============ */
.badges { margin-top: 18px; }
.badges-title { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.badges-title svg { width: 15px; height: 15px; stroke: var(--purple-2); fill: var(--purple-2); }
.badges-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.badge { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border-strong); border-radius: 10px; padding: 7px 11px; font-size: 12.5px; font-weight: 600; color: var(--muted-2); background: var(--surface); opacity: 0.55; }
.badge .be { font-size: 16px; filter: grayscale(1); }
.badge.got { opacity: 1; color: var(--purple-2); border-color: var(--purple-soft); background: var(--purple-softer); }
.badge.got .be { filter: none; }

/* ============ PIX ============ */
.pix-code { background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: 10px; padding: 12px 14px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; line-height: 1.5; word-break: break-all; color: var(--text); max-height: 160px; overflow-y: auto; }

/* ============ RETROSPECTIVA ============ */
.recap-canvas { width: 100%; max-width: 300px; height: auto; border-radius: 16px; box-shadow: 0 14px 40px rgba(40,10,90,0.25); }

/* ============ PÁGINAS PÚBLICAS (hash-route) ============ */
#publicRoot { position: fixed; inset: 0; z-index: 90; overflow-y: auto; background: var(--bg); }
/* páginas públicas (perfil, roteiro, institucional): mesma casca do app — barra navy, corpo claro, cartões */
#publicRoot { position: relative; z-index: 0; min-height: 100vh; background: var(--bg); }
.pub-top { position: sticky; top: 0; z-index: 5; }
.pub-top .topbar-actions { margin-left: auto; }
.pub-top .avatar-top { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-royal); color: #fff; font-weight: 800; display: grid; place-items: center; cursor: pointer; overflow: hidden; }
.pub-wrap { position: relative; z-index: 1; }
/* perfil público */
.pf-card { padding: 26px 28px; }
.pf-head { display: flex; align-items: center; gap: 22px; }
.pf-id { min-width: 0; }
.pf-id h1 { font-family: var(--f-display); font-size: 26px; font-weight: 800; color: var(--text); line-height: 1.15; }
.pf-id p { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--muted); font-size: 14px; margin-top: 4px; }
.pf-stats { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; }
.pf-stats span { font-size: 13px; color: var(--muted); }
.pf-stats b { font-family: var(--f-display); font-size: 17px; color: var(--text); margin-right: 5px; }
.pf-follow { width: auto; margin: 0 0 0 auto; align-self: flex-start; flex: none; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.pf-card .badges { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.pf-sec { margin: 26px 0 14px; }
.pf-trips { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.pf-trip { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.pf-trip:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(11, 15, 56, .12); }
.pf-trip:focus-visible { outline: 2px solid var(--purple-2); outline-offset: 2px; }
.pf-cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, var(--navy-700), var(--brand-royal) 60%, #5b8cff); }
.pf-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.pf-cover .pf-cover-sym { inset: auto; left: 50%; top: 50%; width: 46px; height: auto; transform: translate(-50%, -50%); opacity: .55; z-index: 0; }
.pf-photos { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; background: rgba(11, 15, 56, .72); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; backdrop-filter: blur(6px); }
.pf-photos svg { width: 13px; height: 13px; }
.pf-body { padding: 12px 14px 14px; }
.pf-body b { display: block; font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.pf-body small { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.pf-body small svg { width: 13px; height: 13px; color: var(--purple-2); flex: none; }
.pf-empty { display: flex; align-items: center; gap: 12px; padding: 22px 24px; color: var(--muted); font-size: 14px; }
.pf-empty svg { width: 22px; height: 22px; color: var(--purple-2); flex: none; }
@media (max-width: 640px) { .pf-head { flex-direction: column; text-align: center; } .pf-id p, .pf-stats { justify-content: center; } .pf-follow { margin: 12px auto 0; } .pf-card { padding: 22px 18px; } }
.pub-hero { position: relative; z-index: 1; height: 300px; overflow: hidden; }
.pub-hero img { width: 100%; height: 100%; object-fit: cover; }
.pub-hero-fallback { position: absolute; inset: 0; background: linear-gradient(135deg, var(--navy-900), var(--brand-royal) 70%, #5b8cff); }
.pub-hero-ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,16,30,0.82), rgba(15,16,30,0.05)); }
.pub-hero-cap { position: absolute; left: 0; right: 0; bottom: 26px; max-width: 900px; margin: 0 auto; padding: 0 24px; color: #fff; }
.pub-hero-cap h1 { font-size: clamp(26px, 5vw, 42px); font-weight: 800; }
.pub-hero-cap p { display: flex; align-items: center; gap: 6px; opacity: 0.92; font-size: 14px; margin-top: 6px; }
.pub-hero-cap p svg { width: 15px; height: 15px; }
.pub-badge { display: inline-block; background: var(--purple-2); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 7px; margin-bottom: 10px; }
.pub-wrap { max-width: 960px; margin: 0 auto; padding: 28px 24px 70px; }
.pub-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--navy-700); color: #fff; border: 1px solid rgba(224, 231, 255, 0.1); border-radius: 16px; padding: 22px 24px; margin-top: 26px; }
.pub-cta b { font-family: var(--f-display); font-size: 17px; font-weight: 800; display: block; }
.pub-cta span { color: rgba(255, 255, 255, 0.72); font-size: 13.5px; }

@media (max-width: 720px) {
  .config-grid { grid-template-columns: 1fr; }
  .modal-body .form-grid { grid-template-columns: 1fr; }
  .viagens-intro { flex-direction: column; text-align: center; }
  .friend-hero { flex-direction: column; text-align: center; }
}

/* Tela de carregamento → virou a ABERTURA de marca (.tz-intro), no bloco IDENTIDADE EM MOVIMENTO no fim do arquivo */

/* ============================================================
   POLISH: foco de teclado + skeleton de imagem
   ============================================================ */
:where(button, a, input, select, textarea, .nav-item, .topnav-item, .avatar-top, .city-card, .friend-card, .trip-folder, [data-city], [data-amigo], [data-trip]):focus-visible {
  outline: 2px solid var(--purple-2); outline-offset: 2px;
}
.city-img, .spot-img, .tpl-img, .pub-hero { position: relative; }
.city-img::after, .spot-img::after, .tpl-img::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.5) 50%, transparent 80%); background-size: 200% 100%;
  animation: shimmer 1.5s linear 4 forwards;
}
.city-img img, .spot-img img, .tpl-img img { position: relative; z-index: 1; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .mini-plane { animation: none !important; }
  .city-img::after, .spot-img::after, .tpl-img::after { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ============================================================
   RESPONSIVO (celular)
   ============================================================ */
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 900px) {
  .pay-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .topbar { padding: 0 12px; height: 52px; }
  .topnav { display: none; }
  .view-title { margin-left: 0; flex: 1; max-width: none; }
  .topbar { gap: 10px; }
  .pill.primary { font-size: 12px; padding: 0 12px; }
  .content { padding: 16px 12px 44px; }
  .page-head h1 { font-size: 21px; }
  .page-head p { font-size: 13px; }

  .city-grid, .gallery, .tpl-grid, .friends-grid, .pay-cards, .photos-grid, .trips-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 13px 14px; } .stat .val { font-size: 20px; }

  .hero-city { height: 180px; } .hero-city .cap h1 { font-size: 24px; }
  .gasto-switch { width: 100%; } .gseg { flex: 1; justify-content: center; font-size: 13px; padding: 10px 6px; }

  .item-card { min-height: 112px; padding: 10px 12px; }
  .item-card-bottom h4 { font-size: 14.5px; }
  .item-badge { font-size: 10.5px; height: 22px; }

  .settle-row { flex-wrap: wrap; row-gap: 8px; } .settle-val { margin-left: 0; }
  .settle-row .btn-whats.sm { margin-left: auto; }

  .group-hero { flex-direction: column; text-align: center; height: auto; min-height: 150px; }
  .group-hero .btn-primary { margin-left: 0 !important; }
  .avatars-stack { justify-content: center; }

  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pub-top { padding: 10px 14px; } .pub-top .btn-primary { font-size: 12px; padding: 8px 12px; }
  .pub-wrap { padding: 20px 14px 50px; }
  .pub-hero { height: 220px; }
  .modal-overlay { padding: 12px; } .modal-card { max-height: 90vh; }
  .friends-stack, .avatars-stack .more { }
  .ins-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
  .stat-row, .ins-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   NAVEGAÇÃO MOBILE — abas inferiores + FAB (estilo app, tema Mitra)
   ============================================================ */
.mtabs { display: none; }
.fab { display: none; }
.avatar-top { cursor: pointer; }

@media (max-width: 640px) {
  /* espaço pro FAB (56px) + barra de abas: antes o botão cobria a última linha da lista */
  .content { padding-bottom: 168px; }
  /* tabela de viagens não rola mais pro lado: no celular sobram poucas colunas,
     o min-width é que forçava a rolagem horizontal */
  /* alvo de toque mínimo de 44px */
  .mini, .tab, .btn-primary, .pill, .gseg { min-height: 44px; }

  .mtabs {
    display: flex; position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 40;
    background: rgba(11, 15, 56, 0.92); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(224, 231, 255, 0.14); border-radius: 22px; padding: 7px; gap: 3px;
    box-shadow: 0 14px 34px rgba(11, 15, 56, 0.45); max-width: calc(100vw - 20px);
  }
  /* ícone + texto sempre (antes só a aba ativa mostrava o nome) */
  .mtab { border: none; background: transparent; color: rgba(224, 231, 255, 0.7); display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 10px; min-width: 66px; border-radius: 14px; transition: background .2s, color .2s; }
  .mtab svg { width: 21px; height: 21px; }
  .mtab span { display: inline; font-size: 10.5px; font-weight: 700; white-space: nowrap; letter-spacing: .01em; }
  .mtab.active { background: var(--purple-2); color: #fff; box-shadow: 0 6px 16px rgba(59, 43, 217, 0.45); }

  .fab:not([hidden]) { display: grid; place-items: center; position: fixed; right: 16px; bottom: 90px; z-index: 41;
    width: 56px; height: 56px; border-radius: 50%; background: var(--purple-2); color: #fff; border: none;
    box-shadow: 0 12px 26px rgba(59, 43, 217, 0.5); transition: transform .12s; }
  .fab svg { width: 26px; height: 26px; stroke: #fff; }
  .fab:active { transform: scale(0.93); }

  .fab-bar { bottom: 86px; }
  .toast { bottom: 98px; }
  body.has-fab .dash-head [data-newtrip] { display: none; }
}
/* card escuro da viagem: foto de fundo, selo de status, destino e participantes (igual aos cards do roteiro) */
.trip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 24px; }
.trip-card { position: relative; min-height: 190px; border-radius: 16px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; background: linear-gradient(135deg, #1a1f3d, #2a1f4d); box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s; }
.trip-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20,22,40,.28); }
.trip-card:active { transform: translateY(0) scale(.99); }
.trip-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.trip-card-bg.noimg { display: grid; place-items: center; color: rgba(255,255,255,.3); }
.trip-card-bg.noimg svg { width: 26px; height: 26px; }
.trip-card-ov { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,12,30,.45) 0%, rgba(10,12,30,.12) 30%, rgba(10,12,30,.86) 100%); }
.trip-card-top, .trip-card-bottom { position: relative; z-index: 2; }
.trip-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.trip-card-top .tf-status { flex: none; }
.trip-card .dt-more { background: rgba(255,255,255,.14); backdrop-filter: blur(6px); border-color: rgba(255,255,255,.3); color: #fff; }
.trip-card .dt-more:hover, .trip-card .dt-more[aria-expanded="true"] { background: rgba(255,255,255,.3); border-color: #fff; color: #fff; }
.trip-card-bottom h3 { font-size: 17px; font-weight: 800; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.4); margin-bottom: 6px; }
.trip-card-meta { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.trip-card-meta span { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.88); font-size: 12.5px; }
.trip-card-meta svg { width: 13px; height: 13px; flex: none; }
.trip-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.trip-card-people .avg .av { border-color: #1a1f3d; }
.trip-card-stat { display: inline-flex; align-items: center; gap: 5px; color: #fff; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); padding: 5px 10px; border-radius: 999px; }
.trip-card-stat svg { width: 12px; height: 12px; }
@media (max-width: 640px) { .trip-grid { grid-template-columns: 1fr; gap: 12px; } }

/* ============ INTEGRAÇÃO API: fallback de imagem + skeleton ============ */
.hero-fallback { position: absolute; inset: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #3b2bd9, #8b5cf6 45%, #06d6ff); }
.real-badge { color: var(--green); font-weight: 700; font-size: 12px; }
/* hero navy da página Amigos — mesma casca escura usada no roteiro/cards de viagem */
.amg-hero { position: relative; border-radius: 18px; overflow: hidden; padding: 26px 28px; margin-bottom: 4px; background: linear-gradient(120deg, var(--navy-900), var(--brand-royal) 75%, #4a3fd6); box-shadow: 0 12px 30px rgba(11,15,56,.25); }
.amg-hero-bg { position: absolute; inset: 0; background: radial-gradient(circle at 85% -20%, rgba(6,214,255,.28), transparent 55%); pointer-events: none; }
.amg-hero-in { position: relative; z-index: 1; }
.amg-hero-in h1 { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 24px; font-weight: 800; color: #fff; }
.amg-hero-in h1 svg { width: 24px; height: 24px; color: var(--brand-cyan); }
.amg-hero-in p { margin-top: 8px; color: rgba(255,255,255,.82); font-size: 14px; }
.amg-hero-in .real-badge { color: var(--brand-cyan); margin-left: 4px; }
/* estado vazio compacto (sem os 60px de respiro do .empty-note genérico, que deixava buraco na tela) */
.fi-empty2 { padding: 18px; text-align: center; color: var(--muted); font-size: 13.5px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 12px; }
.spot-img.skeleton { background: #ececf2; animation: skpulse 1.2s ease-in-out infinite; }
.sk-line { height: 12px; background: #ececf2; border-radius: 6px; margin-top: 10px; animation: skpulse 1.2s ease-in-out infinite; }
.sk-line.short { width: 60%; }
@keyframes skpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.loadmore-wrap { text-align: center; padding: 22px 0 6px; }
.loadmore-wrap .btn-primary { padding: 12px 26px; }

/* ---------- Onboarding do roteiro vazio (criar viagem) ---------- */
.onboard { max-width: 560px; margin: 10px auto 0; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 30px 28px; box-shadow: var(--shadow); }
.onboard-hero { text-align: center; }
.onboard-badge { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(135deg, var(--purple-2), var(--purple-3)); color: #fff; margin-bottom: 14px; }
.onboard-badge svg { width: 26px; height: 26px; }
.onboard-hero h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.onboard-hero p { color: var(--muted); font-size: 13.5px; margin-top: 6px; line-height: 1.5; }
.onboard-form { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.onboard-form > label.wide { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.onboard-form > label.wide input { height: 44px; border: 1px solid var(--border-strong); border-radius: 11px; padding: 0 14px; font-family: inherit; font-size: 15px; color: var(--text); background: var(--surface); }
.onboard-form > label.wide input:focus { outline: none; border-color: var(--purple-2); box-shadow: 0 0 0 3px rgba(59, 43, 217, 0.14); }
.onboard-suggest { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: -4px; }
.onboard-suggest > span { font-size: 12px; font-weight: 700; color: var(--muted-2); }
.onboard-suggest small { color: var(--muted-2); font-size: 12px; }
.chip.suggest { border-color: var(--purple-soft); background: var(--purple-softer); color: var(--purple-2); font-weight: 700; cursor: pointer; }
.chip.suggest:hover { background: var(--purple-soft); border-color: var(--purple-3); }
.chip.suggest svg { width: 13px; height: 13px; }
.onboard-actions { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.onboard-actions .btn-primary { height: 44px; flex: 1; justify-content: center; min-width: 200px; }
.onboard-actions .mini { height: 44px; padding: 0 16px; }
.onboard-tip { margin-top: 16px; display: flex; align-items: center; gap: 7px; color: var(--muted-2); font-size: 12px; justify-content: center; text-align: center; }
.onboard-tip svg { width: 14px; height: 14px; flex: none; }
.onboard-discard { display: flex; align-items: center; gap: 6px; width: fit-content; margin: 14px auto 0; background: none; border: none; color: var(--muted-2); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 6px 10px; border-radius: 8px; }
.onboard-discard:hover { color: var(--red); background: #fff5f5; }
.onboard-discard svg { width: 14px; height: 14px; }
@media (max-width: 560px) { .onboard { padding: 24px 18px; } .onboard-actions .btn-primary { min-width: 0; } }

.muted-price { color: var(--muted-2); font-weight: 500; }

/* ===== Minhas viagens — pasta 3D que abre no clique (Uiverse byllzz, adaptado) ===== */
.trips-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 30px 16px; margin-top: 24px; align-items: end; }
.trip3d { display: flex; flex-direction: column; align-items: center; padding-top: 88px; }
.trip3d-cap { margin-top: 16px; text-align: center; max-width: 210px; }
.trip3d-cap .t3-top { display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap; }
.trip3d-cap b { font-size: 14px; font-weight: 700; }
.trip3d-cap small { display: flex; align-items: center; gap: 5px; justify-content: center; color: var(--muted); font-size: 11.5px; margin-top: 5px; }
.trip3d-cap small svg { width: 12px; height: 12px; flex: none; }

.folder-card { width: 170px; height: 130px; perspective: 1200px; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; -webkit-tap-highlight-color: transparent; }
.folder-toggle { display: none; }
.folder-card .hint-text { position: absolute; top: -22px; right: 8px; font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--purple-2); pointer-events: none; animation: floatHint 2.2s ease-in-out infinite; }
@keyframes floatHint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.folder-toggle:checked ~ .hint-text { opacity: 0; }
.folder-card .tf-del { position: absolute; top: -20px; left: 2px; opacity: .7; z-index: 110; }
.folder-card:hover .tf-del { opacity: 1; }

.folder-container { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.23,1,0.32,1); backface-visibility: hidden; will-change: transform; }
.folder-toggle:checked ~ .folder-container { transform: rotateX(10deg) rotateY(-5deg); }
.folder-back { position: absolute; bottom: 0; width: 100%; filter: drop-shadow(0 10px 20px rgba(80,40,140,0.35)); }
.folder-front-wrapper { position: absolute; bottom: -7px; width: 100%; z-index: 90; transform-origin: bottom; transition: transform 0.5s cubic-bezier(0.175,0.885,0.32,1.275); }
.folder-label { position: absolute; top: 10px; left: 12px; width: 30px; height: 4px; background: rgba(255,255,255,0.55); border-radius: 10px; }

.folder-card .counter { position: absolute; top: -80px; right: -6px; background: var(--purple-3); padding: 4px 9px; border-radius: 50px; display: flex; align-items: center; gap: 7px; box-shadow: 0 10px 20px rgba(80,40,140,0.3), inset 0 1px 1px rgba(255,255,255,0.25); transform: scale(0) translateY(20px); opacity: 0; transition: all 0.5s cubic-bezier(0.34,1.56,0.64,1); z-index: 100; }
.folder-toggle:checked ~ .folder-container .counter { transform: scale(1) translateY(0); opacity: 1; transition-delay: 0.2s; }
.folder-card .status-dot { width: 6px; height: 6px; background: #34d399; border-radius: 50%; position: relative; box-shadow: 0 0 10px #34d399; }
.folder-card .status-dot::after { content: ""; position: absolute; inset: 0; background: #34d399; border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3); opacity: 0; } }
.folder-card .counter-label { font-size: 8px; font-weight: 800; color: rgba(255,255,255,0.85); text-transform: uppercase; }
.folder-card .counter-number { font-size: 12px; font-weight: 900; color: #fff; }

.folder-card .file { position: absolute; bottom: 6px; left: 10%; width: 80%; height: 84px; border-radius: 8px; overflow: hidden; border: none; padding: 0; font-family: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 4px 12px rgba(0,0,0,0.25); transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55); z-index: 0; }
.file-1 { background: linear-gradient(135deg,#8b5cf6,#2a1fb5); z-index: 25; transition-delay: .15s; }
.file-2 { background: linear-gradient(135deg,#22c58a,#12936a); z-index: 24; transition-delay: .1s; }
.file-3 { background: linear-gradient(135deg,#38bdf8,#0e91c9); z-index: 23; transition-delay: .05s; }
.file-4 { background: linear-gradient(135deg,#fb923c,#ea6a1e); z-index: 22; transition-delay: 0s; }
.folder-card .shine { position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transform: skewX(-20deg); }
.folder-toggle:checked ~ .folder-container .shine { left: 150%; transition: left 0.8s ease-in-out; transition-delay: 0.3s; }

.folder-card .file-head { position: absolute; top: 0; left: 0; right: 0; height: 24px; display: flex; align-items: center; gap: 6px; padding: 0 10px; color: #fff; font-size: 10.5px; font-weight: 800; opacity: 0; transform: translateY(4px); transition: all 0.3s ease 0.35s; }
.folder-card .file-head svg { width: 14px; height: 14px; flex: none; }
.folder-card .file-head span { white-space: nowrap; }
.folder-card .file-head em { margin-left: auto; font-style: normal; font-size: 8.5px; font-weight: 700; opacity: .82; white-space: nowrap; }
.folder-toggle:checked ~ .folder-container .file-head { opacity: 1; transform: translateY(0); }

.folder-toggle:checked ~ .folder-container .folder-front-wrapper { transform: rotateX(-50deg); }
.folder-toggle:checked ~ .folder-container .file-1 { transform: translateY(-92px) rotate(-9deg) translateX(-14px) translateZ(20px); }
.folder-toggle:checked ~ .folder-container .file-2 { transform: translateY(-66px) rotate(7deg) translateX(16px) translateZ(10px); }
.folder-toggle:checked ~ .folder-container .file-3 { transform: translateY(-40px) rotate(-12deg) translateX(-8px); }
.folder-toggle:checked ~ .folder-container .file-4 { transform: translateY(-16px) rotate(10deg) translateX(10px); }
.folder-toggle:checked ~ .folder-container .file:hover { filter: brightness(1.08); }
.folder-toggle:checked ~ .folder-container .file-1:hover { transform: translateY(-100px) rotate(-9deg) translateX(-14px) translateZ(20px); }
.folder-toggle:checked ~ .folder-container .file-2:hover { transform: translateY(-74px) rotate(7deg) translateX(16px) translateZ(10px); }
.folder-toggle:checked ~ .folder-container .file-3:hover { transform: translateY(-48px) rotate(-12deg) translateX(-8px); }
.folder-toggle:checked ~ .folder-container .file-4:hover { transform: translateY(-24px) rotate(10deg) translateX(10px); }
@media (prefers-reduced-motion: reduce) { .folder-container, .folder-front-wrapper, .folder-card .file { transition-duration: .01ms; } }

/* ===== Explorar: barra de filtro (estado à esquerda, busca à direita) ===== */
.explore-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0 6px; }
.uf-select { height: 42px; border: 1px solid var(--border-strong); border-radius: 11px; background: var(--surface); color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 0 34px 0 14px; cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2714%27 height=%2714%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%237c3aed%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%276 9 12 15 18 9%27/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.uf-select:focus { outline: none; border-color: var(--purple-2); box-shadow: 0 0 0 3px rgba(59, 43, 217, .14); }
.searchbar.sb-explore { width: 300px; max-width: 100%; margin: 0; }
@media (max-width: 620px) { .explore-bar { flex-direction: column-reverse; align-items: stretch; } .searchbar.sb-explore, .uf-select { width: 100%; } }

/* resultados de PONTO TURÍSTICO na busca do explorar */
.spot-results { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px; box-shadow: var(--shadow); }
.spot-res-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--purple-2); padding: 2px 4px 4px; }
.spot-res-head svg { width: 14px; height: 14px; }
.spot-row { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; padding: 8px; border: 1px solid transparent; border-radius: 12px; background: transparent; cursor: pointer; font-family: inherit; transition: background .12s, border-color .12s; }
.spot-row:hover { background: var(--purple-softer); border-color: var(--purple-3); }
.spot-thumb { width: 56px; height: 56px; flex: none; border-radius: 10px; overflow: hidden; background: var(--purple-soft); }
.spot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spot-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.spot-tx b { font-size: 14.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot-tx small { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); }
.spot-tx small svg { width: 12px; height: 12px; color: var(--purple-2); flex: none; }
.spot-go { flex: none; color: var(--purple-2); }
.spot-go svg { width: 18px; height: 18px; display: block; }

/* seções da home: Viagem nacional / internacional */
.dest-section { margin-bottom: 26px; }
.dest-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 0 14px; }
.dest-sec-head h2 { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.ds-emoji { font-size: 20px; }
.ds-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--purple); background: var(--purple-soft); padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.ds-tag svg { width: 12px; height: 12px; }

/* card de passagem animado (boarding pass) — no roteiro */
.container-cards-ticket { perspective: 1000px; margin-bottom: 16px; display: flex; justify-content: center; }
.card-ticket { position: relative; height: 150px; width: 100%; max-width: 320px; display: flex; color: #2d2d2d; background: #fff; border-radius: 1rem; transition: all .3s cubic-bezier(.175, .885, .32, 1.25); z-index: 1; gap: 1rem; animation: tk-card 10s infinite; overflow: hidden; box-shadow: var(--shadow); }
.card-ticket:hover { animation-play-state: paused; transform: translateY(-8px); }
.card-ticket:hover .content-ticket::after, .card-ticket:hover .content-ticket::before, .card-ticket:hover .container-icons { animation-play-state: paused; }
.card-ticket > svg:first-child { flex-shrink: 0; }
.card-ticket .ticket-barcode { flex-shrink: 0; width: 64px; margin: 14px 0; background-image: repeating-linear-gradient(90deg, #1b1e28 0 1px, transparent 1px 2px, #1b1e28 2px 4px, transparent 4px 5px, #1b1e28 5px 6px, transparent 6px 8px, #1b1e28 8px 9px, transparent 9px 11px); background-repeat: no-repeat; background-position: center; background-size: 24px 100%; }
.card-ticket .separator { position: absolute; top: 0; left: 50px; width: 16px; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 2; }
.card-ticket .span-lines { position: relative; display: flex; height: 100%; border-left: 2px dashed #e8e8e8; }
.card-ticket .span-lines::after { content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 16px; background: var(--bg); }
.card-ticket .span-lines::before { content: ""; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 1rem; background: var(--bg); }
.card-ticket .content-ticket { position: relative; justify-content: space-between; width: 100%; display: flex; }
.card-ticket .content-ticket::after { content: ""; position: absolute; top: 0; right: 0; background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .35)); transform: translateX(200px) scale(1.5); filter: blur(10px); width: 200px; height: 100%; animation: tk-shadow 10s infinite; }
.card-ticket .content-ticket::before { content: ""; position: absolute; top: 0; left: -100px; background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #fff, rgba(0, 0, 0, 0)); transform: translateX(-100px) scale(1.5) rotate(20deg); width: 80px; height: 100%; animation: tk-light 10s infinite; }
.card-ticket .content-data { display: flex; flex-direction: column; justify-content: space-between; width: 100%; padding: .625rem .75rem; gap: .25rem; }
.card-ticket .data-flex, .card-ticket .data-flex-col { width: 100%; display: flex; justify-content: space-between; gap: .25rem; }
.card-ticket .data-flex-col { padding-bottom: .25rem; flex-direction: column; }
.card-ticket .data { font-size: 10px; line-height: 12px; }
.card-ticket .data .title { color: #aeaeae; }
.card-ticket .data .subtitle { font-weight: 500; color: #212121; }
.card-ticket .destination { display: flex; align-items: center; justify-content: space-between; }
.card-ticket .dest { display: flex; flex-direction: column; }
.card-ticket .dest .country { font-size: 10px; line-height: 1; color: #aeaeae; }
.card-ticket .dest .acronym { font-weight: 700; color: #2d2d2d; }
.card-ticket .dest .hour { font-size: 10px; line-height: 12px; display: flex; align-items: center; gap: 4px; color: #2d2d2d; text-transform: capitalize; }
.card-ticket .container-icons { width: fit-content; padding: .625rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; animation: tk-color 10s infinite; }
.card-ticket .container-icons .icon { color: #fff; }
@keyframes tk-card { 0% { transform: translateZ(0); } 25% { transform: translateX(-8px) rotateY(-16deg); } 75% { transform: translateX(8px) rotateY(16deg); } 100% { transform: translateZ(0); } }
@keyframes tk-light { 25% { transform: translateX(450px) scale(1.5) rotate(25deg); } 50% { transform: translateX(-100px) scale(1.5) rotate(25deg); } }
@keyframes tk-shadow { 35% { transform: translateX(200px) scale(1.5); } 75% { transform: translateX(0) scale(1.5); } }
@keyframes tk-color { 0% { background: #ffbd44; } 10% { background: #fb6902; } 15%, 25% { background: #ff4141; } 35% { background: #fb6902; } 40% { background: #ffbd44; } 50% { background: #fb6902; } 55%, 75% { background: #ff4141; } 100% { background: #ffbd44; } }
@media (prefers-reduced-motion: reduce) { .card-ticket, .card-ticket .content-ticket::after, .card-ticket .content-ticket::before, .card-ticket .container-icons { animation: none !important; } }

/* régua de dias do roteiro: abas de texto simples (DIA 1 / DIA 2 / Todos), igual a um tab bar */
.roteiro-daystrip { display: flex; gap: 4px; align-items: center; overflow-x: auto; padding: 2px 2px 14px; margin-bottom: 2px; scrollbar-width: none; border-bottom: 1px solid var(--border); }
.roteiro-daystrip::-webkit-scrollbar { display: none; }
.rdc { flex: none; padding: 9px 4px; border: none; border-bottom: 2px solid transparent; background: none; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; color: var(--muted); transition: color .15s, border-color .15s; margin-bottom: -1px; }
.rdc + .rdc { margin-left: 14px; }
.rdc:hover { color: var(--text); }
.rdc.on { color: var(--purple-2); border-bottom-color: var(--purple-2); }
.rdc-all { text-transform: uppercase; }

/* ===== Roteiro em Fluxo (timeline zigue-zague robusto, sem posição absoluta) ===== */
.fx-flow { position: relative; display: flex; flex-direction: column; gap: 26px; max-width: 900px; margin: 12px auto; padding: 6px 0; }
.fx-flow::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
  background-image: linear-gradient(var(--purple-3) 60%, transparent 40%); background-size: 2px 14px; opacity: .5; animation: fxDashMove 1s linear infinite; }
@keyframes fxDashMove { to { background-position-y: 14px; } }
.fx-card { width: 47%; z-index: 1; }
.fx-left { align-self: flex-start; }
.fx-right { align-self: flex-end; }
.fx-card-in { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 9px; box-shadow: 0 12px 26px rgba(30, 20, 60, .12); transition: transform .25s; }
.fx-card:hover .fx-card-in { transform: translateY(-4px) scale(1.02); }
.fx-pin { display: block; width: 30px; height: 30px; margin: 3px auto 6px; }
.fx-pin svg { width: 26px; height: 26px; }
.fx-thumb { height: 140px; border-radius: 16px; overflow: hidden; background: var(--purple-softer); }
.fx-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fx-thumb.noimg { background: linear-gradient(135deg, var(--purple-3), var(--cyan)); }
.fx-panel { padding: 13px 8px 7px; }
.fx-num { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -1px; font-family: "Comic Sans MS", "Chalkboard SE", "Inter", cursive; display: block; margin-bottom: 8px; }
.fx-day { display: block; font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.fx-name { font-size: 19px; font-weight: 700; color: var(--text); line-height: 1.1; margin: 5px 0 4px; }
.fx-sub { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.fx-purple .fx-pin, .fx-purple .fx-num { color: var(--purple-2); }
.fx-cyan .fx-pin, .fx-cyan .fx-num { color: #0e91c9; }
.fx-orange .fx-pin, .fx-orange .fx-num { color: #ea6a1e; }
@media (max-width: 720px) { .fx-flow::before { left: 17px; } .fx-card { width: calc(100% - 36px); align-self: flex-end; } }

/* card "adicionar ponto que faltou" na cidade */
.spot-card.add-custom { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; min-height: 250px; border: 2px dashed var(--border-strong); background: var(--surface-2); cursor: pointer; color: var(--muted); font-family: inherit; padding: 20px; transition: border-color .2s, color .2s, background .2s; }
.spot-card.add-custom:hover { border-color: var(--purple-3); color: var(--purple-2); background: var(--purple-softer); }
.spot-card.add-custom .ac-plus { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--purple-soft); color: var(--purple-2); }
.spot-card.add-custom .ac-plus svg { width: 22px; height: 22px; }
.spot-card.add-custom b { font-size: 15px; color: var(--text); }
.spot-card.add-custom small { font-size: 12.5px; }

/* Modal de confirmação (padrão Tripza, substitui o confirm nativo) */
.confirm-card { max-width: 380px; }
.confirm-body { text-align: center; padding: 26px 24px 6px; }
.confirm-ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; margin: 0 auto 14px; background: var(--purple-soft); color: var(--purple-2); }
.confirm-ico.danger { background: #fdecec; color: var(--red); }
.confirm-ico svg { width: 26px; height: 26px; }
.confirm-body h3 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.confirm-msg { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin-top: 8px; }
.confirm-card .modal-foot { justify-content: center; gap: 10px; padding-bottom: 20px; }
.confirm-card .modal-foot .mini, .confirm-card .modal-foot .btn-primary { height: 40px; padding: 0 18px; }
.btn-primary.btn-danger { background: var(--red); }
.btn-primary.btn-danger:hover { background: #c23a41; }

/* olho de visibilidade da divisão (substitui o "ver como") */
.vis-eye { display: flex; align-items: center; gap: 12px; background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; padding: 6px 8px; border-radius: 12px; transition: background .15s; }
.vis-eye:hover { background: var(--purple-softer); }
.vis-eye svg { width: 26px; height: 26px; flex: none; }
.vis-eye.on svg { color: var(--purple-2); }
.vis-eye.off svg { color: var(--muted); }
.vis-eye .vis-txt b { display: block; font-size: 13.5px; color: var(--text); }
.vis-eye .vis-txt small { color: var(--muted-2); font-size: 11.5px; }

/* Dropdown de estado custom (identidade Tripza) */
.uf-dd { position: relative; }
.uf-dd-btn { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color .15s; white-space: nowrap; }
.uf-dd-btn:hover { border-color: var(--purple-3); }
.uf-dd-btn.active { border-color: var(--purple-2); color: var(--purple-2); }
.uf-dd-btn > svg:first-child { width: 16px; height: 16px; color: var(--purple-2); flex: none; }
.uf-dd-btn .uf-chev { width: 15px; height: 15px; color: var(--muted); flex: none; }
.uf-dd-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: 280px; max-width: 88vw; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 40px rgba(30, 20, 60, .16); padding: 6px; }
.uf-dd-search { display: flex; align-items: center; gap: 7px; padding: 7px 10px; margin-bottom: 4px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-2); }
.uf-dd-search svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.uf-dd-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-family: inherit; font-size: 13.5px; color: var(--text); }
.uf-dd-scroll { max-height: 300px; overflow-y: auto; }
.uf-dd-empty { padding: 14px 12px; text-align: center; color: var(--muted); font-size: 13px; }
.uf-dd-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border: none; background: none; border-radius: 9px; font-family: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; text-align: left; }
.uf-dd-opt:hover { background: var(--purple-softer); }
.uf-dd-opt.sel { color: var(--purple-2); font-weight: 700; background: var(--purple-soft); }
.uf-dd-opt span { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted-2); }
.uf-dd-opt.sel span { color: var(--purple-3); }
.uf-dd-opt svg { width: 15px; height: 15px; margin-left: auto; color: var(--purple-2); flex: none; }
.uf-dd-opt .flag-img { width: 20px; height: 14px; flex: none; margin-left: 0; }
.uf-dd-group { padding: 10px 12px 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.city-badge.intl { padding: 4px 6px; display: inline-flex; }
.city-badge.intl .flag-img { width: 22px; height: 15px; display: block; }
.city-badge.intl.br { gap: 5px; align-items: center; }
.city-badge.intl.br b { color: var(--purple-2); font-size: 11px; font-weight: 800; }
.uf-dd-opt span ~ svg { margin-left: 6px; }
.uf-dd-opt .uf-dd-nm { margin-left: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: inherit; color: inherit; }
.uf-dd-opt .uf-dd-count { margin-left: auto; }
.estado-chips { margin: 2px 0 14px; }

/* Multi-destino no roteiro */
.dest-head { display: flex; align-items: center; gap: 8px; margin: 24px 0 10px; }
.dest-head svg { width: 20px; height: 20px; color: var(--purple-2); flex: none; }
.dest-head h2 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.add-dest-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 20px; padding: 14px; border: 2px dashed var(--border-strong); border-radius: 14px; background: var(--surface-2); color: var(--purple-2); font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: border-color .2s, background .2s; }
.add-dest-btn:hover { border-color: var(--purple-3); background: var(--purple-softer); }
.add-dest-btn svg { width: 17px; height: 17px; }

/* multi-destino: cabeçalho com explorar + chips no editar */
.dest-head .dest-explore { margin-left: auto; }
.dest-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dest-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--purple-soft); color: var(--purple-2); font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 20px; }
.dest-chip svg { width: 13px; height: 13px; }
.edit-destinos { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--border); }

/* ============ RODAPÉ (footer) ============ */
.site-footer { position: relative; width: 100%; max-width: 1100px; margin: 40px auto 0; padding: 40px 28px 32px; border-top: 1px solid var(--border); border-radius: 28px 28px 0 0; background: radial-gradient(60% 120px at 50% 0%, rgba(59, 43, 217, .07), transparent); overflow: hidden; }
.sf-glow { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 34%; height: 2px; background: linear-gradient(90deg, transparent, var(--purple-3), transparent); filter: blur(1px); border-radius: 999px; }
.sf-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; }
.sf-brand { max-width: 340px; }
.sf-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); }
.sf-logo img { height: 30px; width: auto; }
.sf-tag { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 12px 0 14px; }
.sf-copy { color: var(--muted); font-size: 12.5px; }
.sf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sf-col h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 14px; }
.sf-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sf-col a { display: inline-flex; align-items: center; gap: 7px; color: var(--text); text-decoration: none; font-size: 13.5px; transition: color .2s; }
.sf-col a:hover { color: var(--purple-2); }
.sf-ic { width: 16px; height: 16px; }
@media (max-width: 640px) { .site-footer { padding: 32px 20px 28px; } .sf-inner { grid-template-columns: 1fr; gap: 26px; } }

/* ============ PÁGINAS INSTITUCIONAIS (Sobre/Privacidade/Termos) ============ */
.doc-page { max-width: 820px; margin: 0 auto; padding: 32px 36px 36px; }
@media (max-width: 560px) { .doc-page { padding: 22px 18px; } }
.doc-page h1 { font-size: 30px; font-weight: 800; margin-bottom: 8px; }
.doc-page h2 { font-size: 17px; font-weight: 700; margin: 26px 0 8px; }
.doc-page p { color: var(--text); font-size: 14.5px; line-height: 1.7; margin-bottom: 12px; }
.doc-page ul { margin: 0 0 12px; padding-left: 20px; }
.doc-page li { color: var(--text); font-size: 14.5px; line-height: 1.7; margin-bottom: 6px; }
.doc-page a { color: var(--purple-2); font-weight: 600; }
.doc-upd { color: var(--muted); font-size: 13px !important; margin-bottom: 18px; }
.doc-note { margin-top: 24px; padding: 12px 14px; background: var(--purple-soft); border-radius: 12px; color: var(--purple-2); font-size: 13px !important; }
.doc-back { margin-top: 30px; }

/* ============ AJUSTES DE RESPONSIVIDADE (mobile) ============ */
img { max-width: 100%; }
#publicRoot { overflow-x: hidden; }
@media (max-width: 640px) {
  .row-between { flex-wrap: wrap; gap: 10px; }
  #viewTitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; }
  .friend-stats { flex-wrap: wrap; gap: 8px 16px; }
  .stat-row { margin-bottom: 16px; }
}
@media (max-width: 480px) {
  .po-voters .pv-av:nth-child(n+4) { display: none; }
  .page-head h1 { font-size: 22px; }
  .doc-page h1 { font-size: 25px; }
  .poll-head h3 { font-size: 15px; }
  .wx-day { min-width: 66px; }
}

/* ============ MODO CURADORIA (admin: trocar/remover foto) ============ */
.spot-img { position: relative; }
.cur-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; z-index: 3; }
.cur-btn { width: 32px; height: 32px; border-radius: 8px; border: none; background: rgba(0, 0, 0, .55); color: #fff; font-size: 15px; cursor: pointer; display: grid; place-items: center; }
.cur-btn:hover { background: rgba(0, 0, 0, .82); }
.cur-btn.danger:hover { background: #dc2626; }
.cur-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 320px; overflow-y: auto; }
.cur-cand { padding: 0; border: 2px solid var(--border); border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--surface); aspect-ratio: 4 / 3; }
.cur-cand:hover { border-color: var(--purple-2); }
.cur-cand img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============ PAINEL DE CURADORIA (admin) ============ */
.admin-stats { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.ast { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 22px; box-shadow: var(--shadow); }
.ast b { display: block; font-size: 24px; font-weight: 800; }
.ast span { font-size: 12px; color: var(--muted); }
.ast.warn b { color: #e8590c; }
button.ast { font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.ast:hover { border-color: #e8590c; }
.admin-city-res { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.adm-sec { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 12px 0 4px; }
.adm-sec:first-child { margin-top: 2px; }
.adm-city-opt { display: flex; align-items: center; gap: 8px; text-align: left; width: 100%; max-width: 520px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; font-size: 14px; font-family: inherit; }
.adm-city-opt:hover { border-color: var(--purple-3); background: var(--purple-softer); }
.adm-city-opt svg { width: 15px; height: 15px; color: var(--purple-2); flex: none; }
.admin-city-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 14px; flex-wrap: wrap; }
.admin-city-head h2 { font-size: 20px; font-weight: 800; }
.admin-city-head small { font-size: 13px; color: var(--muted); font-weight: 500; margin-left: 8px; }
.adm-filter { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.adm-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.adm-img { height: 120px; background: var(--purple-soft); position: relative; }
/* capa fixável (curadoria) */
.adm-cover-banner { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px; margin-bottom: 14px; box-shadow: var(--shadow); }
.adm-cover-banner img { width: 66px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }
.adm-cover-banner > div { flex: 1; min-width: 0; }
.adm-cover-banner b { font-size: 13.5px; display: block; }
.adm-cover-banner small { font-size: 12px; color: var(--muted); }
.adm-cover-banner.auto > span { color: var(--purple-2); display: inline-grid; place-items: center; flex: none; }
.adm-cover-banner.auto > span svg { width: 20px; height: 20px; }
.adm-card.is-cover { outline: 2px solid var(--purple-2); outline-offset: -2px; }
.adm-cover-tag { position: absolute; top: 6px; left: 6px; background: var(--purple-2); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.adm-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-noimg { width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted); font-size: 12px; background: repeating-linear-gradient(45deg, #f1f3ff, #f1f3ff 10px, #efeafe 10px, #efeafe 20px); }
.adm-body { padding: 10px 12px; }
.adm-body b { font-size: 13.5px; display: block; line-height: 1.3; }
.adm-body small { font-size: 11.5px; color: var(--muted); }
.adm-acts { display: flex; gap: 6px; margin-top: 10px; }

/* ===== Minhas viagens — dashboard (identidade Tripza) ===== */
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-hello { font-size: 24px; font-weight: 800; margin: 0 0 4px; }
.dash-head p { color: var(--muted); font-size: 14px; margin: 0; }
/* resumo no topo — uma barra só, sem cara de template */
.dash-stats { display: flex; align-items: stretch; margin-top: 20px; background: linear-gradient(135deg, var(--purple) 0%, var(--purple-3) 100%); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 26px rgba(11, 15, 56, .2); }
.dstat { flex: 1; display: flex; align-items: center; gap: 12px; padding: 18px 22px; position: relative; color: #fff; }
.dstat + .dstat::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: rgba(255,255,255,.25); }
.dstat-ic { flex: none; color: rgba(255,255,255,.85); }
.dstat-ic svg { width: 20px; height: 20px; }
.dstat small { display: block; color: rgba(255,255,255,.75); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.dstat b { font-size: 24px; font-weight: 800; line-height: 1.1; }
@media (max-width: 640px) { .dash-stats { flex-direction: column; } .dstat + .dstat::before { left: 20%; right: 20%; top: 0; bottom: auto; width: auto; height: 1px; } }

/* "Viagens recentes" — fichas empilhadas, rolagem horizontal */
.dg-head { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; }
.dg-nav { display: flex; gap: 6px; }
.dg-arrow { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--purple-2); display: grid; place-items: center; cursor: pointer; }
.dg-arrow:hover { border-color: var(--purple-3); background: var(--purple-softer); }
.dg-arrow svg { width: 14px; height: 14px; }
.dg-row { display: flex; gap: 18px; overflow-x: auto; padding: 14px 4px 6px; scrollbar-width: none; }
.dg-row::-webkit-scrollbar { display: none; }
.dg-item { flex: none; width: 128px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: none; border: none; padding: 0; font-family: inherit; text-align: left; cursor: pointer; }
.dg-stack { position: relative; width: 100%; height: 92px; margin-bottom: 10px; }
.dg-ghost, .dg-front { position: absolute; inset: 0; border-radius: 14px; background-size: cover; background-position: center; background-color: var(--purple-soft); box-shadow: 0 4px 14px rgba(11, 15, 56, .16); transition: transform .25s cubic-bezier(.2,.8,.3,1.3), box-shadow .25s; }
.dg-ghost { z-index: 1; filter: saturate(.75) brightness(.94); }
.dg-ghost-2 { transform: rotate(-11deg) translate(-13px, 8px) scale(.94); z-index: 1; }
.dg-ghost-1 { transform: rotate(8deg) translate(11px, 6px) scale(.97); z-index: 2; }
.dg-front { z-index: 3; border: 1px solid rgba(255,255,255,.6); display: grid; place-items: center; color: #fff; }
.dg-item:hover .dg-ghost-2 { transform: rotate(-16deg) translate(-20px, 10px) scale(.94); }
.dg-item:hover .dg-ghost-1 { transform: rotate(13deg) translate(17px, 8px) scale(.97); }
.dg-item:hover .dg-front { transform: translateY(-5px) scale(1.02); box-shadow: 0 12px 26px rgba(11, 15, 56, .3); }
.dg-front-grad { background-image: linear-gradient(135deg, var(--purple-3), var(--purple)) !important; }
.dg-front svg { width: 26px; height: 26px; }
.dg-name { font-size: 13px; font-weight: 700; line-height: 1.25; }
.dg-meta { color: var(--muted); font-size: 11px; line-height: 1.3; }

/* menu "⋯" do card de viagem: "Abrir" e, separado, "Excluir viagem" em vermelho */
.dt-menu { min-width: 190px; text-align: left; }
.dt-menu .menu-item.danger { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 9px 9px; }
.dt-ic { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); color: var(--muted); cursor: pointer; transition: all .15s; }
.dt-ic svg { width: 14px; height: 14px; }
.dt-ic:hover { border-color: var(--purple-3); color: var(--purple-2); background: var(--purple-softer); }
.adm-acts .mini { flex: 1; justify-content: center; font-size: 12px; padding: 6px 4px; }

/* ===== Card de destino (foto inteira + degradê, modelo "DestinationCard" na identidade Tripza) ===== */
.dcard { position: relative; height: 210px; border-radius: 16px; overflow: hidden; cursor: pointer; background: #241b3a; box-shadow: 0 8px 22px -10px rgba(11, 15, 56, .45); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; isolation: isolate; }
.dcard:hover { transform: scale(1.03); box-shadow: 0 0 60px -15px rgba(59, 43, 217, .6); }
.dcard-img { position: absolute; inset: 0; background-size: cover; background-position: center; background-image: linear-gradient(135deg, #3b2bd9, #8b5cf6 45%, #06d6ff); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.dcard:hover .dcard-img { transform: scale(1.1); }
.dcard-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 15, 56, .92) 0%, rgba(11, 15, 56, .55) 32%, rgba(11, 15, 56, 0) 62%); }
.dcard-tag { position: absolute; top: 9px; left: 9px; z-index: 2; background: rgba(255,255,255,.92); color: var(--purple-2); font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 6px; }
.dcard-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 13px 12px; color: #fff; display: flex; flex-direction: column; }
.dcard-body h3 { font-size: 16px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; display: flex; align-items: center; gap: 6px; }
.dcard-flag .flag-img { width: 19px; height: 13px; border-radius: 3px; display: block; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.dcard-body p { margin-top: 3px; font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,.82); }
.dcard-cta { margin-top: 9px; display: flex; align-items: center; justify-content: space-between; padding: 7px 11px; border-radius: 9px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; transition: background .3s, border-color .3s; }
.dcard-cta svg { width: 14px; height: 14px; transition: transform .3s; }
.dcard:hover .dcard-cta { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.4); }
.dcard:hover .dcard-cta svg { transform: translateX(4px); }
.pais-sub { color: var(--muted); font-weight: 600; font-size: 16px; }
.tpl-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
@media (max-width: 480px) { .dcard { height: 220px; } .dcard-body h3 { font-size: 18px; } }

/* ===== Minhas viagens: resumo simbólico em cima da tabela ===== */
.dash-mini { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; color: var(--muted); font-size: 13px; }
.dash-mini span { display: inline-flex; align-items: center; gap: 6px; }
.dash-mini svg { width: 14px; height: 14px; color: var(--purple-2); }
.dash-mini b { color: var(--text); font-weight: 800; }
/* ===== Compartilhar (limpo, compacto) ===== */
.share-sum b { display: block; font-size: 16px; font-weight: 800; margin-bottom: 8px; }
.share-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.share-chips span { display: inline-flex; align-items: center; gap: 5px; background: var(--purple-softer); border: 1px solid var(--purple-soft); color: var(--text); border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 600; }
.share-chips svg { width: 13px; height: 13px; color: var(--purple-2); }
.share-prev { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; }
.share-prev summary { cursor: pointer; padding: 9px 12px; font-size: 12.5px; font-weight: 600; color: var(--muted); list-style: none; }
.share-prev summary::before { content: '▸ '; color: var(--purple-2); }
.share-prev[open] summary::before { content: '▾ '; }
.share-prev pre { margin: 0; padding: 0 12px 12px; max-height: 200px; overflow: auto; white-space: pre-wrap; font-family: inherit; font-size: 12px; line-height: 1.5; color: var(--text); }
.share-card .modal-foot .mini svg { width: 14px; height: 14px; }

/* ===== Grupo de avatares com tooltip (nome + papel) ===== */
.avg { display: flex; align-items: center; }
.avg-item { position: relative; display: inline-flex; margin-left: -8px; transition: transform .2s; }
.avg-item:first-child { margin-left: 0; }
.avg-item .av { border: 2px solid var(--surface); box-sizing: content-box; }
.avg-item:hover { transform: scale(1.08); z-index: 50 !important; }
.avg-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 6px) scale(.95); opacity: 0; pointer-events: none; white-space: nowrap; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; padding: 7px 11px; box-shadow: 0 10px 26px rgba(20,22,40,.16); text-align: center; z-index: 60; transition: opacity .18s, transform .22s cubic-bezier(.2,.8,.2,1.4); }
.avg-tip b { display: block; font-size: 12.5px; color: var(--text); }
.avg-tip small { display: block; font-size: 11px; color: var(--muted); }
.avg-tip::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--surface); }
.avg-item:hover .avg-tip { opacity: 1; transform: translate(-50%, 0) scale(1); }
.avg-more { display: inline-grid; place-items: center; border-radius: 50%; background: var(--purple-soft); color: var(--purple-2); font-size: 11px; font-weight: 800; border: 2px solid var(--surface); }

/* ===== Assistente "cola seu roteiro" ===== */
.ph-assist { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tz-assist { display: inline-flex; align-items: flex-end; gap: 8px; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; text-align: left; max-width: 360px; }
.tz-assist-av { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 8px 18px rgba(59,43,217,.35); animation: taBob 2.6s ease-in-out infinite; padding: 6px; }
.tz-assist-av img { width: 100%; height: 100%; object-fit: contain; }
.tz-assist-bubble { position: relative; background: var(--surface); border: 1px solid var(--purple-soft); border-radius: 14px 14px 14px 4px; padding: 9px 12px; font-size: 12.5px; line-height: 1.4; color: var(--text); box-shadow: 0 6px 18px rgba(20,22,40,.08); min-height: 36px; }
.tz-assist:hover .tz-assist-bubble { border-color: var(--purple-3); }
.ta-caret { display: inline-block; width: 2px; height: 12px; background: var(--purple-2); margin-left: 2px; vertical-align: -2px; animation: taBlink .9s steps(2) infinite; }
.tz-assist-bubble.done .ta-caret { display: none; }
@keyframes taBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes taBlink { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tz-assist-av { animation: none; } }
.assist-card { max-width: 560px; }
.assist-hint { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.assist-card .modal-head h3 { display: inline-flex; align-items: center; gap: 8px; }
.assist-card .modal-head svg { width: 18px; height: 18px; color: var(--purple-2); }
.form-grid textarea { border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 13.5px; color: var(--text); background: var(--surface); resize: vertical; line-height: 1.45; }
.form-grid textarea:focus { outline: none; border-color: var(--purple-2); box-shadow: 0 0 0 3px rgba(124,58,237,0.14); }
@media (max-width: 640px) { .ph-assist .tz-assist { max-width: 100%; } }

/* ===== Gastos & Divisão: mais compacto (sem cartões gigantes) ===== */
.stat-row { gap: 10px; margin-bottom: 16px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat { padding: 10px 12px; box-shadow: none; border-radius: 12px; }
.stat .lbl { font-size: 11.5px; }
.stat .val { font-size: 18px; margin-top: 4px; }
.pay-cards { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.pay-card { padding: 11px 12px; box-shadow: none; border-radius: 12px; }
.pay-card-top { margin-bottom: 8px; }
.pay-progress { margin-bottom: 8px; }
.parcela { min-width: 78px; padding: 6px 9px; }
.parcela .pval { font-size: 13px; }
.split-bar { padding: 12px 14px; margin: 12px 0; }
.faces-strip { padding: 12px 16px; gap: 10px; }
.face { width: 58px; }
.panel-head { padding: 12px 16px; }

/* ===== Fotos da viagem: masonry ===== */
.masonry { position: relative; width: 100%; min-height: 120px; }
.ms-item { position: absolute; top: 0; left: 0; padding: 6px; cursor: pointer; will-change: transform, width, height, opacity; opacity: 0; }
.ms-img { width: 100%; height: 100%; border-radius: 12px; background-size: cover; background-position: center; box-shadow: 0 10px 40px -12px rgba(20,22,40,.25); }

/* ===== Pontos turísticos dentro do destino: mesmo card dos destinos ===== */
.gallery { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.pcard { height: 200px; }
.pcard .dcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.dcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard:hover .dcard-img img { transform: scale(1.08); }
.pcard-name { font-size: 18px !important; }
.pcard-add { margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; align-self: flex-start; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.16); backdrop-filter: blur(8px); color: #fff; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .2s, transform .15s; }
.pcard-add svg { width: 13px; height: 13px; }
.pcard-add:hover { background: var(--purple-2); border-color: var(--purple-2); }
.pcard-add:active { transform: scale(.97); }
.pcard-add.added { background: #10b981; border-color: #10b981; }
.pcard-add.added:hover { background: #e11d48; border-color: #e11d48; }
.pcard-add.added:hover span { display: none; }
.pcard-add.added:hover::after { content: 'Tirar do roteiro'; }
.pcard.is-added .dcard-grad { background: linear-gradient(to top, rgba(6, 95, 70, .9) 0%, rgba(6, 95, 70, .5) 34%, transparent 62%); }
.pcard.add-custom { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--purple-softer); border: 2px dashed var(--purple-soft); color: var(--purple-2); font-family: inherit; box-shadow: none; }
.pcard.add-custom:hover { transform: none; box-shadow: none; border-color: var(--purple-3); }
.pcard.add-custom .ac-plus { width: 44px; height: 44px; border-radius: 50%; background: var(--purple-soft); display: grid; place-items: center; }
.pcard.add-custom .ac-plus svg { width: 20px; height: 20px; }
.pcard.add-custom b { font-size: 14px; color: var(--text); }
.pcard.add-custom small { color: var(--muted); font-size: 12px; }

/* ===== País / estado (dentro): faixa com bandeira ===== */
.pais-hero { background: linear-gradient(135deg, var(--purple-softer), #fff); border: 1px solid var(--purple-soft); border-radius: 18px; padding: 14px 18px 16px; margin: 4px 0 16px; }
.crumb-light { margin-bottom: 8px; }
.pais-hero-row { display: flex; align-items: center; gap: 14px; }
.pais-hero-row .flag-img { width: 56px; height: 40px; border-radius: 8px; box-shadow: 0 6px 16px rgba(20,22,40,.14); flex: none; }
.pais-hero h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.pais-hero p { color: var(--muted); font-size: 13px; margin-top: 3px; }
.estado-chips { margin-bottom: 14px; }

/* ===== Minhas viagens: globo + resumo ===== */
.dash-top { display: flex; align-items: center; gap: 20px; margin-top: 10px; flex-wrap: wrap; }
.dash-globe { width: 280px; height: 280px; flex: none; }
.dash-globe canvas { width: 280px; height: 280px; display: block; }
@media (max-width: 560px) { .dash-globe, .dash-globe canvas { width: min(260px, 72vw); height: min(260px, 72vw); } .dash-top { justify-content: center; } }
/* globo (cobe 2): aparece com fade e rótulo flutuante em cada destino */
.cobe-wrap { position: relative; user-select: none; }
.cobe-wrap canvas { opacity: 0; transition: opacity 1.2s ease; border-radius: 50%; }
.cobe-label {
  position: absolute; bottom: anchor(top); left: anchor(center); translate: -50% 0; margin-bottom: 5px;
  padding: 1px 4px; background: #1a1a2e; color: #fff; font: 600 7px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; pointer-events: none; border-radius: 3px;
  transition: opacity .8s, filter .8s;
}
.cobe-label::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translate3d(-50%, -1px, 0); border: 3px solid transparent; border-top-color: #1a1a2e; }
@supports not (position-anchor: --a) { .cobe-label { display: none; } }
.dash-top .dash-mini { margin-top: 0; flex-direction: column; gap: 8px; }

/* ===== Gastos: explicação + lembrete neutro ===== */
.gx-how { display: flex; align-items: flex-start; gap: 10px; background: var(--purple-softer); border: 1px solid var(--purple-soft); border-left: 3px solid var(--purple-2); border-radius: 12px; padding: 11px 14px; margin-bottom: 14px; font-size: 13px; }
.gx-how > svg { width: 16px; height: 16px; color: var(--purple-2); flex: none; margin-top: 2px; }
.gx-how b { display: block; margin-bottom: 2px; }
.gx-how span { color: var(--muted); line-height: 1.45; }
.gx-how span b { display: inline; color: var(--text); }
.gx-note { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 12.5px; line-height: 1.45; margin: 10px 0 4px; }
.gx-note svg { width: 15px; height: 15px; color: var(--purple-2); flex: none; margin-top: 2px; }
.remind-btn { background: var(--purple-softer); border-color: var(--purple-soft); color: var(--purple-2); }
.remind-btn:hover { background: var(--purple-soft); }
.remind-btn svg { width: 13px; height: 13px; }

/* ===== Cartão de embarque: ver atualizações ===== */
.ticket-upd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 4px 0; }
.ticket-upd-msg { font-size: 12px; color: var(--muted); line-height: 1.4; max-width: 560px; }
.ticket-upd .mini svg { width: 13px; height: 13px; }

/* ===== Amigos: quem vai pra onde, passaporte, juntar, feed ===== */
.fi-wrap { margin-top: 6px; }
.fi-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
@media (max-width: 800px) { .fi-grid { grid-template-columns: 1fr; } }
.fi-sec { margin-top: 12px; }
.fi-timeline { display: flex; flex-direction: column; gap: 8px; }
.fi-empty { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: 12px; color: var(--muted); font-size: 13.5px; }
.fi-passport-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; font-size: 13.5px; color: var(--muted); }
.fi-passport-link b { color: var(--purple-2); }
.fi-passport-link .mini svg { width: 13px; height: 13px; }
.fi-tl { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; font-family: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; }
.fi-tl:hover { border-color: var(--purple-3); background: var(--purple-softer); }
.fi-tl small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.fi-passport { display: flex; flex-wrap: wrap; gap: 10px; }
.fi-stamp { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 72px; padding: 10px 6px; border: 2px dashed var(--purple-soft); border-radius: 12px; background: var(--surface); transform: rotate(-2deg); }
.fi-stamp:nth-child(even) { transform: rotate(2.5deg); }
.fi-stamp .flag-img { width: 34px; height: 24px; border-radius: 4px; }
.fi-stamp small { font-size: 10.5px; font-weight: 700; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62px; }
.fi-stamp.more { justify-content: center; color: var(--purple-2); font-weight: 800; }
.fi-match-list { display: flex; flex-direction: column; gap: 10px; }
.fi-match { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: linear-gradient(135deg, var(--purple-softer), #fff); border: 1px solid var(--purple-soft); border-radius: 14px; padding: 12px 14px; font-size: 13.5px; }
.fi-match > div { flex: 1; min-width: 200px; }
.fi-match small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.btn-primary.sm { padding: 8px 12px; font-size: 12.5px; }
.fi-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.fi-post { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px; font-family: inherit; color: var(--text); cursor: pointer; transition: box-shadow .18s, border-color .18s; }
.fi-post:hover { border-color: var(--purple-3); box-shadow: 0 10px 26px rgba(76,29,149,.12); }
.fi-post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fi-post-head b { font-size: 13.5px; display: block; }
.fi-post-head small { color: var(--muted); font-size: 11.5px; }
.fi-post-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.fi-post-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }

/* ============================================================
   IDENTIDADE EM MOVIMENTO (brand board + brief out/2026)
   Tipografia, logos oficiais, abertura, hero da home, voo do
   "Adicionar ao roteiro", cena "Montando a viagem", cartão de
   embarque e tag "entrou no grupo". Tudo respeita reduced-motion.
   ============================================================ */
h1, h2, h3, .brand-word, .dash-hello { font-family: var(--f-display); }

/* logos oficiais (PNG do board; pedir SVG depois p/ nitidez em qualquer tamanho) */
.brand-home { display: flex; align-items: center; }
.brand-logo { height: 26px; width: auto; display: block; }
.brand-sym { height: 28px; width: auto; display: none; }
@media (max-width: 640px) { .brand-logo { display: none; } .brand-sym { display: block; } }

/* ---------- Abertura (1x por sessão) / tela de carregamento ---------- */
.app-loader { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; align-content: center; transition: opacity .5s ease; }
.app-loader.hide { opacity: 0; pointer-events: none; }
.app-loader.tz-intro { overflow: hidden; color: var(--brand-lavender);
  background: radial-gradient(120% 90% at 80% 110%, #3a2bb8 0%, #141a5c 45%, var(--brand-navy) 100%); }
.tzi-route { position: absolute; inset: 0; width: 100%; height: 100%; }
.tzi-dots { fill: none; stroke: rgba(224,231,255,.55); stroke-width: 2; stroke-dasharray: 3 9; stroke-linecap: round; }
.tzi-mask-path { fill: none; stroke: #fff; stroke-width: 6; stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.tzi-plane { color: #fff; stroke: none; offset-path: path("M -40 330 C 180 330 260 120 520 110"); offset-rotate: auto 90deg; offset-distance: 0%; opacity: 0; filter: drop-shadow(0 0 10px rgba(6,214,255,.8)); }
.tzi-pin { color: var(--brand-cyan); stroke: none; opacity: 0; filter: drop-shadow(0 0 12px rgba(6,214,255,.75)); }
.tzi-glow { position: absolute; width: min(60vw, 420px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(6,214,255,.35), transparent 60%); opacity: 0; pointer-events: none; }
.tzi-lockup { position: relative; display: grid; justify-items: center; gap: 14px; width: min(78%, 460px); }
.tzi-logo { width: 100%; height: auto; clip-path: inset(0 100% 0 0); opacity: 0; }
.tzi-tag { margin: 0; font: 400 clamp(10px, 1.8vw, 14px) var(--f-display); letter-spacing: .42em; text-transform: uppercase; color: var(--brand-lavender); opacity: 0; text-align: center; }
.tzi-skip { position: absolute; top: 18px; right: 18px; min-height: 36px; padding: 8px 16px; border: 0; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font: 600 13px var(--f-body); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; }
.tzi-skip:hover { background: rgba(255,255,255,.22); }
.app-loader.play .tzi-mask-path { animation: tziDraw 1.3s .1s ease-in-out forwards; }
.app-loader.play .tzi-plane { animation: tziFly 1.3s .1s ease-in-out forwards; }
.app-loader.play .tzi-pin { animation: tziPin .5s 1.25s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.app-loader.play .tzi-glow { animation: tziGlow 1.6s 1.1s ease-out forwards; }
.app-loader.play .tzi-logo { animation: tziWipe .9s 1.2s cubic-bezier(.7, 0, .2, 1) forwards; }
.app-loader.play .tzi-tag { animation: tziTag .8s 2s ease-out forwards; }
/* volta dentro da mesma sessão (ou reduced-motion): só o logo, rapidinho */
.app-loader.quick .tzi-route, .app-loader.quick .tzi-skip, .app-loader.quick .tzi-glow { display: none; }
.app-loader.quick .tzi-logo { clip-path: none; opacity: 1; }
.app-loader.quick .tzi-tag { opacity: .9; }
@keyframes tziDraw { to { stroke-dashoffset: 0; } }
@keyframes tziFly { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes tziPin { from { opacity: 0; transform: translate(var(--tzi-px, 520px), var(--tzi-py, 110px)) scale(.4); } to { opacity: 1; transform: translate(var(--tzi-px, 520px), var(--tzi-py, 110px)) scale(1); } }
@keyframes tziGlow { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; } 100% { opacity: .35; transform: scale(1.2); } }
@keyframes tziWipe { 0% { clip-path: inset(0 100% 0 0); opacity: 1; transform: scale(.96); } 100% { clip-path: inset(0 0 0 0); opacity: 1; transform: scale(1); } }
@keyframes tziTag { from { opacity: 0; letter-spacing: .7em; } to { opacity: .9; letter-spacing: .42em; } }

/* ---------- Hero da home (foto da identidade com zoom lento) ---------- */
.home-hero { position: relative; isolation: isolate; overflow: hidden; margin: -26px -30px 24px; min-height: 400px; display: flex; flex-wrap: wrap; align-items: flex-end; align-content: flex-end; border-radius: 0 0 28px 28px; color: #fff; }
.home-hero__bg { position: absolute; inset: 0; z-index: -2; background: var(--brand-navy) url("./assets/hero-mockup.jpg") right center / cover no-repeat; animation: tzKb 18s ease-in-out infinite alternate; will-change: transform; }
.home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(11,15,59,.97) 0%, rgba(11,15,59,.85) 38%, rgba(11,15,59,.15) 75%), linear-gradient(0deg, rgba(11,15,59,.6), transparent 40%); }
@keyframes tzKb { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-2%, 1.5%); } }
.home-hero__in { position: relative; padding: 36px 30px 30px; display: grid; gap: 14px; max-width: 640px; width: 100%; }
.home-hero__logo { width: 160px; height: auto; }
.home-hero h1 { font-size: clamp(32px, 5vw, 54px); font-weight: 800; line-height: 1.02; color: #fff; letter-spacing: -.02em; overflow: visible; min-height: 0; }
.home-hero h1 .hh-grad { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-hero p { margin: 0; color: #dfe4ff; font-size: 15.5px; max-width: 46ch; }
.home-hero p b { color: #fff; }
.home-hero .explore-bar { max-width: 560px; }
.home-hero .searchbar.sb-explore.wide { max-width: none; margin-bottom: 0; height: 52px; border: 0; border-radius: 999px; padding: 0 6px 0 18px; background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.home-hero .searchbar:focus-within { box-shadow: 0 12px 30px rgba(0,0,0,.25), 0 0 0 4px rgba(6,214,255,.35); }
.home-hero .searchbar input { color: var(--brand-navy); font-weight: 500; }
.home-hero .searchbar input::placeholder { color: #8a90a2; }
.home-hero .search-sug { max-width: 560px; }
.hh-go { flex: none; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; font: 700 13px var(--f-display); letter-spacing: .04em; color: #fff; background: var(--purple-2); box-shadow: 0 8px 20px rgba(59,43,217,.3); cursor: pointer; transition: transform .15s, background .15s; }
.hh-go:hover { background: var(--purple); }
.hh-go:active { transform: scale(.96); }
.home-hero .tz-assist { position: absolute; right: 28px; bottom: 26px; max-width: 300px; }
.home-hero .tz-assist-bubble { font-size: 12px; }
@media (max-width: 1000px) { .home-hero .tz-assist { position: static; margin: 0 30px 26px; } }
@media (max-width: 760px) {
  .home-hero { margin: -16px -12px 20px; min-height: 500px; border-radius: 0 0 24px 24px; }
  .home-hero::before { background: linear-gradient(180deg, rgba(11,15,59,.2) 0%, rgba(11,15,59,.85) 50%, rgba(11,15,59,.98) 100%); }
  .home-hero__bg { background-position: 72% center; background-size: cover; } /* foto cobre o topo todo (antes acabava no meio e sobrava azul) */
  .home-hero__in { padding: 28px 18px 22px; }
  .home-hero__logo { width: 130px; }
  .home-hero .tz-assist { margin: 0 18px 20px; }
}

/* ---------- 2. aviãozinho do "Adicionar ao roteiro" voa até o contador ---------- */
.tz-flyer { position: fixed; left: 0; top: 0; z-index: 1500; width: 28px; height: 28px; color: var(--brand-cyan); stroke: none; pointer-events: none; filter: drop-shadow(0 0 8px rgba(6,214,255,.9)); will-change: transform; }
.tz-flyer svg { width: 100%; height: 100%; display: block; }
.tz-bump { animation: tzBump .5s ease; }
@keyframes tzBump { 30% { transform: scale(1.18); } }
/* barra dos pontos escolhidos: sem pulo de escala (numa barra larga isso virava um tranco); só um brilho */
.fab-bar.tz-bump { animation: tzBumpBar .55s ease; }
@keyframes tzBumpBar { 30% { box-shadow: 0 0 0 4px rgba(6,214,255,.25); } }

/* ---------- 3. cena "Montando a viagem" (enquanto a IA lê o roteiro) ---------- */
.assist-card { position: relative; }
.tz-build { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; align-content: center; gap: 14px; padding: 28px; text-align: center; color: #fff;
  background: radial-gradient(120% 90% at 80% 110%, #3a2bb8 0%, #141a5c 45%, var(--brand-navy) 100%); animation: tzFade .3s ease; }
@keyframes tzFade { from { opacity: 0; } to { opacity: 1; } }
.tzb-scene { width: min(100%, 420px); height: auto; overflow: visible; }
.tzb-arc { fill: none; stroke: rgba(224,231,255,.4); stroke-width: 2; stroke-dasharray: 3 8; stroke-linecap: round; }
.tzb-pin { fill: var(--brand-cyan); stroke: none; }
.tzb-pin.b { fill: var(--brand-purple); }
.tzb-plane { color: #fff; stroke: none; offset-path: path("M 40 120 C 140 10 320 10 420 120"); offset-rotate: auto 90deg; animation: tzbFly 2.6s ease-in-out infinite; }
@keyframes tzbFly { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.tzb-msg { font: 600 17px var(--f-display); color: #fff; min-height: 1.6em; transition: opacity .3s; }
.tzb-sub { margin: 0; color: #9aa3d9; font-size: 13.5px; }
.tzb-dots span { display: inline-block; width: 6px; height: 6px; margin: 0 3px; border-radius: 50%; background: var(--brand-cyan); animation: tzbDot 1.2s infinite; }
.tzb-dots span:nth-child(2) { animation-delay: .15s; } .tzb-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes tzbDot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }

/* ---------- 4. cartão de embarque (criar / confirmar viagem) ---------- */
/* overlay: aparece ao ENTRAR na viagem, imprime, carimba e some sozinho (clique fora / Esc fecham antes) */
.bp-overlay { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 16px; background: rgba(11, 15, 56, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: bpOvIn .35s ease; }
.bp-overlay.out { animation: bpOvOut .45s ease forwards; pointer-events: none; }
@keyframes bpOvIn { from { opacity: 0; } }
@keyframes bpOvOut { to { opacity: 0; transform: translateY(-18px); } }
.bp-stage { width: min(100%, 720px); color: var(--brand-lavender); background: radial-gradient(120% 90% at 80% 110%, #3a2bb8 0%, #141a5c 45%, var(--brand-navy) 100%); border: 1px solid rgba(224,231,255,.14); border-radius: 22px; padding: 18px 20px 16px; box-shadow: 0 30px 80px rgba(0,0,0,.5); overflow: hidden; }
.bp-title { margin: 0 0 4px; text-align: center; color: #fff; font: 700 17px var(--f-display); }
.bp-sub { margin: 0 0 14px; text-align: center; color: #9aa3d9; font-size: 13.5px; }
.bp-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.bp-progress { height: 3px; margin: 14px -20px -16px; background: rgba(224,231,255,.12); overflow: hidden; }
.bp-progress i { display: block; height: 100%; width: 100%; background: var(--brand-grad); transform-origin: left; transform: scaleX(0); }
.bp-overlay.ticking .bp-progress i { animation: bpTick var(--bp-ttl, 5.2s) linear forwards; }
.bp-stage:hover .bp-progress i { animation-play-state: paused; }
@keyframes bpTick { to { transform: scaleX(1); } }
.bp-slot { position: relative; height: 10px; margin: 0 6%; border-radius: 10px; background: #05082a; box-shadow: inset 0 2px 6px rgba(0,0,0,.6); }
.bp-wrap { position: relative; overflow: hidden; margin-top: -6px; padding: 0 2% 22px; }
.bp-pass { position: relative; display: grid; grid-template-columns: 22% minmax(0, 1fr) 19%; border-radius: 18px; overflow: hidden; background: #f7f8ff; color: #141a5c; box-shadow: 0 24px 50px rgba(0,0,0,.45); transform: translateY(-105%); font-family: var(--f-display); }
.bp-pass.print { animation: bpPrint 1.4s cubic-bezier(.3, .9, .3, 1) forwards; }
.bp-pass.static { transform: none; }
@keyframes bpPrint { 0% { transform: translateY(-105%); } 70% { transform: translateY(3%); } 100% { transform: translateY(0); } }
.bp-brand { background: linear-gradient(160deg, #4f3cf0, #2a1fb5 70%, #1d168f); color: #fff; padding: 16px 10px; display: grid; justify-items: center; align-content: center; gap: 8px; text-align: center; }
.bp-brand img { width: 72%; max-width: 110px; height: auto; }
.bp-brand small { font: 500 clamp(7px, 1vw, 9px) var(--f-display); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.bp-main { padding: clamp(12px, 2.4vw, 22px); display: grid; gap: clamp(8px, 1.6vw, 14px); border-right: 2px dashed rgba(59,43,217,.35); min-width: 0; }
.bp-k { font: 600 clamp(8px, 1vw, 10px) var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: var(--brand-royal); }
.bp-route { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.bp-iata { font: 800 clamp(26px, 5.5vw, 52px)/1 var(--f-display); color: #141a5c; letter-spacing: .01em; }
.bp-city { font: 600 clamp(8px, 1.1vw, 11px) var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--brand-royal); margin-top: 4px; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-mid { position: relative; height: 20px; }
.bp-mid::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed rgba(59,43,217,.4); }
.bp-mid svg { position: absolute; top: 50%; left: 0; width: 22px; height: 22px; transform: translate(-50%, -50%) rotate(90deg); color: var(--brand-royal); stroke: none; background: #f7f8ff; }
.bp-pass.print .bp-mid svg { animation: bpMid 1.4s 1.2s ease-in-out forwards; }
.bp-pass.static .bp-mid svg { left: 100%; }
@keyframes bpMid { to { left: 100%; } }
.bp-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-top: 1px solid rgba(59,43,217,.15); padding-top: 10px; }
.bp-meta div { display: grid; gap: 2px; min-width: 0; }
.bp-meta b { font: 700 clamp(11px, 1.5vw, 15px) var(--f-display); color: #141a5c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-slogan { font: 500 clamp(8px, 1.1vw, 11px) var(--f-display); letter-spacing: .24em; text-transform: uppercase; color: var(--brand-royal); }
.bp-slogan::after { content: ""; display: block; width: 38px; height: 3px; margin-top: 6px; border-radius: 3px; background: var(--brand-cyan); }
.bp-stub { padding: clamp(10px, 2vw, 18px) clamp(8px, 1.4vw, 14px); display: grid; gap: 10px; align-content: space-between; justify-items: center; background: #f7f8ff; transform-origin: 0 50%; }
.bp-bars { display: flex; gap: 1.5px; height: clamp(54px, 9vw, 96px); align-items: stretch; width: 100%; justify-content: center; overflow: hidden; }
.bp-bars i { display: block; background: #141a5c; transform: scaleY(0); transform-origin: bottom; }
.bp-pass.print .bp-bars i { animation: bpBar .35s ease-out forwards; }
.bp-pass.static .bp-bars i { transform: none; }
@keyframes bpBar { to { transform: scaleY(1); } }
.bp-stubtxt { font: 700 clamp(8px, 1vw, 10px) var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-royal); text-align: center; line-height: 1.5; }
.bp-stamp { position: absolute; right: 22%; top: 58%; padding: 4px 12px; border: 3px solid #12b886; border-radius: 10px; color: #12b886; font: 800 clamp(14px, 2.6vw, 24px) var(--f-display); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-14deg) scale(2.2); opacity: 0; pointer-events: none; mix-blend-mode: multiply; }
.bp-pass.print .bp-stamp { animation: bpStamp .45s 2.4s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.bp-pass.static .bp-stamp { opacity: .85; transform: rotate(-14deg) scale(1); }
@keyframes bpStamp { to { opacity: .85; transform: rotate(-14deg) scale(1); } }
.bp-pass.tear .bp-stub { animation: bpTear 1s ease-in forwards; }
@keyframes bpTear { 0% { transform: none; } 30% { transform: rotate(4deg) translateX(6px); } 100% { transform: rotate(18deg) translate(40%, 60%); opacity: 0; } }
.bp-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 12px 22px; border: 0; border-radius: 999px; font: 700 14px var(--f-display); letter-spacing: .04em; color: #fff; background: var(--brand-royal); box-shadow: 0 10px 28px rgba(59,43,217,.4); cursor: pointer; transition: transform .15s; }
.bp-btn:active { transform: scale(.96); }
.bp-btn:disabled { opacity: .6; cursor: default; }
.bp-btn.ghost { background: transparent; border: 1px solid rgba(224,231,255,.3); box-shadow: none; color: var(--brand-lavender); }
.bp-btn svg { width: 16px; height: 16px; stroke: #fff; }
.bp-canvas { display: none; }
@media (max-width: 520px) { .bp-pass { grid-template-columns: 24% minmax(0, 1fr); } .bp-stub { display: none; } .bp-main { border-right: 0; } .bp-stamp { right: 8%; }
  .bp-meta { gap: 6px; } .bp-meta b { font-size: 12px; white-space: normal; line-height: 1.25; } }

/* ---------- 5. tag de bagagem "entrou no grupo" ---------- */
.tz-welcome { position: fixed; z-index: 1400; left: 50%; top: 18px; transform: translateX(-50%); width: min(92vw, 380px); display: grid; justify-items: center; gap: 14px; padding: 18px 16px 16px; border-radius: 24px; color: #fff; cursor: pointer;
  background: radial-gradient(120% 90% at 80% 110%, #3a2bb8 0%, #141a5c 45%, var(--brand-navy) 100%); border: 1px solid rgba(224,231,255,.14); box-shadow: 0 24px 60px rgba(0,0,0,.45); animation: tzWelcomeIn .5s cubic-bezier(.2, 1, .4, 1); }
.tz-welcome.out { animation: tzWelcomeOut .35s ease forwards; }
@keyframes tzWelcomeIn { from { opacity: 0; transform: translate(-50%, -20px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes tzWelcomeOut { to { opacity: 0; transform: translate(-50%, -16px); } }
.ltag { position: relative; width: 100%; min-height: 110px; padding: 16px 50px 16px 20px; border-radius: 22px 60px 60px 22px; background: linear-gradient(150deg, #1d2470, #0f1448); border: 1px solid rgba(224,231,255,.2); box-shadow: 0 20px 40px rgba(0,0,0,.45);
  display: grid; grid-template-columns: auto 1px 1fr; gap: 14px; align-items: center; transform-origin: 92% 50%; }
.ltag::after { content: ""; position: absolute; right: 18px; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--brand-navy); transform: translateY(-50%); box-shadow: inset 0 0 0 3px rgba(224,231,255,.3); }
.ltag .sep { height: 70%; background: rgba(224,231,255,.25); }
.ltag img { width: 64px; height: auto; }
.ltag .who { display: grid; gap: 2px; min-width: 0; }
.ltag .who small { font: 600 10px var(--f-display); letter-spacing: .22em; text-transform: uppercase; color: var(--brand-cyan); }
.ltag .who b { font: 700 17px var(--f-display); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ltag .who span { font-size: 12px; color: #9aa3d9; }
.tz-welcome.play .ltag { animation: tzSwing 1.6s cubic-bezier(.3, 1.4, .5, 1) forwards; }
@keyframes tzSwing { 0% { opacity: 0; transform: translateY(-60px) rotate(-28deg); } 40% { opacity: 1; transform: translateY(0) rotate(10deg); } 65% { transform: rotate(-5deg); } 85% { transform: rotate(2deg); } 100% { opacity: 1; transform: rotate(0); } }
.tz-welcome .avg2 { display: flex; }
.tz-welcome .avg2 .av { display: grid; place-items: center; margin-left: -8px; border: 2px solid var(--brand-navy); border-radius: 50%; overflow: hidden; color: #fff; font-weight: 700; transform: scale(0); }
.tz-welcome .avg2 .av:first-child { margin-left: 0; }
.tz-welcome .avg2 .av img { width: 100%; height: 100%; object-fit: cover; }
.tz-welcome.play .avg2 .av { animation: tzPop .4s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes tzPop { to { transform: scale(1); } }
.tz-welcome .line { font: 600 14px var(--f-display); color: #fff; opacity: 0; }
.tz-welcome.play .line { animation: tzFadeUp .5s 1.4s forwards; }
@keyframes tzFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tz-welcome.static .ltag, .tz-welcome.static .avg2 .av, .tz-welcome.static .line { animation: none; opacity: 1; transform: none; }

/* ---------- reduzir movimento: tudo acima vira estado final, sem animar ---------- */
@media (prefers-reduced-motion: reduce) {
  .home-hero__bg, .tzi-mask-path, .tzi-plane, .tzi-pin, .tzi-glow, .tzi-logo, .tzi-tag, .tzb-plane, .tzb-dots span, .tz-build,
  .bp-pass.print, .bp-pass.print .bp-mid svg, .bp-pass.print .bp-bars i, .bp-pass.print .bp-stamp, .bp-pass.tear .bp-stub,
  .tz-welcome, .tz-welcome .ltag, .tz-welcome .avg2 .av, .tz-welcome .line, .tz-bump, .fab-bar.tz-bump { animation: none !important; }
  .tzi-logo { clip-path: none; opacity: 1; } .tzi-tag { opacity: .9; } .tzi-route, .tzi-glow { display: none; }
  .bp-pass { transform: none; } .bp-pass .bp-bars i { transform: none; } .bp-pass .bp-mid svg { left: 100%; } .bp-pass .bp-stamp { opacity: .85; transform: rotate(-14deg) scale(1); }
  .tz-welcome .ltag, .tz-welcome .avg2 .av, .tz-welcome .line { opacity: 1; transform: none; }
}

/* ---------- Fotos: placeholder enquanto carrega + entrada suave ---------- */
/* a <img> mostra o próprio fundo enquanto baixa: um brilho discreto no lugar do "buraco" branco */
img[loading="lazy"]:not(.is-loaded) {
  background: linear-gradient(100deg, #e9ecf8 30%, #f5f6fd 50%, #e9ecf8 70%) 0 0 / 300% 100%;
  animation: imgShimmer 1.3s linear infinite;
}
img[loading="lazy"].is-loaded { animation: imgIn .45s ease both; }
@keyframes imgShimmer { to { background-position: -150% 0; } }
@keyframes imgIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  img[loading="lazy"]:not(.is-loaded), img[loading="lazy"].is-loaded { animation: none; }
}

/* escolha "juntar nesta viagem" × "roteiro separado" */
.pool-choice { display: grid; gap: 10px; margin-top: 16px; text-align: left; }
.pool-opt { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface, #fff); cursor: pointer; font: inherit; color: var(--text); text-align: left; transition: border-color .15s, background .15s; }
.pool-opt:hover, .pool-opt:focus-visible { border-color: var(--purple-2); background: var(--purple-softer); outline: none; }
.pool-opt > svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--purple-2); }
.pool-opt b { display: block; font-size: 14px; }
.pool-opt small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; margin-top: 2px; }

/* cidade/estado do ponto (cards da cidade e paradas do roteiro) */
.pcard-loc, .item-loc { display: flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .85); margin: 2px 0 4px; }
.pcard-loc svg, .item-loc svg { width: 12px; height: 12px; flex: none; }

/* notificações no celular: painel ocupa a largura da tela, encostado embaixo da barra, e rola por dentro */
@media (max-width: 560px) {
  .notif-pop { left: 8px !important; right: 8px !important; width: auto; max-height: calc(100vh - 140px); transform-origin: top center; }
  .notif-item { padding: 12px; }
  .notif-cta { min-height: 36px; }
}

/* toque (sem hover): o ponto já escolhido mostra que dá pra tirar com mais um toque */
@media (hover: none) {
  .pcard-add.added::after { content: '· tirar ✕'; font-weight: 600; opacity: .9; }
  .pcard-add.added:hover { background: #10b981; border-color: #10b981; }
  .pcard-add.added:hover span { display: inline; }
}
.pcard-add.na-viagem { cursor: default; background: rgba(16, 185, 129, .85); border-color: transparent; }
.pcard-add.na-viagem::after { content: none !important; }

/* ---------- convite de viagem (compartilhar) ---------- */
.invite-prev { position: relative; aspect-ratio: 4 / 5; max-height: 52vh; margin: 0 auto; border-radius: 18px; overflow: hidden; background: var(--brand-navy, #0b0f3b); color: #fff; }
.invite-prev > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.invite-ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,15,59,.55) 0%, rgba(11,15,59,.05) 35%, rgba(11,15,59,.55) 60%, rgba(11,15,59,.97) 100%); }
.invite-logo { position: absolute; left: 6.5%; top: 5.2%; width: 28%; height: auto; }
.invite-tx { position: absolute; left: 6.5%; right: 6.5%; bottom: 17%; display: grid; gap: 4px; }
.invite-tx small { color: #9fe9ff; font-weight: 700; font-size: 11px; letter-spacing: .12em; }
.invite-tx b { font-family: var(--f-display, inherit); font-size: clamp(24px, 6vw, 32px); line-height: 1.05; font-weight: 800; }
.invite-tx span { font-weight: 700; color: #e4e8ff; font-size: 14px; }
.invite-tx em { font-style: normal; color: #b9c0ef; font-size: 12.5px; }
.invite-cta { position: absolute; left: 6.5%; right: 6.5%; bottom: 5%; padding: 10px; border-radius: 999px; background: #3b2bd9; text-align: center; font-weight: 700; font-size: 13px; }
.invite-hint { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; text-align: center; }
.share-foot { flex-wrap: wrap; gap: 8px; }

/* ---------- parada ligada a um ponto turístico (busca no modal) ---------- */
.pt-pick { position: relative; display: grid; gap: 6px; }
.pt-pick > label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pt-pick-box { position: relative; }
.pt-pick-box input { width: 100%; padding-right: 34px; }
.pt-pick-ok { position: absolute; right: 10px; top: 50%; translate: 0 -50%; color: #10b981; display: grid; }
.pt-pick-ok svg { width: 18px; height: 18px; }
.pt-pick-res { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin-top: 4px; max-height: 300px; overflow: auto; padding: 6px; border-radius: 12px; background: var(--surface, #fff); border: 1px solid var(--border-strong); box-shadow: 0 18px 44px rgba(20,22,40,.18); }
.pt-pick-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 9px; background: none; cursor: pointer; text-align: left; font: inherit; color: var(--text); }
.pt-pick-row:hover, .pt-pick-row:focus-visible { background: var(--purple-softer); outline: none; }
.pt-pick-th { flex: none; width: 38px; height: 38px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--purple-softer); color: var(--purple-2); }
.pt-pick-th img { width: 100%; height: 100%; object-fit: cover; }
.pt-pick-th svg { width: 16px; height: 16px; }
.pt-pick-tx { display: grid; min-width: 0; }
.pt-pick-tx b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-pick-tx small { color: var(--muted); font-size: 11.5px; }
.pt-pick-new { border-top: 1px solid var(--border); border-radius: 0 0 9px 9px; margin-top: 4px; color: var(--purple-2); }
.pt-pick-new > svg { width: 18px; height: 18px; flex: none; margin: 0 10px; }
.pt-pick-hint { color: var(--muted); font-size: 12px; min-height: 1em; }

/* ingressos (afiliado) no card do ponto */
.pcard-acts { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.pcard-acts .pcard-add { margin-top: 0; }
.pcard-ticket { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.16); backdrop-filter: blur(8px); color: #fff; transition: background .2s; }
.pcard-ticket:hover { background: var(--purple-2); border-color: var(--purple-2); }
.pcard-ticket svg { width: 15px; height: 15px; }

/* ---------- escolher pontos deslizando ---------- */
.swipe-card { max-width: 440px; }
.swipe-deck { position: relative; height: min(62vh, 520px); user-select: none; touch-action: pan-y; }
.swipe-item { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; background: linear-gradient(135deg, #2a2f6b, #3b2bd9); color: #fff; box-shadow: 0 18px 40px rgba(11,15,59,.28); cursor: grab; touch-action: none; }
.swipe-item:active { cursor: grabbing; }
.swipe-item[data-k="1"] { transform: scale(.95) translateY(12px); }
.swipe-item[data-k="2"] { transform: scale(.9) translateY(24px); }
.swipe-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.swipe-grad { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(11,15,59,.92)); }
.swipe-info { position: absolute; left: 18px; right: 18px; bottom: 18px; display: grid; gap: 6px; }
.swipe-info .dcard-tag { position: static; justify-self: start; }
.swipe-info h3 { font-size: 24px; line-height: 1.1; margin: 0; color: #fff; }
.swipe-info small { display: flex; align-items: center; gap: 4px; color: #dfe4ff; font-weight: 600; }
.swipe-info small svg { width: 13px; height: 13px; }
.swipe-stamp { position: absolute; top: 22px; padding: 4px 12px; border: 3px solid; border-radius: 10px; font-weight: 800; font-size: 22px; letter-spacing: .08em; opacity: 0; transition: opacity .15s; }
.swipe-stamp.yes { left: 18px; color: #22c55e; transform: rotate(-12deg); }
.swipe-stamp.no { right: 18px; color: #f43f5e; transform: rotate(12deg); }
.swipe-item.vai-sim .swipe-stamp.yes, .swipe-item.vai-nao .swipe-stamp.no { opacity: 1; }
.swipe-acts { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 16px; }
.swipe-btn { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; border: 0; cursor: pointer; background: var(--surface, #fff); box-shadow: 0 8px 22px rgba(11,15,59,.16); transition: transform .15s; }
.swipe-btn:active { transform: scale(.92); }
.swipe-btn svg { width: 26px; height: 26px; }
.swipe-btn.no { color: #f43f5e; }
.swipe-btn.yes { color: #fff; background: #3b2bd9; }
.swipe-btn.yes svg { fill: currentColor; }
.swipe-count { min-width: 92px; text-align: center; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.swipe-hint { text-align: center; color: var(--muted); font-size: 12px; margin: 8px 0 0; }
.swipe-end { height: 100%; display: grid; align-content: center; justify-items: center; gap: 14px; text-align: center; padding: 10px; }
.swipe-end b { font-size: 20px; }
.swipe-end-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-height: 40vh; overflow: auto; }
.swipe-end-list span { padding: 5px 10px; border-radius: 999px; background: var(--purple-softer); color: var(--purple-2); font-size: 12.5px; font-weight: 600; }
.swipe-end small { color: var(--muted); }

.link-btn { justify-self: start; padding: 0; border: 0; background: none; color: var(--purple-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* deslizar → "em quantos dias?" + prévia dos dias */
.sw-dias { display: flex; align-items: center; justify-content: center; gap: 12px; font-weight: 600; }
.sw-stepper { display: inline-flex; align-items: center; gap: 10px; }
.sw-stepper .mini { width: 34px; height: 34px; padding: 0; justify-content: center; font-size: 18px; }
.sw-stepper b { min-width: 22px; text-align: center; font-size: 20px; }
.sw-previa { width: 100%; max-height: 34vh; overflow: auto; display: grid; gap: 8px; text-align: left; }
.sw-dia { display: flex; gap: 10px; align-items: flex-start; }
.sw-dia-n { flex: none; width: 24px; height: 24px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.sw-dia > div { display: flex; flex-wrap: wrap; gap: 5px; }
.sw-dia > div span { padding: 3px 9px; border-radius: 999px; background: var(--purple-softer); color: var(--purple-2); font-size: 12px; font-weight: 600; }

/* "em qual roteiro colocar?" — lista das viagens abertas */
.trip-choice { max-height: 52vh; overflow: auto; }
.trip-opt { align-items: center; }
.trip-opt-th { flex: none; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--purple-softer); color: var(--purple-2); }
.trip-opt-th img { width: 100%; height: 100%; object-fit: cover; }
.trip-opt-th svg { width: 20px; height: 20px; margin: 0; }
.trip-opt-tag { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 700; background: #fff4e5; color: #b45309; }
.trip-opt-tag.ok { background: #e7f8ef; color: #047857; }

.trip-choice-foot { justify-content: center; gap: 12px; }
.trip-choice-foot > span { color: var(--muted); font-size: 13px; }

/* filtro por tipo de ponto na página da cidade */
.cat-filter { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; margin-top: 4px; scrollbar-width: none; }
.cat-filter::-webkit-scrollbar { display: none; }
.cat-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; min-height: 38px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface, #fff); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.cat-chip span { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.cat-chip:hover { border-color: var(--purple-2); }
.cat-chip.active { background: var(--purple-2); border-color: var(--purple-2); color: #fff; }
.cat-chip.active span { color: rgba(255,255,255,.8); }

.swipe-done { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px auto 0; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--purple-2); background: var(--purple-softer); color: var(--purple-2); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.swipe-done[hidden] { display: none; }
.swipe-done svg { width: 16px; height: 16px; }
.swipe-done:hover { background: var(--purple-2); color: #fff; }

/* botão "Adicionar" + ingressos: os dois numa linha, o adicionar ocupa o espaço que sobra */
.pcard-acts { width: 100%; }
.pcard-acts .pcard-add { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: auto; }
.pcard-acts .pcard-add span { overflow: hidden; text-overflow: ellipsis; }
.fab-bar > span b { display: inline-block; }

/* ---------- Painel admin: abas + usuários ---------- */
.adm-tabs { display: flex; gap: 6px; margin: 4px 0 16px; border-bottom: 1px solid var(--border); }
.adm-tabs button { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 12px; font: inherit; font-weight: 700; font-size: 14px; color: var(--muted); cursor: pointer; margin-bottom: -1px; }
.adm-tabs button svg { width: 16px; height: 16px; }
.adm-tabs button.on { color: var(--purple-2); border-bottom-color: var(--purple-2); }
.adm-users { display: flex; flex-direction: column; gap: 8px; }
.adm-user { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px; cursor: pointer; box-shadow: var(--shadow); }
.adm-user:hover { border-color: var(--purple-3); }
.adm-user-av { position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #3b2bd9, #8b5cf6); color: #fff; font-weight: 800; }
.adm-user-av i { font-style: normal; }
.adm-user-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.adm-user-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-user-id b { font-size: 14.5px; }
.adm-user-id small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-tag { font-style: normal; font-size: 10.5px; font-weight: 700; color: #e8590c; background: #fff1e6; border-radius: 6px; padding: 1px 6px; margin-left: 4px; }
.adm-user-nums { display: flex; gap: 16px; flex: none; }
.adm-user-nums span { display: flex; flex-direction: column; align-items: center; font-size: 11px; color: var(--muted); }
.adm-user-nums b { font-size: 16px; color: var(--text, #1b1e28); }
@media (max-width: 640px) {
  .adm-user { flex-wrap: wrap; }
  .adm-user-nums { width: 100%; justify-content: space-around; padding-top: 6px; border-top: 1px solid var(--border); }
}

.adm-trips { display: flex; flex-direction: column; gap: 8px; }
.adm-trip { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.adm-trip-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-trip-info b { font-size: 14.5px; }
.adm-trip-info small { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.adm-trip-info small svg { width: 13px; height: 13px; }
.adm-st { flex: none; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px; }
.adm-st.prog { background: #ece9ff; color: #3b2bd9; }
.adm-st.and { background: #e3f9ee; color: #12805c; }
.adm-st.fim { background: #eef0f4; color: #5b6275; }
@media (max-width: 640px) { .adm-trip { flex-wrap: wrap; } .adm-trip-info { flex-basis: 100%; } }