/* ═══════════════════════════════════════════════════════════
   YouAnime — responsive.css
   Todas las media queries. Se carga SIEMPRE al final.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════ HEADER ═══════════════════════ */
@media (max-width: 1100px) {
    .app-nav { display: none; }
    .app-icon-btn--mobile { display: inline-flex; }
    .app-search { max-width: 280px; }

    .app-icon-btn--admin {
        margin-left: 0;
        box-shadow: 0 0 12px rgba(168, 85, 247, 0.25);
    }
}

@media (max-width: 700px) {
    .app-header__inner {
        gap: 6px;
        padding: 0 var(--s-2);
    }

    .app-logo {
        font-size: 18px;
        letter-spacing: -0.6px;
        flex-shrink: 0;
    }

    .app-search-wrap {
        flex: 1 1 auto;
        min-width: 0;
    }
    .app-search {
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;
        height: 36px;
        padding: 0 8px;
        gap: 4px;
    }
    .app-search .material-symbols-outlined { font-size: 18px; }
    .app-search input { font-size: 13px; }

    .app-actions > .app-icon-btn,
    .app-actions > .app-user,
    .app-actions > .app-lang-dropdown,
    .app-actions > a {
        display: none !important;
    }

    .app-actions > .app-icon-btn.app-icon-btn--bell {
        display: inline-flex !important;
        width: 38px;
        height: 38px;
        margin-left: auto;
    }
    .app-actions > .app-icon-btn.app-icon-btn--bell .material-symbols-outlined {
        font-size: 22px;
    }
    .app-actions > .app-icon-btn.app-icon-btn--bell .app-bell-badge {
        top: 0;
        right: 0;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 9px;
    }

    .app-actions > .app-icon-btn.app-icon-btn--mobile {
        display: inline-flex !important;
        width: 38px;
        height: 38px;
        margin-left: 0;
    }
    .app-actions > .app-icon-btn.app-icon-btn--mobile .material-symbols-outlined {
        font-size: 22px;
    }

    .app-header__inner > #btnAdvancedSearch { display: none; }
}

@media (max-width: 400px) {
    .app-logo { font-size: 16px; }
    .app-search input { font-size: 12px; }
    .app-actions > .app-icon-btn.app-icon-btn--bell,
    .app-actions > .app-icon-btn.app-icon-btn--mobile {
        width: 34px;
        height: 34px;
    }
}

/* ═══════════════════════ LAYOUT GENERAL ═══════════════ */
@media (max-width: 700px) {
    /* Chrome/Safari móvil esconden la barra de URL al bajar y el
       100dvh recalcula. Con un extra al final del scroller + un
       padding-bottom generoso, la última tarjeta no se corta. */
    .app-main {
        padding-bottom: 8px;
        scroll-padding-bottom: 8px;
    }

    .app-container {
        padding: var(--s-4) var(--s-3);
        padding-bottom: calc(var(--s-8) + env(safe-area-inset-bottom, 0px));
    }

    .auth-lang { top: var(--s-2); right: var(--s-2); }
    .hero { padding: var(--s-7) var(--s-3); }
    .hero__sub {
        letter-spacing: 0.15em;
        font-size: 0.85rem;
        margin-top: var(--s-4);
    }
    .hero__divider { margin-top: var(--s-5); }
}

@media (max-width: 400px) {
    .hero__sub { letter-spacing: 0.1em; }
}

/* ═══════════════════════ LISTADOS ═══════════════════ */
@media (max-width: 700px) {
    .list-page__header {
        padding: var(--s-2) var(--s-3);
        flex-wrap: wrap;
        gap: var(--s-2);
        border-radius: var(--r-md);
    }
    .list-page__title { font-size: 0.9rem; letter-spacing: 0.06em; }
    .list-page__controls { gap: var(--s-2); }
    .list-page__count { min-width: 32px; height: 22px; font-size: 11px; }

    .view-switch { padding: 3px; }
    .view-switch__btn { width: 30px; height: 30px; }
    .view-switch__btn .material-symbols-outlined { font-size: 18px; }

    .anime-grid[data-size="grid"] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--s-3);
    }
    .anime-grid[data-size="grid"] .anime-card__title { font-size: 12.5px; min-height: 34px; }
    .anime-grid[data-size="grid"] .anime-card__meta { font-size: 10.5px; }
    .anime-grid[data-size="grid"] .anime-card__type { font-size: 9.5px; padding: 2px 6px; }

    .anime-grid[data-size="posters"] .anime-card { flex-direction: column; min-height: 0; }
    .anime-grid[data-size="posters"] .anime-card__image { flex: none; aspect-ratio: 16 / 10; }
    .anime-grid[data-size="posters"] .anime-card__image img { object-position: center 25%; }
    .anime-grid[data-size="posters"] .anime-card__body { padding: var(--s-3) var(--s-4); }
    .anime-grid[data-size="posters"] .anime-card__title { font-size: 15px; }
    .anime-grid[data-size="posters"] .anime-card__sinopsis { -webkit-line-clamp: 4; font-size: 12.5px; }

    .anime-grid[data-size="list"] .anime-card { min-height: 110px; }
    .anime-grid[data-size="list"] .anime-card__image { flex: 0 0 80px; }
    .anime-grid[data-size="list"] .anime-card__body { padding: var(--s-2) var(--s-3); }
    .anime-grid[data-size="list"] .anime-card__title { font-size: 13.5px; }
    .anime-grid[data-size="list"] .anime-card__sinopsis { font-size: 11.5px; -webkit-line-clamp: 2; }

    .anime-card__fav { width: 44px; height: 44px; }
    .anime-card__fav .material-symbols-outlined { font-size: 22px; }

    .list-page__skeleton-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

@media (max-width: 400px) {
    .anime-grid[data-size="grid"] {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
    .anime-card__ranking { font-size: 10px; padding: 3px 6px; }
    .anime-card__watched,
    .anime-card__airing { font-size: 8px; padding: 2px 6px; }
}

/* ═══════════════════════ FICHA DE ANIME ═══════════════════ */
@media (max-width: 900px) {
    .anime-page__layout {
        grid-template-columns: 1fr;
        gap: var(--s-4);
    }
    .anime-info {
        position: static;
        max-width: 320px;
        margin: 0 auto;
        width: 100%;
    }
    .anime-main__title { font-size: 1.25rem; }
}

@media (max-width: 700px) {
    .anime-page__back { margin-bottom: var(--s-2); }
    .anime-info { max-width: 260px; }
    .anime-info__table td { font-size: 11px; padding: var(--s-2); }
    .anime-main__title { font-size: 1.1rem; }
    .anime-main__sinopsis { font-size: 13px; padding: var(--s-3); }
    .anime-episodes__grid { padding: var(--s-2); gap: 6px; }
    .anime-episodes__btn { width: 38px; height: 34px; font-size: 12px; }
    .anime-player__bar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s-2);
        padding: var(--s-3);
    }
    .anime-player__actions { align-self: stretch; }
    .anime-player__actions .btn { flex: 1; }

    .anime-related { grid-template-columns: 1fr; }
}

/* ═══════════════════════ ADMIN ═══════════════════ */
@media (max-width: 900px) {
    .list-page--admin .list-page__header {
        flex-direction: column;
        align-items: stretch;
    }
    .list-page--admin .list-page__controls {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .admin-form__field,
    .admin-form__field[data-span="3"],
    .admin-form__field[data-span="4"] {
        grid-column: span 6;
    }
    .admin-form__field[data-span="6"],
    .admin-form__field[data-span="8"],
    .admin-form__field[data-span="12"] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .admin-form__row { grid-template-columns: 1fr; }

    .episode-row { grid-template-columns: 70px 1fr auto; }
    .episode-row__num { font-size: 11px; padding: 6px 8px; }

    .recycle-item {
        grid-template-columns: 60px 1fr;
        grid-template-areas:
            "poster body"
            "poster actions";
        gap: var(--s-2) var(--s-3);
    }
    .recycle-item__poster { grid-area: poster; width: 60px; }
    .recycle-item__body   { grid-area: body; }
    .recycle-item__actions {
        grid-area: actions;
        justify-content: flex-start;
    }

    .recycle-relations__label { min-width: 100%; }
}

@media (max-width: 600px) {
    .admin-form__field,
    .admin-form__field[data-span] {
        grid-column: 1 / -1;
    }
    .admin-form__url-field { flex-wrap: wrap; }
    .admin-form__url-prefix {
        max-width: 100%;
        flex: 1 1 100%;
    }
}

/* ═══════════════════════ HOVER: NONE ═══════════════════ */
@media (hover: none) {
    .anime-card__overlay { display: none; }
    .anime-card__admin-delete { opacity: 1; }
    .chip__remove { opacity: 1; }
}