: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; }

/* Base compartilhada de todo campo de texto/seleção do app - antes cada linha (parada,
   atividade, veículo, sugestão...) redeclarava o mesmo padding/borda/raio na mão; agora é
   um lugar só, e cada seletor específico só define o que realmente muda nele (largura,
   flex, uppercase etc) */
input:not([type=color]):not([type=file]):not([type=checkbox]):not([type=radio]), select, textarea {
  padding: 10px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type=color] { padding: 2px; height: 42px; border: 1px solid var(--cor-borda); border-radius: 8px; }

/* Anel de foco de verdade (antes só trocava a cor da borda, sem nenhum indicador visível
   pra quem navega por teclado) */
input:not([type=file]):not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px rgba(169,121,31,.25);
}

.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); box-shadow: 0 0 0 3px rgba(169,121,31,.25); }
.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); box-shadow: 0 0 0 3px rgba(169,121,31,.25); }

.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: var(--cor-borda); color: #fff; }
.btn-secondary:hover { filter: brightness(1.15); }
.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; }
/* Pega qualquer ícone gerado por Icons.svg() (todos usam stroke="currentColor") - cada um
   já vem com o tamanho certo via width/height próprios, então aqui só alinha com o texto
   ao lado (baseline) e garante que não encolhe dentro de um flex, sem sobrescrever tamanho */
svg[stroke="currentColor"] { vertical-align: -3px; flex-shrink: 0; }

/* ---------- 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; }

.dashboard-stats { background: var(--cor-card); border: 1px solid var(--cor-borda); border-radius: 14px; padding: 14px 16px; margin-bottom: 20px; box-shadow: var(--sombra-card); }
.dashboard-stats-titulo { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.dashboard-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dashboard-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: var(--cor-primaria); }
.dashboard-stat-val { font-size: 17px; font-weight: 800; color: var(--cor-texto); }
.dashboard-stat-label { font-size: 10.5px; color: var(--cor-texto-secundario); text-transform: uppercase; letter-spacing: .03em; }

.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; }

.rotas-tabs { display: flex; gap: 4px; background: var(--cor-card); border: 1px solid var(--cor-borda); border-radius: 10px; padding: 3px; }
.rotas-tab {
  background: none; border: none; color: var(--cor-texto-secundario); font: inherit; font-weight: 700;
  font-size: 13px; padding: 7px 14px; border-radius: 8px; cursor: pointer;
}
.rotas-tab-ativa { background: var(--cor-primaria); color: #2a1c05; }

.rotas-filtros { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.rotas-filtros input[type=search] { flex: 1; min-width: 160px; }
.rotas-filtros select { flex: 1; min-width: 130px; }
.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;
  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;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

/* Capa: usa a foto de cabeçalho da rota (mesma que já existe pro pôster); sem foto, cai
   num gradiente com a cor do avatar da rota, pra sempre ter algo visualmente distinto */
.rota-card-capa {
  position: relative;
  height: 112px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  border-radius: 13px 13px 0 0;
}
.rota-card-capa::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,0) 40%, rgba(13,13,13,.88) 100%);
}
/* Base compartilhada de todo "chip"/badge do app (pill de status, tipo, marcador no mapa)
   - cada um só define cor/posição/comportamento específico por cima disso */
.chip,
.rota-card-badge,
.badge-finalizada,
.rede-item-badge,
.mapa-ao-vivo-marcador,
.mapa-ao-vivo-tipo-chip,
.mapa-ao-vivo-participante-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.rota-card-badge {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 1;
  font-weight: 700;
}
.rota-card-badge-andamento { background: rgba(169,121,31,.9); color: #2a1c05; }
.rota-card-badge-fim { background: rgba(46,158,79,.9); color: #06210f; }
.rota-card-capa-texto { position: absolute; left: 12px; right: 12px; bottom: 9px; z-index: 1; }
.rota-card-titulo { font-weight: 700; color: #fff; }
.rota-card-destino { color: #e8d8b8; font-weight: 700; font-size: 13px; margin: 2px 0 0; }

.rota-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--cor-borda);
}
.rota-card-stat { background: var(--cor-card); padding: 8px 6px; text-align: center; }
.rota-card-stat-val { font-size: 13px; font-weight: 700; color: var(--cor-texto); }
.rota-card-stat-label { font-size: 9.5px; color: var(--cor-texto-secundario); text-transform: uppercase; letter-spacing: .03em; margin-top: 1px; }

.rota-card-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; gap: 8px; }
.rota-card-participantes { display: flex; align-items: center; }
.rota-card-avatar {
  width: 26px; height: 26px; 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; }

/* Folha de ações do card de rota - um único componente compartilhado (não um por card),
   preso à viewport (position:fixed) pra nunca ser cortado pelo overflow:hidden de nenhum
   card e sempre abrir de baixo pra cima, do jeito que um app nativo de iOS/Android faz -
   em vez do dropdown antigo, que abria "pra cima" de dentro do card e podia ser cortado. */
.acoes-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.acoes-overlay.aberto { opacity: 1; pointer-events: auto; }
.acoes-sheet {
  width: 100%;
  max-width: 480px;
  background: #262626;
  border: 1px solid var(--cor-borda);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  padding: 8px 10px calc(14px + var(--safe-bottom));
  box-shadow: 0 -8px 30px rgba(0,0,0,.4);
  transform: translateY(100%);
  transition: transform .25s cubic-bezier(.32,.72,0,1);
  display: flex;
  flex-direction: column;
}
.acoes-overlay.aberto .acoes-sheet { transform: translateY(0); }
.acoes-sheet-handle { width: 36px; height: 4px; border-radius: 999px; background: var(--cor-borda); margin: 6px auto 10px; }
.acoes-sheet-titulo {
  font-size: 12px; font-weight: 700; color: var(--cor-texto-secundario);
  text-transform: uppercase; letter-spacing: .04em; padding: 0 10px 6px;
}
.acoes-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  color: var(--cor-texto);
  font: inherit;
  font-size: 14.5px;
  text-align: left;
  padding: 12px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.acoes-item:hover, .acoes-item:active { background: rgba(255,255,255,.06); }
.acoes-item-danger { color: var(--cor-erro); }
.acoes-sheet-cancelar {
  margin-top: 4px;
  padding: 12px 10px;
  border-radius: 10px;
  text-align: center;
  font-weight: 700;
  font-size: 14.5px;
  font: inherit;
  color: var(--cor-texto-secundario);
  background: rgba(255,255,255,.04);
  border: none;
  cursor: pointer;
}
.acoes-sheet-cancelar:hover { background: rgba(255,255,255,.08); }
.badge-finalizada { color: #5fd68a; background: rgba(46,158,79,.18); 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; }
.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; }
.p-cor { width: 36px; height: 36px; }
.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; }
.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; }
.sugestao-row .sg-tipo { flex: 0 0 150px; padding: 10px 6px; }
.sugestao-row .s-descricao { width: 100%; padding: 8px 10px; 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; box-sizing: border-box; }
.atividade-row input[type=text] { width: 100%; padding: 8px 10px; 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; box-sizing: border-box; }

.veiculo-row .v-placa { flex: 0 0 110px; text-transform: uppercase; }
.veiculo-row .v-modelo { flex: 1; }

.participante-add-row { display: flex; gap: 8px; margin: 4px 0 10px; flex-wrap: wrap; }
.participante-add-row select { flex: 1; min-width: 160px; }
.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; color: var(--cor-texto-secundario); background: rgba(255,255,255,.06); 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; 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 - fica logo no topo, sem card em volta, com a
   folha de ações grudada embaixo dele (participantes + resumo + compartilhar + SOS juntos
   num painel só, em vez de espalhados em blocos separados) */
.mapa-ao-vivo-leaflet { height: min(58vh, 560px); border-radius: 12px; overflow: hidden; border: 1px solid var(--cor-borda); background: #242424; }
.mapa-ao-vivo-marcador { background: var(--cor-primaria); color: #0d0d0d; font-weight: 800; font-size: 11px; padding: 2px 8px; 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-sheet {
  background: var(--cor-card);
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 10px;
  box-shadow: var(--sombra-card);
}

/* Título + destino + status da rota, sempre visível no topo da folha - antes disso a
   tela só mostrava distância/tempo soltos, sem dizer qual rota é essa nem seu status */
.mapa-ao-vivo-info { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--cor-borda); }
.mapa-ao-vivo-info-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mapa-ao-vivo-info-titulo { font-weight: 700; font-size: 16px; }
.mapa-ao-vivo-info-destino {
  display: flex; align-items: center; gap: 4px;
  color: var(--cor-texto-secundario); font-size: 13px; margin-top: 2px;
}

.mapa-ao-vivo-resumo { display: flex; gap: 10px; margin: 6px 0 0; font-size: 12.5px; color: var(--cor-texto-secundario); }
.mapa-ao-vivo-resumo span:not(:empty)::before { content: "· "; }
.mapa-ao-vivo-resumo span:first-child::before { content: none; }

/* Roteiro completo (todas as paradas) dentro da própria tela do mapa ao vivo - pra não
   precisar sair pra ver o restante da rota e voltar de novo */
.mapa-ao-vivo-info-toggle {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 8px; padding: 8px; border-radius: 8px;
  background: none; border: 1px dashed var(--cor-borda); color: var(--cor-texto-secundario);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.mapa-ao-vivo-info-toggle:hover { background: rgba(255,255,255,.05); }
.mapa-ao-vivo-info-toggle svg { transition: transform .2s ease; flex-shrink: 0; }
.mapa-ao-vivo-info-toggle.aberto svg { transform: rotate(180deg); }

.mapa-ao-vivo-roteiro {
  margin-top: 8px; max-height: 280px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; padding: 2px 2px 2px 0;
}
.mapa-ao-vivo-roteiro-item { display: flex; gap: 10px; align-items: flex-start; }
.mapa-ao-vivo-roteiro-num {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
}
.mapa-ao-vivo-roteiro-corpo { min-width: 0; }
.mapa-ao-vivo-roteiro-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.mapa-ao-vivo-roteiro-nome { font-size: 13.5px; font-weight: 600; }
.mapa-ao-vivo-roteiro-meta {
  font-size: 11.5px; color: var(--cor-texto-secundario);
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 2px;
}

.mapa-ao-vivo-acoes { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.mapa-ao-vivo-acoes .btn-primary, .mapa-ao-vivo-acoes .btn-secondary { flex: 1; }

/* Herda de .btn (base) - só o formato circular/pulsante por cima, pra chamar atenção
   mesmo de relance, diferente de um botão de texto qualquer no meio dos outros */
.mapa-ao-vivo-sos {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  padding: 0;
  border-radius: 50%;
  background: var(--cor-erro);
  color: #4a1010;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .02em;
  animation: pulso-sos 1.8s ease-out infinite;
}
@keyframes pulso-sos {
  0% { box-shadow: 0 0 0 0 rgba(255,107,107,.55); }
  70% { box-shadow: 0 0 0 14px rgba(255,107,107,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,107,107,0); }
}

.mapa-ao-vivo-tipos { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.mapa-ao-vivo-tipo-chip {
  background: rgba(255,107,107,.1); border: 1px solid var(--cor-erro); color: var(--cor-erro);
  padding: 7px 12px; cursor: pointer; font-family: inherit;
}
.mapa-ao-vivo-tipo-outro { background: rgba(255,255,255,.05); border-color: var(--cor-borda); color: var(--cor-texto); }

.mapa-ao-vivo-aviso-fundo { font-size: 11.5px; margin: 6px 0 0; text-align: center; }

.mapa-ao-vivo-participantes { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; }
.mapa-ao-vivo-participante-chip {
  flex-shrink: 0; background: rgba(255,255,255,.05);
  border: 1px solid var(--cor-borda); padding: 4px 10px 4px 4px; color: var(--cor-texto);
  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-texto { display: flex; align-items: center; gap: 8px; }
.aviso-emergencia-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--cor-erro); flex-shrink: 0;
  animation: pisca-emergencia 1s ease-in-out infinite;
}
@keyframes pisca-emergencia { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.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; }
#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; }
}

/* Antes dessas telas só herdavam o max-width:1100px genérico do .view e esticavam
   listas/formulários de coluna única borda a borda numa janela desktop - aqui ganham uma
   largura de leitura confortável e centralizada, no mesmo espírito do .login-card, que já
   se limita sozinho. .lista-rotas/.grid-2/o pôster não entram aqui - já têm tratamento próprio. */
@media (min-width: 1024px) {
  #view-notificar, #view-sugestoes, #view-historico, #view-perfil, #view-rede, #view-pins {
    max-width: 640px;
  }

  /* O mapa ao vivo usava altura em vh sem limite de largura - numa janela desktop curta e
     larga isso virava uma faixa rasa e esticada em vez de um mapa de verdade */
  .mapa-ao-vivo-leaflet, .mapa-ao-vivo-sheet {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}

@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; }