html {
    font-size: 14px;
}




.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}


/* -------------------------------------------------
   Overrides para mostrar 5 columnas en lg+
   ------------------------------------------------- */
.row-cols-lg-5 {
    --bs-columns: 5;
}


/* -------------------------------------------------
   Tarjetas de calzado: imagen fija y flex layout
   ------------------------------------------------- */

/* Hace que la imagen llene el ancho, tenga altura fija y 
   se recorte proporcionalmente */
.card-img-top {
    width: 100%;
    height: 200px; /* ajústalo al alto que prefieras */
    object-fit: cover;
}

/* Estructura flex para igualar altura total de la tarjeta */
.calzado-card {
    display: flex;
    flex-direction: column;
}

    /* Empuja el contenido (código/nombre) al pie de la tarjeta */
    .calzado-card .card-body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: end;
    }

        /* Opcional: elimina márgenes extra en textos */
        .calzado-card .card-body h6,
        .calzado-card .card-body p {
            margin: 0;
        }

/* Haz que .container sea full-width sólo en esta página */
.fullwidth-container {
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
}

/* Garantiza que el flex container ocupe todo el viewport */
html, body {
    height: 100%;
}

/* Asegura que el main crezca para empujar el footer abajo */
main.flex-grow-1 {
    flex: 1 1 auto; /* ya tienes flex-grow-1, esto refuerza el comportamiento */
    display: block; /* por si acaso */
}

/* Footer visual: se queda abajo y no cubre contenido */
footer {
    width: 100%;
    /* mt-auto en el markup ya empuja el footer abajo en el flex container */
}


/* Ajusta NAVBAR_HEIGHT si tu navbar tiene otra altura (56px es el valor por defecto de Bootstrap) */
.auth-wrapper {
    min-height: calc(100vh - 150px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0; /* opcional */
    padding-bottom: 0; /* opcional */
}



/*
    -------------------------------------------------
    Estilos para el formulario de LAYOUT/ADMIN
    -------------------------------------------------
*/

/* Sidebar base oscuro */
/* Sidebar fija a la izquierda */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100vh; /* ocupa la altura de la ventana */
    overflow-y: auto; /* scroll interno si el contenido supera la altura */
    z-index: 1030; /* por encima del contenido principal */
    background-color: #121212;
    color: #fff;
    border-right: 1px solid rgba(255,255,255,0.04);
}

/* Ajustar el contenido principal para no quedar oculto por la sidebar */
.admin-main {
    margin-left: 240px; /* igual que el width de .sidebar */
}

/* Si tu navbar superior también debe quedar bajo la sidebar, ajusta contenedor */
.navbar + .admin-main {
    padding-top: 0; /* opcional si usas navbar fixed-top */
}

/* Asegurar que el footer/otros se comporten bien */
@media (max-width: 767.98px) {
    .sidebar {
        position: relative;
        width: 100%;
        height: auto;
    }

    .admin-main {
        margin-left: 0;
    }
}


/*
    -------------------------------------------------
    Estilos para el formulario de detalle de calzado
    -------------------------------------------------
*/