/* GUI - Fase 16.7 - a folha que sobe: calendario de datas e decisoes curtas.

   UMA FOLHA, DUAS OCUPACOES. O calendario de chegada e saida e a folha generica
   (renomear destino, adicionar destino, avisar de erro) dividem a mesma caixa,
   a mesma entrada e o mesmo jeito de fechar. Duas caixas parecidas com regras
   proprias divergiriam na primeira mudanca de raio ou de sombra.

   ELA SOBE DE BAIXO, e nao aparece no meio da tela: no telefone, o polegar
   alcanca a metade de baixo, e uma caixa centralizada obriga a mao a subir para
   confirmar. Em tela larga ela se comporta como um cartao centralizado, porque
   ali nao existe polegar nem borda inferior privilegiada. */

.cal-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(18,12,26,.52);
  display: flex; align-items: flex-end; justify-content: center;
}
.cal-scrim[hidden] { display: none !important; }

/* Enquanto a folha esta aberta, o que esta atras nao rola: rolar o fundo por
   engano e perder o lugar da leitura sem ter pedido. */
body.com-folha { overflow: hidden; }

.cal-folha {
  width: 100%; max-width: 460px;
  max-height: min(92dvh, 760px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--papel);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -14px 40px rgba(18,12,26,.34);
  padding: 8px 18px calc(18px + var(--seguro-b));
}
@media (min-width: 640px) {
  .cal-scrim { align-items: center; }
  .cal-folha { border-radius: 24px; }
}

/* A alca: sinal de que a caixa se arrasta e se fecha, desenhado uma vez no topo. */
.cal-folha::before {
  content: ""; display: block; width: 42px; height: 4px; border-radius: 999px;
  background: var(--linha); margin: 6px auto 10px;
}

.cal-topo { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.cal-tit { flex: 1 1 auto; min-width: 0; }
.cal-tit h2 { margin: 0; font-size: 1.12rem; letter-spacing: -.02em; line-height: 1.25; }
.cal-tit p { margin: 2px 0 0; font-size: .82rem; color: var(--tinta-fraca); }
.cal-x {
  flex: none; width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid var(--linha); background: var(--papel-2);
  color: var(--tinta-fraca); font-size: 1rem; cursor: pointer;
}

/* ---------------- os dois campos ----------------

   Chegada e saida sao BOTOES, e nao rotulos: tocar num deles muda para onde o
   proximo toque no calendario vai. Sem isso, corrigir so a saida obrigaria a
   refazer o intervalo inteiro. */
.cal-campos { display: flex; align-items: center; gap: 8px; }
.cal-campo {
  flex: 1 1 0; min-width: 0; text-align: left; cursor: pointer; font: inherit;
  background: var(--papel-2); border: 1px solid var(--linha); border-radius: 14px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 2px;
  color: var(--tinta);
}
.cal-campo span { font-size: .72rem; color: var(--tinta-fraca); }
.cal-campo strong { font-size: .95rem; font-variant-numeric: tabular-nums; }
.cal-campo.on {
  border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-claro);
  background: var(--papel-2);
}
.cal-seta { flex: none; color: var(--tinta-clara); }
.cal-dica { margin: 10px 2px 2px; font-size: .82rem; color: var(--tinta-fraca); }

.cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin: 10px 0 6px;
}
.cal-nav strong { font-size: .98rem; text-transform: capitalize; }
.cal-mes {
  width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--linha); background: var(--papel-2);
  color: var(--acento); font-size: 1.2rem;
}

/* O MESMO DEFEITO, NA MESMA CASA (§2).

   A folha que escolhe o dia tem as duas grades com `repeat(7, 1fr)` e um
   `.cal-dia` com `aspect-ratio: 1; min-height: 42px`. A 320px, medido: colunas
   de 42px na grade contra 37,14px no cabeçalho, e 34px de escape para fora da
   caixa. Mesma causa — o `auto` de `minmax(auto, 1fr)` recebendo a largura
   mínima que a razão de aspecto transferiu da altura mínima.

   Corrigir só o calendário da viagem e deixar este seria consertar o sintoma
   no lugar em que ele foi visto. Veja shell.css para a explicação inteira. */
.cal-semana, .cal-grade {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px;
}
/* `width: 100%` pelo mesmo motivo que em shell.css: com `aspect-ratio`, o
   alinhamento `normal` age como `start` e a célula não estica até a coluna. */
.cal-dia, .cal-vazia { min-width: 0; width: 100%; }
.cal-semana span {
  text-align: center; font-size: .7rem; color: var(--tinta-clara);
  padding-bottom: 4px;
}
.cal-vazia { display: block; }
.cal-dia {
  /* 44 px e o alvo minimo que o dedo acerta sem mirar; num calendario de sete
     colunas, e o que separa marcar o dia 12 de marcar o 13. */
  aspect-ratio: 1; min-height: 42px; border: 0; cursor: pointer;
  background: var(--papel-2); border: 1px solid transparent;
  border-radius: 12px; font: inherit; font-size: .9rem; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.cal-dia:disabled { opacity: .3; cursor: default; }
.cal-dia.hoje { border-color: var(--linha); font-weight: 700; }
.cal-dia.meio { background: var(--acento-claro); border-radius: 0; color: var(--acento-escuro); }
.cal-dia.ini, .cal-dia.fim {
  background: var(--acento); color: #fff; font-weight: 700; border-color: var(--acento);
}
.cal-dia.ini { border-radius: 12px 0 0 12px; }
.cal-dia.fim { border-radius: 0 12px 12px 0; }
.cal-dia.ini.fim { border-radius: 12px; }

.cal-resumo {
  margin: 12px 0 0; font-size: .84rem; color: var(--tinta-fraca); text-align: center;
}
.cal-acoes {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px;
}
.cal-limpar {
  border: 0; background: none; font: inherit; font-size: .88rem; cursor: pointer;
  color: var(--tinta-fraca); padding: 10px 8px; margin: -10px -8px; min-height: 40px;
}
.cal-ok {
  border: 0; border-radius: 999px; cursor: pointer; font: inherit;
  background: var(--acento); color: #fff; font-size: .95rem; font-weight: 600;
  padding: 13px 26px; min-height: 46px;
}
.cal-ok:disabled { opacity: .4; cursor: default; }
.cal-ok:active:not(:disabled) { transform: scale(.98); }

/* ---------------- conteudo das folhas genericas ---------------- */
.vg-form { display: flex; flex-direction: column; gap: 4px; }
.vg-campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.vg-campo > span { font-size: .78rem; color: var(--tinta-fraca); }
.vg-campo input, .vg-campo textarea {
  font: inherit; font-size: 1rem; color: var(--tinta);
  border: 1px solid var(--linha); border-radius: 12px; padding: 12px 13px;
  background: var(--papel-2); min-height: 46px; width: 100%; resize: vertical;
}
.vg-campo input:focus, .vg-campo textarea:focus {
  outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-claro);
}
.vg-ajuda { margin: 0 0 8px; font-size: .8rem; color: var(--tinta-fraca); line-height: 1.45; }
.vg-aviso { margin: 0 0 6px; font-size: .9rem; color: #a3372c; line-height: 1.5; }

.vg-add-corpo { display: flex; flex-direction: column; }
.vg-add-guia { margin-bottom: 14px; }
.vg-add-guia h4 {
  margin: 0 0 6px; font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinta-fraca);
}
.vg-add-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: var(--papel-2); border: 1px solid var(--linha); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 6px; color: var(--tinta); min-height: 48px;
}
.vg-add-item span:first-child { display: flex; flex-direction: column; gap: 2px; font-size: .95rem; }
.vg-add-item em { font-style: normal; font-size: .74rem; color: var(--tinta-clara); }
.vg-add-item span:last-child { color: var(--acento); font-size: 1.1rem; }
.vg-add-item:active { background: var(--acento-claro); }
.vg-add-livre {
  border-top: 1px solid var(--linha); padding-top: 14px; margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cal-ok:active:not(:disabled) { transform: none; }
}