/* ==========================================================================
   Páginas
   ========================================================================== */

/* --- Cabeçalho de página ---------------------------------------------- */
.pagehead { display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; }
.pagehead__title { font-family: var(--font-sign); font-size: var(--fs-34); font-weight: 600; letter-spacing: -0.015em; }
.pagehead__sub { font-family: var(--font-text); font-size: var(--fs-15); color: var(--text-2); margin-top: 3px; }
.pagehead__actions { margin-left: auto; display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }

/* ======================================================================
   Bilhete de viagem (abertura da visão geral)
   ====================================================================== */
.ticket {
  position: relative; overflow: hidden;
  border-radius: var(--r-lift);
  background: var(--forest);
  color: var(--on-forest);
}
.ticket__main { padding: var(--s5) var(--s5) var(--s4); }
.ticket__where {
  font-family: var(--font-sign); font-size: var(--fs-46); font-weight: 600;
  line-height: .96; letter-spacing: -0.025em; max-width: none;
}
.ticket__when {
  font-family: var(--font-text); font-size: var(--fs-17);
  color: var(--forest-4); margin-top: var(--s3); max-width: none;
}
/* A altitude entra no fluxo no mobile e vira marca no canto a partir do
   tablet: absoluta em tela estreita colidiria com o nome da cidade. */
.ticket__alt {
  display: flex; align-items: baseline; gap: var(--s2);
  margin-top: var(--s3);
  font-family: var(--font-sign); font-size: var(--fs-13); font-weight: 600;
  color: var(--brass-2); font-variant-numeric: tabular-nums;
}
.ticket__alt span { font-family: var(--font-text); font-weight: 400; color: var(--forest-3); }

/* Picotado do bilhete */
.ticket__perf { position: relative; height: 1px; margin: 0 var(--s5); background: transparent; }
.ticket__perf::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.34) 0 4px, transparent 4px 9px);
}
.ticket__perf::after,
.ticket__notch {
  content: ""; position: absolute; top: -7px;
  width: 14px; height: 14px; border-radius: 50%; background: var(--bg);
}
.ticket__perf::after { left: calc(var(--s5) * -1 - 7px); }
.ticket__notch { right: calc(var(--s5) * -1 - 7px); }

.ticket__stub {
  padding: var(--s4) var(--s5) var(--s5);
  display: flex; align-items: flex-end; gap: var(--s5); flex-wrap: wrap;
}
.ticket__count { display: flex; align-items: baseline; gap: var(--s2); }
.ticket__count b {
  font-family: var(--font-sign); font-size: var(--fs-46); font-weight: 600;
  line-height: .9; color: var(--brass-2); font-variant-numeric: tabular-nums;
}
.ticket__count span { font-family: var(--font-text); font-size: var(--fs-15); color: var(--forest-4); }
.ticket__marks {
  display: flex; gap: var(--s4); flex-wrap: wrap; align-items: flex-end;
  flex: 1 1 100%; justify-content: space-between;
}
.ticket__mark { display: flex; flex-direction: column; gap: 1px; }
.ticket__mark b {
  font-family: var(--font-sign); font-size: var(--fs-20); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ticket__mark span { font-family: var(--font-text); font-size: var(--fs-12); color: var(--forest-4); }
.ticket__progress { flex: 1 1 100%; }

@media (min-width: 768px) {
  .ticket__main { padding: var(--s6) var(--s6) var(--s5); }
  .ticket__perf { margin: 0 var(--s6); }
  .ticket__perf::after { left: calc(var(--s6) * -1 - 7px); }
  .ticket__notch { right: calc(var(--s6) * -1 - 7px); }
  .ticket__stub { padding: var(--s5) var(--s6) var(--s6); }
  .ticket__alt {
    position: absolute; top: var(--s6); right: var(--s6);
    display: block; margin-top: 0; text-align: right;
  }
  .ticket__alt span { display: block; }
  .ticket__marks { flex: 0 0 auto; margin-left: auto; justify-content: flex-end; }
}

/* ======================================================================
   Próxima parada — o objeto elevado da visão geral
   ====================================================================== */
.next { overflow: hidden; }
.next__head {
  display: flex; align-items: center; gap: var(--s2);
  padding: 8px var(--s4);
  background: var(--forest); color: var(--on-forest);
  font-family: var(--font-sign); font-size: var(--fs-13); font-weight: 600;
}
.next__head svg { width: 15px; height: 15px; color: var(--brass-2); }
.next__head time { margin-left: auto; color: var(--forest-4); font-weight: 400; }
.next__body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s4); }
.next__top { display: flex; gap: var(--s2); }

/* Pedaço de trilho: a próxima parada fica na mesma linha do itinerário */
.next__rail { position: relative; width: 26px; flex: 0 0 auto; }
.next__rail::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 9px; width: 5px;
  background: linear-gradient(90deg, var(--rail) 0 1px, transparent 1px 4px, var(--rail) 4px 5px);
}
.next__rail .station { top: 8px; }

.next__main { min-width: 0; flex: 1 1 auto; }
.next__name {
  font-family: var(--font-sign); font-size: var(--fs-26); font-weight: 600;
  line-height: 1.08; letter-spacing: -0.01em;
}
.next__when {
  font-family: var(--font-sign); font-size: var(--fs-15); font-weight: 600;
  color: var(--forest); margin-top: 4px; font-variant-numeric: tabular-nums;
}
.next__note { font-family: var(--font-text); font-size: var(--fs-13); color: var(--text-2); margin-top: var(--s2); }
.next__tags { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
.next__actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.next__actions .btn { flex: 1 1 auto; min-width: 130px; }
@media (min-width: 768px) { .next__actions .btn { flex: 0 1 auto; } }

/* Quatro fatos em grade regrada */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 620px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact { background: var(--surface); padding: var(--s2) var(--s3); min-width: 0; }
.fact__k { display: block; font-family: var(--font-text); font-size: var(--fs-12); color: var(--text-3); }
.fact__v {
  display: block; font-family: var(--font-sign); font-size: var(--fs-15); font-weight: 600;
  font-variant-numeric: tabular-nums; margin-top: 1px;
}

/* ======================================================================
   Itinerário
   ====================================================================== */
/* Seletor de dias: pequenas placas de bilhete */
.daypick { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s1); scrollbar-width: none; }
.daypick::-webkit-scrollbar { display: none; }
.daytab {
  flex: 0 0 auto; min-width: 92px;
  padding: var(--s2) var(--s3) 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-plate); text-align: left;
  overflow: hidden;
  transition: border-color var(--t1) var(--ease), background var(--t1) var(--ease);
}
.daytab:hover { border-color: var(--line-2); }
.daytab__day { font-family: var(--font-sign); font-size: var(--fs-13); color: var(--text-3); }
.daytab__wx {
  display: flex; align-items: center; gap: 5px; margin: 2px 0 var(--s2);
  font-family: var(--font-sign); font-size: var(--fs-17); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.daytab__wx svg { width: 17px; height: 17px; color: var(--text-3); }
.daytab .bar { margin: 0 calc(var(--s3) * -1); }
.daytab[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--on-forest); }
.daytab[aria-pressed="true"] .daytab__day { color: var(--forest-4); }
.daytab[aria-pressed="true"] .daytab__wx svg { color: var(--brass-2); }

/* Cabeçalho do dia: pauta, não cartão */
.dayhead { display: flex; flex-direction: column; gap: var(--s3); }
.dayhead__top { display: flex; align-items: flex-start; gap: var(--s3); }
.dayhead__date {
  flex: 0 0 auto; text-align: center; min-width: 46px;
  padding: 4px 6px; background: var(--forest); color: var(--on-forest);
  border-radius: var(--r-plate);
}
.dayhead__date b {
  display: block; font-family: var(--font-sign); font-size: var(--fs-20);
  font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
}
.dayhead__date span { font-family: var(--font-sign); font-size: var(--fs-12); color: var(--forest-4); }
.dayhead__when { font-family: var(--font-text); font-size: var(--fs-13); color: var(--text-3); }
.dayhead__title { font-family: var(--font-sign); font-size: var(--fs-26); font-weight: 600; line-height: 1.12; margin-top: 1px; }
.dayhead__theme { font-family: var(--font-text); font-size: var(--fs-15); color: var(--text-2); margin-top: var(--s2); }

/* ======================================================================
   Clima
   ====================================================================== */
.wx-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-plate); overflow: hidden; }
.wx-day { background: var(--surface); padding: var(--s2) 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.wx-day__d { font-family: var(--font-sign); font-size: var(--fs-12); color: var(--text-3); }
.wx-day svg { width: 18px; height: 18px; color: var(--forest-2); }
.wx-day__t { font-family: var(--font-sign); font-size: var(--fs-13); font-weight: 600; font-variant-numeric: tabular-nums; }
.wx-day__t span { font-weight: 400; color: var(--text-4); }
.wx-day__rain { font-family: var(--font-sign); font-size: var(--fs-12); color: #2F6F8F; font-variant-numeric: tabular-nums; }

.wx-now { display: flex; align-items: center; gap: var(--s3); }
.wx-now svg { width: 26px; height: 26px; color: var(--forest-2); flex: 0 0 auto; }
.wx-now__t { font-family: var(--font-sign); font-size: var(--fs-20); font-weight: 600; font-variant-numeric: tabular-nums; }
.wx-now__t span { font-size: var(--fs-15); font-weight: 400; color: var(--text-3); }
.wx-now__d { font-family: var(--font-text); font-size: var(--fs-13); color: var(--text-2); }

/* ======================================================================
   Comer & beber
   ====================================================================== */
.eatcard { display: flex; flex-direction: column; gap: var(--s3); }
.eatcard__top { display: flex; align-items: flex-start; gap: var(--s3); }
.eatcard__name { font-family: var(--font-sign); font-size: var(--fs-17); font-weight: 600; line-height: 1.15; }
.eatcard__kind { font-family: var(--font-text); font-size: var(--fs-13); color: var(--text-2); margin-top: 2px; }
.eatcard__facts { display: grid; gap: 0; }
.eatcard__fact {
  display: flex; align-items: baseline; gap: var(--s3); padding: 5px 0;
  border-top: 1px solid var(--line); font-size: var(--fs-13);
}
.eatcard__fact dt { font-family: var(--font-text); color: var(--text-3); }
.eatcard__fact dd { margin: 0 0 0 auto; text-align: right; }
.eatcard__meals { display: flex; flex-direction: column; gap: 2px; }
.eatcard--slot { border-style: dashed; background: transparent; }
.eatcard__actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: auto; padding-top: var(--s1); }

/* ======================================================================
   Gastos
   ====================================================================== */
.budget__top { display: flex; align-items: flex-end; gap: var(--s4); flex-wrap: wrap; }
.budget__value {
  font-family: var(--font-sign); font-size: var(--fs-34); font-weight: 600;
  line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.budget__field { max-width: 180px; margin-left: auto; }

.catbar { display: flex; flex-direction: column; gap: 5px; padding: var(--s2) 0; }
.catbar + .catbar { border-top: 1px solid var(--line); }
.catbar__head { display: flex; align-items: baseline; gap: var(--s2); font-size: var(--fs-13); }
.catbar__head svg { width: 15px; height: 15px; color: var(--text-3); }
.catbar__name { font-weight: 600; }
.catbar__val { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }

.expform { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 560px) { .expform { grid-template-columns: 1.5fr .8fr; } }
@media (min-width: 900px) { .expform { grid-template-columns: 1.6fr .7fr .9fr .8fr auto; align-items: end; } }

/* ======================================================================
   Preparação
   ====================================================================== */
.prep { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
.prep > * { min-width: 0; }
@media (min-width: 700px) { .prep { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .prep { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prepgroup__head { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s3) var(--s2); }
.prepgroup__head svg { width: 17px; height: 17px; color: var(--forest-2); }
.prepgroup__title { font-family: var(--font-sign); font-size: var(--fs-15); font-weight: 600; }
.prepgroup__count { margin-left: auto; font-family: var(--font-sign); font-size: var(--fs-12); color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Lista de dica em prosa */
.tips { display: flex; flex-direction: column; gap: var(--s3); }
.tips li { display: flex; gap: var(--s3); font-family: var(--font-text); font-size: var(--fs-13); color: var(--text-2); line-height: 1.55; }
.tips li::before { content: ""; flex: 0 0 auto; width: 14px; height: 1px; margin-top: .7em; background: var(--rail); }