/* ═══════════════════════════════════════════════════════════════
   Madara-Child-MK — Área de comentarios v2
   Cargado solo en is_singular('wp-manga')

   CLAVE DEL DISEÑO
   ----------------
   Todo el color sale de los tokens --mc-* que MK_Theme_Tokens inyecta en
   :root y que mk-utoon.css reescribe según el modo:
       body.text-ui-light → MODO OSCURO
       body.text-ui-dark  → MODO CLARO   (el que usa la web ahora mismo)
   Por eso el bloque de comentarios se adapta SOLO al modo activo y el texto
   siempre queda con contraste alto. Solo hay reglas específicas de modo
   donde el token no basta (sombras, velos y desenfoques).
   ═══════════════════════════════════════════════════════════════ */

.mk-comments-area {
	/* Alias locales: acortan las reglas y dan un único punto de ajuste. */
	--fg:        var(--mc-text, #14151a);
	--muted:     var(--mc-text-muted, #5b616b);
	--card:      var(--mc-card-bg, #fff);
	--surface:   var(--mc-surface2, #f2f3f6);
	--line:      rgba(var(--mc-border-rgb, 221, 224, 230), .9);
	--accent:    var(--mc-primary, #7c3aed);
	--accent-2:  var(--mc-secondary, #a855f7);
	--accent-rgb: var(--mc-primary-rgb, 124, 58, 237);
	--radius:    16px;
	--radius-sm: 11px;

	margin-top: 10px;
	color: var(--fg);
	font-family: inherit;
}

.mk-comments-area *,
.mk-comments-area *::before,
.mk-comments-area *::after { box-sizing: border-box; }


/* ════════════════════════════════════════════════════════════════
   MURO DE ACCESO
   ════════════════════════════════════════════════════════════════ */
.manga-comment-login-wall {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 46px 30px 42px;
	background: var(--card);
	background-image: linear-gradient(150deg, rgba(var(--accent-rgb), .10), rgba(var(--mc-secondary-rgb, 168, 85, 247), .04));
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-align: center;
}

.mk-login-wall__icon {
	font-size: 50px;
	line-height: 1;
	color: var(--accent);
	animation: mk-icon-float 3.2s ease-in-out infinite;
}

@keyframes mk-icon-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-7px); }
}

.mk-login-wall__title {
	margin: 0;
	font-size: 22px;
	font-weight: 850;
	color: var(--fg);
}

.mk-login-wall__desc,
.mk-login-wall__xp {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--muted);
	max-width: 46ch;
}

.mk-login-wall__xp b { color: var(--accent); font-weight: 850; }

.mk-login-wall__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 6px;
}

/* ── Botones del muro ────────────────────────────────────────── */
.mk-comments-area .mk-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 24px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 800;
	text-decoration: none !important;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .2s ease, filter .15s ease, border-color .2s ease, color .2s ease;
}
.mk-comments-area .mk-btn:hover { transform: translateY(-2px); }

/* CONTRASTE (modo claro):
   El botón primario usa un color PLANO, no un degradado. Es a propósito:
   --mc-on-primary lo calcula el tema por luminancia a partir de --mc-primary,
   así que solo garantiza contraste si el fondo visible ES exactamente
   --mc-primary. Con un degradado, la mitad derecha (--mc-secondary) podía
   quedar demasiado clara para el texto blanco. El degradado se conserva en el
   resto de botones del sitio, donde el texto no es tan pequeño. */
.mk-comments-area .mk-btn--primary {
	background: var(--accent);
	color: var(--mc-on-primary, #fff) !important;
	border: 2px solid var(--accent);
	box-shadow: 0 10px 26px -14px rgba(var(--accent-rgb), .9);
}
.mk-comments-area .mk-btn--primary:hover {
	filter: brightness(.92);
	color: var(--mc-on-primary, #fff) !important;
}

/* El secundario deja de ser transparente: sobre el degradado suave del muro,
   un botón "fantasma" con borde tenue se leía mal. Ahora es una superficie
   sólida con el texto principal (≥ 12:1 en ambos modos) y borde marcado. */
.mk-comments-area .mk-btn--secondary {
	background: var(--mc-surface, #fff);
	color: var(--fg) !important;
	border: 2px solid rgba(var(--mc-text-rgb, 20, 21, 26), .22);
}
.mk-comments-area .mk-btn--secondary:hover {
	border-color: var(--accent);
	color: var(--accent) !important;
	background: var(--mc-surface, #fff);
}

/* Si el administrador configura una imagen de fondo para el muro (Ajustes →
   MK Comentarios), encima va un velo oscuro: el texto tiene que ir en claro
   pase lo que pase, también en modo claro. */
.manga-comment-login-wall.has-bg .mk-login-wall__title,
.manga-comment-login-wall.has-bg .mk-login-wall__desc,
.manga-comment-login-wall.has-bg .mk-login-wall__xp { color: #f5f6f8; }
.manga-comment-login-wall.has-bg .mk-login-wall__xp b { color: #fff; }
.manga-comment-login-wall.has-bg .mk-btn--secondary {
	background: rgba(255, 255, 255, .10);
	color: #fff !important;
	border-color: rgba(255, 255, 255, .55);
}
.manga-comment-login-wall.has-bg .mk-btn--secondary:hover {
	background: rgba(255, 255, 255, .2);
	color: #fff !important;
}


/* ════════════════════════════════════════════════════════════════
   BARRA DE REACCIONES DEL MANGA
   ════════════════════════════════════════════════════════════════ */
.mk-reactions-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 20px;
}

.mk-reactions-label {
	font-size: 11px;
	font-weight: 800;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .06em;
	white-space: nowrap;
	margin-right: 2px;
}

.mk-reaction-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--fg);
	font-size: 13px;
	font-family: inherit;
	line-height: 1;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, color .18s ease, transform .1s ease, box-shadow .2s ease;
}
.mk-reaction-btn:hover {
	border-color: rgba(var(--accent-rgb), .5);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -10px rgba(var(--accent-rgb), .9);
}
.mk-reaction-btn:active { transform: translateY(0); }
.mk-reaction-btn.mk-reaction-active {
	background: rgba(var(--accent-rgb), .14);
	border-color: rgba(var(--accent-rgb), .7);
	color: var(--accent);
	font-weight: 800;
}

.mk-reaction-icon { font-size: 16px; line-height: 1; }
.mk-reaction-count { font-size: 12px; font-weight: 800; min-width: 12px; text-align: center; }


/* ════════════════════════════════════════════════════════════════
   FORMULARIO
   ════════════════════════════════════════════════════════════════ */
.mk-comment-form {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px;
	margin-top: 12px;
}

.mk-comments-area .comment-reply-title,
.mk-cform__title {
	font-size: 16px;
	font-weight: 850;
	color: var(--fg);
	margin: 0 0 16px;
	letter-spacing: .01em;
}
.mk-comments-area .comment-reply-title small { display: inline-block; margin-left: 10px; }
.mk-comments-area .comment-reply-title small a {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--mc-danger, #ef4444);
	text-decoration: none;
}

/* ── Cabecera "quién comenta" ────────────────────────────────── */
.mk-cform__me {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	margin-bottom: 14px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}
/* El avatar de la cabecera lo maqueta el sistema .mk-avafr (más abajo), que
   es quien sabe colocar la foto dentro de la ventana del marco. Aquí solo se
   reserva el hueco. */
.mk-cform__me-av { flex: 0 0 auto; display: block; }
.mk-cform__me-info { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mk-cform__me-info > strong { font-size: 14.5px; font-weight: 800; color: var(--fg); }
.mk-cform__me-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* En la cabecera el pill de nivel va en línea, no como bloque bajo el avatar. */
.mk-cform__me-pills .mk-level-pill { display: inline-flex; margin-top: 0; max-width: none; }


/* ════════════════════════════════════════════════════════════════
   SELECTOR DE KAOMOJIS POR EMOCIÓN
   Fila de emociones arriba; tira de caritas deslizable en horizontal.
   ════════════════════════════════════════════════════════════════ */
.mk-kaomoji {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 10px 10px 8px;
	margin-bottom: 12px;
}

/* ── Fila de emociones (también deslizable si no caben) ──────── */
.mk-kaomoji__moods {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding-bottom: 8px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--line);
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--accent-rgb), .5) transparent;
	-webkit-overflow-scrolling: touch;
}

.mk-kaomoji__mood {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--muted);
	font-size: 12.5px;
	font-weight: 750;
	font-family: inherit;
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
	transition: background .16s ease, color .16s ease, border-color .16s ease, transform .1s ease;
}
.mk-kaomoji__mood:hover {
	color: var(--fg);
	border-color: rgba(var(--accent-rgb), .45);
}
.mk-kaomoji__mood.is-active {
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	border-color: transparent;
	color: var(--mc-on-primary, #fff);
	box-shadow: 0 8px 20px -12px rgba(var(--accent-rgb), 1);
}
.mk-kaomoji__mood-ic { font-size: 15px; line-height: 1; }

/* ── Tira de kaomojis ────────────────────────────────────────── */
.mk-kaomoji__strip { position: relative; }
.mk-kaomoji__strip[hidden] { display: none; }

.mk-kaomoji__rail {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 2px 26px 8px 2px;   /* hueco a la derecha para el degradado */
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--accent-rgb), .5) transparent;
	-webkit-overflow-scrolling: touch;
}
.mk-kaomoji__rail::-webkit-scrollbar { height: 6px; }
.mk-kaomoji__rail::-webkit-scrollbar-track { background: transparent; }
.mk-kaomoji__rail::-webkit-scrollbar-thumb {
	background: rgba(var(--accent-rgb), .45);
	border-radius: 999px;
}
.mk-kaomoji__rail:focus-visible { outline: 2px solid rgba(var(--accent-rgb), .6); outline-offset: 2px; border-radius: 8px; }

.mk-kaomoji__btn {
	flex: 0 0 auto;
	scroll-snap-align: start;
	padding: 6px 11px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 9px;
	color: var(--fg);
	font-size: 13.5px;
	font-family: inherit;
	line-height: 1.6;
	white-space: nowrap;
	cursor: pointer;
	transition: background .14s ease, border-color .14s ease, transform .1s ease;
}
.mk-kaomoji__btn:hover {
	background: rgba(var(--accent-rgb), .12);
	border-color: rgba(var(--accent-rgb), .5);
	transform: translateY(-1px);
}
.mk-kaomoji__btn:active { transform: scale(.96); }

/* Degradado que insinúa "hay más caritas a la derecha". */
.mk-kaomoji__fade {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 8px;
	width: 34px;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, var(--surface) 82%);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ── Barra de herramientas (spoiler + contador) ──────────────── */
.mk-cform__tools {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.mk-tool {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--fg);
	font-size: 12.5px;
	font-weight: 750;
	font-family: inherit;
	cursor: pointer;
	transition: background .16s ease, border-color .16s ease;
}
.mk-tool:hover { background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .5); }

.mk-cform__counter {
	margin-left: auto;
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
	white-space: nowrap;
}
.mk-cform__counter.is-near { color: var(--mc-warning, #f59e0b); }
.mk-cform__counter.is-full { color: var(--mc-danger, #ef4444); }

/* ── Textarea ────────────────────────────────────────────────── */
.mk-comment-form .comment-form-comment,
.mk-cform__box { margin: 0; }

.mk-comments-area textarea#comment,
.mk-cform__textarea {
	width: 100%;
	min-height: 128px;
	padding: 14px 16px;
	background: var(--mc-surface, #fff);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--fg);
	font-family: inherit;
	font-size: 14.5px;
	line-height: 1.7;
	resize: vertical;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.mk-comments-area textarea#comment::placeholder { color: var(--muted); opacity: .85; }
.mk-comments-area textarea#comment:focus {
	outline: none;
	border-color: rgba(var(--accent-rgb), .8);
	box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}

.mk-cform__hint {
	margin: 12px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--muted);
}

.mk-comments-area .form-submit { margin: 14px 0 0; }

/* ── Botón de envío ──────────────────────────────────────────── */
.mk-submit-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 26px;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	color: var(--mc-on-primary, #fff) !important;
	border: 0;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 850;
	font-family: inherit;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .2s ease, filter .15s ease;
	box-shadow: 0 12px 26px -14px rgba(var(--accent-rgb), 1);
}
.mk-submit-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.mk-submit-btn:active { transform: translateY(0); }
.mk-submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* Mensajes de estado del envío AJAX */
.mk-cform__msg { margin: 10px 0 0; font-size: 13px; font-weight: 700; }
.mk-cform__msg.is-err { color: var(--mc-danger, #ef4444); }
.mk-cform__msg.is-ok  { color: var(--mc-success, #22c55e); }


/* ════════════════════════════════════════════════════════════════
   CABECERA DE LA LISTA
   ════════════════════════════════════════════════════════════════ */
.mk-comments-header { margin: 28px 0 16px; }

.mk-comments-title {
	font-size: 15px;
	font-weight: 850;
	color: var(--fg);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: .07em;
	padding-left: 12px;
	border-left: 4px solid var(--accent);
}
.mk-comments-count { color: var(--accent); }


/* ════════════════════════════════════════════════════════════════
   LISTA DE COMENTARIOS
   ════════════════════════════════════════════════════════════════ */
.mk-comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
}
.mk-comment-list .children {
	list-style: none;
	padding-left: 24px;
	margin-top: 10px;
	border-left: 2px solid var(--line);
}

.mk-comment-card {
	border-radius: var(--radius);
	margin-bottom: 12px;
	transition: box-shadow .25s ease, border-color .25s ease;
}

.mk-comment-body {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: var(--card);
	border: 1px solid var(--line);
	border-left: 3px solid var(--mk-tier-c, var(--accent));
	border-radius: var(--radius);
	padding: 16px 18px;
}
.mk-comment-card:hover > .mk-comment-body {
	border-color: rgba(var(--accent-rgb), .45);
	border-left-color: var(--mk-tier-c, var(--accent));
	box-shadow: 0 14px 34px -24px rgba(0, 0, 0, .8);
}
/* Las respuestas se distinguen con una superficie ligeramente distinta. */
.mk-comment-card--reply > .mk-comment-body { background: var(--surface); }

.mk-comment-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mk-comment-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px 10px;
}

.mk-comment-author {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	font-weight: 850;
	font-size: 14.5px;
	color: var(--fg);
}

.mk-comment-date {
	font-size: 12px;
	color: var(--muted);
	text-decoration: none !important;
	transition: color .15s;
}
.mk-comment-date:hover { color: var(--accent); }

.mk-comment-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.mk-reply-link a,
.mk-edit-link a {
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
	text-decoration: none !important;
	padding: 4px 10px;
	border: 1px solid var(--line);
	border-radius: 7px;
	transition: border-color .15s, color .15s, background .15s;
}
.mk-reply-link a:hover,
.mk-edit-link a:hover {
	color: var(--accent);
	border-color: rgba(var(--accent-rgb), .55);
	background: rgba(var(--accent-rgb), .08);
}

.mk-comment-pending {
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	color: var(--mc-warning, #f59e0b);
	background: rgba(var(--mc-warning-rgb, 245, 158, 11), .14);
	padding: 3px 9px;
	border-radius: 6px;
}

.mk-comment-content {
	font-size: 14.5px;
	line-height: 1.75;
	color: var(--fg);
	word-wrap: break-word;
	overflow-wrap: anywhere;
}
.mk-comment-content p { margin: 0 0 8px; }
.mk-comment-content p:last-child { margin-bottom: 0; }


/* ── Spoiler ─────────────────────────────────────────────────── */
.mk-spoiler {
	display: inline;
	padding: 1px 6px;
	border-radius: 5px;
	background: var(--mc-surface3, #e7e9ef);
	color: transparent;
	text-shadow: 0 0 9px rgba(var(--mc-text-rgb, 20, 21, 26), .85);
	cursor: pointer;
	user-select: none;
	transition: color .18s ease, text-shadow .18s ease, background .18s ease;
}
.mk-spoiler:hover { background: rgba(var(--accent-rgb), .16); }
.mk-spoiler.is-open {
	color: var(--fg);
	text-shadow: none;
	background: rgba(var(--accent-rgb), .10);
	user-select: text;
	cursor: auto;
}


/* ════════════════════════════════════════════════════════════════
   AVATAR + MARCO DE NIVEL   (.mk-avafr)
   ----------------------------------------------------------------
   CÓMO FUNCIONA
   Los marcos no son aros: son placas verticales (alas, aureolas, plumas…)
   con una VENTANA circular dentro. Antes se metían a la fuerza en la caja
   cuadrada del avatar, así que la ventana quedaba más pequeña que la foto y
   el avatar asomaba por detrás del marco.

   Ahora manda el MARCO:
     · La caja tiene el ancho del contexto (--fr-w) y la proporción REAL del
       PNG (--fr-ar), leída de los metadatos del adjunto. Nada se deforma ni
       se recorta.
     · El avatar se posiciona DENTRO, en el centro de la ventana (--fr-x /
       --fr-y) y con su diámetro (--fr-av). Esos tres valores se calibran por
       rango en Ajustes → MK Comentarios, porque cada marco tiene la ventana
       en un sitio distinto.
     · El marco va por encima (z-index 2) y no intercepta clics.

   La caja del marco OCUPA sitio en el layout (no se sale por encima del
   texto ni de las filas vecinas): la columna del avatar mide siempre
   --mk-frame-w, así que todos los comentarios quedan alineados tengan marco
   o no.
   ════════════════════════════════════════════════════════════════ */
.mk-comment-avatar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	flex-shrink: 0;
	/* Ancho fijo de columna → filas alineadas aunque unos tengan marco y otros no. */
	width: var(--mk-frame-w, 66px);
}

.mk-avafr {
	--fr-w:  var(--mk-frame-w, 66px);  /* ancho de la placa            */
	--fr-ar: 1;                        /* proporción ancho/alto del PNG */
	--fr-av: 46%;                      /* diámetro de la ventana        */
	--fr-x:  50%;                      /* centro de la ventana (X)      */
	--fr-y:  50%;                      /* centro de la ventana (Y)      */

	position: relative;
	display: block;
	width: var(--fr-w);
	aspect-ratio: var(--fr-ar);
	flex: 0 0 auto;
}

.mk-avafr__img {
	position: absolute;
	left: var(--fr-x);
	top: var(--fr-y);
	transform: translate(-50%, -50%);
	width: var(--fr-av);
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	z-index: 1;
	border: 0;
	margin: 0;
}

.mk-avafr__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	z-index: 2;
	pointer-events: none;      /* decorativo: nunca intercepta clics */
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
}

/* Sin marco: el círculo limpio de siempre, centrado en la columna. */
.mk-avafr.is-plain {
	width: var(--fr-plain, 48px);
	aspect-ratio: 1;
	margin: 0 auto;
}
.mk-avafr.is-plain .mk-avafr__img {
	position: static;
	transform: none;
	width: 100%;
	height: 100%;
	border: 2px solid var(--mk-tier-c, var(--line));
}

/* Cabecera del formulario: el mismo sistema, un punto más pequeño. */
.mk-cform__me-av .mk-avafr { --fr-w: 54px; --fr-plain: 44px; }
.mk-cform__me-av .mk-avafr.is-plain .mk-avafr__img { border-width: 2px; }


/* ════════════════════════════════════════════════════════════════
   PILLS DE NIVEL / RANGO / XP
   · Pill de NIVEL  → color del tier (progresión visible de un vistazo).
   · Pill de RANGO  → color configurable en Ajustes → MK Comentarios.
   ════════════════════════════════════════════════════════════════ */
.mk-pill {
	display: inline-flex;
	align-items: center;
	background: var(--mk-badge-color, #a855f7);
	color: #fff;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 850;
	letter-spacing: .5px;
	text-transform: uppercase;
	line-height: 1.5;
	white-space: nowrap;
	user-select: none;
	vertical-align: middle;
}

.mk-level-pill {
	display: block;
	text-align: center;
	background: var(--mk-tier-c, var(--mk-badge-color, #a855f7));
	font-size: 9.5px;
	padding: 2px 6px 3px;
	border-radius: 6px;
	max-width: 58px;
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mk-rank-pill { font-size: 9.5px; padding: 2px 8px 3px; }

.mk-staff-pill {
	background: var(--mc-danger, #ef4444);
	font-size: 9.5px;
	padding: 2px 8px 3px;
}

/* Chip de XP: texto, no bloque de color, para no competir con los pills. */
.mk-xp-chip {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 11.5px;
	font-weight: 800;
	color: var(--accent);
	background: rgba(var(--accent-rgb), .12);
	border: 1px solid rgba(var(--accent-rgb), .25);
	padding: 1px 8px;
	border-radius: 999px;
	white-space: nowrap;
}

/* ── Color por tier (se hereda a la tarjeta entera) ──────────── */
.mk-tier-aprendiz  { --mk-tier-c: #64748b; }
.mk-tier-fanatico  { --mk-tier-c: #10b981; }
.mk-tier-otaku     { --mk-tier-c: #3b82f6; }
.mk-tier-sensei    { --mk-tier-c: #f59e0b; }
.mk-tier-kami      { --mk-tier-c: #ef4444; }
.mk-tier-celestial { --mk-tier-c: #a855f7; }

/* Kami: destello. Celestial: gradiente animado (ignora el color plano). */
.mk-pill.mk-tier-kami { box-shadow: 0 0 9px rgba(239, 68, 68, .55); }
.mk-pill.mk-tier-celestial {
	background: linear-gradient(90deg, #7b2ff7 0%, #f107a3 100%) !important;
	animation: mk-badge-shimmer 3.5s ease-in-out infinite;
}
@keyframes mk-badge-shimmer {
	0%, 100% { box-shadow: 0 0 6px  rgba(123, 47, 247, .35); }
	50%      { box-shadow: 0 0 17px rgba(241, 7, 163, .45); }
}


/* ════════════════════════════════════════════════════════════════
   REACCIONES POR COMENTARIO
   ════════════════════════════════════════════════════════════════ */
.mk-creacts {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 2px;
}

.mk-creact {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--muted);
	font-size: 12px;
	font-family: inherit;
	line-height: 1.5;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, transform .1s ease, opacity .15s ease;
}
.mk-creact__e { font-size: 14px; line-height: 1; filter: grayscale(.35); transition: filter .15s ease; }
.mk-creact__n { font-weight: 800; }
.mk-creact__n:empty { display: none; }

/* Las reacciones sin votos quedan atenuadas hasta que se pasa el ratón:
   así la fila no compite visualmente con el texto del comentario. */
.mk-creact.is-empty { opacity: .55; }
.mk-creact:hover {
	opacity: 1;
	border-color: rgba(var(--accent-rgb), .5);
	transform: translateY(-1px);
}
.mk-creact:hover .mk-creact__e { filter: none; }
.mk-creact.is-on {
	opacity: 1;
	background: rgba(var(--accent-rgb), .14);
	border-color: rgba(var(--accent-rgb), .65);
	color: var(--accent);
}
.mk-creact.is-on .mk-creact__e { filter: none; transform: scale(1.05); }
.mk-creact:disabled { cursor: default; }


/* ════════════════════════════════════════════════════════════════
   PAGINACIÓN Y AVISO DE CERRADO
   ════════════════════════════════════════════════════════════════ */
.mk-comments-area .comment-navigation,
.mk-comments-area .comments-pagination {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 20px 0;
}
.mk-comments-area .comments-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	border: 1px solid var(--line);
	border-radius: 9px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 750;
	text-decoration: none;
	transition: color .15s, border-color .15s, background .15s;
}
.mk-comments-area .comments-pagination .page-numbers:hover,
.mk-comments-area .comments-pagination .page-numbers.current {
	color: var(--accent);
	border-color: rgba(var(--accent-rgb), .55);
	background: rgba(var(--accent-rgb), .08);
}

.mk-comments-closed {
	text-align: center;
	color: var(--muted);
	font-size: 14px;
	padding: 26px;
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	margin: 0;
}


/* ════════════════════════════════════════════════════════════════
   AJUSTES POR MODO
   Solo lo que los tokens no pueden resolver (sombras y velos).
   ════════════════════════════════════════════════════════════════ */

/* MODO CLARO (body.text-ui-dark en la nomenclatura de Madara) */
body.text-ui-dark .mk-comment-body { box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
body.text-ui-dark .mk-comment-card:hover > .mk-comment-body { box-shadow: 0 12px 28px -20px rgba(0, 0, 0, .45); }
body.text-ui-dark .manga-comment-login-wall { box-shadow: 0 10px 30px -26px rgba(0, 0, 0, .6); }
body.text-ui-dark .mk-comment-form { box-shadow: 0 10px 30px -26px rgba(0, 0, 0, .5); }
/* El texto del spoiler se difumina en gris oscuro sobre fondo claro. */
body.text-ui-dark .mk-spoiler { background: #dfe2e8; text-shadow: 0 0 9px rgba(20, 21, 26, .8); }

/* MODO OSCURO (body.text-ui-light) */
body.text-ui-light .mk-spoiler { background: #23232c; text-shadow: 0 0 9px rgba(245, 246, 248, .8); }
body.text-ui-light .mk-avafr.is-plain .mk-avafr__img { border-color: rgba(255, 255, 255, .14); }


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
	.manga-comment-login-wall { padding: 36px 18px 32px; }
	.mk-login-wall__actions { flex-direction: column; width: 100%; }
	.mk-comments-area .mk-btn { justify-content: center; width: 100%; }

	.mk-comment-form { padding: 16px 14px; }
	.mk-comment-body { padding: 14px; gap: 11px; }
	.mk-comment-actions { margin-left: 0; width: 100%; }
	.mk-comment-list .children { padding-left: 12px; }

	.mk-kaomoji { padding: 8px 8px 6px; }
	.mk-kaomoji__mood { font-size: 11.5px; padding: 5px 10px; }
	.mk-kaomoji__mood-tx { display: inline; }
	.mk-kaomoji__btn { font-size: 12.5px; padding: 5px 9px; }

	/* En móvil el marco baja un escalón para no comerse el ancho de la fila. */
	.mk-comment-avatar { width: var(--mk-frame-w-sm, 54px); }
	.mk-avafr { --fr-w: var(--mk-frame-w-sm, 54px); --fr-plain: 42px; }
}

/* Pantallas muy estrechas: en la fila de emociones solo el icono. */
@media (max-width: 420px) {
	.mk-kaomoji__mood-tx { display: none; }
	.mk-kaomoji__mood { padding: 6px 10px; }
	.mk-kaomoji__mood.is-active .mk-kaomoji__mood-tx { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
	.mk-login-wall__icon,
	.mk-pill.mk-tier-celestial { animation: none; }
	.mk-comments-area * { transition-duration: .01ms !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   IMPERIO MANHUA — Capa estética propia del sitio
   ---------------------------------------------------------------------------
   Todo lo que sigue es PINTURA sobre la caja de comentarios base: no cambia
   ninguna función, solo el aspecto. Se mantiene separado y al final del
   archivo a propósito, para que actualizar la caja base no lo pise.

   Cubre cuatro cosas:
     1. Los grupos de kaomojis exclusivos (VIP / Soberano) y su estado bloqueado.
     2. El acento y la marca de agua "帝" del formulario.
     3. El sello imperial que se estampa al publicar (lo dispara el JS).
     4. Las insignias de membresía y las tarjetas VIP / Soberano.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Kaomojis exclusivos ──────────────────────────────────────────────
   El selector de emociones marca sus pestañas de pago con .is-tier--vip /
   .is-tier--soberano; los kaomojis que el usuario no puede usar llevan
   .is-locked (y, en servidor, ni siquiera traen data-kaomoji). */
.mk-kaomoji__mood.is-tier--vip {
	border-color: rgba(255, 206, 0, .38);
	color: #ffce00;
}
.mk-kaomoji__mood.is-tier--vip.is-active {
	background: rgba(255, 206, 0, .14);
	border-color: rgba(255, 206, 0, .6);
}
.mk-kaomoji__mood.is-tier--soberano {
	border-color: rgba(255, 179, 64, .48);
	color: #ffb340;
	background: linear-gradient(135deg, rgba(255, 179, 64, .08), rgba(235, 51, 73, .06));
}
.mk-kaomoji__mood.is-tier--soberano.is-active {
	background: linear-gradient(135deg, rgba(255, 179, 64, .2), rgba(235, 51, 73, .12));
	border-color: rgba(255, 179, 64, .75);
}
.mk-kaomoji__lock {
	font-size: 11px;
	margin-right: 4px;
	vertical-align: 1px;
}

/* Tiras exclusivas: fondo apenas dorado para que se note el cambio de zona. */
.mk-kaomoji__strip--vip .mk-kaomoji__rail,
.mk-kaomoji__strip--soberano .mk-kaomoji__rail {
	background: linear-gradient(180deg, rgba(255, 206, 0, .05), transparent);
	border-radius: 10px;
}
.mk-kaomoji__strip--vip .mk-kaomoji__btn:not(.is-locked) {
	border-color: rgba(255, 206, 0, .3);
}
.mk-kaomoji__strip--vip .mk-kaomoji__btn:not(.is-locked):hover {
	background: rgba(255, 206, 0, .14);
	border-color: rgba(255, 206, 0, .55);
}
.mk-kaomoji__strip--soberano .mk-kaomoji__btn:not(.is-locked) {
	border-color: rgba(255, 179, 64, .4);
	background: linear-gradient(135deg, rgba(255, 179, 64, .07), rgba(235, 51, 73, .05));
}
.mk-kaomoji__strip--soberano .mk-kaomoji__btn:not(.is-locked):hover {
	border-color: rgba(255, 179, 64, .7);
	background: rgba(255, 179, 64, .16);
}

/* Bloqueados: atenuados, pero siguen siendo pulsables (llevan a las membresías). */
.mk-kaomoji__btn.is-locked {
	opacity: .45;
	filter: grayscale(.6);
	cursor: pointer;
}
.mk-kaomoji__btn.is-locked:hover {
	opacity: .78;
	filter: grayscale(.2);
	transform: none;
	background: rgba(var(--mc-text-rgb, 255, 255, 255), .05);
}

/* ── 2. Acento y marca de agua del formulario ──────────────────────────── */
.mk-comment-form {
	position: relative;
	overflow: hidden;
	border-top: 2px solid transparent;
	background-clip: padding-box;
}
.mk-comment-form::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, #eb3349 25%, #ffce00 50%, #eb3349 75%, transparent);
	z-index: 1;
}
/* Caligrafía "帝" (emperador) en la esquina, muy tenue. */
.mk-comment-form::after {
	content: '帝';
	position: absolute;
	right: -6px;
	bottom: -22px;
	font-size: 120px;
	line-height: 1;
	font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'Noto Serif JP', serif;
	color: rgba(235, 51, 73, .07);
	pointer-events: none;
	user-select: none;
	transform: rotate(-8deg);
	z-index: 0;
}
.mk-comment-form > * { position: relative; z-index: 1; }

.mk-comment-form .mk-cform__textarea:focus {
	border-color: rgba(235, 51, 73, .55);
	box-shadow: 0 0 0 3px rgba(235, 51, 73, .12), 0 0 18px rgba(235, 51, 73, .08);
	outline: none;
}

/* ── 3. Sello imperial al publicar (lo inserta comments-toolbar.js) ────── */
.mk-imperial-seal {
	position: absolute;
	top: 10px;
	right: 14px;
	width: 84px;
	height: 84px;
	border: 3px double rgba(235, 51, 73, .9);
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	color: #eb3349;
	background: radial-gradient(circle, rgba(235, 51, 73, .1) 0%, transparent 70%);
	transform: rotate(-14deg) scale(2.6);
	opacity: 0;
	z-index: 5;
	pointer-events: none;
	transition: transform .38s cubic-bezier(.22, 1.4, .36, 1), opacity .3s ease;
	box-shadow: 0 0 0 1px rgba(235, 51, 73, .25), inset 0 0 12px rgba(235, 51, 73, .15);
}
.mk-imperial-seal.is-stamped { transform: rotate(-14deg) scale(1); opacity: 1; }
.mk-imperial-seal.is-fading  { opacity: 0; transition: opacity .9s ease; }
.mk-seal-kanji {
	font-size: 30px;
	line-height: 1;
	font-weight: 700;
	font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'Noto Serif JP', serif;
	text-shadow: 0 0 6px rgba(235, 51, 73, .4);
}
.mk-seal-text {
	font-size: 6.5px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
}
@keyframes mkSealShake {
	0%, 100% { transform: translateY(0); }
	20%      { transform: translateY(2px) rotate(.3deg); }
	45%      { transform: translateY(-1px); }
	70%      { transform: translateY(1px) rotate(-.2deg); }
}
.mk-seal-shake { animation: mkSealShake .45s ease; }

/* Respeta "reducir movimiento": el sello aparece, pero sin sacudida ni escala. */
@media (prefers-reduced-motion: reduce) {
	.mk-imperial-seal { transition: opacity .2s ease; transform: rotate(-14deg) scale(1); }
	.mk-seal-shake    { animation: none; }
}

/* ── 4. Insignias de membresía y tarjetas VIP ──────────────────────────── */
.mk-vip-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 7px;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
	vertical-align: 1px;
	white-space: nowrap;
}
.mk-vip-pill__ic { font-size: 11px; }
.mk-vip-pill--vip {
	color: #ffce00;
	background: rgba(255, 206, 0, .1);
	border: 1px solid rgba(255, 206, 0, .4);
}
.mk-vip-pill--soberano {
	color: #1a1206;
	background: linear-gradient(135deg, #ffce00, #ffb340);
	border: 1px solid #ffce00;
	box-shadow: 0 0 10px rgba(255, 206, 0, .35);
}

/* VIP: borde dorado suave + brillo lateral. */
.mk-comment-card.mk-c-vip > .mk-comment-body {
	border: 1px solid rgba(255, 206, 0, .35);
	border-left: 3px solid #ffce00;
	background:
		linear-gradient(160deg, rgba(255, 206, 0, .05) 0%, transparent 40%),
		var(--mk-bg-card, rgba(255, 255, 255, .02));
	border-radius: var(--mk-radius, 12px);
	box-shadow: 0 2px 14px rgba(255, 206, 0, .07);
}

/* Soberano: marco dorado animado + fondo imperial + sello de fondo. */
.mk-comment-card.mk-c-soberano > .mk-comment-body {
	position: relative;
	border: 1px solid transparent;
	border-radius: var(--mk-radius, 12px);
	background:
		linear-gradient(160deg, rgba(20, 14, 6, .92), rgba(26, 16, 8, .9)) padding-box,
		linear-gradient(120deg, #ffce00, #eb3349 35%, #ffb340 65%, #ffce00) border-box;
	background-size: 100% 100%, 300% 300%;
	animation: mkSoberanoBorder 6s linear infinite;
	box-shadow: 0 3px 22px rgba(255, 179, 64, .14);
	overflow: hidden;
}
@keyframes mkSoberanoBorder {
	0%   { background-position: 0 0, 0% 50%; }
	50%  { background-position: 0 0, 100% 50%; }
	100% { background-position: 0 0, 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
	.mk-comment-card.mk-c-soberano > .mk-comment-body { animation: none; }
}
/* Sello imperial tenue permanente en la esquina de la tarjeta Soberano. */
.mk-comment-card.mk-c-soberano > .mk-comment-body::after {
	content: '帝';
	position: absolute;
	right: 4px;
	bottom: -14px;
	font-size: 72px;
	line-height: 1;
	font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'Noto Serif JP', serif;
	color: rgba(255, 206, 0, .07);
	pointer-events: none;
	user-select: none;
	transform: rotate(-10deg);
}

/* Los hilos de respuesta dentro de tarjetas VIP no heredan el marco. */
.mk-comment-card.mk-c-vip .children .mk-comment-body,
.mk-comment-card.mk-c-soberano .children .mk-comment-body {
	border: none;
	background: none;
	animation: none;
	box-shadow: none;
}
.mk-comment-card.mk-c-soberano .children .mk-comment-body::after { content: none; }

/* Modo CLARO de Madara (recuerda: body.text-ui-dark = modo claro). */
body.text-ui-dark .mk-comment-card.mk-c-vip > .mk-comment-body {
	background: linear-gradient(160deg, rgba(255, 206, 0, .08) 0%, #ffffff 45%);
}
body.text-ui-dark .mk-comment-card.mk-c-soberano > .mk-comment-body {
	background:
		linear-gradient(160deg, #fffdf5, #fff8ea) padding-box,
		linear-gradient(120deg, #eab308, #eb3349 35%, #f59e0b 65%, #eab308) border-box;
}


/* ══════════════════════════════════════════════════════════════════
 * CAJA AISLADA + FRENO DE PUBLICACIÓN
 * (MK_Ad_Zones / MK_Comment_Limits — bloque marcado para que una
 *  actualización de la caja base no lo pise)
 * ══════════════════════════════════════════════════════════════════ */

/* ── El marco que contiene los comentarios en las páginas con pop ──
 *
 * Aquí NO hay nada. Las reglas del marco (`.mk-comments-area--framed`,
 * `.mk-cframe`, `.mk-cframe-host`) estuvieron en este archivo y no llegaban a
 * pintar nunca: cuando la caja va aislada, `madara_child_mk_comment_assets()`
 * no encola esta hoja en el documento padre —que es justamente donde vive el
 * `<iframe>`—, así que el marco salía con el tamaño por defecto del navegador,
 * 300 px de ancho y borde `inset`, dentro de la columna de comentarios.
 *
 * Ahora las imprime `MK_Ad_Zones::assets()` en línea, en el único sitio donde
 * se sabe que hay un marco que vestir. La copia para dentro del shadow root
 * está en `SHADOW_CSS`, en `assets/js/mk-cframe.js`.
 *
 * Lo que sigue debajo sí pertenece aquí: se aplica al CONTENIDO del marco, y
 * esta hoja sí se encola dentro de él (allí `is_frame()` es true). */

/* Documento interior: sin márgenes propios, hereda el fondo del padre. */
.mk-cframe-body { background: transparent !important; }
.mk-cframe-inner { padding: 0; }

/* Resalte del comentario al que apunta el ancla #comment-123, que ahora
   resuelve el propio marco (el padre no puede saltar a un nodo de dentro). */
.mk-c-highlight > .mk-comment-body {
	animation: mk-c-flash 1.8s ease-out 1;
}
@keyframes mk-c-flash {
	0%   { box-shadow: 0 0 0 3px var(--mk-badge-color, var(--mc-accent, #eb3349)); }
	100% { box-shadow: 0 0 0 3px transparent; }
}
@media (prefers-reduced-motion: reduce) {
	.mk-c-highlight > .mk-comment-body { animation: none; outline: 2px solid var(--mc-accent, #eb3349); }
}

/* ── Aviso de cupo bajo el botón de publicar ────────────────────── */
.mk-cform__quota {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.45;
	opacity: .8;
	/* Informativo, no un error: sin rojo ni iconos de alarma. Quien está a
	   punto de escribir no necesita que se le regañe por adelantado. */
	color: var(--mc-text-muted, #8a8a8a);
}

/* El botón durante la cuenta atrás: claramente inactivo, sin parecer roto. */
.mk-submit-btn:disabled {
	opacity: .55;
	cursor: not-allowed;
	filter: grayscale(.35);
}

/* ── Aviso de usuario aislado (MK_Comment_Suspensions) ─────────── */
.mk-cform__banned {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 0 0 22px;
	padding: 16px 18px;
	border-radius: 12px;
	/* Tono de advertencia, no de error: el usuario no ha hecho nada mal AHORA
	   mismo, se le está informando de un estado. Nada de rojo agresivo. */
	background: color-mix(in srgb, var(--mc-danger, #eb3349) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--mc-danger, #eb3349) 35%, transparent);
	color: var(--mc-text, inherit);
}

.mk-cform__banned-icon {
	font-size: 22px;
	line-height: 1.2;
	flex: 0 0 auto;
}

.mk-cform__banned strong {
	display: block;
	margin-bottom: 4px;
	font-size: 15px;
}

.mk-cform__banned p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	opacity: .9;
}

/* Respaldo para navegadores sin color-mix (Safari < 16.2). */
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
	.mk-cform__banned {
		background: rgba(235, 51, 73, .1);
		border-color: rgba(235, 51, 73, .35);
	}
}