/*
Theme Name: MangaDex Theme
Theme URI: https://github.com/your-repo/mangadex-theme
Author: GeekZone_Studio
Author URI: https://geekzone.studio
Description: Un theme de WordPress inspirado en MangaDex, con panel lateral de navegación, carrusel de títulos populares, sección de últimas actualizaciones y más. Totalmente personalizable desde el Customizer.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mangadex-theme
Tags: manga, anime, dark, sidebar, customizable
*/

/* =========================================================
   CSS CUSTOM PROPERTIES (se sobreescriben desde Customizer)
   ========================================================= */
:root {
  --md-bg:            #191a1c;
  --md-bg-secondary:  #1f2022;
  --md-accent:        #2a2c30;
  --md-accent-hover:  #35383d;
  --md-primary:       #f5803e;
  --md-primary-hover: #e06a28;
  --md-text:          #e8e8e8;
  --md-text-muted:    #9a9a9a;
  --md-text-contrast: #000000;
  --md-border:        rgba(255,255,255,0.08);
  --md-drawer-bg:     #f0f1f2;
  --md-drawer-width:  260px;
  --md-navbar-height: 56px;
  --md-radius:        8px;
  --md-font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --md-font-header:   'Inter', sans-serif;
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--md-bg);
  color: var(--md-text);
  font-family: var(--md-font);
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--md-primary); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { list-style: none; }

button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* =========================================================
   LAYOUT PRINCIPAL
   ========================================================= */
.md-site-wrapper {
  display: flex;
  min-height: 100vh;
}

/* =========================================================
   SIDEBAR / DRAWER
   ========================================================= */
.md-drawer {
  width: var(--md-drawer-width);
  background: var(--md-drawer-bg);
  height: 100vh;
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  z-index: 100;
  transition: transform 0.2s ease;
  scrollbar-width: thin;
  scrollbar-color: var(--md-border) transparent;
}

.md-drawer::-webkit-scrollbar { width: 4px; }
.md-drawer::-webkit-scrollbar-thumb { background: var(--md-border); border-radius: 4px; }

/* Logo area */
.md-drawer-logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  flex-shrink: 0;
}

.md-logo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.md-logo-img {
  height: 34px;
  width: auto;
  object-fit: contain;
}

.md-logo-wordmark {
  height: 28px;
  width: auto;
  object-fit: contain;
  filter: none;
}

.md-logo-text {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--md-text-contrast);
  letter-spacing: -0.5px;
}

/* Mobile close btn */
.md-drawer-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  color: var(--md-text);
  transition: background 0.15s;
}
.md-drawer-close:hover { background: var(--md-accent-hover); }

/* Nav sections */
.md-nav-section {
  padding: 8px 16px 4px;
  flex-shrink: 0;
}

.md-nav-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--md-text-muted);
  letter-spacing: 0.02em;
}

.md-nav-section-header svg { width: 20px; height: 20px; flex-shrink: 0; }

.md-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 28px;
  border-radius: var(--md-radius);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--md-text);
  transition: background 0.15s, color 0.15s;
  position: relative;
}

.md-nav-item:hover {
  background: var(--md-accent-hover);
  color: var(--md-text-contrast);
}
.md-nav-item.active {
  background: var(--md-primary);
  color: #fff;
}

.md-nav-badge {
  margin-left: auto;
  background: var(--md-primary);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.md-nav-badge.new {
  background: transparent;
  border: 1px solid var(--md-primary);
  color: var(--md-primary);
}

/* Drawer footer */
.md-drawer-footer {
  margin-top: auto;
  padding: 16px;
  border-top: 1px solid var(--md-border);
}

.md-drawer-footer-socials {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 12px 0 8px;
}

.md-drawer-footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: var(--md-text-muted);
  transition: color 0.15s, background 0.15s;
}
.md-drawer-footer-socials a:hover { color: var(--md-text-contrast); background: var(--md-accent-hover); }
.md-drawer-footer-socials svg { width: 18px; height: 18px; }

.md-drawer-footer-meta {
  text-align: center;
  font-size: 0.72rem;
  color: var(--md-text-muted);
  line-height: 1.8;
}

.md-drawer-footer-meta a:hover { color: var(--md-primary); }

/* =========================================================
   MAIN CONTENT AREA
   ========================================================= */
.md-main {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* =========================================================
   NAVBAR (top bar)
   ========================================================= */
.md-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: transparent;
  border-bottom: none;
  height: var(--md-navbar-height);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  transition: background 0.3s, backdrop-filter 0.3s, border-bottom 0.3s;
}

.md-navbar.scrolled {
  background: color-mix(in srgb, var(--md-bg) 96%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1.5px solid var(--md-border);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

/* Hamburger (mobile) */
.md-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--md-text);
  transition: background 0.15s;
  flex-shrink: 0;
}
.md-menu-toggle:hover { background: var(--md-accent); }
.md-menu-toggle svg { width: 24px; height: 24px; }

/* Logo en navbar (mobile siempre, desktop cuando sidebar colapsado) */
.md-navbar-logo {
  display: none;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  margin-right: 8px;
}
.md-navbar-logo .md-logo-img  { height: 30px; }
.md-navbar-logo .md-logo-text { font-size: 1.1rem; font-weight: 700; color: #fff; }

/* Desktop: botón X en drawer visible, hamburger+logo en navbar ocultos por defecto */
@media (min-width: 769px) {
  .md-drawer-close {
    display: flex;
  }
  /* Cuando el sidebar está colapsado, mostrar hamburger y logo en navbar */
  .md-site-wrapper.drawer-collapsed .md-menu-toggle {
    display: flex;
  }
  .md-site-wrapper.drawer-collapsed .md-navbar-logo {
    display: flex;
  }
}

/* Colapso desktop */
@media (min-width: 769px) {
  .md-drawer {
    transition: width 0.25s ease, transform 0.25s ease;
  }
  .md-site-wrapper.drawer-collapsed .md-drawer {
    width: 0;
    overflow: hidden;
  }
}

/* Supporter button */
.md-supporter-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 20px;
  background: var(--md-primary);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
  text-decoration: none;
  flex-shrink: 0;
}
.md-supporter-btn:hover { background: var(--md-primary-hover); color: #fff; transform: translateY(-1px); }

/* Search */
.md-search-wrap {
  flex: 0 0 300px;
  max-width: 300px;
  margin-left: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 768px) {
  .md-search-wrap {
    flex: 0;
    max-width: none;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .md-search-input {
    display: none !important;
  }
  .md-search-hint {
    display: none !important;
  }
  .md-search-form {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    position: static;
  }
  .md-search-form .md-search-icon {
    position: static !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    color: var(--md-text) !important;
    pointer-events: auto !important;
    background: var(--md-accent) !important;
    padding: 0 !important;
    transition: background 0.15s;
  }
  .md-search-form .md-search-icon:hover {
    background: var(--md-accent-hover) !important;
    color: var(--md-text) !important;
  }
}

.md-search-input {
  width: 100%;
  background: var(--md-accent);
  border: 1px solid var(--md-border);
  border-radius: 24px;
  padding: 8px 16px;
  color: var(--md-text);
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.md-search-input:focus {
  border-color: var(--md-primary);
  background: var(--md-accent-hover);
}
.md-search-input::placeholder { color: var(--md-text-muted); }

.md-search-icon {
  color: var(--md-text-muted);
  flex-shrink: 0;
}
.md-search-icon svg { width: 18px; height: 18px; }

/* Avatar */
.md-avatar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--md-accent);
  color: var(--md-text-muted);
  transition: background 0.15s;
  margin-left: 8px;
  flex-shrink: 0;
}
.md-avatar-btn:hover { background: var(--md-accent-hover); color: var(--md-text-contrast); }
.md-avatar-btn svg { width: 20px; height: 20px; }

/* =========================================================
   PAGE CONTENT WRAPPER
   ========================================================= */
.md-content {
  flex: 1;
  min-height: 0;
  padding-bottom: 48px;
}
/* =========================================================
   HERO BANNER / CAROUSEL
   ========================================================= */
.md-hero {
  position: relative;
  height: 420px;
  overflow: hidden;
  background: var(--md-bg-secondary);
}

.md-hero-slides {
  display: flex;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}

.md-hero-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
}

.md-hero-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  filter: blur(2px) brightness(0.4);
  transform: scale(1.05);
}

.md-hero-slide-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.97) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0.1) 100%
  ),
  linear-gradient(
    to top,
    rgba(255,255,255,0.9) 0%,
    transparent 40%
  );
}

.md-hero-slide-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  width: 100%;
  padding: 24px;
  gap: 20px;
  max-width: 1440px;
  margin: 0 auto;
  height: 100%;
}

.md-hero-cover {
  flex-shrink: 0;
  width: 110px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  position: relative;
  align-self: flex-end;
}
.md-hero-cover img { width: 100%; aspect-ratio: 7/10; object-fit: cover; }

.md-hero-flag {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,0.65);
  font-size: 0;
}

.md-hero-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: flex-end;
}

.md-hero-title {
  font-family: var(--md-font-header);
font-size: clamp(1.3rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--md-text-contrast);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.md-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.md-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(245, 128, 62, 0.5);
  color: #ffffff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(245, 128, 62, 0.7);
}
.md-tag.suggestive { background: #c9a42e; color: #fff; }
.md-tag.erotica    { background: #e05252; color: #fff; }

.md-hero-author {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--md-text-muted);
}

/* Hero controls */
.md-hero-controls {
  position: absolute;
  bottom: 12px;
  right: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
}

.md-hero-num {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--md-text-muted);
  letter-spacing: 0.05em;
}

.md-hero-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--md-accent);
  color: var(--md-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  font-size: 0;
}
.md-hero-btn:hover { background: var(--md-accent-hover); color: var(--md-text-contrast); }
.md-hero-btn svg   { width: 18px; height: 18px; }

/* Hero title label */
.md-hero-section-label {
  position: absolute;
  /* cover height (180px * 3/2 aspect = 270px) + padding-bottom (48px) + gap (10px) */
  bottom: calc(270px + 48px + 10px);
  left: 40px;
  font-size: 1rem;
  font-weight: 700;
color: var(--md-text-contrast);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: var(--md-font-header);
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .md-hero-section-label {
    /* cover 130px * 3/2 = 195px + padding 36px + gap 8px */
   /* bottom: calc(195px + 36px + 8px);*/
   margin-bottom: -40px;
    left: 0px;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .md-hero-section-label {
    /*bottom: calc(165px + 32px + 170px);*/
    margin-bottom: -40px;
    left: 0px;
    font-size: 0.8rem;
  }
}
@media (max-width: 768px) {
  .md-hero-section-label {
    padding: 10px 16px 6px;
    font-size: 0.85rem;
  }
}
.md-hero-section-label h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* =========================================================
   AD BANNER
   ========================================================= */
.md-ad-banner {
  padding: 16px 24px;
  text-align: center;
}

.md-ad-banner-inner {
  display: inline-block;
  border-radius: var(--md-radius);
  overflow: hidden;
  max-width: 100%;
}

.md-ad-placeholder {
  background: linear-gradient(135deg, var(--md-accent) 0%, var(--md-accent-hover) 100%);
  border: 2px dashed var(--md-border);
  border-radius: var(--md-radius);
  padding: 20px 40px;
  color: var(--md-text-muted);
  font-size: 0.85rem;
  text-align: center;
}

/* =========================================================
   SECTION WRAPPER
   ========================================================= */
.md-page-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}

.md-section {
  margin-top: 32px;
}

.md-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.md-section-title {
  font-family: var(--md-font-header);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--md-text-contrast);
}

.md-section-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--md-accent);
  color: var(--md-text-muted);
  transition: background 0.15s, color 0.15s;
}
.md-section-link:hover { background: var(--md-primary); color: #fff; }
.md-section-link svg   { width: 18px; height: 18px; }

/* =========================================================
   LATEST UPDATES GRID
   ========================================================= */
.md-updates-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
}

.md-update-col {
  background: var(--md-accent);
  border-radius: var(--md-radius);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Chapter card */
.md-chapter-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.md-chapter-cover {
  flex-shrink: 0;
  width: 52px;
  height: 74px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--md-bg);
}
.md-chapter-cover a,
.md-chapter-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.md-chapter-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 3px;
}

.md-chapter-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--md-text-contrast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.md-chapter-title:hover { color: var(--md-primary); }

.md-chapter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.md-chapter-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--md-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 65%;
  transition: color 0.15s;
}
.md-chapter-link:hover { color: var(--md-primary); }
.md-chapter-link img   { width: 16px; height: 16px; border-radius: 2px; flex-shrink: 0; }

.md-chapter-comments {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  color: var(--md-text-muted);
}
.md-chapter-comments svg { width: 14px; height: 14px; }

.md-chapter-groups {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--md-text-muted);
}
.md-chapter-groups svg { width: 14px; height: 14px; flex-shrink: 0; }

.md-chapter-group-link {
  color: var(--md-text-muted);
  transition: color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-chapter-group-link:hover { color: var(--md-primary); }

.md-chapter-time {
  font-size: 0.72rem;
  color: var(--md-text-muted);
  white-space: nowrap;
}

/* =========================================================
   HORIZONTAL SWIPER / CAROUSEL
   ========================================================= */
.md-swiper-wrap {
  overflow: hidden;
  padding-top: 10px;
  margin-top: -10px;       /* permite que las cards suban en hover */
}

.md-swiper-track {
  display: flex;
  gap: 16px;
  overflow-x: scroll;
  overflow-y: hidden;
  padding-top: 10px;
  margin-top: -10px;
  clip-path: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-bottom: 8px;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
.md-swiper-track:active { cursor: grabbing; }
.md-swiper-track::-webkit-scrollbar { display: none; }

/* =========================================================
   MANGA CARD (recomendados, seasonal, etc.)
   ========================================================= */
.md-manga-card {
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}

.md-manga-card-cover {
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: var(--md-accent);
}

.md-manga-card-cover img {
  width: 100%;
  aspect-ratio: 5/7;
  object-fit: cover;
  transition: transform 0.3s;
  display: block;
}
.md-manga-card:hover .md-manga-card-cover img { transform: none; }

.md-manga-card-flag {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  z-index: 2;
  font-size: 1.2rem;
  line-height: 26px;
  text-align: center;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  cursor: default;
}
/* Overlay en hover */
.md-manga-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.8);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.md-manga-card:hover .md-manga-card-overlay {
  opacity: 1;
  pointer-events: auto;
}

.md-manga-card-desc {
  font-size: 0.75rem;
  color: #ccc;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.md-manga-card-actions {
  display: flex;
  gap: 6px;
}

.md-btn-read {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 20px;
  background: var(--md-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  transition: background 0.15s;
}
.md-btn-read:hover { background: var(--md-primary-hover); color: #fff; }
.md-btn-read svg   { width: 16px; height: 16px; }

.md-btn-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--md-accent-hover);
  color: var(--md-text);
  transition: background 0.15s;
}
.md-btn-more:hover { background: var(--md-primary); color: #fff; }
.md-btn-more svg   { width: 16px; height: 16px; }

.md-manga-card-name {
  margin-top: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--md-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}

/* Tamaños de tarjetas */
.md-card-recommended { width: 180px; }
.md-card-seasonal    { width: 148px; }
.md-card-recent      { width: 120px; }

/* Swiper dots */
.md-swiper-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 12px;
}
.md-swiper-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #f5803e6e;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  border: none;
}
.md-swiper-dot.active {
  background: var(--md-primary);
  transform: scale(1.2);
}

/* =========================================================
   SELF-PUBLISHED cards (with external icon)
   ========================================================= */
.md-btn-read-ext svg.ext-icon { width: 12px; height: 12px; }

/* =========================================================
   FOOTER SITE
   ========================================================= */
.md-site-footer {
  background: var(--md-accent);
  border-top: 1px solid var(--md-border);
  padding: 24px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--md-text-muted);
  margin-top: auto;
}
.md-site-footer a { color: var(--md-text-muted); }
.md-site-footer a:hover { color: var(--md-primary); }
.md-site-footer p { margin: 4px 0; }

/* =========================================================
   OVERLAY MOBILE
   ========================================================= */
.md-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.2s;
}
.md-overlay.visible { opacity: 1; }

/* =========================================================
   SKELETON LOADER
   ========================================================= */
.md-skeleton {
  background: linear-gradient(90deg, var(--md-accent) 25%, var(--md-accent-hover) 50%, var(--md-accent) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
  border-radius: 4px;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .md-updates-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --md-drawer-width: 260px; }

.md-drawer {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    transform: translateX(-100%);
    z-index: 200;
  }

  /* Navbar queda detrás del drawer abierto en mobile */
  .md-drawer.open ~ * .md-navbar,
  body:has(.md-drawer.open) .md-navbar {
    z-index: 150;
  }
  .md-drawer.open { transform: translateX(0); }

  /* NO se fuerza display:block aquí — el JS lo gestiona solo cuando el menú está abierto */

  .md-menu-toggle { display: flex; }
  .md-drawer-close { display: flex; }
  .md-navbar-logo  { display: flex; }
  .md-supporter-btn { display: none; }


  .md-page-container { padding: 0 12px; }

  .md-card-recommended { width: 140px; }
  .md-card-seasonal    { width: 120px; }
  .md-card-recent      { width: 100px; }
}

@media (max-width: 480px) {

  .md-section-title { font-size: 1.1rem; }

  .md-chapter-card { gap: 8px; }
  .md-chapter-cover { width: 44px; height: 62px; }
}



/* ===== AVATAR BTN ===== */
.md-avatar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--md-accent);
  color: var(--md-text);
  flex-shrink: 0;
  transition: background 0.15s;
}
.md-avatar-btn:hover { background: var(--md-accent-hover); }

/* ===== SEARCH extras ===== */
.md-search-form {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}
.md-search-icon {
  position: relative;
  background: none;
  border: none;
  color: var(--md-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0;
  transition: color 0.15s;
  flex-shrink: 0;
}
.md-search-icon:hover { color: var(--md-primary); }

.md-search-hint {
  display: flex;
  gap: 2px;
  pointer-events: none;
  flex-shrink: 0;
}
.md-search-hint kbd {
  background: var(--md-accent-hover);
  border: 1px solid var(--md-border);
  border-radius: 4px;
  font-size: 0.68rem;
  padding: 1px 5px;
  color: var(--md-text-muted);
  font-family: inherit;
}

/* ===== HERO SECTION ===== */
.md-hero-section {
  position: relative;
  margin-top: 0;
}

.md-hero-section-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--md-text-contrast);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: var(--md-font-header);
  display: block;
  margin-bottom: 12px;
}

.md-hero {
  position: relative;
  overflow: hidden;
  background: var(--md-bg);
}

.md-hero-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.md-hero-slide {
  flex-shrink: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.md-hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  z-index: 0;
  user-select: none;
}

.md-hero-gradient {
  position: absolute;
  inset: 0;
  background:
    rgba(255,255,255,0.50),
    linear-gradient(to right,  rgba(15,16,18,0.96) 0%, rgba(15,16,18,0.65) 45%, rgba(15,16,18,0.05) 100%),
    linear-gradient(to top,    rgba(15,16,18,0.85) 0%, transparent 55%),
    linear-gradient(to bottom, rgba(15,16,18,0.6)  0%, transparent 30%);
  z-index: 1;
}

/* Hero gradient en tema claro: fondo claro cálido en vez de oscuro */
html[data-theme="light"] .md-hero-gradient {
  background:
    linear-gradient(to right,  rgba(245,245,248,0.97) 0%, rgba(245,245,248,0.75) 45%, rgba(245,245,248,0.05) 100%),
    linear-gradient(to top,    rgba(245,245,248,0.90) 0%, transparent 55%),
    linear-gradient(to bottom, rgba(245,245,248,0.70) 0%, transparent 30%);
}

.md-hero-slide-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 28px;
  height: 100%;
  padding: calc(var(--md-navbar-height) + 16px) 40px 48px;
  max-width: 1440px;
  margin: 0 auto;
}

/* Cover grande a la izquierda */
.md-hero-cover-link {
  flex-shrink: 0;
  align-self: flex-end;
}
.md-hero-cover {
  width: 180px;
  height: auto;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.85);
  display: block;
}

/* Meta del slide */
.md-hero-meta {
  flex: 1;
 /* min-width: 0;*/
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: flex-end;
  max-width: 560px;
}

.md-hero-title {
  font-family: var(--md-font-header);
  font-size: clamp(1.6rem, 3.5vw, 3rem);
  font-weight: 900;
  color: var(--md-text-contrast);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.01em;
}
.md-hero-title:hover { color: var(--md-primary); }

html[data-theme="light"] .md-hero-title {
  color: #111111;
  text-shadow: none;
}

.md-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.md-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(245, 128, 62, 0.5);
  color: #ffffff;
  border: 1px solid rgba(245, 128, 62, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

html[data-theme="light"] .md-hero-tags .md-tag {
  background: rgba(245, 128, 62, 0.5);
  color: #ffffff;
  border-color: rgba(245, 128, 62, 0.7);
}
.md-tag.suggestive {
  background: rgba(202,138,4,0.8);
  border-color: #ca8a04;
  color: #fff;
}

.md-hero-desc {
  font-size: 0.85rem;
  color: var(--md-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  overflow: hidden;
}

html[data-theme="light"] .md-hero-desc {
  text-shadow: none;
}

html[data-theme="dark"] .md-hero-desc,
html[data-theme="dracula"] .md-hero-desc,
html[data-theme="slate"] .md-hero-desc {
  color: #ffffff;
}

.md-hero-author {
  font-size: 0.82rem;
  color: var(--md-text-muted);
  font-style: normal;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

html[data-theme="light"] .md-hero-author {
  text-shadow: none;
}

html[data-theme="dark"] .md-hero-author,
html[data-theme="dracula"] .md-hero-author,
html[data-theme="slate"] .md-hero-author {
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

/* Controles del hero */
.md-hero-controls {
  position: absolute;
  bottom: 16px; right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
  pointer-events: none;
}
.md-hero-counter {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--md-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.md-hero-btn {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto; height: auto;
  border-radius: 0;
  background: none;
  color: var(--md-text-contrast);
  border: none;
  transition: color 0.15s;
}
.md-hero-btn:hover { background: none; color: var(--md-primary); }

@media (max-width: 768px) {
  .md-hero-slide-inner {
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    padding: calc(var(--md-navbar-height) + 8px) 16px 40px 16px !important;
    gap: 12px !important;
  }
  .md-hero-left {
    align-self: flex-end !important;
    flex-shrink: 0;
  }
  .md-hero-cover {
    width: 110px !important;
  }
  .md-hero-meta {
    align-self: flex-end !important;
    flex: 1;
    min-width: 0;
    max-width: none;
    gap: 6px;
  }
  .md-hero-title {
    font-size: clamp(0.95rem, 4.5vw, 1.4rem) !important;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow: hidden;
  }
  .md-hero-desc { display: none !important; }
  .md-hero-tags { flex-wrap: wrap; }
  .md-hero-author {
    font-size: 0.72rem;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .md-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .md-hero-actions .md-btn-play,
  .md-hero-actions .md-btn-info {
    font-size: 0.78rem;
    padding: 7px 12px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .md-hero-controls {
    bottom: 10px;
    right: 12px;
    transform: none;
  }
}

@media (max-width: 480px) {
  .md-hero-slide-inner {
    padding: calc(var(--md-navbar-height) + 6px) 12px 32px 12px !important;
    gap: 10px !important;
  }
  .md-hero-cover {
    width: 185px !important;
  }
  .md-hero-actions .md-btn-play,
  .md-hero-actions .md-btn-info {
    font-size: 0.74rem;
    padding: 6px 10px;
  }
}
/* ===== PAGE CONTAINER ===== */
.md-page-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ===== AD BANNER ===== */
.md-ad-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 24px 0;
}
.md-ad-banner img {
  max-height: 256px;
  width: auto;
  border-radius: var(--md-radius);
}

/* ===== SECTION HEADERS ===== */
.md-section {
  margin-bottom: 40px;
}

.md-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.md-section-title {
  font-family: var(--md-font-header);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--md-text-contrast);
}
.md-section-title a { color: inherit; }
.md-section-title a:hover { color: var(--md-primary); }

.md-section-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--md-accent);
  color: var(--md-text);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.md-section-more:hover { background: var(--md-primary); color: #fff; }
.md-section-more svg  { width: 20px; height: 20px; }

/* ===== UPDATES GRID ===== */
.md-updates-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.md-updates-col {
  background: var(--md-accent);
  border-radius: var(--md-radius);
  overflow: hidden;
}

.md-updates-col .md-chapter-card {
  padding: 12px 16px;
  border-bottom: 1px solid var(--md-border);
  display: flex;
  gap: 12px;
  align-items: center;
  transition: background 0.15s;
}
.md-updates-col .md-chapter-card:last-child { border-bottom: none; }
.md-updates-col .md-chapter-card:hover { background: var(--md-accent-hover); }

/* ===== RESPONSIVE HERO ===== */
@media (max-width: 768px) {
  .md-updates-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {

}


/* =========================================================
   FEATURED MOVIE HERO
   ========================================================= */
.md-featured-movie {
  position: relative;
  height: 500px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.md-featured-movie-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 20%;
  filter: brightness(0.75);
  transform: scale(1.03);
  transition: transform 8s ease;
}

.md-featured-movie:hover .md-featured-movie-bg {
  transform: scale(1.06);
}

.md-featured-movie-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.4)  50%,
    rgba(0,0,0,0.1)  100%
  ),
  linear-gradient(
    to right,
    rgba(0,0,0,0.6) 0%,
    transparent 60%
  );
}

.md-featured-movie-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 40px;
}

.md-featured-movie-meta {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.md-featured-movie-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.md-featured-movie-title {
  font-family: var(--md-font-header);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

.md-featured-movie-desc {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.md-featured-movie-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.md-btn-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 24px;
  background: var(--md-primary);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.md-btn-play:hover {
  background: var(--md-primary-hover);
  color: #fff;
  transform: translateY(-1px);
}

.md-btn-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 24px;
background: color-mix(in srgb, var(--md-bg) 30%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--md-text) 25%, transparent);
  color: var(--md-text-contrast);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}
.md-btn-info:hover {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

@media (max-width: 768px) {
  .md-featured-movie { height: 380px; }
  .md-featured-movie-title { font-size: 1.8rem; }
  .md-featured-movie-desc { -webkit-line-clamp: 2; }
}

@media (max-width: 480px) {
  .md-featured-movie { height: 300px; }
  .md-featured-movie-meta { gap: 8px; }
}

/* =========================================================
   HERO ACTIONS (botones Ver ahora / Más info)
   ========================================================= */
.md-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.md-btn-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 24px;
  background: var(--md-primary);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}
.md-btn-play:hover {
  background: var(--md-primary-hover);
  color: #fff;
  transform: translateY(-1px);
}

.md-btn-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 24px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.35);
  color: #000000;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
  white-space: nowrap;
}
.md-btn-info:hover {
  background: rgba(255,255,255,0.28);
  color: #fff;
}

.md-hero-white-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--md-bg)              0%,
    var(--md-bg)              5%,
    color-mix(in srgb, var(--md-bg) 85%, transparent) 15%,
    color-mix(in srgb, var(--md-bg) 40%, transparent) 60%,
    transparent               100%
  );
  z-index: 0;
}

.md-hero-left {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0;
  align-self: flex-end;
  padding-bottom: 4px;
}


/* =========================================================
   EPISODE ROWS — diseño tipo lista en dos columnas
   ========================================================= */
.md-ep-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.md-ep-col {
  background: var(--md-drawer-bg);
  border-radius: var(--md-radius);
  overflow: hidden;
}

.md-ep-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--md-border);
  transition: background 0.15s;
  text-decoration: none;
  color: inherit;
}
.md-ep-col .md-ep-row:last-child { border-bottom: none; }
.md-ep-col .md-ep-badge { background: var(--md-accent-hover); color: var(--md-text); }
.md-ep-col .md-ep-title { color: var(--md-text); }
.md-ep-col .md-ep-time  { color: var(--md-text-muted); }
.md-ep-row:hover { background: rgba(0, 0, 0, 0.06); }

.md-ep-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--md-bg);
}
.md-ep-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.md-ep-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.md-ep-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--md-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.md-ep-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.md-ep-badge {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--md-text);
  background: var(--md-accent-hover);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

.md-ep-source {
  font-size: 0.7rem;
  color: var(--md-primary);
  font-weight: 500;
}

.md-ep-time {
  font-size: 0.72rem;
  color: var(--md-text-muted);
}

/* Responsive */
@media (max-width: 768px) {
  .md-ep-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   SINGLE PELICULA — BLOQUE RECOMENDACIONES
   ========================================================= */

.cf-sidebar-related {
  margin-top: 1.5rem;
}

.cf-sidebar-section-title {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--md-text-muted);
  margin-bottom: 0.75rem;
}


/* ══════════════════════════════════════════════════
   SECCIÓN RELACIONADAS — Grid full-width bajo el contenedor
   ══════════════════════════════════════════════════ */
.cf-related-section {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--md-border);
}

.cf-related-section-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
}

.cf-related-section-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--md-on-surface);
  margin: 0;
  letter-spacing: 0.01em;
}

.cf-related-genre-label {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--md-on-surface-variant, #aaa);
}

.cf-related-grid-full {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.cf-related-item--full {
  display: block;
  text-decoration: none;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--md-accent);
  transition: transform 0.2s, box-shadow 0.2s;
}

.cf-related-item--full:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

.cf-related-item--full .cf-related-cover {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 8px;
  background: var(--md-accent);
}

.cf-related-year {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.cf-related-item--full .cf-related-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.88));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 20px 7px 7px;
  border-radius: 0 0 8px 8px;
}

/* Responsive */
@media (max-width: 1200px) {
  .cf-related-grid-full { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 900px) {
  .cf-related-grid-full { grid-template-columns: repeat(4, 1fr); gap: 10px; }
}
@media (max-width: 600px) {
  .cf-related-grid-full { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
@media (max-width: 400px) {
  .cf-related-grid-full { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}


.cf-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* Recomendaciones full-width debajo del body */
.cf-related-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--md-border);
}

.cf-related-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--md-text-contrast);
  margin-bottom: 16px;
}

.cf-related-grid-full {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.cf-related-item {
  position: relative;
  display: block;
  border-radius: var(--md-radius);
  overflow: hidden;
  text-decoration: none;
}

.cf-related-item:hover .cf-related-cover {
  transform: scale(1.05);
  filter: brightness(0.75);
}

.cf-related-cover {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.cf-related-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 0.4rem 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ══ Selector de servidores agrupado ══ */
.cf-server-selector-wrap {
  padding: 10px 12px;
  border-bottom: 1px solid var(--md-border);
}
.cf-server-tipos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cf-server-tipo-item {
  position: relative;
}
.cf-server-tipo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 8px;
  border: 2px solid var(--md-border);
  background: var(--md-accent);
  color: var(--md-text);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.cf-server-tipo:hover {
  border-color: var(--md-primary);
  background: var(--md-accent-hover);
}
.cf-server-tipo.active {
  background: var(--md-primary);
  border-color: var(--md-primary);
  color: #fff;
}
.cf-tipo-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: rgba(255,255,255,0.2);
  font-size: 0.62rem;
  font-weight: 800;
}
.cf-server-tipo:not(.active) .cf-tipo-count {
  background: var(--md-border);
  color: var(--md-text-muted);
}
.cf-tipo-chevron {
  transition: transform 0.2s;
  flex-shrink: 0;
}
.cf-server-tipo.active .cf-tipo-chevron {
  transform: rotate(180deg);
}
.cf-tipo-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 200;
  min-width: 170px;
  background: var(--md-card);
  border: 1px solid var(--md-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  padding: 6px;
  flex-direction: column;
  gap: 3px;
}
.cf-tipo-dropdown.open {
  display: flex;
}
.cf-server-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: none;
  background: var(--md-accent);
  color: var(--md-text);
  font-size: 0.82rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.cf-server-tab:hover {
  background: var(--md-accent-hover);
}
.cf-server-tab.active {
  background: var(--md-primary);
  color: #fff;
  font-weight: 700;
}
.cf-server-tab svg {
  flex-shrink: 0;
  opacity: 0.5;
}
.cf-server-tab.active svg {
  opacity: 1;
}
@media (max-width: 540px) {
  .cf-server-tipo { padding: 6px 10px; font-size: 0.72rem; }
  .cf-tipo-dropdown { min-width: 140px; }
  .cf-server-tab { font-size: 0.76rem; padding: 7px 8px; }
}

/* =====================================================
   PÁGINA FILMS — Grid + Paginación
   ===================================================== */

/* Grid responsivo de cards */
.md-films-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}

@media (min-width: 640px) {
  .md-films-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .md-films-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 22px;
  }
}

/* Paginación */
.md-films-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 24px 0 48px;
}

.md-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--md-accent);
  color: var(--md-text);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.md-page-btn:hover {
  background: var(--md-accent-hover);
  color: var(--md-text-contrast);
}

.md-page-btn.md-page-active {
  background: var(--md-primary);
  color: #fff;
  pointer-events: none;
}

.md-page-prev,
.md-page-next {
  padding: 0 8px;
}

.md-page-ellipsis {
  color: var(--md-text-muted);
  font-size: 0.875rem;
  padding: 0 4px;
  user-select: none;
}


/* =====================================================
   CARD BADGES — año, idioma, calidad
   ===================================================== */
.md-card-badges {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 3;
  text-align: center;
}

.md-card-badge {
  display: inline-block;
  padding: 2.5px 5px;
  border-radius: 3px;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.md-card-badge.year    { background: rgba(0,0,0,0.65); color: #ddd; }
.md-card-badge.lang    { background: rgba(245,128,62,0.85); color: #fff; }
.md-card-badge.quality { background: rgba(0,0,0,0.65); color: #ddd; }


/* =========================================================
   LIVE SEARCH DROPDOWN
   ========================================================= */
.md-search-form {
  position: relative;
}

.md-live-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--md-bg-secondary);
  border: 1px solid var(--md-accent, #2a2c30);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  z-index: 9999;
  overflow: hidden;
  min-width: 280px;
}
.md-live-search-dropdown[hidden] { display: none; }

.md-live-search-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}

.md-live-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.12s;
  text-decoration: none;
  color: var(--md-text, #e8e8e8);
}
.md-live-search-item:hover,
.md-live-search-item.focused {
  background: var(--md-accent-hover, #35383d);
}

.md-live-search-thumb {
  width: 36px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--md-accent, #2a2c30);
}
.md-live-search-thumb-placeholder {
  width: 36px;
  height: 50px;
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--md-accent, #2a2c30);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-text-muted, #9a9a9a);
}

.md-live-search-info {
  flex: 1;
  min-width: 0;
}
.md-live-search-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--md-text-contrast, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-live-search-type {
  font-size: 0.7rem;
  color: var(--md-text-muted, #9a9a9a);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.md-live-search-footer {
  border-top: 1px solid var(--md-border, #2a2c30);
  padding: 8px 12px;
}
.md-live-search-footer[hidden] { display: none; }

.md-live-search-all-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--md-primary, #f5803e);
  text-decoration: none;
  transition: color 0.12s;
}
.md-live-search-all-link:hover { color: var(--md-primary-hover, #e06a28); }

.md-live-search-empty {
  padding: 16px 12px;
  font-size: 0.83rem;
  color: #c1c1c1;
  text-align: center;
}
.md-live-search-empty[hidden] { display: none; }

.md-live-search-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.md-live-search-loading[hidden] { display: none; }

.md-live-search-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--md-border, #2a2c30);
  border-top-color: var(--md-primary, #f5803e);
  border-radius: 50%;
  animation: mdSearchSpin 0.6s linear infinite;
}
@keyframes mdSearchSpin {
  to { transform: rotate(360deg); }
}

/* Mobile: el dropdown ocupa todo el ancho disponible */
@media (max-width: 768px) {
  .md-live-search-dropdown {
    position: fixed;
    top: 60px;
    left: 12px;
    right: 12px;
    min-width: 0;
  }
}

/* ── Card hover overlay ── */
.md-card-hover .md-manga-card-cover { position: relative; overflow: hidden; }

.md-card-badge-tl {
  position: absolute; top: 6px; left: 6px; z-index: 10;
  padding: 2px 7px; border-radius: 5px;
  background: rgba(0,0,0,0.75); color: #fff;
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}

.md-card-overlay {
  position: absolute; inset: 0;
  background: transparent;
  pointer-events: none; border-radius: inherit;
  display: flex; align-items: flex-end;
}

/* Gradiente en pseudo-elemento — así opacity no afecta a los hijos */
.md-card-overlay::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 45%, transparent 70%);
  opacity: 0; transition: opacity 0.25s ease;
  border-radius: inherit;
}

.md-card-hover .md-manga-card-cover:hover .md-card-overlay::before { opacity: 1; }

.md-card-overlay-info {
  padding: 8px;
  width: 100%;
 /* max-height: 44%;*/
  overflow: hidden;
  position: relative; /* para que quede sobre el ::before */
  min-height: 32px;
  z-index: 2;
}

.md-card-overlay-meta {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}

.md-card-overlay-rating {
  display: flex; align-items: center; gap: 3px;
  font-size: 0.7rem; font-weight: 700; color: #facc15;
}

.md-card-overlay-year {
  display: flex; align-items: center; gap: 3px;
  font-size: 0.7rem; color: rgba(255,255,255,0.6);
}

.md-card-overlay-synopsis {
  font-size: 0.68rem; color: rgba(255,255,255,0.75);
  line-height: 1.4; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}


.md-card-link {
  position: absolute; inset: 0; z-index: 5;
}


  /* Rating: sale del overlay-info, se posiciona fijo en la esquina */
@media (min-width: 769px) {
  .md-card-overlay-rating {
    position: absolute;
    bottom: 6px;
    left: 6px;
    z-index: 6;
    opacity: 1;
    transition: opacity 0.2s ease;
    background: rgba(0,0,0,0.72);
    border-radius: 4px;
    padding: 3px 6px;
  }
  /* Synopsis y año: ocultos por defecto */
  .md-card-overlay-synopsis,
  .md-card-overlay-year {
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  /* Meta row: oculto por defecto */
  .md-card-overlay-meta {
   /* display: none;*/
  }
  /* En hover: rating desaparece, synopsis/año aparecen */
  .md-card-hover .md-manga-card-cover:hover .md-card-overlay-rating {
    opacity: 0;
  }
  .md-card-hover .md-manga-card-cover:hover .md-card-overlay-synopsis,
  .md-card-hover .md-manga-card-cover:hover .md-card-overlay-year {
    opacity: 1;
  }
}

/* ── MOBILE: overlay siempre visible, rating dentro del overlay como antes ── */
@media (max-width: 768px) {
  .md-card-overlay::before { opacity: 1; }
  .md-card-overlay-rating {
    position: static;
    opacity: 1;
  }
  .md-card-overlay-meta { display: flex; }

/* Top10 mobile: título y sinopsis visibles fijos */
  .cf-top10-card .md-card-overlay-info::before,
  .cf-top10-card .md-card-overlay-synopsis {
    opacity: 1 !important;
    display: -webkit-box !important;
  }
}
.md-card-hover .md-manga-card-flag {
  bottom: auto;
  top: 6px;
  right: 6px;
  z-index: 11;
}


/* ══════════════════════════════════════════════════
   MOBILE SEARCH OVERLAY
   ══════════════════════════════════════════════════ */
.md-search-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-direction: column;
  padding: 16px;
  gap: 12px;
}
.md-search-mobile-overlay.is-open {
  display: flex;
}
.md-search-mobile-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--md-accent);
  border: 1px solid var(--md-border);
  border-radius: 12px;
  padding: 4px 4px 4px 16px;
}
.md-search-mobile-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--md-text);
  font-size: 1rem;
  font-family: inherit;
  padding: 8px 0;
}
.md-search-mobile-input::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}
.md-search-mobile-input::-ms-clear {
  display: none;
}
.md-search-mobile-input::placeholder { color: var(--md-text-muted); }
.md-search-mobile-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: none;
  background: var(--md-accent-hover);
  color: var(--md-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.md-search-mobile-close:hover { background: var(--md-border); color: var(--md-text); }
.md-search-mobile-results {
  background: var(--md-accent);
  border: 1px solid var(--md-border);
  border-radius: 10px;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 60vh;
  overflow-y: auto;
}
.md-search-mobile-results:empty { display: none; }


/* ── Navegación episodios ─────────────────────────────────── */
.cf-ep-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0 4px;
}
.cf-ep-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--md-accent);
  border: 1px solid var(--md-border);
  color: var(--md-text);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
}
.cf-ep-nav-btn:hover {
  background: var(--md-accent-hover);
  color: var(--md-text-contrast);
}
.cf-ep-nav-btn--disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.cf-ep-nav-btn--home {
  width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
  flex-shrink: 0;
  background: var(--md-primary);
  border-color: var(--md-primary);
  border-radius: 50%;
  color: #fff;
}
.cf-ep-nav-btn--home:hover {
  background: var(--md-primary);
  opacity: 0.85;
  color: #fff;
}


/* ── Navegación episodios ─────────────────────────────────── */
.cf-ep-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0 4px;
}
.cf-ep-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--md-accent);
  border: 1px solid var(--md-border);
  color: var(--md-text);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
}
.cf-ep-nav-btn:hover {
  background: var(--md-accent-hover);
  color: var(--md-text-contrast);
}
.cf-ep-nav-btn--disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.cf-ep-nav-btn--home {
  width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
  flex-shrink: 0;
  background: var(--md-primary);
  border-color: var(--md-primary);
  border-radius: 50%;
  color: #fff;
}
.cf-ep-nav-btn--home:hover {
  background: var(--md-primary);
  opacity: 0.85;
  color: #fff;
}


.md-ep-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  font-size: 0.85rem;
  line-height: 1;
}


/* Ícono inline en ítem del nav */
.md-nav-item {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.md-nav-item-icon {
  flex-shrink: 0;
  opacity: 0.75;
  color: currentColor; /* hereda el color del tema automáticamente */
}


/* =============================================
   EFECTO LIGHT SWEEP EN HOVER DE CARDS
   ============================================= */

.md-manga-card-cover {
  position: relative;
  overflow: hidden;
}


.md-manga-card-cover::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 40%,
    rgba(255, 255, 255, 0.13) 50%,
    rgba(255, 255, 255, 0.05) 60%,
    transparent 100%
  );
  transform: skewX(-15deg);
  pointer-events: none;
  transition: none;
  z-index: 10;
}

.md-manga-card:hover .md-manga-card-cover::after,
.md-card-hover:hover .md-manga-card-cover::after {
  animation: card-light-sweep 0.85s cubic-bezier(0.22, 1, 0.15, 1) forwards;
}

@keyframes card-light-sweep {
  0% {
    left: -75%;
    opacity: 1;
  }
  100% {
    left: 125%;
    opacity: 1;
  }
}


.md-profile-modal__avatar-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--md-primary);
}



/* Badge VIP verificado */
.coflix-vip-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    vertical-align: middle;
    line-height: 1;
}

.coflix-vip-badge svg {
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}



/* =============================================
   SCROLL REVEAL — slide-up + fade-in sections
   ============================================= */
.md-reveal-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  will-change: opacity, transform;
}

.md-reveal-section.md-reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================
   LAZY LOAD SECUENCIAL — imágenes de tarjetas
   ============================================= */
img[data-src] {
  opacity: 0;
  transition: opacity 0.35s ease;
}

img.md-img-loaded {
  opacity: 1;
}

.md-profile-vip-btn {
    display: block;
    width: 100%;
    margin: 10px 0 4px;
    padding: 11px 0;
    text-align: center;
    font-weight: 800;
    font-size: .95rem;
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #f9a825, #ff8f00, #ffd54f, #ff8f00);
    background-size: 250% 250%;
    border: 2px solid transparent;
    outline: 2px solid #f9a825;
    box-shadow: 0 0 0 0 rgba(249,168,37,0.7);
    animation: vipShine 3s ease infinite, vipPulse 1.8s ease-in-out infinite;
    cursor: pointer;
    letter-spacing: .03em;
}
.md-profile-vip-btn:hover {
    color: #fff;
    filter: brightness(1.1);
}
@keyframes vipShine {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes vipPulse {
    0%   { box-shadow: 0 0 0 0 rgba(249,168,37,0.7), 0 0 10px rgba(249,168,37,0.3); outline-color: #f9a825; }
    50%  { box-shadow: 0 0 0 6px rgba(249,168,37,0), 0 0 22px rgba(249,168,37,0.6); outline-color: #ffd54f; }
    100% { box-shadow: 0 0 0 0 rgba(249,168,37,0.7), 0 0 10px rgba(249,168,37,0.3); outline-color: #f9a825; }
}


/* ══════════════════════════════════════════════
   TOP 10 SEMANAL — cf-top10
   ══════════════════════════════════════════════ */
.cf-top10-section { margin-bottom: 40px; }
.cf-top10-fire { display: inline-flex; align-items: center; margin-right: 4px; vertical-align: middle; }

/* El track no necesita gap extra, el margin-left de cada card lo gestiona */
.cf-top10-track { gap: 0 !important; }

/* Cada card: ancho fijo igual que md-card-recommended, overflow visible
   para que el número salga fuera del borde izquierdo */
.cf-top10-card {
  position: relative;
  flex-shrink: 0;
  width: 185px;
  overflow: visible !important;
  cursor: pointer;
}

.cf-top10-card .md-manga-card-cover {
  margin-left: 24px;
  overflow: hidden;
  width: calc(100% - 24px);
}
.cf-top10-card:first-child .md-manga-card-cover {
  margin-left: 24px;
  width: calc(100% - 24px);
}

/* Ocultar nombre exterior en top10 — se muestra dentro del overlay */
.cf-top10-card .md-manga-card-name {
  display: none;
}

/* Título dentro del overlay — oculto por defecto, aparece en hover igual que synopsis */
.cf-top10-card .md-card-overlay-info::before {
  content: attr(data-title);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.3;
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* En hover: título y sinopsis aparecen */
.cf-top10-card .md-manga-card-cover:hover .md-card-overlay-info::before,
.cf-top10-card .md-manga-card-cover:hover .md-card-overlay-synopsis {
  opacity: 1;
}

@media (min-width: 769px) {
  .cf-top10-card { width: 185px; }
}
@media (max-width: 600px) {
  .cf-top10-card { width: 120px; }
  .cf-top10-rank { font-size: 4rem; letter-spacing: -3px; bottom: 20px; }
  .cf-top10-card .md-manga-card-cover { margin-left: 18px; width: calc(100% - 18px); }
  .cf-top10-card:first-child .md-manga-card-cover { margin-left: 18px; width: calc(100% - 18px); }
}

/* Número grande — fuera del cover-wrap (position absolute sobre la card) */
.cf-top10-rank {
  position: absolute;
  bottom: -15px;
  left: -2px;
  z-index: 10;
  font-size: 5.5rem;
  font-weight: 900;
  line-height: 1;
  color: transparent;
-webkit-text-stroke: 2px var(--md-primary) !important;
  text-stroke:         2px var(--md-primary) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  background-size: cover !important;
  background-position: center top;
  font-family: 'Arial Black', Impact, sans-serif;
  pointer-events: none;
  user-select: none;
  letter-spacing: -4px;
  filter: drop-shadow(0 0 6px rgba(0,0,0,.9)) drop-shadow(0 2px 12px rgba(0,0,0,.95)) brightness(.85);
  display: inline-block;
  min-width: 1ch;
}
.cf-top10-card:first-child .cf-top10-rank { left: 4px; }

/* Toggle Films / Séries */
.cf-top10-toggle {
  display: flex;
  align-items: center;
  background: var(--md-accent);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.cf-top10-tab {
  background: transparent;
  border: none;
  color: var(--md-text-muted);
  font-size: .85rem;
  font-weight: 600;
  padding: 5px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.cf-top10-tab.active { background: var(--md-primary); color: #fff; }
.cf-top10-tab:not(.active):hover { color: var(--md-text); background: var(--md-accent-hover); }

@media (max-width: 1024px) {
  .cf-top10-card { width: 165px; }
  .cf-top10-rank { font-size: 4.2rem; left: -2px; }
  .cf-top10-card .md-manga-card-cover { margin-left: 22px; }
  .cf-top10-card .md-manga-card-name  { padding-left: 22px; }
.cf-top10-card:first-child .md-manga-card-cover { margin-left: 22px; width: calc(100% - 22px); }
}

@media (max-width: 600px) {
  .cf-top10-card { width: 150px; }
  .cf-top10-rank { font-size: 4rem; left: -2px; letter-spacing: -3px; bottom: 1px; }
  .cf-top10-card .md-manga-card-cover { margin-left: 22px; }
  .cf-top10-card:first-child .md-manga-card-cover { margin-left: 0; }
  /* En mobile el nombre va dentro del poster, ajustar left del wrapper */
  .cf-top10-card > a { left: 22px; }
  .cf-top10-card:first-child > a { left: 0; }
  /* Overlay de synopsis oculto en mobile para top10, solo el nombre */
  .cf-top10-card .md-card-overlay-synopsis { display: none; }
}


/* ══════════════════════════════════════════════
   NOTIFICACIONES
   ══════════════════════════════════════════════ */
.cf-notif-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.cf-notif-btn {
  background: var(--md-accent);
  border: none;
  color: var(--md-text-muted);
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.cf-notif-btn:hover { background: var(--md-accent-hover); color: var(--md-text-contrast); }

.cf-notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  background: var(--md-primary);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  pointer-events: none;
}
.cf-notif-badge[hidden] { display: none; }

/* ── Dropdown mini ── */
.cf-notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: var(--md-bg-secondary);
  border: 1px solid var(--md-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  z-index: 9999;
  overflow: hidden;
}
.cf-notif-dropdown[hidden] { display: none; }

.cf-notif-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--md-text);
  border-bottom: 1px solid var(--md-border);
}
.cf-notif-read-all {
  background: none;
  border: none;
  color: var(--md-primary);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 0;
  font-weight: 600;
}
.cf-notif-read-all:hover { color: var(--md-primary-hover); }

/* ── Lista de items ── */
.cf-notif-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.cf-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.12s;
  border-bottom: 1px solid var(--md-border);
  text-decoration: none;
  color: var(--md-text);
  position: relative;
}
.cf-notif-item:last-child { border-bottom: none; }
.cf-notif-item:hover { background: var(--md-accent); }
.cf-notif-item.unread { background: rgba(245,128,62,0.07); }
.cf-notif-item.unread::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--md-primary);
}

.cf-notif-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--md-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-text-muted);
}
.cf-notif-avatar svg { width: 16px; height: 16px; }

.cf-notif-body { flex: 1; min-width: 0; }
.cf-notif-text {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--md-text);
  margin: 0 0 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cf-notif-text strong { color: var(--md-primary); }
.cf-notif-time {
  font-size: 0.68rem;
  color: var(--md-text-muted);
}

/* ── Footer dropdown ── */
.cf-notif-footer {
  border-top: 1px solid var(--md-border);
  padding: 8px 14px;
}
.cf-notif-footer[hidden] { display: none; }
.cf-notif-see-all {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--md-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.12s;
}
.cf-notif-see-all:hover { color: var(--md-primary-hover); }

.cf-notif-empty {
  padding: 20px 14px;
  font-size: 0.82rem;
  color: var(--md-text-muted);
  text-align: center;
}
.cf-notif-empty[hidden] { display: none; }

/* ── Modal grande ── */
.cf-notif-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cf-notif-modal[hidden] { display: none; }

.cf-notif-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
}

.cf-notif-modal-panel {
  position: relative;
  background: var(--md-bg-secondary);
  border: 1px solid var(--md-border);
  border-radius: 14px;
  width: 90%;
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
}

.cf-notif-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--md-text);
  border-bottom: 1px solid var(--md-border);
  flex-shrink: 0;
}
.cf-notif-modal-close {
  background: none;
  border: none;
  color: var(--md-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
}
.cf-notif-modal-close:hover { background: var(--md-accent); color: var(--md-text); }

.cf-notif-modal-list {
  overflow-y: auto;
  flex: 1;
}

.cf-notif-modal-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  border-top: 1px solid var(--md-border);
  flex-shrink: 0;
}
.cf-notif-page-btn {
  background: var(--md-accent);
  border: none;
  color: var(--md-text);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.12s;
}
.cf-notif-page-btn:hover,
.cf-notif-page-btn.active { background: var(--md-primary); color: #fff; }
.cf-notif-page-btn:disabled { opacity: 0.35; cursor: default; }

@media (max-width: 480px) {
  .cf-notif-dropdown {
    width: calc(100vw - 20px);
    right: 0;
    left: auto;
    transform: translateX(calc(50% - 100px));
  }
  .cf-notif-modal-panel {
    width: calc(100vw - 24px);
    max-height: 85vh;
    border-radius: 10px;
  }
}


/* ── Episode type badges ── */
.md-ep-type {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.4;
  vertical-align: middle;
}
.md-ep-type--serie  { background: var(--md-primary); color: #fff; }
.md-ep-type--dorama { background: var(--md-primary); color: #fff; }
.md-ep-type--anime  { background: var(--md-primary); color: #fff; }

/* ── NEW! badge ── */
.md-ep-badge--new {
  background: #e8b20a;
  color: #111;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1.4;
  vertical-align: middle;
  animation: cf-new-pulse 2s ease-in-out infinite;
}
@keyframes cf-new-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}


.md-hero-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

/* =========================================================
   MENÚ INFERIOR MOBILE (solo móvil)
   ========================================================= */
.md-mobile-bottom-nav { display: none !important; }

@media (max-width: 768px) {
  .md-mobile-bottom-nav {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: #1f2022;
    border-top: 1px solid var(--md-border);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -4px 16px rgba(0,0,0,.35);
  }

  .md-mbn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 9px 2px 8px;
    color: var(--md-text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .md-mbn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    line-height: 1;
  }
  .md-mbn-icon svg { width: 1em; height: 1em; }

  .md-mbn-item.active { color: var(--md-primary); }
  .md-mbn-item:active { opacity: .7; }

  /* Espacio para que el menú no tape el final de la página */
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0)); }
}