﻿/*desplegable cotizador*/
/* Estilos para el contenedor del carrito de compras */
.shopping-cart-container {
    position: absolute;
    top: 100%; /* Posiciona justo debajo del botón Cotizar */

    z-index: 1200; /* Asegúrate de que esté por encima del resto de los elementos */
    width: 400px; /* Ajusta el ancho como necesites */
    background: rgba(255, 255, 255, 1); /* Fondo blanco semi-transparente */
    box-shadow: 0 4px 8px rgba(0,0,0,.05);
    border-radius: 15px;
    padding: 15px; /* Espacio interior para el contenido */
    display: none; /* Oculto por defecto */
    transform: translateX(-50%); /* Ajusta este valor para alinear con el botón */

    right: auto; /* Elimina el valor de right */
    left: 40%; /* Alinea respecto al lado izquierdo del botón */
    transform: translateX(-50%);
    box-shadow: 0 14px 18px rgba(0, 0, 0, 0.1);
}

/* Estilos para el área de los ítems del carrito */
.cart-content {
    background-color: #f5f4f4; /* Nuevo fondo gris claro */
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 10px;
    text-align: center;
    min-height: 150px;
}

/* Estilos para el ítem del carrito */
.item-style {
    background-color: #f5f4f4; /* Fondo blanco para cada ítem */
    border: 1px solid #f5f4f4; /* Borde sutil */
    border-radius: 4px; /* Bordes redondeados */
    padding: 10px; /* Espaciado interno */
    margin-bottom: 2px; /* Espacio entre ítems */
    display: flex; /* Flexbox para alinear contenido */
    justify-content: space-around; /* Distribuir el espacio alrededor de los elementos */
    align-items: center; /* Centrado vertical */
    font-size: 10px; /* Tamaño de fuente actualizado */
    font-weight: bold; /* Negrita para el texto */
    box-shadow: 0 14px 18px rgba(0, 0, 0, 0.1);
}

    .item-style .item-quantity,
    .item-style .item-hours {
        width: 67px; /* Ancho fijo para los inputs de cantidad y horas */
        margin-right: 5px; /* Espacio a la derecha del input */
    }

    .item-style .item-description {
        flex-grow: 1; /* Permite que la descripción ocupe el espacio restante */
        margin-right: 5px; /* Espacio a la derecha de la descripción */
        text-align: left; /* Alineación del texto a la izquierda */
    }

    .item-style .delete-item-btn {
        margin-left: 5px; /* Espacio a la izquierda del botón */
    }

/* Estilos para los botones al final del carrito */
.cart-actions {
    margin-top: 50px;
    display: flex;
    flex-direction: column; /* Alinea los elementos en una columna */
    align-items: center; /* Centra los elementos horizontalmente */
    gap: 10px; /* Espacio entre los elementos */
}

    /* Estilos para los botones al final del carrito */
    .cart-actions .btn {
        display: inline-block; /* Alinea los botones en línea */
        margin: 0 5px; /* Espacio horizontal entre los botones */
    }

/* Asegura que el botón Área Clientes y Cotizar estén alineados correctamente */
#btnIng {
    display: flex;
    justify-content: flex-end; /* Alinea los botones a la derecha */
    align-items: center;
    gap: 10px; /* Espacio entre los botones */
    text-align: center;
}

/* Corrige el z-index del botón Área Clientes si es necesario */
.btn-lightt {
    z-index: 1040; /* Menor que el del carrito para evitar superposición */
}

/* Corrige la posición y estilo del botón Cotizar */
.btn-cotizar {
    position: relative;
    z-index: 1050; /* Mayor que el del carrito para que se vea encima */
}

.btn-cotizar2 {
    position: relative;
    z-index: 1050; /* Mayor que el del carrito para que se vea encima */
    width: 200px;
}

/*boton eliminar item carrito*/
.delete-item-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #FF6702; /* O el color que prefieras para el ícono */
    font-size: 1.3em; /* Ajusta el tamaño del ícono según necesites */
    padding: 0;
    margin-left: 5px; /* Añade espacio entre el texto y el ícono */
}

.item-description, .item-hours {
    /* // flex: 1;  Cada elemento ocupa el espacio disponible */
    width: 55px;
}

/* Elimina el fondo gris oscuro que tenías antes */
.cart-content {
    background-color: transparent; /* Fondo transparente */
}
/* Estilos para el ícono de la basura al pasar el mouse */
.delete-item-btn:hover {
    color: #e65c00; /* Cambia el color al pasar el mouse */
}


/*fin desplegar cotizador*/
