.grid-100 {
	width: 100%;
}
.grid-90 {
	width: 90%;
}
.grid-80 {
	width: 80%;
}
.grid-70 {
	width: 70%;
}
.grid-60 {
	width: 60%;
}
.grid-50 {
	width: 50%;
}
.grid-45 {
	width: 45%;
}
.grid-40 {
	width: 40%;
}
.grid-30 {
	width: 30%;
}
.grid-20 {
	width: 20%;
}
.grid-10 {
	width: 10%;
}

.left {
	float: left;
}

.column-title { 
	width: 25%; 
}
.column-price_member,
.column-price_student,
.column-price_member_student {
	width: 5%;
}

.cm-button {
	display: inline-block;
	background-color: #ffcc00 !important;
	color: #333 !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 12px 24px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	text-align: center !important;
	transition: all 0.2s ease-in-out !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
	margin-right: 12px !important;
	white-space: nowrap !important;
}

/* ✨ Hover y estados */
.cm-button:hover,
.cm-button:focus {
	background-color: #ffdb4d !important;
	color: #000 !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
	transform: translateY(-2px) !important;
}

.cm-button:active {
	background-color: #e6b800 !important;
	transform: translateY(0) !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.cm-button:disabled {
	background-color: #f0f0f0 !important;
	color: #999 !important;
	cursor: not-allowed !important;
	box-shadow: none !important;
}

/* 💎 Variante para membresía */
.cm-button#btn-membresia {
	background-color: #0073aa !important;
	color: #fff !important;
}

.cm-button#btn-membresia:hover,
.cm-button#btn-membresia:focus {
	background-color: #0095d9 !important;
	color: #fff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

.cm-button#btn-membresia:active {
	background-color: #005c87 !important;
	transform: translateY(0) !important;
}

.cm-course {
	color: #666666;
	display: block;
	float: left;
}
.cm-course h2, .cm-course-form h2 {
	font-size: 22px;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 0;
	line-height: 34px;
	padding-bottom: 18px;
	color: #222222;
	font-weight: normal;
	font-family: 'Lato', sans-serif;
}

.cm-course ul, .cm-course-form ul {
	padding: 0 0 0 35px;
	margin-bottom: 30px;
	list-style: square;
}

.cm-course li, .cm-course-form li {
	display: list-item;
	margin-bottom: 15px;
}

.cm-form-text {
    margin-bottom: 15px; 
    overflow: hidden; 
}
.cm-form-text label {
    float: left;
    width: 20%; 
    text-align: right; 
    padding-top: 8px; 
    margin-right: 5px; 
}

.cm-form-text input[type="text"],
.cm-form-text input[type="email"]{
    float: left;
    width: 65%; 
    margin-top: 0;
    padding: 8px 10px; 
    border: 1px solid #ccc;
    box-sizing: border-box; 
}

.cm-course-form-description {
	width: 100%;
	float: left;
}
.cm-course-form input[type="radio"] {
	margin-right: 15px;
	cursor: pointer;
}

.cm-course-form .radio-label {
	margin-right: 50px;
}

.cm-form-radios {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 20px;
}

.cm-form-radios label {
	display: flex;
	align-items: center;
	white-space: nowrap;
	cursor: pointer;
	font-size: 14px;
}

.cm-form-radios input[type="radio"] {
	margin-right: 8px;
	margin-left: 0;
}

.cm-form-checkbox {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
	width: 100%;
}

.cm-form-checkbox label {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 16px;
	line-height: 1.4;
	gap: 10px;
	padding: 6px 0;
	width: 100%;
}

.cm-form-checkbox input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: #ffcc00; /* Color del checkbox moderno */
	flex-shrink: 0;
	cursor: pointer;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
	.cm-form-text label {
        float: none;
        width: 100%;
        text-align: left;
        margin-right: 0;
        padding-top: 0;
        margin-bottom: 5px; /* Espacio antes del input */
    }
    .cm-form-text input[type="text"],
    .cm-form-text input[type="email"]{
        float: none;
        width: 100%;
    }
	.scroll-to-top-btn {
        display: none !important; /* Oculta el botón que molesta en móvil */
    }
	.cm-form-radios {
		flex-direction: column !important;
		gap: 12px;
	}
	
	.cm-form-radios label {
		font-size: 16px;
		padding: 8px 0;
	}
	
	.cm-form-radios input[type="radio"] {
		margin-right: 12px;
		transform: scale(1.2);
	}

	.cm-form-checkbox {
		flex-direction: column !important;
		gap: 12px !important;
	}

	.cm-form-checkbox label {
		font-size: 18px;
		padding: 10px 0;
		gap: 12px;
	}
	
	.cm-form-checkbox input[type="checkbox"] {
		width: 24px;
		height: 24px;
	}
	.cm-button {
		font-size: 17px !important;
		padding: 12px 20px !important;
		margin-right: 10px !important;
	}
}

/* Force vertical layout on all screen sizes */
@media (min-width: 768px) {
	.cm-form-checkbox {
		flex-direction: column !important;
	}
	
	.cm-form-checkbox label {
		width: 100% !important;
		display: flex !important;
		margin-bottom: 8px !important;
	}
}

/* Ensure checkboxes display vertically */
.cm-form-checkbox {
	display: flex !important;
	flex-direction: column !important;
}

.cm-form-checkbox label {
	display: flex !important;
	align-items: flex-start !important;
	margin-bottom: 8px !important;
	width: 100% !important;
}

.cm-form-checkbox input[type="checkbox"] {
	margin-right: 12px !important;
	margin-top: 2px !important;
	flex-shrink: 0;
}

/* Special styling for AGB checkbox with long text */
.cm-agb-checkbox {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-bottom: 20px;
}

.cm-agb-checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	line-height: 1.5;
	font-size: 15px;
	cursor: pointer;
	flex-wrap: wrap;
	width: 100%;
}

.cm-agb-checkbox input[type="checkbox"] {
	margin-top: 4px;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	accent-color: #ffcc00;
}

.cm-agb-checkbox strong {
	font-weight: bold;
}

.cm-agb-checkbox a {
	color: #0073aa;
	text-decoration: underline;
}

.cm-form-radios {
	display: flex !important;
	flex-direction: column !important;
	margin-bottom: 20px;
}

.cm-form-radios label {
	display: flex !important;
	align-items: center !important;
	margin-bottom: 12px !important;
	width: 100% !important;
	padding: 5px 0;
	cursor: pointer;
}

.cm-form-radios input[type="radio"] {
	margin-right: 12px !important;
	flex-shrink: 0;
}

.cm-course-form .cm-button {
	margin-top: 40px;
}

.cm-cour-form-backend input[type="radio"] {
	margin-top: 4px;
	margin-left: 20px;
	margin-right: 10px;
}

.field-required:after {
	content: ' *';
	color: red;
	vertical-align: super;
}

.cm-member-check-form input[type="radio"] {
	margin-top: 0px;
	margin-right: 10px;
	margin-left: 20px;
	float: left;
}

.color-red a {
	color: #D3122B !important;
	transition: color 0.2s ease-in-out; 
	font-weight: bold;
}

.color-red a:hover,
.color-red a:focus {
	color: #FFD500 !important;
	font-weight: bold;
}

.color-red.current-menu-item > a,
.color-red.current_page_item > a,
.color-red.current-menu-ancestor > a {
    color: rgb(129, 215, 66) !important;
    font-weight: bold;
}