@import url("/static/css/footer.css");
@import url("/static/css/navbar.css");
@import url("/static/css/pup_up_toast.css");
@import url("/static/css/carrusel_img.css");
@import url("/static/css/body_productos.css");
@import url("/static/css/miPaleta.css");


/*  ========================================   */

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1; /* ocupa todo el espacio disponible */
}



/*  ========================================   */

:root {
    --fondo-principal: #F5F5F5;
}

body.fondo-dinamico {
    background-color: var(--fondo-principal);
}

.organizador-productos {
    padding: 2rem;
}

img.logo-nav {
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.cantidad-de-productos:focus {
    outline: none; /* quita el marco azul al hacer focus */
}


/* Chrome, Edge, Safari */
.cantidad-de-productos::-webkit-scrollbar {
    height: 6px;                /* altura horizontal */
}

.cantidad-de-productos::-webkit-scrollbar-track {
    background: #2c2c2c;        /* fondo del track */
    border-radius: 3px;
}

.cantidad-de-productos::-webkit-scrollbar-thumb {
    background-color: #f59e0b;  /* naranja suave, combina con botones */
    border-radius: 3px;
}

/* Firefox */
.cantidad-de-productos {
    scrollbar-width: thin;
    scrollbar-color: #f59e0b #2c2c2c; /* thumb color / track color */
}