/*
Theme Name:   MangaReader Child
Theme URI:    
Description:  Child theme de MangaReader — rediseño moderno para sitio de cómics
Author:       Tu Nombre
Template:     mangareader
Version:      1.1.0
Text Domain:  mangareader-child
*/

/* ============================================================
   1. FUENTE — Manrope (Google Fonts)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

/* ============================================================
   2. VARIABLES GLOBALES
   ============================================================ */

:root {
  --color-bg:         #0f0f1a;
  --color-bg-card:    #1c1c28;
  --color-bg-nav:     #0d0d1f;
  --color-accent:     #e94560;
  --color-accent-alt: #7F77DD;
  --color-text:       #e8e8f0;
  --color-muted:      #8888aa;
  --color-border:     rgba(255,255,255,0.07);
  --font-body:        'Manrope', sans-serif;
  --radius-sm:        6px;
  --radius-md:        10px;
  --radius-lg:        14px;
  --transition:       0.2s ease;
}

/* ============================================================
   3. BASE — tipografía y fondo global
   Selectores reales: body, a (confirmados en el CSS del tema)
   ============================================================ */

body {
  font-family: var(--font-body) !important;
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  letter-spacing: 0.01em;
}

a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-accent) !important;
}

/* ============================================================
   4. HEADER / NAVBAR
   Selectores reales: .th, .th .centernav, #main-menu, .logos, .searchx
   ============================================================ */

.th {
  background: var(--color-bg-nav) !important;
}

.logos img {
  max-height: 44px;
}

#main-menu ul li a {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(232,232,240,0.75) !important;
}

#main-menu ul li a:hover {
  color: var(--color-text) !important;
}

#main-menu ul li ul {
  background: var(--color-bg-card) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4) !important;
}

#main-menu ul li ul li a {
  color: var(--color-muted) !important;
}

#main-menu ul li ul li a:hover {
  background: rgba(233,69,96,0.15) !important;
  color: var(--color-text) !important;
}

.searchx #form #s {
  background: rgba(255,255,255,0.05) !important;
  border-radius: 99px !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
}

.searchx #form #submit {
  color: var(--color-accent) !important;
}

/* ============================================================
   5. SLIDER / HERO
   Selectores reales: .mainslider .limit, .sliderinfo, .owl-dot
   (el tema usa Owl Carousel, no Swiper)
   ============================================================ */

.mainslider .limit .sliderinfo .sliderinfolimit span.name {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  color: #fff !important;
}

.mainslider .limit:before {
  background-image: linear-gradient(to top, rgba(15,15,26,0.95) 0%, rgba(15,15,26,0.2) 70%, transparent 100%) !important;
}

.owl-dot.active span,
.owl-dot.active:hover span {
  background: var(--color-accent) !important;
}

/* ============================================================
   6. TARJETAS DE CÓMIC (grid de portadas)
   Selectores reales: .bs .bsx, .bs .bsx .limit .bt, .bs .bsx .limit .status,
   .bs .bsx .limit .type, .statusind
   ============================================================ */

.bs .bsx {
  transition: transform var(--transition) !important;
}

.bs .bsx:hover {
  transform: translateY(-4px);
}

.bs .bsx .limit {
  border-radius: var(--radius-md) !important;
  background: var(--color-bg-card) !important;
}

.bs .bsx .limit img {
  transition: transform 0.3s ease !important;
}

.bs .bsx:hover .limit img {
  transform: scale(1.05);
}

.bs .bsx .tt {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
}

.bs .bsx .limit .bt {
  background: rgba(15,15,26,0.92) !important;
}

.bs .bsx .limit .status {
  background: var(--color-accent) !important;
}

.statusind.Ongoing i {
  color: var(--color-accent) !important;
}

.statusind.Completed i {
  color: var(--color-accent-alt) !important;
}

/* ============================================================
   7. LISTA "ÚLTIMAS ACTUALIZACIONES" (home)
   Selectores reales: .listupd .utao .uta, .luf h4
   ============================================================ */

.listupd .utao .uta {
  border-bottom: 1px solid var(--color-border) !important;
}

.listupd .utao .uta .luf h4 {
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
}

.listupd .utao .uta .luf ul li a {
  color: var(--color-accent-alt) !important;
}

/* ============================================================
   8. SIDEBAR / WIDGETS
   Selectores reales: #sidebar .section, .releases (usado como cabecera de widget)
   ============================================================ */

#sidebar .section {
  background: var(--color-bg-card) !important;
  border-radius: var(--radius-md) !important;
}

#sidebar .section ul > li {
  border-bottom: 1px solid var(--color-border) !important;
}

.releases {
  border-bottom: 1px solid var(--color-border) !important;
}

.releases h1,
.releases h2,
.releases h3,
#sidebar .section h4 {
  font-family: var(--font-body) !important;
  color: var(--color-text) !important;
}

.releases .vl {
  background: var(--color-accent) !important;
}

/* ============================================================
   9. PÁGINA DE SERIE (portada + info + géneros)
   Selectores reales: .main-info .info-desc h1, .info-desc .desc,
   .main-info .wd-full .mgen a, .seriestucon
   ============================================================ */

.main-info .info-desc h1,
.info-desc h1 {
  font-family: var(--font-body) !important;
  color: #fff !important;
}

.info-desc .alternative,
.main-info .info-desc .alter {
  color: var(--color-muted) !important;
}

.main-info .wd-full .mgen a,
.seriestucon .seriestucont .seriestucontr .seriestugenre a {
  background: rgba(127,119,221,0.15) !important;
  color: var(--color-accent-alt) !important;
  border: 1px solid rgba(127,119,221,0.3) !important;
  border-radius: 99px !important;
  font-size: 11px !important;
}

.main-info .wd-full .mgen a:hover,
.seriestucon .seriestucont .seriestucontr .seriestugenre a:hover {
  background: rgba(127,119,221,0.3) !important;
}

.seriestucon {
  background: var(--color-bg-card) !important;
  border-radius: var(--radius-md) !important;
}

.seriestucon .seriestuhead h1 {
  color: #fff !important;
  font-family: var(--font-body) !important;
}

.bookmark {
  background: var(--color-accent) !important;
}

.bookmark:hover {
  background: var(--color-accent-alt) !important;
}

/* ============================================================
   10. LISTA DE CAPÍTULOS (dentro de la página de serie)
   Selectores reales: .bxcl ul li .chbox, .eph-num, .dt a
   ============================================================ */

.bxcl ul li .chbox {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
}

.bxcl ul li .chbox:hover {
  background: rgba(233,69,96,0.08) !important;
}

.bxcl ul li .eph-num span.chapternum {
  color: var(--color-text) !important;
  font-weight: 600;
}

.bxcl ul li .eph-num span.chapterdate {
  color: var(--color-muted) !important;
}

.bxcl ul li .dt a {
  color: var(--color-accent) !important;
}

/* ============================================================
   11. LECTOR DE CAPÍTULOS
   Selectores reales: #readerarea, .readingnav, .nextprev a, .chnav .dlx a
   ============================================================ */

#readerarea {
  background: #080810 !important;
}

.readingnav {
  background: rgba(13,13,31,0.9) !important;
}

.nextprev a {
  background: var(--color-accent) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
}

.nextprev a:hover {
  background: var(--color-accent-alt) !important;
}

.chnav .dlx a {
  background: var(--color-accent) !important;
  border-radius: 99px !important;
}

.chnav .selector select {
  background: var(--color-bg-card) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}

/* ============================================================
   12. PAGINACIÓN
   Selectores reales: .pagination a, .pagination span.page-numbers.current
   ============================================================ */

.pagination a {
  background: var(--color-bg-card) !important;
  border-radius: var(--radius-sm) !important;
}

.pagination span.page-numbers.current {
  background: var(--color-accent) !important;
}

/* ============================================================
   13. FOOTER
   Selectores reales: #footer, .footermenu, .footercopyright
   ============================================================ */

#footer {
  background: var(--color-bg-nav) !important;
  color: var(--color-muted) !important;
}

#footer .footermenu {
  background: var(--color-bg-card) !important;
}

.footercopyright a {
  color: var(--color-muted) !important;
}

.footercopyright a:hover {
  color: var(--color-accent) !important;
}

/* ============================================================
   14. COMENTARIOS
   Selectores reales: .commentx, .comment-list
   ============================================================ */

.comment-list > li {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
}

.comment-list .comment-body .reply a {
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
}

.comment-list .comment-body .reply a:hover {
  background: var(--color-accent) !important;
  color: #fff !important;
}

.commentx #submit {
  background: var(--color-accent) !important;
}

/* ============================================================
   15. SCROLLBAR Y SELECCIÓN DE TEXTO (genéricos, no dependen del tema)
   ============================================================ */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: #c73550;
}

::selection {
  background-color: var(--color-accent);
  color: #fff;
}