/* ═══════════════════════════════════════════════════════════════
   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; }
}