/* ============================================================================
   Trip Helper - folha de estilo única.

   Identidade: um documento de viagem impresso. Papel claro, tinta quase preta,
   fios finos separando as coisas, e um azul de carimbo reservado só para o que
   dá para tocar. Lido em pé, no sol, com uma mão, minutos antes de um trem.

   Duas decisões carregam o resto:
   1. O horário é tipografia, não cor. Horários firmes vêm em algarismos de
      largura fixa, no peso mais alto da página. O olho cai no horário primeiro
      mesmo sob reflexo, mesmo em preto e branco.
   2. Fio fino, não caixa. Cartões são papel branco sobre fundo cinza com 1px de
      borda. Nenhuma sombra em lugar nenhum. É o que impede um roteiro de 141
      atividades de virar 141 caixinhas flutuando.

   Regra anti-checklist: atividade feita ganha um risco discreto que mantém o
   texto legível. Nenhuma barra de progresso, porcentagem ou contador existe
   nesta folha, e não deve passar a existir.

   Ordem do arquivo: tokens, reset, layout, tab bar, componentes, tela larga.
   Tasks seguintes: usar os tokens, não inventar cor nova.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. TOKENS */

:root {
  color-scheme: light dark;

  /* Cores. Tema claro é o principal: sob sol forte, tela clara vence.
     Contrastes conferidos: texto 18,1:1 e texto-muted 6,1:1 sobre --surface;
     --accent 8,9:1; --danger 6,8:1; --warn 6,3:1; --ok 6,5:1. */
  --bg: #f4f5f7;
  --surface: #ffffff;
  --text: #14161a;
  --text-muted: #5c636e;
  --accent: #0f4c81;
  --accent-soft: #e7eef6;
  --danger: #b02418;
  --danger-soft: #fbeceb;
  --warn: #8a5300;
  --warn-soft: #fbf2e3;
  --ok: #1a6b3c;
  --line: #dcdfe4;        /* fio decorativo: agrupa cartões */
  --line-strong: #868d97; /* borda de controle: 3,3:1, exigência da WCAG 1.4.11 */

  /* Forma. Regra única: cartão 12px, controle e chip 6px. Nada é pílula,
     porque pílula lê como app de joguinho e este não é. */
  --radius: 12px;
  --radius-sm: 6px;

  /* Espaço. Escala de 4px. */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;

  /* Tipografia. Pilha do sistema (SF Pro no iPhone), zero webfont.
     Nada abaixo de 15px, e o corpo em 16px. */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-xs: 0.9375rem;  /* 15px: badge, duração */
  --fs-base: 1rem;     /* 16px: corpo, mínimo do projeto */
  --fs-md: 1.0625rem;  /* 17px: nomes, horários */
  --fs-lg: 1.375rem;   /* 22px: h1 */
  --fs-xl: 2.25rem;    /* 36px: o único número grande do app */
  --lh-tight: 1.25;
  --lh-base: 1.5;

  /* Layout. */
  --col-max: 640px;
  --wide-max: 1100px;
  --tabbar-h: 56px;
  --tap: 44px;         /* alvo de toque mínimo */
}

/* Tema escuro: mesma identidade, para o trem noturno e para o quarto de hotel.
   Só os tokens mudam; nenhum componente sabe em que tema está. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171a;
    --surface: #1e2126;
    --text: #eceef1;
    --text-muted: #a2aab5;
    --accent: #7fb3e8;
    --accent-soft: #17293a;
    --danger: #f2857a;
    --danger-soft: #2f1a17;
    --warn: #e0a942;
    --warn-soft: #2b2113;
    --ok: #6fc48f;
    --line: #2e3238;
    --line-strong: #6b737e;
  }
}

/* ----------------------------------------------------------------- 2. RESET */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  /* Endereços e URLs longos quebram em vez de empurrar a página de lado. */
  overflow-x: hidden;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

button, input, textarea, select { font: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- 3. LAYOUT */

/* Coluna central. É flex-column com gap: os blocos de topo de uma view ganham
   ritmo vertical sozinhos, sem margin. Views não precisam espaçar nada. */
.page {
  max-width: var(--col-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  /* Espaço para a tab bar fixa (agora no topo) mais o notch/status bar. */
  padding-top: calc(var(--tabbar-h) + var(--s5) + env(safe-area-inset-top));
  padding-left: max(var(--s4), env(safe-area-inset-left));
  padding-right: max(var(--s4), env(safe-area-inset-right));
  padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom));
}

.page > section,
.page--wide > section {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

/* Links de texto soltos em cartões e seções também são alvos de 44px.
   .maps-link fica de fora: ele tem forma própria de chip, em 5.8. */
.card > a:not(.maps-link),
.page > section > a,
.page--wide > section > a {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: var(--tap);
  font-weight: 500;
}

/* O piso de 44px não pode depender da profundidade do link. Um <a> dentro de
   um <p> (o tel: dos contatos, na Task 10) não é filho direto do cartão, então
   a regra acima não o alcança. Aqui ele vira inline-block com a altura da
   linha igual ao alvo de toque: 44px de área sem virar bloco. */
.page p > a:not(.maps-link) {
  display: inline-block;
  min-height: var(--tap);
  line-height: var(--tap);
  font-weight: 500;
}

/* --------------------------------------------------------------- 4. TAB BAR */

/* No topo, não no rodapé: no Safari do iPhone, o primeiro toque numa barra
   fixada no rodapé é engolido pela barra de ferramentas do próprio Safari
   (que também mora ali embaixo), e só o segundo toque chega ao app. Isso
   dobra o custo da navegação principal a cada uso. No topo esse conflito
   não existe. */
.tab-bar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}

.tab-bar__item {
  flex: 1 1 0;
  max-width: 160px;
  min-height: var(--tabbar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--s2);
  color: var(--text-muted);
  font-weight: 500;
  text-decoration: none;
}

/* Ativo não depende só de cor: tinta cheia, peso maior e um fio no topo. */
.tab-bar__item[aria-current='page'] {
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 0 2px 0 var(--accent);
}

.tab-bar__item:active { background: var(--bg); }

/* ----------------------------------------------------------- 5. COMPONENTES */

/* 5.1 Cabeçalho de página e rótulo de seção */

.page-header {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.page-header h1 {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

.page-header__meta {
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.page-header p:not(.page-header__meta) { color: var(--text-muted); }

/* Rótulo funcional, não "eyebrow": sem caixa alta, sem tracking decorativo. */
.section-title {
  font-weight: 600;
  color: var(--text-muted);
}

/* 5.2 Cartão */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Próximo compromisso: o único bloco com fundo tingido da página Hoje. */
.card--next {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding-left: calc(var(--s4) - 2px);
}

.card--next .time--fixed { font-size: var(--fs-lg); }

/* Cartão de dia no roteiro: data e cidade na primeira linha, título na segunda. */
.card--day {
  flex-flow: row wrap;
  align-items: baseline;
  gap: var(--s1) var(--s3);
  color: inherit;
  text-decoration: none;
}

.card--day__date {
  font-size: var(--fs-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.card--day__city { color: var(--text-muted); }

.card--day__title {
  flex-basis: 100%;
  font-size: var(--fs-md);
}

/* Item do hub "Mais": linha de navegação com seta desenhada em CSS. */
.card--nav {
  flex-direction: row;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--fs-md);
  font-weight: 500;
  color: inherit;
  text-decoration: none;
}

.card--nav::after {
  content: '';
  margin-left: auto;
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid var(--text-muted);
  border-top: 2px solid var(--text-muted);
  transform: rotate(45deg);
}

/* Afordância de toque, mesma regra dos botões e campos em 5.8: o que dá para
   tocar tem borda de controle (--line-strong, 3,35:1); o que é só leitura tem
   fio (--line, decorativo). A borda diz se o cartão é tocável, sem depender de
   cor e sem gastar o azul, que continua reservado para texto de link. */
a.card { border-color: var(--line-strong); }

/* Só cartão clicável responde ao toque. Cartão de leitura fica quieto. */
a.card:active,
.trip-card:active { border-color: var(--accent); }

/* 5.3 Listas */

.list {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

/* Lista de linhas simples (plano do dia, mala): um bloco de papel com fios
   finos, em vez de sete cartõezinhos soltos. */
.list:has(> .activity:not(.card)) {
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.list > .activity:not(.card) { padding: var(--s3) var(--s4); }

.list > .activity:not(.card) + .activity:not(.card) {
  border-top: 1px solid var(--line);
}

/* 5.4 Atividade */

.activity {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  gap: var(--s1) var(--s2);
}

.activity.card {
  flex-direction: column;
  align-items: stretch;
  gap: var(--s2);
}

.activity__head {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  gap: var(--s1) var(--s2);
}

.activity__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-md);
}

.activity__why { color: var(--text-muted); }

/* Dica prática: nota de margem, com um fio à esquerda. */
.activity__tips {
  color: var(--text-muted);
  border-left: 2px solid var(--line);
  padding-left: var(--s3);
}

.activity__actions {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: var(--s3);
}

/* Regra anti-checklist: risco fino no nome, texto continua legível em tinta
   cheia. Nada de opacidade baixa, nada de contador de quantas faltam. */
.activity--done .activity__name {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--text-muted);
}

.activity--done .time,
.activity--done .done-btn { color: var(--text-muted); }

.activity--cut .activity__name { color: var(--text-muted); }

/* 5.5 Horário e duração: o par que o olho tem que achar primeiro */

.time {
  font-size: var(--fs-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.time--fixed { color: var(--text); }

.time--suggested {
  color: var(--text-muted);
  font-weight: 600;
}

.time--period {
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--fs-base);
  letter-spacing: normal;
}

.duration {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 5.6 Selo de status: carimbo contornado, nunca preenchimento chapado */

.badge {
  display: inline-block;
  padding: 0.1em 0.5em;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--text-muted);
}

.badge--confirmed { color: var(--ok); }
.badge--optional { color: var(--text-muted); }
.badge--weather_dependent { color: var(--warn); }

/* Pendência de decisão é a única com fundo: é a que pede ação. */
.badge--decision_pending {
  color: var(--warn);
  background: var(--warn-soft);
}

.badge--cut {
  color: var(--text-muted);
  border-style: dashed;
}

/* 5.7 Alerta */

.alert {
  padding: var(--s3) var(--s4);
  padding-left: calc(var(--s4) - 2px);
  background: var(--warn-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius);
}

.alert--critical {
  background: var(--danger-soft);
  border-left-color: var(--danger);
  font-weight: 500;
}

/* 5.8 Controles: botão e chip de link são "levantados" (--surface),
   campos são "afundados" (--bg). Borda forte nos dois, por contraste. */

button,
.maps-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: var(--tap);
  padding: 0 var(--s4);
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

button:active,
.maps-link:active {
  border-color: var(--accent);
  transform: translateY(1px);
}

.done-btn { margin-left: auto; }

textarea,
input:not([type='checkbox']) {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s3);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  /* 16px é o mínimo que impede o iOS de dar zoom ao focar o campo. */
  font-size: var(--fs-base);
}

textarea {
  border-radius: var(--radius);
  line-height: var(--lh-base);
  resize: vertical;
  min-height: 5.5rem;
}

/* 5.9 Par rótulo/valor */

.kv {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

label.kv {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

/* 5.10 Estado vazio */

.empty {
  padding: var(--s6) var(--s4);
  text-align: center;
  color: var(--text-muted);
}

/* 5.11 Lista de viagens */

.trip-list {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

/* Link: borda de controle, pela mesma regra declarada em 5.2. Fica no
   atalho "border" porque um border-color anterior seria sobrescrito aqui. */
.trip-card {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-height: var(--tap);
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
}

/* Vem depois de .trip-card de propósito: mesma especificidade, então o fio
   de accent à esquerda vence a borda de controle. */
.trip-card--active {
  border-left: 3px solid var(--accent);
  padding-left: calc(var(--s4) - 2px);
}

.trip-card__name {
  font-size: var(--fs-md);
  font-weight: 700;
}

.trip-card__dates {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* 5.12 Contagem regressiva: o único número grande do app */

.countdown {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* 5.13 Seção colapsada (cortados, decididas, idiomas) */

.cut-section {
  padding: 0 var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.cut-section > summary {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tap);
  color: var(--text-muted);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.cut-section > summary::-webkit-details-marker { display: none; }

.cut-section > summary::before {
  content: '';
  flex: none;
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}

.cut-section[open] > summary::before { transform: rotate(45deg); }

.cut-section .list { padding-bottom: var(--s4); }

/* O painel já é o papel: a lista interna não desenha outro. */
.cut-section .list:has(> .activity:not(.card)) {
  background: none;
  border: 0;
  border-radius: 0;
}

.cut-section .list > .activity:not(.card) { padding-inline: 0; }

/* 5.14 Navegação entre dias */

.day-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  border-top: 1px solid var(--line);
  padding-top: var(--s2);
}

.day-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* 5.15 Nota do dia */

.day-note .section-title { font-weight: 500; }

/* 5.16 Transporte */

.transport__route {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  gap: var(--s1) var(--s2);
  font-size: var(--fs-md);
}

/* Trecho ainda não resolvido ganha o fio de aviso à esquerda. */
.transport--pending_purchase,
.transport--decision_pending {
  border-left: 3px solid var(--warn);
  padding-left: calc(var(--s4) - 2px);
}

/* 5.17 Hotel, ingresso, decisão: o nome é a âncora do cartão */

.hotel__name,
.ticket__name {
  font-size: var(--fs-md);
  font-weight: 700;
}

/* 5.18 Item de mala */

.pack-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: 1 1 auto;
  min-height: var(--tap);
  cursor: pointer;
}

.pack-item input[type='checkbox'] {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--accent);
}

/* 5.19 Conversor de moeda */

.converter { gap: var(--s3); }

.converter__from,
.converter__to {
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
}

/* 5.20 Tabelas largas: rolam dentro da caixa, nunca empurram o body.
   A Task 11 acrescenta .admin-table aqui. */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.admin-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.admin-table th,
.admin-table td {
  padding: var(--s2) var(--s3);
  text-align: left;
  vertical-align: top;
}

.admin-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--line-strong);
}

/* Zebra discreta: --bg é o cinza do fundo da página, um degrau só abaixo de
   --surface. Sem cor nova, sem sombra. */
.admin-table tbody tr:nth-child(even) { background: var(--bg); }

.admin-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--line); }

/* 5.21 Toast: aviso de atualização do app. Some sozinho depois de alguns
   segundos (app.js cuida do timer). Sem sombra, como o resto da folha: a
   elevação vem de borda fina, igual ao cartão. */

.toast {
  position: fixed;
  left: var(--s4);
  right: var(--s4);
  /* A tab bar agora mora no topo (ver seção 4); o rodapé ficou livre, então o
     toast só precisa respeitar a faixa de gestos do iPhone. */
  bottom: calc(env(safe-area-inset-bottom) + var(--s3));
  z-index: 20;
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--fs-base);
  text-align: center;
}

/* --------------------------------------------------------- 6. TELA LARGA */

/* O control center é a única view que pede largura. Ele emite .page--wide
   dentro da coluna; a partir de 900px a coluna abre para ele e só para ele.
   Sem :has() o layout continua íntegro, só permanece em 640px. */

.page--wide {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

@media (min-width: 900px) {
  .page:has(.page--wide) { max-width: var(--wide-max); }

  .page-header h1 { font-size: 1.75rem; }
}