:root {
  --cor-fundo: #0d0d0d;
  --cor-primaria: #a9791f;
  --cor-primaria-escura: #8a6119;
  --cor-vermelho: #7a2020;
  --cor-texto: #f0f0f0;
  --cor-texto-secundario: #a3a3a3;
  --cor-card: #2f2f2f;
  --cor-borda: #454545;
  --cor-erro: #ff6b6b;
  --sombra-card: 0 2px 10px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.25);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #1a1a1a;
  color: var(--cor-texto);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
  /* Proteção contra qualquer elemento (ex: input nativo de data/arquivo, que não encolhe
     bem em tela estreita) empurrar a página inteira pro lado - nunca deve rolar na horizontal */
  overflow-x: hidden;
}

input, select, button, textarea { font-family: inherit; font-size: 16px; }

.hidden { display: none !important; }

.view { display: none; padding: 16px; padding-bottom: calc(24px + var(--safe-bottom)); max-width: 1100px; margin: 0 auto; }
.view.view-ativa { display: block; }

/* ---------- LOGIN ---------- */
#view-login.view-ativa, #view-convite.view-ativa, #view-onboarding.view-ativa {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, #262626, var(--cor-fundo) 70%);
  padding: 24px;
  padding-top: calc(24px + var(--safe-top));
}
.login-card {
  background: #2f2f2f;
  color: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  width: 100%;
  max-width: 340px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.login-logo { width: 88px; height: 88px; object-fit: contain; margin-bottom: 4px; }
.login-card h1 { margin: 4px 0; font-size: 22px; }
.login-card .muted { color: #aaa; }
.muted { color: var(--cor-texto-secundario); font-size: 14px; }
.pin-input {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 32px;
  letter-spacing: 12px;
  padding: 12px;
  margin: 20px 0 14px;
  border: 2px solid var(--cor-borda);
  border-radius: 12px;
}
.pin-input:focus { outline: none; border-color: var(--cor-primaria); }
.erro { color: var(--cor-erro); font-size: 14px; min-height: 18px; }

#login-senha-area { margin-bottom: 14px; }
.senha-input {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 18px;
  padding: 12px;
  margin-bottom: 10px;
  border: 2px solid var(--cor-borda);
  border-radius: 12px;
}
.senha-input:focus { outline: none; border-color: var(--cor-primaria); }

.onboarding-passo { display: flex; gap: 12px; text-align: left; margin: 16px 0; }
.onboarding-check {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #666;
  display: flex; align-items: center; justify-content: center; font-size: 14px; margin-top: 2px;
}
.onboarding-check.feito { border-color: #2e9e4f; background: #2e9e4f; color: #fff; }
.onboarding-passo-texto { flex: 1; }
.onboarding-passo-texto p { margin: 4px 0 8px; font-size: 13px; }

.convite-pin-destaque {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: normal;
  word-break: break-all;
  color: var(--cor-primaria);
  background: rgba(255,255,255,.06);
  border: 2px solid var(--cor-primaria);
  border-radius: 12px;
  padding: 10px;
  margin: 4px 0 14px;
}

/* ---------- APP HEADER ---------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cor-fundo);
  color: #fff;
  padding: 12px 16px;
  padding-top: calc(12px + var(--safe-top));
  font-weight: 700;
  letter-spacing: .5px;
  border-bottom: 2px solid var(--cor-primaria);
}
.app-header-nav { margin-left: auto; display: flex; gap: 6px; }
.btn-icon {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 20px;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 8px;
  line-height: 1;
}
.btn-icon:hover { background: rgba(255,255,255,.1); }
#app-header .btn-icon { color: #fff; }

/* ---------- TOAST ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + var(--safe-bottom));
  transform: translate(-50%, 20px);
  background: #222;
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
  z-index: 100;
  max-width: 90vw;
  text-align: center;
}
.toast.toast-show { opacity: 1; transform: translate(-50%, 0); }
.toast.toast-erro { background: var(--cor-erro); }

.banner-atualizacao {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--cor-primaria);
  color: #fff;
  padding: 10px 16px;
  padding-top: calc(10px + var(--safe-top));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.banner-atualizacao .btn { padding: 6px 14px; background: #0d0d0d; color: #fff; box-shadow: none; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 18px;
  border-radius: 10px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  font-size: 15px;
  transition: filter .15s ease, background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.btn-block { width: 100%; }
.btn-sm { padding: 6px 10px; font-size: 13px; }
.btn-primary { background: var(--cor-primaria); color: #fff; box-shadow: 0 2px 8px rgba(169,121,31,.35); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary { background: #454545; color: #fff; }
.btn-secondary:hover { background: #525252; }
.btn-ghost { background: transparent; color: var(--cor-texto); border: 1px solid var(--cor-borda); }
.btn-ghost:hover { background: rgba(255,255,255,.06); }
.btn-danger { background: rgba(255,107,107,.15); color: var(--cor-erro); }
.btn-danger:hover { background: rgba(255,107,107,.25); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; cursor: default; transform: none; }

/* ---------- DASHBOARD ---------- */
.dashboard-saudacao { margin-bottom: 18px; }
.dashboard-saudacao-ola { color: var(--cor-texto-secundario); font-size: 14px; margin: 0; }
.dashboard-saudacao h1 { margin: 2px 0 0; font-size: 26px; }

.rede-preview-card { background: var(--cor-card); border: 1px solid var(--cor-borda); border-radius: 14px; padding: 14px 16px; margin-bottom: 20px; box-shadow: var(--sombra-card); }
.rede-preview-titulo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rede-preview-titulo h3 { margin: 0; font-size: 15px; }
.btn-link { background: none; border: none; color: var(--cor-primaria); font-weight: 700; font-size: 13px; cursor: pointer; padding: 0; }
.rede-preview-lista { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; }
.rede-avatar { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; width: 56px; background: none; border: none; cursor: default; font: inherit; }
.rede-avatar-circulo {
  width: 48px; height: 48px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 15px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rede-avatar-nome { font-size: 11px; color: var(--cor-texto-secundario); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56px; }
.rede-avatar-add { cursor: pointer; }
.rede-avatar-add .rede-avatar-circulo { background: rgba(255,255,255,.05); color: var(--cor-primaria); border: 2px dashed var(--cor-primaria); font-size: 22px; }

.view-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.lista-rotas { display: grid; grid-template-columns: 1fr; gap: 12px; }
.rota-card {
  background: var(--cor-card);
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--accent, var(--cor-primaria));
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--sombra-card);
  transition: box-shadow .15s ease, transform .15s ease;
}
.rota-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.12); transform: translateY(-1px); }
.rota-card-info {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 12px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.rota-card-titulo { font-weight: 700; }
.rota-card-destino { color: var(--cor-primaria); font-weight: 700; margin: 2px 0; }
.rota-card-meta { font-size: 13px; color: var(--cor-texto-secundario); }
.rota-card-participantes { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.rota-card-avatar {
  width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin-left: -8px; border: 2px solid var(--cor-card);
}
.rota-card-avatar:first-child { margin-left: 0; }
.rota-card-participantes-texto { font-size: 12px; color: var(--cor-texto-secundario); margin-left: 4px; }
.rota-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.badge-finalizada { font-size: 11px; font-weight: 700; color: #5fd68a; background: rgba(46,158,79,.18); padding: 2px 8px; border-radius: 20px; margin-left: 6px; vertical-align: middle; }

/* ---------- EDITOR ---------- */
.card { background: var(--cor-card); border: 1px solid var(--cor-borda); border-radius: 14px; padding: 16px; margin-bottom: 16px; box-shadow: var(--sombra-card); }
.card legend { font-weight: 700; padding: 0 6px; }
.card label { display: block; margin-bottom: 10px; font-size: 13px; color: var(--cor-texto-secundario); }
.card input, .card select { display: block; width: 100%; margin-top: 4px; padding: 10px; border: 1px solid var(--cor-borda); border-radius: 8px; transition: border-color .15s ease; }
.card input:focus, .card select:focus { outline: none; border-color: var(--cor-primaria); }
.card input[type=color] { padding: 2px; height: 42px; }
.card input[readonly] { cursor: default; opacity: .7; }
.card input[readonly]:focus { border-color: var(--cor-borda); }
.checkbox { display: flex !important; align-items: center; gap: 8px; }
.checkbox input { width: auto !important; }
.mostrar-senha-label { font-size: 13px; margin: -4px 0 10px; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 0 12px; }

.parada-row { border: 1px dashed var(--cor-borda); border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.parada-row-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.parada-num {
  width: 28px; height: 28px; border-radius: 50%; color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.p-tipo { flex: 1; min-width: 110px; padding: 8px; border-radius: 8px; border: 1px solid var(--cor-borda); }
.p-cor { width: 36px; height: 36px; padding: 2px; border: 1px solid var(--cor-borda); border-radius: 8px; }
.parada-row-actions { margin-left: auto; display: flex; gap: 2px; }
.parada-row-actions .btn-icon { color: var(--cor-texto-secundario); font-size: 16px; padding: 4px 6px; }

.simple-row { display: flex; gap: 8px; margin-bottom: 8px; }
.simple-row input { flex: 1; padding: 10px; border: 1px solid var(--cor-borda); border-radius: 8px; }
.simple-row .btn-icon { color: var(--cor-texto-secundario); }

.sugestao-row { margin-bottom: 10px; }
.sugestao-row-top { display: flex; gap: 8px; margin-bottom: 6px; }
.sugestao-row-top input { flex: 1; padding: 10px; border: 1px solid var(--cor-borda); border-radius: 8px; }
.sugestao-row .sg-tipo { flex: 0 0 150px; padding: 10px 6px; border: 1px solid var(--cor-borda); border-radius: 8px; }
.sugestao-row .s-descricao { width: 100%; padding: 8px 10px; border: 1px solid var(--cor-borda); border-radius: 8px; font-size: 13px; }
.sugestao-row .btn-icon { color: var(--cor-texto-secundario); }

.atividade-row { border: 1px dashed var(--cor-borda); border-radius: 10px; padding: 12px; margin-bottom: 12px; }
/* input nativo de data não encolhe direito em tela estreita (o texto corta) - por isso
   fica sozinho na própria linha (flex-basis:100% força a quebra), com o resto embaixo */
.atividade-row-top { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.atividade-row-top .a-dia { flex: 1 1 100%; min-width: 0; }
.atividade-row-top .a-horario { flex: 1 1 auto; min-width: 0; }
.atividade-row-top .a-icone { flex: 0 0 50px; min-width: 0; text-align: center; }
.atividade-row-top input { padding: 8px; border: 1px solid var(--cor-borda); border-radius: 8px; box-sizing: border-box; }
.atividade-row input[type=text] { width: 100%; padding: 8px 10px; border: 1px solid var(--cor-borda); border-radius: 8px; margin-top: 6px; box-sizing: border-box; }

/* Mesma lógica: o botão nativo "Escolher arquivo" precisa da largura toda pra não cortar,
   então fica na própria linha, com o nome + botão de remover embaixo */
.destaque-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.destaque-row .upload-row { flex: 1 1 100%; min-width: 0; }
.destaque-row .d-nome { flex: 1 1 auto; min-width: 0; padding: 10px; border: 1px solid var(--cor-borda); border-radius: 8px; box-sizing: border-box; }

.veiculo-row .v-placa { flex: 0 0 110px; text-transform: uppercase; padding: 10px; border: 1px solid var(--cor-borda); border-radius: 8px; }
.veiculo-row .v-modelo { flex: 1; padding: 10px; border: 1px solid var(--cor-borda); border-radius: 8px; }

.participante-add-row { display: flex; gap: 8px; margin: 4px 0 10px; flex-wrap: wrap; }
.participante-add-row select { flex: 1; min-width: 160px; padding: 10px; border: 1px solid var(--cor-borda); border-radius: 8px; }
.participante-add-row .btn { flex-shrink: 0; }

.editor-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.paradas-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.upload-field label { font-weight: 600; }
.upload-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.upload-row input[type=file] { flex: 1; min-width: 0; padding: 8px 0; border: none; }
.upload-preview {
  width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--cor-borda); flex-shrink: 0;
}
.avatar-preview { border-radius: 50%; }
.avatar-foto { object-fit: cover; display: inline-block; }
.rede-item-avatar { display: flex !important; align-items: center; gap: 8px; }
.rede-item-badge {
  margin-left: auto; font-size: 11px; font-weight: 700; color: var(--cor-texto-secundario);
  background: rgba(255,255,255,.06); padding: 3px 10px; border-radius: 20px; white-space: nowrap;
}
.rede-item-avatar-circulo {
  width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.importar-maps-row { display: flex; gap: 8px; margin-bottom: 14px; }
.importar-maps-row input { flex: 1; padding: 10px; border: 1px solid var(--cor-borda); border-radius: 8px; min-width: 0; }
.parada-busca { display: flex; gap: 8px; margin-top: 10px; }
.parada-busca .p-busca { flex: 1; }
.parada-mapa { margin-top: 8px; }
.parada-mapa-leaflet { height: 200px; border-radius: 8px; overflow: hidden; border: 1px solid var(--cor-borda); background: #242424; }
/* O mapa é o motivo de existir dessa tela - o resto (título, aviso, botões) fica o mais
   compacto possível pra sobrar o máximo de altura pro Leaflet */
.mapa-ao-vivo-card { padding: 10px 12px; }
.mapa-ao-vivo-topo { margin-bottom: 6px; }
.mapa-ao-vivo-topo h3 { margin: 0 0 2px; font-size: 15px; }
.mapa-ao-vivo-topo p { margin: 0; font-size: 12px; }
.mapa-ao-vivo-leaflet { height: min(64vh, 620px); border-radius: 10px; overflow: hidden; border: 1px solid var(--cor-borda); background: #242424; margin-top: 8px; }
.mapa-ao-vivo-marcador { background: var(--cor-primaria); color: #0d0d0d; font-weight: 800; font-size: 11px; padding: 2px 8px; border-radius: 20px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.mapa-ao-vivo-marcador-emergencia { background: var(--cor-erro); color: #fff; animation: pulso-emergencia 1s ease-in-out infinite; }
@keyframes pulso-emergencia {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,107,.7); }
  50% { box-shadow: 0 0 0 8px rgba(255,107,107,0); }
}
.mapa-ao-vivo-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.mapa-ao-vivo-participantes { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; }
.mapa-ao-vivo-participante-chip {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0; background: rgba(255,255,255,.05);
  border: 1px solid var(--cor-borda); border-radius: 20px; padding: 4px 10px 4px 4px; color: var(--cor-texto);
  font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.mapa-ao-vivo-participante-chip:active { transform: scale(.97); }
.mapa-ao-vivo-participante-avatar {
  width: 24px; height: 24px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.aviso-emergencia { padding: 10px 12px; background: rgba(255,107,107,.12); border-color: var(--cor-erro); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.aviso-emergencia p { margin: 0; font-weight: 700; color: var(--cor-erro); font-size: 13px; }
.parada-info { margin-top: 8px; }
.parada-info-nome { margin: 0; font-weight: 700; font-size: 14px; min-height: 20px; }
.parada-info-rota { margin: 2px 0 0; font-size: 12.5px; }

/* ---------- HISTÓRICO / PINS ---------- */
.historico-item, .pin-item, .rede-item { background: var(--cor-card); border: 1px solid var(--cor-borda); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; font-size: 14px; box-shadow: var(--sombra-card); }
.rede-item-checkbox { display: flex !important; align-items: center; gap: 8px; cursor: pointer; }
.rede-item-checkbox input { width: auto !important; }
.historico-data { color: var(--cor-texto-secundario); font-size: 12px; margin-top: 2px; }
.pin-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pin-item-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- POSTER ---------- */
.poster-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
#poster-root { display: flex; justify-content: center; }

/* ---------- SUGESTÕES DE PARADA ---------- */
#painel-sugestoes { margin-top: 16px; }
.lista-sugestoes-votacao { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.sugestao-card { background: var(--cor-card); border: 1px solid var(--cor-borda); border-radius: 10px; padding: 12px 14px; box-shadow: var(--sombra-card); }
.sugestao-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.sugestao-status { font-size: 12.5px; color: var(--cor-texto-secundario); }
.sugestao-votos { font-size: 13px; color: var(--cor-texto-secundario); margin: 6px 0; }
.sugestao-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.sugestao-explicar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sugestao-explicar .sg-mensagem { flex: 1; min-width: 180px; padding: 8px 10px; border: 1px solid var(--cor-borda); border-radius: 8px; }
#form-nova-sugestao-area h4 { margin-top: 0; }
#aviso-confirmar-participacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }

.poster {
  --cor1: #f5a623;
  --cor2: #0d0d0d;
  width: 100%;
  max-width: 900px;
  background: var(--cor-card);
  color: var(--cor-texto);
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.poster-hero {
  background: linear-gradient(120deg, var(--cor2), #1c1c1c 60%, var(--cor2));
  color: #fff;
  padding: 18px 20px;
  display: flex;
  align-items: stretch;
  gap: 18px;
  flex-wrap: wrap;
  position: relative;
  min-height: 150px;
}
.poster-hero-brand { display: flex; align-items: center; gap: 10px; min-width: 90px; }
.poster-brand-logo { font-size: 38px; display: flex; align-items: center; }
.poster-brand-logo img { height: 52px; width: 52px; object-fit: contain; }
.poster-brand-nome { font-weight: 800; letter-spacing: 1px; font-size: 17px; }
.poster-hero-titulo { flex: 0 1 260px; min-width: 200px; align-self: center; }
.poster-hero-saida { font-size: 14px; font-weight: 700; line-height: 1.35; }
.poster-hero-saida strong { font-size: 19px; }
.poster-hero-destino { color: var(--cor1); font-weight: 800; font-size: 15px; margin-top: 8px; line-height: 1.3; }
.poster-hero-destino strong { font-size: 24px; display: block; }
/* Banner panorâmico: a foto cresce pra ocupar o resto do cabeçalho (em vez de ficar
   presa numa miniatura fixa de 160px), dando um efeito de capa mais profissional.
   Altura fixa (não só min-height) é o que faz o object-fit:cover recortar direito -
   sem isso, uma foto no aspecto errado esticava a altura toda em vez de ser cortada */
.poster-hero-foto { width: auto; min-width: 260px; height: 140px; object-fit: cover; border-radius: 12px; flex: 1 1 260px; align-self: stretch; }

/* Em telas estreitas o logo/organizador quebra pra linha própria (não cabe ao lado do
   título) - vira uma faixa cheia com divisória, em vez de ficar flutuando sozinho e
   apertado no canto */
@media (max-width: 639px) {
  .poster-hero-brand { flex-basis: 100%; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.14); }
  .poster-brand-logo img { height: 42px; width: 42px; }
  .poster-brand-nome { font-size: 18px; }
}
.poster-hero-foto-placeholder { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); font-size: 48px; }

.poster-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--cor2);
  border-top: 2px solid var(--cor1);
  border-bottom: 2px solid var(--cor1);
}
.poster-stat {
  padding: 10px 12px;
  border-right: 1px solid rgba(255,255,255,.12);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.poster-stat:nth-child(2n) { border-right: none; }
.poster-stat-label { font-size: 10px; letter-spacing: .5px; color: var(--cor1); font-weight: 700; }
.poster-stat-valor { font-size: 13px; font-weight: 700; }

.poster-main { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 16px; }
/* !important pra garantir que sempre vence, mesmo contra as regras de export/desktop
   (mais específicas) que forçam 2 colunas - quando não há info nenhuma, é 1 coluna sempre */
.poster-main.poster-main-sem-info { grid-template-columns: 1fr !important; }
.poster-main-sem-info .poster-zona-info { display: none; }
.poster-zona-rota { display: flex; flex-direction: column; gap: 16px; }

.poster-zona-info { display: grid; grid-template-columns: 1fr; gap: 10px; }
.poster-tile { border: 1px solid var(--cor-borda); border-radius: 10px; padding: 10px 12px; background: rgba(255,255,255,.02); }
.poster-galeria-tile { grid-column: 1 / -1; }

.poster-datas { border: 2px solid var(--cor1); border-radius: 10px; padding: 10px 12px; margin-bottom: 0; }
.poster-datas-titulo { font-weight: 800; font-size: 13px; margin-bottom: 8px; }
.poster-datas-linha { display: flex; align-items: center; justify-content: space-around; text-align: center; }
.poster-datas-label { font-size: 10px; color: var(--cor-texto-secundario); font-weight: 700; }
.poster-datas-data { font-weight: 800; font-size: 15px; }
.poster-datas-dia { font-size: 10px; color: var(--cor-texto-secundario); }
.poster-datas-seta { font-size: 20px; color: var(--cor1); font-weight: 800; }

.stop-list { list-style: none; margin: 0; padding: 0; }
.stop-card { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--cor-borda); }
.stop-card:last-child { border-bottom: none; }
.stop-num { width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stop-body { flex: 1; }
.stop-title-row { display: flex; align-items: center; justify-content: space-between; }
.stop-label { font-weight: 800; font-size: 12px; letter-spacing: .5px; }
.stop-maps-link { text-decoration: none; font-size: 14px; }
.stop-nome { font-weight: 700; font-size: 15px; }
.stop-line { font-size: 12.5px; color: var(--cor-texto-secundario); display: flex; gap: 4px; align-items: baseline; margin-top: 2px; }
.badge-rodovia { background: var(--cor1); color: #0d0d0d; font-size: 10px; font-weight: 800; padding: 0 5px; border-radius: 4px; }

.poster-mapa-real { border-radius: 10px; overflow: hidden; border: 1px solid var(--cor-borda); background: var(--cor-card); min-height: 120px; display: flex; align-items: center; justify-content: center; }
.poster-mapa-real img { width: 100%; height: auto; display: block; }

.poster-dia-titulo { background: var(--cor2); color: var(--cor1); font-weight: 800; font-size: 12.5px; letter-spacing: .5px; padding: 6px 10px; border-radius: 6px; margin-bottom: 8px; }
.poster-dia-lista { list-style: none; margin: 0; padding: 0; }
.poster-atividade { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--cor-borda); align-items: baseline; }
.poster-atividade:last-child { border-bottom: none; }
.poster-atividade-horario { font-weight: 700; font-size: 12px; color: var(--cor1); flex-shrink: 0; }
.poster-atividade-corpo { flex: 1; }
.poster-atividade-titulo { font-weight: 700; font-size: 14px; }
.poster-atividade-descricao { font-size: 12.5px; color: var(--cor-texto-secundario); }

.poster-galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.poster-galeria-item { margin: 0; }
.poster-galeria-item img { width: 100%; height: 100px; object-fit: cover; border-radius: 8px; display: block; }
.poster-galeria-item figcaption { font-size: 11px; text-align: center; margin-top: 4px; color: var(--cor-texto-secundario); }

.poster-sugestao-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.poster-sugestao-card { border: 1px solid var(--cor-borda); border-radius: 8px; padding: 8px 10px; }
.poster-sugestao-nome { font-weight: 700; font-size: 13px; }
.poster-sugestao-descricao { font-size: 11.5px; color: var(--cor-texto-secundario); margin-top: 2px; }

.poster-card { border: 1px solid var(--cor-borda); border-radius: 10px; padding: 12px; }
.poster-card h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .5px; }
.poster-card ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--cor-texto-secundario); }
.poster-card ul li { margin-bottom: 4px; }

.poster-tagline {
  background: var(--cor2);
  color: var(--cor1);
  text-align: center;
  font-weight: 800;
  font-size: 12.5px;
  padding: 12px;
  letter-spacing: .5px;
}

/* ---------- RESPONSIVE (tablet/desktop) ---------- */
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .lista-rotas { grid-template-columns: repeat(2, 1fr); }
  .poster-stats { grid-template-columns: repeat(4, 1fr); }
  .poster-stat:nth-child(2n) { border-right: 1px solid rgba(255,255,255,.12); }
  .poster-stat:nth-child(4n) { border-right: none; }
}

@media (min-width: 860px) {
  .lista-rotas { grid-template-columns: repeat(3, 1fr); }
  .poster-main { grid-template-columns: 1.2fr 1fr; }
  .poster-zona-info { grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; align-items: start; }
}

@media print {
  .app-header, .poster-actions, #toast { display: none !important; }
  body { background: #fff; }
}

/* ---------- EXPORTAÇÃO DA IMAGEM (sempre horizontal, independente da tela de quem baixa) ----------
   As regras responsivas acima usam @media (min-width...), que testa o tamanho da JANELA do
   navegador - não o tamanho do próprio pôster. Por isso, um clone largo (1600px) do pôster
   escondido fora da tela NÃO ativa esses breakpoints num celular (viewport continua estreita).
   Estas regras abaixo, por classe (sem @media), valem sempre, garantindo o mesmo layout
   profissional e horizontal na imagem baixada não importa o aparelho de quem gerou. */
.poster.poster-exportar { max-width: 1600px; }
.poster-exportar .poster-stats { grid-template-columns: repeat(4, 1fr); }
.poster-exportar .poster-stat:nth-child(2n) { border-right: 1px solid rgba(255,255,255,.12); }
.poster-exportar .poster-stat:nth-child(4n) { border-right: none; }
.poster-exportar .poster-main { grid-template-columns: 1.2fr 1fr; }
.poster-exportar .poster-zona-info { grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; align-items: start; }