/* =========================================================================
   MK Hero — Cabecera de manga individual (estilo Utoon)
   -------------------------------------------------------------------------
   Consume los tokens globales --mc-* de la Fase 1. Alias locales para
   legibilidad; cambiar el panel de Madara cambia toda la cabecera.
   ========================================================================= */

.hero {
	--max:    1140px;
	--fg:     var(--mc-text, #fff);
	--muted:  var(--mc-text-muted, #9a9a9a);
	--card:   var(--mc-card-bg, #161616);
	--line:   rgba(var(--mc-border-rgb, 42, 42, 42), .65);
	--accent: var(--mc-primary, #7c3aed);
	--shadow: 0 20px 50px rgba(0, 0, 0, .55);

	position: relative;
	overflow: hidden;
	background: var(--mc-bg, #0a0a0a);
	color: var(--fg);
}

/* Fondo difuminado a partir de la portada */
.hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center top;
	filter: blur(42px) brightness(.45) saturate(1.3);
	transform: scale(1.3);
	z-index: 0;
}
.hero::after {  /* velo para asegurar contraste del texto */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(var(--mc-bg-rgb, 10, 10, 10), .35), rgba(var(--mc-bg-rgb, 10, 10, 10), .9));
	z-index: 0;
}

.hero__in {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 24px;
	max-width: var(--max);
	margin: 0 auto;
	padding: 34px 18px 22px;
	align-items: flex-start;
}

/* ----------------------------------------------------------------------- */
/*  Póster con efecto 3D                                                    */
/* ----------------------------------------------------------------------- */
.hposter {
	flex: 0 0 auto;
	width: clamp(185px, 30vw, 300px);
	perspective: 1000px;       /* habilita la profundidad 3D del tilt       */
}
.hposter__card {
	position: relative;
	aspect-ratio: 2 / 3;
	border-radius: 13px;
	overflow: hidden;
	background: var(--card);
	border: 1px solid rgba(var(--mc-text-rgb, 255, 255, 255), .12);
	box-shadow: var(--shadow);
	transform-style: preserve-3d;
	transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
	will-change: transform;
}
.hposter__card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hposter__noimg {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 16px;
	text-align: center;
	color: var(--muted);
	font-weight: 700;
}
/* Brillo que sigue al cursor (lo posiciona mk-hero.js) */
.hposter__glare {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%),
		rgba(255, 255, 255, .28), transparent 45%);
	transition: opacity .25s;
}
.hposter.is-tilting .hposter__glare { opacity: 1; }

@media (hover: none) {
	/* En táctil no hay tilt: evitamos cualquier coste innecesario */
	.hposter__card { transition: none; }
}

/* ----------------------------------------------------------------------- */
/*  Columna de información                                                  */
/* ----------------------------------------------------------------------- */
.hcol { flex: 1 1 auto; min-width: 0; }

.htitle {
	font-size: clamp(21px, 4.2vw, 34px);
	font-weight: 840;
	line-height: 1.1;
	letter-spacing: -.02em;
	margin: 0 0 10px;
	text-shadow: 0 2px 20px rgba(0, 0, 0, .35);
}

.htags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.htag {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 750;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.htag--status {
	background: var(--accent);
	color: var(--mc-on-primary, #fff);
}
.htag--type {
	background: rgba(var(--mc-text-rgb, 255, 255, 255), .1);
	border: 1px solid var(--line);
	color: var(--fg);
}

.hinfo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px 14px;
	font-size: 13px;
	font-weight: 650;
	margin-bottom: 16px;
}
.hi { display: inline-flex; align-items: center; gap: 5px; }
.hi--rating { color: var(--mc-warning, #f59e0b); }
.hi .sub { color: var(--muted); font-weight: 600; }

/* Géneros (chips) */
.hchips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.chip {
	background: rgba(var(--mc-text-rgb, 255, 255, 255), .08);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 5px 12px;
	font-size: 12.5px;
	font-weight: 650;
	color: var(--fg);
	text-decoration: none;
	transition: background .15s, border-color .15s, transform .12s;
}
.chip:hover {
	background: rgba(var(--mc-primary-rgb, 124, 58, 237), .18);
	border-color: rgba(var(--mc-primary-rgb, 124, 58, 237), .5);
	transform: translateY(-1px);
	color: var(--fg);
}
.chip--more { cursor: pointer; color: var(--accent); }
.hchips .g-extra { display: none; }
.hchips.is-open .g-extra { display: inline-flex; }
.hchips.is-open .chip--more { display: none; }

/* Acciones */
.hact { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; margin-bottom: 16px; }
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: var(--card);
	color: var(--fg);
	font-weight: 750;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
	transition: filter .18s, transform .18s, background .18s;
}
.btn.primary {
	background: linear-gradient(135deg, var(--mc-primary), var(--mc-secondary, var(--mc-primary)));
	border-color: transparent;
	color: var(--mc-on-primary, #fff);
}
.btn.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn.ghost:hover { background: rgba(var(--mc-text-rgb, 255, 255, 255), .06); }

/* ----------------------------------------------------------------------- */
/*  Bookmark (marcador) — envuelve el botón nativo de Madara                */
/* ----------------------------------------------------------------------- */
/* .add-bookmark es el contenedor que el JS nativo refresca por AJAX
   (empty()+append()), así que estilizamos su contenido nativo SIN romperlo. */
.add-bookmark {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}
.add-bookmark .action_icon { margin: 0; display: inline-flex; }
.add-bookmark .action_icon a { color: inherit; display: inline-flex; font-size: 18px; line-height: 1; text-decoration: none; }
.add-bookmark .action_icon a i { line-height: 1; }
/* Texto nativo: corto y discreto (oculto en móvil para que no desborde). */
.add-bookmark .action_detail { font-size: 13px; font-weight: 750; white-space: nowrap; }
.add-bookmark .action_detail span { color: inherit; }
/* Estado "guardado": el icono pasa a checkmark; lo resaltamos en acento. */
.add-bookmark .wp-manga-delete-bookmark { color: var(--accent); }
@media (max-width: 600px) { .add-bookmark .action_detail { display: none; } }

/* ----------------------------------------------------------------------- */
/*  Tarjeta de calificación (Rate this) con estrellas interactivas nativas  */
/* ----------------------------------------------------------------------- */
.ratecard {
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 460px;
	margin: 4px 0 2px;
	padding: 16px 18px;
	background: rgba(var(--mc-surface-rgb, 22, 22, 22), .5);
	border: 1px solid var(--line);
	border-radius: 16px;
}
.rc-score { flex: 0 0 auto; text-align: center; padding-right: 18px; border-right: 1px solid var(--line); }
.rc-num { font-size: 34px; font-weight: 900; line-height: 1; color: var(--mc-warning, #f59e0b); }
.rc-of { font-size: 11px; color: var(--muted); margin-top: 5px; text-transform: uppercase; letter-spacing: .04em; }
.rc-mid { flex: 1 1 auto; min-width: 0; }
.rc-count { font-size: 12px; color: var(--muted); }
.rc-you-label { font-weight: 800; font-size: 13px; margin: 4px 0 6px; }
.rc-mine { font-size: 11.5px; color: var(--muted); margin-top: 6px; }

/* Estrellas nativas. El widget nativo trae DOS capas:
   .post-total-rating (media, visible y clicable) y .user-rating (tu voto, que
   el JS muestra tras votar). Ocultamos .user-rating por defecto para que NO
   salgan estrellas duplicadas; el JS la muestra cuando corresponde. */
.rc-stars-native .post-total-rating { display: inline-flex; align-items: center; line-height: 1; }
.rc-stars-native .post-total-rating.allow_vote { cursor: pointer; }
.rc-stars-native .user-rating { display: none; }
.rc-stars-native .ratings_stars {
	font-size: 22px;
	color: var(--mc-warning, #f59e0b);
	margin-right: 2px;
}
.rc-stars-native .ratings_stars:hover { transform: scale(1.08); }
/* Texto nativo ("Your Rating" / número): lo ocultamos, ya está en .rc-count */
.rc-stars-native .total_votes,
.rc-stars-native .score { display: none; }

@media (max-width: 767px) {
	.ratecard { margin-left: auto; margin-right: auto; }
	.hact { justify-content: center; }
}

/* Sinopsis colapsable */
.syn {
	font-size: 14px;
	line-height: 1.65;
	color: rgba(var(--mc-text-rgb, 255, 255, 255), .86);
}
.syn.clamp {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.readmore {
	background: none;
	border: 0;
	color: var(--accent);
	font-weight: 750;
	font-size: 13px;
	cursor: pointer;
	padding: 8px 0 0;
}

/* ----------------------------------------------------------------------- */
/*  Panel colapsable de información (.sinfo)                                 */
/* ----------------------------------------------------------------------- */
.sinfo {
	margin-top: 16px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: rgba(var(--mc-surface-rgb, 22, 22, 22), .5);
	overflow: hidden;
}
.sinfo-h {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 16px;
	font-weight: 750;
	font-size: 14px;
	cursor: pointer;
	user-select: none;
}
.sinfo-h-l { display: inline-flex; align-items: center; gap: 8px; }
.sinfo .chev { transition: transform .25s; color: var(--muted); display: inline-flex; }
.sinfo.is-open .chev { transform: rotate(180deg); }

/* Colapsado por transición de grid-rows (sin medir alturas en JS). */
.sinfo-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 18px;
	padding: 0 16px;
	max-height: 0;
	opacity: 0;
	transition: max-height .3s ease, opacity .25s, padding .3s ease;
}
.sinfo.is-open .sinfo-grid { max-height: 480px; opacity: 1; padding: 4px 16px 16px; }

.sir {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	font-size: 13px;
	border-bottom: 1px solid rgba(var(--mc-border-rgb, 42, 42, 42), .4);
}
.sir--wide { grid-column: 1 / -1; }
.sir .l { color: var(--muted); font-weight: 650; flex: 0 0 auto; }
.sir .v { text-align: right; font-weight: 650; }
.sir .v a { color: var(--accent); text-decoration: none; }
.sir .v a:hover { text-decoration: underline; }

@media (max-width: 767px) {
	.sinfo-grid { grid-template-columns: 1fr; }
	.sinfo-h { text-align: left; }
}

/* ----------------------------------------------------------------------- */
/*  Responsive                                                             */
/* ----------------------------------------------------------------------- */
@media (max-width: 767px) {
	.hero__in { flex-direction: column; align-items: center; gap: 18px; padding: 26px 14px 16px; }
	.hposter { width: min(70%, 240px); }
	.hcol { width: 100%; }
	.htitle, .htags, .hinfo, .hchips { text-align: center; }
	.htags, .hinfo, .hchips, .hact { justify-content: center; }
	.hposter__card { transition: none; transform: none !important; } /* sin tilt en móvil */
}

/* ----------------------------------------------------------------------- */
/*  Pestañas (Capítulos / Discusión) y zona de comentarios más visibles     */
/* ----------------------------------------------------------------------- */
.single-wp-manga #manga-content-navs.nav-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;       /* centradas */
	gap: 10px;
	border-bottom: 0;
	margin: 30px 0 18px;
}
.single-wp-manga #manga-content-navs .nav-item { margin: 0; }
.single-wp-manga #manga-content-navs .nav-link {
	color: var(--mc-text-muted, #9a9a9a);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: 14px;
	padding: 11px 22px;
	margin: 0;
	border: 1px solid rgba(var(--mc-border-rgb, 42, 42, 42), .7);  /* bordeadas */
	border-radius: 999px;
	background: rgba(var(--mc-surface-rgb, 22, 22, 22), .5);
	transition: background .15s, color .15s, border-color .15s;
}
.single-wp-manga #manga-content-navs .nav-link:hover {
	color: var(--mc-text, #fff);
	border-color: rgba(var(--mc-primary-rgb, 124, 58, 237), .5);
}
.single-wp-manga #manga-content-navs .nav-link.active {
	color: var(--mc-on-primary, #fff);
	background: var(--mc-primary, #7c3aed);
	border-color: transparent;
}

/* La discusión se destaca con un contenedor propio y aire */
.single-wp-manga #tab-manga-discussion { padding-top: 14px; }
.single-wp-manga #tab-manga-discussion .comments-area,
.single-wp-manga #tab-manga-discussion .mk-comments-area,
.single-wp-manga #tab-manga-discussion .wpd-thread-wrapper,
.single-wp-manga #tab-manga-discussion #comments {
	background: rgba(var(--mc-surface-rgb, 22, 22, 22), .45);
	border: 1px solid rgba(var(--mc-border-rgb, 42, 42, 42), .55);
	border-radius: 16px;
	padding: 18px;
}
/* Encabezado del recuento de comentarios, más legible */
.single-wp-manga #tab-manga-discussion .comments-title,
.single-wp-manga #tab-manga-discussion .comments-count {
	font-size: 18px;
	font-weight: 820;
	color: var(--mc-text, #fff);
	margin-bottom: 12px;
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
	.hposter__card, .chip, .btn { transition: none; }
}