/* * ESTILOS MÓVILES (RESPONSIVE)
 * Se cargan siempre, pero solo aplican visualmente en pantallas pequeñas.
 */

/* 1. REGLA GLOBAL: Ocultar elementos móviles en escritorio para evitar conflictos */
.aostmm-accordion-header, 
.aostmm-mobile-toggle {
    display: none !important;
}

/* 2. MEDIA QUERY: Solo aplicar esto en pantallas menores a 768px */
@media only screen and (max-width: 768px) {

    /* --- Mostrar elementos móviles --- */
    .aostmm-mobile-toggle {
        display: block !important;
        background: transparent;
        border: 1px solid #ccc;
        padding: 10px;
        border-radius: 4px;
        cursor: pointer;
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
    }
    .aostmm-mobile-toggle span {
        display: block;
        width: 25px;
        height: 3px;
        background-color: #333;
        margin: 5px 0;
        transition: 0.3s;
    }

    /* --- Ocultar elementos de escritorio --- */
    /* Ocultar la barra de pestañas original */
    .aostmm-tabs-nav {
        display: none !important;
    }

    /* --- Ajustes del Contenedor --- */
    .aostmm-nav-wrapper {
        position: relative;
        width: 100%;
    }

    .aostmm-nav-container {
        display: none; /* JS lo muestra con slideDown */
    }
    .aostmm-nav {
        flex-direction: column;
    }
    .aostmm-menu-item {
        width: 100%;
        display: block;
        border-bottom: 1px solid #eee;
    }

    /* Mega Menú en móvil */
    .aostmm-mega-menu {
        position: static !important;
        width: 100% !important;
        min-width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        box-shadow: none !important;
        border: none !important;
        padding-left: 15px;
    }

    /* --- ACORDEÓN (Elementos generados por JS) --- */
    .aostmm-accordion-header {
        display: flex !important; /* Los hacemos visibles en móvil */
        background-color: #f9f9f9;
        padding: 12px 15px;
        border-bottom: 1px solid #ddd;
        font-weight: 600;
        cursor: pointer;
        align-items: center;
        gap: 10px;
        transition: background 0.2s;
    }
    .aostmm-accordion-header:hover {
        background-color: #f1f1f1;
    }
    .aostmm-accordion-header.active {
        background-color: #eef7fb;
        border-bottom: none;
        color: #0073aa;
    }
    .aostmm-accordion-header .dashicons {
        font-size: 18px;
        width: 18px;
        height: 18px;
        line-height: 1;
    }

    /* Panel de contenido */
    .aostmm-tab-pane {
        border: 1px solid #eee;
        border-top: none;
        padding: 15px;
        display: none; /* Se oculta por defecto, JS lo abre */
    }
    .aostmm-tab-pane.active {
        display: block;
    }
}