/* css/public_menu.css */

/* 1. ESTILO DE LA NAVBAR (STICKY) */
.navbar-public {
    background-color: #ffffff !important;
    /*border-bottom: 1px solid var(--border-color);*/
    z-index: 1030; /* Por debajo del Offcanvas pero sobre el contenido */
}

/* 2. EL MENÚ OFFCANVAS (EL LATERAL) */
.offcanvas {
    background-color: #ffffff !important;
    border-left: 1px solid var(--border-color) !important;
    z-index: 9999 !important; /* Asegura que esté por encima de TODO */
    width: 300px !important; /* Ancho fijo para que no baile */
}

/* 3. CABECERA DEL MENÚ */
.offcanvas-header {
    padding: 1.5rem !important;
    background-color: #f8fafc; /* Un gris muy suave para diferenciar la cabecera */
}

.offcanvas-title {
    font-weight: 800 !important;
    color: var(--primary-dark);
}

/* 4. CUERPO DEL MENÚ Y LINKS */
.offcanvas-body {
    padding: 1.5rem !important;
}

.offcanvas-body .nav-link {
    color: #1e293b !important; /* Forzamos color oscuro para que sea visible */
    font-weight: 600;
    font-size: 1rem;
    padding: 1rem 0 !important;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s;
}

.offcanvas-body .nav-link:hover {
    color: var(--primary-blue) !important;
    padding-left: 5px !important;
}

/* 5. BOTONES DENTRO DEL MENÚ */
.offcanvas-body .btn-saas-menu {
    border-radius: 10px !important;
    padding: 12px !important;
    font-weight: 700 !important;
    margin-top: 10px;
}

/* Ocultar el botón de cerrar de Bootstrap que a veces sale desplazado */
.btn-close:focus {
    box-shadow: none !important;
}

/* Ajustes para el Menú Lateral en Móvil */



@media (max-width: 991.98px) {
    .offcanvas-body {
        padding: 2rem !important;
    }
    
    .offcanvas-body .nav-link {
        font-size: 1.1rem;
        font-weight: 600;
        padding: 1rem 0 !important;
        border-bottom: 1px solid #f1f5f9;
    }

    .offcanvas-body .btn-saas-menu {
        padding: 12px !important;
        font-size: 1rem;
    }
	
	.navbar-public .navbar-collapse {
        background-color: #ffffff; /* Fondo sólido para que no se vea lo de atrás */
        margin-top: 10px;
        padding: 20px;
        border-radius: 12px; /* Bordes redondeados para estilo SaaS */
        box-shadow: 0 15px 30px rgba(0,0,0,0.1); /* Sombra para dar profundidad */
        border: 1px solid var(--border-color);
    }

    .navbar-public .nav-item {
        border-bottom: 1px solid #f1f5f9; /* Separador sutil entre links */
        padding: 10px 0;
    }

    .navbar-public .nav-item:last-child {
        border-bottom: none;
    }

    /* Ajuste de los botones en móvil para que no se peguen */
    .navbar-public .btn-saas-menu {
        width: 100%;
        margin-top: 10px;
    }
	
	
	
	.navbar-public .container {
		/* Forzamos el mismo padding que el resto de contenedores de la web */
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.navbar-public .navbar-brand {
		/* Eliminamos el margen izquierdo que a veces traen los logos */
		margin-left: 0 !important;
		padding-left: 0 !important;
	}

	.navbar-public .navbar-toggler {
		/* Eliminamos el padding del botón hamburguesa para que el icono 
		   se alinee justo al borde derecho */
		padding-right: 0 !important;
		margin-right: 0 !important;
	}

	/* Ajuste para el icono dentro del toggler */
	.navbar-public .navbar-toggler i {
		line-height: 1;
		vertical-align: middle;
	}
		
	
}