:root {
  --bs-font-sans-serif: 'Roboto', sans-serif;
}



body {
    background: #eee;
    font-family: var(--bs-font-sans-serif);
}

.fondoinput{
    
    background-color: #e5e8ee; 
}


/* Añade este estilo a tu archivo CSS */
.custom-file-upload {
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 4px;
    color: #495057;
}

.custom-file-upload input[type="file"] {
    display: none;
}
/* Añade este estilo a tu archivo CSS */
.placeholder-invisible::placeholder {
    color: rgba(0, 0, 0, 0.2); /* Color casi invisible */
    opacity: 1; /* Necesario para algunos navegadores */
}

   .btn-custom {

            color: black;
            border-radius: 50px;
            display: flex;
            align-items: center;
            padding: 10px 20px;
        }
        .btn-custom img {
            width: 24px;
            height: 24px;
            margin-right: 10px;
        }



.input-group {
    position: relative; /* Asegura que los elementos hijos se posicionen en relaci贸n a este contenedor */
}

#suggestionsClientes {
    position: absolute;
    top: 100%; /* Justo debajo del input */
    left: 0;
    right: 0;
    z-index: 9999; /* Asegura que el div est茅 sobre todos los otros elementos */
    background-color: #fff; /* Fondo blanco para la lista */
    
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* A帽ade sombra para destacar el div */
}




.red-circle {
  width: 30px; /* Tamaño del círculo */
  height: 30px;
  background-color: red; /* Color rojo */
  border-radius: 50%; /* Para hacerlo circular */
}

.checkbox-lg {
  transform: scale(1.5); /* Ajusta el valor para aumentar o disminuir el tamaño */
}
    
    
    /* Ocultar la barra de scroll */
#cuadricula2 {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

#cuadricula2::-webkit-scrollbar {
    display: none; /* Chrome, Safari y Opera */
}


/* Ajustar texto */
.mt-2.text-center {
    font-size: 0.9rem;
    font-weight: 500;
    color: #555;
}

  

.bg-atrasTexto {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    background-size: cover;
    background-position: center;
    border-top-left-radius: 6px; /* Ajusta el valor según el radio deseado */
    border-top-right-radius: 6px; 
}


.dashboard-content.desenfocado {
  filter: blur(15px); /* Aplica el efecto de desenfoque solo al body */
}

/* Estilo general del sidebar */
#side_nav {
    background: white;
    font-size: smaller;
    transition: all 0.3s ease; /* Animación suave */
    position: fixed;
    top: 0;
    left: 0;
    min-height: 100vh;
    width: 60px; /* Ancho inicial para mostrar solo los íconos */
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding: 10px 0; /* Espaciado interno vertical */
    overflow-y: auto; /* Scroll si el contenido excede */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

/* Sidebar expandido */
#side_nav.active {
    width: 250px; /* Ancho para mostrar íconos y nombres */
}

/* Lista dentro del sidebar */
ul {
    list-style: none; /* Sin viñetas */
    padding: 0;
    margin: 0;
}

/* Elementos de la lista */
li {
    display: flex;
    align-items: center;
    height: 60px; /* Altura uniforme */
    padding: 0 10px; /* Espaciado horizontal */
    border-bottom: 1px solid #eaeaea;
}

.divicono {
    align-items: center;
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 50%;
    font-size: 1.5rem;
    color: #555;
}

.divtexto {
    display: flex; /* Asegura visibilidad */
    align-items: center;
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-left: 10px;
}


/* Mostrar texto cuando el sidebar está activo */
#side_nav.active .divtexto {
    display: flex; /* Mostrar texto */
}

/* Transición para que la expansión sea suave */
.divicono, .divtexto {
    transition: all 0.3s ease;
}

/* Imagen del logotipo */
img.rounded-circle {
    object-fit: cover; /* Ajusta la imagen */
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Responsive para dispositivos pequeños */
@media (max-width: 767px) {
    #side_nav {
        width: 60px; /* Menú más estrecho en móviles */
    }

    #side_nav.active {
        width: 200px; /* Menú expandido más pequeño en móviles */
    }
    li {
        height: 60px;
    }
}




.diviconoLogo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px; /* Tamaño fijo para la imagen */
    height: 60px;
    background-color: #f5f5f5; /* Fondo opcional */
    border-radius: 50%; /* Imagen circular */
}

.divtextoLogo {
    display: none; /* Ocultar texto inicialmente */
    text-align: center; /* Centrar texto */
    font-size: 0.875rem; /* Tamaño del texto */
    color: #333;
}

/* Mostrar el texto cuando el sidebar está activo */
#side_nav.active .divtextoLogo {
    display: block; /* Mostrar texto */
    margin-top: 8px; /* Espaciado entre imagen y texto */
    text-align: center;
}

/* Transición suave */
.diviconoLogo, .divtextoLogo {
    transition: all 0.3s ease;
}




.img-size-48 {
  width: 48px;
  height: 48px;
}

.img-size-75 {
  width: 75px;
  height: 75px;
}


.w-10{
    width: 10%;
}

.w-5{
    width: 5%;
}


.img-size-127 {
  width: 127.767px;
  height: 127.767px;
}


.text-right {
  text-align: right;
}

.text-right {
  text-align: left;
}

.content{
    min-height:100vh;
    width:100%;
    margin-left:75px;
    margin-right:20px;
    margin-top:5px;
    font-size: 12px;
}

.h-color {
    color: #5F6368;
}


.icon-style {
  margin: 0 0 0 190px;
  font-size: 25px;
}

.icon-style2 {
  margin: 0 0 0 0;
  font-size: 18px;
}


/*.sidebar li.active {*/
/*    background: #eeeeee;*/
/*    border-radius: 8px 0 0 8px;*/
/*    margin: 8px 0 0 8px;*/
/*    color:white;*/
/*}*/





/*.sidebar li.active a,*/
/*.sidebar li.active a:hover {*/
/*      color: #5f6368;*/
      
/*}*/

/*.sidebar li.active .textoBlanco,*/
/*.sidebar li.active .textoBlanco:hover {*/
/*      color: #5f6368;*/
/*}*/



.moduloHover {
  color: #5F6368;
}


.moduloHover .active a: {
      color: white;
}



.sidebar li a {
    color: #5F6368;
}


    
    .marginLeft{
        margin-left:250px;
    }
    
    



#preview {
    max-width: 100%;
    max-height: 100%;
    margin-top: 20px;
}
.dropdown-toggle::after {
    display: none;
}
.pagination .page-item {
    margin: 0 5px;
}
.pagination .page-link {
    border: none;
    color: #007bff;
}
.pagination .page-item.active .page-link {
    background-color: #007bff;
    color: white;
    border-radius: 5px;
}

.form-control:focus {
  color: inherit;
  background-color: inherit;
  border-color: inherit;
  outline: none;
  box-shadow: none;
}

.pagination .page-link:hover {
    text-decoration: none;
    background-color: #f1f1f1;
    border-radius: 5px;
}

.pagination .page-item .page-link {
    color: #6c757d; /* Cambia este color al que prefieras */
}

.pagination .page-item.active .page-link {
    background-color: #6c757d; /* Cambia este color al que prefieras */
    color: white;
    border-radius: 5px;
}

.pagination .page-link:hover {
    color: #6c757d; /* Cambia este color al que prefieras */
    text-decoration: none;
    background-color: #f1f1f1;
    border-radius: 5px;
}



.pedido-container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Altura total de la ventana */
    background: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.pedido-header,
.pedido-footer {
    flex: 0; /* Mantener altura natural */
    padding: 16px;
}

.pedido-header {
    border-bottom: 1px solid #ddd;
}

.pedido-body {
    flex: 1; /* Ocupa el espacio restante */
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Scroll si el contenido excede */
}

.pedido-productos {
    flex: 1; /* Ocupa espacio restante */
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 10px;
}

.pedido-buttons {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding: 16px;
    border-top: 1px solid #ddd;
}

.pedido-buttons .btn {
    flex: 1; /* Los botones ocupan el mismo ancho */
}


/* Estilo general del botón circular */
.btn-icon-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border: 2px solid transparent;
    border-radius: 50%;
    background-color: #f5f5f5;
    font-size: 1.5rem;
    color: #555;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-icon-circle:hover {
    background-color: #e0e0e0;
    border-color: #007bff;
    color: #007bff;
}

.btn-check:checked + .btn-icon-circle {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

/* Estilo del texto pequeño debajo del ícono */
.label-text {
    font-size: 0.75rem;
    color: #333;
    margin-top: 5px;
}

/* Alinear el contenido centrado */
.text-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}


@media (max-width: 768px) {
    .btn-icon-container {
        margin: auto;
    }

    .btn-icon-circle {
        width: 50px;
        height: 50px;
    }

    .label-text {
        font-size: 0.75rem;
    }
}