/* --- Responsive Design for I Congreso Internacional de Directivos Docentes --- */

/* Apply styles for screens smaller than 992px (tablets and mobiles) */
@media (max-width: 992px) {
    /* Hide elements with mobile-hidden class only on mobile */
    .mobile-hidden {
        display: none !important;
    }

    /* --- Header & Navigation --- */
    /* Hide the desktop navigation links */
    #main-header .nav-links {
        display: none;
    }

/* Backdrop para menú móvil */
#nav-backdrop {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.35);
    z-index: 900; /* Debajo del header (1000) y del menú, encima del contenido */
}

body.nav-open #nav-backdrop {
    display: block;
}

/* Stacktable tuning for mobile (reubicado fuera de @media 992px) */
@media (max-width: 768px) {
    html, body { overflow-x: hidden; }
    /* Hide original table, show stacked version */
    .schedule-table:not(.meta-table) { display: none !important; }
    .meta-table {
        display: block !important;
        width: 100%;
        border: none !important;
        box-shadow: none !important;
    }

    .meta-table tr {
        display: block !important;
        width: 100%;
        margin-bottom: 1rem;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 1rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .meta-table td {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 0.5rem !important;
        border: none !important;
    }
    .stacktable.small-only { display: block !important; width: 100%; }
    .stacktable.small-only .st-head-row { background: var(--primary-color); color: var(--white-color); }
    .stacktable.small-only .st-key {
        font-weight: 700;
        color: var(--primary-color);
        text-transform: uppercase;
        font-size: 0.8rem;
        opacity: 0.9;
    }
    .stacktable.small-only .st-val {
        font-size: 0.95rem;
        line-height: 1.35;
        white-space: normal;
        word-break: break-word;
    }
    .stacktable.small-only tr {
        border: 1px solid #eee;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        margin-bottom: 1rem;
        display: block;
        padding: 0.5rem 0.75rem;
        background: #fff;
    }

    .schedule-table .schedule-meta-row {
        display: block !important;
        width: 100%;
        margin-bottom: 1rem;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 1rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    
    /* Hide the duplicate blue background rows in mobile view */
    .schedule-afternoon-block {
        display: none !important;
    }

    .schedule-table .schedule-meta-row td {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 0.5rem !important;
        border: none !important;
    }

    .sponsors-grid {
        grid-template-columns: 1fr;
    }
}

/* (removido el bloque 768px aquí; reubicado al final para evitar anidamiento inválido) */

    /* Show the mobile menu button (hamburger) */
    .mobile-menu-button {
        display: block;
        background: none;
        border: none;
        color: var(--primary-color);
        font-size: 1.8rem;
        cursor: pointer;
    }

    /* Style the mobile navigation container */
    #main-nav {
        display: none; /* Hidden by default */
        position: fixed; /* Keep menu attached to viewport */
        top: 64px; /* Approx header height */
        left: 0;
        right: 0;
        width: 100%;
        background-color: var(--white-color);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
        z-index: 2000; /* Above header/content */
        max-height: calc(100vh - 64px);
        overflow-y: auto;
    }

    /* Show the mobile navigation when active */
    #main-nav.active {
        display: block !important;
        /* Depuración visual temporal */
        outline: 2px dashed #e53935;
    }

    /* Fallback visual: si el body tiene nav-open, forzar que se vea el menú */
    body.nav-open #main-nav {
        display: block !important;
    }

    /* Stack the navigation links vertically */
    #main-nav .nav-links {
        display: flex !important;
        flex-direction: column;
        padding: 0.5rem 0;
        margin: 0;
        background: var(--white-color);
    }

    #main-nav .nav-links li {
        margin: 0;
        text-align: center;
    }

    #main-nav .nav-links a {
        display: block;
        padding: 1.1rem;
        border-bottom: 1px solid #f0f0f0;
        -webkit-tap-highlight-color: transparent;
    }

    #main-nav .nav-links a::after {
        display: none; /* Hide the animated underline */
    }

    /* Mostrar el botón 'Inscríbete' también en móvil */
    .header-cta {
        display: inline-block;
        margin-left: 0;
    }

    /* --- Hero Section --- */
    #hero {
        height: auto;
        min-height: 80vh;
        background-attachment: scroll; /* Disable fixed background on mobile to prevent issues */
        padding: 8rem 0 4rem 0;
    }

    #hero h1 { font-size: 2.5rem; }
    #hero h2 { font-size: 1.2rem; }

    /* --- Schedule Tables --- */
    .schedule-table {
        border: none;
        box-shadow: none;
    }
    
    .schedule-table thead {
        display: none; /* Hide the table header */
    }

    .schedule-table, 
    .schedule-table tbody, 
    .schedule-table tr, 
    .schedule-table td {
        display: block;
        width: 100%;
    }

    .schedule-table tr {
        margin-bottom: 1.5rem;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 1rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .schedule-table td {
        display: block; /* Change to block to stack content */
        padding: 0.8rem 0;
        text-align: left; /* Align all text to the left */
        border-bottom: 1px solid #f2f2f2; /* Add separator line */
    }

    .schedule-table tr td:last-child {
        border-bottom: none; /* Remove last separator line */
    }

    .schedule-table td::before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
        font-size: 0.8rem; /* Smaller font for the label */
        color: var(--primary-color);
        text-transform: uppercase;
        margin-bottom: 0.3rem;
    }
    
    .speaker-col, .event-col, .time-col {
        width: auto !important;
    }

    /* --- Work Tables & Speakers --- */
    .work-tables-grid {
        grid-template-columns: 1fr; /* Stack the cards vertically */
    }

}

/* Apply styles for screens smaller than 576px (small phones) */
@media (max-width: 576px) {
    /* --- General --- */
    body { font-size: 15px; }
    .container { padding: 0 1.5rem; }

    /* --- Hero Section --- */
    #hero h1 { font-size: 2rem; }
    #hero h2 { font-size: 1.1rem; }
    #hero .date { font-size: 0.9rem; padding: 0.5rem 1.5rem; }
    .country-flags img { height: 24px; }

    /* --- Sections --- */
    section { padding: 4rem 0; }
    .section-header h2 { font-size: 2rem; }
    .section-header p { font-size: 1rem; }

    /* --- About Section --- */
    .about-content { flex-direction: column; }
    .about-text, .about-map { flex: 1 1 100%; }
    .about-map { margin-top: 2rem; }

    /* --- Speakers --- */
    
    .speaker-card h4 { font-size: 0.9rem; }

    /* --- Themes --- */
    .theme-cards {
        grid-template-columns: 1fr;
    }

    /* --- Tabs --- */
    .tabs {
        flex-direction: column;
    }
    .tab-link {
        margin-bottom: 0.5rem;
        width: 100%;
    }

    /* --- Pricing --- */
    .pricing-grid { grid-template-columns: 1fr; }
    .pricing-card.featured { transform: scale(1); }

    /* --- Logos --- */
    .organizer-logos { flex-direction: column; gap: 2rem; }
}