html,
body {
    /*background-image: url(https://img.freepik.com/free-photo/grunge-wall-texture_1194-6386.jpg?t=st=1727864539~exp=1727868139~hmac=9cff832f4266e0164651c532344b13e587b371750d82e725aefc0ef8ef6fab38&w=1380) !important;
    background-size: cover; 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; */
    background-color: #2b2b2b !important;
    height: max-content;
}


.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
    padding-top: 15px;
}

/* Estilos globales para todas las tablas */
table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 10px;
    text-align: left;
}

thead {
    background-color: #f8f9fa;
    /* Color de fondo para el encabezado */
}

tbody tr:nth-child(even) {
    background-color: #f2f2f2;
    /* Color de fondo alternativo para filas */
}

tbody tr:hover {
    background-color: #e9ecef;
    /* Color de fondo al pasar el cursor */
}

th {
    border-bottom: 2px solid #dee2e6;
}

td {
    border-bottom: 1px solid #dee2e6;
}

table {
    border: none;
}

.ingredient-row {
    display: flex;
    margin-bottom: 10px;
}

.ingredient-select {
    flex: 1;
    margin-right: 10px;
}

.ingredient-quantity {
    flex: 1;
}

#addIngredient {
    margin-top: 10px;
}






#ingredientSection {
    margin-top: 10px;
}

.esto-es-flex {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
}

#pagination button {
    margin: 0 5px;
    padding: 5px 10px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    cursor: pointer;
}

#pagination button.active {
    background-color: #007bff;
    color: white;
}

.chart-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 columnas por fila */
    gap: 20px;
    /* Espaciado entre los gráficos */
    justify-items: center;
    /* Centrar los gráficos horizontalmente */
    margin-top: 20px;
    /* Añadir espacio superior */
}

.small-chart-container {
    width: 250px;
    height: 250px;
}

.card {
    margin-bottom: 20px;
}

.card-title {
    font-weight: bold;
}

.card-text {
    margin-bottom: 15px;
}

.list-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar {
    background-color: #121212;
}

.top-bar-text {
    font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 800;
    font-size: 30px;
    color: #ffffff !important;
    line-height: 1.2em;
}

.menu-bar {
    background-color: #121212 !important;
    /*border-radius: 15px;*/
}

.menu-bar .nav-item .nav-link {
    color: rgb(255, 255, 255) !important;
    /* Color del texto normal */
    text-decoration: none;
    /* Remueve subrayado por defecto */
    transition: color 0.3s ease, background-color 0.3s ease;
    /* Transiciones suaves */
    text-shadow: 2px 2px 5px rgb(105, 105, 105);
    border-radius: 10px;

}

.menu-bar .nav-item .nav-link:hover {
    color: #000000 !important;
    /* Color azul al pasar el ratón */
    background-color: #f8f9fa;
    /* Fondo claro al pasar el ratón */
    border-radius: 10px;

}

.menu-bar .nav-item .nav-link:focus {
    color: #000000 !important;
    /* Color azul más oscuro al enfocar */
    outline: none;
    /* Elimina el borde de enfoque predeterminado */
    background-color: #e2e6ea;
    /* Fondo ligeramente más oscuro en enfoque */
    border-radius: 10px;
}

.menu-bar .nav-item .nav-link.active {
    color: rgb(255, 255, 255) !important;
    /* Texto blanco para el enlace activo */
    background-color: #6ab2ff !important;
    /* Fondo azul para el enlace activo */
    border-radius: 5px;
    /* Bordes redondeados para el enlace activo */
}

/* Estado activo para el elemento <li> */
.menu-bar .nav-item.active {
    background-color: #7abaff;
    /* Fondo azul más oscuro para el <li> activo */
    border-radius: 10px;
}






#newIngredient {
    margin-top: 10px;
    margin-left: 5px;
}



.btn-informe {
    background-color: #ffffff !important; /* Default color */
    padding: 10px;
    margin: 5px;
    border: none;
}

.btn-active {
    background-color: #1728c2 !important; /* Active button color */
    color: white !important;
}
.btn-informe:hover {
    background-color: #b4bcff !important; /* Active button color */
    color: rgb(0, 0, 0) !important;
}


/* Basic responsive styles for smartphones */

/* Ensure that the page scales properly on mobile devices */
@media only screen and (max-width: 600px) {

    /* General container adjustment for mobile */
    .container {
        width: 100%;
    }

    /* Make buttons larger and more accessible */
    button, input[type="submit"] {
        width: 100%;
        font-size: 1.2rem;
        padding: 15px;
    }

    /* Adjust table layout for smaller screens */
    table {
        width: 100%;
        font-size: 0.9rem;
        overflow-x: auto;
        display: block;
        border-color: #fff !important;
    }

    /* Resize images */
    img {
        width: 100%;
        height: auto;
    }

    /* Adjust navigation and header styles */
    .navbar {
        display: flex;
        flex-direction: column;
    }

    .navbar a {
        padding: 10px;
        font-size: 1.2rem;
    }

    /* Font size adjustments */
    body {
        font-size: 1rem;
    }

    /* Adjust any specific sections */
    .section-header {
        font-size: 1.5rem;
        text-align: center;
    }
   
    nav div.container-fluid{
        width: 90% !important;
    }
    div.nav img{
        display: none !important;
    }
    .container.r{
        width: 100% !important;
    }
    
}


.modal-backdrop {
    z-index: 1050;
}

.modal {
    z-index: 2010; /* This must be higher than the backdrop's */

}

.fondooscuro {
    background-color: rgba(0, 0, 0, 0.6) !important; 

}


.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.6); /* Darker backdrop */
}

div.card-default{
    border-radius: 15px !important;
}


nav{
    margin-bottom: 2em;

}
nav.navbar{
   
   background-color: #5a5a5a !important;
   

}


 div.menu{
    display: flex;
    justify-content: center !important;
    
    flex-wrap: nowrap;
   
 }
 ul.nav li.dropdown {
    margin-left: auto; /* Pushes the dropdown to the right */
}
div.container div button.navbar-toggler{
    width: 3em;
}

nav div.container-fluid{
    width: 80%;
}

.table {
  
    border-color: #fff !important;
    border: none;
}

.table tr {
    transition: 0.2s;
}
.table tr:hover {
    background-color: #dfdfdf; /* Change this color as needed */
    transition: 0.2s;
    color: #000000;
}


th, td {
    padding: 8px; /* Optional: Adjust cell padding */
    text-align: left;
    border: none !important; /* Remove cell borders */
}
.table th{
    background-color: #1d1d1d !important; /* Change this color as needed */
    transition: 0.2s;
    color: #fff;
}

/**/
.container{
    max-width: 100% !important;
    --bs-gutter-x: 0rem !important;
}
.container.r{
    width: 65em !important;
}


div.card-header{     
    padding-top: 1em;
}                     


.chart-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinear desde la parte superior */
}

canvas {
    margin-bottom: 20px; /* Asegura un buen espacio bajo el gráfico */
}

.text-danger {
    color: red;
    text-decoration: underline;
}
.text-naranja{
    color: rgb(255, 102, 0);
}


@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.05);
    }
    60% {
        transform: scale(1.025);
    }
}

.bounce-select {
    animation: bounce 3s infinite;
}

#rentabilidadChart {
    min-width: 800px; /* Mínimo ancho para mostrar al menos 8 elementos */
    height: 400px;    /* Ajustar altura del gráfico */
}

.report-section div[style*="overflow-x: auto"] {
    border: 1px solid #ddd; /* Opcional: para visualizar el contenedor */
    padding: 10px;          /* Opcional: para separación del contenido */
}