/* ===============================
      BOTÓN ACTIVO 
      =============================== */

   .home-btn[data-type="anime"] .btn{
     background: linear-gradient(180deg,#ffffff,#dcdcdc) !important;
     border-color:#ffffff !important;
     color:#000 !important;
     box-shadow:
       0 0 12px rgba(255,255,255,.6),
       inset 0 1px 0 rgba(255,255,255,.8);
   }

   .home-btn[data-type="anime"] .btn:hover{
     background: linear-gradient(180deg,#ffffff,#eaeaea) !important;
     color:#000 !important;
   }

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


/* =========================================================
   ANIME ONLINE (bloque local)
========================================================= */

/* ===== Layout / cabecera ===== */
.anime-header-row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:flex-start;
}

.anime-box{
  flex:1 1 320px;
  min-width:280px;
}

.anime-controls{
  display:grid;
  gap:10px;
  margin-top:10px;
}

.anime-controls label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight:600;
  opacity:.95;
}

.anime-controls select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.25);
  color:#fff;
}

.anime-note{
  opacity:.85;
  font-size:.92rem;
}

/* ===== Separadores / cajas ===== */
.anime-split{
  background:rgba(255,255,255,.10);
  margin:14px 0;
}

/* ===============================
   ÚLTIMO ESTRENO (DINÁMICO OPMYA)
================================ */

.anime-release-wrapper{
  text-align:center;
  margin: 20px 0 10px 0;
}

.anime-release-pill{
  display:inline-flex;
  align-items:center;
  gap:14px;

  padding:12px 26px;
  border-radius:999px;

  border: var(--border);

  font-weight:800;
  letter-spacing:.5px;

  box-shadow:
    0 0 18px color-mix(in srgb, var(--primary) 40%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--primary) 25%, transparent);
}

.release-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation:pulseGlow 1.6s infinite;
}

.release-text{
  color: color-mix(in srgb, var(--text) 80%, white);
  font-size:.95rem;
  opacity:.9;
}

.release-episode{
  background: linear-gradient( 135deg, var(--secondary), color-mix(in srgb, var(--secondary) 20%, black) );

  color: white;

  padding:6px 14px;
  border-radius:999px;

  font-size:1rem;
  font-weight:900;

  box-shadow:0 0 12px color-mix(in srgb, var(--primary) 60%, transparent);
}

.anime-release-title{
  margin-top:12px;
  font-size:1.3rem;
  font-weight:900;

  color: #FFB300;
  text-shadow:0 0 10px color-mix(in srgb, var(--primary) 50%, transparent);
}

@keyframes pulseGlow{
  0%{opacity:.6; transform:scale(1);}
  50%{opacity:1; transform:scale(1.2);}
  100%{opacity:.6; transform:scale(1);}
}



/* ===== Spoiler / instrucciones ===== */
.anime-spoiler-btn{
  user-select:none;
  cursor:pointer;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
  color:#fff;
  font-weight:700;
}

.anime-spoiler{
  text-align:center;
  color:#fff;
  margin-top:10px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  line-height:1.55;
}

.boton-instrucciones{
  width:410px;
  margin:0 auto;
}

/* =========================================================
   SAGAS / CARRUSEL
========================================================= */
.anime-sagas-wrap{
  margin-top:16px;
}

.saga-carousel{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  height: auto; /* fallback */
}

.saga-track{
  display:flex;
  transition:transform .35s ease;
  will-change:transform;
  align-items:flex-start; /* 🔥 evita el stretch */
}

.saga-slide {
  min-width: 100%;
  padding: 23px 5px;
  border: 3px solid;
  border-radius: 20px;
  background-image: url('https://www.onepiecemangayanime.com/imagenes/fondosagas/fondo.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
}

/* ===== Título / navegación ===== */
.saga-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.saga-title h3{
  margin:0;
  font-size:1.35rem;
}

.saga-title .range{
  opacity:.9;
  font-weight:700;
}

.saga-nav{
  display:flex;
  gap:10px;
}

.saga-nav button{
  cursor:pointer;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:#680768;
  color:#fff;
  font-weight:800;
}

.saga-nav button:active{
  transform:translateY(1px);
}

/* ===== Grid de arcos ===== */
.saga-grid{
  display:grid;
  gap:10px;
  justify-content:center;
  padding-top:10px;
}

.saga-grid img{
  width: 100%;
  max-width: 750px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
  object-fit: cover;
  box-shadow: 1px 1px 5px black;
  border: 3px solid black;
  filter: brightness(0.9);
  transition:transform .12s ease, filter .12s ease;
}

.saga-grid img:hover{
  transform:scale(1.02);
  filter:brightness(1.02);
  border: 3px solid white;
}

/* =========================================================
   MENSAJES (alertas)
========================================================= */
.msg-red{
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,0,0,.10);
  border:1px solid rgba(255,0,0,.25);
  color: #ff5400;
  text-align: center;
}

.msg-green{
  padding:10px 12px;
  border-radius:12px;
  background:rgba(0,255,130,.10);
  border:1px solid rgba(0,255,130,.22);
  color: #8bff00;
  text-align: center;
}

/* =========================================================
   SEGUIMIENTO
========================================================= */
.seguimiento-box{
  width:90%;
  max-width:430px;
  margin:10px auto;
  padding:10px;
  text-align:center;
  color:#fff;
  background-color:rgb(20,20,50);
}

.seguimiento-current{
  font-size:1.1rem;
  font-weight:900;
}

.seguimiento-current span{
  color:#3CE63C;
}

.R_Seguimiento{
  width:100px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.25);
  color:#fff;
  text-align:center;
}


.saga-topbar{
  text-align:center;
  margin: 0 0 12px 0;
}

.saga-top-title{
  font-weight: 900;
  font-size: 1.6rem;
  color: #3CE63C;
  margin: 15px;
  text-shadow: 0 0 10px rgba(0,0,0,.7);
}

.saga-top-nav{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.saga-top-nav button{
  cursor:pointer;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:#680768;
  color:#fff;
  font-weight:900;
}

.saga-top-nav button:active{
  transform:translateY(1px);
}





.panel__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.anime-lang-selector{
  display:flex;
  gap:10px;
}
.anime-lang-selector img{
  max-width: inherit;
}

.lang-flag{
  font-size:22px;
  text-decoration:none;
  padding:6px 10px;
  border-radius:10px;
  transition:all .2s ease;
  opacity:.6;
}

.lang-flag:hover{
  background:rgba(255,255,255,.15);
  opacity:1;
}

.lang-flag.active{
  background:#680768;
  opacity:1;
  box-shadow:0 0 10px rgba(0,0,0,.6);
}

.anime-arc.cover-extra{
  pointer-events: none;
  cursor: default;
  opacity: .95;
}

.panel__body{
  padding: 10px 20px;
}

   @media (max-width: 900px) {
      .anime-lang-selector {
         margin-top: 10px;
         justify-content: center;
      }
      .general-full {
        padding: 2px 2px;
      }
      .panel__body{
        padding: 2px 2px;
      }
      .saga-slide{
        padding: 0px 5px 6px 5px;
      }
      .saga-top-title{
        font-size: 1.5rem;
      }
      .wrap{
        padding-top: 0px;
      }
      .panel__header{
        display: block;
      }
   }