/* Estilos anteriores a bootstrap */

/* Cambia el color del texto a rojo al pasar el ratón */
.container-fluid {
    padding: 0.8rem;
    background-color: rgb(235, 235, 235);
}
.navbar-nav .nav-link:hover {
    color: rgb(156, 56, 55) !important; /* !important para sobreescribir los estilos de Bootstrap si es necesario */
  }

  .navbar-nav .nav-link {
    color: rgb(33,101,103);
    background-color: rgb(235, 235, 235);
  }


#navbarSupportedContent {
    background-color:rgb(235, 235, 235);
    color: black;
}
#titulo {
    padding: 0.1rem;
}
#tit_h5 {
    color: rgb(224, 34, 34);
}
#pie-de-pagina {
    background-color: rgb(235, 235, 235)
}

.CuadroLogin {
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 1%; 
    margin-bottom: 1%;
    background-color: rgb(235,235,235);
    padding: 1rem;
    color:rgb(156, 56, 55)

}
#TituloLogin {
    color:rgb(156, 56, 55);
    text-align: center;
    
}
.TituloBaseSinMenu {
    text-align: center; 
    color:rgb(33,101,103); 
    padding: 1rem;
}

#BotonLogin {
    background-color: rgb(33,101,103); 
    color: white; 
    width: fit-content;
}
#opcion_modificar {
    background-color:white; 
    border-width: 3px; 
    border-color:  rgb(90,90,90); 
    color: rgb(90,90,90);
    font-weight: 600;
}
#opcion_eliminar {
    background-color: white; 
    border-width: 3px; 
    border-color: rgb(156,56,55); 
    color:rgb(156,56,55);
}
#boton_crear {
    background-color: rgb(33,101,103);
    color:white;
}

#boton_copiar {
    background-color: rgb(33,101,103);
    color:white;
}

#boton_ejecutar {
    background-color: rgb(220,220,220);
    color:white;
    font-weight: 1200;
}

#boton_verde {
    background-color: rgb(33,101,103);
    color:white;
}

#btn_agregar_instrumento {
    background-color: rgb(33,101,103);
    color:white;
}

#btn_agregar_portafolio {
    background-color: rgb(33,101,103);
    color:white;
}

#h5_modificar {
    color: rgb(122,122,122);
}
#h5_titulo {
    color: rgb(33,101,103);
}
/* style.css */
.messages {
    padding: 2rem;
}

.alert.alert-danger {
    background-color:rgb(235,235,235); /* color de fondo */
    color:  rgb(156, 56, 55); /* color del texto */
    border-color:1px solid rgb(156, 56, 55); /* color del borde */
    font-weight: 600;
  }

.alert.alert-info {
    background-color:rgb(235,235,235); /* color de fondo */
    color: rgb(125,125,125); /* color del texto */
    border-color:1px solid rgb(125,125,125); /* color del borde */
    font-weight: 600;
  }

.alert.alert-success {
    background-color:rgb(235,235,235); /* color de fondo */
    color: rgb(33,101,103); /* color del texto */
    border-color:1px solid rgb(33,101,103); /* color del borde */
    font-weight: 800;
  }
.alert.alert-warning {
    background-color:rgb(235,235,235); /* color de fondo */
    color: rgb(33,101,103); /* color del texto */
    border-color:1px solid rgb(156, 56, 55); /* color del borde */
    font-weight: 800;
  }

/* Mensajes JavaScript */
.mensajes_js {
    padding-left: 0; /* Elimina el relleno izquierdo predeterminado de la lista */
    list-style-type: none; /* Esto aplica a todos los <li> dentro si se pone en el <ul> o <ol> */
}
.mensaje_js_error {
    background-color:rgb(235,235,235); /* color de fondo */
    color:  rgb(156, 56, 55); /* color del texto */
    border-color:1px solid rgb(156, 56, 55); /* color del borde */
    font-weight: 600;
    padding: 1rem; /* añade relleno arriba y abajo (y a los lados) */
    margin: 0.1rem 0; /* añade un margen exterior arriba y abajo para separarlo de otros elementos */
    display: block; /* asegura que el elemento se muestre como un bloque, lo que permite aplicar relleno y margen */
    width: auto; /* ajusta el ancho según sea necesario */
    box-sizing: border-box; /* asegura que el relleno y el borde estén incluidos en el ancho total del elemento */
  }

.mensaje_js_info {
    background-color:rgb(235,235,235); /* color de fondo */
    color: rgb(125,125,125); /* color del texto */
    border-color:1px solid rgb(125,125,125); /* color del borde */
    font-weight: 600;
    padding: 1rem; /* añade relleno arriba y abajo (y a los lados) */
    margin: 0.1rem 0; /* añade un margen exterior arriba y abajo para separarlo de otros elementos */
    display: block; /* asegura que el elemento se muestre como un bloque, lo que permite aplicar relleno y margen */
    width: auto; /* ajusta el ancho según sea necesario */
    box-sizing: border-box; /* asegura que el relleno y el borde estén incluidos en el ancho total del elemento */
  }

  .mensaje_js_exito {
    background-color: rgb(235,235,235); /* color de fondo */
    color: rgb(33,101,103); /* color del texto */
    border: 1px solid rgb(33,101,103); /* color y estilo del borde */
    font-weight: 800;
    padding: 1rem; /* añade relleno arriba y abajo (y a los lados) */
    margin: 0.1rem 0; /* añade un margen exterior arriba y abajo para separarlo de otros elementos */
    width: auto;  /* ajusta el ancho según sea necesario */
    box-sizing: border-box; /* asegura que el relleno y el borde estén incluidos en el ancho total del elemento */
}

.mensaje_js_advertencia {
    background-color:rgb(235,235,235); /* color de fondo */
    color: rgb(33,101,103); /* color del texto */
    border-color: rgb(156, 56, 55); /* color del borde */
    font-weight: 800;
    padding: 1rem; /* añade relleno arriba y abajo (y a los lados) */
    margin: 0.1rem 0; /* añade un margen exterior arriba y abajo para separarlo de otros elementos */
    display: block; /* asegura que el elemento se muestre como un bloque, lo que permite aplicar relleno y margen */
    width: auto; /* ajusta el ancho según sea necesario */
    box-sizing: border-box; /* asegura que el relleno y el borde estén incluidos en el ancho total del elemento */
  }

#btn_agregar_activo{
    background-color: rgb(33,101,103);
    color:white;   
}

#boton_extender_sesion{
    background-color: rgb(33,101,103);
    color:white;
    border-radius: 10px;      
}

#alertDialog {
    display:none; 
    position: fixed; top: 40%; left: 70%; 
    transform: translate(-50%, -50%); 
    background-color: rgb(235,235,235); 
    color:rgb(156,56,55); 
    padding: 20px; 
    border-radius: 20px; 
    box-shadow: 0 0 10px rgb(33,101,103);
}

#countdown {
    color:rgb(156,56,55); 
    font-weight: 1200;

}

.form-group {
    display: block;
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

/*.form-group input[type="file"], .form-group input[type="number"], .form-group select {
    Asegura que por defecto tomen todo el ancho disponible
    width: 100%;
}

.form-group select, .form-group input[type="number"] {
    /* Limita la anchura de los selectores y campos numéricos 
    max-width: 100px;  
}

#combo_portafolio {
    /* Ancho para seleccionar 
    max-width: 250px;  
}
*/

/* Estilos para el overlay de carga */
.loading-overlay {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%); /* Ajuste de centramiento */
    background: none !important; 
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-content {
    text-align: center;
    color: rgb(33,101,103);
}

/*
.spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 4px solid rgb(156,56,55);
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}
*/

.spinner {
    border: 8px solid rgba(0, 0, 0, 0.1); /* Bordes delgados */
    border-top: 8px solid rgb(156,56,55); /* Color visible: el borde superior cambia */
    border-radius: 50%; /* Hace que sea redondo */
    width: 50px; /* Ancho del spinner */
    height: 50px; /* Alto del spinner */
    animation: spin 1s linear infinite; /* Aplicar la animación */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.disabled {
    pointer-events: none;
    opacity: 0.6;
}