/* Estilos Ultra-PRO Impecables para el Frontend: Portal [mis_certificados] */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

.certificados-portal-container {
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	max-width: 1140px !important;
	margin: 30px auto 80px auto !important;
	color: #0f172a !important;
	box-sizing: border-box !important;
}

.certificados-portal-container *,
.certificados-portal-container *::before,
.certificados-portal-container *::after {
	box-sizing: border-box !important;
}

/* Header Principal del Usuario (SaaS Ultra Dark) */
.certificados-portal-container .certificados-user-header {
	background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #1e293b 100%) !important;
	color: #ffffff !important;
	padding: 32px 36px !important;
	border-radius: 24px !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 20px !important;
	box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.25) !important;
	margin-bottom: 28px !important;
	position: relative !important;
	overflow: hidden !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.certificados-portal-container .certificados-count-badge {
	color: #fff !important;
}

.certificados-portal-container .certificados-count-badge strong {
	color: #fff !important;
}

.certificados-portal-container .certificados-user-header::after {
	content: '' !important;
	position: absolute !important;
	top: -50% !important;
	right: -10% !important;
	width: 350px !important;
	height: 350px !important;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.25) 0%, rgba(0,0,0,0) 70%) !important;
	pointer-events: none !important;
}

.certificados-portal-container .certificados-user-info {
	display: flex !important;
	align-items: center !important;
	gap: 20px !important;
	position: relative !important;
	z-index: 2 !important;
}

.certificados-portal-container .certificados-avatar img {
	border-radius: 50% !important;
	border: 3px solid rgba(255, 255, 255, 0.25) !important;
	display: block !important;
	box-shadow: 0 0 20px rgba(59, 130, 246, 0.5) !important;
	width: 64px !important;
	height: 64px !important;
	object-fit: cover !important;
}

.certificados-portal-container .certificados-user-details h2 {
	margin: 0 !important;
	font-size: 1.6rem !important;
	font-weight: 800 !important;
	color: #ffffff !important;
	letter-spacing: -0.5px !important;
	line-height: 1.2 !important;
}

.certificados-portal-container .certificados-user-email {
	margin: 6px 0 0 0 !important;
	font-size: 0.95rem !important;
	color: #94a3b8 !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.certificados-portal-container .certificados-header-actions {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	position: relative !important;
	z-index: 2 !important;
}

.certificados-portal-container .certificados-count-badge {
	background: rgba(255, 255, 255, 0.12) !important;
	backdrop-filter: blur(12px) !important;
	padding: 10px 20px !important;
	border-radius: 30px !important;
	font-size: 0.92rem !important;
	color: #f1f5f9 !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	font-weight: 600 !important;
}

.certificados-portal-container .certificados-btn-logout {
	background: rgba(239, 68, 68, 0.18) !important;
	color: #fca5a5 !important;
	border: 1px solid rgba(239, 68, 68, 0.35) !important;
	padding: 10px 20px !important;
	border-radius: 30px !important;
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: all 0.25s ease !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.certificados-portal-container .certificados-btn-logout:hover {
	background: #ef4444 !important;
	color: #ffffff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4) !important;
}

/* Pestañas Principales Navegación del Portal (Clean Segments) */
.certificados-portal-container .certificados-main-nav-tabs {
	display: flex !important;
	gap: 12px !important;
	background: #ffffff !important;
	padding: 8px !important;
	border-radius: 20px !important;
	border: 1px solid #e2e8f0 !important;
	margin-bottom: 28px !important;
	box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
}

.certificados-portal-container button.portal-main-tab,
.certificados-portal-container .portal-main-tab {
	flex: 1 !important;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	padding: 14px 24px !important;
	border-radius: 14px !important;
	font-size: 1rem !important;
	font-weight: 800 !important;
	color: #64748b !important;
	cursor: pointer !important;
	transition: all 0.25s ease !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	letter-spacing: -0.2px !important;
}

.certificados-portal-container button.portal-main-tab.active,
.certificados-portal-container .portal-main-tab.active {
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
	color: #ffffff !important;
	box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35) !important;
	border: none !important;
}

.certificados-portal-container button.portal-main-tab:hover:not(.active),
.certificados-portal-container .portal-main-tab:hover:not(.active) {
	background: #f1f5f9 !important;
	color: #0f172a !important;
}

/* Barra de Filtros y Búsqueda */
.certificados-portal-container .certificados-filter-bar {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 16px !important;
	margin-bottom: 30px !important;
	flex-wrap: wrap !important;
}

/* Caja de Búsqueda sin colisiones */
.certificados-portal-container .certificados-search-box {
	position: relative !important;
	flex: 1 !important;
	min-width: 280px !important;
}

.certificados-portal-container .certificados-search-box .dashicons {
	position: absolute !important;
	left: 16px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 10 !important;
	color: #64748b !important;
	font-size: 20px !important;
	width: 20px !important;
	height: 20px !important;
	line-height: 20px !important;
	pointer-events: none !important;
}

.certificados-portal-container .certificados-search-box input[type="text"],
.certificados-portal-container #cert-search-input {
	width: 100% !important;
	padding: 12px 20px 12px 48px !important;
	height: 48px !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 30px !important;
	font-size: 0.95rem !important;
	font-weight: 500 !important;
	outline: none !important;
	background: #ffffff !important;
	transition: all 0.25s ease !important;
	box-shadow: 0 4px 10px rgba(0,0,0,0.02) !important;
	color: #0f172a !important;
}

.certificados-portal-container .certificados-search-box input[type="text"]:focus,
.certificados-portal-container #cert-search-input:focus {
	border-color: #3b82f6 !important;
	box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18) !important;
}

/* Selector de Cursos Estilizado */
.certificados-portal-container .certificados-course-filter {
	display: flex !important;
	align-items: center !important;
}

.certificados-portal-container select.cert-course-dropdown,
.certificados-portal-container .cert-course-dropdown {
	height: 48px !important;
	padding: 0 40px 0 20px !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 30px !important;
	font-size: 0.92rem !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	background: #ffffff url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2364748b%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E") no-repeat right 16px center !important;
	background-size: 10px auto !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	cursor: pointer !important;
	outline: none !important;
	box-shadow: 0 4px 10px rgba(0,0,0,0.02) !important;
}

.certificados-portal-container select.cert-course-dropdown:focus,
.certificados-portal-container .cert-course-dropdown:focus {
	border-color: #3b82f6 !important;
}

/* Pestañas de Formato (Pills Todos, PDFs, Imagenes) */
.certificados-portal-container .certificados-filter-tabs {
	display: flex !important;
	background: #f1f5f9 !important;
	padding: 5px !important;
	border-radius: 30px !important;
	gap: 4px !important;
	border: 1px solid #e2e8f0 !important;
}

.certificados-portal-container button.cert-tab-btn,
.certificados-portal-container .cert-tab-btn {
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	padding: 9px 20px !important;
	border-radius: 20px !important;
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	color: #64748b !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}

.certificados-portal-container button.cert-tab-btn.active,
.certificados-portal-container .cert-tab-btn.active {
	background: #ffffff !important;
	color: #2563eb !important;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* Grilla de Tarjetas */
.certificados-portal-container .certificados-grid,
.certificados-portal-container .cert-videos-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
	gap: 26px !important;
}

.certificados-portal-container .cert-card,
.certificados-portal-container .cert-video-card {
	background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 20px !important;
	padding: 28px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
	position: relative !important;
	overflow: hidden !important;
}

.certificados-portal-container .cert-card::before,
.certificados-portal-container .cert-video-card::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 6px !important;
	background: linear-gradient(90deg, #2563eb 0%, #4f46e5 50%, #8b5cf6 100%) !important;
	z-index: 10 !important;
}

.certificados-portal-container .cert-card:hover,
.certificados-portal-container .cert-video-card:hover {
	transform: translateY(-6px) scale(1.02) !important;
	box-shadow: 0 25px 45px rgba(37, 99, 235, 0.15) !important;
	border-color: #94a3b8 !important;
}

.certificados-portal-container .cert-card-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	margin-bottom: 18px !important;
}

.certificados-portal-container .cert-card-thumbnail {
	margin: -28px -28px 20px -28px !important;
	height: 220px !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	border-bottom: 1px solid #e2e8f0 !important;
	position: relative !important;
	z-index: 5 !important;
}

.certificados-portal-container .cert-icon-box {
	width: 56px !important;
	height: 56px !important;
	border-radius: 16px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
	color: #d97706 !important;
	box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.2), 0 4px 10px rgba(217, 119, 6, 0.15) !important;
}

.certificados-portal-container .cert-icon-box.premium-cert-icon {
	background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
	color: #fbbf24 !important;
	box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.2), 0 8px 15px -3px rgba(15, 23, 42, 0.3) !important;
}

.certificados-portal-container .cert-icon-box .dashicons {
	font-size: 28px !important;
	width: 28px !important;
	height: 28px !important;
}

.certificados-portal-container .cert-type-badge {
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
	color: #64748b !important;
	border: 1px solid #e2e8f0 !important;
	font-size: 0.75rem !important;
	font-weight: 800 !important;
	padding: 6px 14px !important;
	border-radius: 20px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.8px !important;
	box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
}

.certificados-portal-container .cert-course-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
	color: #15803d !important;
	border: 1px solid #bbf7d0 !important;
	font-size: 0.82rem !important;
	font-weight: 800 !important;
	padding: 5px 14px !important;
	border-radius: 20px !important;
	margin-bottom: 12px !important;
}

.certificados-portal-container .cert-card-body {
	flex: 1 !important;
	margin-bottom: 22px !important;
}

.certificados-portal-container .cert-title {
	margin: 0 0 10px 0 !important;
	font-size: 1.25rem !important;
	font-weight: 800 !important;
	color: #0f172a !important;
	line-height: 1.35 !important;
	letter-spacing: -0.3px !important;
}

.certificados-portal-container .cert-code {
	font-size: 0.84rem !important;
	color: #0284c7 !important;
	background: #f0f9ff !important;
	border: 1px solid #bae6fd !important;
	padding: 4px 12px !important;
	border-radius: 8px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-weight: 700 !important;
	margin-bottom: 10px !important;
}

.certificados-portal-container .cert-date {
	font-size: 0.88rem !important;
	color: #64748b !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-weight: 500 !important;
}

.certificados-portal-container .cert-card-footer,
.certificados-portal-container .cert-video-footer {
	display: flex !important;
	gap: 12px !important;
}

/* BOTONES ULTRA PRO CON ELEVACIÓN 3D */
.certificados-portal-container button.cert-btn,
.certificados-portal-container a.cert-btn,
.certificados-portal-container .cert-btn {
	flex: 1 !important;
	padding: 12px 18px !important;
	height: 46px !important;
	border-radius: 14px !important;
	font-size: 0.94rem !important;
	font-weight: 800 !important;
	text-align: center !important;
	cursor: pointer !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.certificados-portal-container .cert-btn-preview {
	background: #f1f5f9 !important;
	color: #334155 !important;
	border: 1px solid #cbd5e1 !important;
}

.certificados-portal-container .cert-btn-preview:hover {
	background: #e2e8f0 !important;
	color: #0f172a !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

.certificados-portal-container .cert-btn-download {
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
	color: #ffffff !important;
	box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35) !important;
}

.certificados-portal-container .cert-btn-download:hover {
	background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
	color: #ffffff !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 10px 25px rgba(37, 99, 235, 0.5) !important;
}

/* Tarjetas de Videos */
.certificados-portal-container .cert-video-card {
	padding: 0 !important;
}

.certificados-portal-container .cert-video-thumb-container {
	position: relative !important;
	width: 100% !important;
	height: 190px !important;
	background: #0f172a !important;
	cursor: pointer !important;
	overflow: hidden !important;
}

.certificados-portal-container .cert-video-thumb {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transition: transform 0.4s ease !important;
}

.certificados-portal-container .cert-video-thumb-container:hover .cert-video-thumb {
	transform: scale(1.08) !important;
}

.certificados-portal-container .cert-video-placeholder {
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #475569 !important;
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
}

.certificados-portal-container .cert-video-placeholder .dashicons {
	font-size: 54px !important;
	width: 54px !important;
	height: 54px !important;
}

.certificados-portal-container .cert-play-overlay {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 58px !important;
	height: 58px !important;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
	color: #ffffff !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 0 25px rgba(59, 130, 246, 0.6) !important;
	transition: all 0.3s ease !important;
}

/* Estilos para Modal de Lección (Rich Content) */
.lesson-modal-wide .cert-modal-content {
	max-width: 900px !important;
	width: 95% !important;
}

.lesson-content-wrapper {
	padding: 10px !important;
	color: #334155 !important;
	line-height: 1.7 !important;
	font-size: 1.05rem !important;
}

.lesson-content-wrapper p {
	margin-bottom: 1.2rem !important;
}

.lesson-content-wrapper h2, 
.lesson-content-wrapper h3, 
.lesson-content-wrapper h4 {
	color: #0f172a !important;
	margin-top: 1.5rem !important;
	margin-bottom: 1rem !important;
	font-weight: 700 !important;
}

.lesson-content-wrapper img {
	max-width: 100% !important;
	height: auto !important;
	border-radius: 12px !important;
	margin: 1rem 0 !important;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

.lesson-content-wrapper iframe, 
.lesson-content-wrapper video {
	max-width: 100% !important;
	border-radius: 16px !important;
	box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
	margin: 1.5rem 0 !important;
}

.lesson-content-wrapper ul, 
.lesson-content-wrapper ol {
	margin-bottom: 1.5rem !important;
	padding-left: 1.5rem !important;
}

.lesson-content-wrapper li {
	margin-bottom: 0.5rem !important;
}

.lesson-content-wrapper a {
	color: #2563eb !important;
	text-decoration: underline !important;
	font-weight: 600 !important;
}

.lesson-content-wrapper .cert-btn-download {
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	padding: 12px 24px !important;
	background: #2563eb !important;
	color: #fff !important;
	border-radius: 12px !important;
}

.certificados-portal-container .cert-video-thumb-container:hover .cert-play-overlay {
	transform: translate(-50%, -50%) scale(1.2) !important;
	box-shadow: 0 0 35px rgba(59, 130, 246, 0.8) !important;
}

.certificados-portal-container .cert-play-overlay .dashicons {
	font-size: 32px !important;
	width: 32px !important;
	height: 32px !important;
	margin-left: 4px !important;
}

.certificados-portal-container .cert-video-duration {
	position: absolute !important;
	bottom: 12px !important;
	right: 12px !important;
	background: rgba(15, 23, 42, 0.88) !important;
	backdrop-filter: blur(6px) !important;
	color: #ffffff !important;
	font-size: 0.78rem !important;
	font-weight: 800 !important;
	padding: 4px 10px !important;
	border-radius: 8px !important;
}

.certificados-portal-container .cert-video-body {
	padding: 20px !important;
	flex: 1 !important;
}

.certificados-portal-container .cert-video-title {
	margin: 0 0 10px 0 !important;
	font-size: 1.15rem !important;
	font-weight: 800 !important;
	color: #0f172a !important;
	letter-spacing: -0.3px !important;
}

.certificados-portal-container .cert-video-excerpt {
	font-size: 0.9rem !important;
	color: #64748b !important;
	line-height: 1.55 !important;
}

.certificados-portal-container .cert-video-footer {
	padding: 0 20px 20px 20px !important;
}

/* Modal Overlay */
.cert-modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(15, 23, 42, 0.82) !important;
	backdrop-filter: blur(8px) !important;
	z-index: 999999 !important;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.cert-modal-overlay.active {
	display: flex !important;
}

.cert-modal-content {
	background: #ffffff !important;
	width: 100% !important;
	max-width: 940px !important;
	height: 85vh !important;
	border-radius: 24px !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.4) !important;
	animation: certModalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes certModalPop {
	from { transform: scale(0.92); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

.cert-modal-header {
	padding: 20px 28px !important;
	background: #0f172a !important;
	color: #ffffff !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
}

.cert-modal-header h3 {
	margin: 0 !important;
	font-size: 1.2rem !important;
	font-weight: 800 !important;
	color: #ffffff !important;
}

.cert-modal-body {
	padding: 24px !important;
	flex: 1 !important;
	overflow-y: auto !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	background: #0f172a !important;
}

.cert-modal-body img,
.cert-card-header img {
	display: block !important;
	vertical-align: bottom !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 auto !important;
	border: none !important;
	outline: none !important;
	background: transparent !important;
}

.cert-modal-close {
	background: rgba(255,255,255,0.1) !important;
	border: none !important;
	font-size: 24px !important;
	color: #94a3b8 !important;
	cursor: pointer !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
	transition: all 0.2s ease !important;
}

.cert-modal-close:hover {
	background: #ef4444 !important;
	color: #ffffff !important;
}

/* Card de Login */
.certificados-login-card {
	max-width: 440px !important;
	margin: 50px auto !important;
	background: #ffffff !important;
	padding: 36px !important;
	border-radius: 24px !important;
	border: 1px solid #e2e8f0 !important;
	box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.08) !important;
}

.cert-login-icon {
	width: 64px !important;
	height: 64px !important;
	background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
	color: #2563eb !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 auto 16px auto !important;
	box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25) !important;
}

.cert-login-icon .dashicons {
	font-size: 32px !important;
	width: 32px !important;
	height: 32px !important;
}

.cert-login-header h2 {
	margin: 0 !important;
	font-size: 1.4rem !important;
	font-weight: 800 !important;
	color: #0f172a !important;
}

/* ---------------------------------------------------
   Tarjetas de Video Automáticas (oEmbed Inline)
--------------------------------------------------- */
.lesson-content-wrapper .cert-video-card-inline {
	display: inline-block !important;
	width: 320px !important;
	margin: 15px 15px 15px 0 !important;
	vertical-align: top !important;
	background: #fff !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
	cursor: pointer !important;
	border: 1px solid #e2e8f0 !important;
	transition: all 0.3s ease !important;
	position: relative !important;
}

.lesson-content-wrapper .cert-video-card-inline:hover {
	transform: translateY(-5px) !important;
	box-shadow: 0 15px 30px rgba(0,0,0,0.15) !important;
	border-color: #cbd5e1 !important;
}

.cert-video-card-thumb-wrapper {
	position: relative !important;
	padding-top: 56.25% !important; /* 16:9 Aspect Ratio */
	overflow: hidden !important;
	background: #0f172a !important;
}

.cert-video-card-img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transition: transform 0.5s ease !important;
	opacity: 0.85 !important;
}

.cert-video-card-inline:hover .cert-video-card-img {
	transform: scale(1.05) !important;
	opacity: 1 !important;
}

.cert-video-card-play-btn {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	background: rgba(37,99,235,0.95) !important;
	border-radius: 50% !important;
	width: 54px !important;
	height: 54px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: white !important;
	box-shadow: 0 4px 15px rgba(37,99,235,0.4) !important;
	transition: all 0.3s ease !important;
}

.cert-video-card-inline:hover .cert-video-card-play-btn {
	background: #1d4ed8 !important;
	transform: translate(-50%, -50%) scale(1.1) !important;
}

.cert-video-card-play-btn .dashicons {
	font-size: 32px !important;
	width: 32px !important;
	height: 32px !important;
}

.cert-video-card-footer {
	padding: 16px 20px !important;
	background: #ffffff !important;
	text-align: center !important;
	border-top: 1px solid #f1f5f9 !important;
}

.cert-video-card-footer h4 {
	margin: 0 !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: #1e293b !important;
	transition: color 0.3s !important;
}

.cert-video-card-inline:hover .cert-video-card-footer h4 {
	color: #2563eb !important;
}

@keyframes cert-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}