/* =====================================================
   LAYOUT OBRA COMPLETA (25% / 50% / 25%)
===================================================== */
.wil-comic-container {
    display: flex;
    gap: 5%;
    margin: 40px auto;
    align-items: flex-start;
    max-width: 1500px;
    width: 100%;
}

/* Columna izquierda */
.wil-comic-left {
    flex: 0 0 25%;
    position: relative;
}

/* Columna centro */
.wil-comic-center {
    flex: 0 0 45%;
}

/* Columna derecha */
.wil-comic-right {
    flex: 0 0 20%;
}

/* =====================================================
   PORTADA
===================================================== */
.wil-comic-cover {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* =====================================================
   BADGES
===================================================== */
.wil-proximamente{

opacity:0.5;
cursor:default;

}

.wil-label-proximamente{

background:#ffcc00;
color:#000;
padding:2px 6px;
font-size:11px;
margin-left:6px;
border-radius:3px;

}

/* =====================================================
   TEXTO OBRA
===================================================== */
.wil-comic-title {
}

.wil-comic-authors,
.wil-comic-year {
    margin-bottom: 5px;
    font-size: 15px;
}

.wil-views {
    margin-top: 10px;
    font-size: 14px;
    opacity: 0.8;
}

/* =====================================================
   LISTA DE CAPÍTULOS
===================================================== */
.wil-comic-chapters {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wil-mini-chap a {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: 0.2s ease;
}

.wil-mini-chap a:hover {
    transform: translateX(3px);
}

.wil-mini-cover {
    width: 55px;
    border-radius: 4px;
    flex-shrink: 0;
    margin: 0 8px;
}

.wil-mini-title {
    font-size: 14px;
    font-weight: 500;
}

.wil-mini-num {
    font-weight: bold;
    width: 22px;
    text-align: center;
}

/* =====================================================
   READER
===================================================== */
.wil-reader-container {
    width: 1350px;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
}

.wil-reader {
    text-align: center;
}

.wil-reader img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    border-radius: 6px;
}

/* Título del capítulo */
.wil-capitulo-title {
    font-size: 26px;
    text-align: center;
    margin-bottom: 10px;
    font-weight: bold;
}

.wil-label {
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 5px;
    margin-left: 5px;
    border-radius: 3px;
    color: #fff;
}

.wil-label-proximamente {
    background-color: #999;
    color: #fff;
}

.wil-label-premium {
    background-color: #ff3b3f;
    color: #fff;
}
/* =====================================================
   CONTROLES MANGA
===================================================== */
.wil-manga-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 15px 0;
}

.wil-manga-controls button {
    padding: 8px 16px;
    cursor: pointer;
    border: none;
    background: #000;
    color: #fff;
    font-weight: bold;
    transition: 0.2s ease;
}

.wil-manga-controls button:hover {
    opacity: 0.85;
}

/* =====================================================
   NAVEGACIÓN CAPÍTULO
===================================================== */
.wil-chapter-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    font-weight: bold;
}

.wil-bottom-nav {
    margin-top: 30px;
    border-top: 1px solid #ddd;
    padding-top: 15px;
}

.wil-page-nav button {
    width: 25%;
    line-height: 50px;
}
.wil-page-nav select {
    width: 50%;
}

/* =====================================================
   BLOQUEO PREMIUM
===================================================== */
.wil-reader-locked {
    max-width: 600px;
    margin: 80px auto;
    text-align: center;
    padding: 40px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

/* =====================================================


/* MODO OSCURO */
body.wil-dark-mode, body.wil-dark-mode .l-canvas.type_wide {
    background-color: #121212;
    color: #e0e0e0;
}

body.wil-dark-mode .wil-comic-container {
    background-color: #121212;
}

body.wil-dark-mode .l-canvas.type_wide .wil-comic-left,
body.wil-dark-mode .l-canvas.type_wide .wil-comic-center,
body.wil-dark-mode .l-canvas.type_wide .wil-comic-right {
    background-color: #121212;
    color: #e0e0e0;
}

body.wil-dark-mode .l-canvas.type_wide .wil-comic-chapters li a,
body.wil-dark-mode .l-canvas.type_wide .wil-mini-chap a {
    color: #fff;
}

body.wil-dark-mode .l-canvas.type_wide .wil-reader img {
    border: 1px solid #333;
    background-color: #121212;
}

body.wil-dark-mode .l-canvas.type_wide a, body.wil-dark-mode .l-canvas.type_wide .wil-capitulo-title{
    color: #fff;
}

/* Ajuste de botones y select en el lector */
body.wil-dark-mode .l-canvas.type_wide .wil-page-nav button,
body.wil-dark-mode .l-canvas.type_wide .wil-page-selector {
    background-color: #333;
    color: #e0e0e0;
    border: 1px solid #555;
}


/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 768px) {

    .wil-comic-container {
        flex-direction: column;
        gap: 30px;
    }

    .wil-comic-left,
    .wil-comic-center,
    .wil-comic-right {
        flex: 0 0 100%;
        text-align: center;
    }

    .wil-mini-chap a {
        justify-content: center;
    }

    .wil-mini-cover {
        width: 60px;
    }

    .wil-capitulo-title {
        font-size: 22px;
    }

}

/* ==========================
   BLUR LOADING EFFECT
========================== */

#wil-comic-img {
    transition: filter 0.4s ease, opacity 0.4s ease;
}

.wil-blur-loading {
    filter: blur(20px);
    opacity: 0.6;
    transform: scale(1.01);
    transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}

.wil-blur-loaded {
    filter: blur(0);
    opacity: 1;
    transform: scale(1);
    transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}

.wil-manga img.wil-blur-loading,
.wil-manga img.wil-blur-loaded {
    width: 100%;
    display: block;
    transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
    cursor: pointer;
}

.wil-manga-controls{
display:flex;
justify-content:space-between;
margin-top:15px;
gap:10px;
}

.wil-manga-controls button{
flex:1;
padding:10px;
font-weight:bold;
cursor:pointer;
}

/* ==========================
   Credits
========================== */

.wil-credit {
  text-align: center;
  font-size: 0.7rem;
  color: #888;
  margin-top: 15px;
  margin-bottom: 0;
  /*display: none !important;*/
  padding: 15px;
  background: #eee;
}

.wil-credit a {
    color: inherit;
    text-decoration: none;
}

.wil-credit-logo {
    height: 30px;
    vertical-align: middle;
    margin-left: 5px;
}

/* =========================
   MODO LECTURA
========================= */

.wil-reading-mode{
display:flex;
justify-content:center;
gap:10px;
margin:20px 0;
}

.wil-reading-mode button{
    padding: 8px 16px;
    cursor: pointer;
    border: none;
    background: #000;
    color: #fff;
    font-weight: bold;
    cursor:pointer;
}

.wil-reading-mode button:hover{
opacity:0.85;
}

/* WEBTOON */

.wil-webtoon img{
width:100%;
height:auto;
margin-bottom:10px;
}

/* MANGA */

.wil-manga img{
width:100%;
height:auto;
}

.wil-manga img,
.wil-webtoon img {
    transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
    display: block;
    max-width: 100%;
}