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




*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	list-style-type: none;
	text-decoration: none;
	font-family: 'Poppins', sans-serif;
}


.cont_pendiente{
    position: relative;
}


.resumen{
	border:solid 1px green;
	margin: 5px 0px;
	padding: 5px 5px;
}

/* Contenedor principal */
.cont_view {
	margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Asegura que el contenido extra no se desborde */
    max-height: 500px; /* Altura máxima del contenedor */
    width: 100%; /* Ajuste al ancho disponible */
    border-radius: 10px; /* Bordes redondeados */
    background-color: #f1f1f1; /* Fondo neutral para resaltar la imagen */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para darle profundidad */
}

/* Imagen */
.view_adjunto {
    max-width: 100%; /* Limitar el ancho al tamaño del contenedor */
    max-height: 100%; /* Limitar la altura al tamaño del contenedor */
    width: auto; /* Permitir escalado horizontal */
    height: auto; /* Permitir escalado vertical */
    object-fit: contain; /* Ajustar la imagen sin recortar */
    border-radius: 8px; /* Bordes redondeados */
    transition: transform 0.3s ease; /* Transición suave al interactuar */
}

/* Hover para mejorar la experiencia */
.view_adjunto:hover {
    transform: scale(1.03); /* Efecto de zoom suave al pasar el cursor */
}


.content_button {
	display: flex;
    width: 100%; /* Ajuste al ancho disponible */
    justify-content: center;
    align-items: center;
	padding: 30px;
	
}

.content_button button{
	width: 50%;
	height: 50px;
	cursor: pointer;
	padding: 5px 10px;
	border-radius: 20px;
	transition: 100ms;
	margin-left: 20px;
	background-color: var(--main-color);
	box-shadow: 5px 5px 5px #999;
	color: #fff;
	border: 2px solid var(--main-color);
}

.content_button button:hover{
	background-color: #fff;
	color: var(--main-color);
	border: 2px solid var(--main-color);
}



.intermitente {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    
    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    
    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}


#myBar {
  width: 0%;
  height: 30px;
  background-color: var(--main-color);
  text-align: center; /* To center it horizontally (if you want) */
  line-height: 30px; /* To center it vertically */
  color: white;
}

.sidebar{
	width: 70px;
	position: fixed;
	left: 0;
	top: 0;
    bottom: 0;
	height: 100%;
	background: var(--main-color);
	z-index: 100;
	transition: all 300ms;
    overflow-y: auto;
}

.sidebar-brand{
	height: 90px;
	padding: 1rem 0rem 1rem 2rem;
	color: #fff;
}

.sidebar-brand span{
	display: inline-block;
	padding-right: 1rem;
}

.sidebar-menu{
	margin-top: 1rem;
}
.sidebar-menu li{
	width: 100%;
	padding-left: 1rem;
}

.sidebar-menu a{
	display: block;
	color: #fff;
	font-size: 1.1rem;
	padding: 1rem 0rem 1rem 1rem;
}

ul li.active a, ul li a:hover, ul li a:active,nav a.active{
	background: #fff;
	/*padding-left: 1rem;*/
	color: var(--main-color);
	border-radius: 30px 0px 0px 30px;
}


.sidebar-menu a span:first-child{
	font-size: 1.5rem;
	padding-right: 1rem;
}


#nav-toggle:checked + .sidebar {
	width: 70px;
}

#nav-toggle:checked + .sidebar .sidebar-brand,
#nav-toggle:checked + .sidebar li {
	padding-left: 1rem;
	text-align: center;
}

#nav-toggle:checked + .sidebar li a {
	padding-left: 0rem;
}


#nav-toggle:checked + .sidebar .sidebar-brand h2 span:last-child,
#nav-toggle:checked + .sidebar li a span:last-child {
	display: none;
}

#nav-toggle:checked ~ .main-content{
	margin-left: 70px;
}

#nav-toggle:checked ~ .main-content header{
	width: calc(100% - 70px);
	left: 70px;
}


.main-content{
	transition: all 300ms;
	margin-left: 70px;
}

/*
.contenedor_busqueda_lead{
	display: flex;
	z-index: 100;
}
*/

header{
	background: #fff;
	display: flex;
	justify-content: space-between;
	padding: 1rem 1.5rem;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	position: fixed;
	left: 70px;
	width: calc(100% - 70px);
	top: 0;
	z-index: 100;
	transition: all 300ms;	
}

header h2{
	color: #222;
}

header label span {
	/*font-size: 1.7rem;*/
	padding-right: 1rem;
}




.search-wrapper{
	border-radius: 30px;
	height: 35px;
	display: flex;
	align-items: center;	
	background-color: var(--fondo_gris);
}

.search-wrapper span{
	display: inline-block;
	padding: 0rem 1rem;
	font-size: 1.5rem;
}

.search-wrapper input{
	width: 100%;
	height: 100%;
	padding: .3rem;
	border: none;
	outline: none;
	background-color: transparent;
	font-size: 16px !important;

}

.user-wrapper{
	display: flex;
	align-items: center;
	cursor: pointer;
}


.user-wrapper .cont_foto{
	margin: auto;
	width: 40px;
	height: 40px;
	position: relative;
	overflow: hidden;
	border-radius: 50%;
	display: flex;
	align-items: center;
	margin-right: 1rem;

}

.user-wrapper img{
	display: inline;
	margin: 0 auto;
	width: 40px;
	height: 40px;
	width: auto;
}

.user-wrapper small{
	display: inline-block;
	color: var(--text-grey);
}

body{
	
	background: #f1f5f9;
}

main{
	margin-top: 0px!important;
	background: #f1f5f9;
}


/*
	CSS CHATS
*/

.cont_iconos {
    display: flex;
	flex-wrap: nowrap;
    align-items: center; /* Centra los elementos verticalmente */
    gap: 10px; /* Espaciado entre los elementos */
}


.ico_menu{
	font-size: 25px;
	margin: 0px 10px;
	float: right;
}

#errores_import{
	font-size: 10px;


}


.estado_reloj{
	font-size: 15px;
	float: right;
	color: #fff;
	background-color: transparent;
}


.estad_visto_gris{
	font-size: 15px;
	float: right;
	color: #fff;
	background-color: transparent;
}

.estad_visto_verde{
	display: flex;
	font-size: 15px;
	float: right;
	color: #00f531;
	background-color: transparent;

	width: auto;
	float: right;
	justify-content: right;
	text-align: right;
}

.chat_data{
	color: var(--textMsgOutDate);
	font-size: 10px;
	margin-right: 10px;

}


.ico_menu:hover{
	color: var(--main-color);
	background-color: white;
	border-radius: 20px;
	cursor: pointer;
}

.sync {
    transition: color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}


.sync.spin {
    animation: spin 1s infinite linear;
    color: var(--main-color);
}



/* Animación de rotación */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.contenedor_chats{
	position: absolute;
    left: 0;
    right: 0;
    min-height: 100%;
	
}

.contenedor_embudo{
	position: absolute;
	top: 50px;
    left: 65px;
    right: 0;
	
}


.chat-list {
	overflow-y: scroll;
  }

.contenedor_chats .chats{
	left: 70px;
	position: fixed;
    display: flex;
	height: 100%;
    flex-direction: column;
    width: auto;
    min-width: 230px;
    z-index: 99;
	
	background-color: #fff;
	
}


.estado {
    font-size: 14px;
    margin-left: 5px;
    vertical-align: middle;
}

.estado.reloj {
    color: gray;
}

.estado.enviado {
    color: gray;
}

.estado.entregado {
    color: gray;
}

.estado.visto {
    color: green;
}

.estado.reproducido {
    color: blue;
}

.estado.desconocido {
    color: red;
}



.conversaciones{
    position: absolute;
    left: 0;
    top: 66px;
    right: 0;
    bottom: 73px;
	overflow-y: scroll;
	z-index: 99;
}

.conversaciones .seleccionar_hilo{
	display: flex;
    width: 100%;
	justify-content: center;
}

.convesaciones_head{
	height: 70px!important;
	z-index: 152;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
	background-color: var(--main-color);
	display: flex;
	padding: 8px;
	color: white;
	align-items: center;
}

.convesaciones_head .nombre_estado{
	width: 100%;
	margin: 0px 10px;
	cursor: pointer;
}

.convesaciones_head .head_anotacion{
	margin: 0px 10px;
	cursor: pointer;
	width: 100%;
}

.convesaciones_head .head_anotacion select{
	font-size: 12px;
	float: right;
	box-shadow: 1px 1px 5px rgb(0 0 0 / 50%);
	border-radius: 50px;
	padding: 5px 10px;
	background-color: var(--main-color);
	color: white;
	margin-top: 12px;
}

.head_anotacion:hover{
	cursor: pointer;
}

.convesaciones_head .ultimated_anot{
	font-size: 12px;
	float: right;
	box-shadow: 1px 1px 5px rgb(0 0 0 / 50%);
	border-radius: 50px;
	padding: 5px 10px;
}



.convesaciones_footer{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
	overflow-y: scroll;
	overflow: visible !important;
	background-color: var(--main-color);
	display: flex;
	padding: 8px 15px 20px 15px;
	z-index: 148;
}



.contenedor_chats .respuestas_rapidas{
	max-height: 150px;
	overflow-y: auto;
    position: absolute;
    left: 366px;
    right: 0;
    bottom: 73px;
	overflow-y: scroll;
	background-color: #FFD3F3;
	display: flex;
	z-index: 1000;
}


.quick-reply-button.selected {
    background-color: #4CAF50; /* Color de fondo cuando está seleccionado */
    color: white; /* Color del texto cuando está seleccionado */
    border: 2px solid #3e8e41; /* Borde cuando está seleccionado */
}


.quick-reply-button {
    display: block;
	height: 50px;
	overflow: hidden;
    width: 100%;
    padding: 8px;
    text-align: left;
    cursor: pointer;
    border: none;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
}

.quick-reply-button:hover,
.quick-reply-button.active {
    background-color: #007BFF;
    color: white;
}





.convesaciones_footer input{
	float: left;
	width: 100%;
	padding: 8px;
	border-radius: 10px;
	border-style: none;
	
}
.convesaciones_footer .btn_enviar{
	float: right;
	width: auto;
	color: white;
	font-size: 30px;
	padding: 0px 10px;
	
}

.convesaciones_footer .btn_enviar:hover{	
	color: #333;

}

.convesaciones_footer .btn_adjunto{
	float: right;
	width: auto;
	color: white;
	font-size: 30px;
	padding: 0px 10px 0px 0px;
	
}

.convesaciones_footer .btn_adjunto{
	float: right;
	width: auto;
	color: white;
	font-size: 30px;
	padding: 0px 10px 0px 0px;
	
}

.convesaciones_footer .text_mensaje{
	background-color: white;
	height: 40px;
	min-height: 40px;
	max-height: 100px;
	min-width: auto;
}

.convesaciones_footer .btn_adjunto:hover{
	color: #444;
	cursor: pointer;
	
}

.hide {
	display: none;
}
.file_upload {
	cursor: pointer;
}


.conversaciones .contenedor_conversaciones{
	padding-right: 9%;
    padding-left: 9%;

}

.conversaciones .modulo_in{
	width: 100%;
	display: flex;
	align-content: flex-start;
	justify-content: flex-start;

	padding: 10px; /* Espaciado interno */
	border-radius: 10px; /* Bordes redondeados */
	
	word-wrap: break-word; /* Rompe palabras largas si es necesario */

}

.conversaciones .modulo_out{
	width: 100%;
	display: flex;
	align-content: flex-end;
	justify-content: flex-end;

	padding: 10px; /* Espaciado interno */
	border-radius: 10px; /* Bordes redondeados */
	
	word-wrap: break-word; /* Rompe palabras largas si es necesario */




}


.msg-content{
    border-radius: 10px; /* Bordes redondeados */
    white-space: pre-wrap; /* Asegura que respete los saltos de línea */
    
    font-size: 14px; /* Tamaño de texto */
    max-width: 90%; /* Limitar el ancho del mensaje */
    word-wrap: break-word; /* Rompe palabras largas si es necesario */
}

.cont-responder{
    border-radius: 10px; /* Bordes redondeados */
    font-size: 14px; /* Tamaño de texto */
	background-color: rgba(0, 0, 0, 0.1); /* Fondo negro con opacidad 50% */
	padding: 10px;
	margin-bottom: 10px;

}

.title-responder{
    font-weight: 900;
}



.msg-responder{
    font-size: 10px;
	color: #666;

}



.img_media_res{
	display: flex;
	align-items: center;
    width: 100%; /* Limitar el ancho del mensaje */
}







.conversaciones .msg{
	margin: 2px;
	padding: 5px;
	box-shadow: 1px 1px 5px rgb(0 0 0 / 10%);
	flex-wrap: wrap;


	padding: 10px; /* Espaciado interno */
	border-radius: 10px; /* Bordes redondeados */
	
	word-wrap: break-word; /* Rompe palabras largas si es necesario */
}
.conversaciones .msg .message{
	width: 100%;

	border-radius: 10px; /* Bordes redondeados */
    white-space: pre-wrap; /* Asegura que respete los saltos de línea */
    
    font-size: 14px; /* Tamaño de texto */
    max-width: 90%; /* Limitar el ancho del mensaje */
    word-wrap: break-word; /* Rompe palabras largas si es necesario */
	
}

.conversaciones .img_media{
	height: 100%;
	display: flex;
	align-items: center;
    width: 100%; /* Limitar el ancho del mensaje */
	float: left;
}

.conversaciones img,
.conversaciones video,
.conversaciones iframe{
	margin: auto;
	max-height: 400px;
	max-width: 400px;
	position: relative;
	overflow: hidden;
	align-items: center;
	object-fit: contain;

}


.boton{
	width: 100%;
	cursor: pointer;
    padding: 10px 0px 10px 0px;
    border-radius: 20px;
    background-color: #fff;
    color: var(--main-color);
    border: 2px solid var(--main-color);
    transition: 100ms;
}



.conversaciones .msg-in{
	border-radius: 5px 5px 5px 0px;
	max-width: 60%;
	flex-wrap: wrap;
	height: 100%;
	background-color: white;

	padding: 10px; /* Espaciado interno */
	border-radius: 10px; /* Bordes redondeados */
	
	word-wrap: break-word; /* Rompe palabras largas si es necesario */
}


.conversaciones .msg-out{	
	border-radius: 5px 5px 5px 0px;
	max-width: 60%;
	flex-wrap: wrap;
	height: 100%;
	background-color: var(--main-color);
	color: var(--textMsgOut);

	padding: 10px; /* Espaciado interno */
	border-radius: 10px; /* Bordes redondeados */
	
	word-wrap: break-word; /* Rompe palabras largas si es necesario */

}	

.conversaciones .msg-foot{	
	width: 100%;
	display: flex;
	padding: 5px 0px;
}	

.conversaciones .msg-status{	
	color: #555;
    font-size: 10px;
	float: left;
}

.conversaciones .msg-responsable{	
	position: relative;
	color: #555;
	display: flex;
    font-size: 10px;
	float: left;
	right: -10px;
	padding-top: 10px;
}	

.conversaciones .msg-origen{	
	color: #555;
    font-size: 10px;
	font-weight: 900;
	float: left;
}	



.cont_anotaciones {
    position: fixed;
    top: 130px;
    right: 0; /* Anclado al lado derecho */
    z-index: 99;
    transition: transform 0.3s ease-in-out; /* Suavidad al abrir/cerrar */
    transform: translateX(100%); /* Oculto fuera de la vista */
    width: auto; /* El ancho se ajusta al contenido */
    max-width: 300px; /* Máximo ancho */
}

.cont_anotaciones.open {
    transform: translateX(0); /* Visible */
}



.const_new_anotacion{
	display: flex;
	width: 100%;
}

.const_new_anotacion input{
	float: left;
	width: 100%;
	height: 35px;
	padding: 0px 10px;
	border-radius: 30px;
	border-style: none;
	font-size: 16px;
}

.const_new_anotacion button{
	float: right;
	padding: 5px 5px!important;
	margin-left: 10px!important;
	width: 100px;
	border-radius: 30px;
	background-color: var(--main-color);
	color: #fff;
	border-style: none;
}

.const_new_anotacion button:hover{
	cursor: pointer;
	box-shadow: 1px 1px 1px #999;
}


.contenedor_anotaciones{
	width: 100%;
}

.info_chat{
	width: 100%;
	transition: all 300ms;
	background-color: white;
	position: fixed;
	right: 0px;
	left: 100%;
	top: 67px;
    bottom: 0;
	height: auto;
	z-index: 99;
    overflow-y: auto;

}

.item_chat{
	width: 100%;
	display: flex;
	padding: 5px;
}

#datos_lead_modal{
	padding: 20px;
}
.info_chat .info_item{
	margin-bottom: 10px;
}

.info_chat .info_item select,
.info_chat .info_item input{
	width: 100%;	
	height: 35px;
	padding: 5px;
	border-radius: 5px;
}

.add_dis{
	width: 100%;
	display: flex;
	padding: 5px;
	margin: 5px 0px;
	border-radius: 1px;
	box-shadow: 1px 1px 8px rgba(0, 0, 0, .1);
	align-items: center;
	color: darkgray;
	width: 100%;
	text-align: center;
	justify-content: center;
	font-weight: 100;
	opacity: 0;
	transition: all 200ms;
	
  }

  .add_dis span{
	font-size: 25px;
	margin-left: 10px;
  } 
  
  .add_dis:hover{
	cursor: pointer;
	opacity: 1;
  } 



.item_chat:hover{
	background-color: #FCF4FF;
}

.item_chat a{
	text-decoration: none!important;
}

.item_chat a:active,
.item_chat a:visited
{
	color: #222;
}


 .chat_img{
	width: 50px;
	display: flex;
	align-items: center;
	float: left;
}

.chat_img img{
	margin: auto;
	width: 40px;
	position: relative;
	overflow: hidden;
	border-radius: 50%;	
	align-items: center;
}

.chats .item_chat a{
    width: 100%;
	padding: 10px;
}

.chats .item_chat a{
    width: 100%;
	padding: 10px;
}

.config_embud{
	width: auto!important;
}


.icono{
	
	margin: 0px;
	font-size: 30px;
	position: relative;
	overflow: hidden;
	border-radius: 50%;	
	align-items: center;
	color: var(--main-color);
	padding: 5px 0px;
}


.botones_accion {
	width: 100%;
	display: flex;
	justify-content: center; /* Centra los elementos horizontalmente */
	flex-wrap: wrap;

}

.boton_accion {
	flex-direction: column;
	display: flex;
	align-items: center; /* Centra verticalmente el contenido */
	justify-content: center; /* Centra horizontalmente el contenido */
	width: 100px; /* Ancho deseado para cada botón */
	height: 100px;
	margin: 10px;
	border-radius: 20px; /* Se cambia de 30px a 50% para hacer un círculo */
	background: var(--main-color);
	transition: transform 0.3s ease; /* Agrega una transición suave en la propiedad transform */

}

.corto{
	width: 70px!important;
	background-color: transparent!important;
}

.icon_nombre{
	font-size: 12px;
	color: white;
}

.icono_canal{
	color: var(--main-color);
	font-size: 30px;
	padding: 10px;

}


.boton_accion:hover {
	cursor: pointer;
	transform: translateY(-5px); /* Desplaza el botón hacia arriba cuando se hace hover */

}

.boton_accion i {
	font-size: 50px; /* Tamaño del icono */
	color: white; /* Color del icono */
}


.item_chat .info_contact{
	width: 100%;
    padding: 10px;
}

.item_chat .info_contact .contact_head{	
	display: flex;
    align-items: center;
    line-height: normal;
}

.item_chat .info_contact .contact_name{
	float: left;
	font-weight: 900;
	color: #222;
	flex-wrap: nowrap;
    align-self: flex-start;	
	justify-content: center;
	width: 180px;
	overflow: hidden;
}

.item_chat .info_contact .emb_nom{
	float: left;
	font-weight: 900;
	color: #222;
	display: flex;
	justify-content: center;
	width: 100%;
	overflow: hidden;
}

.item_chat .info_contact .em_nombre{
	width: 100%;
	float: left;
}

.item_chat .info_contact .em_cant{
	width: auto;
	float: right;
}

.item_chat .info_contact .contact_name input{
	float: left;
	font-weight: 900;
	color: #222;
	flex-wrap: nowrap;
    align-self: flex-start;	
	justify-content: center;
	width: 180px;
	overflow: hidden;
	border-style: none;
}


.contact_date{
	display: flex;
	width: auto;
	font-weight: 100;
	right: 20px;
	color: #999;
	font-size: 10px;	
	float: right;
	justify-content: right;
	text-align: right;
}



.mensajes_pendientes{
	display: block;
	width: 100%!important;
	text-align: left;
	font-weight: 100;
	color: #999;
}



.mensajes_pendientes .tarjeta_msg{   
	width: fit-content;        
	margin-right: 10px;
	border-radius: 10px;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
	padding: 1px 6px;
	margin-bottom: 10px;
	font-size: 10px;
	align-content: center;
	margin-top: 10px;
	background-color: red;
	color: white;
	float: right;

}

.tarjeta_anot{   
	width: fit-content;        
	margin-right: 10px;
	border-radius: 10px;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
	padding: 3px 5px;
	margin-bottom: 10px;
	font-size: 10px;
	align-content: center;
	margin-top: 10px;

}

.anotaciones{
	display: block;
	width: 100%!important;
	text-align: left;
	font-weight: 100;
	color: #999;
}


.item_chat .info_contact .contact_msg{
	color: #555;
	font-weight: 100;
	font-size: 12px;

}




/*Indice notificacion de seguimientos*/
.notificacion-cont{
	float: right;
	margin-right: 8px;
}

.notificacion-cont #notificacion{
    background: radial-gradient( 5px -9px, circle, white 8%, red 26px );
    background-color: red;
    border-radius: 12px; /* one half of ( (border * 2) + height + padding ) */
    box-shadow: 1px 1px 1px black;
    color: white;
    font: bold 10px/13px Helvetica, Verdana, Tahoma;
    height: 16px; 
    min-width: 14px;
    padding: 4px 3px 3px 3px;
    text-align: center;

}

.cards{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 2rem;
	margin-top: 1rem;
}

.card-single{
	display: flex;
	justify-content: space-between;
	background: #fff;
	padding: 2rem;
	border-radius: 2px;
}

.card-single div:last-child span{
	font-size: 3rem;
	color: var(--main-color);
}

.card-single div:first-child span{
	color: var(--text-grey);
}

.card-single:last-child{
	background: var(--main-color);
}

.card-single:last-child h1,
.card-single:last-child div:first-child span,
.card-single:last-child div:last-child span{
	color: #fff;
}

/*TABLAS*/

.recent-grid{
	margin-top: 3.5rem;
	display: grid;
	grid-gap: 2rem;
	grid-template-columns: 65% auto;
}

.card{
	background: #fff;
	border-radius: 5px;
}

.card-header,
.card-body {
	padding: 1rem;
}

.card-header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #f0f0f0;
}

.card-header button{
	background: var(--main-color);
	border-radius: 10px;
	color: #fff;
	font-size: .8rem;
	padding: .5rem 1rem;
	border: 1px solid var(--main-color);
}

/*	HOVER DESCRIPCION */


.middle {
	transition: .5s ease;
  position: absolute;
	top: -100%;
	left: 50%;
	width: 300px;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	text-align: center;
	visibility: collapse;
	display: none;
	z-index: 1000;	

}


.cont_pendiente {
	transition: .5s ease;
   position: absolute;
	top: -28%;
	left: 90%;
	width: 20px;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	text-align: center;
	visibility: visible;
	display: block;
	z-index: 100;	
}


.cont_pendiente label{
    color: black;
    font-size: 8px;
    margin: 0px;
    
}

.triangulo{
    clip-path: polygon(50% 100%, 100% 0, 0 0);
    height: 10px;
    width: 20px;
    background: red;  
    
}



.descipcion {
	background: rgba(76,76,76,1);
background: -moz-linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 47%, rgba(52,63,79,1) 61%, rgba(17,17,17,1) 65%, rgba(43,43,43,1) 76%, rgba(18,50,66,1) 91%, rgba(19,19,19,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(76,76,76,1)), color-stop(12%, rgba(89,89,89,1)), color-stop(25%, rgba(102,102,102,1)), color-stop(39%, rgba(71,71,71,1)), color-stop(47%, rgba(44,44,44,1)), color-stop(61%, rgba(52,63,79,1)), color-stop(65%, rgba(17,17,17,1)), color-stop(76%, rgba(43,43,43,1)), color-stop(91%, rgba(18,50,66,1)), color-stop(100%, rgba(19,19,19,1)));
background: -webkit-linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 47%, rgba(52,63,79,1) 61%, rgba(17,17,17,1) 65%, rgba(43,43,43,1) 76%, rgba(18,50,66,1) 91%, rgba(19,19,19,1) 100%);
background: -o-linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 47%, rgba(52,63,79,1) 61%, rgba(17,17,17,1) 65%, rgba(43,43,43,1) 76%, rgba(18,50,66,1) 91%, rgba(19,19,19,1) 100%);
background: -ms-linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 47%, rgba(52,63,79,1) 61%, rgba(17,17,17,1) 65%, rgba(43,43,43,1) 76%, rgba(18,50,66,1) 91%, rgba(19,19,19,1) 100%);
background: linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 47%, rgba(52,63,79,1) 61%, rgba(17,17,17,1) 65%, rgba(43,43,43,1) 76%, rgba(18,50,66,1) 91%, rgba(19,19,19,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=1 );
	
	color: #ebebeb;
	font-size: 16px;
	padding: 16px 32px;
	  border-radius: 0.5em;
}

.titulo_style{
	color: white;

}

.imagenyeah1:hover .middle{
	visibility: visible;
	display: block;
}


.imagenyeah1{
	cursor: pointer;
}


table{
	border-collapse: collapse;
}

thead tr{
	border-top: 1px solid #f0f0f0;
	border-bottom: 2px solid #f0f0f0;
}

thead td{
	font-weight:700;
}

td{
	padding: .5rem 1rem;
	font-size: .9rem;
	color: #222;
}

tbody .por_vencer{
	color: #E2840D;
	font-weight: 700;
}

tbody .vencido{
	color: #F30030;
	font-weight: 700;
}

tbody .vigente{
	color: #00C117;
	font-weight: 700;
}


td a{
	background: var(--main-color);
	color: #fff;
	padding: 5px;
	border-radius: 5px;
}

.table-responsive{
	width: 100%;
	overflow-x: auto;
}

.customer{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .5rem .7rem;
}

.info{
	display: flex;
	align-items: center;
}

.info img{
	border-radius: 50%;
	margin-right: 1rem;
}

.info h4 {
	font-size: .8rem;
	font-weight: 700;
	color: #222;
}

.info small{
	font-weight: 600;
	color: var(--text-grey);
}

.contact span{
	font-size: 1.2rem;
	display:  inline-block;
	margin-left: .5rem;
	color: var(--main-color);
}

/*Tarjeta Seguimientos*/
.cont_seguimientos{
	background-color: #fff;
	padding: 5px;
	border-radius: 5px;
	border: 2px solid var(--main-color);
	margin-bottom: 5px;
}

.cont_seguimientos .row_head{
	width: 100%;
	display: flex;
	border-bottom: 1px solid #FFB2DD;
}

.cont_seguimientos .row_head span.fecha_seguimiento{
	/*background-color: var(--main-color);*/
	color: #fff;
	padding: 5px 5px 5px 5px;
	border-top-left-radius: 5px;
}

.cont_seguimientos .row_head span:nth-child(2){
	width: 70%;
	border-right: 1px solid #FFB2DD;
	border-left: 1px solid #FFB2DD;
	padding: 5px 0px 5px 10px;
	color: var(--main-color);
}

.cont_seguimientos .row_head a{
	width: 10%;
	font-size: 20px;
	color: var(--main-color);
	cursor: pointer;
	text-align: center;
}

.cont_seguimientos .row_head a:hover{
	background-color: var(--main-color);
	color: #fff;
	border-radius: 0px 5px 0px 0px;
}

.cont_seguimientos .nombre span{
	padding-left: 5px;
	font-weight: 600;
}

/*Ventana Flotante*/

.modal{
  background-color: rgba(0,0,0,.7);
  position:fixed;
  z-index: 1000;
  top:0;
  right:0;
  bottom:0;
  left:0;
  transition: all 0.5s;
  opacity:0;
  pointer-events:none;
    overflow-x: hidden;
    overflow-y: auto;

}

.modal-contenido{
	background: #f1f5f9;
    width: 400px;
    margin: 10% auto;
    position: relative;
    border-radius: 5px;
	color: #222;
}

.modal-contenido.amplio{
    width: 850px;
    margin: 10px auto;
}


.modal-contenido .content_eliminar{
	padding: 20px;
	display: -block;
}

.modal-contenido .content_eliminar button{
	float: right;
	margin-left: 10px;
	padding: 3px 5px 3px 5px;
	border-radius: 5px;
	background-color: default;
	cursor: pointer;
  	border: 2px solid #333;
}

.eliminar_btn{
	background-color: var(--rojo);
	color: #fff;
  	border: 2px solid var(--rojo);
	padding: 2px 10px;
	border-radius: 5px;
	cursor: pointer;
}

.modal .modal-contenido .cerrar{
	display: inline-block;
	float: right;
	padding: 5px 10px 5px 10px;
	border-radius: 10px;
	color: #333;
	cursor: pointer;
	margin: 5px;
	font-weight: 700;
}

.en_uso {
    background-color: rgba(255, 0, 0, 0.2); /* Fondo rojo claro */
    border-left: 5px solid red; /* Indicador de chat en uso */
}


.cerrar_sesion{
	display: inline-block;
	float: right;
	padding: 5px 10px 5px 10px;
	border-radius: 10px;
	cursor: pointer;
	margin: 5px;
	font-weight: 700;
}

.modal .modal-contenido form{
	padding: 0px 10px 20px 10px;
}

.modal .modal-contenido label{
	font-size: 16px;
}

.modal .modal-contenido input{
	width: 100%;
	padding: 5px;
	border-radius: 5px;
	border-style: none;
    padding: 8px;
}

.modal .modal-contenido input[type="password"],
.modal .modal-contenido input[type="text"],
.modal .modal-contenido input[type="number"],
.modal .modal-contenido input[type="date"],
.modal .modal-contenido input[type="time"],
.modal .modal-contenido input[type="email"],
.modal .modal-contenido input[type="tel"],
.modal .modal-contenido input[type="color"]{
	background: #ccc;
}

.modal .modal-contenido input[type="submit"]{
	background: var(--main-color);
	cursor: pointer;
	color: #fff;
}

.modal .modal-contenido input[type="file"]{
	cursor: pointer;
	margin: 0px 0px 5px 0px;
}


.modal-contenido.amplio input[type="number"],
.modal-contenido.amplio select
{
    width: 60px;
    height: 20px;
    margin: 0px;
    padding: 0px 5px;
}

.modal-contenido.amplio input[type="date"]{
    margin-bottom: 5px !important;
}

.modal-contenido.amplio .cont_perdida{
	width: 100%;
    display: flex;
    margin: 5px 0px 5px 0px;
}

.modal-contenido.amplio .cont_perdida .cont_derecho label,
.modal-contenido.amplio .cont_perdida .cont_izquierdo label{
	display: inline-block;
	width: auto;
}

.modal-contenido.amplio .cont_perdida .cont_derecho{
	width: 50%;
    float: right;
}

.modal-contenido.amplio .cont_perdida .cont_izquierdo{
	width: 50%;
    float: left;
}

.modal-contenido.amplio .cont_perdida input[type="radio"]{
    width: 20px;
    cursor: pointer;

}


.modal-contenido .cont_tipo_contrato{
    padding: 10px;
    
}

.modal-contenido .tipo_contrato{
	width: 100%;
	color: #FFF;  
	border-radius: 5px;
	border: 2px solid var(--main-color);
    margin-top: 10px;
    padding: 10px;
    cursor: pointer;
	transition: all 300ms;
    
}

.modal-contenido .tipo_contrato:hover{
	box-shadow: 5px 5px 5px #999;
	/*transform: scale(1.1);*/
}

.modal-contenido h3{
	color: #222;    
    font-weight: 900;
}

.modal-contenido p{
	color: #222;    
}



/************************************************
 *                 ARRASTRAR Y SOLTAR
 ************************************************/
 
 .example-parent {
    color: black;
    display: flex;
    font-family: sans-serif;
    font-weight: bold;
}
  
.example-draggable {
    background-color: #4AAE9B;
    font-weight: normal;
    margin: 10px 0;
    padding: 10px;
    width: 100%;
    max-width: 400px; /* Limita el ancho máximo */
}
.content_embudo {
    flex-basis: 100%;
    flex-grow: 1;
    padding: 10px;
    display: flex;
    flex-direction: column; /* Encabezado arriba, dropzone abajo */
    min-width: 350px; /* Ancho mínimo */
    max-width: 400px; /* Ancho máximo */
    position: relative; /* Necesario para que sticky funcione */

    border: 0.5px solid #ccc;
}

/* Mantener el encabezado fijo verticalmente */
.content_embudo h3 {
    background-color: #fff; /* Fondo blanco para visibilidad */
    text-align: center; /* Centra el texto */
    padding: 10px 0; /* Espaciado interno */
    margin: 0; /* Sin margen */
    border-bottom: 2px solid #DFA612; /* Línea decorativa */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Sombra opcional */
    z-index: 1; /* Asegura que quede encima de otros elementos */
    position: sticky; /* Fija la posición */
    top: 70px; /* Se queda en la parte superior de la columna al desplazarse verticalmente */
}

/* Área de dropzone */
.dropzone {
    flex-grow: 1; /* Rellena el espacio restante */
    min-height: 100%; /* Asegura altura mínima */
    width: 100%; /* Ocupa todo el ancho de la columna */
}




  .content_embudo input{
	background-color: transparent;
	border-style: none;
	text-align: center;
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    border-bottom: 2px solid #DFA612;
	text-transform: uppercase;

  }

  .add_embudo{
	position: relative;
  }
  

  .seleccionado{
    transform: scale(1.02) rotate(-1deg);
  }


  .fantasma{
	border: 2px dotted var(--main-color);
  }
  
  .drag{
	opacity: 0.5;
  }



  .embudo{
	margin: 10px;
  }

  .embudo h3{
	text-align: center;
	border-bottom: 2px solid #DFA612;
  }

  .embudo .item_chat{
	margin: 5px 0px;
	border-radius: 3px;
	/*box-shadow: 1px 3px 5px rgba(0, 0, 0, .5);*/
	box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
	
    width: auto; /* Ocupa todo el ancho del contenedor */
  }

  .embudo .item_chat:hover{
	cursor: move;
  } 

  .embudo .item_chat:hover {
	box-shadow: 1px 3px 5px rgba(0, 0, 0, .5);
    transform: scale(1.05);
}




.btn_guardar {
	background-color: var(--main-color);
	border-style: none;
	padding: 0px 10px;
	border-radius: 5px;
	color: white;
	cursor: pointer;
  }

  .btn_guardar:hover {
	opacity: 0.9;
  }

  .btn_eliminar {
	background-color: red;
	border-style: none;
	padding: 0px 10px;
	border-radius: 5px;
	color: white;
	cursor: pointer;
	float: right;
  }

  .btn_eliminar:hover {
	opacity: 0.9;
  }


/* Elegir serie nueva- Cambio por Garantía*/

.modal-contenido #id_audifono,
.modal-contenido #id_audifono2,
.modal-contenido #id_receptor,
.modal-contenido #id_receptor2{ 
	border: 2px solid rgba(0,0,0,0); 
    margin: 5px 0px 5px 0px;
    border-radius: 5px;
    padding: 10px;  
    cursor: pointer!important;
}

.modal-contenido #id_audifono *,
.modal-contenido #id_audifono2 *,
.modal-contenido #id_receptor *,
.modal-contenido #id_receptor2 *{ 
    cursor: pointer!important;
}

.modal-contenido #id_audifono:hover,
.modal-contenido #id_audifono2:hover,
.modal-contenido #id_receptor:hover,
.modal-contenido #id_receptor2:hover{
	box-shadow: 5px 5px 5px #999;
}

.modal-contenido #value_serie_audifono,
.modal-contenido #value_serie_receptor,
.modal-contenido #value_serie_audifono2,
.modal-contenido #value_serie_receptor2{
	background-color: #ccc;
    padding-left: 10px;
    font-weight: 700;
}




.container{
	display: flex;
	flex-wrap: wrap;
	margin-left: 70px;
}

.card{	
	width: 300px;
	height: fit-content;
	margin: 10px;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 1px 3px 5px rgba(0, 0, 0, .5);
}






.add_control textarea{
	width: auto;
	border-radius: 5px;
	background: #ccc;
	border-style: none;
	padding: 5px;
}





.content_boton_nuevo{
	padding: 5px 10px;
	margin: 10px;
}

.boton_nuevo{
	width: 100%;
	max-height: 35px;
	cursor: pointer;
	padding: 5px 10px;
	border-radius: 20px;
	background-color: #fff;
	color: var(--main-color);
	border: 2px solid var(--main-color);
	transition: 100ms;
}

.lista_rap{
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	gap: 20px;
	border-radius: 10px;
}

.cont_respuesta{
	border-radius: 10px;
	max-width: 400px;
	padding: 5px;
	margin: 5px 0px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
}


.cont_respuesta:hover{
	box-shadow: 5px 5px 5px #999;
}

.cont_respuesta textarea{
	border-style: none;
	height: 150px;
	width: 100%;
	border-radius: 10px;
	background-color: rgb(230, 246, 255);
}	





/* Contenedor de checkboxes */
.embudos_checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

/* Label base */
.label_embudo_select {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 8px 12px;
    border-radius: 8px;

    font-size: 14px;
    font-weight: 500;

    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;

    cursor: pointer;
    user-select: none;

    transition: 
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.1s ease;
}

/* Hover */
.label_embudo_select:hover {
    background: #eef2f7;
    border-color: #cbd5e1;
}

/* Checkbox */
.label_embudo_select input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #2563eb; /* azul moderno */
    cursor: pointer;
}

/* Estado seleccionado */
.label_embudo_select:has(input[type="checkbox"]:checked) {
    background: #e0f2fe;
    border-color: #38bdf8;
    color: #075985;
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.5);
}

/* Checked hover */
.label_embudo_select:has(input[type="checkbox"]:checked):hover {
    background: #bae6fd;
}

/* Click feedback */
.label_embudo_select:active {
    transform: scale(0.97);
}








.cont_respuesta button{	
	margin: 10px;
	border-style: none;
}



.card .card-title{
	width: 100%;
	padding: 10px;
}

.card .card-body{
	padding: 10px;
	border-bottom: #ccc solid 1px;
}
.card .card-footer{
	padding: 10px;
	font-size: 10px;
}



/*CUMPLEAÑOS*/

#cumple_container{
	width: auto;
	margin: 0px 10px;
	box-shadow: 1px 3px 5px rgba(0, 0, 0, .5);
	border-radius: 10px 10px 0px 0px;
	position: fixed;
	bottom: 0;
	right: 15px;
	z-index: 9;
	color: white;
	font-family: '', cursive;
	padding: 5px 20px;
}

#cumple_lottie{
	width: auto;
	margin: 0px 10px;
	position: fixed;
	bottom: 0;
	right: 15px;
	z-index: 9;
	color: white;
	padding: 5px 20px;
}

#cumple_titulo{
	width: auto;
	margin: 0px 10px;
	box-shadow: 1px 3px 5px rgba(0, 0, 0, .5);
	border-radius: 10px 10px 0px 0px;
	background: var(--main-color);
	position: fixed;
	bottom: 0;
	right: 15px;
	z-index: 9;
	color: white;
	font-family: '', cursive;
	padding: 5px 20px;
}


/*CALENDARIO*/

.modal-contenido.medio{
    width: 600px;
    
}

.modal .modal-header{
	background: var(--main-color);
	padding: 15px 10px;
    color: #fff;
    display: flex;
    border-radius: 5px 5px 0px 0px;
    font-size: 20px;
}

.modal .modal-header button{
    position: absolute;
    right: 0;
    padding: 5px;
    margin: 13px;
    top: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 900;
    color: #ccc;
}

.typing_start_operador {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    background-color: var(--main-color);
    display: none; /* Oculto por defecto */
    padding: 20px 10px;
    z-index: 148;
    color: #fff;
    transition: opacity 0.3s ease-in-out;
}







.emoji-drawer {
    position: absolute;
    bottom: 80px; /* Eleva el drawer por encima del input */
    left: 10px; /* Ajusta la posición horizontal */
    
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    
    background: white;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    
    transition: opacity 0.2s ease-in-out;
    opacity: 0;
    pointer-events: none;
}

.las{
	cursor: pointer;
}

.emoji-drawer.visible {
    opacity: 1;
    pointer-events: auto;
}

.emoji {
    cursor: pointer;
    font-size: 20px;
    transition: transform 0.2s;
}

.emoji:hover {
    transform: scale(1.2);
}
















.modal .modal-header button:hover{
    color: #fff;
}


.modal .modal-body{
	background: white;
	padding: 10px;
	
}

.modal .modal-contenido input[type="color"]{
	width: 100%;
    padding: 0;
    border-radius: 0px 0px 5px 5px;    
    
}

.modal .modal-footer{
	background: white;
    border-radius: 0px 0px 5px 5px;	
    display: flex;
    margin: 10px;
    
}

.modal .modal-footer button{
    width: 80px;
    padding: 10px;  
    cursor: pointer;
    margin: 10px 5px;
}

/*Buscador de personas*/
#result,#result2,#result3,#result6,#result_doc,#result_edit {
    position: absolute;
    width: 100%;
    max-width:870px;
    cursor: pointer;
    overflow-y: auto;
    max-height: 400px;
    box-sizing: border-box;
    z-index: 1001;
    background-color:#fff;
    border-radius: 3px;
	/*box-shadow: 1px 1px 5px 3px rgba(0,0,0,0.2);*/
}

#result li,
#result2 li,
#result3 li ,
#result6 li,
#result_edit li,
#result_doc li{
    border-bottom: 1px solid #ccc;
    padding: 10px;
}

#busqueda_lead {
    top: 70px;
    position: absolute;
    width: 50%;
    overflow: hidden; 
    max-width: 600px;
    cursor: pointer;
    background-color:#fff;
    z-index: 1001;
    border-radius: 3px;
    box-sizing: border-box;
	/*box-shadow: 1px 1px 5px 3px rgba(0,0,0,0.2);*/
}

#busqueda_lead li {
    border-bottom: 1px solid #ccc;
    width: 100%;
    height: 50px;
    padding: 10px;
    overflow: hidden;
}


.link-class:hover{
    background-color:#f1f1f1;
}


.btn.btn-success{
    background: var(--main-color);
    color: #fff;
    border: none;
    border-radius: 5px; 
    float: right;   
}

.btn.btn-danger{
	border: 2px solid var(--main-color);
    color: var(--rojo);
    border-radius: 5px;    
    float: right;
}

.btn.btn-default{
	border: 2px solid 111;
    color: #111;
    border-radius: 5px;    
    float: right; 
}
.btn.btn-success:hover,
.btn.btn-danger:hover,
.btn.btn-default:hover{
    opacity: 0.9;    
}




.form-row {
    width: 100%;
    display: flex;
}

.form-row .col-mod-6{
    width: 50%;
    margin: 5px 5px;
}

.form-row .col-mod-12{
    width: 100%;
    margin: 5px 5px;
}

/*BLOQUEO DE MAYUSCULAS*/

#nombre,#nacionalidad,#ciudad,#direccion,#profesion,#nombre_facturado,#cotiz_nombre,#molde_nombre,#medida_nombre,#micro_nombre,#nombre_doctor,#txttitle{
	text-transform: uppercase;
}






.formulario .datos_personales .cont_checkbox{
	width: auto;
	background-color: var(--main-color);
	padding: 10px;
	border-radius: 10px;
	float: left;
	margin-right: 10px;
	color: #fff;
	display: flex;
}

.formulario .datos_personales .cont_tipo_contrato{
	width: auto;
	background-color: var(--main-color);
	padding: 10px;
	border-radius: 10px;
	float: left;
	margin-right: 10px;
	color: #fff;
	display: flex;
}

.formulario .datos_personales .cont_tipo_contrato span{
	width: auto;
}

.formulario .datos_personales .cont_tipo_contrato input{
    border: 0px;
    width: 20px;
    height: 1.5em;
    margin: 2px 10px 0px 5px !important;
    float: left;
}


.formulario .datos_personales .cont_checkbox input{
	float: left;
	width: 20px !important;
	margin: 8px 0px 0px 10px !important;

}

.formulario .datos_personales .cont_checkbox  label{
	float: left;	
	margin-bottom: 0px;	
	font-size: 16px;
}



.formulario .datos_personales .cont_factura:hover{
	background-color: #FF0F6A;
}

.formulario .datos_personales .cont_equipos:hover{
	background-color: #FF0F6A;
}

#input_referencia{
	display: none;
}

 .formulario{
	margin: auto auto auto auto;
	width: 100%;
	border-radius: 10px;

}

.Eliminar{
 	float: right;
 	background-color: red;
 	color: #fff;
 	padding: 5px 10px 5px 10px;
 	font-size: 15px;
 	border-radius: 5px;
 	cursor: pointer;
 	border-style: none;
}

.Seguimiento{
 	float: right;
 	background-color: #03C455;
 	font-size: 15px;
 	color: #fff;
 	padding: 5px 10px 5px 10px;
 	border-radius: 5px;
 	cursor: pointer;
 	border-style: none;
 	margin-right: 30px;
}

.Encuesta{
 	float: right;
 	background-color: var(--color-blue);
 	font-size: 15px;
 	color: #fff;
 	padding: 5px 10px 5px 10px;
 	border-radius: 5px;
 	cursor: pointer;
 	border-style: none;
 	margin-right: 30px;
}



 .formulario .datos_personales{
	width: 100%;
}

 .formulario .datos_personales form{
	flex-wrap: wrap;
	margin-bottom: 20px;
}

 .formulario .datos_personales form h2{
	display: block;
	width: 100%;
}


/*Resultados de Exámen*/

 .formulario .datos_personales form .resultados_examen{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin-top: 10px;
}


 .formulario .datos_personales form .Hipoacusia{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

 .formulario .datos_personales form .linea{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
 	height: 2px;
 	background-color: #666;
}

 .formulario .datos_personales form .t_perdida_auditiva{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin-top: 15px;
}


 .formulario .datos_personales form .bloque_1 .b1_s2{
	float: left;
	width: 50%;
}

 .formulario .datos_personales form .bloque_1 .b1_s2_larga{
	float: left;
	width: 100%;
}

 .formulario .datos_personales form .bloque_1 .b1_s3{
	float: right;
	width: 50%;
}

 .formulario .datos_personales form .bloque_3 .izq{
	background-color: #3d4dff;
	border-radius: 5px;
	color: #fff;
	font-size: 14px;
	padding: 10px 20px 10px 20px;
}

 .formulario .datos_personales form .bloque_2 .derecho{
	padding: 5px;
	background-color: var(--rojo);
	border-radius: 5px;
	color: #fff;
	font-size: 14px;
	padding: 10px 20px 10px 20px;
}


 .formulario .datos_personales form .bloque_1 input[type=radio]{
	width: 20px;
	display: inline-flex;
}
 .formulario .datos_personales form .bloque_2 input[type=radio]{
	width: 20px;
	display: inline-flex;
}

 .formulario .datos_personales form .bloque_3 input[type=radio]{
	width: 20px;
	display: inline-flex;
}


/* INTERRUPTOR SMS*/


.estado {
	color: var(--naranja);
	font-weight: 600;
    transition: .5s;
}

.cont_check_bonito{
    display: flex;
}

.contenedor_checkbox {
	margin-left: 20px;
	display: inline-flex;
	width: 40px;
    height: 20px;
    transform: translate(-50%,-9%);
}


.checkbox {
    width: 40px;
    -webkit-appearance: none;
    outline: none;
    border-radius: 50px;
    box-shadow: inset 0 0 5px rgba(0,0,0,.2);
    transition: .5s;
    cursor: pointer;
}  

.checkbox[type="checkbox"]:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    top: 0;
    left: 0;
    background: #fff;
    transform: scale(1.1);
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
    transition: .5s;
    background-color: var(--naranja);
    
    
}

.checkbox:checked[type="checkbox"]:before{
    left: 20px;	
    background-color: var(--verde);
}


/* FIN INTERRUPTOR SMS*/


.foto_redonda {
    margin: auto;
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.foto_redonda img {
    width: 100%;
    object-fit: cover;
    display: block;
}

/* PERFIL */



.formulario .form_perfil .cont_foto{
	margin: auto;
	width: 200px;
	height: 200px;
	position: relative;
	overflow: hidden;
	border-radius: 50%;
	display: flex;
	align-items: center;

}

 .formulario .form_perfil img{
    display: inline;
    margin: 0 auto;
    width: 200px;
    height: 200px;
    width: auto;
}

.formulario .form_perfil img:hover{
 	opacity: 0.7;
 	cursor: pointer;
}

 .formulario .form_perfil{
 	margin: auto;
 	max-width: 500px;
	justify-content: center;
	align-items: center;
	color: #333;
}


 .formulario .form_perfil input{
 	width: 100%;
 	border-radius: 5px;
	background: #ccc;
	border-style: none;
	padding: 10px;
}

 .formulario .form_perfil input[type=submit]{
	cursor: pointer;
	padding: 10px 0px 10px 0px;
	border-radius: 20px;
	background-color: #fff;
	color: var(--main-color);
	border: 2px solid var(--main-color);
	transition: 100ms;
}

 .formulario .form_perfil input[type=submit]:hover{
	background-color: var(--main-color);
	box-shadow: 5px 5px 5px #999;
	color: #fff;
}

 .formulario .datos_personales .bloque_1{
	width: 33%;
	float: left;
	padding: 10px;
	border-radius: 10px;
}

 .formulario .datos_personales .bloque_2{
	width: 32%;
	padding: 10px;
	float: left;
	background-color: #fff;
	border-radius: 10px;
}

 .formulario .datos_personales .bloque_3{
	width: 35%;
	padding: 10px;
	float: right;
	border-radius: 10px;
}

/*SEGUIMIENTOS WHATSAPP Y LLAMADA*/

 .formulario .datos_personales .bloque_3 a{
	text-decoration: none;
	color: #fff;

}


 .formulario .datos_personales .bloque_3 .whatsapp{
 	background-color: #01e675;
 	padding: 5px 10px 5px 10px;	
 	border-radius: 5px;
 	float: left;	
}

 .formulario .datos_personales .bloque_3 .llamar{
 	background-color: #333;
 	padding: 5px 15px 5px 15px;
 	border-radius: 5px;
 	float: right;	
}



/* FICHA AUDIOLOGICA*/
 .formulario .datos_personales .cont_ficha{
 	display: inline-block;
	width: 100%;
	padding: 10px;
}

 .formulario .datos_personales .cont_ficha .cont_datos_ficha .cont_motivo{
	display: flex;
}

 .formulario .datos_personales .cont_ficha .cont_datos_ficha .cont_motivo .titulo_label{
     width: 700px;
}

.formulario .datos_personales .cont_ficha .tabla1{
	width: 10%;
	float: left;
	padding: 10px;
	border-radius: 10px;
}

.formulario .datos_personales .cont_ficha .tabla2{
	width: 45%;
	padding: 10px;
	float: left;
	background-color: #fff;
	border-radius: 10px;
}

 .formulario .datos_personales .cont_ficha .tabla3{
	width: 45%;
	padding: 10px;
	float: right;
	background-color: #fff;
	border-radius: 10px;
}

.formulario .datos_personales .cont_ficha .tabla_ref{
	width: 33%;
	float: left;
	padding: 10px;
	border-radius: 10px;
}

.formulario .datos_personales .cont_ficha .tabla_cotizacion_ancha{
	width: 27%;
	float: left;
	padding: 10px;
	border-radius: 10px;
}

.formulario .datos_personales .cont_ficha .tabla_cotizacion_corta{
	width: 15%;
	float: left;
	padding: 10px;
	border-radius: 10px;
}

 .formulario .datos_personales .cont_ficha .tabla1 label, .tabla2 label, .tabla3 label{
     font-size: 14px;
     font-weight: 600;
}

  .formulario .datos_personales .cont_ficha .celdas{
     font-size: 14px;
      border-radius: 3px;
}


 .formulario .datos_personales .cont_ficha .cont_datos_ficha label{
	width: 350px;
    margin: 0px;
    font-size: 14px;
}

 .formulario .datos_personales .cont_ficha .cont_datos_ficha input{
	height: 20px;
    width: 100%;
}

textarea{
	height: 60px;
    width: 100%;
    background: #ccc;
    border-radius: 5px;
    border-style: none;
	padding: 10px;
    outline: none;
}

input{
    outline: none;
}


 .formulario .datos_personales .cont_ficha textarea:focus{
    border-bottom: 4px solid var(--main-color);
}

 .formulario .datos_personales .cont_ficha .cont_datos_ficha input[type=checkbox]{
    width: 40px;
    margin: 5px;
}

.checkbox_usuario{
    width: 100% !important;
}


 .formulario .datos_personales .cont_ficha .cont_datos_ficha span{
    width: 40px;
    margin: 3px;
    font-size: 14px
}










 .formulario .datos_personales #cont_factura_dos{
	display: none;
}

 .formulario .datos_personales #cont_factura_dos #factura_dos{
	background: #ffd9e7;
}



.formulario .datos_personales #select_receptor,#label_receptor1,#select_receptor2,#label_receptor2,#serie_cargador,#serie_cargador2,#serie_r_dos,#serie_r{
	display: none;
}


 .formulario .datos_personales #equipos_dos #serie_a_dos{
	background: #ffd9e7;
}

 .formulario .datos_personales #equipos_dos #serie_r_dos{
	background: #ffd9e7;
}


 .formulario .datos_personales input,select{
	width: 100%;
	margin-bottom: 10px;
	padding: 8px;
	border-radius: 3px;
	border-style: none;
	font-weight: bold;
	color: #222;
	background: #ccc;
}

 .formulario .datos_personales input[type=submit]{
	cursor: pointer;
	padding: 20px 0px 20px 0px;
	border-radius: 20px;
	background-color: #fff;
	color: var(--main-color);
	border: 2px solid var(--main-color);
	transition: 100ms;
}

 .formulario .datos_personales input[type=submit]:hover{
	background-color: var(--main-color);
	box-shadow: 5px 5px 5px #999;
	color: #fff;
}

 .formulario .datos_personales .cancelar_firma{
	cursor: pointer;
	padding: 20px 0px 20px 0px;
	border-radius: 20px;
	background-color: #fff;
	color: var(--main-color);
	border: 2px solid var(--main-color);
	transition: 100ms;
}

 .formulario .datos_personales .cancelar_firma:hover{
	background-color: #666;
	box-shadow: 5px 5px 5px #999;
	border: 2px solid #666;;
	color: #fff;
}

#newSignature{
	border: 5px solid var(--main-color);
}

/* SLIDER */

.slidecontainer {
  width: 80%; /* Width of the outside container */
  float: left;
}

#db_derecho_valor,#db_izq_valor{
  margin-left: 5px;
}

#rango,#rango1{
  float: left;
  width: 70%;
}

.slider {
  -webkit-appearance: none;
  width: 80%;
  height: 15px;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%; 
  background: #3897f5;
  cursor: pointer;
}

.slider::-moz-range-thumb {	
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #3897f5;
  cursor: pointer;
}


/* Controles */

.cont_control{
	width: 100%;
}

.cont_control .control_head{
	width: 100%;
	font-size: 14px;
	color: #222;
}

.cont_control .control_obgligarotio{
	width: 100%;
	display: flex;
	text-align: center;
	margin-top: 10px;
	padding-bottom: 5px;
	/*overflow-y: auto;*/
}

.cont_control .control_obgligarotio .tarjeta_control{
	background: #ccc;
	flex-wrap: wrap;
	width: 100%;
	min-width: 100px;
	float: left;
	color: #222;
	padding: 10px;
	border-radius: 10px;
	box-shadow: 1px 2px 5px 1px rgba(0,0,0,0.2);
	margin: 0px 5px 0px 5px;
	cursor: pointer;
	transition: 300ms;
}

.cont_control .control_obgligarotio .tarjeta_control.verde{
	background: var(--verde);
	color: #fff;
}

.cont_control .control_obgligarotio .tarjeta_control{
	transform: scale(1);
}

.cont_control .control_obgligarotio .tarjeta_control.rojo{
	background: var(--rojo);
	color: #fff;
}

.cont_control .control_obgligarotio .tarjeta_control span{
	font-size: 12px;
}

.cont_control .control_body{
	display: flex;
	background-color: #fff;
	border-radius: 5px;
	margin-top: 20px;
}

.cont_control .control_body input,
.cont_control .control_body textarea{
	width: 100%;

	border-style: none;
	background-color: #ccc;
	padding: 0px 0px 0px 10px;
	border-radius: 5px;
}

.cont_control .control_body .au_derecho{
	width: 50%;
	float: left;
	box-shadow: 1px 2px 5px 2px rgba(0,0,0,0.2);
	padding: 20px 10px;;	
	margin-right: 5px;
	border-radius: 3px;

}

.cont_control .control_body .au_izq{
	width: 50%;
	float: right;	
	box-shadow: 1px 2px 5px 2px rgba(0,0,0,0.2);	
	padding: 20px 10px;
	margin-left: 5px;
	border-radius: 3px;
}

.cont_control .control_body .au_izq label{
	width: 50%;	
}

.cont_control .control_body .tabla_izq{
	background-color: red;
	border-radius: 5px;
}

.cont_control .control_body .tabla_derech{
	background-color: var(--color-blue);
	border-radius: 5px;
}

.cont_control .control_body a{
	background-color: #555!important;
	margin: 0px!important;
	padding: 0px!important;
  	object-fit: contain;


}

.cont_control .control_body img{
	width: 150px;
 	border-radius: 50px;
	border: #222 2px solid;
  	object-fit: contain;
  	display: flex;
}

.cont_control .control_body .au_derecho tbody tr {
	background-color: #ffe8e6;
	transition: all 300ms;
	margin-bottom: 5px;
}

.cont_control .control_body .au_izq tbody tr {
	background-color: #e8f2ff;
	margin-bottom: 5px;
	transition: all 300ms;
}

tbody tr {
	transition: all 200ms;
}

tbody tr:hover {
	/*box-shadow: 1px 2px 2px 2px #999;*/
	box-shadow: 1px 1px 5px 3px rgba(0,0,0,0.2);
}

.cont_control .control_body .au_derecho tbody tr:hover {	
	box-shadow: 5px 0px 0px red;
}

.cont_control .control_body .au_izq tbody tr:hover {
	box-shadow: 5px 0px 0px var(--color-blue);
}

.cont_control .control_body .tabla_derech td, 
.cont_control .control_body .tabla_izq td{
	color: #fff;
}

/*Orden de trabajo*/
.control_body .body_orden{
}

.head_orden_der {
    background: red;
    border-radius: 3px 3px 0px 0px;
    color: #fff;
}
	
.head_orden_der h3{
    color: #fff;
}

.head_orden_izq {
    background: var(--color-blue);
    border-radius: 3px 3px 0px 0px;
    color: #fff;
}

.head_orden_izq h3{
    color: #fff;
}

.body_orden input[type="checkbox"]{
    width: auto;
    cursor: pointer;
}

/*uso exclusivo*/

.exclusivo{
	display: flex;
}


.exclusivo input{
	margin: 0px 0px 10px 10px;
	padding: 5px;
	border-radius: 3px;
	border-style: none;
	cursor: pointer;
}

 #submit{
 	width: 100%;
	cursor: pointer;
	padding: 10px 0px 10px 0px;
	border-radius: 20px;
	background-color: #fff !important;
	color: var(--main-color);
	border: 2px solid var(--main-color);
	transition: 100ms;
	margin: 10px 0px;
}

#submit:hover{
	background-color: var(--main-color) !important;
	box-shadow: 5px 5px 5px #999;
	color: #fff;
}






  
  .progress-bar {
	height: 2px;
	width: 100%;
	background-color: #ddd;
	position: absolute;
	bottom: 0;
	left: 0;
	display: none;
  }
  
  .load-more-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
  }
  
  .load-more-btn {
	background-color: #007bff;
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 8px 16px;
	cursor: pointer;
	transition: background-color 0.3s ease;
  }
  
  .load-more-btn:hover {
	background-color: #0069d9;
  }
  
  .loading {
	display: block;
	width: 30px;
	height: 30px;
	margin: 0 auto;
	border-radius: 50%;
	border: 3px solid rgba(0, 0, 0, 0.1);
	border-top-color: #007bff;
	animation: spin 1s ease-in-out infinite;
  }
  
  @keyframes spin {
	to {
	  transform: rotate(360deg);
	}
  }

  





/*Filtros busqueda de personas*/
.filtros{
    display: flex;
}

.filtros .filtro_estado{
    width:200px; 
    height: 40px;
    float: left;
    margin-bottom: 0px;
    background: var(--main-color);
    color: #fff;
}
.filtros .filtro_fecha{
    padding: 1px 20px;
    float: right;
}

.filtros .filtro_fecha input[type="date"]{
    padding: 5px 20px;;
    border-radius: 5px;
    background: var(--main-color);
    color: #fff;
    border: none;
}

.filtros .filtro_fecha input[type="submit"]{
    padding: 5px 20px;
    background: var(--main-color);
    color: #fff;
    font-weight: 700;
    border-radius: 5px;
    cursor: pointer;    
    border: none;
}


@media only screen and (max-width: 844px){
	.formulario .datos_personales .bloque_1{
		width: 100%;
		float: left;
		padding: 10px;
		background-color: #fff;
		border-radius: 0px;
		margin-left: 0px;
		margin-right: 0px;
	}

	.formulario .datos_personales .bloque_2{
		width: 100%;
		padding: 10px;
		background-color: #fff;
		border-radius: 0px;
		margin-left: 0px;
		margin-right: 0px;
	}

	.formulario .datos_personales .bloque_3{
		width: 100%;
		padding: 10px;
		background-color: #fff;
		border-radius: 0px;
		margin-left: 0px;
		margin-right: 0px;
	}
}


/*Fin  Ventana Flotante*/
@media only screen and (max-width: 1200px){

	.sidebar {
		width: 70px;
	}

	.sidebar .sidebar-brand,
	.sidebar li {
		padding-left: 1rem;
		text-align: center;
	}

	.sidebar li a {
		padding-left: 0rem;
	}


	.sidebar .sidebar-brand h2 span:last-child,
	.sidebar li a span:last-child {
		display: none;
	}

	.main-content{
		margin-left: 70px;
	}

	.main-content header{
		width: calc(100% - 70px);
		left: 70px;
	}
}


@media only screen and (max-width: 960px){
	.cards{
		grid-template-columns: repeat(3, 1fr);
	}

	.recent-grid{
		grid-template-columns: 60% 40%;
	}

	
	
	
}

@media only screen and (min-width: 769px){

	header h2 label{
		display: none;
	}
	
	
	
}

@media only screen and (max-width: 768px){


	.convesaciones_footer .text_mensaje{
		font-size: 16px !important;
	}

	.container{
		margin-left: 0px;

	}

	.example-parent{
		overflow: scroll;

	}

	#embudoNombre {
		margin-top: 5px;
	height: 25px;
	width: 150px; /* opcional */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

	display: flex;
	align-items: center; /* ✅ alinea verticalmente */
	}	

	.contenedor_embudo{
		left: 0;
		right: 0;
		overflow: hidden;
		min-height: none;
	}

	.contenedor_embudo h3{
		top: auto;
	}
	


	.dropzone{
		height: 400px;
		
	}
		
	header .cont_iconos{
		display: none;
	}
	
	
	header #boton_menu{
		display: flex;
	}

	.modal-contenido.medio{
	    width: 100%;
	}

	.modal-title{
		font-size: 14px!important;
		max-width: 300px;
		max-height: 20px;
		overflow: hidden;
	}

	.modal-contenido.medio label{
	    font-size: 14px;
	}

	.modal-contenido.medio .enviar_what{
	    font-size: 9px;
	}

	.cards{
		grid-template-columns: repeat(2, 1fr);
	}

	.recent-grid{
		grid-template-columns: 100%;
	}

	.sidebar {
		left: -100% !important;
	}

	header h2{
		display: flex;
		align-items: center;
		margin-right: 20px;
	}

	header h2 label{
		background: var(--main-color);
		padding-right: 0rem;
		margin-right: 1rem;
		height: 40px;
		width: 40px;
		border-radius: 50%;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center !important;
	}

	header h2 span{
		text-align: center;
		padding-right: 0rem;
	}

	header h2{
		font-size: 1.1rem;
	}

	.main-content{
		width: 100%;
		margin-left: 0rem;
	} 

	header{
		width: 100% !important;
		left: 0 !important;
	} 


	#nav-toggle:checked + .sidebar {
		left: 0 !important;
		z-index: 100;
		width: 70px;
	}

	#nav-toggle:checked + .sidebar .sidebar-brand,
	#nav-toggle:checked + .sidebar li {
		padding-left: 1.3rem;
		text-align: left;
	}

	#nav-toggle:checked + .sidebar li a {
		padding-left: 1rem;
	}


	#nav-toggle:checked + .sidebar .sidebar-brand h2 span:last-child,
	#nav-toggle:checked + .sidebar li a span:last-child {
		display: inline;
	}

	#nav-toggle:checked ~ .main-content {
		margin-left: 0rem !important;
	}


}

@media only screen and (max-width: 560px){
	.cards{
		grid-template-columns: 100%;
	}

	.table-responsive td#movil{
		display: none;

	}

}