/* 
   ORIZON GRADUACIONES - MOBILE FIXES v1.0
   Separated from index.html to protect Desktop integrity.
   All changes here affect ONLY screens smaller than 900px.
*/

@media (max-width: 900px) {

    /* 1. LAYOUT & OVERFLOW */
    html,
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        padding-left: 5px !important;
        /* Requested global left margin */
    }

    /* 2. HEADER & MENU OVERLAY */
    header {
        padding: 0.5rem 0;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        background: #000;
        border-bottom: 1px solid #111;
    }

    body {
        padding-top: 60px;
    }

    nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 1rem;
    }

    .logo img {
        height: 35px !important;
        width: auto;
    }

    #mobile-menu-btn {
        display: block !important;
        background: transparent;
        border: none;
        color: #F37021;
        /* FIX 1: Orange Hamburger */
        cursor: pointer;
        z-index: 10001;
        position: relative;
    }

    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #000;
        display: flex !important;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 1rem;
        padding-top: 5rem;
        z-index: 10000;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.6s ease-in-out, visibility 0.6s;
        /* FIX 2: Slower transition */
        margin: 0;
        overflow-y: auto;
    }

    .nav-actions {
        display: flex !important;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        align-items: center;
        margin-top: 1rem;
        order: 99;
        padding-bottom: 2rem;
    }

    /* OPEN STATE */
    nav.nav-open .nav-links {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nav-links li {
        list-style: none;
        text-align: center;
    }

    .nav-links a {
        font-size: 1.1rem !important;
        color: #fff;
        font-weight: 600;
        text-decoration: none;
    }

    .nav-links a::before {
        content: none !important;
    }

    /* Buttons in Menu - FIX 3: STATIC BEHAVIOR & VISIBILITY */
    /* DEFAULT: HIDE NAV ACTIONS ON MOBILE (Stop floating everywhere) */
    .nav-actions {
        display: none !important;
    }

    /* REMOVED: Previous fix using nav-open sibling selector. 
       We are now injecting items directly into .nav-links so no hack logic needed. 
    */

    .sticky-cta,
    .student-access-btn {
        width: 80%;
        max-width: 250px;
        font-size: 0.85rem !important;
        padding: 0.8rem !important;
        text-align: center;
        display: block;
        border-radius: 50px;
        /* Force static behavior inside menu */
        position: relative !important;
        transform: none !important;
        margin: 0 auto !important;
        float: none !important;
        left: auto !important;
        bottom: auto !important;
        right: auto !important;
    }

    /* FIX 4 & 5: Typography Margins & Sizes */
    .about-section .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        overflow-x: hidden;
    }

    /* OVERRIDE INLINE STYLES FOR TYPOGRAPHY */
    .about-section .fade-in-up h1,
    .about-section h1 {
        font-size: 1.8rem !important;
        /* Reduced further */
        line-height: 1.1 !important;
        max-width: 95%;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block;
    }

    .about-section .fade-in-up h2 {
        font-size: 1.5rem !important;
        /* Reduced further */
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100%;
    }

    /* "Aquí comienza tu horizonte" specific span fix if needed */
    .about-section span[style*="var(--accent)"] {
        display: inline-block;
        /* Prevent weird breaks */
    }

    /* Fixed Hero Title */
    .hero-content h1 {
        font-size: 1.8rem !important;
    }

    /* Line "Ejecucion Impecable" margin fix */
    .about-section .fade-in-up div[style*="display: flex"] {
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 2rem !important;
        padding: 0 1rem;
    }

    /* 3. HERO SECTION & TITLES (Smaller) */
    .hero-content h1 {
        font-size: 1.3rem !important;
        line-height: 1.1;
        margin-top: 1rem;
        padding: 0 1rem;
    }

    .hero-content h1 .text-accent {
        font-size: 1.6rem !important;
        display: block;
        margin-top: 0.2rem;
    }

    .hero-content p {
        font-size: 0.8rem !important;
        padding: 0 1rem;
    }

    h2,
    .section-title {
        font-size: 1.4rem !important;
    }

    /* Graduate Section Button Fix (Sesión Button) */
    .graduate-access-section .btn {
        padding: 1rem 1.5rem !important;
        font-size: 0.9rem !important;
        width: auto !important;
        max-width: 90%;
        white-space: nowrap !important;
        /* Prevent "Sesión" wrap */
        display: inline-block;
    }

    /* 4. FORMS (Compact & Styled) */
    .contact-wrapper,
    .contact-form {
        padding: 1rem !important;
        width: 100% !important;
        margin: 0 !important;
        border: none;
    }

    /* Cursive Title for Form */
    .contact-form h2 {
        font-family: 'Playfair Display', serif !important;
        font-style: italic;
        font-size: 1.2rem !important;
        margin-bottom: 1.5rem;
        text-transform: none !important;
    }

    .form-group {
        width: 100% !important;
        margin-bottom: 0.8rem !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 0.8rem 1rem 0.8rem 2.8rem !important;
        font-size: 0.9rem !important;
        height: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ORANGE ICONS ONLY */
    .input-icon {
        left: 1rem !important;
        width: 18px;
        height: 18px;
        color: #F37021 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .input-icon svg {
        stroke: #F37021 !important;
        width: 18px !important;
        height: 18px !important;
    }

    .contact-submit-btn {
        padding: 0.8rem 2rem !important;
        font-size: 1rem !important;
        width: 100% !important;
    }


    /* 5. SERVICES & LISTS (Clean) */
    .services-compass {
        display: none !important;
    }

    .services-details-stack {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 0 1rem 2rem;
    }

    .detail-block {
        text-align: center;
        padding-bottom: 1.5rem;
        position: relative;
    }

    .detail-block h3 {
        font-size: 1.4rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* ORANGE LINE INDICATOR */
    .detail-block::after {
        content: '';
        display: block;
        width: 40px;
        height: 3px;
        background: #F37021;
        margin: 1.5rem auto 0;
        border-radius: 2px;
    }

    .detail-block:last-child::after {
        display: none;
    }

    .detail-block ul {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.8rem !important;
        text-align: left;
        padding: 0;
        margin-top: 1rem;
    }

    .detail-block ul li {
        font-size: 0.8rem !important;
        display: flex;
        align-items: flex-start;
        list-style: none !important;
        padding-left: 0 !important;
    }

    .detail-block ul li::before,
    .detail-block ul li::after {
        content: none !important;
        display: none !important;
    }


    /* 6. FEATURES SCROLL & INDICATOR */
    .features-grid {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        gap: 1rem;
        padding-bottom: 1.5rem;
        width: 100%;
        position: relative;
    }

    /* Text Indicator */
    #ventajas::after {
        content: 'Desliza para ver más →';
        display: block;
        text-align: center;
        color: #F37021;
        font-size: 0.75rem;
        margin-top: 0.5rem;
        font-weight: 600;
    }

    .feature-card {
        min-width: 250px !important;
        width: 250px !important;
        scroll-snap-align: center;
        margin: 0 !important;
        padding: 1.5rem !important;
    }

    .feature-card h3 {
        font-size: 1.1rem !important;
    }


    /* 7. FOOTER */
    section {
        padding: 2.5rem 1rem !important;
    }

    .graduate-access-section {
        padding: 3rem 0 !important;
    }

    .footer-content {
        padding-top: 2rem !important;
        padding-bottom: 0.5rem !important;
        gap: 1rem !important;
        flex-direction: column !important;
    }

    .copyright {
        font-size: 0.6rem !important;
        margin-bottom: 0.5rem;
    }


    /* FIX 7: SOCIAL ICONS IN MENU (3 Icons, Right Aligned?) 
       User asked for "pegados del lado derecho" but usually inside a centered menu 
       it looks better centered. However, if requested right aligned in other contexts,
       I will keep them centered in the menu overlay for aesthetics, but verify footer.
       Wait, user said "colocar los iconos... si respetamos margenes bien pueden ir pegamos del lado derecho".
       Let's align them to the right of the menu container if possible, or keep centered as it is a drawer.
       I will stick to 3 icons (FB, IG, WA) and ensure spacing.
    */
    .mobile-social-menu {
        display: flex;
        gap: 1rem;
        margin-top: 2rem;
        justify-content: center;
        /* Keeping center for menu overlay balance */
        padding-right: 0;
    }

    .social-link {
        width: 40px;
        height: 40px;
        background: transparent;
        border: 1px solid #F37021;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }

    .social-link svg {
        width: 20px;
        height: 20px;
    }

    body>.social-sidebar,
    .social-sidebar {
        display: none !important;
    }

    /* =========================================
       APP & DASHBOARD MOBILE FIXES
       ========================================= */

    /* FIX 6 & 8: Login Page Inputs & Button */
    .app-body .login-container {
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh;
    }

    .app-body .login-brand-side {
        width: 100% !important;
        height: 250px !important;
        padding: 2rem !important;
    }

    .app-body .login-form-side {
        width: 100% !important;
        padding: 2rem 1rem !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Center horizontally */
        justify-content: center;
        /* Center vertically if height allows */
        min-height: 60vh;
        /* Ensure vertical space */
    }

    .app-body .form-wrapper {
        width: 100%;
        max-width: 90vw !important;
        /* Force extremely wide logical width as requested */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .app-body .form-group {
        width: 100% !important;
        /* Full width of the larger container */
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .app-body .input-group input,
    .form-group input {
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        /* Correction for "Cells" appearance */
        background-color: #1a1a1a !important;
        border: 1px solid #333 !important;
        border-radius: 4px !important;
        height: 50px !important;
    }

    .app-body .btn-login {
        width: 95% !important;
        /* Match inputs */
        max-width: 400px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin-top: 1.5rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        white-space: normal !important;
        height: auto !important;
        min-height: 50px;
        padding: 12px 20px !important;
        font-size: 1rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    /* FIX 9: Dashboard Styles */
    .dashboard-container {
        flex-direction: column !important;
        overflow-x: hidden;
        /* Fix width detail */
        width: 100%;
    }

    /* Hide Sidebar by default on mobile */
    .app-sidebar {
        position: fixed;
        top: 0;
        left: -280px;
        /* Hidden */
        width: 280px;
        height: 100vh;
        z-index: 1000;
        transition: left 0.15s ease-out !important;
        /* Faster transition as requested */
        background: #000;
        /* Ensure bg */
    }

    .app-sidebar.active {
        left: 0;
        /* Visible */
    }

    .app-main {
        width: 100% !important;
        padding: 1rem !important;
        padding-top: 5rem !important;
        /* increased space for header */
        padding-left: 1.5rem !important;
        /* Shifting content right as requested */
    }

    /* Mobile Dashboard Header/Toggle */
    .mobile-dashboard-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center;
        padding: 10px 15px;
        /* Safe Area padding increased significantly to avoid Notch clipping */
        padding-left: max(30px, env(safe-area-inset-left)) !important;
        padding-right: max(30px, env(safe-area-inset-right)) !important;
        background: #000;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        border-bottom: 1px solid #333;
    }

    /* Hide the Duplicate Hamburger in Content */
    .btn-toggle-menu {
        display: none !important;
    }

    /* Hide the Content Header Logo on Mobile (Duplicate) - ONLY IN DASHBOARD (.app-body) */
    .app-body .header-logo {
        display: none !important;
    }

    /* Improve Menu Button Touch Target */
    #dashboard-menu-btn {
        padding: 20px !important;
        /* Increased from 10px for better clickability */
        margin: -10px;
        /* Negative margin to offset padding layout shift */
    }

    /* Text Colors Fix & Indentation */
    .section-header h3,
    .widget h3 {
        color: #fff !important;
    }

    /* Indent Welcome Text (Hola/Bienvenido) - Removed CSS padding to use HTML spaces as requested */
    .header-welcome h1,
    .header-welcome .welcome-text {
        /* padding-left removed */
    }

    /* Reduce Sidebar Spacing by Half - Tightened further */
    /* Reduce Sidebar Spacing - Balancing (Not too big, not too small) */
    .sidebar-nav {
        gap: 0px !important;
        margin-top: 1rem !important;
        flex: unset !important;
        height: auto !important;
        justify-content: flex-start !important;
    }

    .nav-item {
        padding: 12px 1rem !important;
        /* Increased to 12px for better touch/spacing */
        min-height: 0 !important;
        margin-bottom: 0px !important;
    }

    /* Ensure Footer Integrates Visually */
    .sidebar-footer .nav-item {
        /* Inherits spacing but ensures it looks "connected" */
        width: 100% !important;
        box-sizing: border-box !important;
    }
}