/* ============================================
   TIPOGRAFÍA LEGACY
   ============================================ */

/* Importar fuentes de Google */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@300;400;500;600;700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Inter:wght@300;400;500;600;700&display=swap');

@font-face {
    font-family: 'verdanaregular';
    src: url('../fonts/verdana-webfont.eot');
    src: url('../fonts/verdana-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/verdana-webfont.woff2') format('woff2'),
         url('../fonts/verdana-webfont.woff') format('woff'),
         url('../fonts/verdana-webfont.svg#verdanaregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'verdanabold';
    src: url('../fonts/verdanab-webfont.eot');
    src: url('../fonts/verdanab-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/verdanab-webfont.woff2') format('woff2'),
         url('../fonts/verdanab-webfont.woff') format('woff'),
         url('../fonts/verdanab-webfont.svg#verdanabold') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* ============================================
   TEMA LEGACY - Colores personalizados
   ============================================ */

:root {
    /* Colores principales Legacy */
    --legacy-primary: #1089FF;
    --legacy-cyan: #00D4FF;
    --legacy-pink: #FF6B9D;
    --legacy-purple: #A78BFA;
    --legacy-gradient: linear-gradient(135deg, #FFE5F0 0%, #E5D4FF 50%, #D4E5FF 100%);
    --legacy-gradient-header: linear-gradient(135deg, #1089FF 0%, #00D4FF 100%);
    
    /* Fuentes */
    --font-display: 'Bebas Neue', sans-serif;
    --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================
   APLICAR TIPOGRAFÍA
   ============================================ */

/* Aplicar fuente principal a todo */
body,
html {
    font-family: var(--font-primary) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Títulos grandes - estilo Legacy con Bebas Neue */
h1, h2, h3,
.font-title--lg,
.font-title--md {
    /*font-family: var(--font-display) !important;*/
    font-family: 'verdanabold' !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Títulos secundarios - Poppins */
h4, h5, h6,
.font-title--sm,
.font-title--xs,
.font-title--card {
    font-family: var(--font-primary) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

/* Párrafos y texto corrido */
p,
.font-para--lg,
.font-para--md,
.font-para--sm {
    font-family: var(--font-secondary) !important;
    font-weight: 400 !important;
    line-height: 1.6;
}

/* Botones */
button,
.button,
.btn {
    font-family: var(--font-primary) !important;
    font-weight: 600 !important;
}

/* Navegación */
.nav-link,
.navbar-nav .nav-link {
    font-family: var(--font-primary) !important;
    font-weight: 500 !important;
}

/* Hero section - Bebas Neue destacado */
.hero-section h1,
.banner h1 {
    font-family: var(--font-display) !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Secciones de categorías y títulos principales */
.categories h2,
.section-title {
    font-family: var(--font-display) !important;
    text-transform: uppercase;
}

/* ============================================
   COLORES Y ESTILOS
   ============================================ */

/* Fondo general del body */
body {
    background: url('/images/legacy-bg.png') center center fixed !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    /* Fallback si la imagen no carga */
    background-color: #FFE5F0 !important;
}

/* Alternativa: si quieres que el fondo se repita en páginas largas */
body.repeat-bg {
    background: url('/images/legacy-bg.png') center top repeat-y !important;
    background-size: 100% auto !important;
}

/* Header/Navbar */
.navbar, .main-header {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(16, 137, 255, 0.1);
}

/* Botones primarios */
.button--primary,
.btn-primary,
button.button--primary {
    background: var(--legacy-gradient-header) !important;
    border: none !important;
    color: white !important;
}

.button--primary:hover,
.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* Cards y contenedores */
.card,
.contentCard,
.students-info-intro {
    background: white !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(16, 137, 255, 0.1) !important;
}

/* Enlaces */
a {
    color: var(--legacy-primary);
}

a:hover {
    color: var(--legacy-cyan);
}

/* Iconos de categorías */
.categories svg,
.category-item svg {
    fill: var(--legacy-cyan);
}

/* Footer */
footer {
    background: #2D3748 !important;
}

/* Breadcrumb */
.breadcrumb {
    background: transparent !important;
}

/* ============================================
   Tabs del Dashboard
   ============================================ */

/* Contenedor de tabs */
.students-info-intro__nav {
    background: white !important;
    border-radius: 15px !important;
    padding: 5px !important;
    box-shadow: 0 5px 20px rgba(16, 137, 255, 0.1) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

/* Ocultar scrollbar pero mantener funcionalidad */
.students-info-intro__nav::-webkit-scrollbar {
    height: 4px;
}

.students-info-intro__nav::-webkit-scrollbar-thumb {
    background: rgba(16, 137, 255, 0.3);
    border-radius: 10px;
}

/* Tabs individuales */
.students-info-intro__nav .nav {
    display: flex !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    min-width: 100% !important;
}

.students-info-intro__nav .nav-link {
    padding: 10px 16px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    color: #718096 !important;
    background: transparent !important;
    border: none !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
    min-width: fit-content !important;
}

.students-info-intro__nav .nav-link:hover {
    background: rgba(16, 137, 255, 0.1) !important;
    color: var(--legacy-primary) !important;
}

/* Tab activo */
.students-info-intro__nav .nav-link.active {
    background: var(--legacy-gradient-header) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(16, 137, 255, 0.3) !important;
}

/* Links dentro de tabs (Profile, Home) */
.students-info-intro__nav .nav-link a {
    color: inherit !important;
    text-decoration: none !important;
    display: block !important;
}

/* Asegurar que los tabs no se compriman */
.students-info-intro__nav .nav-item {
    flex-shrink: 0 !important;
}

/* ============================================
   FIX: Dropdown menu z-index - REFORZADO
   ============================================ */

/* Header con z-index muy alto */
header,
.navbar,
.main-header,
nav.navbar {
    z-index: 9999 !important;
    position: relative !important;
}

/* Dropdown del header - z-index máximo */
.dropdown-menu,
.navbar .dropdown-menu,
header .dropdown-menu,
.nav-item .dropdown-menu {
    z-index: 99999 !important;
    position: absolute !important;
}

/* Contenedor del dropdown */
.dropdown,
.nav-item.dropdown,
header .dropdown,
.navbar .dropdown {
    position: relative !important;
    z-index: 10000 !important;
}

/* Cuando el dropdown está abierto */
.dropdown.show,
.nav-item.dropdown.show {
    z-index: 99999 !important;
}

/* IMPORTANTE: Todo el contenido debe estar debajo */
main,
.container,
.students-info,
.students-info-intro,
.legacy-dashboard-compact,
section,
.hero-section,
.contentCard,
.card {
    position: relative;
    z-index: 1 !important;
}

/* Asegurar que nada tape el dropdown */
body > * {
    position: relative;
}

body > header,
body > .navbar,
body > nav {
    z-index: 9999 !important;
}

/* Canvas y overlays del body */
.modal-backdrop {
    z-index: 1040 !important;
}

.modal {
    z-index: 1050 !important;
}


/* Responsive: