/* =========================================================================
   MK Utoon Skin — Estética Utoon sobre Madara Child MK
   -------------------------------------------------------------------------
   Consume EXCLUSIVAMENTE las custom properties --mc-* inyectadas en :root
   por MK_Theme_Tokens (mapeadas al panel de Madara). No define colores
   "hardcodeados" de marca: cambia el panel y cambia toda la piel.

   Archivo estático => cacheable por el navegador (no infla el HTML).
   ========================================================================= */

/* ----------------------------------------------------------------------- */
/*  1. Modales modernos (glassmorphism)                                    */
/*     Estructura Bootstrap nativa de Madara: .modal > .modal-dialog >     */
/*     .modal-content. Reaprovechamos el marcado existente.                */
/* ----------------------------------------------------------------------- */

.modal-backdrop.show,
.modal-backdrop.in {
	background: rgba(var(--mc-bg-rgb), .6);
	-webkit-backdrop-filter: blur(8px) saturate(140%);
	backdrop-filter: blur(8px) saturate(140%);
}

.modal .modal-content {
	background: rgba(var(--mc-surface-rgb), .72);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	backdrop-filter: blur(24px) saturate(180%);
	border: 1px solid rgba(var(--mc-border-rgb), .6);
	border-radius: 16px;
	color: var(--mc-text);
	box-shadow:
		0 24px 60px -12px rgba(0, 0, 0, .55),
		inset 0 1px 0 rgba(255, 255, 255, .05);
	overflow: hidden;
}

.modal .modal-header,
.modal .modal-footer {
	border-color: rgba(var(--mc-border-rgb), .5);
}

.modal .modal-title {
	color: var(--mc-text);
	font-weight: 700;
}

.modal .modal-body {
	color: var(--mc-text-muted);
}

/* Botón primario dentro de modales (login / registro / bulk) */
.modal .btn-primary,
.modal .submit input[type="submit"],
.modal-content .mk-btn--primary {
	background: linear-gradient(135deg, var(--mc-primary), var(--mc-secondary));
	border: none;
	color: var(--mc-on-primary);
	border-radius: 10px;
	transition: filter .18s ease, transform .18s ease;
}

.modal .btn-primary:hover,
.modal .submit input[type="submit"]:hover,
.modal-content .mk-btn--primary:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.modal a.btn-active-modal,
.modal .c-modal_item a:hover {
	color: var(--mc-accent);
}

/* ----------------------------------------------------------------------- */
/*  2. Página de lectura — formato webtoon (tira continua)                  */
/*     Marcado de Madara: .reading-content > .page-break > img.wp-manga-... */
/*     Usamos display:contents para no añadir cajas extra (anti DOM-bloat). */
/* ----------------------------------------------------------------------- */

.reading-content.dynr-reading {
	--mc-read-gap: 0px;             /* separación entre páginas (webtoon = 0)   */
	--mc-read-bright: 1;            /* brillo regulable por el lector           */
	--reader-max-width: 800px;      /* ancho máx. de la tira (slider del HUD)   */
	background: var(--mc-bg);
}

.reading-content.dynr-reading .page-break {
	display: contents;           /* el wrapper no genera caja propia         */
}

.reading-content.dynr-reading img.wp-manga-chapter-img,
.reading-content.dynr-reading .page-break img {
	display: block;
	width: 100%;
	max-width: var(--reader-max-width, 800px);
	height: auto;
	margin: 0 auto var(--mc-read-gap);  /* centrado al limitar el ancho        */
	background: var(--mc-surface);   /* placeholder mientras carga          */
	filter: brightness(var(--mc-read-bright));
	content-visibility: auto;        /* el navegador omite render fuera de   */
	contain-intrinsic-size: 800px 1200px; /* viewport: scroll fluido en cap. largos */
}

/* "Original": sin límite de ancho (imagen a tamaño nativo). */
.reading-content.dynr-reading.fit-original img.wp-manga-chapter-img,
.reading-content.dynr-reading.fit-original .page-break img {
	width: auto;
	max-width: 100%;
}

/* En MÓVIL la imagen ocupa TODO el ancho de la pantalla (sin márgenes laterales
   del contenedor). Sacamos la tira de lectura a "full-bleed" (100vw) rompiendo
   el padding de los contenedores nativos (.container/.col/.read-container…).
   La herramienta de "Image width" del HUD sigue funcionando: reduce
   --reader-max-width y la imagen se encoge centrada dentro de esta banda. */
@media (max-width: 767px) {
	/* Especificidad alta (0,5,0) + !important para ganarle a la regla inline del
	   tema padre: "@media(max-width:480px){.c-blog-post .entry-content
	   .entry-content_wrap .reading-content{margin-left:-15px;margin-right:-15px}}"
	   que solo restaba 15px y dejaba márgenes. */
	.c-blog-post .entry-content .entry-content_wrap .reading-content.dynr-reading,
	.reading-content.dynr-reading {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* La imagen llena la banda completa; el slider del HUD (--reader-max-width
	   inline en %) sigue mandando para poder reducirla luego. */
	.reading-content.dynr-reading img.wp-manga-chapter-img,
	.reading-content.dynr-reading .page-break img {
		width: 100%;
	}
}

/* Barra/HUD del lector si existe (controles flotantes) */
.reading-content.dynr-reading + .mk-reader-hud,
.mk-reader-hud {
	background: rgba(var(--mc-header-bg-rgb), .7);
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	backdrop-filter: blur(12px) saturate(160%);
	border: 1px solid rgba(var(--mc-border-rgb), .5);
	color: var(--mc-text);
	border-radius: 999px;
}

/* ----------------------------------------------------------------------- */
/*  2b. Caja de capítulo bloqueado (plugin Chapter Permissions)             */
/*      Estética Utoon con los tokens del panel. Reemplaza el mensaje VIP   */
/*      por defecto del plugin (vía filtro, sin editar el plugin).          */
/* ----------------------------------------------------------------------- */
.mk-locked {
	max-width: 600px;
	margin: 30px auto;
	padding: 40px 24px;
	text-align: center;
	color: var(--mc-text, #fff);
	background: rgba(var(--mc-surface-rgb, 22, 22, 22), .75);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
	border: 1px solid rgba(var(--mc-warning-rgb, 245, 158, 11), .45);
	border-radius: 16px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.mk-locked__icon { color: var(--mc-warning, #f59e0b); margin-bottom: 12px; }
.mk-locked__title {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 820;
	color: var(--mc-warning, #f59e0b);
}
.mk-locked__text {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(var(--mc-text-rgb, 255, 255, 255), .85);
}
.mk-locked__cta {
	display: inline-block;
	padding: 12px 26px;
	border-radius: 12px;
	font-weight: 800;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .03em;
	background: linear-gradient(135deg, var(--mc-primary), var(--mc-secondary, var(--mc-primary)));
	color: var(--mc-on-primary, #fff);
	transition: filter .18s, transform .18s;
}
.mk-locked__cta:hover { filter: brightness(1.08); transform: translateY(-1px); color: var(--mc-on-primary, #fff); }

/* ----------------------------------------------------------------------- */
/*  3. Acentos compartidos que consumen los tokens del panel                */
/* ----------------------------------------------------------------------- */

.mk-comments-area {
	--mk-accent: var(--mc-primary);
}

a:hover {
	color: var(--mc-link-hover);
}

.manga-title-badges.hot {
	background: var(--mc-danger);
	color: var(--mc-on-danger);
}

.manga-title-badges.new {
	background: var(--mc-success);
	color: var(--mc-on-success);
}

.post-total-rating .total_votes,
.score .total_votes,
.star-rating i {
	color: var(--mc-warning);
}

/* ----------------------------------------------------------------------- */
/*  4. Scrollbar acorde a la marca (WebKit + Firefox)                       */
/* ----------------------------------------------------------------------- */

@media (min-width: 768px) {
	* {
		scrollbar-width: thin;
		scrollbar-color: var(--mc-primary) var(--mc-bg);
	}

	::-webkit-scrollbar {
		width: 10px;
		height: 10px;
	}

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

	::-webkit-scrollbar-thumb {
		background: var(--mc-primary);
		border-radius: 999px;
		border: 2px solid var(--mc-bg);
	}

	::-webkit-scrollbar-thumb:hover {
		background: var(--mc-secondary);
	}
}

/* ----------------------------------------------------------------------- */
/*  5. Accesibilidad: respeta usuarios sensibles al movimiento/transparencia*/
/* ----------------------------------------------------------------------- */

@media (prefers-reduced-transparency: reduce) {
	.modal .modal-content,
	.mk-reader-hud {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: var(--mc-surface);
	}
}

/* ----------------------------------------------------------------------- */
/*  Cabecera flotante estilo Utoon (única cabecera del sitio): logo a la      */
/*  izquierda, acciones a la derecha (lupa + acceso/avatar) en UNA línea.     */
/*  Fuera de la lectura (en lectura el HUD provee la navegación y la          */
/*  cabecera no se imprime). Sin hamburguesa, sin off-canvas, sin sub-nav.    */
/* ----------------------------------------------------------------------- */

/* Barra FIJA a tope, ancho completo, glass, siempre por encima del contenido.
   (Va en fixed —no sticky— porque ancestros de Madara pueden tener overflow y
   romper el sticky; el contenido se compensa con padding-top más abajo.)        */
.mk-site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 9999;
	background: transparent;
	border: 0;
	box-shadow: none;
	transition: transform .32s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}
/* Oculta la cabecera al bajar; reaparece al subir (clase puesta por JS). */
.mk-site-header.mk-header--hidden { transform: translateY(-130%); }

/* Barra "pastilla" flotante: NO ocupa todo el ancho, bordes redondeados.
   El ÚNICO fondo del header vive aquí (translúcido). Todo lo de dentro va
   transparente para evitar el "doble fondo". */
.mk-site-header .c-header__top {
	max-width: 1200px;
	width: calc(100% - 32px);
	margin: 14px auto 0;
	border-radius: 18px;
	/* Semi-transparente: el blur conserva legibilidad sobre cualquier fondo. */
	background: rgba(var(--mc-header-bg-rgb, 16, 16, 16), .55) !important;
	-webkit-backdrop-filter: blur(20px) saturate(175%);
	backdrop-filter: blur(20px) saturate(175%);
	border: 1px solid rgba(var(--mc-border-rgb, 42, 42, 42), .5);
	box-shadow: 0 16px 44px -20px rgba(0, 0, 0, .7);
}
/* Neutraliza estilos nativos/panel sobre la navegación interior.
   El padre aplica un GRADIENTE de marca (#000→#8224e3) a
   ".site-header .main-navigation.style-1" (0,3,0) impreso DESPUÉS de este CSS,
   por eso hace falta !important para anularlo y que se vea el glass translúcido. */
.mk-site-header .main-navigation,
.mk-site-header .main-navigation.style-1 {
	position: static;
	background: none !important;
	border: 0;
	box-shadow: none;
	font-size: 14px;          /* el padre pone font-size:0 */
}
.mk-site-header .main-navigation > .container {
	background: none !important;
	border: 0;
	box-shadow: none;
	max-width: 1240px;
	margin: 0 auto;
	padding-top: 0;
	padding-bottom: 0;
}

/* FLEX ESTRICTO: logo a la izquierda · acciones a la derecha, en una línea.
   Mayor/igual especificidad que el padre (.site-header .main-navigation
   .main-navigation_wrap) + !important donde el padre fuerza inline-block. */
.mk-site-header .main-navigation .main-navigation_wrap {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: nowrap;
	min-height: 64px;
	padding: 8px 0 !important;   /* el padre pone 35px 0 */
	font-size: 14px;
}
.mk-site-header .main-navigation .main-navigation_wrap > * {
	display: flex;               /* el padre pone inline-block */
	align-items: center;
	vertical-align: middle;
	font-size: 14px;
}
/* El padre fija .wrap_branding a width:25% (rompe el space-between): lo anulamos. */
.mk-site-header .main-navigation.style-1 .wrap_branding,
.mk-site-header .wrap_branding { width: auto !important; margin: 0; flex: 0 0 auto; }
.mk-site-header .wrap_branding .logo { display: inline-flex; align-items: center; }
.mk-site-header .main-navigation.style-1 .wrap_branding a img,
.mk-site-header .wrap_branding img { max-width: 200px; max-height: 42px; width: auto; height: auto; }

/* Contenedor de acciones de la derecha (lupa + acceso). margin-left:auto lo
   ancla SIEMPRE a la derecha, esté el usuario logueado o no. */
.mk-haction {
	display: flex !important;
	align-items: center;
	gap: 12px;            /* lupa y acceso "ligeramente separados" */
	margin-left: auto;
	flex: 0 0 auto;
}
/* Envoltorio del acceso (idéntico logueado/invitado): mantiene el avatar/círculo
   alineado y sirve de ancla (position:relative) para el dropdown del menú. */
.mk-access { display: flex; align-items: center; position: relative; flex: 0 0 auto; }

/* ── Campana de avisos (entre la lupa y el acceso) ─────────────────────── */
.mk-bell { position: relative; flex: 0 0 auto; }
.mk-bell__btn {
	position: relative;
	background: none;
	border: 0;
	color: var(--mc-on-header-bg, var(--mc-text, #fff));
	cursor: pointer;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	transition: background .15s, color .15s;
}
.mk-bell__btn:hover { background: rgba(var(--mc-text-rgb, 255, 255, 255), .1); color: var(--mc-primary, #7c3aed); }
.mk-bell__badge {
	position: absolute;
	top: 5px;
	right: 5px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	display: grid;
	place-items: center;
	background: var(--mc-danger, #ef4444);
	color: #fff;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 0 0 2px rgba(var(--mc-header-bg-rgb, 16, 16, 16), .9);
}

.mk-bell__panel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	width: min(360px, 86vw);
	background: rgba(var(--mc-surface-rgb, 22, 22, 22), .96);
	-webkit-backdrop-filter: blur(20px) saturate(170%);
	backdrop-filter: blur(20px) saturate(170%);
	border: 1px solid rgba(var(--mc-border-rgb, 42, 42, 42), .7);
	border-radius: 16px;
	box-shadow: 0 26px 64px -18px rgba(0, 0, 0, .7);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
	z-index: 60;
}
.mk-bell.is-open .mk-bell__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .18s ease, transform .18s ease;
}
.mk-bell__head {
	padding: 13px 16px;
	font-size: 13px;
	font-weight: 850;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--mc-text-muted, #9a9a9a);
	border-bottom: 1px solid rgba(var(--mc-border-rgb, 42, 42, 42), .5);
}
.mk-bell__list { list-style: none; margin: 0; padding: 6px; max-height: 60vh; overflow-y: auto; }
.mk-bell__item a {
	display: flex;
	gap: 11px;
	padding: 10px 10px;
	border-radius: 11px;
	text-decoration: none;
	color: var(--mc-text, #fff);
	transition: background .15s ease;
}
.mk-bell__item a:hover { background: rgba(var(--mc-primary-rgb, 124, 58, 237), .14); }
.mk-bell__thumb { flex: 0 0 auto; }
.mk-bell__thumb img { width: 46px; height: 46px; object-fit: cover; border-radius: 9px; display: block; }
.mk-bell__txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mk-bell__title { font-size: 14px; font-weight: 750; line-height: 1.3; color: var(--mc-text, #fff); }
.mk-bell__excerpt { font-size: 12.5px; color: var(--mc-text-muted, #9a9a9a); line-height: 1.45; }
.mk-bell__date { font-size: 11.5px; color: var(--mc-text-muted, #9a9a9a); margin-top: 1px; }
.mk-bell__all {
	display: block;
	text-align: center;
	padding: 12px;
	font-size: 13.5px;
	font-weight: 800;
	color: var(--mc-primary, #7c3aed);
	text-decoration: none;
	border-top: 1px solid rgba(var(--mc-border-rgb, 42, 42, 42), .5);
}
.mk-bell__all:hover { background: rgba(var(--mc-primary-rgb, 124, 58, 237), .1); color: var(--mc-primary, #7c3aed); }
.mk-bell__empty { padding: 26px 16px; text-align: center; font-size: 13.5px; color: var(--mc-text-muted, #9a9a9a); }

@media (max-width: 768px) {
	.mk-bell__btn { width: 40px; height: 40px; }
	/* La campana se mantiene; en pantallas muy estrechas el panel se ajusta. */
}

/* ── Navegación de secciones ───────────────────────────────────────────── */
/* Desktop: menú completo en el centro. Móvil: un único enlace "All mangas".  */
.mk-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1 1 auto;
	justify-content: center;
	min-width: 0;
}
.mk-nav__link {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: 10px;
	color: var(--mc-text, #fff);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	opacity: .9;
	transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.mk-nav__link:hover {
	background: rgba(var(--mc-primary-rgb, 124, 58, 237), .16);
	color: var(--mc-primary, #7c3aed);
	opacity: 1;
}

/* Enlace único de móvil. Especificidad alta (4 clases) para imponerse al
   ".main-navigation_wrap > *{display:flex}" del padre y poder ocultarlo. */
.mk-nav-mobile {
	flex: 1 1 auto;
	min-width: 0;                 /* permite encogerse junto a lupa+campana+acceso */
	justify-content: center;
	color: var(--mc-text, #fff);
	font-size: 14px;
	font-weight: 750;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: .92;
}
.mk-nav-mobile:hover { color: var(--mc-primary, #7c3aed); }
.mk-site-header .main-navigation .main-navigation_wrap > .mk-nav-mobile { display: none; }   /* oculto en desktop */

/* Tablet/móvil: oculta el menú completo y muestra solo "All mangas" centrado. */
@media (max-width: 991px) {
	.mk-site-header .main-navigation .main-navigation_wrap > .mk-nav        { display: none !important; }
	.mk-site-header .main-navigation .main-navigation_wrap > .mk-nav-mobile { display: flex !important; }
}

/* Compensa la cabecera fija (pastilla con 14px de margen superior): empuja el
   contenido salvo en la lectura (que no tiene barra). */
body:not(.mk-reader-on) .site-content { padding-top: 96px; }

/* Círculo de acceso (invitado): gradiente de marca, distinto de la lupa */
.mk-login-circle {
	position: relative;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: linear-gradient(135deg, var(--mc-primary, #7c3aed), var(--mc-secondary, #a855f7));
	color: var(--mc-on-primary, #fff);
	box-shadow: 0 6px 18px -6px rgba(var(--mc-primary-rgb, 124, 58, 237), .85);
	text-decoration: none;
	transition: transform .15s ease, filter .15s ease;
}
.mk-login-circle:hover { transform: translateY(-1px); filter: brightness(1.08); color: var(--mc-on-primary, #fff); }

/* ── Usuario logueado: avatar (toggle) + menú NATIVO como dropdown ──────── */
.mk-user { position: relative; flex: 0 0 auto; }
.mk-user .c-user_item { display: flex; align-items: center; margin: 0; text-align: left; }
/* Ocultamos el "Hi, nombre" nativo: solo queremos el círculo del avatar */
.mk-user .c-user_item > span { display: none; }
.mk-user .c-user_avatar { position: static; margin: 0; cursor: pointer; }
.mk-user .c-user_avatar-image {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 0 0 2px rgba(var(--mc-primary-rgb, 124, 58, 237), .7);
	transition: box-shadow .15s ease, transform .15s ease;
}
.mk-user .c-user_avatar:hover .c-user_avatar-image { transform: translateY(-1px); }
.mk-user .c-user_avatar-image img { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; border-radius: 50%; }

/* El menú nativo, reestilizado como dropdown glass alineado a la derecha */
.mk-user .c-user_menu {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	left: auto;
	width: max-content;
	min-width: 200px;
	margin: 0;
	padding: 8px;
	list-style: none;
	text-align: left;
	white-space: nowrap;
	background: rgba(var(--mc-surface-rgb, 22, 22, 22), .92);
	-webkit-backdrop-filter: blur(20px) saturate(170%);
	backdrop-filter: blur(20px) saturate(170%);
	border: 1px solid rgba(var(--mc-border-rgb, 42, 42, 42), .7);
	border-radius: 14px;
	box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .7);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
	z-index: 50;
}
/* Abierto por clic (JS) o por hover (fallback nativo) */
.mk-user .c-user_item.is-open .c-user_menu,
.mk-user .c-user_avatar:hover .c-user_menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .18s ease, transform .18s ease;
}
.mk-user .c-user_menu:after { display: none; } /* quita el pseudo "puente" nativo */
.mk-user .c-user_menu li { margin: 0; padding: 0; list-style: none; }
.mk-user .c-user_menu a {
	display: block;
	padding: 10px 14px;
	border-radius: 9px;
	color: var(--mc-text, #fff);
	font-size: 14px;
	font-weight: 650;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.mk-user .c-user_menu a:hover {
	background: rgba(var(--mc-primary-rgb, 124, 58, 237), .18);
	color: var(--mc-text, #fff);
}

/* Defensa: si por caché quedara markup nativo del padre, no se muestra */
.mk-site-header .c-togle__menu,
.mobile-menu.off-canvas,
.off-canvas,
.c-sub-header-nav { display: none !important; }

@media (max-width: 768px) {
	/* Pastilla un poco más pegada a los bordes en móvil */
	.mk-site-header .c-header__top { width: calc(100% - 20px); margin-top: 10px; border-radius: 16px; }
	/* La fila se mantiene en FLEX (logo | acciones); nada se superpone. */
	.mk-site-header .main-navigation .main-navigation_wrap {
		min-height: 56px;
		padding: 6px 0 !important;
		gap: 12px;
	}
	.mk-site-header .main-navigation.style-1 .wrap_branding a img,
	.mk-site-header .wrap_branding img { max-height: 34px; }
	.mk-haction { gap: 15px !important; }   /* lupa y login bien separados */
	.mk-search-trigger, .mk-login-circle, .mk-user .c-user_avatar-image { width: 40px; height: 40px; }
	body:not(.mk-reader-on) .site-content { padding-top: 84px; }
	/* El menú de usuario no se sale de pantalla por la derecha */
	.mk-user .c-user_menu { right: 0; min-width: 180px; }
}

/* ----------------------------------------------------------------------- */
/*  Buscador estilo Utoon: lupa en la cabecera + overlay                    */
/* ----------------------------------------------------------------------- */

/* Ocultamos el buscador inline antiguo por si quedara en caché de algún sitio */
#search-sidebar { display: none !important; }

.mk-search-trigger {
	background: none;
	border: 0;
	color: var(--mc-on-header-bg, var(--mc-text, #fff));
	cursor: pointer;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	transition: background .15s, color .15s;
}
.mk-search-trigger:hover { background: rgba(var(--mc-text-rgb, 255, 255, 255), .1); color: var(--mc-primary); }

html.mk-search-lock { overflow: hidden; }

.mk-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;          /* por encima de la cabecera fija (9999) */
	display: flex;
	justify-content: center;  /* centrado horizontal exacto */
	align-items: flex-start;
	padding: 14vh 16px 16px;
	background: rgba(var(--mc-bg-rgb, 10, 10, 10), .72);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	backdrop-filter: blur(14px) saturate(150%);
	opacity: 0;
	visibility: hidden;
	transition: opacity .22s, visibility 0s linear .22s;
}
.mk-search-overlay.open { opacity: 1; visibility: visible; transition: opacity .22s; }

.mk-search-panel {
	width: min(640px, 100%);
	transform: translateY(-12px);
	transition: transform .26s cubic-bezier(.2, .8, .2, 1);
}
.mk-search-overlay.open .mk-search-panel { transform: none; }

.mk-search-box {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--mc-surface, #161616);
	border: 1px solid rgba(var(--mc-border-rgb, 42, 42, 42), .7);
	border-radius: 16px;
	padding: 6px 10px 6px 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.mk-search-ic { color: var(--mc-text-muted, #9a9a9a); display: inline-flex; flex: 0 0 auto; }
.mk-search-box .manga-search-form { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; margin: 0; }
.mk-search-box .manga-search-field {
	flex: 1 1 auto;
	width: 100%;
	background: none;
	border: 0;
	outline: none;
	color: var(--mc-text, #fff);
	font-size: 16px;
	padding: 14px 6px;
}
.mk-search-box .manga-search-field::placeholder { color: var(--mc-text-muted, #9a9a9a); }
.mk-search-box .btn-search { background: none; border: 0; color: var(--mc-text-muted, #9a9a9a); cursor: pointer; padding: 8px; font-size: 18px; }
/* El "loader" nativo (5 puntos): oculto salvo durante la carga AJAX. La regla
   base del padre (display:none) no aplica aquí porque el form ya no vive en
   .c-header__top, así que la replicamos. */
.mk-search-box .manga-search-form .loader-inner { display: none; }
.mk-search-box .manga-search-form input.ui-autocomplete-loading + input[type="submit"] + .loader-inner,
.mk-search-box .manga-search-form input.ui-autocomplete-loading + .btn-search + .loader-inner { display: block; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.mk-search-esc {
	flex: 0 0 auto;
	background: rgba(var(--mc-text-rgb, 255, 255, 255), .08);
	border: 1px solid rgba(var(--mc-border-rgb, 42, 42, 42), .7);
	color: var(--mc-text-muted, #9a9a9a);
	border-radius: 8px;
	padding: 6px 11px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}
/* La caja de autocompletado nativa de Madara, dentro del overlay */
.mk-search-box .manga-autocomplete.ui-autocomplete {
	position: absolute !important;
	top: 100% !important;
	left: 0;
	width: 100% !important;
	margin-top: 12px;
	background: var(--mc-surface, #161616);
	border: 1px solid rgba(var(--mc-border-rgb, 42, 42, 42), .7);
	border-radius: 14px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
	max-height: 60vh;
	overflow-y: auto;
	z-index: 5;
}
.mk-search-all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 16px auto 0;
	color: var(--mc-text-muted, #9a9a9a);
	font-weight: 700;
	font-size: 13.5px;
	text-decoration: none;
	width: max-content;
}
.mk-search-all:hover { color: var(--mc-primary); }

@media (prefers-reduced-transparency: reduce) {
	.mk-search-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(var(--mc-bg-rgb, 10, 10, 10), .96); }
}

/* ----------------------------------------------------------------------- */
/*  Footer: redes sociales ordenadas (Facebook, X, YouTube…)                */
/* ----------------------------------------------------------------------- */
.site-footer .wrap_social_account { text-align: center; }
.site-footer .wrap_social_account ul,
.site-footer .wrap_social_account .social_account__item,
.site-footer .wrap_social_account .list-inline {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.site-footer .wrap_social_account li { margin: 0; padding: 0; display: inline-flex; }
.site-footer .wrap_social_account a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(var(--mc-text-rgb, 255, 255, 255), .08);
	border: 1px solid rgba(var(--mc-border-rgb, 42, 42, 42), .6);
	color: var(--mc-text, #fff);
	font-size: 17px;
	line-height: 1;
	transition: background .15s, color .15s, transform .15s;
}
.site-footer .wrap_social_account a:hover {
	background: var(--mc-primary);
	color: var(--mc-on-primary, #fff);
	transform: translateY(-2px);
}
.site-footer .wrap_social_account a i { line-height: 1; }

/* =========================================================================
   MODO OSCURO / CLARO — adaptación de los tokens de SUPERFICIE
   -------------------------------------------------------------------------
   OJO con la nomenclatura (invertida) de Madara:
     · body.text-ui-light  → texto claro  → MODO OSCURO  (fondo oscuro)
     · body.text-ui-dark   → texto oscuro → MODO CLARO   (fondo claro)
   Solo se reescriben las superficies (bg/surface/text/border…) y SIEMPRE con
   su variante -rgb, porque muchos componentes usan rgba(var(--mc-*-rgb), …).
   Los colores de MARCA (primary/secondary/accent) NO se tocan: vienen del
   panel y deben ser iguales en ambos modos.
   ========================================================================= */

/* ── MODO OSCURO (fondo más profundo que el default, para resaltar tarjetas) ── */
body.text-ui-light {
	--mc-bg:         #060608;  --mc-bg-rgb:         6, 6, 8;
	--mc-surface:    #101015;  --mc-surface-rgb:    16, 16, 21;
	--mc-surface2:   #16161d;  --mc-surface2-rgb:   22, 22, 29;
	--mc-surface3:   #1d1d26;  --mc-surface3-rgb:   29, 29, 38;
	--mc-card-bg:    #131319;  --mc-card-bg-rgb:    19, 19, 25;
	--mc-header-bg:  #0a0a0e;  --mc-header-bg-rgb:  10, 10, 14;
	--mc-footer-bg:  #08080b;  --mc-footer-bg-rgb:  8, 8, 11;
	--mc-text:       #f5f6f8;  --mc-text-rgb:       245, 246, 248;
	--mc-text-muted: #9aa0ab;  --mc-text-muted-rgb: 154, 160, 171;
	--mc-border:     #272730;  --mc-border-rgb:     39, 39, 48;
}

/* ── MODO CLARO (máximo contraste, sin elementos "lavados") ── */
body.text-ui-dark {
	--mc-bg:         #eceef2;  --mc-bg-rgb:         236, 238, 242;
	--mc-surface:    #ffffff;  --mc-surface-rgb:    255, 255, 255;
	--mc-surface2:   #f2f3f6;  --mc-surface2-rgb:   242, 243, 246;
	--mc-surface3:   #e7e9ef;  --mc-surface3-rgb:   231, 233, 239;
	--mc-card-bg:    #ffffff;  --mc-card-bg-rgb:    255, 255, 255;
	--mc-header-bg:  #ffffff;  --mc-header-bg-rgb:  255, 255, 255;
	--mc-footer-bg:  #f2f3f6;  --mc-footer-bg-rgb:  242, 243, 246;
	--mc-text:       #14151a;  --mc-text-rgb:       20, 21, 26;
	--mc-text-muted: #5b616b;  --mc-text-muted-rgb: 91, 97, 107;
	--mc-border:     #dde0e6;  --mc-border-rgb:     221, 224, 230;
}

/* ── POLISH MODO OSCURO: resaltar nombre del manhwa, sección y tarjetas ─── */
/* El padre fuerza un color sólido (#262626) sobre .c-header__top en modo oscuro
   con especificidad 0,3,0. Lo devolvemos a semitransparente con 0,3,1. */
body.text-ui-light .mk-site-header .c-header__top {
	background: rgba(var(--mc-header-bg-rgb, 10, 10, 14), .55) !important;
	border-color: rgba(var(--mc-border-rgb, 39, 39, 48), .5);
}
body.text-ui-light .htitle {
	color: #fff;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}
/* Tarjeta de cada capítulo: borde visible y leve elevación sobre el fondo. */
body.text-ui-light .crow {
	background: var(--mc-surface2, #16161d);
	border-color: rgba(var(--mc-border-rgb, 39, 39, 48), .9);
}
body.text-ui-light .crow:hover {
	background: rgba(var(--mc-primary-rgb, 124, 58, 237), .14);
	border-color: rgba(var(--mc-primary-rgb, 124, 58, 237), .55);
}
/* Sinopsis y panel de info: superficie un punto más profunda. */
body.text-ui-light .syn,
body.text-ui-light .ratecard,
body.text-ui-light .sinfo { background: rgba(var(--mc-surface-rgb, 16, 16, 21), .55); }

/* ── POLISH COMÚN (independiente del modo): chapter box y título de sección ── */
/* Cada capítulo SIEMPRE en una caja delimitada (no borde transparente). */
.crow { border-color: var(--line, rgba(var(--mc-border-rgb, 42, 42, 42), .65)); }
/* Título de la sección de capítulos con barra de acento (siempre). */
.mk-chapters .stitle {
	padding-left: 12px;
	border-left: 4px solid var(--mc-primary, #7c3aed);
}
/* Nombre del manhwa con barra de acento solo en desktop (en móvil va centrado). */
@media (min-width: 768px) {
	.hero .htitle {
		padding-left: 14px;
		border-left: 4px solid var(--mc-primary, #7c3aed);
	}
}
/* La sinopsis, como bloque legible con aire en ambos modos. */
.syn {
	padding: 14px 16px;
	border: 1px solid rgba(var(--mc-border-rgb, 42, 42, 42), .5);
	border-radius: 12px;
}

/* ── POLISH MODO CLARO: contraste y alineación ─────────────────────────── */
/* Cabecera clara translúcida con borde definido (no se "lava"). */
body.text-ui-dark .mk-site-header .c-header__top {
	background: rgba(255, 255, 255, .7) !important;
	border-color: rgba(0, 0, 0, .08);
	box-shadow: 0 14px 40px -22px rgba(0, 0, 0, .35);
}
/* Iconos y nav legibles sobre claro. */
body.text-ui-dark .mk-search-trigger,
body.text-ui-dark .mk-nav__link { color: var(--mc-text, #14151a); }
/* Tarjetas de capítulo con borde claro nítido y sombra mínima. */
body.text-ui-dark .crow {
	background: #fff;
	border-color: var(--mc-border, #dde0e6);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
body.text-ui-dark .crow:hover {
	background: rgba(var(--mc-primary-rgb, 124, 58, 237), .08);
	border-color: rgba(var(--mc-primary-rgb, 124, 58, 237), .45);
}
/* El velo del hero, que en oscuro oscurece, en claro debe aclarar (texto negro). */
body.text-ui-dark .hero::after {
	background: linear-gradient(180deg, rgba(var(--mc-bg-rgb, 236, 238, 242), .55), rgba(var(--mc-bg-rgb, 236, 238, 242), .96));
}
body.text-ui-dark .hero__bg { filter: blur(42px) brightness(.9) saturate(1.2); }
body.text-ui-dark .htitle { color: var(--mc-text, #14151a); text-shadow: none; }
/* Sinopsis en claro: fondo blanco y texto oscuro nítido. */
body.text-ui-dark .syn { background: #fff; color: rgba(var(--mc-text-rgb, 20, 21, 26), .9); }
/* Pestañas (Capítulos/Discusión) legibles en claro. */
body.text-ui-dark .single-wp-manga #manga-content-navs .nav-link { color: var(--mc-text-muted, #5b616b); }
/* Overlay de búsqueda en claro: panel blanco, no negro. */
body.text-ui-dark .mk-search-overlay { background: rgba(var(--mc-bg-rgb, 236, 238, 242), .7); }