/* Painel de uma tela só. Celular primeiro: mapa em cima, etapas embaixo,
   candidatos e orçamento sempre em largura cheia. Vira duas colunas
   (etapas | mapa) a partir de 900px. Cor só vem de css/tokens.css. */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.45;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg-header);
  box-shadow: var(--shadow-sm);
}

.app-title {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: #fff;
}

#app {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) calc(var(--space-7) + 3rem);
}

.erro-boot {
  padding: var(--space-4);
  color: var(--status-fora);
}

/* ---- grid principal: etapas + mapa, candidatos embaixo em largura cheia ---- */
.painel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.coluna-etapas { order: 2; }
.coluna-mapa { order: 1; }
/* Sem isto o item herdaria order:0 (o padrão) e furaria pra cima das duas
   colunas, já que elas usam order:1/2 pra inverter no celular. */
.candidatos-secao { grid-column: 1 / -1; order: 3; }

@media (min-width: 900px) {
  .painel-grid {
    grid-template-columns: minmax(300px, 1fr) minmax(340px, 1.2fr);
    align-items: start;
  }
  .coluna-etapas { order: 1; }
  .coluna-mapa { order: 2; }
}

/* ---- lista de etapas ---- */
.etapas-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.etapa-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.etapa-item.is-selecionada {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.etapa-numero {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-weight: 700;
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.etapa-corpo { flex: 1; min-width: 0; }
.etapa-nome { margin: 0 0 var(--space-1); font-weight: 700; }

.etapa-dias {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: var(--space-1) 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.etapa-dias-campo { display: inline-flex; align-items: center; gap: var(--space-1); }
.etapa-dias-input {
  width: 3.25rem;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-sm);
}
.etapa-dias-erro { color: var(--status-fora); }
/* Só nome/número/resumo selecionam a etapa (ver panel.js); o cursor daqui
   não deveria prometer o mesmo clique que o resto do card promete. */
.etapa-dias { cursor: default; }

.etapa-resumo { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ---- mapa ---- */
.mapa-painel {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  overflow: hidden;
}
.mapa-painel svg { width: 100%; height: auto; display: block; }

.map-land { fill: var(--color-border); stroke: none; }
.map-etapa-rota { stroke: var(--color-text-muted); stroke-width: 1.5; opacity: 0.5; }

.map-etapa { cursor: pointer; }
.map-etapa-ponto {
  fill: var(--color-accent);
  stroke: var(--color-bg-elevated);
  stroke-width: 2;
}
.map-etapa.is-deslocamento .map-etapa-ponto {
  fill: var(--color-bg-elevated);
  stroke-width: 2.5;
  stroke: var(--modo-indefinido);
}
.map-etapa[data-modo="trem"] .map-etapa-ponto { stroke: var(--modo-trem); }
.map-etapa[data-modo="ferry"] .map-etapa-ponto { stroke: var(--modo-ferry); }
.map-etapa[data-modo="voo"] .map-etapa-ponto { stroke: var(--modo-voo); }
.map-etapa[data-modo="traslado"] .map-etapa-ponto { stroke: var(--modo-traslado); }

.map-etapa-numero {
  font-size: 8px;
  font-weight: 700;
  fill: var(--color-accent-contrast);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  font-family: var(--font-sans);
}
.map-etapa.is-deslocamento .map-etapa-numero { fill: var(--color-text); }
.map-etapa-halo { fill: var(--color-accent); opacity: 0.32; }
.map-etapa.is-selecionada .map-etapa-ponto { stroke: var(--color-accent); stroke-width: 3; }

/* Etapa sem lat/lon conhecido nunca some nem vai pro canto: vira aviso de
   texto visível abaixo do mapa (ver js/map-svg.js). */
.mapa-aviso {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--status-fora-bg);
  color: var(--status-fora);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.mapa-legenda {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.mapa-legenda li { display: flex; align-items: center; gap: var(--space-1); }
.legenda-marca {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
}
.legenda-marca--estadia { background: var(--color-accent); }
.legenda-marca--modo { background: var(--color-bg-elevated); border: 2px solid var(--modo-indefinido); }
.legenda-marca--modo[data-modo="trem"] { border-color: var(--modo-trem); }
.legenda-marca--modo[data-modo="ferry"] { border-color: var(--modo-ferry); }
.legenda-marca--modo[data-modo="voo"] { border-color: var(--modo-voo); }
.legenda-marca--modo[data-modo="traslado"] { border-color: var(--modo-traslado); }

/* ---- candidatos da etapa selecionada ---- */
.candidatos-dica, .candidatos-vazio {
  margin: 0;
  padding: var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-style: italic;
}

.candidatos-titulo { font-size: var(--fs-lg); margin: var(--space-2) 0 var(--space-3); }

.etapa-nota {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.etapa-nota label { font-size: var(--fs-sm); font-weight: 600; }
.etapa-nota-texto {
  min-height: 4.5rem;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--fs-base);
  resize: vertical;
}
.etapa-nota-acoes { display: flex; align-items: center; gap: var(--space-2); }
.etapa-nota-salvar {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
}
.etapa-nota-status { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ---- cartões de candidato (mesmo raciocínio de status por atributo, nunca
   classe escrita à mão por candidato) ---- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1180px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card[data-status="decidido"] { border-left-color: var(--status-decidido); }
.card[data-status="candidato"] { border-left-color: var(--status-candidato); }
.card[data-status="talvez"] { border-left-color: var(--status-talvez); }
.card[data-status="fora"] { border-left-color: var(--status-fora); opacity: 0.8; }

.card-photo {
  position: relative;
  height: 150px;
  background: var(--color-border);
  overflow: hidden;
}
.card-photo .card-foto { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-photo-vazio { display: none; }
.card-photo--placeholder .card-foto { display: none; }
.card-photo--placeholder .card-photo-vazio {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-image: linear-gradient(135deg, var(--color-border), var(--color-bg));
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  text-align: center;
  padding: var(--space-3);
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  flex: 1;
}

.card-status-badge {
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.card-status-badge[data-status="decidido"] { color: var(--status-decidido); background: var(--status-decidido-bg); }
.card-status-badge[data-status="candidato"] { color: var(--status-candidato); background: var(--status-candidato-bg); }
.card-status-badge[data-status="talvez"] { color: var(--status-talvez); background: var(--status-talvez-bg); }
.card-status-badge[data-status="fora"] { color: var(--status-fora); background: var(--status-fora-bg); }

.card-title { margin: 0; font-size: var(--fs-md); font-weight: 700; }
.card-meta { margin: 0; color: var(--color-text-muted); font-size: var(--fs-sm); }
.card-porque { margin: 0; font-size: var(--fs-base); }

/* Ressalva sempre visível: nunca fica atrás de toggle/accordion. */
.card-ressalva {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--color-text);
}
.card-ressalva strong { color: var(--status-candidato); }

.card-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}
.card-actions button {
  flex: 1;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.card-actions button[aria-pressed="true"][data-status="Decidido"] { background: var(--status-decidido-bg); color: var(--status-decidido); border-color: var(--status-decidido); }
.card-actions button[aria-pressed="true"][data-status="Talvez"] { background: var(--status-talvez-bg); color: var(--status-talvez); border-color: var(--status-talvez); }
.card-actions button[aria-pressed="true"][data-status="Descartado"] { background: var(--status-fora-bg); color: var(--status-fora); border-color: var(--status-fora); }

/* ---- barra de orçamento, fixa no rodapé ---- */
.orcamento-barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: var(--color-bg-header);
  color: #fff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}
.orcamento-conteudo {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}
.orcamento-item { font-weight: 600; }
.orcamento-separador { opacity: 0.5; }
.orcamento-aviso {
  margin-left: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--status-fora-bg);
  color: var(--status-fora);
  font-weight: 700;
}

@media (min-width: 640px) {
  .app-title { font-size: var(--fs-xl); }
  #app { padding: var(--space-6) var(--space-6) calc(var(--space-7) + 3rem); }
}