/* Colores Corporativos Speed Bike */
:root {
    --speedbike-primary: #00C8FF;
    --speedbike-black: #101820;
    --speedbike-white: #F9F9F9;
}

.bg-speedbike-black { background-color: var(--speedbike-black) !important; color: var(--speedbike-white) !important; }
.bg-speedbike-primary { background-color: var(--speedbike-primary) !important; color: var(--speedbike-black) !important; }
.bg-speedbike-white { background-color: var(--speedbike-white) !important; }
.text-speedbike-primary { color: var(--speedbike-primary) !important; }
.text-speedbike-black { color: var(--speedbike-black) !important; }
.border-speedbike-primary { border-color: var(--speedbike-primary) !important; }

/* Global Override del Primary -> Cyan Corporativo */
.btn-primary, .btn-speedbike-primary {
    background-color: var(--speedbike-primary) !important;
    border-color: var(--speedbike-primary) !important;
    color: var(--speedbike-black) !important;
    font-weight: 600 !important;
}
.btn-primary:hover, .btn-speedbike-primary:hover {
    background-color: #00b0e0 !important; /* Un poco más oscuro */
    border-color: #00b0e0 !important;
    color: var(--speedbike-black) !important;
}
.bg-primary { background-color: var(--speedbike-primary) !important; color: var(--speedbike-black) !important; }
.text-primary { color: var(--speedbike-primary) !important; }

/* Puedes agregar estilos personalizados aquí para sobreescribir Bootstrap si es necesario */
.navbar-brand {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
}

.navbar-brand img, .offcanvas-logo {
    height: 45px;
    width: 45px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
    border: 2px solid var(--speedbike-primary);
    background-color: #fff;
    padding: 2px;
}

/* --- Arreglo para el Footer Pegajoso (Sticky Footer) --- */

body {
    /* Le decimos al body que use Flexbox y organice a sus hijos en una columna */
    display: flex;
    flex-direction: column;
    
    /* Asegura que el body ocupe como mínimo toda la altura de la ventana del navegador */
    min-height: 100vh; /* vh = viewport height */
}

main {
    /* Le dice al contenido principal que "crezca" y ocupe todo el espacio sobrante, 
       empujando el footer hacia abajo */
    flex-grow: 1;
}