/* =========================================================================
   MK Reskin — Piel "Cian / Neón-Glass" sobre la base Utoon
   -------------------------------------------------------------------------
   Este archivo se carga DESPUÉS de mk-utoon.css, por lo que gana por cascada
   sin necesidad de !important (misma especificidad => el último manda).

   Objetivo: dar a ESTE dominio una identidad visual propia (paleta cian-teal
   + lenguaje "glass/neón") sin tocar ninguna función. Solo pinta.

   ┌─────────────────────────────────────────────────────────────────────┐
   │  PARA OTRO DOMINIO: copia este archivo y cambia SOLO el bloque        │
   │  "PALETA POR DOMINIO" de abajo. El resto (forma glass/neón) se        │
   │  adapta solo a los colores que pongas aquí.                          │
   └─────────────────────────────────────────────────────────────────────┘
   ========================================================================= */

/* ======================================================================= */
/*  ▼▼▼  PALETA POR DOMINIO — edita estos valores para diferenciar sitios  */
/* ======================================================================= */
:root {
	/* Acento principal (carmesí) + secundario (rosa) para el degradado.
	   Combina con oro (estrellas) y con superficies plum-charcoal cálidas. */
	--mc-primary:        #e11d48;  --mc-primary-rgb:   225, 29, 72;   --mc-on-primary:   #ffffff;
	--mc-secondary:      #fb7185;  --mc-secondary-rgb: 251, 113, 133; --mc-on-secondary: #2a0a12;
	--mc-accent:         #fb7185;  --mc-accent-rgb:    251, 113, 133; --mc-on-accent:    #2a0a12;
	--mc-link-hover:     #fda4af;  --mc-link-hover-rgb: 253, 164, 175;

	/* Estados. "warning" en ORO (complementa el carmesí); "danger" en un rojo
	   ligeramente distinto del primario para diferenciar errores/hot. */
	--mc-danger:         #ef4444;  --mc-danger-rgb:    239, 68, 68;   --mc-on-danger:    #ffffff;
	--mc-success:        #22c55e;  --mc-success-rgb:   34, 197, 94;   --mc-on-success:   #04140a;
	--mc-warning:        #f5b544;  --mc-warning-rgb:   245, 181, 68;  --mc-on-warning:   #1a1200;

	/* Color base del "resplandor" neón (por defecto = acento primario). */
	--mc-glow: var(--mc-primary-rgb);

	/* Superficies por defecto (plum-charcoal cálido que combina con el carmesí). */
	--mc-bg:         #100a0d;  --mc-bg-rgb:         16, 10, 13;
	--mc-surface:    #1b1013;  --mc-surface-rgb:    27, 16, 19;
	--mc-surface2:   #241619;  --mc-surface2-rgb:   36, 22, 25;
	--mc-surface3:   #2c1c20;  --mc-surface3-rgb:   44, 28, 32;
	--mc-card-bg:    #1b1013;  --mc-card-bg-rgb:    27, 16, 19;
	--mc-header-bg:  #140c0f;  --mc-header-bg-rgb:  20, 12, 15;
	--mc-footer-bg:  #0d0709;  --mc-footer-bg-rgb:  13, 7, 9;
	--mc-text:       #fdeef1;  --mc-text-rgb:       253, 238, 241;
	--mc-text-muted: #c19ba3;  --mc-text-muted-rgb: 193, 155, 163;
	--mc-border:     #3a222a;  --mc-border-rgb:     58, 34, 42;
}

/* MODO OSCURO real de Madara (body.text-ui-light): superficies plum-charcoal.
   Debemos repetir el selector exacto para ganarle al bloque de mk-utoon.css. */
body.text-ui-light {
	--mc-bg:         #100a0d;  --mc-bg-rgb:         16, 10, 13;
	--mc-surface:    #1b1013;  --mc-surface-rgb:    27, 16, 19;
	--mc-surface2:   #241619;  --mc-surface2-rgb:   36, 22, 25;
	--mc-surface3:   #2c1c20;  --mc-surface3-rgb:   44, 28, 32;
	--mc-card-bg:    #1b1013;  --mc-card-bg-rgb:    27, 16, 19;
	--mc-header-bg:  #140c0f;  --mc-header-bg-rgb:  20, 12, 15;
	--mc-footer-bg:  #0d0709;  --mc-footer-bg-rgb:  13, 7, 9;
	--mc-text:       #fdeef1;  --mc-text-rgb:       253, 238, 241;
	--mc-text-muted: #c19ba3;  --mc-text-muted-rgb: 193, 155, 163;
	--mc-border:     #3a222a;  --mc-border-rgb:     58, 34, 42;
}

/* MODO CLARO (body.text-ui-dark): base clara con un leve tinte cálido (rosado)
   para que combine con el carmesí, manteniendo el contraste original. */
body.text-ui-dark {
	--mc-bg:         #f6eef0;  --mc-bg-rgb:         246, 238, 240;
	--mc-surface:    #ffffff;  --mc-surface-rgb:    255, 255, 255;
	--mc-surface2:   #f7edef;  --mc-surface2-rgb:   247, 237, 239;
	--mc-surface3:   #f0e2e5;  --mc-surface3-rgb:   240, 226, 229;
	--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:  #f7edef;  --mc-footer-bg-rgb:  247, 237, 239;
	--mc-text:       #1c0f13;  --mc-text-rgb:       28, 15, 19;
	--mc-text-muted: #6e565d;  --mc-text-muted-rgb: 110, 86, 93;
	--mc-border:     #e6d4d9;  --mc-border-rgb:     230, 212, 217;
}

/* ======================================================================= */
/*  ▲▲▲  Fin de la paleta. Debajo, el "lenguaje de forma" glass/neón.      */
/* ======================================================================= */


/* -----------------------------------------------------------------------
   1. Cabecera "pastilla": anillo de acento + resplandor sutil.
   ----------------------------------------------------------------------- */
.mk-site-header .c-header__top {
	border-color: rgba(var(--mc-glow), .28);
	box-shadow:
		0 16px 44px -20px rgba(0, 0, 0, .7),
		0 0 0 1px rgba(var(--mc-glow), .08),
		0 0 26px -6px rgba(var(--mc-glow), .28);
}
body.text-ui-light .mk-site-header .c-header__top {
	border-color: rgba(var(--mc-glow), .30);
}

/* Iconos de cabecera (lupa, campana): halo cian al pasar el ratón. */
.mk-search-trigger:hover,
.mk-bell__btn:hover {
	background: rgba(var(--mc-glow), .14);
	color: var(--mc-primary);
	box-shadow: 0 0 18px -4px rgba(var(--mc-glow), .6);
}

/* Enlaces de navegación: subrayado-glow en hover. */
.mk-nav__link:hover {
	background: rgba(var(--mc-glow), .14);
	box-shadow: inset 0 -2px 0 var(--mc-primary), 0 0 16px -6px rgba(var(--mc-glow), .5);
}

/* Avatar / círculo de acceso: aro de neón. */
.mk-login-circle,
.mk-user .c-user_avatar-image {
	box-shadow:
		0 6px 18px -6px rgba(var(--mc-glow), .85),
		0 0 0 2px rgba(var(--mc-glow), .55);
}
.mk-login-circle:hover,
.mk-user .c-user_avatar:hover .c-user_avatar-image {
	box-shadow:
		0 8px 24px -6px rgba(var(--mc-glow), .95),
		0 0 0 2px rgba(var(--mc-glow), .8);
}

/* -----------------------------------------------------------------------
   2. Botones de acento: degradado + resplandor neón en hover.
   ----------------------------------------------------------------------- */
.modal .btn-primary,
.modal .submit input[type="submit"],
.modal-content .mk-btn--primary,
.mk-acc-btn--primary,
.mk-locked__cta,
.mk-btn.primary,
.mk-report-send {
	background: linear-gradient(135deg, var(--mc-primary), var(--mc-secondary));
	border: none;
	color: var(--mc-on-primary);
	box-shadow: 0 8px 22px -10px rgba(var(--mc-glow), .8);
}
.modal .btn-primary:hover,
.modal .submit input[type="submit"]:hover,
.modal-content .mk-btn--primary:hover,
.mk-acc-btn--primary:hover,
.mk-locked__cta:hover,
.mk-btn.primary:hover,
.mk-report-send:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
	box-shadow:
		0 10px 30px -8px rgba(var(--mc-glow), .95),
		0 0 22px -4px rgba(var(--mc-glow), .6);
}

/* -----------------------------------------------------------------------
   3. Tarjetas del catálogo (.acard): borde cian + elevación glow en hover.
   ----------------------------------------------------------------------- */
.acard {
	border-radius: 16px;
	border: 1px solid rgba(var(--mc-border-rgb), .8);
	transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
.acard:hover {
	transform: translateY(-4px);
	border-color: rgba(var(--mc-glow), .7);
	box-shadow:
		0 18px 40px -16px rgba(0, 0, 0, .6),
		0 0 26px -6px rgba(var(--mc-glow), .5);
}
.acard .ac-img { border-radius: 14px; overflow: hidden; }
/* Insignia de rating con el color de acento. */
.acard .ac-rate {
	background: rgba(var(--mc-glow), .9);
	color: var(--mc-on-primary);
	box-shadow: 0 0 14px -3px rgba(var(--mc-glow), .8);
}

/* -----------------------------------------------------------------------
   4. Chips de género (archivo): pastilla con borde brillante.
   ----------------------------------------------------------------------- */
.mk-archive .chip {
	border: 1px solid rgba(var(--mc-border-rgb), .8);
	border-radius: 999px;
	transition: color .15s ease, border-color .15s ease, box-shadow .18s ease, background .15s ease;
}
.mk-archive .chip:hover {
	color: var(--mc-primary);
	border-color: rgba(var(--mc-glow), .7);
	box-shadow: 0 0 16px -5px rgba(var(--mc-glow), .6);
}
.mk-archive .chip.on {
	background: linear-gradient(135deg, var(--mc-primary), var(--mc-secondary));
	border-color: transparent;
	color: var(--mc-on-primary);
	box-shadow: 0 0 20px -5px rgba(var(--mc-glow), .75);
}
/* Segmentos de "Sort/Status" activos con glow. */
.mk-archive .seg a.on {
	background: rgba(var(--mc-glow), .16);
	color: var(--mc-primary);
	box-shadow: inset 0 0 0 1px rgba(var(--mc-glow), .5);
}

/* -----------------------------------------------------------------------
   5. Tarjetas de cuenta / sinopsis / comentarios: superficie glass fría.
   ----------------------------------------------------------------------- */
.mk-acc-card,
.syn,
.mk-comment-card {
	border: 1px solid rgba(var(--mc-border-rgb), .7);
	border-radius: 16px;
	background: rgba(var(--mc-surface-rgb), .55);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	backdrop-filter: blur(14px) saturate(150%);
}
.mk-acc-card:hover {
	border-color: rgba(var(--mc-glow), .35);
}
/* Barras de acento (títulos de sección, hero, capítulos) heredan el cian
   automáticamente porque usan var(--mc-primary). Reforzamos con glow fino. */
.mk-chapters .stitle { box-shadow: -1px 0 12px -6px rgba(var(--mc-glow), .8); }

/* Capítulo "en lectura" y hover con acento cian. */
.crow:hover {
	border-color: rgba(var(--mc-glow), .55) !important;
	box-shadow: 0 0 16px -8px rgba(var(--mc-glow), .6);
}

/* -----------------------------------------------------------------------
   6. Barra de progreso del lector y scrollbar: cian brillante.
   ----------------------------------------------------------------------- */
#progress {
	background: linear-gradient(90deg, var(--mc-primary), var(--mc-secondary));
	box-shadow: 0 0 12px 0 rgba(var(--mc-glow), .8);
}

/* -----------------------------------------------------------------------
   7. Foco accesible unificado con el acento (teclado).
   ----------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--mc-primary);
	outline-offset: 2px;
}

/* Respeta a quienes reducen transparencias: sin blur, superficie sólida. */
@media (prefers-reduced-transparency: reduce) {
	.mk-acc-card,
	.syn,
	.mk-comment-card {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: var(--mc-surface);
	}
}

/* =========================================================================
   8. REESTRUCTURA VISUAL — cambia la FORMA, no solo el color.
   -------------------------------------------------------------------------
   Marco de "póster enmarcado" en las portadas, listados con firma propia y
   widgets tipo "ficha" con cabecera de acento. Todo con los tokens --mc-*,
   así que se adapta a la paleta del dominio.
   ========================================================================= */

/* ── 8.1 Portadas enmarcadas (rejilla del archivo/búsqueda: .acard) ─────── */
.acard .ac-img {
	position: relative;
	border-radius: 12px;
	/* pequeño passe-partout: la portada respira dentro de un marco. */
	background:
		linear-gradient(135deg, rgba(var(--mc-glow), .10), rgba(var(--mc-surface2-rgb), .4));
	padding: 5px;
}
.acard .ac-img > img,
.acard .ac-img .ac-cover {
	border-radius: 8px;
	display: block;
	width: 100%;
	transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
/* Marco interior (hairline) por encima de la portada. */
.acard .ac-img::after {
	content: '';
	position: absolute;
	inset: 5px;
	border: 1.5px solid rgba(var(--mc-text-rgb), .22);
	border-radius: 8px;
	pointer-events: none;
	z-index: 3;
	transition: border-color .25s ease, box-shadow .25s ease;
}
/* Esquinas de acento (estilo "visor"): dos líneas en L arriba-izq / abajo-der. */
.acard .ac-img::before {
	content: '';
	position: absolute;
	inset: 5px;
	z-index: 4;
	pointer-events: none;
	background:
		linear-gradient(var(--mc-primary), var(--mc-primary)) left 0 top 0 / 14px 2px no-repeat,
		linear-gradient(var(--mc-primary), var(--mc-primary)) left 0 top 0 / 2px 14px no-repeat,
		linear-gradient(var(--mc-primary), var(--mc-primary)) right 0 bottom 0 / 14px 2px no-repeat,
		linear-gradient(var(--mc-primary), var(--mc-primary)) right 0 bottom 0 / 2px 14px no-repeat;
	opacity: .0;
	transition: opacity .25s ease;
}
.acard:hover .ac-img > img { transform: scale(1.05); }
.acard:hover .ac-img::after { border-color: rgba(var(--mc-glow), .75); box-shadow: 0 0 20px -4px rgba(var(--mc-glow), .55) inset; }
.acard:hover .ac-img::before { opacity: 1; }

/* Título del proyecto: tab de acento a la izquierda + tipografía marcada. */
.acard .ac-t {
	position: relative;
	padding-left: 12px;
	margin-top: 10px;
	font-weight: 750;
	letter-spacing: .01em;
}
.acard .ac-t::before {
	content: '';
	position: absolute;
	left: 0;
	top: 3px;
	bottom: 3px;
	width: 3px;
	border-radius: 3px;
	background: linear-gradient(var(--mc-primary), var(--mc-secondary));
}

/* Insignias como "sellos" (rating y estado). */
.acard .ac-status,
.acard .ac-rate {
	border-radius: 7px;
	font-weight: 800;
	letter-spacing: .02em;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.acard .ac-ch {
	border-radius: 7px;
	font-weight: 700;
}

/* ── 8.2 Portadas del RESTO del sitio (home, sliders, relacionados) ────────
   Madara envuelve casi todas las miniaturas en .c-image-hover: le damos el
   mismo marco para una identidad coherente en listados y carruseles. */
.c-image-hover {
	position: relative;
	padding: 5px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(var(--mc-glow), .12), rgba(var(--mc-surface2-rgb), .45));
}
.c-image-hover > img,
.c-image-hover a > img { border-radius: 9px; }
.c-image-hover::after {
	content: '';
	position: absolute;
	inset: 5px;
	border: 1.5px solid rgba(var(--mc-text-rgb), .20);
	border-radius: 9px;
	pointer-events: none;
	z-index: 3;
	transition: border-color .25s ease, box-shadow .25s ease;
}
.c-image-hover:hover::after {
	border-color: rgba(var(--mc-glow), .7);
	box-shadow: 0 0 18px -5px rgba(var(--mc-glow), .5) inset;
}
/* El badge (hot/new) sobre la portada, elevado por encima del marco. */
.c-image-hover .manga-title-badges { z-index: 5; }

/* Títulos de los listados nativos con tab de acento (coherente con .acard). */
.page-listing-item .post-title h3,
.page-item-detail .post-title h3,
.slider__content_item h4 {
	padding-left: 11px;
	position: relative;
}
.page-listing-item .post-title h3::before,
.page-item-detail .post-title h3::before,
.slider__content_item h4::before {
	content: '';
	position: absolute;
	left: 0;
	top: .15em;
	bottom: .15em;
	width: 3px;
	border-radius: 3px;
	background: linear-gradient(var(--mc-primary), var(--mc-secondary));
}

/* ── 8.3 Widgets tipo "ficha" con cabecera de acento ─────────────────────
   El tema pinta los widgets del sidebar como tarjeta (style.css). Aquí les
   damos una FORMA distinta: barra superior de acento, borde definido y la
   cabecera como pestaña con línea inferior de marca. */
#main-sidebar .widget {
	position: relative;
	border: 1px solid rgba(var(--mc-border-rgb), .8) !important;
	border-radius: 14px !important;
	overflow: hidden;
	padding-top: 22px !important;
}
/* Cinta superior de acento (la "firma" del widget enmarcado). */
#main-sidebar .widget::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--mc-primary), var(--mc-secondary));
}
/* Cabecera del widget como pestaña con subrayado de marca. */
#main-sidebar .widget .widget-heading,
#main-sidebar .widget .related-heading {
	position: relative;
	margin-bottom: 16px;
	padding-bottom: 10px;
}
#main-sidebar .widget .widget-heading h5,
#main-sidebar .widget .related-heading h5 {
	position: relative;
	display: inline-block;
	padding-left: 12px;
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
}
#main-sidebar .widget .widget-heading h5::before,
#main-sidebar .widget .related-heading h5::before {
	content: '';
	position: absolute;
	left: 0; top: 2px; bottom: 2px;
	width: 4px;
	border-radius: 3px;
	background: linear-gradient(var(--mc-primary), var(--mc-secondary));
}
#main-sidebar .widget .widget-heading::after,
#main-sidebar .widget .related-heading::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 46px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--mc-primary), transparent);
}

/* Ítems rankeados dentro de widgets (populares): número con estilo de "medalla". */
#main-sidebar .widget .item-thumb.c-image-hover { border-radius: 12px; }
#main-sidebar .popular-item-wrap .item-number,
#main-sidebar .widget .item-number {
	background: linear-gradient(135deg, var(--mc-primary), var(--mc-secondary));
	color: var(--mc-on-primary);
	border-radius: 8px;
	font-weight: 900;
	box-shadow: 0 4px 12px -4px rgba(var(--mc-glow), .8);
}

/* ── 8.4 Rejilla del archivo: un pelín más de aire para lucir el marco ──── */
.mk-archive .agrid { gap: 20px 16px; }

/* Sin marco cuando el usuario reduce transparencias/datos: mantenemos borde. */
@media (prefers-reduced-transparency: reduce) {
	.acard .ac-img, .c-image-hover { background: var(--mc-surface2); }
}

/* ── 8.5 PORTADAS DE LA HOME (plantilla Utoon) y del SINGLE ───────────────
   La home usa clases propias (.g-img/.rc-img/.fc-img/.hp-img) y el single la
   portada .hposter__card. Como tienen overflow:hidden, el marco se forma con
   un ANILLO exterior (box-shadow, no se recorta) + un hairline interior. Este
   es el cambio de FORMA visible que diferencia el sitio. */
.mk-home .g-img,
.mk-home .rc-img,
.mk-home .fc-img,
.mk-home .hp-img,
.hposter .hposter__card {
	position: relative;
	/* Passe-partout de dos tonos + sombra: aspecto de "póster enmarcado". */
	box-shadow:
		0 0 0 3px rgba(var(--mc-surface2-rgb, 36, 22, 25), .9),
		0 0 0 4px rgba(var(--mc-border-rgb, 58, 34, 42), .95),
		0 12px 26px -14px rgba(0, 0, 0, .7);
	transition: box-shadow .25s ease;
}
/* Hairline interior (marco fino sobre la portada). */
.mk-home .g-img::after,
.mk-home .rc-img::after,
.mk-home .fc-img::after,
.mk-home .hp-img::after,
.hposter .hposter__card::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 1.5px solid rgba(var(--mc-text-rgb, 255, 255, 255), .16);
	border-radius: inherit;
	pointer-events: none;
	z-index: 4;
	transition: border-color .25s ease;
}
/* Esquinas "de visor" (aparecen en hover). */
.mk-home .g-img::before,
.mk-home .rc-img::before,
.mk-home .fc-img::before,
.mk-home .hp-img::before {
	content: '';
	position: absolute;
	inset: 6px;
	z-index: 5;
	pointer-events: none;
	opacity: 0;
	transition: opacity .25s ease;
	background:
		linear-gradient(var(--mc-primary), var(--mc-primary)) left 0 top 0 / 14px 2px no-repeat,
		linear-gradient(var(--mc-primary), var(--mc-primary)) left 0 top 0 / 2px 14px no-repeat,
		linear-gradient(var(--mc-primary), var(--mc-primary)) right 0 bottom 0 / 14px 2px no-repeat,
		linear-gradient(var(--mc-primary), var(--mc-primary)) right 0 bottom 0 / 2px 14px no-repeat;
}
/* Estado hover: el marco se vuelve del color de acento y brilla. */
.mk-home .gcard:hover .g-img,
.mk-home .rcard:hover .rc-img,
.mk-home .fcard:hover .fc-img,
.mk-home .hposter:hover .hp-img,
.hposter:hover .hposter__card {
	box-shadow:
		0 0 0 3px rgba(var(--mc-surface2-rgb, 36, 22, 25), .9),
		0 0 0 4px rgba(var(--mc-glow, 225, 29, 72), .85),
		0 16px 34px -14px rgba(var(--mc-glow, 225, 29, 72), .5);
}
.mk-home .gcard:hover .g-img::after,
.mk-home .rcard:hover .rc-img::after,
.mk-home .fcard:hover .fc-img::after,
.mk-home .hposter:hover .hp-img::after { border-color: rgba(var(--mc-glow, 225, 29, 72), .6); }
.mk-home .gcard:hover .g-img::before,
.mk-home .rcard:hover .rc-img::before,
.mk-home .fcard:hover .fc-img::before,
.mk-home .hposter:hover .hp-img::before { opacity: 1; }

/* En vista LISTA de "Latest", el marco es más discreto (miniatura pequeña). */
.mk-home #latestWrap.list .g-img {
	box-shadow:
		0 0 0 2px rgba(var(--mc-surface2-rgb, 36, 22, 25), .9),
		0 0 0 3px rgba(var(--mc-border-rgb, 58, 34, 42), .95);
}

/* Títulos de las tarjetas de la home con tab de acento (coherencia). */
.mk-home .g-t,
.mk-home .fc-t,
.mk-home .rcard .rt {
	position: relative;
	padding-left: 10px;
}
.mk-home .g-t::before,
.mk-home .fc-t::before,
.mk-home .rcard .rt::before {
	content: '';
	position: absolute;
	left: 0; top: .18em; bottom: .18em;
	width: 3px;
	border-radius: 3px;
	background: linear-gradient(var(--mc-primary), var(--mc-secondary));
}

/* Un poco más de aire en la rejilla "Latest" para lucir el marco. */
.mk-home #latestWrap.grid { gap: 22px 16px; }

/* =========================================================================
   9. CONTRASTE / LEGIBILIDAD — texto nítido en modo claro y oscuro.
   ========================================================================= */

/* Botones con degradado: el extremo claro del gradiente "lavaba" el texto
   blanco (p. ej. el botón "Continuar" sobre el rosa). Una sombra sutil lo
   mantiene legible en cualquier tono. */
.btn.primary,
.hact .btn.primary,
.mk-btn.primary,
.mk-cf-fab,
.mk-cf-inline-btn,
.mk-report-send,
.modal .btn-primary,
.modal .submit input[type="submit"],
.mk-acc-btn--primary,
.mk-locked__cta {
	text-shadow: 0 1px 2px rgba(0, 0, 0, .32);
}

/* Chips de género/tag: más presencia y texto a plena intensidad (se veían
   demasiado tenues). */
.hchips .chip {
	background: rgba(var(--mc-text-rgb, 255, 255, 255), .13);
	border-color: rgba(var(--mc-text-rgb, 255, 255, 255), .24);
	color: var(--mc-text, #fff);
	font-weight: 700;
}
.hchips .chip:hover {
	background: rgba(var(--mc-glow, 225, 29, 72), .22);
	border-color: rgba(var(--mc-glow, 225, 29, 72), .6);
	color: var(--mc-text, #fff);
}
.hchips--tags { margin-top: -8px; }
.chip--tag { font-size: 11.5px; padding: 4px 10px; }

/* Etiqueta de sección "Genres" / "Tags" delante de los chips. */
.hchips-label {
	align-self: center;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--mc-text-muted, #9a9a9a);
	margin-right: 4px;
}

/* Listado de capítulos: número y fecha con más contraste (menos "gris"). */
.mk-chapters .crow .cnum { color: var(--mc-text, #fff); opacity: .92; }
.mk-chapters .crow .ctitle { color: var(--mc-text, #fff); }
.mk-chapters .crow .cmeta { opacity: .95; }
.mk-chapters .firstlast .btn { color: var(--mc-text, #fff); }

/* Modo claro: pestañas y textos apagados con contraste suficiente. */
body.text-ui-dark .single-wp-manga #manga-content-navs .nav-link { color: var(--mc-text, #14151a); }
body.text-ui-dark .hchips .chip {
	background: rgba(var(--mc-text-rgb, 20, 15, 19), .06);
	border-color: rgba(var(--mc-text-rgb, 20, 15, 19), .18);
	color: var(--mc-text, #14151a);
}