@import url('./variables.css');

#planes,
#tabla {
	scroll-margin-top: 6rem;
	/* ~96px */
}

/*
 =============================================
 INICIO SECCIÓN "CONOCE TU PLAN IDEAL"
 Sobreescritura de MDB: SÍ
 Enfoque: Desktop-First
 =============================================   
*/

#planes {
	container-type: inline-size;
	container-name: tabs-container;
}

/* ======= PILLS ======= */
#planes .nav.nav-pills {
	transition: gap 0.3s ease;
	border-radius: 50px;
	gap: 0.2rem;
	background-color: var(--as-secondary-20);
	padding: 0.3rem;
}

#planes .nav.nav-pills .nav-link {
	text-transform: none;
	padding: 0.7rem 1rem;
	background-color: transparent;
	color: var(--as-secondary);
	border-radius: 50px;
	margin: 0 !important;
}

#planes .nav.nav-pills .nav-link.active {
	background-color: var(--as-secondary);
	color: white !important;
}

/* Cambiar la apariencia de los pills para antes que ocurra el wrap */
@container tabs-container (max-width: 767.8px) {
	#planes .nav.nav-pills {
		gap: 0.6rem;
		background-color: transparent !important;
		padding: 0 !important;
		justify-content: center;
	}

	#planes .nav.nav-pills .nav-link:not(.active) {
		background-color: var(--as-secondary-10);
	}
}

/* ======= SWITCH ======= */
#planes .form-switch .form-check-input {
	background-color: var(--as-fifth-20);
}

#planes .form-switch .form-check-input:after {
	background-color: var(--as-fifth);
}

#planes .form-check-input[type=checkbox]:checked {
	background-color: var(--as-secondary-20);
}

#planes .form-switch .form-check-input:checked[type=checkbox]:after {
	background-color: var(--as-secondary);
}

#anualLabel,
#mensualLabel {
	transition: color 0.3s ease;
}

/* ======= RANGE ======= */
#planes .range .thumb {
	transform: scale(1);
}

.plan-basico .range .thumb::after {
	background-color: var(--as-fifth) !important;
}

.plan-basico .range input[type="range"]::-webkit-slider-thumb {
	background-color: var(--as-fifth) !important;
}

.plan-basico .range input[type="range"]::-moz-range-thumb {
	background-color: var(--as-fifth) !important;
}

.plan-plus .range .thumb::after {
	background-color: var(--as-tertiary) !important;
}

.plan-plus .range input[type="range"]::-webkit-slider-thumb {
	background-color: var(--as-tertiary) !important;
}

.plan-plus .range input[type="range"]::-moz-range-thumb {
	background-color: var(--as-tertiary) !important;
}

.plan-imperium .range .thumb::after {
	background-color: var(--as-primary) !important;
}

.plan-imperium .range input[type="range"]::-webkit-slider-thumb {
	background-color: var(--as-primary) !important;
}

.plan-imperium .range input[type="range"]::-moz-range-thumb {
	background-color: var(--as-primary) !important;
}

/*
 =================================================
 FIN SECCIÓN "CONOCE TU PLAN IDEAL" 
 =================================================   
*/

/*
 =============================================
 INICIO SECCIÓN "TABLA COMPARATIVA"
 Sobreescritura de MDB: SÍ
 Enfoque: Desktop-First
 =============================================   
*/

/* ======= TABLA ======= */
.pricing-table {
	width: 100%;
	min-width: 900px;
	border-collapse: separate;
	border-spacing: 24px 0;
}

/* ======= TABLA COLUMNAS ======= */
.features-header {
	width: 10%;
	min-width: 200px;
	vertical-align: top;
	border-top-right-radius: 20px;
	padding: 1rem;
}

.plan-column {
	width: 30%;
	vertical-align: top;
}

/* ======= TABLA HEADERS ======= */
.plan-card {
	padding: 2rem 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	min-height: 195px;
	border-radius: 20px;
	box-sizing: border-box;
	transition: transform 0.3s ease;
}

.plan-card:hover {
	transform: scale(1.05);
}

.pricing-table thead th {
	padding-bottom: 40px;
}

/* ======= TABLA FILAS BODY ======= */
.pricing-table tbody tr {
	height: 45px;
}

.actions-row>th:first-child {
	border-bottom-right-radius: 20px;
}

/* ======= TABLA FILAS BODY ======= */
.pricing-feature-cell {
	position: relative;
	text-align: center;
}

.pricing-feature-cell::after {
	content: "";
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 0;
	height: 1.5px;
	background-color: currentColor;
	opacity: 0.2;
}

.pricing-table tbody tr:first-child td {
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}

.pricing-table tbody tr:last-child td {
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}

.pricing-table tbody td:nth-child(2) {
	background: var(--as-fifth-05);
}

.pricing-table tbody td:nth-child(2) i {
	color: var(--as-fifth);
}

.pricing-table tbody td:nth-child(3) {
	background: var(--as-tertiary-05);
}

.pricing-table tbody td:nth-child(3) i {
	color: var(--as-tertiary);
}

.pricing-table tbody td:nth-child(4) {
	background: var(--as-primary-05);
}

.pricing-table tbody td:nth-child(4) i {
	color: var(--as-primary);
}

/* ======= DECORACIÓN PLAN IMPERIUM ======= */
.pricing-table tbody tr:first-child td:nth-child(4) {
	border-top: 2px solid #15358f;
}

.pricing-table tbody td:nth-child(4) {
	border-left: 2px solid #15358f;
	border-right: 2px solid #15358f;
}

.actions-row td:nth-child(4) {
	border-bottom: 2px solid #15358f;
}

/* ======= AJUSTE RESPONSIVO ======= */

@media (max-width: 992px) {
	.pricing-table {
		min-width: 850px;
		border-spacing: 16px 0;
	}

	.pricing-table thead th {
		padding-bottom: 32px;
	}
}


@media (max-width: 992px) and (min-width: 576px) {
	.features-header,
	.pricing-table tbody th {
		position: sticky;
		left: 0;
		z-index: 3;
		background: #fff;
		box-shadow: 8px 0px 8px 0px rgba(0, 0, 0, 0.04);
	}
}


@media (max-width: 575px) {
	.pricing-table tbody th {
		position: static;
	}
}


@media (max-width: 992px) {
	.features-header {
		min-width: 180px;
	}
}

/*
 =================================================
 FIN SECCIÓN "TABLA COMPARATIVA"
 =================================================   
*/