:root {
	--white: #ffffff;
	--lilac: #cd9ffa;
	--bluishViolet: #7a60ffba;
	--darckViolet: #5038cb;
	--dimViolet: #4e3e9c;
	--obsViolet: #48246b;
	--violet: #7430b9a1;
	--lightGray: #e4e4e4;
	--gray: #a6b2dcab;
	--drakGray: #5d6166;
	--black: #000000;
	--font: 'Poppins', sans-serif;
}

/*=========TODOS============*/
.text-none{
	text-transform: none !important;
}

/*degrade para los bloques*/
.card{
	box-shadow: 1px 1px 20px rgba(39, 1, 61, 0.171) !important;
}
/*margin para que los containers se separen del footer*/
.container-fluid{
	margin-bottom: 50px;
}
/*===BUSCAR===*/
.div-search{
	display: flex;
	justify-content: end;
}
.f-txt{
	font-size: 1.03rem !important;
}
@media (max-width: 575px) {
/*tamaño del buscador*/
.div-search{
	margin-top: 10px !important;
	display: flex;
	justify-content: left;
}

}
/*estilo del boton X que se encuentra dentro del input*/
#buscador-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238e1efc'%3e%3cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
#buscador-input::-webkit-search-cancel-button:hover {
    transform: scale(1.1);
    filter: brightness(0.8);
}

/*texto input*/
input::placeholder {
	color: var(--drakGray) !important;
}
/*Color de la tipografia (titulos, subtitulos)*/
.text-primary{
	color: var(--bluishViolet) !important;
}
.text-secundary{
	color: var(--dimViolet) !important;
}
.text-tertiary{
	color: var(--obsViolet) !important;
}
/*links*/
a {
	color: var(--darckViolet);
}

.title-color {
	color: var(--bluishViolet) !important;
}

/*elemento que tenga esta clase*/
.button {
	background-image: linear-gradient(to left, #7a60ff, #cd9ffa) !important;
	border: none;
}

.button-sf {
	background-color: transparent !important;
	border-color: var(--gray);
}

/*formularios*/
.form-control:focus,
.form-input:focus {
	border-color: var(--violet) !important;
}

.form-check-input:checked {
	background-color: var(--bluishViolet);
	border-color: var(--bluishViolet);
}

/*=========FOOTER============*/
.footer-copy {
	background: linear-gradient(to left, #7a60ff, #cd9ffa);
	position: relative;
	color: var(--white);
	font-size: 13px;
	text-align: center;
	padding: 15px 0px;
	width: 100%;         /* Asegura ancho completo */
    overflow: hidden;
}

.footer-copy p {
	margin-bottom: 0px;
	word-wrap: break-word;   /* Rompe links largos si es necesario */
    padding: 0 15px;
}
/* Elimina el margen negativo que causa el desborde en el footer */
.footer-copy .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* --- 2. ALINEACIÓN DE ICONOS EN EL MENÚ "PANEL" --- */

/* Contenedor Flex para alinear el icono y el enlace verticalmente */
.dropdown-menu .menu-item-with-icon {
	display: flex !important;
	align-items: center !important;
	line-height: 1.5;
}


@media (max-width: 1199px) {

	.flex-shrink-0 {
		margin-top: -100px;

	}
	.navbar-toggler {
		font-size: 1.7rem !important;
	}
	.container-fluid {
		margin-bottom: 40px;
	}

}
@media (max-width: 370px) {
	

	.navbar-logo{
		display: grid;
  place-items: center;
	}

}

/*=========CUERPO DEL TEMPLATE============*/
.app-wrapper {
	margin-top: -60px !important;
	margin-left: 0 !important;
	margin-bottom: -40px;
}
.app-wrapper .aw-main {
	margin-inline-start: 90%;
}
.app-wrapper::before {
	content: none !important;
	display: none !important;
	height: 0 !important;
	background-color: transparent !important;
}

.app-wrapper::before li a {
	color: var(--black);
}
/*=========LANCAMIENTO============*/
.icon-btn {
	background-color: var(--bluishViolet);
	border: none;
}

.icon-btn:hover {
	background-color: var(--darckViolet) !important;
	border-color: var(--bluishViolet) !important;
}


/*=========RESPONSIVIDAD============*/
/*celular*/
@media (min-width: 300px) and (max-width: 499px) {
	.logo-main h3 {
		display: none;
	}

	.pe-slide-item a {
		color: var(--white) !important;
	}
}

@media (max-width: 540px) {
	.logo-main h3 {
		font-size: 1.2rem;
	}

	.pe-slide-item a {
		color: var(--white) !important;
	}
}

/*=========INDEX============*/
.banner {
	width: 100vw;
	position: relative;
	margin-left: -50vw;
	left: 50%;
	background: linear-gradient(to left, #7a60ff, #cd9ffa);
	padding-top: 40px;
	margin-top: 85px;
}

/* ===INICIO CON SEGUNDO NAVBAR=== */
#perfil-privado .banner{
	margin-top: 0;
	padding-top: 0;
}
section {
    scroll-margin-top: 200px;
}

/* sección caracteristicas*/
.single-feature {
	display: flex;
}

.single-feature .media-body {
	flex-grow: 1;
	text-align: right;
	margin-right: 15px;
	margin-left: 0;
}

.single-feature .media-body.text-left {
	flex-grow: 1;
	text-align: left;
	margin-right: 0;
}

/* sección contacto*/
#contact input::placeholder {
	color: var(--drakGray) !important;
}

#contact textarea::placeholder {
	color: var(--drakGray) !important;
}

.contact-info {
	padding: 1rem 2rem 1rem;
	border-radius: 8px;
	background: #7a60ff;
	background: linear-gradient(to left, #7a60ff, #cd9ffa);
}

.contact-item.media {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.contact-item.media .media-left {
	flex-shrink: 0;
	margin-right: 15px;
	font-size: 1.5em;
	color: white;
}

.contact-item.media .media-body {
	flex-grow: 1;
	text-align: left;
}

.contact-item {
	margin: 23px 0px;
}

.contact-item i {
	font-size: 20px;
}

.contact-item p {
	line-height: 20px;
	margin: 0;
}

.app-sing {
	margin-top: 111px;
	padding-bottom: 0 !important;
}







/*=========ALERTAS============*/
div:where(.swal2-container).swal2-backdrop-show,
div:where(.swal2-container).swal2-noanimation {
	z-index: 2200;
}

.detalleSesionModal {
	z-index: 2100;
}

.password-help_text{
	padding-left: 20px !important;
}

/*=========PRIMER NAVBAR (UNIVERSAL)============*/
/* nombre del usuaio de la sesion iniciada */
.dropdown-name{
	line-height: 1.5;
}
.menu-toggle-first{
	display: none;
}

.menuu ul{
	list-style-type: none;
	
}
.menuu > ul { display: flex !important; flex-direction: row; gap: 1.3rem; color: rgb(255, 255, 255);  list-style: none; font-weight: bold; font-size: 1.1rem; text-transform: uppercase;} 
.header-first{
	position: fixed; 
	top: 0;      
	right: 0;   
	width: 100%; 
	z-index: 2000;
}
.menuu{
	display:flex;
	background: linear-gradient(to left, #7a60ff, #cd9ffa);
	justify-content: center;
	padding-top: 30px;
	padding-bottom: 30px;
	align-items: center;
	gap: 40px;
}
.subtxt{
	padding-left: 0 !important;
	z-index: 2100;
}

.subtxt a:hover{
	color: var(--violet) !important;
}
/*===titutlo + logo===*/
.row-logo {
	margin-left: 50px !important;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}
.row-logo .white {
	text-align: left;
}
.logo-1 {
	width: 35%;
	max-width: 45%;
}
.white {
	color:var(--white) !important;
	margin-bottom: 0px !important;
}
.nav-link:hover{
	color: #5f0099;
}
/*===Dropdawn (secciones) para boton hamburguesa===*/
.block-none{
	display: none;
}

/*=========SEGUNDO NAVBAR (INSTITUCION - PROFESIONAL)============*/

.menu-toggle { display: none; } 
.menus { display: flex; width: auto;padding: 150px 0 50px 80px; margin-bottom: 20px; background: linear-gradient(to left, #7a60ff, #cd9ffa); } 

.menus ul{
	list-style-type: none;
	
}
.menus > ul { display: flex !important; flex-direction: row; gap: 1.3rem; color: rgb(121, 120, 120);  list-style: none; } 
.nav-item.dropdown { position: relative; border-bottom: none; } 
.navtwo-link { border-radius: 0.375rem;  transition: background-color 0.15s ease; border: 0.5px solid var(--lightGray); font-size: 1rem; color: var(--white); padding: 15px; } 
.navtwo-link:hover, .navtwo-link:focus{ background-color: #ffffff; color: var(--violet); } 
.submenu { padding: 10px; position: absolute; top: 100%; left: 0; min-width: 10rem; z-index: 1000; display: block; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease; background-color: var(--white); border-radius: 0.5rem; transform: translateY(10px); padding-left: 0; box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.288);} 
.submenu li{ font-size:1rem ; } 

.nav-item.dropdown:hover .submenu { opacity: 1; visibility: visible; transform: translateY(0);} 
.dropdown-item { padding: 0.7rem 1rem; font-size: 1rem; transition: background-color 0.15s ease; color: rgb(121, 120, 120); text-transform: capitalize;} 
.subtxt a .ri-circle-line{
	padding-right: 5px;
}
.ri-circle-line{ font-size: 0.5rem !important; } 
.dropdown-item:hover { color: var(--violet); background-color: transparent; } 

/*===titulos de pagina===*/
/* Contenedor Principal */
.page-titles-container {
    position: absolute;
    right: 110px;
    transform: translateY(-55px); 
    display: flex;
    align-items: center; 
    margin: 0;
    padding: 0; 
}
/* 2. Estilos del Texto */
.page-titles-container span,
.page-titles-container h1 {
    color: white;
    margin: 0;  
    padding: 0;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1;
}

/* 3. Estilo del Separador */
.page-title-separator {
    margin: 0 8px; 
}

/*===Responsividad titulo Terapeutas Chile===*/
@media (max-width: 530px){
	.txt-mobile{
		display: none;
	}
}

/* z-index del modal sesion-profesional */
#crearRegistroModal {
    z-index: 2300 !important;
}
.modal-backdrop {
    z-index: 2200 !important;
}
#verDetalleRegistroModal{
    z-index: 2300 !important;
}
/* Backdrop del modal */

/*===Responsividad menus===*/
@media (max-width: 1370px) {
.menus { display: flex; width: auto;padding: 110px 0 50px 20px; margin-bottom: 20px; background: linear-gradient(to left, #7a60ff, #cd9ffa); } 
.navbar-logo{
	display: none;
}
.navbar-collapse{
	display: none;
}

/*===menu hamburgesa===*/
.menu-toggle-first {
    position: relative; 
    display: flex;
    justify-content: center; 
    align-items: center;
    width: 100%;
    height: 100px;
    background: linear-gradient(to left, #7a60ff, #cd9ffa);
	padding-bottom: 20px;
	padding-top: 20px;
    padding-right: 60px; 
    padding-left: 60px; 
}
.ri-menu-line{
	filter: drop-shadow(2px 2px 2px rgb(39, 3, 75));
}
.mobile-menu-btn {
    position: absolute;
    right: 28px; 
    top: 49px;
    transform: translateY(-50%); 
    background: none;
    border: none;
    font-size: 2rem;
    color: #fff;
    margin: 0; 
    padding: 0;
    z-index: 2;
}
.blok-tittle-mobile {
    display: flex;
    margin: 0;
    padding: 0;
    gap: 15px; 
    flex-shrink: 0; 
}
.logo-mobile{
    height: 40px; 
    margin: 0; 
}
.txt-mobile {
	font-size: 1.7rem;
    padding: 0;
	margin-top: 5px;
}
.menuu{
	position: fixed;
    top: 70px;
	padding-top: 10px;
    right: 10px;
    transition: max-height 0.4s ease;
	display: none;
	background: #cd9ffa;	
	color: var(--white);
	z-index: 3000;
	border-radius: 14px;
	padding-bottom: 0;
}

.menuu.open{ display: flex;}
.menuu ul{ flex-direction: column;  list-style-type: none;}
.menuu >ul{ padding: 10px 20px 10px 10px; gap: 1px; display: flex; list-style: none; margin: 0;}
.menuu > ul > li{ position: relative;}
.menuu ul li:hover > a{	background-color: var(--white);	color: var(--violet);}
/*estilo texto*/
.navtree-link, .navtree-link-drop{
	padding: 10px 10px;
	font-size: 1rem ;
	text-transform: none;
	font-weight: normal;
}
.nav-link:focus{
	background: var(--white) !important;
	box-shadow: none !important;
}
.submenu{
    position: static !important;
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.5s ease;
	background: var(--white) !important;
}
.menuu li.dropdown:hover .submenu.subtxt {
    max-height: 300px; 
    padding-bottom: 10px;
}
.subtxt a {
    display: block; 
    padding: 15px 10px;
    margin-left: 0;
	text-transform: capitalize;
	color: rgb(121, 120, 120);
}
.subtxt a .ri-circle-line{
	padding-right: 5px;
}
.navtree-link{
border-radius: 0.375rem;  transition: background-color 0.15s ease; border: 0.5px solid var(--lightGray); font-size: 1rem; color: var(--white); margin-bottom: 19px;
}
.navtree-link:hover{ background-color: #ffffff; color: var(--violet); } 
.navtree-link-drop{
border-radius: 0.375rem;  transition: background-color 0.15s ease; border: 0.5px solid var(--lightGray); font-size: 1rem; color: var(--white);}

/*===titulos de pagina===*/
.page-titles-container {
	right: 40px; /* Reducir el margen en móviles */
}

/*===bloque de submenus===*/
.submenu-hori{
	display: block; 
    position: absolute !important;
    /* Aplicamos la lógica de ocultamiento/expansión de móvil */
    max-height: 0; 
    overflow: hidden; 
    padding-bottom: 0 !important;
    transition: max-height 0.5s ease;
    z-index: 2000;
}
.menus ul li:hover .submenu {
    max-height: 300px; /* Abierto al hacer hover */
    padding-bottom: 10px !important;
}

.submenu li{ font-size:1rem ; }

/*===Dropdawn (secciones) para boton hamburguesa===*/
.block-none{
	display: block;
}
.block-cnone{
	display: none;
}


}

@media (max-width: 870px){

	/*===Cuerpo===*/
/*.app-wrapper{
	se sube para que el titulo no tenga tanto espacio entre el cuerpo
	transform: translateY(-30px); 
}*/
/*===titulos de pagina===*/
.page-titles-container {
    transform: translateY(-35px); 
}

/*===fondo seccion navbar===*/
.line-maintwo {
	width: 100%;
	height: 230px;
	background: linear-gradient(to left, #7a60ff, #cd9ffa);
}
.perfil-privado .banner-text{
	margin: 0 ;
}
.perfil-privado h3{
	margin: 0;
}
/*===Bloque con submenus del navbar===*/
.menu-toggle {
	display: block;
	position: fixed;
	top: 25px;
	left: 30px;
	z-index: 2000;
	background: none;
	border: none;
	font-size: 2rem;
	color: #fff;
}
.menus{
	position: fixed;
    top: 70px;
	padding-top: 10px;
    left: 10px;
    transition: max-height 0.4s ease;
	display: none;
	background: #cd9ffa;	
	color: var(--white);
	z-index: 2000 !important;
	border-radius: 14px;
	padding-bottom: 0;
}
.modal-backdrop {
    z-index: 2100 !important; /* Más alto que el header y el menu-toggle */
}

.modal {
    z-index: 2200 !important; /* Más alto que el backdrop */
}

#crearRegistroModal, #verDetalleRegistroModal {
    z-index: 6210 !important;
}

.menus.open{ display: flex;}
.menus ul{ flex-direction: column;  list-style-type: none;}
.menus >ul{ padding: 10px 20px 10px 10px; gap: 1px; display: flex; list-style: none; margin: 0;}
.menus > ul > li{ position: relative;}

.menus ul li:hover .submenu{ max-height: 300px; opacity: 1;}
.submenu a:hover{ color: var(--violet);}

/* degrade para el boton de hamburguesa del segundo navbar */
.ri-menu-2-line{
	filter: drop-shadow(2px 2px 2px rgb(39, 3, 75));
}
.submenu-hori{
	display: block;
	position:static !important;
	margin-bottom: 10px;
}
/* eliminacion de iconos */
.ri-dashboard-line, .ri-user-line, .bi-briefcase{
	display: none;
}
}
/* ===DATATABLE=== */

/* --- (Botones inactivos) --- */
.pagi-perso .page-link {
    color: var(--dimViolet);              /* Color del texto (Gris oscuro) */
    background-color: var(--white);   /* Fondo (Blanco) */
    border-color: none;
}

/* --- (Cuando pasas el mouse) --- */
.pagi-perso .page-link:hover {
    color: var(--white);              /* Texto al pasar mouse (Blanco) */
    background-color: var(--lilac);   /* Fondo al pasar mouse (TU COLOR) */
    border-color: none;       /* Borde al pasar mouse (TU COLOR) */
}

/* --- ( página actual) --- */
.pagi-perso .page-item.active .page-link {
    background-color: var(--bluishViolet);   /* Fondo activo (TU COLOR) */
    border-color: none;       /* Borde activo (TU COLOR) */
    color: var(--white);              /* Texto activo (Blanco) */
}

/* --- (Botones flecha cuando no funcionan) --- */
.pagi-perso .page-item.disabled .page-link {
    color: var(--gray);              /* Texto gris claro */
    background-color: #f8f9fa;   /* Fondo gris muy claro */
    border-color: #dee2e6;
}
.txt-table{
	color:  var(--dimViolet);
}
/*========= AJUSTE DE TABLAS============*/
/* --- Titulos extensos de tabla 12-15 caracteres --- */
.text-truncate-custom {
    display: inline-block;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* añade los "..." automáticamente */
    vertical-align: middle;
    cursor: pointer;
}
/* --- se visualizan 5 filas --- */
.table-box {
    height: auto !important;
    max-height: 400px !important; 
    overflow-y: auto !important;
    display: block !important; 
}
/* Estilo para el contenedor del Tooltip */
.custom-tooltip .tooltip-inner {
    background: #8875e7 !important; /* Forzamos el color oscuro */
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 5px 10px !important;
    font-size: 0.85rem !important;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    opacity: 1 !important;
}
.custom-tooltip .tooltip-arrow::before {border-top-color: var(--bluishViolet) !important; /* Color de la flecha igual al fondo */}

/*=========REGISTRARSE============*/
/* Estilos para selección de rol */
.role-card {
	cursor: pointer;
	transition: all 0.3s ease;
	border: 2px solid transparent;
}
.role-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(0,0,0,0.1);
	border-color: #7a60ffba; 
}
.button-ligth{
	color: var(--white);
	background: #d1a2ffe1;
	height: 100%;
}
.button-ligth:hover{
	color: var(--white);
	background: #c690fc;
}
#id_password1.is-valid,
#id_password2.is-valid {
	border-color: #198754 !important;
	box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25) !important;
	background-image: none !important;
	padding-right: 2.5rem !important;
}
#id_password1.is-invalid,
#id_password2.is-invalid {
	border-color: #dc3545 !important;
	box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
	background-image: none !important;
	padding-right: 2.5rem !important;
}