/* style.css */

/* Forzar scroll vertical y prevenir saltos horizontales */
html {
    overflow-y: scroll;
    scrollbar-width: thin; /* Para Firefox */
    scrollbar-color: #CBD5E0 #F1F5F9; /* Para Firefox */
}

/* Estilos para la barra de scroll en WebKit */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #F1F5F9;
}

::-webkit-scrollbar-thumb {
    background-color: #CBD5E0;
    border-radius: 4px;
    border: 2px solid #F1F5F9;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #94A3B8;
}

/* Prevenir scroll horizontal */
html, 
body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Gradiente del header */
.gradient-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Contenedor principal */
.main-container {
    width: 100%;
    max-width: 1280px; /* o max-w-7xl en Tailwind */
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Links de navegación */
.nav-link {
    color: #fff;
    opacity: 0.8;
    transition: all 0.2s;
}

.nav-link:hover {
    opacity: 1;
}

.nav-link.active {
    opacity: 1;
    font-weight: 500;
}

/* Animaciones suaves */
.transition-all {
    transition: all 0.2s ease-in-out;
}

/* Sombras consistentes */
.shadow-custom {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Tarjetas y contenedores */
.card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Responsive padding para el contenido principal */
@media (min-width: 768px) {
    .main-content {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

@media (max-width: 767px) {
    .main-content {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}