/**
 * Estilos del Frontend - Horario Versus
 * Diseño Premium: Líneas finas, curvas suaves y optimización móvil
 */

/* Importar tipografía Outfit para un acabado ultra premium */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

.versus-schedule-container {
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: #1e293b;
	margin: 20px 0;
	width: 100%;
	box-sizing: border-box;
}

.versus-schedule-container * {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- */
/* 1. CABECERA DE FILTROS POR CATEGORÍA                             */
/* ---------------------------------------------------------------- */
.versus-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
	justify-content: center;
}

.versus-filter-btn {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	color: #64748b;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 500;
	border-radius: 30px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.versus-filter-btn:hover {
	border-color: #cbd5e1;
	color: #1e293b;
	transform: translateY(-1px);
}

.versus-filter-btn.active {
	background: #1e293b;
	border-color: #1e293b;
	color: #ffffff;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.filter-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
}

/* ---------------------------------------------------------------- */
/* 2. VISTA ESCRITORIO (CSS GRID SEMANAL)                          */
/* ---------------------------------------------------------------- */
.versus-desktop-view {
	display: block;
	width: 100%;
	overflow-x: auto;
}

.versus-grid-schedule {
	display: grid;
	grid-template-columns: 80px repeat(5, 1fr);
	gap: 12px;
	min-width: 900px;
	background: #f8fafc;
	padding: 16px;
	border-radius: 20px;
	border: 1px solid #f1f5f9;
}

/* Celdas Cabecera */
.grid-header-cell {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 12px 6px;
	text-align: center;
	font-weight: 600;
	font-size: 14px;
	color: #475569;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.time-column-header {
	background: #f1f5f9;
	border-color: #cbd5e1;
	font-weight: 700;
}

/* Celda de Hora */
.grid-time-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 700;
	color: #475569;
}

/* Tarjeta de actividad en Grid */
.grid-activity-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 8px;
	position: relative;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0,0,0,0.02);
	min-height: 85px;
}

.grid-activity-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
	border-color: #cbd5e1;
}

.grid-activity-card.filtered-out {
	opacity: 0.15 !important;
	pointer-events: none;
	transform: scale(0.96);
}

.card-time {
	font-size: var(--vs-desktop-time-size, 11px);
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.card-name {
	margin: 0;
	font-size: var(--vs-desktop-title-size, 14px);
	font-weight: 600;
	color: #0f172a;
	line-height: 1.3;
}

.card-instructor {
	font-size: var(--vs-desktop-instructor-size, 11px);
	color: #64748b;
	font-style: normal;
}

.card-footer-status {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.card-cta-link {
	font-size: 11px;
	color: #2563eb;
	text-decoration: none;
	font-weight: 600;
}

.card-cta-link:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------- */
/* 3. VISTA MÓVIL (TIMELINE RESPONSIVO COMPACTO)                     */
/* ---------------------------------------------------------------- */
.versus-mobile-view {
	display: none;
	width: 100%;
}

/* Ocultar / Mostrar vistas según breakpoint de tableta/móvil */
@media (max-width: 768px) {
	.versus-desktop-view {
		display: none;
	}
	.versus-mobile-view {
		display: block;
	}
}

/* Selector de Días Deslizante */
.versus-day-selector-wrapper {
	width: 100%;
	position: relative;
	margin-bottom: 20px;
	overflow: hidden;
}

.versus-day-selector {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding: 4px 4px 10px 4px;
	scrollbar-width: none; /* Firefox */
}

.versus-day-selector::-webkit-scrollbar {
	display: none; /* Safari & Chrome */
}

.versus-day-tab-btn {
	flex: 0 0 calc(20% - 7px);
	min-width: 55px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 10px 6px;
	cursor: pointer;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: all 0.25s ease;
	scroll-snap-align: start;
}

.versus-day-tab-btn .day-label {
	font-size: 13px;
	font-weight: 500;
	color: #64748b;
}

.versus-day-tab-btn:hover {
	border-color: #cbd5e1;
}

/* Pestaña de día activa */
.versus-day-tab-btn.is-active {
	background: #ffffff;
	border-color: #ef4444; /* Borde rojo fino como go-fit */
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.08);
}

.versus-day-tab-btn.is-active .day-label {
	color: #ef4444;
	font-weight: 700;
}

/* Contenedores de Timeline */
.versus-day-timeline {
	animation: versusFadeIn 0.3s ease-in-out;
}

.versus-empty-day {
	text-align: center;
	padding: 40px 20px;
	background: #f8fafc;
	border-radius: 16px;
	border: 1px dashed #cbd5e1;
	color: #64748b;
}

.timeline-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Tarjetas de clases en timeline móvil */
.timeline-card-wrapper {
	transition: all 0.3s ease;
	width: 100%;
}

.timeline-card-wrapper.filtered-out {
	display: none !important;
}

.timeline-card {
	background: #ffffff;
	border: 1px solid #eaeaea;
	border-radius: 16px;
	padding: 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	transition: all 0.25s ease;
	cursor: pointer;
}

.timeline-card:active {
	transform: scale(0.99);
}

.timeline-card-left {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.timeline-cat-badge {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.timeline-card-title {
	margin: 0;
	font-size: var(--vs-mobile-title-size, 21px);
	font-weight: 700;
	color: #0f172a;
	line-height: 1.25;
}

.timeline-card-instructor {
	font-size: var(--vs-mobile-instructor-size, 15px);
	color: #64748b;
}

.timeline-card-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	min-width: 120px;
}

.timeline-card-time {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.timeline-card-time strong {
	font-size: var(--vs-mobile-time-size, 21px);
	color: #0f172a;
	font-weight: 700;
}

.timeline-card-time span {
	font-size: var(--vs-mobile-instructor-size, 15px);
	color: #64748b;
}

.timeline-cta-btn {
	background: transparent;
	border: 1px solid #e2e8f0;
	border-radius: 30px;
	padding: 7px 18px;
	font-size: 13px;
	font-weight: 600;
	color: #475569;
	text-decoration: none;
	text-align: center;
	display: inline-block;
	transition: all 0.2s ease;
}

.timeline-cta-btn:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
	color: #0f172a;
}

/* ---------------------------------------------------------------- */
/* 4. INSIGNIAS Y ESTADOS EN TIEMPO REAL                            */
/* ---------------------------------------------------------------- */

/* Insignias de Estado */
.live-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 14px;
	font-size: 12px;
	font-weight: 700;
	border-radius: 20px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.live-status-pill.hidden {
	display: none !important;
}

/* Estado: En curso (Verde brillante) */
.live-status-pill.in-progress {
	background: #f0fdf4;
	color: #16a34a;
	border: 1px solid #bbf7d0;
}

/* Punto de pulso verde */
.live-status-pill.in-progress::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	background-color: #16a34a;
	border-radius: 50%;
	animation: versusPulseGreen 1.5s infinite;
}

@keyframes versusPulseGreen {
	0% { transform: scale(0.9); opacity: 0.8; box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4); }
	50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); }
	100% { transform: scale(0.9); opacity: 0.8; box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

/* Estado: Finalizada */
.live-status-pill.finalized {
	background: #fff7ed;
	color: #ea580c;
	border: 1px solid #ffedd5; /* Color naranja suave estilo go-fit */
}

/* Estilo atenuado para tarjeta completa finalizada */
.versus-card-item.is-finalized {
	opacity: 0.5;
	filter: grayscale(40%);
}

.versus-card-item.is-finalized .timeline-card,
.versus-card-item.is-finalized.grid-activity-card {
	background: #fafafa;
	border-color: #e5e5e5;
}

.versus-card-item.is-finalized .timeline-card-title,
.versus-card-item.is-finalized .card-name {
	text-decoration: line-through;
	color: #64748b;
}

/* ---------------------------------------------------------------- */
/* 5. MODAL DE DETALLES (BACKDROP BLUR / GLASSMORPHISM)            */
/* ---------------------------------------------------------------- */
.versus-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(15, 23, 42, 0.4);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 20px;
	animation: versusFadeInOverlay 0.25s ease-out;
}

@keyframes versusFadeInOverlay {
	from { opacity: 0; }
	to { opacity: 1; }
}

.versus-modal-box {
	background: #ffffff;
	border: 1px solid rgba(226, 232, 240, 0.8);
	border-radius: 20px;
	max-width: 480px;
	width: 100%;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
	position: relative;
	animation: versusScaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	overflow: hidden;
}

@keyframes versusScaleIn {
	from { transform: scale(0.9) translateY(10px); opacity: 0; }
	to { transform: scale(1) translateY(0); opacity: 1; }
}

.versus-modal-close {
	position: absolute;
	top: 15px;
	right: 15px;
	background: #f1f5f9;
	border: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 20px;
	line-height: 32px;
	cursor: pointer;
	color: #64748b;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.versus-modal-close:hover {
	background: #e2e8f0;
	color: #0f172a;
}

.versus-modal-content {
	padding: 30px 24px;
}

.modal-cat-badge {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: inline-block;
	margin-bottom: 8px;
}

.modal-title {
	margin: 0 0 20px 0;
	font-size: 22px;
	font-weight: 700;
	color: #0f172a;
}

.modal-meta-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
	margin-bottom: 24px;
	background: #f8fafc;
	padding: 15px;
	border-radius: 12px;
	border: 1px solid #f1f5f9;
}

.modal-meta-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.modal-meta-item .dashicons {
	color: #64748b;
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.modal-meta-item div {
	display: flex;
	flex-direction: column;
}

.modal-meta-item strong {
	font-size: 11px;
	color: #64748b;
	text-transform: uppercase;
}

.modal-meta-item span {
	font-size: 13px;
	color: #0f172a;
	font-weight: 600;
}

.modal-description-box {
	margin-bottom: 24px;
}

.modal-description-box h4 {
	margin: 0 0 8px 0;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: #475569;
	letter-spacing: 0.5px;
}

.modal-description-box p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #475569;
}

.modal-actions {
	text-align: center;
}

.versus-modal-action-btn {
	background: #1e293b;
	color: #ffffff;
	border: none;
	width: 100%;
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 12px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	transition: all 0.2s ease;
}

.versus-modal-action-btn:hover {
	background: #0f172a;
	transform: translateY(-1px);
}