/* === MOBILE OVERRIDES - ULTRA SIMPLIFIED === */

@media (max-width: 768px) {

    /* --- PASO 1: FORZAR LÍMITES GLOBALES --- */
    * {
        box-sizing: border-box !important;
    }

    html {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding-bottom: 70px !important;
        position: relative;
    }

    .container,
    header,
    main,
    section {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* --- PASO 2: MENÚ INFERIOR SIMPLIFICADO --- */
    .mobile-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        /* NO usar width, dejar que left/right determinen el ancho */
        display: flex !important;
        justify-content: space-evenly !important;
        align-items: center !important;
        gap: 0 !important;
        background: rgba(11, 12, 21, 0.98) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 8px 5px !important;
        z-index: 9999 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .mobile-bottom-nav .nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 3px !important;
        margin: 0 !important;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.6rem;
        /* Más pequeño */
        min-width: 0 !important;
        max-width: 20% !important;
        /* Forzar límite */
        flex: 1 1 0 !important;
    }

    .mobile-bottom-nav .nav-item ion-icon {
        font-size: 1.2rem;
        /* Más pequeño */
        margin-bottom: 2px;
    }

    .mobile-bottom-nav .nav-item span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        display: block;
    }

    .mobile-bottom-nav .nav-item.active {
        color: var(--accent, #6c5ce7);
    }

    .mobile-bottom-nav .nav-avatar {
        width: 18px;
        /* Más pequeño */
        height: 18px;
        border-radius: 50%;
        margin-bottom: 2px;
    }

    /* --- PASO 3: HEADER SIMPLIFICADO --- */
    header .logo,
    header .logo img {
        max-width: 120px !important;
        height: auto !important;
    }

    header .container.nav-wrapper {
        padding: 0 10px !important;
    }

    /* --- PASO 4: LISTAS HORIZONTALES --- */
    .grid-animes,
    .grid-episodes {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .anime-card,
    .episode-card {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        height: 85px !important;
        background: rgba(31, 33, 46, 0.8) !important;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .anime-card a.poster-wrapper,
    .anime-card>a,
    .episode-card .thumb-wrapper {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        height: 100% !important;
        flex: 0 0 60px !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative;
    }

    .anime-card img,
    .episode-card img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .anime-card .anime-info,
    .episode-card .card-info {
        flex: 1;
        padding: 8px 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
    }

    .anime-card .card-title,
    .episode-card .anime-title {
        font-size: 0.9rem;
        margin: 0 0 4px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: white;
    }

    .card-type-badge,
    .episode-number {
        font-size: 0.7rem;
    }

    /* --- PASO 5: CHAT DOCK --- */
    #chat-dock {
        bottom: 75px !important;
        right: 10px !important;
    }

    /* --- PASO 6: HERO SLIDER --- */
    .hero-slider {
        margin-top: 60px;
        height: 350px !important;
    }

    .hero-title {
        font-size: 1.5rem !important;
    }
}