/* ═══════════════════════════════════════════════════════════
   YouAnime — anime.css
   Ficha de anime, reproductor y grid de episodios.
   ═══════════════════════════════════════════════════════════ */

.anime-page {
    max-width: var(--page-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}
.anime-page__back { display: flex; }
.anime-page__layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--s-6);
    align-items: flex-start;
}
.anime-info {
    display: flex; flex-direction: column; gap: var(--s-3);
    position: sticky; top: var(--s-4);
}
.anime-info__poster {
    position: relative; border-radius: var(--r-md); overflow: hidden;
    border: 2px solid var(--border); background: var(--bg-2); aspect-ratio: 2 / 3;
}
.anime-info__poster img { width: 100%; height: 100%; object-fit: cover; }
.anime-info__ranking {
    position: absolute; top: 8px; right: 8px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px; background: rgba(5, 9, 18, 0.8); backdrop-filter: blur(8px);
    border-radius: var(--r-full); color: #fbbf24; font-weight: 700; font-size: 13px;
}
.anime-info__ranking .material-symbols-outlined { font-size: 14px; }
.anime-info__fav {
    position: absolute; top: 8px; left: 8px; width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; cursor: pointer; z-index: 4; padding: 0;
    transition: transform var(--tr-base); -webkit-tap-highlight-color: transparent;
}
.anime-info__fav::before {
    content: ''; position: absolute; inset: 0; background-color: rgba(5, 9, 18, 0.72);
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
    -webkit-mask-size: 92% 92%; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat;
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
    mask-size: 92% 92%; mask-position: center; mask-repeat: no-repeat;
    transition: background-color var(--tr-base);
    transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden;
    z-index: 0;
}
.anime-info__fav .material-symbols-outlined { position: relative; z-index: 1; font-size: 20px; color: var(--txt-2); }
.anime-info__fav:hover { transform: scale(1.08); }
.anime-info__fav:hover::before { background-color: rgba(239, 68, 68, 0.55); }
.anime-info__fav:hover .material-symbols-outlined { color: #fff; }
.anime-info__fav.is-fav::before { background-color: #ef4444; }
.anime-info__fav.is-fav .material-symbols-outlined { color: #fff; }
.anime-info__fav.is-popping { animation: favPop 320ms ease; }
.anime-info__status {
    text-align: center; padding: var(--s-2) var(--s-3); border-radius: var(--r-full);
    font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
}
.anime-info__status--airing {
    background: rgba(167, 139, 250, 0.15); border: 1px solid rgba(167, 139, 250, 0.5);
    color: var(--purple); animation: animeAiringPulse 2s ease-in-out infinite;
}
.anime-info__status--ended {
    background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.35); color: #fca5a5;
}
.anime-info__type {
    text-align: center; padding: var(--s-2) var(--s-3);
    background: rgba(34, 211, 238, 0.1); border: 1px solid var(--border-hover);
    border-radius: var(--r-full); color: var(--cyan);
    font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.05em;
}
.anime-info__table {
    width: 100%; border-collapse: collapse;
    background: var(--glass-bg); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
}
.anime-info__table tr { border-bottom: 1px solid var(--border); }
.anime-info__table tr:last-child { border-bottom: 0; }
.anime-info__table td { padding: var(--s-2) var(--s-3); font-size: 12px; vertical-align: top; }
.anime-info__table td:first-child { color: var(--txt-3); font-weight: 600; width: 42%; white-space: nowrap; }
.anime-info__table td:last-child { color: var(--txt-2); word-break: break-word; }

/* Enlaces clicables dentro de la ficha (creador, estudio, géneros) */
.anime-info__link {
    color: var(--cyan);
    text-decoration: none;
    border-bottom: 1px dashed rgba(34, 211, 238, 0.35);
    padding-bottom: 1px;
    transition: all var(--tr-fast);
    cursor: pointer;
}
.anime-info__link:hover {
    color: #fff;
    border-bottom-color: var(--cyan);
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.5);
}
.anime-info__sep {
    color: var(--txt-4);
}

.anime-main { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.anime-main__header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.anime-main__title {
    margin: 0; font-family: var(--font-display);
    font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em;
    color: var(--txt-1); cursor: pointer; transition: color var(--tr-fast);
}
.anime-main__title:hover { color: var(--cyan); }
.anime-main__sinopsis {
    margin: 0; color: var(--txt-3); font-size: 14px; line-height: 1.65;
    padding: var(--s-4);
    background: var(--glass-bg); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border); border-radius: var(--r-md);
    cursor: pointer; transition: border-color var(--tr-base);
}
.anime-main__sinopsis:hover { border-color: var(--border-hover); }

.anime-login-callout {
    display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
    padding: var(--s-6);
    background: var(--glass-bg); backdrop-filter: var(--glass-blur);
    border: 1px dashed var(--border-hover); border-radius: var(--r-md); text-align: center;
}
.anime-login-callout .material-symbols-outlined { font-size: 40px; color: var(--cyan); }
.anime-login-callout p { margin: 0; color: var(--txt-2); }

.anime-episodes { display: flex; flex-direction: column; gap: var(--s-3); }
.anime-episodes__title {
    font-family: var(--font-display); font-size: 12px; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase; color: var(--txt-3);
}
.anime-episodes__grid {
    display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-3);
    background: var(--glass-bg); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border); border-radius: var(--r-md);
}
.anime-episodes__btn {
    width: 44px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(9, 55, 70, 0.45); border: 1px solid var(--border-hover);
    border-radius: var(--r-sm); color: var(--txt-2);
    font-family: var(--font-display); font-weight: 700; font-size: 13px;
    cursor: pointer; transition: all var(--tr-fast);
}
.anime-episodes__btn:hover {
    background: rgba(34, 211, 238, 0.2); color: var(--cyan); transform: translateY(-1px);
}
.anime-episodes__btn.is-active {
    background: linear-gradient(135deg, var(--cyan), var(--emerald));
    border-color: transparent; color: #051017;
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.55);
}
.anime-episodes__btn.is-watched {
    background: rgba(16, 185, 129, 0.18); border-color: rgba(16, 185, 129, 0.5); color: #6ee7b7;
}
.anime-episodes__btn.is-watched.is-active {
    background: linear-gradient(135deg, var(--cyan), var(--emerald)); color: #051017;
}
.anime-episodes__btn.is-unavailable {
    background: rgba(100, 116, 139, 0.2); border-color: rgba(100, 116, 139, 0.35);
    color: var(--txt-4); cursor: not-allowed; opacity: 0.55;
}
.anime-episodes__btn.is-unavailable:hover {
    transform: none; background: rgba(100, 116, 139, 0.2); color: var(--txt-4);
}
.anime-player {
    display: flex; flex-direction: column;
    background: var(--glass-bg); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
}
.anime-player__bar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: rgba(9, 55, 70, 0.35); border-bottom: 1px solid var(--border);
}
.anime-player__label {
    font-family: var(--font-display); font-weight: 600; font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--txt-2);
}
.anime-player__actions { display: flex; gap: var(--s-2); }
.anime-player__stage {
    position: relative; aspect-ratio: 16 / 9; background: #000;
    display: flex; align-items: center; justify-content: center;
}
.anime-player__stage iframe,
.anime-player__stage video {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.anime-player__placeholder,
.anime-player__unavailable,
.anime-player__loading {
    display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
    color: var(--txt-3); text-align: center; padding: var(--s-6);
}
.anime-player__placeholder .material-symbols-outlined { font-size: 64px; color: var(--border-hover); }
.anime-player__unavailable .material-symbols-outlined { font-size: 48px; color: #fca5a5; }
.anime-player__placeholder p,
.anime-player__unavailable p,
.anime-player__loading p { margin: 0; }
.anime-player__spinner {
    width: 48px; height: 48px;
    border: 4px solid rgba(34, 211, 238, 0.15); border-top-color: var(--cyan);
    border-radius: var(--r-full); animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.anime-player__dm { position: absolute; inset: 0; cursor: pointer; }
.anime-player__dm img { width: 100%; height: 100%; object-fit: cover; }
.anime-player__dm-play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(5, 9, 18, 0.4); color: #fff; border: 0; cursor: pointer;
}
.anime-player__dm-play .material-symbols-outlined {
    font-size: 88px; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.8));
}
.ya-video-player { width: 100%; height: 100%; }

/* ═══════════════════════════════════════════════════════════
   BOTONES DE ANIMES RELACIONADOS (precuela / secuela)
   ═══════════════════════════════════════════════════════════ */
.anime-related {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
}
.anime-related__btn {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--txt-2);
    text-decoration: none;
    transition: all var(--tr-base);
    min-width: 0;
}
.anime-related__btn:hover {
    border-color: var(--border-hover);
    background: var(--glass-bg-hover);
    color: var(--txt-1);
    transform: translateY(-2px);
    box-shadow: var(--shadow-cyan);
}
.anime-related__btn--prev { justify-content: flex-start; }
.anime-related__btn--next { justify-content: flex-end; text-align: right; }
.anime-related__btn--next .anime-related__info { align-items: flex-end; }
.anime-related__icon {
    font-size: 28px;
    color: var(--cyan);
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.4));
}
.anime-related__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.anime-related__info--right { text-align: right; }
.anime-related__label {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cyan);
}
.anime-related__title {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--txt-1);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.anime-related__type {
    font-size: 11px;
    color: var(--txt-4);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
@media (max-width: 700px) {
    .anime-related { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   FEEDBACK VISUAL — FICHA ACTUALIZADA EN VIVO
   Se aplica temporalmente a los bloques de la ficha que se
   acaban de actualizar tras un guardado en el modal de admin.
   ═══════════════════════════════════════════════════════════ */
@keyframes animeLiveUpdated {
    0% {
        background-color: rgba(34, 211, 238, 0);
    }
    20% {
        background-color: rgba(34, 211, 238, 0.12);
    }
    100% {
        background-color: rgba(34, 211, 238, 0);
    }
}
.anime-live-updated {
    animation: animeLiveUpdated 1200ms ease-out;
    border-radius: var(--r-sm);
}