/**
 * Gosy — tarjeta única con pestañas (event-tabs.js).
 * La tarjeta exterior lleva el skin GoSocial; los tres bloques internos
 * (organizadores, ubicación, tiempo) se neutralizan: pierden su borde,
 * sombra, margen y etiqueta naranja porque la pestaña asume ese papel.
 * Sin JS este CSS no encuentra .gosy-etabs y las tarjetas apiladas
 * originales quedan intactas (fallback).
 */

/* ---- Tarjeta exterior ---- */
.gosy-etabs {
	background: var(--gosy-surface, #ffffff);
	border: 1px solid var(--gosy-border, #d3def0);
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(26, 37, 56, 0.06), 0 10px 28px rgba(26, 37, 56, 0.07);
}

/* ---- Barra de pestañas ---- */
.gosy-etabs-bar {
	display: flex;
	border-bottom: 1px solid var(--gosy-border, #e4ebf5);
	padding: 0 8px;
}

.gosy-etabs-tab {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: inherit;
	font-size: 0.84rem;
	font-weight: 500;
	color: var(--gosy-muted, #637799);
	background: none;
	border: 0;
	border-bottom: 2.5px solid transparent;
	padding: 13px 14px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.gosy-etabs-tab svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}

.gosy-etabs-tab:hover {
	color: var(--gosy-ink, #1a2538);
}

.gosy-etabs-tab:focus-visible {
	outline: 2px solid var(--gosy-brand, #fe7900);
	outline-offset: -2px;
}

.gosy-etabs-tab.active {
	color: var(--gosy-brand, #fe7900);
	font-weight: 600;
	border-bottom-color: var(--gosy-brand, #fe7900);
}

/* Temperatura media en la pestaña del tiempo */
.gosy-etabs-temp {
	font-weight: 600;
	color: var(--gosy-ink, #1a2538);
	font-variant-numeric: tabular-nums;
	margin-left: -2px;
}

.gosy-etabs-tab.active .gosy-etabs-temp {
	color: var(--gosy-brand, #fe7900);
}

/* Semáforo del tiempo */
.gosy-etabs-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	margin-left: -1px;
	flex-shrink: 0;
}

.gosy-etabs-dot--ideal  { background: var(--gosy-success, #16a34a); }
.gosy-etabs-dot--ok     { background: var(--gosy-warning, #f59e0b); }
.gosy-etabs-dot--riesgo { background: var(--gosy-danger, #d63638); }

/* ---- Paneles ---- */
.gosy-etabs-hidden {
	display: none !important;
}

/* Los bloques internos dejan de ser tarjetas independientes */
.gosy-etabs .gosy-event-card.ep-box-col-12 {
	margin-top: 0;
	margin-bottom: 0;
}

.gosy-etabs #ep-sl-event-meta.gosy-org-card,
.gosy-etabs #ep_sl_event_venue_detail .gosy-venue-card,
.gosy-etabs .gosy-wx-card {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Las etiquetas naranjas y los círculos de sección sobran: la pestaña ya
   identifica el contenido. Los selectores llevan el ID porque las reglas
   originales (event-organizers.css, venue-location.css) también lo usan. */
.gosy-etabs #ep-sl-event-meta .gosy-org-label,
.gosy-etabs #ep-sl-event-meta .gosy-org-icon,
.gosy-etabs #ep_sl_event_venue_detail .gosy-venue-label,
.gosy-etabs #ep_sl_event_venue_detail .gosy-venue-pin,
.gosy-etabs .gosy-wx-label {
	display: none;
}

/* El emoji del tiempo es dato (estado del cielo): pasa de círculo a inline */
.gosy-etabs .gosy-wx-icon {
	flex: 0 0 auto;
	width: auto;
	height: auto;
	background: transparent;
	border-radius: 0;
	font-size: 20px;
}

/* ---- Responsive: pestañas compactas ----
   El pin y la temperatura se explican solos; el icono de dos personas no:
   la pestaña de Organizadores conserva su texto también en móvil. */
@media (max-width: 640px) {
	.gosy-etabs-bar {
		padding: 0 2px;
	}

	.gosy-etabs-tab {
		flex: 1 1 auto;
		justify-content: center;
		padding: 12px 4px;
		font-size: 0.78rem;
	}

	.gosy-etabs-tab svg {
		width: 20px;
		height: 20px;
	}

	.gosy-etabs-label {
		display: none;
	}

	.gosy-etabs-tab--org .gosy-etabs-label {
		display: inline;
	}
}