/* Estilos personalizados */

body {
    padding-bottom: 60px; /* Espacio para posible footer fijo */
}

#loading-spinner {
    /* Centrado si es necesario, ya tiene text-center en HTML */
}

/* Estilo para botones de acción en tablas */
.action-btn {
    margin-right: 5px;
    margin-bottom: 5px; /* Espacio en pantallas pequeñas */
}

/* Ocultar elementos por defecto si es necesario */
/* .d-none ya existe en bootstrap */

/* Estilo para indicar estado visualmente (opcional) */
.status-activo {
    color: green;
    font-weight: bold;
}
.status-inactivo {
    color: red;
    font-weight: bold;
}

/* Asegurar que el spinner dentro del modal sea visible */
#edit-user-spinner {
   /* Estilos si son necesarios */
}

#user-list-spinner {
   /* Estilos si son necesarios */
}
.ui-autocomplete {
    /*
     * El z-index de los modales de Bootstrap es ~1050.
     * Le damos un valor más alto para que el menú de autocompletado
     * aparezca por encima del modal y su fondo oscuro (backdrop).
     */
    z-index: 1060 !important; 
    
    /* Estilos opcionales para que se vea mejor */
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

/* Estilo para el item seleccionado/hover */
.ui-menu-item-wrapper.ui-state-active {
    background: #0d6efd !important; /* Color primario de Bootstrap */
    color: #fff !important;
    border: none;
    border-radius: 0;
}
#articulo-modal.show {
    z-index: 1060; /* Un valor más alto que el z-index del primer modal */
}

/* 
  Cuando se abre el segundo modal, Bootstrap puede añadir un segundo backdrop.
  Asegurémonos de que este segundo backdrop esté por encima del primer modal
  pero por debajo del segundo.
*/
.modal-backdrop:nth-of-type(2) {
    z-index: 1059;
}
#bodega-stock-minimo-modal .modal-content {
  height: 90vh; /* Ocupa el 90% de la altura de la ventana */
  display: flex;
  flex-direction: column;
}

/* 2. El cuerpo del modal se expandirá para llenar el espacio sobrante. */
#bodega-stock-minimo-modal .modal-body {
  flex: 1 1 auto; /* Permite que el cuerpo crezca y se encoja */
  overflow-y: hidden; /* ¡Importante! El scroll NO estará directamente aquí */
  display: flex;
  flex-direction: column;
}

/* 3. EL CONTENEDOR DE LA TABLA es el que tendrá el scroll.
      Le decimos que ocupe todo el espacio de su padre (.modal-body). */
#bodega-stock-minimo-modal #stock-minimo-table-container {
  flex: 1 1 auto;
  overflow-y: auto; /* ¡AQUÍ ESTÁ EL SCROLL INTERNO! */
  overflow-x: hidden;
}
:root {
    --color-primario: #fecb00; /* Amarillo/Dorado del logo */
    --color-oscuro: #212529;   /* Negro del logo y navbar */
    --color-texto: #333;
    --color-blanco: #ffffff;
}

/* --- ESTILOS GENERALES Y BOTONES --- */
body {
    color: var(--color-texto);
}

.btn-primary {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
    color: var(--color-oscuro); /* Texto oscuro para mejor contraste sobre amarillo */
    font-weight: bold;
}

.btn-primary:hover {
    background-color: #e5b600; /* Un amarillo un poco más oscuro */
    border-color: #e5b600;
    color: var(--color-oscuro);
}

.btn-outline-primary {
    border-color: var(--color-primario);
    color: var(--color-primario);
}

.btn-outline-primary:hover {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
    color: var(--color-oscuro);
}

.text-primary {
    color: var(--color-primario) !important;
}

/* --- Hero Section --- */
.hero-section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/hero-background.jpg');
    background-size: cover;
    background-position: center center;
    height: 60vh;
    min-height: 400px;
}

/* --- Tarjetas de Producto --- */
.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
}
.product-card .card-img-top {
    height: 200px;
    object-fit: contain; /* 'contain' es mejor para productos que 'cover' */
    padding: 10px;
}
.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

/* --- Logos de Marcas --- */
.brand-logo {
    height: 40px;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}
.brand-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* --- Footer --- */
footer a.text-white:hover {
    color: var(--color-primario) !important;
}

/* --- Botón Flotante de WhatsApp --- */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}
.whatsapp-float:hover {
    transform: scale(1.1);
    color: white;
}