/**
 * Slider de Tecnologías - تصميم شريط التقنيات تحت القائمة
 * 
 * @package Really Simple
 */

/* ========================================
   CONTENEDOR PRINCIPAL
   ======================================== */

.tecnologias-slider-wrapper {
	background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
	border-bottom: 2px solid #334155;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	position: relative;
	z-index: 998;
	transition: margin-left 0.3s ease;
}

/* تعديل الـ margin في صفحات الدروس للتناسب مع الـ sidebar */
body.single-leccion .tecnologias-slider-wrapper {
	margin-left: 280px;
}

[data-theme="dark"] .tecnologias-slider-wrapper {
	background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
	border-bottom-color: #1e293b;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.tecnologias-slider-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	gap: 1rem;
	position: relative;
}

/* ========================================
   SLIDER
   ======================================== */

.tecnologias-slider {
	flex: 1;
	overflow: hidden;
	position: relative;
	padding: .5rem 0;
	-webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
	mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.tecnologias-slider-track {
	display: flex;
	gap: 0.875rem;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

/* ========================================
   ITEM DE TECNOLOGÍA
   ======================================== */

.tecnologia-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: .5rem 1rem;
	background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
	border: 2px solid transparent;
	border-radius: 5px;
	min-width: 140px;
	text-decoration: none;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
}

/* Efecto de brillo al hover */
.tecnologia-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
	transition: left 0.5s;
}

.tecnologia-item:hover::before {
	left: 100%;
}

/* Estado activo - التقنية الحالية */
.tecnologia-item.active {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	border-color: #60a5fa;
	box-shadow: 0 4px 16px rgba(59, 130, 246, 0.5);
	transform: scale(1.08);
	position: relative;
}

/* شريط مؤشر تحت العنصر النشط */
.tecnologia-item.active::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	height: 3px;
	background: linear-gradient(90deg, transparent, #60a5fa, transparent);
	border-radius: 3px 3px 0 0;
	animation: activeGlow 2s ease-in-out infinite;
}

@keyframes activeGlow {
	0%, 100% {
		opacity: 1;
		box-shadow: 0 0 8px rgba(96, 165, 250, 0.6);
	}
	50% {
		opacity: 0.7;
		box-shadow: 0 0 16px rgba(96, 165, 250, 0.8);
	}
}

/* نص العنصر النشط */
.tecnologia-item.active .tecnologia-name {
	color: white;
	font-weight: 800;
}

.tecnologia-item.active .tecnologia-count {
	background: rgba(255, 255, 255, 0.25);
	color: white;
	font-weight: 700;
}

.tecnologia-item.active .tecnologia-icon i.colored {
	filter: brightness(1.4) drop-shadow(0 0 12px rgba(255, 255, 255, 0.5));
}

.tecnologia-item:hover {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	border-color: #60a5fa;
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
}

[data-theme="dark"] .tecnologia-item {
	background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
	border-color: #334155;
}

[data-theme="dark"] .tecnologia-item:hover {
	background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
	border-color: #3b82f6;
	box-shadow: 0 8px 24px rgba(37, 99, 235, 0.5);
}

/* Dark Mode - العنصر النشط */
[data-theme="dark"] .tecnologia-item.active {
	background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
	border-color: #60a5fa;
	box-shadow: 0 4px 20px rgba(37, 99, 235, 0.6);
}

[data-theme="dark"] .tecnologia-item.active::after {
	background: linear-gradient(90deg, transparent, #93c5fd, transparent);
}

[data-theme="dark"] .tecnologia-item.active .tecnologia-count {
	background: rgba(255, 255, 255, 0.2);
}

/* Icono */
.tecnologia-icon {
	font-size: 2.5rem;
	line-height: 1;
	transition: transform 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
}

.tecnologia-icon i {
	font-size: 2.5rem;
	transition: transform 0.3s;
}

.tecnologia-item:hover .tecnologia-icon {
	transform: scale(1.15);
}

.tecnologia-item:hover .tecnologia-icon i {
	transform: rotate(-5deg);
}

.tecnologia-icon i.colored {
	filter: brightness(1.1);
}

.tecnologia-item:hover .tecnologia-icon i.colored {
	filter: brightness(1.3) drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

/* Nombre */
.tecnologia-name {
	font-size: 0.9375rem;
	font-weight: 700;
	color: #e2e8f0;
	text-align: center;
	letter-spacing: 0.02em;
	transition: color 0.3s;
}

.tecnologia-item:hover .tecnologia-name {
	color: white;
}

[data-theme="dark"] .tecnologia-name {
	color: #cbd5e1;
}

[data-theme="dark"] .tecnologia-item:hover .tecnologia-name {
	color: white;
}

/* Contador */
.tecnologia-count {
	font-size: 0.75rem;
	font-weight: 600;
	color: #94a3b8;
	background: rgba(0, 0, 0, 0.3);
	padding: 0.25rem 0.625rem;
	border-radius: 20px;
	transition: all 0.3s;
}

.tecnologia-item:hover .tecnologia-count {
	background: rgba(255, 255, 255, 0.2);
	color: white;
	transform: scale(1.05);
}

[data-theme="dark"] .tecnologia-count {
	color: #64748b;
	background: rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .tecnologia-item:hover .tecnologia-count {
	color: white;
	background: rgba(255, 255, 255, 0.15);
}

/* ========================================
   BOTONES DE NAVEGACIÓN - تصميم محسّن
   ======================================== */

.slider-nav {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	border: 2px solid #60a5fa;
	color: white;
	display: flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
	z-index: 2;
	opacity: 1 !important;
	visibility: visible !important;
	position: relative;
	padding: 0;
	outline: none;
}

.slider-nav:hover {
	background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
	transform: scale(1.1);
	box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5);
}

.slider-nav:active {
	transform: scale(0.95);
}

.slider-nav:disabled {
	opacity: 0.4 !important;
	cursor: not-allowed;
	transform: scale(1);
}

[data-theme="dark"] .slider-nav {
	background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
	border-color: #3b82f6;
	box-shadow: 0 4px 12px rgba(30, 64, 175, 0.4);
}

[data-theme="dark"] .slider-nav:hover {
	background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
	box-shadow: 0 6px 16px rgba(37, 99, 235, 0.6);
}

.slider-nav svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
	display: block;
}

.slider-nav svg path {
	stroke: inherit;
	fill: none;
	vector-effect: non-scaling-stroke;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablets */
@media (max-width: 1024px) {
	/* إزالة الـ margin في الأجهزة الصغيرة حيث الـ sidebar مخفي */
	body.single-leccion .tecnologias-slider-wrapper {
		margin-left: 0;
	}
	
	.tecnologias-slider-container {
		padding: 0 15px;
	}
	
	.tecnologia-item {
		min-width: 120px;
		padding: 0.875rem 1.25rem;
	}
	
	.tecnologia-icon {
		width: 44px;
		height: 44px;
	}
	
	.tecnologia-icon i {
		font-size: 2.25rem;
	}
	
	.tecnologia-name {
		font-size: 0.875rem;
	}
	
	.slider-nav {
		width: 36px;
		height: 36px;
	}
	
	.slider-nav svg {
		width: 18px;
		height: 18px;
	}
}

/* Mobile landscape */
@media (max-width: 768px) {
	.tecnologias-slider-container {
		padding: 0 12px;
		gap: 0.75rem;
	}
	
	.tecnologia-item {
		min-width: 100px;
		padding: 0.75rem 1rem;
		gap: 0.375rem;
	}
	
	.tecnologia-icon {
		width: 38px;
		height: 38px;
	}
	
	.tecnologia-icon i {
		font-size: 2rem;
	}
	
	.tecnologia-name {
		font-size: 0.8125rem;
	}
	
	.tecnologia-count {
		font-size: 0.6875rem;
		padding: 0.2rem 0.5rem;
	}
	
	.slider-nav {
		width: 32px;
		height: 32px;
	}
	
	.slider-nav svg {
		width: 16px;
		height: 16px;
	}
	
	.tecnologias-slider {
		-webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
		mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
	}
}

/* Mobile portrait */
@media (max-width: 480px) {
	.tecnologias-slider-container {
		padding: 0 10px;
		gap: 0.5rem;
	}
	
	.tecnologia-item {
		min-width: 90px;
		padding: 0.625rem 0.875rem;
		gap: 0.3rem;
	}
	
	.tecnologia-icon {
		width: 34px;
		height: 34px;
	}
	
	.tecnologia-icon i {
		font-size: 1.75rem;
	}
	
	.tecnologia-name {
		font-size: 0.75rem;
	}
	
	.tecnologia-count {
		font-size: 0.625rem;
		padding: 0.15rem 0.4rem;
	}
	
	.slider-nav {
		width: 28px;
		height: 28px;
		border-width: 1.5px;
	}
	
	.slider-nav svg {
		width: 14px;
		height: 14px;
	}
	
	.tecnologias-slider-track {
		gap: 0.625rem;
	}
}

/* Very small mobile */
@media (max-width: 360px) {
	.tecnologia-item {
		min-width: 80px;
		padding: 0.5rem 0.75rem;
	}
	
	.tecnologia-icon {
		width: 30px;
		height: 30px;
	}
	
	.tecnologia-icon i {
		font-size: 1.5rem;
	}
	
	.tecnologia-name {
		font-size: 0.6875rem;
	}
	
	.tecnologia-count {
		font-size: 0.5625rem;
	}
}

/* ========================================
   ANIMACIONES Y TRANSICIONES
   ======================================== */

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.tecnologias-slider-wrapper {
	animation: slideIn 0.5s ease-out;
}

/* Smooth scroll behavior */
.tecnologias-slider-track {
	scroll-behavior: smooth;
}

/* ========================================
   ESTADOS DE CARGA
   ======================================== */

.tecnologias-slider-wrapper.loading {
	opacity: 0.6;
	pointer-events: none;
}

.tecnologias-slider-wrapper.loading .tecnologias-slider-track {
	animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

/* ========================================
   ACCESIBILIDAD
   ======================================== */

.tecnologia-item:focus-visible {
	outline: 3px solid #60a5fa;
	outline-offset: 2px;
	border-radius: 12px;
}

.slider-nav:focus-visible {
	outline: 3px solid #60a5fa;
	outline-offset: 2px;
}

/* Reducir movimiento para usuarios con preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce) {
	.tecnologias-slider-track,
	.tecnologia-item,
	.slider-nav,
	.tecnologia-icon,
	.tecnologia-name,
	.tecnologia-count {
		transition: none;
		animation: none;
	}
	
	.tecnologia-item::before {
		display: none;
	}
}