@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
	--id3t-base: #F8F4EF;
	--id3t-ink: #1A1A1A;
	--id3t-accent: #C4622D;
	--id3t-accent-ink: #FFFFFF;
	--id3t-text: #2C2C2C;
	--id3t-bg2: #E8DDD0;
	--id3t-erro: #D94F3D;
	--id3t-sucesso: #5C8A6E;
	--id3t-borda: #E1D6C7;
	--id3t-card: #FFFFFF;
	--id3t-raio: 14px;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

body {
	background: var(--id3t-base);
	color: var(--id3t-text);
	font-family: 'Inter', -apple-system, sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

h1, h2, h3 {
	font-family: 'Playfair Display', Georgia, serif;
	color: var(--id3t-ink);
	margin: 0 0 8px;
}

a { color: var(--id3t-accent); text-decoration: none; }

button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* ---------- Alerts ---------- */
.id3t-alert {
	padding: 12px 16px;
	border-radius: var(--id3t-raio);
	margin-bottom: 16px;
	font-weight: 500;
}
.id3t-alert--erro { background: color-mix(in srgb, var(--id3t-erro) 14%, white); color: var(--id3t-erro); }
.id3t-alert--sucesso { background: color-mix(in srgb, var(--id3t-sucesso) 14%, white); color: var(--id3t-sucesso); }

/* ---------- Buttons ---------- */
.id3t-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid var(--id3t-borda);
	background: var(--id3t-card);
	color: var(--id3t-text);
	cursor: pointer;
	font-weight: 600;
}
.id3t-btn--primary { background: var(--id3t-accent); border-color: var(--id3t-accent); color: var(--id3t-accent-ink); }
.id3t-btn--perigo { background: var(--id3t-erro); border-color: var(--id3t-erro); color: #fff; }
.id3t-btn-icone {
	border: none;
	background: transparent;
	cursor: pointer;
	color: var(--id3t-text);
	opacity: .6;
	padding: 6px;
	border-radius: 8px;
}
.id3t-btn-icone:hover { opacity: 1; background: var(--id3t-bg2); }

.id3t-icon { width: 18px; height: 18px; }

/* ---------- Forms ---------- */
.id3t-form { display: flex; flex-direction: column; gap: 12px; }
.id3t-form--card {
	background: var(--id3t-card);
	border: 1px solid var(--id3t-borda);
	border-radius: var(--id3t-raio);
	padding: 24px;
	margin-bottom: 20px;
	max-width: 560px;
}
.id3t-grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; align-items: start; }
.id3t-grid-cards .id3t-form--card { max-width: none; margin-bottom: 0; }
.id3t-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; font-size: 13px; color: #6b6258; }
.id3t-form input[type="text"],
.id3t-form input[type="email"],
.id3t-form input[type="password"],
.id3t-form input[type="date"],
.id3t-form input[type="time"],
.id3t-form input[type="number"],
.id3t-form select,
.id3t-form textarea {
	padding: 10px 12px;
	border: 1px solid var(--id3t-borda);
	border-radius: 10px;
	background: #fff;
	color: var(--id3t-text);
	font-size: 15px;
}
.id3t-form__linha { display: flex; gap: 12px; flex-wrap: wrap; }
.id3t-form__linha label { flex: 1; min-width: 140px; }
.id3t-form--inline { flex-direction: row; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.id3t-form--inline input[type="text"] { flex: 1; min-width: 200px; padding: 10px 12px; border: 1px solid var(--id3t-borda); border-radius: 10px; }
.id3t-form--linha { flex-direction: row; flex-wrap: wrap; align-items: center; }
.id3t-form--linha input,
.id3t-form--linha select { padding: 8px 10px; border: 1px solid var(--id3t-borda); border-radius: 8px; }
.id3t-form--linha-membro { flex-direction: row; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.id3t-checkbox { flex-direction: row !important; align-items: center; gap: 8px !important; }

.id3t-file-label { gap: 8px; }
.id3t-file-input { position: relative; display: flex; align-items: center; gap: 10px; }
.id3t-file-input input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.id3t-file-input__botao {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px; border-radius: 999px; border: 1px solid var(--id3t-borda); background: var(--id3t-bg2); font-weight: 600; font-size: 13px;
}
.id3t-file-input__nome { font-size: 13px; color: #8a8078; }

/* ---------- Auth ---------- */
.id3t-auth-body {
	display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 24px;
	background:
		radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--id3t-accent) 18%, transparent), transparent 55%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23C4622D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cpath d='M20 40l30-8 15-28 7 3-9 27 22 4v7l-22 2-7 25-7-2 4-25-30-5z'/%3E%3Ccircle cx='165' cy='45' r='16'/%3E%3Cpath d='M157 45h16M165 37v16'/%3E%3Cpath d='M40 150c0-14 11-25 25-25s25 11 25 25'/%3E%3Ccircle cx='65' cy='125' r='7'/%3E%3Cpath d='M150 130l40 40M190 130l-40 40'/%3E%3Crect x='155' y='150' width='40' height='30' rx='4'/%3E%3Cpath d='M165 150v-8a5 5 0 0 1 5-5h10a5 5 0 0 1 5 5v8'/%3E%3C/g%3E%3C/svg%3E"),
		var(--id3t-base);
	background-repeat: no-repeat, repeat, no-repeat;
}
.id3t-auth-shell { width: 100%; max-width: 420px; }
.id3t-auth-card { background: var(--id3t-card); border-radius: 20px; padding: 32px 28px; box-shadow: 0 20px 50px rgba(26,26,26,.08); }
.id3t-auth-brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-bottom: 20px; }
.id3t-auth-brand__mark { width: 36px; height: 36px; border-radius: 50%; background: var(--id3t-accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.id3t-auth-brand__mark .id3t-icon { width: 20px; height: 20px; }
.id3t-auth-brand__nome { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 20px; }
.id3t-auth-brand__logo { max-height: 56px; max-width: 100%; }
.id3t-auth-sub { color: #6b6258; margin-bottom: 20px; }
.id3t-auth-tabs { display: flex; gap: 4px; background: var(--id3t-bg2); border-radius: 999px; padding: 4px; margin-bottom: 20px; }
.id3t-auth-tabs a { flex: 1; text-align: center; padding: 8px; border-radius: 999px; color: var(--id3t-text); font-weight: 600; font-size: 14px; }
.id3t-auth-tabs a.is-active { background: var(--id3t-accent); color: #fff; }
.id3t-auth-troca { text-align: center; margin-top: 14px; font-size: 14px; }

/* ---------- Shell / layout ---------- */
.id3t-shell { display: flex; min-height: 100vh; }

.id3t-sidebar {
	width: 280px;
	background: var(--id3t-ink);
	color: #f2ede6;
	display: flex;
	flex-direction: column;
	padding: 24px 16px;
	position: sticky;
	top: 0;
	align-self: stretch;
	min-height: 100vh;
}
.id3t-sidebar__brand { display: flex; align-items: center; gap: 10px; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 19px; margin-bottom: 28px; padding: 0 8px; }
.id3t-sidebar__mark { width: 32px; height: 32px; border-radius: 50%; background: var(--id3t-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.id3t-sidebar__logo { width: auto; max-width: 100%; height: auto; max-height: 54px; object-fit: contain; }
.id3t-sidebar__mark .id3t-icon { width: 18px; height: 18px; }
.id3t-sidebar__nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.id3t-sidebar__nav a, .id3t-sidebar__sair {
	display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #cfc7bc; font-weight: 500;
}
.id3t-sidebar__nav a:hover, .id3t-sidebar__sair:hover { background: rgba(255,255,255,.06); color: #fff; }
.id3t-sidebar__nav a.is-active { background: var(--id3t-accent); color: #fff; }

.id3t-main { flex: 1; max-width: 1180px; margin: 0 auto; width: 100%; padding: 28px 28px 100px; }

.id3t-topbar { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.id3t-topbar__user { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.id3t-topbar__brand { display: none; align-items: center; gap: 8px; }
.id3t-topbar__logo { max-height: 34px; width: auto; }
.id3t-topbar__nome { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 16px; }

.id3t-avatar { border-radius: 50%; object-fit: cover; }
.id3t-avatar--fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--id3t-accent); color: #fff; font-weight: 700; }

.id3t-titulo { font-size: 26px; }
.id3t-subtitulo { color: #6b6258; margin-top: -4px; margin-bottom: 20px; }
.id3t-voltar { display: inline-block; margin-bottom: 12px; font-weight: 600; }

.id3t-capa-viagem { position: relative; height: 160px; border-radius: var(--id3t-raio); background: linear-gradient(135deg, var(--id3t-bg2), var(--id3t-accent)); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 16px; }
.id3t-capa-viagem .id3t-icon { width: 32px; height: 32px; }
.id3t-capa-viagem__form { position: absolute; bottom: 10px; right: 10px; }
.id3t-capa-viagem__botao { cursor: pointer; font-size: 13px; padding: 6px 12px; }

.id3t-vazio { background: var(--id3t-bg2); border-radius: var(--id3t-raio); padding: 32px; text-align: center; color: #6b6258; }
.id3t-vazio .id3t-btn { margin-top: 12px; }

/* ---------- Trip cards ---------- */
.id3t-grid-viagens { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.id3t-card-viagem { background: var(--id3t-card); border-radius: var(--id3t-raio); overflow: hidden; border: 1px solid var(--id3t-borda); display: block; color: var(--id3t-text); max-width: 360px; }
.id3t-card-viagem__capa { position: relative; height: 130px; background: linear-gradient(135deg, var(--id3t-bg2), var(--id3t-accent)); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: #fff; }
.id3t-card-viagem__contador { position: absolute; top: 10px; right: 10px; background: rgba(26,26,26,.72); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.id3t-card-viagem__capa .id3t-icon { width: 32px; height: 32px; }
.id3t-card-viagem__corpo { padding: 14px 16px; }
.id3t-card-viagem__corpo h3 { font-size: 17px; margin-bottom: 2px; }
.id3t-card-viagem__corpo p { margin: 0; color: #6b6258; font-size: 14px; }
.id3t-card-viagem__datas { display: block; margin-top: 6px; font-size: 12px; color: var(--id3t-accent); font-weight: 600; }

/* ---------- Tabs ---------- */
.id3t-abas { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 20px; border-bottom: 1px solid var(--id3t-borda); }
.id3t-abas a { display: flex; align-items: center; gap: 6px; padding: 10px 14px; font-weight: 600; color: #8a8078; white-space: nowrap; border-bottom: 2px solid transparent; }
.id3t-abas a.is-active { color: var(--id3t-accent); border-color: var(--id3t-accent); }

/* ---------- Cards / tables ---------- */
.id3t-painel-card { background: var(--id3t-card); border: 1px solid var(--id3t-borda); border-radius: var(--id3t-raio); padding: 20px; margin-bottom: 18px; }
.id3t-painel-card__cabecalho { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.id3t-painel-card__cabecalho h3 { display: flex; align-items: center; gap: 8px; margin: 0; }

.id3t-tabela { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
.id3t-tabela th { text-align: left; color: #8a8078; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--id3t-borda); }
.id3t-tabela td { padding: 8px; border-bottom: 1px solid var(--id3t-borda); vertical-align: middle; }
.id3t-tabela--custos { font-size: 13px; }

.id3t-badge { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.id3t-badge--adulto { background: var(--id3t-bg2); color: var(--id3t-ink); }
.id3t-badge--crianca { background: color-mix(in srgb, var(--id3t-sucesso) 20%, white); color: var(--id3t-sucesso); }
.id3t-badge--obrigatoria { background: color-mix(in srgb, var(--id3t-erro) 14%, white); color: var(--id3t-erro); }
.id3t-badge--opcional { background: var(--id3t-bg2); color: #6b6258; }
.id3t-badge--total { background: color-mix(in srgb, var(--id3t-accent) 16%, white); color: var(--id3t-accent); }
.id3t-badge--confirmado { background: color-mix(in srgb, var(--id3t-sucesso) 18%, white); color: var(--id3t-sucesso); }
.id3t-badge--pendente { background: var(--id3t-bg2); color: #8a6d3b; }
.id3t-badge--cancelado { background: color-mix(in srgb, var(--id3t-erro) 14%, white); color: var(--id3t-erro); }

.id3t-convite { display: flex; align-items: center; gap: 8px; background: var(--id3t-bg2); padding: 8px 12px; border-radius: 10px; margin-bottom: 8px; font-size: 13px; }
.id3t-convite input { flex: 1; border: none; background: transparent; font-size: 12px; color: #6b6258; }

/* ---------- Card de reserva (carro/hospedagem) ---------- */
.id3t-card-reserva__topo { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.id3t-card-reserva__icone { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--id3t-accent), #d4843a); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.id3t-card-reserva__icone .id3t-icon { width: 26px; height: 26px; color: #fff; }
.id3t-card-reserva__titulo { flex: 1; min-width: 0; }
.id3t-card-reserva__titulo h3 { margin: 0 0 2px; font-size: 17px; }
.id3t-card-reserva__local { display: flex; align-items: center; gap: 6px; color: #6b6258; font-size: 13.5px; margin-bottom: 14px; }
.id3t-card-reserva__local .id3t-icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--id3t-accent); }
.id3t-card-reserva__datas { display: flex; align-items: center; gap: 18px; background: var(--id3t-bg2); border-radius: 12px; padding: 12px 16px; margin-bottom: 12px; flex-wrap: wrap; }
.id3t-card-reserva__data span { display: block; font-size: 11.5px; color: #8a8078; margin-bottom: 2px; }
.id3t-card-reserva__data strong { font-size: 14px; }
.id3t-card-reserva__duracao { margin-left: auto; background: #fff; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; color: var(--id3t-accent); border: 1px solid var(--id3t-borda); }
.id3t-card-reserva__rodape { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.id3t-card-reserva__valor { font-size: 13px; color: #8a8078; }
.id3t-card-reserva__valor strong { font-size: 19px; color: var(--id3t-text); display: block; }
.id3t-card-reserva__codigo { font-size: 11.5px; color: #8a8078; margin-top: 2px; }
.id3t-card-reserva__acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.id3t-badge--pago { background: color-mix(in srgb, var(--id3t-sucesso) 18%, white); color: var(--id3t-sucesso); display: inline-flex; align-items: center; gap: 4px; }
.id3t-badge--pago .id3t-icon { width: 13px; height: 13px; }

/* ---------- Roteiro ---------- */
.id3t-dia { margin-bottom: 22px; }
.id3t-dia__cabecalho { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.id3t-mapa-dia { height: 220px; border-radius: 12px; margin-bottom: 12px; border: 1px solid var(--id3t-borda); z-index: 0; }
.id3t-atividades { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.id3t-atividade { background: var(--id3t-card); border: 1px solid var(--id3t-borda); border-radius: 12px; padding: 14px 16px; }
.id3t-atividade[draggable="true"] { cursor: grab; }
.id3t-atividade.is-arrastando { opacity: .4; }
.id3t-atividade__topo { display: flex; align-items: center; gap: 10px; }
.id3t-atividade__alca { color: #b8ada0; cursor: grab; }
.id3t-atividade__info { flex: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.id3t-atividade__categoria { font-size: 12px; color: #8a8078; background: var(--id3t-bg2); padding: 2px 8px; border-radius: 999px; }
.id3t-atividade__meta { display: flex; gap: 14px; margin-top: 6px; font-size: 13px; color: #6b6258; flex-wrap: wrap; }
.id3t-atividade__meta a { color: var(--id3t-accent); display: inline-flex; align-items: center; gap: 4px; }
.id3t-atividade__descricao { margin: 8px 0 0; font-size: 14px; color: #6b6258; }
.id3t-adicionar-custo { margin-top: 10px; }
.id3t-adicionar-custo summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--id3t-accent); display: flex; align-items: center; gap: 6px; }

/* ---------- Custos ---------- */
.id3t-lista-custos { display: flex; flex-direction: column; gap: 16px; }
.id3t-resumo-financeiro { display: flex; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.id3t-resumo-financeiro div { flex: 1; min-width: 100px; }
.id3t-resumo-financeiro span { display: block; font-size: 12px; color: #8a8078; }
.id3t-resumo-financeiro strong { font-size: 18px; }
.is-devedor { color: var(--id3t-erro); }
.is-quitado { color: var(--id3t-sucesso); }

.id3t-detalhamento { margin-top: 14px; }
.id3t-detalhamento summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--id3t-accent); display: flex; align-items: center; gap: 6px; }
.id3t-detalhamento__data { display: block; font-size: 11px; color: #8a8078; font-weight: 400; }
.id3t-tabela-scroll { overflow-x: auto; margin-top: 8px; }

.id3t-linha-preco { border: 1px solid var(--id3t-borda); border-radius: 10px; padding: 12px; margin-bottom: 10px; background: var(--id3t-bg2); }
.id3t-linha-preco__topo, .id3t-linha-preco__campos { display: flex; gap: 10px; flex-wrap: wrap; }
.id3t-linha-preco__campos { margin-top: 10px; }
.id3t-linha-preco label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #6b6258; flex: 1; min-width: 100px; }
.id3t-linha-preco input, .id3t-linha-preco select { padding: 8px 10px; border: 1px solid var(--id3t-borda); border-radius: 8px; background: #fff; color: var(--id3t-text); font-size: 14px; }
.id3t-tabela--detalhamento { font-size: 13px; white-space: nowrap; }

/* ---------- Checklist ---------- */
.id3t-checklist { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.id3t-checklist__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--id3t-bg2); }
.id3t-checklist__item label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.id3t-checklist__item.is-confirmado label { text-decoration: line-through; color: #8a8078; }

/* ---------- KPIs ---------- */
.id3t-kpis { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.id3t-kpi { background: var(--id3t-card); border: 1px solid var(--id3t-borda); border-radius: var(--id3t-raio); padding: 18px 22px; min-width: 140px; }
.id3t-kpi span { display: block; font-family: 'Playfair Display', serif; font-size: 30px; color: var(--id3t-accent); }

.id3t-celebracao { background: linear-gradient(135deg, var(--id3t-bg2), var(--id3t-accent)); color: #fff; border-radius: var(--id3t-raio); padding: 18px 20px; margin-bottom: 18px; }
.id3t-celebracao h3 { color: #fff; display: flex; align-items: center; gap: 8px; }
.id3t-celebracao .id3t-badge { background: rgba(255,255,255,.25); color: #fff; margin: 4px 6px 4px 0; display: inline-block; }
.id3t-celebracao a { color: #fff; text-decoration: underline; font-weight: 600; }

.id3t-grid-selos { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; margin-bottom: 24px; }
.id3t-selo { background: var(--id3t-card); border: 1px solid var(--id3t-borda); border-radius: var(--id3t-raio); padding: 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.id3t-selo__marca { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--id3t-bg2); color: var(--id3t-accent); }
.id3t-selo__marca .id3t-icon { width: 22px; height: 22px; }
.id3t-selo strong { font-size: 14px; }
.id3t-selo span { font-size: 12px; color: #8a8078; }
.id3t-selo--pais .id3t-selo__marca { background: color-mix(in srgb, var(--id3t-sucesso) 20%, white); color: var(--id3t-sucesso); }
.id3t-selo--total .id3t-selo__marca { background: var(--id3t-accent); color: #fff; }
.id3t-selo--bloqueada { opacity: .4; }

.id3t-zona-perigo { margin-top: 28px; }
.id3t-zona-perigo summary { cursor: pointer; color: var(--id3t-erro); font-weight: 600; }
.id3t-zona-perigo form { margin-top: 10px; }

.id3t-perfil-topo { margin-bottom: 4px; }

/* ---------- Bottom nav (mobile) ---------- */
.id3t-bottom-nav {
	display: none;
	position: fixed;
	left: 12px; right: 12px; bottom: 12px;
	background: rgba(26,26,26,.92);
	backdrop-filter: blur(20px);
	border-radius: 22px;
	padding: 8px;
	justify-content: space-around;
	box-shadow: 0 10px 30px rgba(0,0,0,.2);
	z-index: 50;
}
.id3t-bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #cfc7bc; font-size: 11px; padding: 6px 10px; border-radius: 14px; }
.id3t-bottom-nav a.is-active { background: var(--id3t-accent); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.id3t-sidebar { display: none; }
	.id3t-bottom-nav { display: flex; }
	.id3t-main { padding: 18px 16px 110px; }
	.id3t-topbar { justify-content: space-between; }
	.id3t-topbar__brand { display: flex; }
	.id3t-passaporte-carimbos { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Mapa de países ---------- */
.id3t-mapa-filtros { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.id3t-mapa-filtros input { padding: 10px 14px; border: 1px solid var(--id3t-borda); border-radius: 10px; background: var(--id3t-card); color: var(--id3t-text); font-family: inherit; }
.id3t-mapa-filtros__continentes { display: flex; gap: 6px; flex-wrap: wrap; }
.id3t-chip { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--id3t-borda); background: var(--id3t-card); font-size: 12.5px; font-weight: 600; color: #6b6258; }
.id3t-chip.is-active { background: var(--id3t-accent); color: #fff; border-color: var(--id3t-accent); }
.id3t-grid-paises { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 20px; max-height: 420px; overflow-y: auto; padding: 4px; }
.id3t-pais-tile { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--id3t-borda); background: var(--id3t-bg2); color: #8a8078; text-align: left; font-size: 13px; }
.id3t-pais-tile.is-visitado { background: color-mix(in srgb, var(--id3t-accent) 16%, white); border-color: var(--id3t-accent); color: var(--id3t-text); font-weight: 600; }
.id3t-pais-tile__bandeira { font-size: 18px; line-height: 1; flex-shrink: 0; display: inline-flex; }
.id3t-pais-tile__bandeira img { width: 28px; height: 21px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.id3t-pais-tile__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.id3t-mapa-titulo-lista { margin-top: 24px; }
.id3t-lista-destinos { display: flex; flex-direction: column; gap: 6px; }
.id3t-destino-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--id3t-card); border: 1px solid var(--id3t-borda); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; }
.id3t-destino-linha span:nth-child(2) { flex: 1; }
.id3t-destino-linha > span:first-child { flex: 1; min-width: 120px; }

/* ---------- Passaporte visual ---------- */
.id3t-passaporte-shell { margin: 18px 0 30px; display: flex; justify-content: center; perspective: 1600px; }
.id3t-passaporte-capa {
	width: 220px; aspect-ratio: 5 / 7; border-radius: 10px; cursor: pointer;
	background: linear-gradient(155deg, #262626, var(--id3t-ink));
	box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.1);
	color: #f2ede6;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	padding: 20px; text-align: center;
	transition: transform .2s ease;
}
.id3t-passaporte-capa:hover { transform: translateY(-4px) scale(1.02); }
.id3t-passaporte-capa__logo { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.id3t-passaporte-capa__logo .id3t-icon { width: 24px; height: 24px; }
.id3t-passaporte-capa__logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.id3t-passaporte-capa__titulo { font-size: 11px; letter-spacing: 2px; font-weight: 700; margin: 4px 0 0; opacity: .85; }
.id3t-passaporte-capa__nome { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; margin: 0; }
.id3t-passaporte-capa__numero { font-size: 11px; opacity: .7; margin: 0; letter-spacing: 1px; }
.id3t-passaporte-capa__dica { font-size: 11px; opacity: .6; margin-top: 10px; }

.id3t-passaporte-paginas { width: 100%; max-width: 100%; box-sizing: border-box; }
.id3t-passaporte-pagina {
	display: none; background: #F5F0E4; border-radius: 12px; padding: 24px; min-height: 300px; position: relative;
	background-image: repeating-linear-gradient(45deg, rgba(196,98,45,.05) 0, rgba(196,98,45,.05) 1px, transparent 1px, transparent 14px),
		repeating-linear-gradient(-45deg, rgba(196,98,45,.05) 0, rgba(196,98,45,.05) 1px, transparent 1px, transparent 14px);
	box-shadow: 0 6px 24px rgba(0,0,0,.12);
	transform-origin: left center;
	backface-visibility: hidden;
	box-sizing: border-box;
	overflow: hidden;
}
.id3t-passaporte-pagina.is-ativa { display: block; }
.id3t-passaporte-pagina.is-virando { animation: id3tVirarPagina .22s ease forwards; }
@keyframes id3tVirarPagina { from { transform: rotateY(0deg); opacity: 1; } to { transform: rotateY(-90deg); opacity: .3; } }
.id3t-passaporte-pagina__vazia { color: #8a7d68; text-align: center; padding: 60px 20px; font-size: 14px; }
.id3t-passaporte-pagina__numero { position: absolute; bottom: 10px; right: 16px; font-size: 11px; color: #a3937a; }
.id3t-passaporte-carimbos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 100%; }
.id3t-carimbo {
	border: 3px solid var(--cor-carimbo, #C4622D); border-radius: 50%; aspect-ratio: 1; display: flex; flex-direction: column;
	align-items: center; justify-content: center; text-align: center; padding: 10px; color: var(--cor-carimbo, #C4622D);
	transform: rotate(-4deg); opacity: .88; gap: 2px;
}
.id3t-carimbo__bandeira { font-size: 20px; display: inline-flex; }
.id3t-carimbo__bandeira-img { width: 52px; height: 39px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
.id3t-carimbo__linha { width: 55%; height: 1px; background: currentColor; opacity: .45; margin: 3px 0; }
.id3t-carimbo__nome { font-size: 11px; line-height: 1.2; }
.id3t-carimbo__data { font-size: 10px; }
.id3t-carimbo__visitado { font-size: 8px; letter-spacing: 1.5px; font-weight: 700; margin-top: 2px; }
.id3t-carimbo__retro { font-size: 8px; opacity: .7; }
.id3t-passaporte-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; font-size: 13px; flex-wrap: wrap; }

@media (prefers-color-scheme: dark) {
	:root {
		--id3t-base: #17140F;
		--id3t-card: #211D17;
		--id3t-text: #EDE7DD;
		--id3t-borda: #332C22;
		--id3t-bg2: #2A241C;
	}
	body { color: var(--id3t-text); }
	h1, h2, h3 { color: #F5EFE4; }
	.id3t-form input, .id3t-form select, .id3t-form textarea { background: #17140F; color: var(--id3t-text); }
	.id3t-btn { color: var(--id3t-text); }
}