/* GUI-TKY-TRAVELER-FABRICA-CONSOLIDACAO-02 — modos de uso, atividade livre, ingressos e alertas.
   Usa só os tokens do app (--acento, --papel-2, --linha, --tinta…); nenhuma cor nova de marca. */

/* onboarding: os dois modos, como escolha opcional */
.tg-modos { display: grid; gap: 10px; margin: 6px 0 4px; }
.tg-modo { appearance: none; font: inherit; text-align: left; cursor: pointer; display: grid; gap: 4px;
  padding: 12px 14px; border-radius: 14px; border: 1px solid var(--linha); background: var(--papel-2); color: inherit; }
.tg-modo strong { font-size: .95rem; }
.tg-modo span { font-size: .8rem; line-height: 1.35; opacity: .85; }
.tg-modo.on { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento) inset; }

/* atividade livre (FREE_ACTIVITY) */
.dia-livre .di-abre { min-height: 72px; background: var(--papel-2); }
.dia-livre .di-tx { position: static; color: var(--tinta); padding: 12px 14px; }
/* AJUSTES-03: o cartão da atividade própria não tem foto — texto escuro, sem a sombra feita para foto */
.dia-livre .di-nome, .dia-livre .di-quando, .dia-livre .di-dur, .dia-livre .di-sem-hora {
  color: var(--tinta); text-shadow: none; }
.dia-livre .di-dur, .dia-livre .di-sem-hora { color: var(--tinta-fraca); }
.di-livre-tag, .livre-tag { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--acento); }
/* secundária (AJUSTES-03 §10): vem depois de «Incluir atividade», contorno neutro, sem preenchimento */
.dia-incluir-livre { margin-top: 8px; background: transparent !important; color: var(--tinta-fraca) !important;
  border: 1px solid var(--linha) !important; box-shadow: none !important; min-height: 0; padding-top: 10px; padding-bottom: 10px; }
.dia-incluir-livre > span:last-child { font-size: .86rem; font-weight: 600; }
.livre h2 { margin: 6px 0 4px; }
.livre-quando, .livre-local, .livre-obs { margin: 6px 0; }
.livre-nota { font-size: .8rem; opacity: .8; margin-top: 14px; }
.livre-acoes { display: flex; gap: 10px; margin-top: 12px; }
.livre-form textarea { min-height: 80px; }
.livre-erro { color: #b3261e; font-weight: 600; }

/* ingressos do viajante */
.ing-sec { margin: 14px 0 18px; }
.ing-sec h3 { font-size: 1rem; margin: 0 0 8px; }
.ing-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ing-item { border: 1px solid var(--linha); border-radius: 14px; padding: 10px 12px; background: var(--papel-2); }
.ing-nome { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left;
  display: grid; gap: 2px; cursor: pointer; width: 100%; }
.ing-nome small { opacity: .7; }
.ing-acoes { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ing-bt { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 12px;
  background: var(--acento); color: #fff; text-decoration: none; font-weight: 650; font-size: .85rem; }
.ing-marca { appearance: none; font: inherit; font-size: .85rem; cursor: pointer; padding: 9px 12px; border-radius: 12px;
  border: 1px solid var(--linha); background: transparent; color: inherit; }
.ing-marca.on { border-color: var(--acento); color: var(--acento); font-weight: 650; }
.ing-vazio { opacity: .75; font-size: .88rem; }

/* aviso de próxima atividade (com o app aberto) */
.alerta-gui { position: fixed; left: 12px; right: 12px; top: calc(12px + var(--seguro-t, 0px)); z-index: 70;
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px;
  background: var(--papel-2); border: 1px solid var(--acento); box-shadow: 0 8px 24px rgba(30, 25, 45, .18); }
.alerta-gui[hidden] { display: none; }
.alerta-gui p { margin: 0; flex: 1; font-size: .88rem; }
.alerta-gui button { appearance: none; font: inherit; cursor: pointer; border: 0; background: none; color: var(--acento);
  font-weight: 700; }

/* FICHA — LINHA DE AÇÕES (GUI-TKY-TRAVELER-FABRICA-AJUSTES-03 §1): «Ver direção» à esquerda, «✓ Visitei» à
   direita, na mesma linha e com a mesma altura; a linha ocupa o lugar do antigo nome de região repetido. */
.ad-linha-acoes { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 10px; }
.ad-linha-acoes .ad-direcao { margin: 0; flex: 0 0 auto; }
.ad-linha-acoes .btn-direcao, .ad-linha-acoes .btn-ir, .ad-linha-acoes .mk-visitei {
  width: auto; margin: 0; min-height: 36px; padding: 6px 14px; border-radius: 999px;
  font-size: .85rem; font-weight: 650; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px;
}
.ad-linha-acoes .btn-direcao { border: 1px solid var(--acento); background: var(--papel-2); color: var(--acento); }
.ad-linha-acoes .btn-ir { border: 1px solid var(--acento); color: var(--acento); text-decoration: none; }
.ad-linha-acoes .mk-visitei { margin-left: auto; }

/* «COMPRAR INGRESSOS» + «DETALHES» NA MESMA LINHA (AJUSTES-03 §12). Aberto, «Detalhes» desce para a linha
   inteira, para o texto não ficar espremido ao lado do botão. */
.ad-linha-compra { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 14px 0 6px; }
.ad-linha-compra > .ad-acoes { margin: 0; flex: 1 1 0; display: flex; }
.ad-linha-compra > .ad-acoes > .btn-ingresso { flex: 1 1 auto; min-height: 48px; flex-direction: row; gap: 6px; }
.ad-linha-compra > .det-bloco { margin: 0; flex: 1 1 0; min-width: 0; }
.ad-linha-compra > .det-bloco > summary { min-height: 48px; box-sizing: border-box; display: flex; align-items: center; }
.ad-linha-compra.dupla > .det-bloco[open] { flex-basis: 100%; order: 2; }