/**
 * MW Events - Frontend CSS
 * Adapta el sistema visual del sitio existente ofreciendo máximo contraste y contenedores oscuros
 */

:root {
	--mw-font-family: var(--e-global-typography-primary-font-family, "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	--mw-color-heading: #ffffff;
	--mw-color-body: #e5e7eb;
	--mw-color-muted: #9ca3af;
	--mw-color-accent: var(--e-global-color-accent, #e50914);
	--mw-color-bg-main: #121212;
	--mw-color-bg-card: #1c1c1e;
	--mw-color-bg-card-hover: #26262a;
	--mw-color-border: #2c2c2e;
	--mw-radius-card: 12px;
	--mw-transition: all 0.25s ease-in-out;
}

/* Reset y base de tipografía */
body.single-evento,
body.post-type-archive-evento,
body.post-type-archive-evento #page,
body.single-evento #page,
body.post-type-archive-evento .site-main,
body.single-evento .site-main,
.mw-archive-events-page,
.mw-single-event-page {
	background-color: #0d0d0d !important;
	color: var(--mw-color-body) !important;
}

.mw-archive-events-page,
.mw-single-event-page,
.mw-event-container {
	font-family: var(--mw-font-family) !important;
	color: var(--mw-color-body) !important;
}

.mw-archive-events-page h1,
.mw-archive-events-page h2,
.mw-archive-events-page h3,
.mw-single-event-page h1,
.mw-single-event-page h2,
.mw-single-event-page h3,
.mw-single-event-page h4 {
	color: var(--mw-color-heading) !important;
}

/* Contenedor principal reutilizando Elementor */
.mw-event-container {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Hero Section con Fondo Oscuro */
.mw-events-hero {
	background: linear-gradient(135deg, #1c1c1e 0%, #121212 100%) !important;
	border: 1px solid var(--mw-color-border) !important;
	border-radius: 16px !important;
	padding: 48px 32px !important;
	text-align: center !important;
	margin-top: 20px !important;
	margin-bottom: 40px !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
.mw-hero-title {
	font-size: 42px !important;
	font-weight: 800 !important;
	margin-bottom: 12px !important;
	color: #ffffff !important;
}
.mw-hero-subtitle {
	font-size: 18px !important;
	max-width: 680px !important;
	margin: 0 auto !important;
	color: var(--mw-color-muted) !important;
	line-height: 1.6 !important;
}

/* Tarjetas de Sección (Próximos y Pasados) */
.mw-section-proximos,
.mw-section-pasados {
	background: #141416 !important;
	border: 1px solid var(--mw-color-border) !important;
	border-radius: 16px !important;
	padding: 32px !important;
	margin-bottom: 40px !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.mw-section-title {
	font-size: 28px !important;
	font-weight: 700 !important;
	margin-bottom: 24px !important;
	color: #ffffff !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
}
.mw-title-pasados {
	opacity: 0.9 !important;
}
.mw-section-desc {
	font-size: 15px !important;
	margin-top: -16px !important;
	margin-bottom: 24px !important;
	color: var(--mw-color-muted) !important;
}

/* Lista de Eventos (Grid/Filas) */
.mw-events-list {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
}

/* Tarjeta de Evento (Card / Fila) */
.mw-event-card {
	display: grid !important;
	grid-template-columns: 90px 1fr auto !important;
	align-items: center !important;
	background: var(--mw-color-bg-card) !important;
	border: 1px solid var(--mw-color-border) !important;
	border-radius: var(--mw-radius-card) !important;
	padding: 20px 24px !important;
	gap: 24px !important;
	transition: var(--mw-transition) !important;
}
.mw-event-card:hover {
	background: var(--mw-color-bg-card-hover) !important;
	border-color: #3a3a40 !important;
	transform: translateY(-2px) !important;
}
/* Estilos para Eventos Pasados (Muted / Tenue) */
.mw-event-card-pasado {
	background: #151517 !important;
	border: 1px solid #222226 !important;
	opacity: 0.55 !important;
	filter: grayscale(85%) !important;
	box-shadow: none !important;
	transition: all 0.3s ease !important;
}

.mw-event-card-pasado:hover {
	opacity: 0.9 !important;
	filter: grayscale(15%) !important;
	background: #1c1c20 !important;
	border-color: #383840 !important;
}

.mw-event-card-pasado .mw-date-day,
.mw-event-card-pasado .mw-event-title a,
.mw-event-card-pasado .mw-location-city {
	color: #a1a1aa !important;
}

.mw-event-card-pasado .mw-date-month {
	color: #71717a !important;
}

.mw-event-card-pasado .mw-event-card-date {
	background: rgba(255, 255, 255, 0.03) !important;
	border-color: rgba(255, 255, 255, 0.05) !important;
}

.mw-event-card-pasado .mw-btn-details {
	border-color: rgba(255, 255, 255, 0.15) !important;
	color: #a1a1aa !important;
}

/* Bloque Fecha */
.mw-event-card-date {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid var(--mw-color-border) !important;
	border-radius: 8px !important;
	padding: 10px 8px !important;
	text-align: center !important;
	min-width: 80px !important;
}
.mw-date-day {
	font-size: 28px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	color: #ffffff !important;
}
.mw-date-month {
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 1px !important;
	color: var(--mw-color-accent) !important;
	margin-top: 2px !important;
}
.mw-date-year {
	font-size: 11px !important;
	color: var(--mw-color-muted) !important;
}

/* Bloque Información */
.mw-event-card-info {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
}
.mw-event-meta-top {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
}
.mw-event-badge {
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	padding: 4px 12px !important;
	border-radius: 20px !important;
	letter-spacing: 0.5px !important;
}
.mw-badge-disponibles {
	background: rgba(46, 204, 113, 0.18) !important;
	color: #2ecc71 !important;
	border: 1px solid rgba(46, 204, 113, 0.4) !important;
}
.mw-badge-ultimas_entradas {
	background: rgba(230, 126, 34, 0.18) !important;
	color: #e67e22 !important;
	border: 1px solid rgba(230, 126, 34, 0.4) !important;
}
.mw-badge-agotado {
	background: rgba(231, 76, 60, 0.18) !important;
	color: #e74c3c !important;
	border: 1px solid rgba(231, 76, 60, 0.4) !important;
}
.mw-badge-proximamente {
	background: rgba(241, 196, 15, 0.18) !important;
	color: #f1c40f !important;
	border: 1px solid rgba(241, 196, 15, 0.4) !important;
}
.mw-badge-pasado {
	background: rgba(189, 195, 199, 0.18) !important;
	color: #bdc3c7 !important;
	border: 1px solid rgba(189, 195, 199, 0.4) !important;
}

.mw-event-time {
	font-size: 13px !important;
	color: var(--mw-color-muted) !important;
}
.mw-event-title {
	font-size: 20px !important;
	font-weight: 700 !important;
	margin: 2px 0 !important;
	line-height: 1.3 !important;
}
.mw-event-title a {
	color: #ffffff !important;
	text-decoration: none !important;
	transition: var(--mw-transition) !important;
}
.mw-event-title a:hover {
	color: var(--mw-color-accent) !important;
}
.mw-event-location {
	font-size: 14px !important;
	color: var(--mw-color-body) !important;
}
.mw-location-city {
	font-weight: 600 !important;
	color: #ffffff !important;
}
.mw-event-price {
	font-size: 13px !important;
	color: var(--mw-color-muted) !important;
}

/* Acciones y Botones */
.mw-event-card-actions {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}
.mw-btn-buy,
.elementor-button.mw-btn-buy {
	background-color: var(--mw-color-accent) !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	padding: 12px 20px !important;
	border-radius: 6px !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	transition: var(--mw-transition) !important;
	border: none !important;
	cursor: pointer !important;
	min-height: 48px !important;
}
.mw-btn-buy:hover {
	filter: brightness(1.15) !important;
	transform: scale(1.02) !important;
}

.mw-btn-details,
.elementor-button.mw-btn-details,
.mw-btn-secondary,
.elementor-button.mw-btn-secondary {
	background-color: transparent !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	font-weight: 600 !important;
	padding: 12px 18px !important;
	border-radius: 6px !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	transition: var(--mw-transition) !important;
	cursor: pointer !important;
	min-height: 48px !important;
}
.mw-btn-details:hover,
.mw-btn-secondary:hover {
	background-color: rgba(255, 255, 255, 0.12) !important;
	border-color: #ffffff !important;
}

.mw-btn-disabled {
	background-color: #333333 !important;
	color: #888888 !important;
	padding: 12px 20px !important;
	border-radius: 6px !important;
	cursor: not-allowed !important;
	display: inline-block !important;
}

/* Section CTA Final */
.mw-section-cta-final {
	margin-top: 40px !important;
	margin-bottom: 40px !important;
}
.mw-cta-card {
	background: linear-gradient(135deg, #1f1f22 0%, #141416 100%) !important;
	border: 1px solid var(--mw-color-border) !important;
	border-radius: var(--mw-radius-card) !important;
	padding: 40px !important;
	text-align: center !important;
	max-width: 800px !important;
	margin: 0 auto !important;
}
.mw-cta-card h3 {
	font-size: 26px !important;
	font-weight: 700 !important;
	margin-bottom: 12px !important;
	color: #ffffff !important;
}
.mw-cta-card p {
	font-size: 16px !important;
	margin-bottom: 24px !important;
	color: var(--mw-color-body) !important;
}

/* Paginación AJAX */
.mw-events-pagination-ajax {
	text-align: center !important;
	margin-top: 30px !important;
}

/* ESTILOS DE FICHA INDIVIDUAL (single-evento) */
.mw-single-event-page {
	padding-top: 20px !important;
	padding-bottom: 80px !important;
}

/* Contenedor / Tarjeta Wrapper del Detalle del Evento */
.mw-single-card-wrapper {
	background: #141416 !important;
	border: 1px solid var(--mw-color-border) !important;
	border-radius: 16px !important;
	padding: 40px !important;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
	margin-top: 20px !important;
	margin-bottom: 40px !important;
}

.mw-event-back-link {
	margin-bottom: 24px !important;
}
.mw-event-back-link a {
	color: var(--mw-color-body) !important;
	text-decoration: none !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	transition: var(--mw-transition) !important;
}
.mw-event-back-link a:hover {
	color: var(--mw-color-accent) !important;
}

.mw-single-event-header {
	margin-bottom: 40px !important;
	border-bottom: 1px solid var(--mw-color-border) !important;
	padding-bottom: 24px !important;
}
.mw-single-header-meta {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	margin-bottom: 12px !important;
}
.mw-single-header-city {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #ffffff !important;
}
.mw-single-event-title {
	font-size: 38px !important;
	font-weight: 800 !important;
	margin-bottom: 16px !important;
	line-height: 1.25 !important;
	color: #ffffff !important;
}
.mw-single-header-datetime {
	display: flex !important;
	gap: 24px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--mw-color-body) !important;
}
.mw-single-date,
.mw-single-time {
	color: #ffffff !important;
}

/* Single Event Grid Layout */
.mw-single-event-grid {
	display: grid !important;
	grid-template-columns: 1fr 340px !important;
	gap: 40px !important;
	align-items: start !important;
}
.mw-single-event-main {
	grid-column: 1 !important;
}
.mw-single-event-sidebar {
	grid-column: 2 !important;
	grid-row: 1 / span 2 !important;
}
.mw-single-event-location-box {
	grid-column: 1 !important;
}
.mw-single-event-poster {
	margin-bottom: 30px !important;
	border-radius: var(--mw-radius-card) !important;
	overflow: hidden !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
.mw-single-event-poster img {
	width: 100% !important;
	height: auto !important;
	display: block !important;
}

.mw-single-event-description {
	line-height: 1.7 !important;
	font-size: 16px !important;
	margin-bottom: 40px !important;
	color: var(--mw-color-body) !important;
}
.mw-single-event-description h2 {
	font-size: 24px !important;
	font-weight: 700 !important;
	margin-bottom: 16px !important;
	color: #ffffff !important;
}
.mw-single-event-description p {
	color: var(--mw-color-body) !important;
}

.mw-single-event-additional-info,
.mw-single-event-location-box {
	background: var(--mw-color-bg-card) !important;
	border: 1px solid var(--mw-color-border) !important;
	border-radius: var(--mw-radius-card) !important;
	padding: 24px !important;
	margin-bottom: 30px !important;
}
.mw-single-event-additional-info h3,
.mw-single-event-location-box h3 {
	font-size: 18px !important;
	font-weight: 700 !important;
	margin-bottom: 12px !important;
	color: #ffffff !important;
}

/* Sidebar y Tarjeta Flotante Sticky */
.mw-single-sticky-card {
	background: var(--mw-color-bg-card) !important;
	border: 1px solid var(--mw-color-border) !important;
	border-radius: var(--mw-radius-card) !important;
	padding: 28px !important;
	position: sticky !important;
	top: 40px !important;
}
.mw-single-sticky-card h3 {
	font-size: 20px !important;
	font-weight: 700 !important;
	margin-bottom: 20px !important;
	border-bottom: 1px solid var(--mw-color-border) !important;
	padding-bottom: 12px !important;
	color: #ffffff !important;
}
.mw-single-specs-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 24px 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	font-size: 15px !important;
}
.mw-single-specs-list li {
	display: flex !important;
	justify-content: space-between !important;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.1) !important;
	padding-bottom: 8px !important;
	color: var(--mw-color-body) !important;
}
.mw-single-specs-list li strong {
	color: #ffffff !important;
}
.mw-single-cta-block .mw-btn-large {
	width: 100% !important;
	justify-content: center !important;
	font-size: 16px !important;
	padding: 16px !important;
}

/* Barra Flotante Móvil (Sticky Bottom) */
.mw-mobile-sticky-bar {
	display: none !important;
	position: fixed !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	background: #111113 !important;
	border-top: 1px solid var(--mw-color-border) !important;
	padding: 12px 20px !important;
	z-index: 9999 !important;
	align-items: center !important;
	justify-content: space-between !important;
	box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.8) !important;
}
.mw-mobile-sticky-info {
	display: flex !important;
	flex-direction: column !important;
	font-size: 12px !important;
}
.mw-mobile-city {
	font-weight: 700 !important;
	font-size: 14px !important;
	color: #ffffff !important;
}
.mw-mobile-date {
	color: var(--mw-color-muted) !important;
}

/* ==========================================================================
   BREAKPOINTS RESPONSIVE (MOBILE FIRST COMPATIBLE)
   ========================================================================== */

/* Tablet & Mobile (< 1024px) */
@media (max-width: 1024px) {
	.mw-single-event-grid {
		grid-template-columns: 1fr !important;
	}
	.mw-single-event-main,
	.mw-single-event-sidebar,
	.mw-single-event-location-box {
		grid-column: auto !important;
		grid-row: auto !important;
	}
	.mw-single-sticky-card {
		position: static !important;
	}
	.mw-single-card-wrapper {
		padding: 24px !important;
	}
}

/* Mobile (< 767px) */
@media (max-width: 767px) {
	.mw-hero-title {
		font-size: 30px !important;
	}
	.mw-single-event-title {
		font-size: 26px !important;
	}
	.mw-event-card {
		grid-template-columns: 70px 1fr !important;
		gap: 16px !important;
		padding: 16px !important;
	}
	.mw-event-card-actions {
		grid-column: 1 / -1 !important;
		flex-direction: column !important;
		width: 100% !important;
	}
	.mw-event-card-actions a {
		width: 100% !important;
		justify-content: center !important;
	}
	.mw-mobile-sticky-bar {
		display: flex !important;
	}
	.mw-single-event-page {
		padding-bottom: 110px !important;
	}
	.mw-events-hero {
		padding: 32px 20px !important;
	}
	.mw-section-proximos,
	.mw-section-pasados {
		padding: 20px 16px !important;
	}
}

/* Small Mobile (< 375px) */
@media (max-width: 375px) {
	.mw-event-card-date {
		min-width: 60px !important;
		padding: 6px 4px !important;
	}
	.mw-date-day {
		font-size: 22px !important;
	}
	.mw-event-title {
		font-size: 17px !important;
	}
}

/* ==========================================================================
   ESTILOS PÁGINA DE CONTACTO Y CONTRATACIÓN (/contacto/)
   ========================================================================== */
body.page-id-154,
body.page-slug-contacto,
body.page-id-154 #page,
body.page-id-154 .site-main {
	background-color: #0d0d0d !important;
	color: #e5e7eb !important;
}

.mw-contact-wrapper {
	max-width: 1140px;
	margin: 30px auto 60px auto;
	padding: 0 20px;
	font-family: var(--mw-font-family) !important;
}

.mw-contact-header {
	background: linear-gradient(135deg, #1c1c1e 0%, #121212 100%) !important;
	border: 1px solid var(--mw-color-border) !important;
	border-radius: 16px !important;
	padding: 48px 32px !important;
	text-align: center !important;
	margin-bottom: 40px !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.mw-contact-badge {
	display: inline-block;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	color: var(--mw-color-accent) !important;
	background: rgba(229, 9, 20, 0.15) !important;
	border: 1px solid rgba(229, 9, 20, 0.3) !important;
	padding: 4px 14px !important;
	border-radius: 20px !important;
	margin-bottom: 12px !important;
}

.mw-contact-title {
	font-size: 40px !important;
	font-weight: 800 !important;
	color: #ffffff !important;
	margin-bottom: 12px !important;
}

.mw-contact-subtitle {
	font-size: 17px !important;
	color: #9ca3af !important;
	max-width: 680px !important;
	margin: 0 auto !important;
	line-height: 1.6 !important;
}

/* Fila Horizontal de 3 Cajas de Información */
.mw-contact-cards-row {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 24px !important;
	margin-bottom: 32px !important;
}

.mw-contact-card {
	background: #141416 !important;
	border: 1px solid var(--mw-color-border) !important;
	border-radius: 16px !important;
	padding: 24px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 16px !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
	transition: var(--mw-transition) !important;
	box-sizing: border-box !important;
	height: 100% !important;
}

.mw-contact-card:hover {
	border-color: #383840 !important;
	transform: translateY(-2px) !important;
}

.mw-contact-icon {
	font-size: 26px !important;
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid var(--mw-color-border) !important;
	border-radius: 12px !important;
	width: 50px !important;
	height: 50px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

.mw-contact-details h3 {
	font-size: 17px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	margin-bottom: 4px !important;
}

.mw-contact-details p {
	font-size: 17px !important;
	font-weight: 700 !important;
	margin: 0 0 4px 0 !important;
}

.mw-contact-details a {
	color: var(--mw-color-accent) !important;
	text-decoration: none !important;
	transition: var(--mw-transition) !important;
}

.mw-contact-details a:hover {
	color: #ffffff !important;
}

.mw-contact-details small {
	color: #9ca3af !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	display: block !important;
}

/* Secciones Formulario de Contacto */
.mw-contact-form-section {
	margin-top: 24px !important;
}

.mw-contact-form-card {
	flex-direction: column !important;
	gap: 16px !important;
	padding: 36px !important;
}

.mw-contact-form-card h3 {
	font-size: 24px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	margin-bottom: 4px !important;
}

.mw-contact-form-card p {
	font-size: 15px !important;
	color: #9ca3af !important;
	margin-bottom: 20px !important;
}

.mw-contact-form {
	display: flex !important;
	flex-direction: column !important;
	gap: 18px !important;
	width: 100% !important;
}

.mw-form-grid-2 {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 20px !important;
}

.mw-form-group {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
}

.mw-form-group label {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #e5e7eb !important;
}

.mw-form-group input,
.mw-form-group textarea {
	background: #1f1f23 !important;
	border: 1px solid #33333a !important;
	border-radius: 8px !important;
	padding: 12px 16px !important;
	color: #ffffff !important;
	font-family: var(--mw-font-family) !important;
	font-size: 15px !important;
	transition: var(--mw-transition) !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.mw-form-group input:focus,
.mw-form-group textarea:focus {
	outline: none !important;
	border-color: var(--mw-color-accent) !important;
	background: #26262c !important;
}

@media (max-width: 900px) {
	.mw-contact-cards-row {
		grid-template-columns: 1fr !important;
	}
	.mw-form-grid-2 {
		grid-template-columns: 1fr !important;
	}
}