/* FFE Connect - Estilos para Elementor */

/* ================================
   ESTILOS GLOBALES
   ================================ */

/* Fix para vista previa de Elementor */
.elementor-widget.elementor-widget-ffe_plans,
.elementor-widget.elementor-widget-ffe_courses,
.elementor-widget.elementor-widget-ffe_course_detail {
	min-height: 50px !important;
	position: relative !important;
}

/* Mostrar un placeholder cuando el widget no puede cargar en la vista previa */
/* .elementor-widget.elementor-widget-ffe_plans::before,
.elementor-widget.elementor-widget-ffe_courses::before,
.elementor-widget.elementor-widget-ffe_course_detail::before {
	content: 'Widget FFE Connect' !important;
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background: rgba(200, 200, 200, 0.1) !important;
	border: 1px dashed #a4afb7 !important;
	text-align: center !important;
	padding: 15px !important;
	font-family: -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif !important;
	font-size: 14px !important;
	color: #a4afb7 !important;
	pointer-events: none !important;
} */

.ffe-plans-container,
.ffe-courses-container,
.ffe-course-detail-container {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	line-height: 1.6;
	color: #333;
}

.ffe-error {
	background: linear-gradient(135deg, #f8d7da 0%, #f1aeb5 100%);
	color: #721c24;
	padding: 25px;
	border-radius: 12px;
	border: 1px solid #f5c6cb;
	margin: 20px 0;
	text-align: center;
	box-shadow: 0 4px 15px rgba(241, 174, 181, 0.3);
}

.ffe-error h3 {
	margin: 0 0 15px 0;
	font-size: 18px;
	font-weight: 600;
	color: #721c24;
}

.ffe-error p {
	margin: 0 0 10px 0;
	line-height: 1.5;
}

.ffe-error p:last-child {
	margin-bottom: 0;
}

.ffe-error small {
	font-size: 12px;
	opacity: 0.8;
	font-style: italic;
}

.ffe-error a {
	color: #721c24;
	text-decoration: underline;
	font-weight: 600;
}

.ffe-error a:hover {
	color: #521016;
	text-decoration: none;
}

/* Error específico para cuando no hay conexión */
.ffe-error.connection-error {
	background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
	color: #856404;
	border-color: #ffeaa7;
}

.ffe-error.connection-error h3,
.ffe-error.connection-error a {
	color: #856404;
}

/* ================================
   NAVEGACIÓN Y BREADCRUMB
   ================================ */

.ffe-breadcrumb {
	margin-bottom: 20px;
	font-size: 14px;
}

.ffe-breadcrumb a {
	color: #5b7fc7;
	text-decoration: none;
}

.ffe-breadcrumb a:hover {
	text-decoration: underline;
}

.ffe-breadcrumb-separator {
	margin: 0 8px;
	color: #999;
}

.ffe-current-page {
	color: #666;
	font-weight: 500;
}

.ffe-back-link {
	color: #5b7fc7;
	text-decoration: none;
	font-size: 14px;
	display: inline-block;
	margin-bottom: 20px;
}

.ffe-back-link:hover {
	text-decoration: underline;
}

/* ================================
   WIDGET DE PLANES
   ================================ */

.ffe-plans-header {
	text-align: center;
	margin-bottom: 40px;
	padding: 0 20px;
}

.ffe-plans-title {
	font-size: 32px;
	font-weight: 700;
	color: #2c3e50;
	margin: 0 0 10px 0;
	border-left: 4px solid #5b7fc7;
	padding-left: 20px;
	display: inline-block;
}

.ffe-plans-subtitle {
	font-size: 16px;
	color: #7f8c8d;
	margin: 0 0 30px 0;
}

.ffe-stats {
	display: flex;
	justify-content: center;
	gap: 40px;
	flex-wrap: wrap;
	margin-top: 30px;
}

.ffe-stat {
	text-align: center;
	min-width: 120px;
}

.ffe-stat-number {
	display: block;
	font-size: 28px;
	font-weight: 700;
	color: #5b7fc7;
	line-height: 1;
}

.ffe-stat-label {
	display: block;
	font-size: 12px;
	color: #7f8c8d;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 5px;
}

.ffe-plans-grid {
	display: grid;
	gap: 20px;
	margin-top: 20px;
}

.ffe-columns-2 {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.ffe-columns-3 {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ffe-columns-4 {
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.ffe-plan-card {
	background: linear-gradient(135deg, #5b7fc7 0%, #4a6fa5 100%);
	border-radius: 12px;
	padding: 0;
	color: white;
	text-align: center;
	box-shadow: 0 4px 15px rgba(91, 127, 199, 0.3);
	transition: all 0.3s ease;
	overflow: hidden;
	min-height: 280px;
	display: flex;
	flex-direction: column;
}

.ffe-plan-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(91, 127, 199, 0.4);
}

.ffe-plan-content {
	padding: 30px 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.ffe-plan-icon {
	font-size: 48px;
	margin-bottom: 15px;
}

.ffe-plan-name {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 15px 0;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.ffe-plan-description {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.9);
	margin: 0 0 15px 0;
	line-height: 1.4;
}

.ffe-plan-stats {
	margin-bottom: 20px;
}

.ffe-courses-count {
	background: rgba(255, 255, 255, 0.2);
	padding: 5px 12px;
	border-radius: 15px;
	font-size: 12px;
	display: inline-block;
}

.ffe-plan-button {
	background: white;
	color: #5b7fc7;
	padding: 12px 20px;
	border-radius: 25px;
	text-decoration: none;
	font-weight: 600;
	font-size: 13px;
	display: inline-block;
	transition: all 0.3s ease;
	margin-top: auto;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.ffe-plan-button:hover {
	background: #f8f9fa;
	transform: scale(1.05);
	color: #5b7fc7;
	text-decoration: none;
}

.ffe-no-plans {
	text-align: center;
	padding: 60px 20px;
	color: #7f8c8d;
	font-style: italic;
}

/* ================================
   WIDGET DE CURSOS
   ================================ */

.ffe-courses-header {
	text-align: center;
	margin-bottom: 40px;
	padding: 30px 20px;
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	border-radius: 12px;
}

.ffe-courses-title {
	font-size: 28px;
	font-weight: 700;
	color: #2c3e50;
	margin: 0 0 10px 0;
}

.ffe-courses-subtitle {
	font-size: 16px;
	color: #7f8c8d;
	margin: 0 0 20px 0;
}

.ffe-courses-stats {
	display: flex;
	justify-content: center;
	gap: 30px;
	flex-wrap: wrap;
}

.ffe-courses-filters {
	background: #f8f9fa;
	padding: 20px;
	border-radius: 8px;
	margin-bottom: 30px;
}

.ffe-filter-form {
	display: flex;
	align-items: end;
	gap: 15px;
	flex-wrap: wrap;
}

.ffe-filter-group {
	display: flex;
	flex-direction: column;
	min-width: 150px;
}

.ffe-filter-group label {
	font-weight: 600;
	margin-bottom: 5px;
	color: #495057;
	font-size: 14px;
}

.ffe-filter-group select {
	padding: 8px 12px;
	border: 1px solid #ced4da;
	border-radius: 4px;
	background: white;
	font-size: 14px;
}

.ffe-filter-btn {
	background: #5b7fc7;
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	transition: background-color 0.3s;
}

.ffe-filter-btn:hover {
	background: #4a6fa5;
}

.ffe-clear-filters {
	color: #6c757d;
	text-decoration: none;
	font-size: 14px;
	padding: 10px 0;
	align-self: center;
}

.ffe-clear-filters:hover {
	text-decoration: underline;
	color: #495057;
}

.ffe-courses-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	gap: 20px;
}

.ffe-course-card {
	background: white;
	border: 1px solid #e9ecef;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
}

.ffe-course-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.ffe-course-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 20px;
	background: #f8f9fa;
	border-bottom: 1px solid #e9ecef;
}

.ffe-course-code {
	background: #5b7fc7;
	color: white;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
}

.ffe-course-status {
	padding: 4px 8px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
}

.ffe-course-status.active {
	background: #d4edda;
	color: #155724;
}

.ffe-course-status.inactive {
	background: #f8d7da;
	color: #721c24;
}

.ffe-course-content {
	padding: 20px;
	flex: 1;
}

.ffe-course-name {
	font-size: 16px;
	font-weight: 600;
	color: #2c3e50;
	margin: 0 0 15px 0;
	line-height: 1.3;
}

.ffe-course-info {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 15px;
}

.ffe-course-detail {
	display: flex;
	align-items: center;
	gap: 5px;
	background: #f8f9fa;
	padding: 5px 10px;
	border-radius: 15px;
	font-size: 12px;
	color: #495057;
}

.ffe-detail-icon {
	font-size: 14px;
}

.ffe-course-editions-preview h4 {
	font-size: 14px;
	font-weight: 600;
	color: #495057;
	margin: 0 0 10px 0;
}

.ffe-editions-section {
	margin-bottom: 15px;
}

.ffe-editions-section:last-child {
	margin-bottom: 0;
}

.ffe-editions-section h4 {
	font-size: 13px;
	font-weight: 600;
	color: #495057;
	margin: 0 0 6px 0;
	padding-bottom: 4px;
	border-bottom: 1px solid #e9ecef;
}

.ffe-edition-preview {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 12px;
	background: #f8f9fa;
	border-radius: 6px;
	margin-bottom: 5px;
	font-size: 12px;
}

.ffe-edition-preview {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px 0;
	border-bottom: 1px solid #f0f0f0;
}

.ffe-edition-preview:last-child {
	border-bottom: none;
}

.ffe-edition-name {
	font-weight: 600;
	color: #495057;
}

.ffe-edition-date {
	color: #6c757d;
}

.ffe-edition-status-small {
	padding: 2px 6px;
	border-radius: 8px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
}

.ffe-edition-status-small.active {
	background: #d4edda;
	color: #155724;
}

.ffe-edition-status-small.open-registration {
	background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
	color: #0c5460;
	border: 1px solid #abd5dd;
}

.ffe-edition-status-small.closed-registration {
	background: linear-gradient(135deg, #f8d7da 0%, #f1aeb5 100%);
	color: #721c24;
	border: 1px solid #f5c6cb;
}

.ffe-edition-status-small.finished {
	background: #f8d7da;
	color: #721c24;
}

.ffe-course-footer {
	padding: 15px 20px;
	background: #f8f9fa;
	border-top: 1px solid #e9ecef;
}

.ffe-course-btn {
	background: #5b7fc7;
	color: white;
	padding: 10px 20px;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	display: inline-block;
	transition: background-color 0.3s;
	width: 100%;
	text-align: center;
	line-height: 1.4;
	vertical-align: middle;
	border: none;
	box-sizing: border-box;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}

.ffe-course-btn:hover {
	background: #4a6fa5;
	color: white;
	text-decoration: none;
	outline: none;
}

.ffe-no-courses {
	grid-column: 1 / -1;
	text-align: center;
	padding: 60px 20px;
}

.ffe-no-courses-content h3 {
	color: #495057;
	margin-bottom: 10px;
}

.ffe-no-courses-content p {
	color: #6c757d;
	margin-bottom: 20px;
}

.ffe-btn {
	background: #5b7fc7;
	color: white;
	padding: 10px 20px;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	display: inline-block;
}

.ffe-btn:hover {
	background: #4a6fa5;
	color: white;
	text-decoration: none;
}

/* ================================
   WIDGET DE DETALLE DEL CURSO
   ================================ */

.ffe-course-detail-header {
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	padding: 30px;
	border-radius: 12px;
	margin-bottom: 30px;
	text-align: center;
}

.ffe-course-detail-meta {
	display: flex;
	justify-content: center;
	gap: 15px;
	margin-bottom: 15px;
	flex-wrap: wrap;
}

.ffe-course-plan {
	background: #5b7fc7;
	color: white;
	padding: 5px 12px;
	border-radius: 15px;
	font-size: 12px;
	font-weight: 600;
}

.ffe-course-code {
	background: #6c757d;
	color: white;
	padding: 5px 12px;
	border-radius: 15px;
	font-size: 12px;
	font-weight: 600;
}

.ffe-course-detail-title {
	font-size: 24px;
	font-weight: 700;
	color: #2c3e50;
	margin: 0 0 20px 0;
	line-height: 1.3;
}

.ffe-course-stats {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}

.ffe-course-stats .ffe-stat {
	display: flex;
	align-items: center;
	gap: 10px;
	background: white;
	padding: 15px 20px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ffe-stat-icon {
	font-size: 24px;
}

.ffe-course-detail-content {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 30px;
	align-items: start;
}

.ffe-course-section {
	background: white;
	border-radius: 12px;
	padding: 25px;
	margin-bottom: 25px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.ffe-section-title {
	font-size: 20px;
	font-weight: 600;
	color: #2c3e50;
	margin: 0 0 20px 0;
	padding-bottom: 10px;
	border-bottom: 2px solid #e9ecef;
}

.ffe-objectives {
	display: grid;
	gap: 10px;
}

.ffe-objective {
	padding: 12px 15px;
	background: #f8f9fa;
	border-left: 4px solid #5b7fc7;
	border-radius: 0 6px 6px 0;
}

.ffe-contents {
	display: grid;
	gap: 20px;
}

.ffe-content-item {
	border: 1px solid #e9ecef;
	border-radius: 8px;
	overflow: hidden;
}

.ffe-content-title {
	background: #5b7fc7;
	color: white;
	padding: 15px 20px;
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 10px;
}

.ffe-content-number {
	background: rgba(255, 255, 255, 0.2);
	padding: 5px 10px;
	border-radius: 15px;
	font-size: 14px;
	min-width: 30px;
	text-align: center;
}

.ffe-content-text {
	padding: 20px;
	line-height: 1.6;
	color: #495057;
}

.ffe-course-sidebar {
	position: sticky;
	top: 20px;
}

.ffe-editions-section {
	background: white;
	border-radius: 12px;
	padding: 25px;
	margin-bottom: 25px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.ffe-editions-list {
	display: grid;
	gap: 15px;
}

.ffe-edition-card {
	border: 1px solid #e9ecef;
	border-radius: 8px;
	padding: 15px;
	background: #f8f9fa;
}

.ffe-edition-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.ffe-edition-name {
	font-size: 14px;
	font-weight: 600;
	color: #2c3e50;
	margin: 0;
}

.ffe-edition-status {
	padding: 4px 8px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
}

.ffe-edition-status.active {
	background: #d4edda;
	color: #155724;
}

.ffe-edition-status.open-registration {
	background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
	color: #0c5460;
	border: 1px solid #abd5dd;
	animation: pulse-open 2s infinite;
}

.ffe-edition-status.closed-registration {
	background: linear-gradient(135deg, #f8d7da 0%, #f1aeb5 100%);
	color: #721c24;
	border: 1px solid #f5c6cb;
}

@keyframes pulse-open {
	0% {
		box-shadow: 0 0 0 0 rgba(23, 162, 184, 0.4);
	}
	70% {
		box-shadow: 0 0 0 8px rgba(23, 162, 184, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(23, 162, 184, 0);
	}
}

.ffe-edition-status.finished {
	background: #f8d7da;
	color: #721c24;
}

.ffe-edition-details {
	display: grid;
	gap: 5px;
	margin-bottom: 15px;
}

.ffe-edition-detail {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
}

.ffe-detail-label {
	color: #6c757d;
}

.ffe-detail-value {
	color: #495057;
	font-weight: 500;
}

.ffe-edition-btn {
	background: #28a745;
	color: white;
	border: none;
	padding: 8px 15px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	width: 100%;
	transition: background-color 0.3s;
	text-decoration: none;
	display: inline-block;
	text-align: center;
}

.ffe-edition-btn:hover {
	background: #218838;
	color: white;
	text-decoration: none;
}

.ffe-edition-btn-small {
	background: linear-gradient(135deg, #007cba 0%, #005a87 100%);
	color: white;
	border: none;
	padding: 6px 12px;
	border-radius: 15px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	margin-top: 8px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	text-decoration: none;
}

.ffe-edition-btn-small:hover {
	background: linear-gradient(135deg, #005a87 0%, #004a72 100%);
	transform: translateY(-1px);
	box-shadow: 0 3px 10px rgba(0, 124, 186, 0.3);
}

.ffe-additional-info {
	background: white;
	border-radius: 12px;
	padding: 25px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.ffe-additional-info h3 {
	font-size: 16px;
	font-weight: 600;
	color: #2c3e50;
	margin: 0 0 15px 0;
}

.ffe-additional-info ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ffe-additional-info li {
	padding: 8px 0;
	border-bottom: 1px solid #f8f9fa;
	font-size: 13px;
	color: #495057;
}

.ffe-additional-info li:last-child {
	border-bottom: none;
}

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

@media (max-width: 768px) {
	.ffe-stats,
	.ffe-courses-stats {
		gap: 20px;
	}

	.ffe-stat {
		min-width: 100px;
	}

	.ffe-plans-grid {
		grid-template-columns: 1fr;
	}

	.ffe-courses-grid {
		grid-template-columns: 1fr;
	}

	.ffe-course-detail-content {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.ffe-course-sidebar {
		position: static;
	}

	.ffe-filter-form {
		flex-direction: column;
		align-items: stretch;
	}

	.ffe-filter-group {
		min-width: auto;
	}

	.ffe-course-detail-meta {
		flex-direction: column;
		align-items: center;
	}

	.ffe-breadcrumb {
		font-size: 12px;
	}

	.ffe-plans-title {
		font-size: 24px;
		border-left: none;
		padding-left: 0;
	}

	.ffe-course-detail-title {
		font-size: 20px;
	}

	.ffe-section-title {
		font-size: 18px;
	}
}

/* ================================
   PÁGINAS DINÁMICAS
   ================================ */

.ffe-dynamic-page {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

.ffe-dynamic-page .ffe-breadcrumb {
	background: #f8f9fa;
	padding: 15px 20px;
	border-radius: 8px;
	margin-bottom: 30px;
}

.ffe-dynamic-page .ffe-breadcrumb a {
	color: #5b7fc7;
	text-decoration: none;
	font-weight: 500;
}

.ffe-dynamic-page .ffe-breadcrumb a:hover {
	text-decoration: underline;
}

/* Navegación mejorada */
.ffe-dynamic-nav {
	background: white;
	padding: 15px 20px;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	margin-bottom: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.ffe-nav-back {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #6c757d;
	text-decoration: none;
	font-size: 14px;
}

.ffe-nav-back:hover {
	color: #5b7fc7;
	text-decoration: none;
}

.ffe-nav-title {
	font-size: 18px;
	font-weight: 600;
	color: #2c3e50;
	margin: 0;
}

/* ================================
   EDICIONES ABIERTAS - ESTILOS DESHABILITADOS
   ================================ */

/* Los estilos especiales para ediciones abiertas han sido eliminados */
/* Las ediciones abiertas ahora usan los estilos estándar */

/* ================================
   WIDGET DE FORMULARIO DE INSCRIPCIÓN
   ================================ */

.ffe-registration-form-widget {
	max-width: 800px;
	margin: 0 auto;
}

.ffe-course-info-card {
	background: linear-gradient(135deg, #e8f4fd 0%, #d1ecf1 100%);
	border: 2px solid #007cba;
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 30px;
	box-shadow: 0 4px 15px rgba(0, 124, 186, 0.1);
}

.ffe-course-info-header h4 {
	color: #005a87;
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 15px 0;
}

.ffe-course-info-content h5 {
	color: #2c3e50;
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 10px 0;
}

.ffe-course-info-meta {
	display: flex;
	gap: 15px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.ffe-course-code,
.ffe-course-duration {
	background: rgba(255, 255, 255, 0.7);
	padding: 4px 8px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
	color: #005a87;
}

.ffe-course-description {
	color: #495057;
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}

.ffe-form-wrapper {
	position: relative;
}

/* Responsive para el widget de formulario */
@media (max-width: 768px) {
	.ffe-registration-form-widget {
		padding: 0 10px;
	}

	.ffe-course-info-card {
		padding: 15px;
		margin-bottom: 20px;
	}

	.ffe-course-info-meta {
		flex-direction: column;
		gap: 8px;
	}
}

/* Estados de éxito y error para el widget */
.ffe-registration-form-widget .wpcf7-mail-sent-ok {
	text-align: center;
	font-size: 16px;
	padding: 20px;
	margin: 20px 0;
}

.ffe-registration-form-widget .wpcf7-validation-errors {
	text-align: center;
	font-size: 14px;
	margin: 15px 0;
}

/* Animación para el formulario */
.ffe-registration-form-widget {
	animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ================================
   NUEVAS OPCIONES DE PERSONALIZACIÓN
   ================================ */

/* Variables CSS personalizables */
.ffe-courses-container {
	--ffe-primary-color: #007cba;
	--ffe-secondary-color: #6c757d;
	--ffe-success-color: #28a745;
	--ffe-warning-color: #ffc107;
	--ffe-animation-delay: 100ms;
}

/* Layouts de grid */
.ffe-courses-grid.ffe-layout-grid {
	display: grid;
	gap: 20px;
}

.ffe-courses-grid.ffe-layout-flex-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px;
}

.ffe-courses-grid.ffe-layout-flex-column {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ffe-courses-grid.ffe-layout-masonry {
	display: grid;
	grid-template-rows: masonry;
	gap: 20px;
}

/* Altura de tarjetas */
.ffe-courses-grid.ffe-height-equal .ffe-course-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.ffe-courses-grid.ffe-height-equal .ffe-course-content {
	flex: 1;
}

/* Estilos de estadísticas */
.ffe-courses-stats.ffe-stats-horizontal {
	display: flex;
	justify-content: center;
	gap: 30px;
	flex-wrap: wrap;
}

.ffe-courses-stats.ffe-stats-vertical {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
}

.ffe-courses-stats.ffe-stats-cards .ffe-stat {
	background: white;
	padding: 15px 20px;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	margin: 5px;
}

/* Efectos hover para tarjetas */
.ffe-course-card.ffe-card-hover-lift:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.ffe-course-card.ffe-card-hover-scale:hover {
	transform: scale(1.02);
}

.ffe-course-card.ffe-card-hover-shadow:hover {
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.ffe-course-card.ffe-card-hover-border:hover {
	border-color: var(--ffe-primary-color);
	border-width: 2px;
}

/* Estilos de botones */
.ffe-course-btn.ffe-btn-filled {
	background-color: var(--ffe-primary-color);
	color: white;
	border: 2px solid var(--ffe-primary-color);
}

.ffe-course-btn.ffe-btn-outline {
	background-color: transparent;
	color: var(--ffe-primary-color);
	border: 2px solid var(--ffe-primary-color);
}

.ffe-course-btn.ffe-btn-ghost {
	background-color: transparent;
	color: var(--ffe-primary-color);
	border: none;
	box-shadow: inset 0 0 0 2px var(--ffe-primary-color);
}

.ffe-course-btn.ffe-btn-gradient {
	background: linear-gradient(
		135deg,
		var(--ffe-primary-color) 0%,
		var(--ffe-secondary-color) 100%
	);
	color: white;
	border: none;
}

.ffe-course-btn.ffe-btn-minimal {
	background: none;
	color: var(--ffe-primary-color);
	border: none;
	text-decoration: underline;
	padding: 8px 0;
}

/* Tamaños de botones */
.ffe-course-btn.ffe-btn-small {
	padding: 8px 16px;
	font-size: 12px;
}

.ffe-course-btn.ffe-btn-medium {
	padding: 12px 24px;
	font-size: 14px;
}

.ffe-course-btn.ffe-btn-large {
	padding: 16px 32px;
	font-size: 16px;
}

.ffe-course-btn.ffe-btn-full {
	width: 100%;
	text-align: center;
	padding: 12px 24px;
	font-size: 14px;
}

/* Estados personalizables */
.ffe-course-status.active {
	background-color: var(--ffe-success-color);
}

.ffe-course-status.inactive {
	background-color: var(--ffe-secondary-color);
}

/* Animaciones de entrada */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes zoomIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Aplicar animaciones */
.ffe-courses-container[data-animations='yes'] .ffe-course-card[data-animation='fadeIn'] {
	animation: fadeIn 0.6s ease forwards;
}

.ffe-courses-container[data-animations='yes']
	.ffe-course-card[data-animation='fadeInUp'] {
	animation: fadeInUp 0.6s ease forwards;
}

.ffe-courses-container[data-animations='yes']
	.ffe-course-card[data-animation='fadeInDown'] {
	animation: fadeInDown 0.6s ease forwards;
}

.ffe-courses-container[data-animations='yes']
	.ffe-course-card[data-animation='slideInLeft'] {
	animation: slideInLeft 0.6s ease forwards;
}

.ffe-courses-container[data-animations='yes']
	.ffe-course-card[data-animation='slideInRight'] {
	animation: slideInRight 0.6s ease forwards;
}

.ffe-courses-container[data-animations='yes'] .ffe-course-card[data-animation='zoomIn'] {
	animation: zoomIn 0.6s ease forwards;
}

/* Ocultar elementos inicialmente para animaciones */
.ffe-courses-container[data-animations='yes'] .ffe-course-card {
	opacity: 0;
}

/* Responsive para flex layouts */
@media (max-width: 768px) {
	.ffe-courses-grid.ffe-layout-flex-row {
		flex-direction: column;
	}

	.ffe-courses-grid.ffe-layout-flex-row .ffe-course-card {
		width: 100%;
	}
}

/* Transiciones suaves para todos los elementos */
.ffe-course-card {
	transition: all 0.3s ease;
}

.ffe-course-btn {
	transition: all 0.3s ease;
}

.ffe-course-status {
	transition: all 0.3s ease;
}

/* Mejoras específicas para layout flex */
.ffe-courses-grid.ffe-layout-flex-row .ffe-course-card {
	flex: 1;
	min-width: 300px;
	max-width: 400px;
}

.ffe-courses-grid.ffe-layout-flex-column .ffe-course-card {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

/* Estilo para cuando no se muestran códigos */
.ffe-courses-container[data-show-codes='no'] .ffe-course-code {
	display: none;
}

/* Estilo para cuando no se muestran badges */
.ffe-courses-container[data-show-status='no'] .ffe-course-status {
	display: none;
}

/* Mejoras para accesibilidad */
.ffe-course-btn:focus {
	outline: 2px solid var(--ffe-primary-color);
	outline-offset: 2px;
}

.ffe-course-card:focus-within {
	box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
}

/* Soporte para modo oscuro */
@media (prefers-color-scheme: dark) {
	.ffe-courses-container {
		--ffe-text-color: #ffffff;
		--ffe-bg-color: #1a1a1a;
		--ffe-card-bg: #2d2d2d;
	}

	.ffe-course-card {
		background-color: var(--ffe-card-bg);
		color: var(--ffe-text-color);
	}

	.ffe-courses-header {
		background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
	}
}

/* ================================
   FIN NUEVAS OPCIONES
   ================================ */

/* ================================
   PRESETS DE DISEÑO
   ================================ */

/* Preset Moderno */
.ffe-courses-container.ffe-preset-modern {
	background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
	padding: 30px;
	border-radius: 20px;
}

.ffe-courses-container.ffe-preset-modern .ffe-course-card {
	background: white;
	border-radius: 16px;
	border: none;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
	transition: all 0.4s ease;
}

.ffe-courses-container.ffe-preset-modern .ffe-course-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(99, 102, 241, 0.2);
}

.ffe-courses-container.ffe-preset-modern .ffe-course-btn {
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
	border: none;
	border-radius: 12px;
	padding: 14px 28px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Preset Minimalista */
.ffe-courses-container.ffe-preset-minimal {
	background: #ffffff;
	padding: 20px 0;
}

.ffe-courses-container.ffe-preset-minimal .ffe-course-card {
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	box-shadow: none;
	transition: box-shadow 0.3s ease;
}

.ffe-courses-container.ffe-preset-minimal .ffe-course-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ffe-courses-container.ffe-preset-minimal .ffe-course-btn {
	background: #000000;
	color: white;
	border: 2px solid #000000;
	border-radius: 0;
	padding: 12px 24px;
	font-weight: 500;
	text-transform: none;
}

.ffe-courses-container.ffe-preset-minimal .ffe-courses-header {
	background: none;
	padding: 20px 0;
}

/* Preset Corporativo */
.ffe-courses-container.ffe-preset-corporate {
	background: #f8fafc;
	padding: 40px;
	border: 1px solid #e2e8f0;
}

.ffe-courses-container.ffe-preset-corporate .ffe-course-card {
	background: white;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
}

.ffe-courses-container.ffe-preset-corporate .ffe-course-btn {
	background: #1e40af;
	border: 2px solid #1e40af;
	border-radius: 6px;
	padding: 12px 24px;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.5px;
}

.ffe-courses-container.ffe-preset-corporate .ffe-courses-title {
	color: #0f172a;
	font-size: 32px;
	font-weight: 700;
}

/* Preset Colorido */
.ffe-courses-container.ffe-preset-colorful {
	background: linear-gradient(135deg, #fef7cd 0%, #fecaca 50%, #ddd6fe 100%);
	padding: 30px;
	border-radius: 20px;
}

.ffe-courses-container.ffe-preset-colorful .ffe-course-card {
	background: white;
	border: none;
	border-radius: 20px;
	box-shadow: 0 8px 30px rgba(236, 72, 153, 0.15);
	overflow: hidden;
}

.ffe-courses-container.ffe-preset-colorful .ffe-course-card:hover {
	transform: scale(1.02);
	box-shadow: 0 15px 40px rgba(236, 72, 153, 0.25);
}

.ffe-courses-container.ffe-preset-colorful .ffe-course-btn {
	background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
	border: none;
	border-radius: 25px;
	padding: 14px 28px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.ffe-courses-container.ffe-preset-colorful .ffe-course-status.active {
	background: linear-gradient(135deg, #06d6a0 0%, #10b981 100%);
	border-radius: 20px;
	color: white;
}

/* Preset Oscuro */
.ffe-courses-container.ffe-preset-dark {
	background: #111827;
	padding: 30px;
	border-radius: 12px;
	color: #f9fafb;
}

.ffe-courses-container.ffe-preset-dark .ffe-course-card {
	background: #1f2937;
	border: 1px solid #374151;
	border-radius: 12px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
	color: #f9fafb;
}

.ffe-courses-container.ffe-preset-dark .ffe-course-card:hover {
	border-color: #3b82f6;
	box-shadow: 0 12px 35px rgba(59, 130, 246, 0.2);
}

.ffe-courses-container.ffe-preset-dark .ffe-course-btn {
	background: #3b82f6;
	border: 2px solid #3b82f6;
	border-radius: 8px;
	color: white;
}

.ffe-courses-container.ffe-preset-dark .ffe-courses-header {
	background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
	color: #f9fafb;
}

.ffe-courses-container.ffe-preset-dark .ffe-courses-title {
	color: #f9fafb;
}

.ffe-courses-container.ffe-preset-dark .ffe-courses-subtitle {
	color: #d1d5db;
}

/* Preset Redondeado */
.ffe-courses-container.ffe-preset-rounded {
	background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
	padding: 30px;
	border-radius: 30px;
}

.ffe-courses-container.ffe-preset-rounded .ffe-course-card {
	background: white;
	border: none;
	border-radius: 24px;
	box-shadow: 0 6px 20px rgba(245, 158, 11, 0.2);
}

.ffe-courses-container.ffe-preset-rounded .ffe-course-btn {
	background: #f59e0b;
	border: none;
	border-radius: 50px;
	padding: 14px 32px;
	font-weight: 600;
}

.ffe-courses-container.ffe-preset-rounded .ffe-course-status {
	border-radius: 50px;
	padding: 4px 12px;
}

/* Preset Plano */
.ffe-courses-container.ffe-preset-flat {
	background: #ecf0f1;
	padding: 30px 0;
}

.ffe-courses-container.ffe-preset-flat .ffe-course-card {
	background: white;
	border: 2px solid #bdc3c7;
	border-radius: 0;
	box-shadow: none;
}

.ffe-courses-container.ffe-preset-flat .ffe-course-card:hover {
	border-color: #3498db;
}

.ffe-courses-container.ffe-preset-flat .ffe-course-btn {
	background: #3498db;
	border: none;
	border-radius: 0;
	padding: 12px 24px;
	font-weight: 600;
	text-transform: uppercase;
}

.ffe-courses-container.ffe-preset-flat .ffe-courses-header {
	background: none;
	padding: 20px 0;
}

/* Preset Gradiente */
.ffe-courses-container.ffe-preset-gradient {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 40px;
	border-radius: 20px;
	color: white;
}

.ffe-courses-container.ffe-preset-gradient .ffe-course-card {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(102, 126, 234, 0.2);
	color: #1f2937;
}

.ffe-courses-container.ffe-preset-gradient .ffe-course-card:hover {
	background: rgba(255, 255, 255, 1);
	transform: translateY(-5px);
}

.ffe-courses-container.ffe-preset-gradient .ffe-course-btn {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border: none;
	border-radius: 8px;
	color: white;
	font-weight: 600;
}

.ffe-courses-container.ffe-preset-gradient .ffe-courses-header {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border-radius: 16px;
	color: white;
}

.ffe-courses-container.ffe-preset-gradient .ffe-courses-title {
	color: white;
}

.ffe-courses-container.ffe-preset-gradient .ffe-courses-subtitle {
	color: rgba(255, 255, 255, 0.8);
}

/* Responsive para presets */
@media (max-width: 768px) {
	.ffe-courses-container.ffe-preset-modern,
	.ffe-courses-container.ffe-preset-colorful,
	.ffe-courses-container.ffe-preset-rounded,
	.ffe-courses-container.ffe-preset-gradient {
		padding: 20px;
		border-radius: 12px;
	}

	.ffe-courses-container.ffe-preset-corporate {
		padding: 20px;
	}
}

/* ================================
   FIN PRESETS DE DISEÑO
   ================================ */

/* ================================
   MODAL DE INSCRIPCIÓN
   ================================ */

/* Overlay del modal */
.ffe-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ffe-modal.active {
	opacity: 1;
	visibility: visible;
}

.ffe-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

/* Contenido del modal */
.ffe-modal-content {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	max-width: 800px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	position: relative;
	transform: scale(0.9);
	transition: transform 0.3s ease;
}

.ffe-modal.active .ffe-modal-content {
	transform: scale(1);
}

/* Header del modal */
.ffe-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 25px 30px;
	border-bottom: 1px solid #e9ecef;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border-radius: 12px 12px 0 0;
}

.ffe-modal-title {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
}

.ffe-modal-close {
	background: none;
	border: none;
	font-size: 28px;
	color: white;
	cursor: pointer;
	padding: 0;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background 0.2s ease;
}

.ffe-modal-close:hover {
	background: rgba(255, 255, 255, 0.2);
}

/* Body del modal */
.ffe-modal-body {
	padding: 30px;
}

/* ================================
   INFORMACIÓN DEL CURSO EN MODAL
   ================================ */

/* Información del curso seleccionado */
.ffe-course-info-modal {
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	border: 2px solid #dee2e6;
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 25px;
	text-align: center;
}

.ffe-selected-course {
	position: relative;
}

.ffe-course-title {
	font-size: 20px;
	font-weight: 700;
	color: #2c3e50;
	margin: 0 0 8px 0;
	line-height: 1.3;
}

.ffe-edition-title {
	font-size: 16px;
	color: #495057;
	margin: 0 0 12px 0;
	font-weight: 500;
}

.ffe-modal-plan {
	font-size: 14px;
	color: #6c757d;
	margin: 0;
	font-weight: 500;
}

.ffe-modal-plan strong {
	color: #495057;
}

/* Responsive para información del curso */
@media (max-width: 768px) {
	.ffe-course-info-modal {
		padding: 15px;
		margin-bottom: 20px;
	}

	.ffe-course-title {
		font-size: 18px;
	}

	.ffe-edition-title {
		font-size: 15px;
	}
}

/* Formulario en el modal */
.ffe-inscription-form {
	margin: 0;
}

.ffe-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 20px;
}

.ffe-form-row-full {
	grid-template-columns: 1fr !important;
}

.ffe-form-row-full .ffe-form-field {
	width: 100%;
}

.ffe-form-group {
	display: flex;
	flex-direction: column;
}

.ffe-form-group label {
	font-weight: 600;
	margin-bottom: 8px;
	color: #2c3e50;
	font-size: 14px;
}

.ffe-form-group input,
.ffe-form-group select {
	padding: 12px 15px;
	border: 2px solid #e9ecef;
	border-radius: 8px;
	font-size: 16px;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	background: #ffffff;
}

.ffe-form-group input:focus,
.ffe-form-group select:focus {
	outline: none;
	border-color: #007cba;
	box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
}

.ffe-form-group input:invalid {
	border-color: #dc3545;
}

/* Checkboxes personalizados */
.ffe-checkbox-group {
	margin: 20px 0;
}

.ffe-checkbox-field {
	margin-bottom: 20px;
	padding: 15px;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	background: #fff;
}

.ffe-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
	width: 100%;
}

.ffe-checkbox-label input[type='checkbox'] {
	width: auto !important;
	margin: 0 !important;
	flex-shrink: 0;
	position: relative;
	z-index: 10;
}

.ffe-checkmark {
	width: 20px;
	height: 20px;
	border: 2px solid #dee2e6;
	border-radius: 4px;
	position: relative;
	flex-shrink: 0;
	margin-top: 2px;
	background: #fff;
}

.ffe-checkbox-label input[type='checkbox']:checked + .ffe-checkmark {
	background: #007cba;
	border-color: #007cba;
}

.ffe-checkbox-label input[type='checkbox']:checked + .ffe-checkmark::after {
	content: '✓';
	color: white;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 12px;
	font-weight: bold;
}

/* Footer del modal */
.ffe-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 15px;
	padding-top: 25px;
	border-top: 1px solid #e9ecef;
	margin-top: 30px;
}

/* Botones del modal */
.ffe-btn {
	padding: 12px 25px;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 120px;
}

.ffe-btn-primary {
	background: linear-gradient(135deg, #007cba 0%, #005a87 100%);
	color: white;
}

.ffe-btn-primary:hover {
	background: linear-gradient(135deg, #005a87 0%, #004a72 100%);
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(0, 124, 186, 0.3);
}

.ffe-btn-secondary {
	background: #f8f9fa;
	color: #6c757d;
	border: 2px solid #e9ecef;
}

.ffe-btn-secondary:hover {
	background: #e9ecef;
	color: #495057;
}

.ffe-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none !important;
}

.ffe-btn-loading {
	display: none;
}

.ffe-btn.loading .ffe-btn-text {
	display: none;
}

.ffe-btn.loading .ffe-btn-loading {
	display: inline-block;
}

/* Resultado del formulario */
.ffe-form-result {
	padding: 20px;
	border-radius: 8px;
	margin-top: 20px;
	text-align: center;
}

.ffe-form-result.success {
	background: #d1edff;
	border: 1px solid #007cba;
	color: #004a72;
}

.ffe-form-result.error {
	background: #f8d7da;
	border: 1px solid #dc3545;
	color: #721c24;
}

/* Estilos para campos con errores */
.ffe-form-group input.error,
.ffe-form-group select.error {
	border-color: #dc3545 !important;
	box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
}

.ffe-checkbox-group.error .ffe-checkmark {
	border-color: #dc3545 !important;
}

/* Animación para el botón del modal */
.ffe-modal-trigger {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	color: inherit !important;
	text-decoration: none !important;
	cursor: pointer !important;
	font: inherit !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
}

/* Botones pequeños de inscripción en las ediciones */
.ffe-edition-btn-small {
	background: linear-gradient(135deg, #007cba 0%, #005a87 100%);
	color: white;
	border: none;
	padding: 6px 12px;
	border-radius: 15px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	margin-top: 8px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	text-decoration: none;
}

.ffe-edition-btn-small:hover {
	background: linear-gradient(135deg, #005a87 0%, #004a72 100%);
	transform: translateY(-1px);
	box-shadow: 0 3px 10px rgba(0, 124, 186, 0.3);
}

.ffe-edition-preview {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px 0;
	border-bottom: 1px solid #f0f0f0;
}

.ffe-edition-preview:last-child {
	border-bottom: none;
}

/* Asegurar que el modal esté oculto por defecto */
#ffe-registration-modal,
#ffe-registration-modal-courses {
	display: none !important;
}

#ffe-registration-modal.active,
#ffe-registration-modal-courses.active {
	display: block !important;
}

/* ================================
   ESTILOS PARA FORMULARIO CF7 EN MODAL
   ================================ */

/* Secciones del formulario */
.ffe-form-section {
	margin-bottom: 25px;
	padding: 20px;
	background: #f8f9fa;
	border-radius: 8px;
	border-left: 4px solid var(--ffe-primary-color, #007cba);
}

.ffe-section-title {
	margin: 0 0 15px 0;
	font-size: 16px;
	font-weight: 600;
	color: #2c3e50;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Campos del formulario */
.ffe-form-field {
	margin-bottom: 15px;
}

.ffe-form-field-half {
	flex: 1;
	min-width: 0;
}

.ffe-form-field label {
	display: block;
	margin-bottom: 5px;
	font-weight: 500;
	color: #2c3e50;
	font-size: 14px;
}

.ffe-form-field input,
.ffe-form-field select {
	width: 100%;
	padding: 12px 15px;
	border: 2px solid #e9ecef;
	border-radius: 6px;
	font-size: 14px;
	transition: all 0.3s ease;
	background: #ffffff;
}

.ffe-form-field input:focus,
.ffe-form-field select:focus {
	outline: none;
	border-color: var(--ffe-primary-color, #007cba);
	box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.ffe-form-field input.error,
.ffe-form-field select.error {
	border-color: #dc3545;
	background-color: #fff5f5;
}

.ffe-form-field input[readonly] {
	background-color: #f8f9fa;
	color: #6c757d;
	cursor: not-allowed;
}

/* Nota de campo */
.ffe-field-note {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: #6c757d;
	font-style: italic;
}

/* Campos de checkbox */
.ffe-checkbox-field {
	margin-bottom: 20px;
	padding: 15px;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	background: #fff;
}

.ffe-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
	width: 100%;
}

.ffe-checkbox-label input[type='checkbox'] {
	width: auto !important;
	margin: 0 !important;
	flex-shrink: 0;
	position: relative;
	z-index: 10;
}

.ffe-checkmark {
	width: 20px;
	height: 20px;
	border: 2px solid #dee2e6;
	border-radius: 4px;
	position: relative;
	flex-shrink: 0;
	margin-top: 2px;
	background: #fff;
}

.ffe-checkbox-label input[type='checkbox']:checked + .ffe-checkmark {
	background: #007cba;
	border-color: #007cba;
}

.ffe-checkbox-label input[type='checkbox']:checked + .ffe-checkmark::after {
	content: '✓';
	color: white;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 12px;
	font-weight: bold;
}

/* Responsive */
@media (max-width: 768px) {
	.ffe-form-section {
		padding: 15px;
		margin-bottom: 20px;
	}

	.ffe-section-title {
		font-size: 15px;
	}

	.ffe-form-field input,
	.ffe-form-field select {
		padding: 10px 12px;
		font-size: 16px; /* Evitar zoom en iOS */
	}
}

/* ================================
   ESTILOS PARA CF7 EN MODAL
   ================================ */

/* Contenedor del formulario CF7 en modal */
.ffe-modal .wpcf7 {
	margin: 0;
}

.ffe-modal .wpcf7-form {
	margin: 0;
}

/* Aplicar estilos de FFE a los campos de CF7 */
.ffe-modal .wpcf7-form .ffe-form-section {
	margin-bottom: 25px;
}

.ffe-modal .wpcf7-form .ffe-section-title {
	font-size: 16px;
	font-weight: 600;
	color: #2c3e50;
	margin: 0 0 15px 0;
	padding: 0 0 8px 0;
	border-bottom: 2px solid #3498db;
	display: flex;
	align-items: center;
	gap: 8px;
}

.ffe-modal .wpcf7-form .ffe-form-row {
	display: flex;
	gap: 15px;
	margin-bottom: 15px;
	flex-wrap: wrap;
}

.ffe-modal .wpcf7-form .ffe-form-row-full {
	flex-direction: column;
}

.ffe-modal .wpcf7-form .ffe-form-field {
	flex: 1;
	min-width: 0;
}

.ffe-modal .wpcf7-form .ffe-form-field-half {
	flex: 1;
	min-width: 250px;
}

.ffe-modal .wpcf7-form .ffe-form-field label {
	display: block;
	font-weight: 500;
	color: #555;
	margin-bottom: 5px;
	font-size: 14px;
}

.ffe-modal .wpcf7-form .ffe-form-field input,
.ffe-modal .wpcf7-form .ffe-form-field select {
	width: 100%;
	padding: 12px 15px;
	border: 2px solid #e1e8ed;
	border-radius: 8px;
	font-size: 14px;
	transition: all 0.3s ease;
	box-sizing: border-box;
	background: #fff;
}

.ffe-modal .wpcf7-form .ffe-form-field input:focus,
.ffe-modal .wpcf7-form .ffe-form-field select:focus {
	outline: none;
	border-color: #3498db;
	box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.ffe-modal .wpcf7-form .ffe-checkbox-field {
	margin-top: 10px;
}

.ffe-modal .wpcf7-form .ffe-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.5;
}

.ffe-modal .wpcf7-form .ffe-checkbox-label input[type='checkbox'] {
	width: auto;
	margin: 0;
	margin-top: 2px;
}

/* Botón de envío de CF7 */
.ffe-modal .wpcf7-form .wpcf7-submit {
	background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
	color: white;
	border: none;
	padding: 15px 30px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	width: 100%;
	margin-top: 20px;
}

.ffe-modal .wpcf7-form .wpcf7-submit:hover {
	background: linear-gradient(135deg, #2980b9 0%, #1f639a 100%);
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

.ffe-modal .wpcf7-form .wpcf7-submit:active {
	transform: translateY(0);
}

/* Mensajes de respuesta de CF7 */
.ffe-modal .wpcf7-response-output {
	margin: 15px 0 0 0;
	padding: 15px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.5;
}

.ffe-modal .wpcf7-mail-sent-ok {
	background-color: #d4edda;
	border: 1px solid #c3e6cb;
	color: #155724;
}

.ffe-modal .wpcf7-validation-errors {
	background-color: #f8d7da;
	border: 1px solid #f5c6cb;
	color: #721c24;
}

.ffe-modal .wpcf7-display-none {
	display: none !important;
}

/* Estilos responsivos para CF7 en modal */
@media (max-width: 768px) {
	.ffe-modal .wpcf7-form .ffe-form-field-half {
		min-width: 100%;
	}

	.ffe-modal .wpcf7-form .ffe-form-row {
		flex-direction: column;
		gap: 10px;
	}
}

/* ================================
   BOTONES EN FOOTER DE CURSOS
   ================================ */

.ffe-course-buttons {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: stretch;
}

.ffe-course-buttons .ffe-course-btn {
	flex: 1;
	min-width: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: inherit;
}

/* Asegurar que botones <button> y <a> se vean exactamente iguales */
.ffe-course-buttons button.ffe-course-btn {
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	text-transform: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: none;
	margin: 0;
	padding: 0;
}

/* Estilos específicos para mejorar la legibilidad del texto */
.ffe-course-buttons .ffe-course-btn {
	position: relative;
	overflow: hidden;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ffe-course-buttons .ffe-course-btn:focus {
	outline: 2px solid rgba(91, 127, 199, 0.5);
	outline-offset: 2px;
}

/* Fix específico para el texto del botón de inscripción */
.ffe-inscription-btn-new,
button.ffe-inscription-btn-new {
	font-style: normal !important;
	font-variant: normal !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
	text-shadow: none !important;
	filter: none !important;
	-webkit-text-stroke: initial !important;
	text-decoration: none !important;
}

/* Asegurar que todos los botones del footer tengan buen contraste de texto */
.ffe-course-buttons .ffe-course-btn {
	color: white !important;
	background-color: var(--ffe-primary-color, #5b7fc7) !important;
	text-shadow: none !important;
}

.ffe-course-buttons .ffe-course-btn:hover {
	color: white !important;
	text-shadow: none !important;
}

/* ================================
   ESTILOS PARA WIDGET DETALLE DEL CURSO - NUEVOS ELEMENTOS
   ================================ */

/* Badges en el header del curso */
.ffe-homologable-badge,
.ffe-teleformacion-badge {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	color: white;
	margin: 0 5px;
}

.ffe-homologable-badge {
	background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
	box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
}

.ffe-teleformacion-badge {
	background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
	box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

/* Duración del curso en el header */
.ffe-course-duration {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 15px 0;
	padding: 12px 20px;
	background: rgba(91, 127, 199, 0.1);
	border-radius: 25px;
	border: 2px solid rgba(91, 127, 199, 0.2);
}

.ffe-duration-icon {
	font-size: 18px;
}

.ffe-duration-text {
	font-size: 14px;
	font-weight: 600;
	color: #5b7fc7;
}

/* Estilos mejorados para la sidebar de ediciones */
.ffe-course-sidebar {
	position: sticky;
	top: 20px;
	height: fit-content;
}

.ffe-editions-section {
	background: white;
	border-radius: 12px;
	padding: 25px;
	margin-bottom: 25px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border: 1px solid #e9ecef;
}

.ffe-editions-list {
	display: grid;
	gap: 15px;
	margin-top: 20px;
}

.ffe-edition-item {
	border: 1px solid #e9ecef;
	border-radius: 8px;
	padding: 15px;
	background: #fafbfc;
	transition: all 0.3s ease;
}

.ffe-edition-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ffe-edition-item.edition-open {
	border-color: #28a745;
	background: linear-gradient(135deg, #d4edda 0%, #f8f9fa 100%);
}

.ffe-edition-item.edition-future {
	border-color: #007bff;
	background: linear-gradient(135deg, #cce7ff 0%, #f8f9fa 100%);
}

.ffe-edition-item.edition-past {
	border-color: #6c757d;
	background: linear-gradient(135deg, #e2e3e5 0%, #f8f9fa 100%);
	opacity: 0.7;
}

.ffe-edition-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 10px;
	flex-wrap: wrap;
	gap: 8px;
}

.ffe-edition-name {
	font-weight: 600;
	color: #2c3e50;
	font-size: 14px;
	flex: 1;
	min-width: 0;
}

.ffe-edition-status {
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

.ffe-edition-details {
	margin: 10px 0;
}

.ffe-edition-date,
.ffe-edition-state {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 5px 0;
	font-size: 12px;
	color: #6c757d;
}

.ffe-date-icon,
.ffe-state-icon {
	font-size: 14px;
	width: 16px;
	text-align: center;
}

.ffe-edition-actions {
	margin-top: 12px;
	display: flex;
	justify-content: flex-end;
}

.ffe-edition-register-btn {
	background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3);
}

.ffe-edition-register-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
	background: linear-gradient(135deg, #20c997 0%, #28a745 100%);
}

.ffe-edition-register-btn:active {
	transform: translateY(0);
}

/* Responsive para la sidebar de ediciones */
@media (max-width: 768px) {
	.ffe-course-detail-content {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.ffe-course-sidebar {
		position: static;
		order: 1;
	}

	.ffe-course-main-content {
		order: 2;
	}

	.ffe-editions-section {
		padding: 20px;
	}

	.ffe-edition-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
	}

	.ffe-edition-name {
		margin-bottom: 5px;
	}
}

/* Mejoras para los badges en móvil */
@media (max-width: 480px) {
	.ffe-course-detail-meta {
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}

	.ffe-homologable-badge,
	.ffe-teleformacion-badge {
		font-size: 11px;
		padding: 4px 10px;
		margin: 2px;
	}

	.ffe-course-duration {
		flex-direction: column;
		gap: 5px;
		padding: 10px 15px;
		text-align: center;
	}

	.ffe-duration-text {
		font-size: 13px;
	}
}

/* Animaciones para los badges */
@keyframes badgeGlow {
	0% {
		box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
	}
	50% {
		box-shadow: 0 4px 16px rgba(243, 156, 18, 0.5);
	}
	100% {
		box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
	}
}

@keyframes teleformacionGlow {
	0% {
		box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
	}
	50% {
		box-shadow: 0 4px 16px rgba(52, 152, 219, 0.5);
	}
	100% {
		box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
	}
}

.ffe-homologable-badge:hover {
	animation: badgeGlow 2s ease-in-out infinite;
}

.ffe-teleformacion-badge:hover {
	animation: teleformacionGlow 2s ease-in-out infinite;
}

/* Estilos adicionales para el contenido cuando no hay sidebar */
.ffe-course-detail-content:not(:has(.ffe-course-sidebar)) {
	grid-template-columns: 1fr;
}

/* Mejora del contraste en los badges para mejor legibilidad */
.ffe-homologable-badge {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.ffe-teleformacion-badge {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}