/*FONDO DEL SISTEMA */
body {
    min-height: 100vh;
    margin: 0;
    font-family: 'Nunito', sans-serif;
    background: linear-gradient(135deg, #252e37, #385560, #659499);
    background-size: 400% 400%;
    /*animation: gradientBG 15s ease infinite;
    color: #ffffff; /* Texto por defecto */
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/*---------------------------------------------------------COLORES DE BOTONOES----------------------------------------------------------*/
.btn-warning {
    background-color: var(--amarillo);
    border: none;
}

.btn-danger {
    background-color: var(--naranja);
    border: none;
}

.btn-success {
    background-color: var(--dorado);
    border: none;
}
#Dv_Login {
    margin: 0;
    /* Elimina los márgenes predeterminados */
    padding: 0;
    /* Elimina el relleno predeterminado */
    height: 100vh;
    /* Ocupa toda la altura de la ventana */
    background-image: url('	https://wallpapers.com/images/high/neon-gas-and-car-4bm2h3s08ja0xpju.webp');
    /* Ruta de la imagen */
    background-size: cover;
    /* Ajusta la imagen para cubrir todo el espacio */
    background-position: center;
    /* Centra la imagen */
    background-repeat: no-repeat;
    /* Evita que la imagen se repita */
    overflow: hidden;
}
.card-login-title {
    font-family: 'Nunito', sans-serif; /* Fuente moderna y legible */
    font-size: 2rem;                   /* Tamaño grande pero elegante */
    font-weight: 700;                  /* Negrita para resaltar */
    color: #eab731;                    /* Dorado vibrante de tu paleta */
    text-align: center;                 /* Centrado dentro del card */
    letter-spacing: 2px;               /* Espaciado entre letras para estilo premium */
    margin-bottom: 20px;               /* Separación del resto del contenido */
    text-shadow: 1px 1px 2px #252e37;  /* Sutil sombra para profundidad */
    transition: color 0.3s ease;
}

/* Hover opcional si quieres un efecto interactivo */
.card-login-title:hover {
    color: #bc9d4b;  /* Dorado más oscuro al pasar el mouse */
}
.Card_Login{

    background-color: #3270885b;
    /* Fondo blanco con 70% de transparencia */
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* Borde blanco con transparencia */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Sombra suave */
    border-radius: 25px;
    /* Bordes redondeados */
    padding: 20px;
    /* Espaciado interno */

    text-align: center;
    /* Centrar texto */
    font-family: Arial, sans-serif;
    color: #333;
    /* Color del texto *
}
    html,
    body {
        height: 100%;
        /* Asegura que el body y el html ocupen el 100% de la altura de la ventana */
        margin: 0;
        overflow: hidden;
        /* Evita que haya scroll en el body */
    }
    .Card_Login button {
    margin-top: 5%;
    background-color: #640540;
    /* Azul */
    color: white;
    /* Texto blanco */
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.Card_Login input {
      background-color: #38556084;
    color: #ffffff;
    border: 1px solid #659499;
    padding: 10px 15px;
    border-radius: 15px;
}
.Card_Login input::placeholder {
    color: #659499;
}

.Card_Login input:focus {
    outline: none;
    border-color: #eab731;
    box-shadow: 0 0 5px #eab731;
}
.Card_Login button {
    background-color: #eab731;
    color: #252e37;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.Card_Login button:hover {
    background-color: #bc9d4b;
}

.nav_style {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
        height: 92px;
    max-height: 92px;
    background-color: #252e37; /* Fondo oscuro */
    z-index: 1000;
    text-align: center;
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.3s ease-in-out;
    border-top-left-radius: 1.5em;
    border-top-right-radius: 1.5em;

    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.nav_style .col-3 {
    flex: 0 0 auto;
    width: 25%;
}

.nav_style button {
    margin: 5px;   
    color: #252e37; /* Texto oscuro */
    border: none;
    border-radius: 10px;
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    
}



/* Lista de extras */
.lista-con-iconos {
    list-style-type: none;
    padding: 0;
}

.lista-con-iconos li {
    display: flex;
    align-items: center;
    font-size: 18px;
    color: #ffffff; /* Texto blanco para contraste */
    margin: 10px 0;
    transition: background-color 0.3s;
}

.lista-con-iconos li:hover {
    background-color: #659499; /* Azul suave de tu paleta */
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 5px;
}

.lista-con-iconos i {
    margin-right: 10px;
    font-size: 20px;
    color: #7b5e14cc; /* Iconos dorados para resaltar */
}


/*-----------------------------------------------index home ------------------------------*/
.Card_Pedido {
    height: 185px;
    max-height: 185px;
    min-height: 185px;
    color: white;
    margin-top: 12%;
    border-radius: 15px;
    border: none;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.Card_Pedido:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.4);
}

/* Card de Comprar */
.Card_Comprar {
    background: linear-gradient(135deg, #385560, #659499);
}

/* Card de Vender */
.Card_Vender {
    background: linear-gradient(135deg, #bc9d4b, #eab731);
}

.Card_Body_Pedido {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 15px;
}

/* Iconos grandes con animación */
.icon_Card_Pedido_Home {
    font-size: 4.5em;
    color: white;
    transition: transform 0.5s ease, text-shadow 0.5s ease;
}

.Card_Pedido:hover .icon_Card_Pedido_Home {
    transform: scale(1.2) rotate(10deg);
    text-shadow: 0 0 15px rgba(255,255,255,0.8);
}

/* Título de la card */
.Title_Card_Pedidos {
    margin-top: 15px;
    font-size: 1.2em;
    font-weight: 600;
    color: black;
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4);
}

/* Botón o icono secundario */
.icon_second_card_pedido {
    margin-top: auto;
    font-size: 1.8em;
    color: rgba(255,255,255,0.8);
    transition: color 0.3s ease;
}

.Card_Pedido:hover .icon_second_card_pedido {
    color: #fff;
}
/*--------------------------ANIMACIONES DE ENTRADA ******************************************/
/* Animación general para elementos que entran */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/*//////////////////////////////////////////////////////////////MENU DEL OFCANVAS DEL LADO IZQUIERO D*/
/* ==========================
   Offcanvas Lista de Ajustes
========================== */

/* Animación de entrada desde la izquierda */
@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Lista principal */
.lista-con-iconos {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* Elementos de la lista */
.lista-con-iconos li {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    padding: 12px 15px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: rgba(101, 148, 153, 0.15); /* color suave de la paleta */
    color: #eab731; /* texto principal */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    opacity: 0; /* empieza invisible */
    animation: slideInLeft 0.6s forwards;
}

/* Retraso progresivo para animación */
.lista-con-iconos li:nth-child(1) { animation-delay: 0.1s; }
.lista-con-iconos li:nth-child(2) { animation-delay: 0.25s; }
.lista-con-iconos li:nth-child(3) { animation-delay: 0.4s; }
.lista-con-iconos li:nth-child(4) { animation-delay: 0.55s; }

/* Íconos de la lista */
.lista-con-iconos i {
    margin-right: 12px;
    font-size: 1.4rem;
    color: #bc9d4b;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Hover en los elementos */
.lista-con-iconos li:hover {
    background: linear-gradient(90deg, #659499, #385560);
    color: #252e37;
    transform: translateX(5px); /* ligero movimiento */
    box-shadow: 4px 4px 15px rgba(0,0,0,0.3);
}

.lista-con-iconos li:hover i {
    transform: rotate(20deg);
    color: #eab731;
}

/* Offcanvas header */
.offcanvas-header {
    background: #252e37;
    color: #eab731;
    border-bottom: 1px solid #bc9d4b;
}

/* Título del Offcanvas */
.offcanvas-header h5 {
    font-weight: bold;
    letter-spacing: 1px;
}

/* Botón de cerrar */
.offcanvas-header .btn-close {
    filter: brightness(0) invert(1);
}

/* Offcanvas body */
.offcanvas-body {
    background: linear-gradient(135deg, #252e37 0%, #385560 50%, #659499 100%);
    padding-top: 15px;
}

/* Scroll si hay muchos items */
.offcanvas-body .row {
    max-height: 70vh;
    overflow-y: auto;
}

#offcanvasRightCompras{
    height: 90vh;
}

/**************************************************PROVEEDORES****************************************/
.proveedor-card {
    background-color: #385560;
    border-radius: 15px;
    border: none;
    transition: transform 0.3s, box-shadow 0.3s;
}
/* Estilo cuando el proveedor está desactivado */
.proveedor-card.desactivado {
    background-color: #2b333b; /* un tono más apagado */
    border: 2px solid var(--dorado);
    opacity: 0.6;
    filter: grayscale(40%);
    position: relative;
}

/* Overlay para marcar claramente que está desactivado */
.proveedor-card.desactivado::after {
    content: "DESACTIVADO";
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--naranja);
    color: #fff;
    padding: 3px 10px;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.2);
}

/* Sombra elegante */
.shadow-card {
    box-shadow: 0 10px 20px rgba(0,0,0,0.35);
}

.proveedor-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.5);
}
/* Hover desactivado (más suave) */
.proveedor-card.desactivado:hover {
    transform: scale(1.01);
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}
/* Títulos y textos */
.proveedor-card .card-title {
    color: #eab731;
    font-weight: 700;
    font-size: 1.2rem;
}

.proveedor-card .card-text {
    color: #f0f0f0;
    font-size: 0.9rem;
}

/* Botón */
.btn-proveedor {
    background-color: #bc9d4b;
    color: #252e37;
    border: none;
    border-radius: 50px;
    padding: 6px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-proveedor:hover {
    background-color: #da7a0e;
    color: #fff;
}
:root {
    --fondo-oscuro: #252e37;
    --azul-profundo: #385560;
    --azul-suave: #659499;
    --dorado: #bc9d4b;
    --amarillo: #eab731;
    --naranja: #da7a0e;
}


.formulario-proveedor {
    color: #fff;
    padding: 10px;
    height: 100%;
}

.formulario-proveedor .form-label {
    color: var(--amarillo);
    font-weight: 600;
}

.formulario-proveedor .form-control {
    background-color: var(--azul-suave);
    color: #fff;
    border: 1px solid var(--azul-profundo);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.formulario-proveedor .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.formulario-proveedor .form-control:focus {
    background-color: var(--azul-profundo);
    border-color: var(--dorado);
    box-shadow: 0 0 8px var(--dorado);
}

/* === Botón Guardar === */

.btn-guardar {
    background-color: var(--dorado);
    color: var(--fondo-oscuro);
    font-weight: bold;
    border: none;
    padding: 10px 35px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-guardar:hover {
    background-color: var(--amarillo);
    color: #000;
    transform: translateY(-2px);
}

/* Animación al aparecer el botón */
#contenedorGuardar {
    opacity: 0;
    transition: opacity 0.3s ease;
}

#contenedorGuardar.visible {
    display: block !important;
    opacity: 1;
}
/*******************************************INPUT DE BUSCAR*************************/
/* Contenedor del input */
.search-container {
    display: flex;
    width: 100%;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Input */
.search-input {
    flex: 1;
    padding: 10px 15px;
    border: none;
    outline: none;
    font-size: 1rem;
    background-color: #385560; /* Fondo paleta */
    color: #eab731; /* Texto paleta */
}

/* Placeholder */
.search-input::placeholder {
    color: #bc9d4b;
    opacity: 0.8;
}

/* Botón */
.search-btn {
    background-color: #bc9d4b; /* Botón paleta */
    color: #252e37; /* Texto paleta */
    border: none;
    padding: 0 15px;
    transition: background-color 0.3s;
}

.search-btn:hover {
    background-color: #da7a0e;
    color: #fff;
}
/**************************************************** BOTON DE AGREGAR *******************/
/* Botón agregar */
.btn-agregar {
    background-color: #eab731; /* Fondo dorado paleta */
    color: #252e37; /* Texto oscuro */
    border: none;
    border-radius: 12px;
    padding: 10px 18px;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.btn-agregar:hover {
    background-color: #da7a0e; /* Dorado más intenso */
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

/* Clase reusable para aplicar la animación */
.animate-fade-in-up {
    opacity: 0; /* Inicialmente invisible */
    animation-name: fadeInUp;
    animation-duration: 0.8s; /* Duración de la animación */
    animation-fill-mode: forwards; /* Mantiene el estado final */
    animation-timing-function: ease-out;
}

/* Puedes agregar retraso opcional con clases */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }


/*////////////////////////////////////////* ESTILOS PARA EL LISTADO DE PRODUCTOS ///////////////////////////////////////////////////////////////*/

    /*ITENTS DE FILTROS DE SUCURSALES */
.sucursal-filtros{
display:flex;
gap:10px;
overflow-x:auto;
padding:10px 0;
}

.chip{
border:none;
padding:8px 18px;
border-radius:20px;
background:#e4e6eb;
font-size:14px;
cursor:pointer;
white-space:nowrap;
transition:0.3s;
}

.chip:hover{
background:#d8dadf;
}

.chip.active{
background:#25D366;
color:white;
font-weight:500;
}
.sucursal-filtros::-webkit-scrollbar{
display:none;
}
    /*ITENTS DE FILTROS DE SUCURSALES FIMMMMMMMMMMMMMMMMMMMMMMMMMMM*/