/*Estilos personalizados*/
/*Backgrounds*/
.bg-rojo {
  background-color: #f1442a;
  background-image: linear-gradient(180deg, #f1442a 10%, #f1442a 100%);
  background-size: cover;
}
.bg-gradient-pink{
     background-color: #f7bbcf;

}

/*Botones*/
.btn-little-size{
	font-size: 3px;
}

/*Clase pointer para elementos*/
.cursorPointer{
	cursor:pointer;
}
/* Clases para los checkbox de presentaciones en agregar producto */
.presentationsCheckbox {
    /* Estilo para el contenedor */
    background-color: #726f4e;
    padding: 10px;
    margin-bottom: 5px;
    margin-right: 5px;
    border-radius: 10px; /* Se aplica el mismo radio de borde en todos los lados */
    width: auto; /* Ancho automático para adaptarse al contenido */
    max-width: 100%; /* Ancho máximo para evitar que se desborde */
    display: inline-block; /* Mostrar en línea para que los elementos se coloquen uno al lado del otro */
    text-align: center; /* Centrar el contenido */
    white-space: nowrap; /* Evitar que el texto se desborde */
    overflow: hidden; /* Ocultar el contenido que se desborda */
    -webkit-transition: background-color 800ms linear;
    -ms-transition: background-color 800ms linear;
    transition: background-color 800ms linear;

}

.presentationsCheckbox label {
    color: #fff;
    margin: 5px; /* Reducir los márgenes para un diseño más compacto */
    text-transform: uppercase;
}

.presentationsCheckbox input {
    position: relative;
    left: 1%;
}

/* Clase para el contenedor cuando está marcado */
.presentationsCheckboxChecked {
    background-color:  #00FF2180; /* Color de fondo cuando está marcado */
    padding: 10px;
    margin-bottom: 5px;
    margin-right: 5px;
    border-radius: 10px; /* Se aplica el mismo radio de borde en todos los lados */
    width: auto; /* Ancho automático para adaptarse al contenido */
    max-width: 100%; /* Ancho máximo para evitar que se desborde */
    display: inline-block; /* Mostrar en línea para que los elementos se coloquen uno al lado del otro */
    text-align: center; /* Centrar el contenido */
    white-space: nowrap; /* Evitar que el texto se desborde */
    overflow: hidden; /* Ocultar el contenido que se desborda */
    -webkit-transition: background-color 800ms linear;
    -ms-transition: background-color 800ms linear;
    transition: background-color 800ms linear;
}

/* Estilos específicos para la versión marcada */
.presentationsCheckboxChecked label {
    color: #000; /* Color del texto cuando está marcado */
    margin: 5px; /* Reducir los márgenes para un diseño más compacto */
	text-transform: uppercase;
}

.presentationsCheckboxChecked input {
    position: relative;
    left: 1%;
}

.badge-personalized{
	background-color: #dedbce;
	color:#000000;
}
.btn-personalized{
	background-color: #dedbce;
	color:blue;
	font-size: 18px
}
.btn-personalized:hover{
	background-color: #726f4e;
	color:white;
	font-size: 18px;
}
.btn-danger-personalized{
	background-color: #f1442a;
	color:white;
	font-size: 18px
}
.btn-danger-personalized:hover{
	background-color: #f1442a;
	color:blue;
	font-size: 18px;
}
.btn-small-personalized{
	background-color: blue;
	color:#fff;
	border-radius: 20px;
	transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-small-personalized:hover{
	background-color: green;
	color:#fff;


}
.bg-presentationpanel{
	background-color: #726f4e;
	color:white; 
	transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave para el color de fondo y texto */

}
.bg-presentationpanel:hover{
	color:blue;
	background-color: #dedbce;
}

    .img-container {
        overflow: hidden;
        position: relative;
    }

    .img-container img {
        transition: transform 0.3s ease;
        width: 100%;
        height: auto;
    }

    @media (min-width: 768px) {
        .img-container:hover img {
            transform: scale(1.9);
            position: absolute;
            z-index: 1;
        }
    }

.scrollable-div {
    max-height: auto; /* Ajusta la altura máxima según sea necesario */
    overflow-y: auto; /* Habilita el scroll vertical cuando el contenido excede la altura máxima */
}

.recipe-item {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.recipe-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.recipe-item.disabled {
    pointer-events: none;
    opacity: 0.5;
}
.recipe-item.selected {
    border: 2px solid #007bff;
}
.d-none {
    display: none !important;
}
.sidebars {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
    padding: 20px;
    z-index: 1050;
    transition: transform 0.3s ease-in-out;
}
.sidebars-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
    .scrollable {
        max-height: 400px;
        overflow-y: auto;
        border: 1px solid #ccc;
        padding: 10px;
        font-family: Arial, sans-serif;
        font-size:9px;
    }

    .ingredient {
        padding: 10px;
        border-bottom: 1px solid #eee;
    }

   

    .ingredient-name {
        font-weight: bold;
        margin-bottom: 6px;

    }

    .ingredient-details {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .ingredient-details > div {
        margin-right: 10px;
    }

   .ingredient-details sup {
        font-size: 6px;
        color:black;
    }
   .ingredient:last-child {
        border-bottom: none;
    }
    .status {
        display: flex;
        align-items: center;
    }

    .status i {
        margin-right: 5px;
    }

    .enough {
        color: green;
    }

    .not-enough {
        color: red;
    }
    .dangerBorder{
        border-bottom: solid 1px red;
        
    }
   .successBorder{
        border-bottom: solid 1px green;
        
    } 

    .card {
        transition: transform 0.3s, box-shadow 0.3s;
    }
    .card:hover {
        transform: scale(1.002);
        box-shadow: 0 6px 5px rgba(0, 0, 0, 0.3);
    }
    .icon-pending { color: orange; }
    .icon-distributed { color: green; }
    .icon-empty { color: gray; }
    .icon-cancelled { color: red; }
/*PARA LOS BARRILES EN DISTRIBUTIONS */
.barrel {
    width: 80px;
    height: 90px;
    background: #b5651d;
    border: 4px solid #8b4513;
    border-radius: 50px 50px 20px 20px;
    position: relative;
    display: inline-block;
    margin: 10px;
    text-align: center;
    cursor: pointer;
}

.barrel:before, .barrel:after {
    content: '';
    position: absolute;
    height: 15px;
    background: #8b4513;

    border-radius: 50px 50px 0 0;
}
.barrel:before{
     width: 70%;
     left: 11px;
     top: 4px;
}

.barrel:after {
    top: auto;
    bottom: 0;
    border-radius: 0 0 20px 20px;
    width: 98%;
    left: 0;
}

.barrel-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.barrel-id {
    display: block;
    color: white;
    font-size: 10px;
    margin-bottom: 5px;
}



.barrel-checkbox, .barril-checkbox {
    display: none;
}

.barrel-checkbox:checked + .barrel-label , .barril-checkbox:checked + .barrel-label  {
    border-bottom: 2px solid #4caf50; /* Cambia el borde cuando el checkbox está seleccionado */
    border-radius:6px;
}

.barrel-label {
    display: block;
    cursor: pointer;
}