/* ─── Aba "Hoje" v2 (detalhe do pico — espelha o app Waves Pro) ─── */
.tdy-v2 {
	padding: 0;
	margin: 0 0 1.5rem;
	font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	color: #1a1e2a;
}
.wf-tdy__empty { color: #6b7280; padding: 20px 0; }

/* ── 4 cards iguais ── */
.tdy-v2__top {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.9rem;
	margin-bottom: 1rem;
}
.tdy-v2-card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 22px;
	padding: 1.05rem 1.15rem 1rem;
	box-shadow: 0 3px 16px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.tdy-v2-card__title {
	font-size: 1.05rem;
	font-weight: 700;
	color: #6b7280;
	letter-spacing: -0.01em;
	margin-bottom: 0.35rem;
}
.tdy-v2-card__big-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	line-height: 1;
	flex: 1;
}
.tdy-v2-card__big {
	font-size: 2.9rem;
	font-weight: 800;
	color: #1a1e2a;
	letter-spacing: -0.04em;
	line-height: 1;
	white-space: nowrap;
}
.tdy-v2-card__icon { flex-shrink: 0; line-height: 0; display: inline-flex; align-items: center; }
.tdy-v2-card__icon svg { display: block; }
.tdy-v2-card__sub {
	margin-top: 0.5rem;
	font-size: 1.6rem;
	color: #94a3b8;
	font-weight: 700;
	letter-spacing: -0.015em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tdy-v2-card__score { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.5rem; }
.tdy-v2-card__score-dot { width: 22px; height: 22px; border-radius: 50%; position: relative; flex-shrink: 0; }
.tdy-v2-card__score-dot::after {
	content: ''; position: absolute; left: 100%; top: 50%;
	transform: translateY(-50%); width: 8px; height: 4px;
	background-color: inherit; border-radius: 0 2px 2px 0;
}
.tdy-v2-card__score-num { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1; }
.tdy-v2-card .tdy-v2-card__big--surfe { font-size: 2.9rem; }

/* ── Timeline ── */
.tdy-v2-timeline {
	position: relative;
	margin: 0 0 9.75rem;
	padding-top: 1.6rem;
	padding-bottom: 0.4rem;
}
@media (max-width: 768px) { .tdy-v2-timeline { margin-bottom: 8.5rem; } }
.tdy-v2-timeline__ticks { position: relative; height: 1.2rem; margin-bottom: 0.45rem; }
.tdy-v2-timeline__tick {
	position: absolute; transform: translateX(-50%);
	font-size: 0.85rem; font-weight: 600; color: #94a3b8; letter-spacing: 0.02em;
}
.tdy-v2-timeline__bar { position: relative; height: 10px; }
.tdy-v2-timeline__segments { position: relative; height: 100%; border-radius: 4px; overflow: hidden; }
.tdy-v2-timeline__seg { position: absolute; top: 0; bottom: 0; }
.tdy-v2-timeline__sep {
	position: absolute; top: 50%; width: 1px; height: 46px;
	background: #cbd5e1; transform: translate(-50%, -50%); pointer-events: none;
}
.tdy-v2-timeline__marker {
	position: absolute; top: 50%; width: 25px; height: 25px;
	border-radius: 50%; background: #94a3b8; transform: translate(-50%, -50%);
	pointer-events: auto; cursor: grab; z-index: 2;
	user-select: none; -webkit-user-select: none; touch-action: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tdy-v2-timeline__marker:hover { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.05); }
.tdy-v2-timeline__marker:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(28, 30, 248, 0.25); }
.tdy-v2-timeline__marker.is-dragging {
	cursor: grabbing; transform: translate(-50%, -50%) scale(1.15);
	box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.06); transition: none;
}
.tdy-v2-timeline__marker.is-pinned:not(.is-dragging) { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08); }
.tdy-v2-timeline__floating { transition: left 0.18s ease; }
.tdy-v2.is-dragging .tdy-v2-timeline__floating { transition: none; }
.tdy-v2-timeline__floating {
	position: absolute; top: calc(100% + 0.5rem);
	transform: translateX(-50%); pointer-events: none;
}
.tdy-v2-timeline__floating.is-left { transform: translateX(0); }
.tdy-v2-timeline__floating.is-right { transform: translateX(calc(-100% + 16px)); }
.tdy-v2-pill {
	position: relative; background: rgba(255, 255, 255, 0.65);
	backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
	padding: 0.85rem 1.05rem;
}
.tdy-v2-pill__inner { display: flex; gap: 1.5rem; }
.tdy-v2-pill__col { display: flex; flex-direction: column; gap: 0.35rem; }
.tdy-v2-pill__label {
	font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em;
	color: #6b7280; text-transform: uppercase; text-align: center;
}
.tdy-v2-pill__row { display: flex; align-items: center; gap: 0.55rem; }
.tdy-v2-pill__strong { font-size: 1.15rem; font-weight: 800; color: #1a1e2a; letter-spacing: -0.02em; }
.tdy-v2-pill__icon {
	width: 30px; height: 30px; border-radius: 7px;
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tdy-v2-pill__icon.swell { background: rgba(0, 0, 0, 0.06); }
.tdy-v2-pill__icon.wind-t { background: rgba(34, 197, 94, 0.55); }
.tdy-v2-pill__icon.wind-c { background: rgba(250, 204, 21, 0.55); }
.tdy-v2-pill__icon.wind-m { background: rgba(239, 68, 68, 0.55); }
.tdy-v2-pill__icon svg { width: 62%; height: 62%; }
.tdy-v2-pill__dir {
	font-size: 1.15rem; font-weight: 800; color: #1a1e2a; letter-spacing: -0.02em;
	display: inline-flex; align-items: baseline; gap: 0.3rem;
}
.tdy-v2-pill__deg { color: #94a3b8; font-weight: 700; font-size: 0.95rem; }
.tdy-v2-pill__unit { color: #94a3b8; font-weight: 700; font-size: 0.7em; margin-left: 0.05rem; }
.tdy-v2-pill__wind-tipo {
	font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	margin-top: 0.2rem; padding: 0.1rem 0.55rem; border-radius: 999px;
	display: inline-block; align-self: flex-start;
}
.tdy-v2-pill__wind-tipo:empty { display: none; }
.tdy-v2-pill__wind-tipo.wind-tipo-wind-t { background: rgba(34, 197, 94, 0.18); color: #15803d; }
.tdy-v2-pill__wind-tipo.wind-tipo-wind-c { background: rgba(250, 204, 21, 0.22); color: #92580a; }
.tdy-v2-pill__wind-tipo.wind-tipo-wind-m { background: rgba(239, 68, 68, 0.18); color: #b91c1c; }

/* ── Bottom (chart + map) ── */
.tdy-v2__bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tdy-v2__map {
	background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 24px;
	overflow: hidden; box-shadow: 0 3px 16px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
	display: flex; flex-direction: column; position: relative;
}
.tdy-v2__map .peak-detail-map-container { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; min-height: 0; position: relative; }
.tdy-v2__map #spot-location-map {
	flex: 1 1 auto; width: 100%; height: 100%;
	min-height: 320px; min-width: 0; background: #e5e7eb;
	/* z-index explícito → o mapa vira um stacking context e confina os panes
	 * internos do Leaflet (z-index 200–700) ABAIXO da bússola (que é irmã). */
	position: relative; z-index: 1;
}
/* Thumbnail de satélite estático no lugar do mapa Leaflet — mesmo dimensionamento,
 * recortado pra preencher (centrado no pico), abaixo da bússola (z-index 1 < 5). */
.tdy-v2__map .peak-detail-map-container .spot-location-img {
	display: block; flex: 1 1 auto; width: 100%; height: 100%;
	min-height: 320px; min-width: 0; object-fit: cover;
	position: relative; z-index: 1; background: #e5e7eb;
}

/* Bússola (compass) + setas swell/vento sobre o mapa. */
.wind-compass-container {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	z-index: 5; pointer-events: none;
}
.wind-compass { width: 240px; height: 216px; position: relative; }
.wind-compass svg { width: 100%; height: 100%; }
.wind-arrow-container {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;
}
.wind-arrow {
	position: absolute; width: 44px; height: 44px; transition: transform 0.3s ease;
	top: 50%; left: 50%; margin-left: -22px; margin-top: -38.5px; transform-origin: center 87.5%;
}
.wave-arrow {
	position: absolute; width: 55px; height: 55px; transition: transform 0.3s ease;
	top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: center center;
}
.wind-arrow svg, .wave-arrow svg { width: 100%; height: 100%; }
.peak-detail-map-container .wind-arrow svg { filter: brightness(0) invert(1) !important; }
.peak-detail-map-container .wave-arrow svg { filter: brightness(0) invert(1) !important; }

/* ── Maré e Sol chart ── */
.tdy-tide {
	position: relative;
	background:
		radial-gradient(120% 80% at 25% 0%, rgba(186, 230, 253, 0.28) 0%, rgba(186, 230, 253, 0) 60%),
		radial-gradient(120% 80% at 80% 100%, rgba(125, 211, 252, 0.18) 0%, rgba(125, 211, 252, 0) 60%),
		#ffffff;
	border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 24px;
	padding: 1.1rem 1.2rem 1.05rem; color: #1a1e2a;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 10px 32px rgba(15, 23, 42, 0.05);
	backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
	overflow: hidden;
}
.tdy-tide__head { display: flex; justify-content: space-between; align-items: center; }
.tdy-tide__title { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; color: #475569; }
.tdy-tide__badge {
	background: rgba(15, 23, 42, 0.06); color: #1a1e2a;
	font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em;
	padding: 4px 12px; border-radius: 999px;
	display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid rgba(15, 23, 42, 0.08);
}
.tdy-tide__title-row { display: flex; align-items: baseline; gap: 0.55rem; margin: 0.5rem 0; flex-wrap: wrap; }
.tdy-tide__big { font-size: 2.2rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: #1a1e2a; }
.tdy-tide__sub { font-size: 0.92rem; font-weight: 500; color: #64748b; }
.tdy-tide__chart-wrap { position: relative; margin-top: 0.35rem; padding-top: 18px; }
.tdy-tide__chart { width: 100%; height: auto; aspect-ratio: 380 / 160; display: block; }
.tdy-tide__now-pill {
	position: absolute; top: 0; transform: translateX(-50%);
	background: #fff; color: #1a1e2a; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em;
	padding: 2px 10px; border-radius: 999px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
	white-space: nowrap; pointer-events: none; z-index: 2;
}

/* ── Responsivo ── */
@media (max-width: 1024px) { .tdy-v2__top { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
	.tdy-v2__bottom { grid-template-columns: 1fr; }
	.tdy-v2-card__big { font-size: 1.8rem; }
	.tdy-v2-card .tdy-v2-card__big--surfe { font-size: 1.4rem; }
	.tdy-v2-card__sub { font-size: 1rem; font-weight: 500; }
	.tdy-v2-pill { padding: 0.75rem 0.95rem; max-width: calc(100vw - 1.5rem); }
	.tdy-v2-pill__inner { gap: 1.1rem; }
	.tdy-v2-pill__label { font-size: 0.7rem; letter-spacing: 0.08em; }
	.tdy-v2-pill__strong, .tdy-v2-pill__dir { font-size: 1.05rem; }
	.tdy-v2-pill__deg { font-size: 0.88rem; }
	.tdy-v2-pill__icon { width: 26px; height: 26px; }
	.tdy-v2-pill__row { gap: 0.45rem; }
}
@media (max-width: 480px) {
	.tdy-v2__top { grid-template-columns: 1fr 1fr; gap: 0.65rem; }
	.tdy-v2-card { padding: 0.85rem 0.95rem 0.9rem; border-radius: 18px; }
	.tdy-v2-card__big { font-size: 1.6rem; }
	.tdy-v2-card .tdy-v2-card__big--surfe { font-size: 1.2rem; }
	.tdy-v2-card__icon svg { width: 32px; height: auto; }
	.tdy-v2-pill { padding: 0.65rem 0.8rem; }
	.tdy-v2-pill__inner { flex-direction: row; gap: 0.85rem; }
	.tdy-v2-pill__col { gap: 0.3rem; }
	.tdy-v2-pill__label { font-size: 0.65rem; }
	.tdy-v2-pill__strong, .tdy-v2-pill__dir { font-size: 1rem; }
	.tdy-v2-pill__deg { font-size: 0.82rem; }
	.tdy-v2-pill__icon { width: 24px; height: 24px; }
	.tdy-v2-pill__row { gap: 0.4rem; }
}