/* Estilos para la barra de navegación */
.navbar {
    background-color: #005a69; /* Color de fondo de la barra de navegación */
    border-color: #005a69; /* Color del borde */
    font-family: Georgia, 'Times New Roman', Times, serif;
    display: flex; /* Usamos flexbox */
    justify-content: space-between; /* Distribuye los elementos entre los extremos */
    align-items: center; /* Centra verticalmente el contenido */
    padding: 0 20px; /* Opcional: agrega algo de padding a los lados de la barra */
}

.navbar-toggler {
    display: none;
}

.navbar-collapse {
    display: block; /* Asegúrate de que el menú colapsable se muestra */
}

.navbar-brand {
    margin-left: 60px;
    color: #fff; /* Color del texto del logotipo */
    font-weight: bold; /* Texto en negrita para el logotipo */
}

@media (max-width: 768px) { /* Ajusta el ancho máximo según tus necesidades */
    .navbar-brand {
        margin-left: 30px; /* Ajusta el margen para pantallas más pequeñas */
    }
}

.navbar-nav .nav-link {
    color: #fff; /* Color del texto de los enlaces de la barra de navegación */
    padding-right: 30px;
}

.navbar-nav .nav-link:hover {
    color: #f5f2ee; /* Color del texto de los enlaces de la barra de navegación al pasar el cursor */
}

/* Asegúrate de que el contenedor de las imágenes se comporta como quieres */
.navbar .navbar-left, .navbar .navbar-right {
    display: flex;
    align-items: center;
}

.navbar .navbar-left {
    justify-content: flex-start; /* Imagen a la izquierda */
}

.navbar .navbar-right {
    justify-content: flex-end; /* Imagen a la derecha */
    margin-right: 5px; /* Agrega margen a la derecha para evitar que toque el borde */
    margin-top: 10px;  /* Agrega margen arriba */
    margin-bottom: 10px; /* Agrega margen abajo */
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-actualizar {
    padding: 5px;
    background-color: #000000;
    color: white;
    border: none;
    border-radius: 50%; /* Hace el botón circular */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto; /* Empuja el botón a la derecha */
    transition: transform 0.2s ease; /* Suaviza el cambio de escala */
  }

.icono-refrescar {
    width: 23px; /* Tamaño ajustado */
    height: 23px; /* Tamaño ajustado */
}

.btn-actualizar:active {
    transform: scale(0.8); /* Reducción más notoria */
    background-color: #37c0ff; /* Cambio de color al ser presionado */
  }





/* Estilos para el contenido */
body {
    font-family: ui-sans-serif,-apple-system,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica,Apple Color Emoji,Arial,Segoe UI Emoji,Segoe UI Symbol;
    font-size: 0.9rem;
    background-color: #979797; /* Color de fondo del cuerpo */
    color: #f5f2ee; /* Color del texto principal */
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1400px; /* Ajusta el ancho máximo del contenedor */
    margin: 20px auto;
    padding: 20px;
    background-color: #b1b1b1; /* Color de fondo del contenedor principal */
    border-radius: 8px; /* Borde redondeado */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Estilos para las columnas */
.row {
    display: flex;
    flex-wrap: wrap;
}

.col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 20px;
    border-color: #664820;
}

@media (min-width: 768px) {
    .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

/* Estilos para las tarjetas */
.card {
    border: 1px solid #09a6a3; /* Borde sólido */
    border-radius: .25rem;
    background-color: #a5a5a5; /* Color de fondo */
    color: #f5f2ee; /* Color del texto */
}

.card-header {
    background-color: #005a69; /* Color de fondo del encabezado */
    color: #fff; /* Color del texto del encabezado */
}

.card-body {
    padding: 1.25rem;
    background-color:rgb(66, 66, 66);
}

.border-primary {
    --bs-border-opacity: 1;
    border-color: rgb(168, 168, 168) !important;
}

/* Estilos para los formularios */
.form-group {
    margin-top: 10px;
}

.form-group small {
    color: #869e30; /* Color del texto pequeño */
}

.form-control {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0.375rem 0.75rem;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    color: #444;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}



select#selectedPump,
select#selectPump {
    min-height: 250px;
}

/* Media query para ajustar la altura en pantallas pequeñas */
@media (max-width: 600px) {
    select#selectedPump,
    select#selectPump {
        min-height: 300px;
        border: 2px solid #54c7fc;
        border-radius: 4px;

    }
}

/* iOS Safari muestra este select como desplegable: se agrega la flecha para indicar que tiene opciones */
@supports (-webkit-touch-callout: none) {
    select#selectedPump {
        min-height: auto;
        -webkit-appearance: none;
        appearance: none;
        padding-right: 2.5rem;
        background-color: #fff;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 16px 12px;
    }
}





/* Gráfico */
#myChart {
    width: 277px;
    height: 175px;
    border: 2px solid #0078a1;
    margin-bottom: 10px;
    margin-top: 10px;
}

#myChart2 {
    width: 277px;
    height: 140px;
    border: 2px solid #0078a1;
}

#myChart .tick text, #myChart2 .tick text {
    font-family: ui-sans-serif,-apple-system,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica,Apple Color Emoji,Arial,Segoe UI Emoji,Segoe UI Symbol;
    font-size: 0.8rem;
    color: #000000;
    font-weight: 400;
}

.grid line {
    stroke: #756f6f;
    stroke-opacity: 0.7;
    shape-rendering: crispEdges;
}

.grid .tick {
    stroke: rgb(0, 0, 0);
    opacity: 0.7;
    
}
.grid path {
    stroke-width: 0;
}

#caudalInterseccion{
    margin-top: 10px;
}






/* Márgenes de los inputs */
.label-margin-right-caudal{
    margin-right: 32px;
    margin-left: 3px;
}
.label-margin-right-altura{
    margin-right: 26px;
    margin-left: 3px;
}
.label-margin-right-longitud{
    margin-right: 20px;
    margin-left: 3px;
}
.label-margin-right-diametro{
    margin-right: 18px;
    margin-left: 3px;
}
.label-margin-right-viscosidad{
    margin-right: 30px;
    margin-left: 3px;
}
.label-margin-right-solid-size{
    margin-right: 42px;
    margin-left: 3px;
}
.label-margin-right-sumersion{
    margin-left: 3px;
}
.label-margin-right-psolids{
    margin-right: 30px;
    margin-left: 3px;
}
.label-margin-right-pslurry{
    margin-right: 32px;
    margin-left: 3px;
}





/* Barra divisoria */
.hr-divider {
    border: 0;
    border-top: 1px solid #ccc; 
    margin: 20px 0; 
}




/* Estilos para los cambios de unidad */
.custom-select-width{
    background-color: #cfcfcf;
    font-size: 0.9rem;
}
.custom-select-width-grande{
    background-color: #cfcfcf;
    font-size: 0.9rem;
}
/* Estilos para los cambios de unidad */
.custom-select-width:hover {
    background-color: #ffffff;
    font-size: 0.9rem;
}
.custom-select-width-grande:hover {
    background-color: #ffffff;
    font-size: 0.9rem;
}
.custom-select-width {
    max-width: 18%; /* Ajusta este valor según sea necesario */
}
.custom-select-width-grande {
    max-width: 22%; /* Ajusta este valor según sea necesario */
}
.custom-input-width {
    max-width: 70%; /* Ajusta este valor según sea necesario */
}




/* Estilos para el contenedor de sugerencias */
#sugerencias {
    border: 1px solid #ccc;
    max-height: 150px;
    overflow-y: auto;
    position: absolute;
    background-color: rgb(4, 82, 71);
    width: 308px;
}
#sugerencias div {
    margin: 0;
    padding: 8px;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
}
#sugerencias div:hover {
    background-color: #228d76;
}





/* Ocultar gráfico al cargar la página */
#cardbodyGrafico, #cardbodySeleccion {
    display: none;
}

.fontWater, .fontSlurry{
    display: none;
    font-size: 15px;
}





.no-inherit-align {
    text-align: right !important;
}





  
/* Estados para las validaciones en caso de tener los inputs y los checkbox vacíos */
.estado-container {
    margin-bottom: 10px;
    margin-top: 10px;
    display: none;
}

.estado {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
    position: relative; 
}

.estado::before,
.estado::after {
    content: ''; 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.rojo {
    background-color: #ffcccc;
    border-color: #ff6666;
}

.verde {
    background-color: #ccffcc;
    border-color: #66cc66;
}

.verde::before {
    content: '✔';
    font-size: 12px; 
    color: #66cc66; 
}

#estadoContainerGrande {
    background-color: #424242;
}






/* Cw Cv caja de porcentaje */
.input-group-text {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: #cfcfcf;
    border-color: #cfcfcf;
}






/* Estilo específico para el popover */
.popover {
    color: #333333 !important; 
    font-size: 10px !important; 
    background-color: #f8f9fa !important;
    border-color: #cccccc !important; 
    padding: 8px !important;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.popover-body {
    color: #333333 !important;
    font-size: 10px !important;
}





/* Botón de calcular (submit data) */

.styled-button {
    background-color: #2f9483; /* Color de fondo */
    color: white; /* Color del texto */
    border: none; /* Sin borde */
    border-radius: 4px; /* Bordes redondeados */
    padding: 10px 20px; /* Espaciado interno */
    font-size: 16px; /* Tamaño del texto */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; /* Transiciones suaves */
}

.styled-button:hover {
    background-color: #51aa95; /* Color de fondo cuando el mouse está sobre el botón */
}

.styled-button:focus {
    outline: none; /* Quita el contorno por defecto del botón */
}

.styled-button:active {
    background-color: #144b42; /* Color de fondo cuando el botón es presionado */
    transform: scale(0.95); /* Reduce el tamaño del botón ligeramente */
    box-shadow: 0 0 0 4px rgba(170, 170, 170, 0.5); /* Efecto de destello */
}