/* ==========================================================================
   ZDIBU Anime Sheets Engine
   anime-sheets.css
   Vista completa de la ficha de anime
   Funciona de forma independiente de style.css
   ========================================================================== */

/* ==========================================================================
   VARIABLES
   ========================================================================== */

:root{

    --accent-color:#38bdf8;
    --accent-glow:rgba(56,189,248,.25);

    --success:#22c55e;
    --warning:#f59e0b;
    --danger:#ef4444;

    --bg-main:#0b0f19;
    --bg-card:#111827;
    --bg-hover:#1e293b;

    --border-color:#1f2937;

    --text-main:#e2e8f0;
    --text-muted:#9ca3af;
    --text-dim:#6b7280;

    --shadow:0 10px 30px rgba(0,0,0,.35);
    --shadow-hover:0 16px 40px rgba(0,0,0,.45);

    --radius:14px;

}


/* ==========================================================================
   BASE
   ========================================================================== */

*,
*::before,
*::after{

    box-sizing:border-box;

}

img{

    max-width:100%;
    display:block;

}

a{

    color:inherit;
    text-decoration:none;

}

button{

    font:inherit;

}

.badge-list{

    display:flex;
    flex-wrap:wrap;
    gap:8px;

}

.badge{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:5px 10px;

    background:var(--accent-color);

    color:#fff;

    border-radius:999px;

    font-size:.75rem;

    font-weight:700;

}

.card-box{

    background:var(--bg-card);

    border:1px solid var(--border-color);

    border-radius:var(--radius);

    padding:22px;

    box-shadow:var(--shadow);

}

.card-box h2{

    color:var(--accent-color);

    margin-bottom:14px;

    font-size:1.05rem;

}

.card-box p{

    color:var(--text-muted);

    line-height:1.7;

}


/* ==========================================================================
   HERO
   ========================================================================== */

.anime-hero-card{

    position:relative;

    width:100%;

    border-radius:18px;

    overflow:hidden;

    background:var(--bg-card);

    box-shadow:var(--shadow);

}

.hero-banner-container{

    position:relative;

    min-height:430px;

}

.banner-cover{

    position:absolute;

    inset:0;

}

.banner-img,
#anime-banner{

    width:100%;

    height:100%;

    object-fit:cover;

}

.banner-gradient{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to bottom,
        rgba(0,0,0,.15),
        rgba(11,15,25,.55) 55%,
        rgba(11,15,25,.96)
    );

}

.profile-hero-content{

    position:relative;

    z-index:3;

    min-height:430px;

    display:flex;

    align-items:flex-end;

    gap:24px;

    padding:28px;

}

.avatar-frame{

    width:135px;

    height:190px;

    border-radius:12px;

    overflow:hidden;

    flex-shrink:0;

    border:4px solid rgba(255,255,255,.15);

    background:#000;

    box-shadow:var(--shadow);

}

.profile-img,
#anime-poster{

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero-info{

    flex:1;

}

.hero-info h1{

    color:#fff;

    font-size:2rem;

    font-weight:800;

    line-height:1.15;

}

.sub-title{

    color:var(--text-muted);

    margin-top:6px;

    margin-bottom:14px;

}

.quick-stats{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:16px;

}

.score-badge{

    display:flex;

    align-items:center;

    gap:8px;

    padding:6px 12px;

    border-radius:8px;

    border:1px solid var(--accent-color);

    background:rgba(56,189,248,.08);

}

.score-number{

    color:var(--accent-color);

    font-weight:700;

    font-size:1.1rem;

}

.score-label{

    color:var(--text-muted);

}


/* ==========================================================================
   ACTION CARD
   ========================================================================== */

#action-card-container{

    width:320px;

    flex-shrink:0;

    align-self:flex-end;

}


/* ==========================================================================
   TABS
   ========================================================================== */

.tabs-nav{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin:24px 0;

}

.tabs-nav .tab-btn{

    flex:1 1 150px;

    padding:12px 16px;

    border:none;

    border-radius:10px;

    background:var(--bg-card);

    color:var(--text-muted);

    border:1px solid var(--border-color);

    cursor:pointer;

    transition:.25s;

}

.tabs-nav .tab-btn:hover{

    border-color:var(--accent-color);

    color:#fff;

}

.tabs-nav .tab-btn.active{

    background:var(--accent-color);

    color:#fff;

}

.tabs-body{

    width:100%;

}

.tab-content{

    display:none;

}

.tab-content.active{

    display:block;

}


/* ==========================================================================
   INFO
   ========================================================================== */

.info-layout{

    display:grid;

    grid-template-columns:minmax(0,1fr) 320px;

    gap:22px;

}


/* ==========================================================================
   TECHNICAL SHEET
   ========================================================================== */

.technical-sheet ul{

    list-style:none;

    margin:0;

    padding:0;

    display:flex;

    flex-direction:column;

    gap:14px;

}

.technical-sheet li{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:16px;

    border-bottom:1px solid var(--border-color);

    padding-bottom:10px;

}

.technical-sheet strong{

    color:var(--text-main);

}

.technical-sheet span{

    color:var(--text-muted);

    text-align:right;

}


/* ==========================================================================
   STREAMING
   ========================================================================== */

.stream-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));

    gap:16px;

}

.stream-card{

    background:var(--bg-main);

    border:1px solid var(--border-color);

    border-radius:12px;

    padding:16px;

    transition:.25s;

}

.stream-card:hover{

    border-color:var(--accent-color);

    transform:translateY(-2px);

}


/* ==========================================================================
   CHARACTERS
   ========================================================================== */

.characters-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));

    gap:18px;

}

.character-card{

    background:var(--bg-main);

    border:1px solid var(--border-color);

    border-radius:12px;

    overflow:hidden;

}

.character-img{

    width:100%;

    aspect-ratio:1;

    object-fit:cover;

}

.character-name{

    padding:10px 10px 4px;

    font-weight:700;

}

.character-role,
.character-seiyuu{

    padding:0 10px 10px;

    color:var(--text-muted);

    font-size:.82rem;

}


/* ==========================================================================
   MUSIC
   ========================================================================== */

.music-list{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.music-item{

    background:var(--bg-main);

    border:1px solid var(--border-color);

    border-radius:12px;

    padding:16px;

}


/* ==========================================================================
   GALLERY
   ========================================================================== */

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));

    gap:16px;

}

.gallery-item{

    overflow:hidden;

    border-radius:12px;

}

.gallery-img{

    width:100%;

    height:180px;

    object-fit:cover;

    transition:.3s;

}

.gallery-img:hover{

    transform:scale(1.05);

}


/* ==========================================================================
   TRAILER
   ========================================================================== */

.video-preview{

    aspect-ratio:16/9;

    width:100%;

}

.video-preview iframe{

    width:100%;

    height:100%;

    border:0;

    border-radius:12px;

}


/* ==========================================================================
   EPISODES
   ========================================================================== */

.episodes-list{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.episode-card{

    background:var(--bg-main);

    border:1px solid var(--border-color);

    border-radius:12px;

    padding:16px;

    transition:.25s;

}

.episode-card:hover{

    border-color:var(--accent-color);

}

.episode-thumb{

    width:170px;

    border-radius:8px;

}


/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-item{

    border-bottom:1px solid var(--border-color);

    padding:16px 0;

}

.faq-question{

    font-weight:700;

    color:var(--text-main);

}

.faq-answer{

    margin-top:10px;

    color:var(--text-muted);

}


/* ==========================================================================
   FRANCHISE
   ========================================================================== */

.franchise-item{

    background:var(--bg-main);

    border:1px solid var(--border-color);

    border-radius:12px;

    padding:16px;

    margin-bottom:12px;

}


/* ==========================================================================
   MANGA
   ========================================================================== */

.manga-relation-card{

    background:var(--bg-main);

    border:1px solid var(--border-color);

    border-radius:12px;

    padding:18px;

}


/* ==========================================================================
   EPISODES ENGINE PLACEHOLDERS
   ========================================================================== */

.episodes-sticky-group{}

.season-carousel-wrapper{}

.season-slider{

    display:flex;

    gap:12px;

    overflow-x:auto;

    scrollbar-width:none;

}

.season-slider::-webkit-scrollbar{

    display:none;

}

.season-item{}

.season-item.active-temp{}

.season-parallelogram{}

.season-img{}

.season-label{}

.episodes-search-wrapper{}

.episodes-search-input{}

.season-info-card{}

.episode-header-top{}

.episode-meta-line{}

.episode-number{}

.episode-title{}

.episode-body-layout{}

.episode-img-wrapper{}

.episode-info-right{}

.episode-synopsis-wrapper{}

.episode-synopsis{}

.episode-action-wrapper{}

.episode-authority-btn{}

.pagination-wrapper{}

.pagination-btn{}

.pagination-info{}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media(max-width:900px){

    .info-layout{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .hero-banner-container{

        min-height:640px;

    }

    .profile-hero-content{

        min-height:640px;

        flex-direction:column;

        align-items:center;

        justify-content:flex-end;

        text-align:center;

    }

    .hero-info{

        width:100%;

    }

    .hero-info h1{

        font-size:1.7rem;

    }

    .badge-list{

        justify-content:center;

    }

    .quick-stats{

        justify-content:center;

    }

    #action-card-container{

        width:100%;

        max-width:340px;

        align-self:center;

    }

    .technical-sheet li{

        flex-direction:column;

        gap:6px;

    }

    .technical-sheet span{

        text-align:left;

    }

}

@media(max-width:480px){

    .profile-hero-content{

        padding:18px;

    }

    .avatar-frame{

        width:120px;

        height:170px;

    }

    .tabs-nav{

        flex-direction:column;

    }

    .tabs-nav .tab-btn{

        width:100%;

    }

}