@import url('global.css');
@import "https://unpkg.com/jolty-ui/dist/jolty-ui.min.css";


/*Flecha para hacer la pagina hacia arriba*/
.ir-arriba{
    display:none;
    background-repeat:no-repeat;
    font-size:60px;
    color: var(---color_primario_1);
    cursor:pointer;
    position:fixed;
    bottom:20px;
    right:20px;
    z-index:100;
    transform-origin: top left;
    filter: drop-shadow(3px 3px 12px #62acfc);
}
  

/* Definir la animación */
@keyframes slideDownFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


a[disabled] {
    pointer-events: none; /* Evita que el enlace sea clickeable */
    color: gray; /* Cambia el color del texto a gris */
    text-decoration: none; /* Opcional: Elimina el subrayado del enlace */
    cursor: default; /* Cambia el cursor a uno por defecto (no el de enlace) */
}

/* Aplicar la animación a los elementos con la clase .animate */
.animate {
    animation: slideDownFadeIn 0.5s ease-out forwards;
    opacity: 0; /* Inicialmente oculto */

}

.Ontop{
    width: 100%;
    position: fixed;
    z-index: 100;
    top: 10;
    left:10;
}



/* Estilos para el menú desplegable */
.navbar-menu .dropdown-menu {
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    padding: 0.5rem 0;
    margin-top: 1rem;
}

/* Estilos para los ítems del menú desplegable */
.navbar-menu .dropdown-item {
    padding: 0.5rem 1.5rem;
    color: #333;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar-menu .dropdown-item:hover {
    background-color: var(--color_sobreado_1);
    color: var(--color_texto_titulos);
}

/* Estilos para el divisor del menú desplegable */
.navbar-menu .dropdown-divider {
    margin: 0.5rem 0;
    border-top: 1px solid #0d0202;
}


/*3498db*/

.dropdown-toggle::after {
    display: none !important;
}


/* ELEMENTOS NAVBAR */
.header-logo{
    color: var(---color_principal_tecbit);}

.header-navlink{
    color: var(---color_texto_portafolio);
}

/* .header-navitem{

} */



.loader_wrap{
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    display: grid;
    place-items: center;
    z-index: 9000;
}

.Desaparecer{
    transition-duration: 600ms;
    opacity:0;
}

.NoMostrar{
    display: none;
}

.LoderImage{
    
    position: relative;
    top:0px;
    left: 10px;
    opacity: 0.3;
    animation: TecbitAnimation 3s linear infinite alternate;
}


@keyframes TecbitAnimation{
    0%{
        opacity: 0.3;
    }
    100%{
        opacity: 1;
    }
}

.loader{
    width: 100px;
    height: 20px;
    position: relative;
}

.loader div{
    background: #2b7ffd;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
}

.loader_point1{
animation: animate 2s linear infinite;
}
.loader_point2{
animation: animate 2s linear infinite -0.4s;
}
.loader_point3{
animation: animate 2s linear infinite -0.8s;
}
.loader_point4{
animation: animate 2s linear infinite -1.2s;
}
.loader_point5{
animation: animate 2s linear infinite  -1.6s;
}

@keyframes animate{
0%{
    left: 100px;
    top: 0;
}
80%{
    left: 0;
    top: 0;
}
85%{
    left: 0;
    top: -20px;
    width: 20px;
    height: 20px;
}
90%{
    width: 40px;
    height: 15px;
}
95%{
    left: 100px;
    top: -20px;
    width: 20px;
    height: 20px;
}
100%{
    left: 100px;
    top: 0;
}
}









.btn-close-whi {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

.modal-confirm {		
	color: #021745;
	width: 525px;
}
.modal-confirm .modal-content {
	padding: 20px;
	font-size: 16px;
	border-radius: 5px;
	border: none;
}
.modal-confirm .modal-header {
	background: #007bff;
	border-bottom: none;   
	position: relative;
	text-align: center;
	margin: -20px -20px 0;
	border-radius: 5px 5px 0 0;
	padding: 35px;
}


.modal-confirm .modal-header-error {
	background: #c90202;
	border-bottom: none;   
	position: relative;
	text-align: center;
	margin: -20px -20px 0;
	border-radius: 5px 5px 0 0;
	padding: 35px;
}


.modal-confirm h4 {
	text-align: center;
	font-size: 36px;
	margin: 10px 0;
}
.modal-confirm .form-control, .modal-confirm .btn {
	min-height: 80px;
	border-radius: 3px; 
}
.modal-confirm .close {
	position: absolute;
	top: 20px;
	right: 25px;
	text-shadow: none;
	opacity: 1;
    font-size: 1.5rem;
}
.modal-confirm .close:hover {
	opacity: 0.8;
}
.modal-confirm .icon-box {
	color: #fff;		
	width: 95px;
	height: 95px;
	display: inline-block;
	border-radius: 50%;
	z-index: 9;
	border: 5px solid #fff;
	padding: 15px;
	text-align: center;
}
.modal-confirm .icon-box span {
	font-size: 64px;
	margin: -4px 0 0 -4px;
}
.modal-confirm.modal-dialog {
	margin-top: 80px;
}
.modal-confirm .btn, .modal-confirm .btn:active {
	color: #fff;
	border-radius: 4px;
	background: #eeb711 !important;
	text-decoration: none;
	transition: all 0.4s;
	line-height: normal;
	border-radius: 30px;
	margin-top: 10px;
	padding: 6px 20px;
	border: none;
}
.modal-confirm .btn:hover, .modal-confirm .btn:focus {
	background: #eda645 !important;
	outline: none;
}
.modal-confirm .btn span {
	margin: 1px 3px 0;
	float: left;
}
.trigger-btn {
	display: inline-block;
	margin: 100px auto;
}


@media only screen and (max-width: 600px) {
    .modal-confirm {
      width: 90%;  /* Se adapta al ancho de la pantalla */
      margin: 20px auto; /* Centrado con margen vertical */
    }
    .modal-confirm .modal-content {
      padding: 15px;
      font-size: 14px;
    }
    .modal-confirm .modal-header {
      padding: 25px;
      margin: -15px -15px 0;
    }
    .modal-confirm h4 {
      font-size: 28px;
      margin: 10px 0;
    }
    .modal-confirm .form-control,
    .modal-confirm .btn {
      min-height: auto;
      padding: 10px;
    }
  }