/**
 * MK Gender — Piel condicional por tipo de cuenta.
 *
 * CÓMO ESTÁ ORGANIZADO
 *
 * Todo cuelga de `body.mk-g-fem` o `body.mk-g-masc`, clases que MK_Gender solo
 * añade a usuarios con sesión y con tipo de cuenta declarado. Sin esas clases
 * este archivo es INERTE: un visitante anónimo o un lector "sin preferencia" ve
 * exactamente el sitio de siempre. Por eso se puede encolar globalmente sin
 * crear variantes en la caché de página.
 *
 * NO se redefine ningún color del tema a pelo: se sobrescriben los tokens
 * --mc-* dentro del ámbito de la clase, que es como el resto del hijo pinta
 * (ver §7 del contexto). Así seguimos respetando MK_Skin: si mañana se cambia
 * la paleta desde Apariencia → Theme colors (MK), estas pieles se recolorean
 * solas porque derivan de los mismos tokens.
 *
 * IMPORTANTE (§0.2 del contexto): Madara tiene las clases de modo INVERTIDAS.
 *   body.text-ui-light = modo OSCURO
 *   body.text-ui-dark  = modo CLARO
 * Las reglas específicas de modo de este archivo respetan esa inversión.
 *
 * @package Madara-Child-MK
 */

/* ══════════════════════════════════════════════════════════════════
   1. TOKENS POR GÉNERO
   ══════════════════════════════════════════════════════════════════ */

/* ── Shoujo (femenino): rosa/lila, bordes finos, curvas amplias ───── */
body.mk-g-fem {
	--mkg-accent:      #e8709f;
	--mkg-accent-soft: #f3a8c6;
	--mkg-accent-deep: #b8447a;
	--mkg-ink:         #7a2b52;
	--mkg-glow:        rgba(232, 112, 159, .38);
	--mkg-veil:        rgba(232, 112, 159, .10);

	/* Geometría: todo más redondeado y con el borde más fino. */
	--mkg-radius:      18px;
	--mkg-radius-lg:   26px;
	--mkg-border:      1px;
	--mkg-border-style: solid;
}

/* ── Shounen (masculino): ámbar/rojo, ángulos marcados, borde grueso ─ */
body.mk-g-masc {
	--mkg-accent:      #ef7d3a;
	--mkg-accent-soft: #f5a86e;
	--mkg-accent-deep: #b84a15;
	--mkg-ink:         #7a3a10;
	--mkg-glow:        rgba(239, 125, 58, .38);
	--mkg-veil:        rgba(239, 125, 58, .10);

	--mkg-radius:      6px;
	--mkg-radius-lg:   10px;
	--mkg-border:      2px;
	--mkg-border-style: solid;
}

/* En modo oscuro (¡text-ui-light!) el tono de tinta tiene que aclararse o los
   textos sobre superficie oscura caen por debajo de AA. */
body.mk-g-fem.text-ui-light  { --mkg-ink: #ffc4dd; }
body.mk-g-masc.text-ui-light { --mkg-ink: #ffcfa6; }

/* ══════════════════════════════════════════════════════════════════
   2. PORTADAS (covers) — clases dinámicas de mk_gender_cover_class()
   ══════════════════════════════════════════════════════════════════

   Contenedores donde se pintan:
     .mk-cov--grid    → retícula "Latest updates" (.g-img)
     .mk-cov--rank    → carrusel "Popular today"  (.rc-img)
     .mk-cov--fresh   → carrusel "New Series"     (.fc-img)
     .mk-cov--hero    → póster del hero           (.hp-img)
     .mk-cov--archive → tarjetas del archivo      (.ac-img)

   Cada uno lleva ADEMÁS una clase con la sección y el género juntos
   (.mk-cov--grid-fem, .mk-cov--rank-masc…) para poder maquetar una sección
   concreta sin arrastrar a las demás.
   ------------------------------------------------------------------ */

.mk-cov {
	position: relative;
	border-radius: var(--mkg-radius, 12px);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}

.mk-cov img {
	border-radius: inherit;
}

/* ── Shoujo: marco doble con filete interior, como una lámina ─────── */
.mk-cov--fem {
	border: var(--mkg-border) var(--mkg-border-style) var(--mkg-accent-soft);
	box-shadow: 0 4px 18px var(--mkg-glow);
}

/* El filete interior va en un ::after para no consumir el ::before, que en
   varias tarjetas del tema ya está ocupado por el degradado de la imagen. */
.mk-cov--fem::after {
	content: "";
	position: absolute;
	inset: 4px;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: calc(var(--mkg-radius) - 5px);
	pointer-events: none;
	z-index: 2;
}

/* Esquinas adornadas: dos escuadras finas arriba y abajo. Puramente
   decorativas y sin eventos, así que no estorban al enlace de la tarjeta. */
.mk-cov--fem::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: 2;
	background:
		linear-gradient(var(--mkg-accent), var(--mkg-accent)) left  8px  top    8px / 14px 1px no-repeat,
		linear-gradient(var(--mkg-accent), var(--mkg-accent)) left  8px  top    8px / 1px 14px no-repeat,
		linear-gradient(var(--mkg-accent), var(--mkg-accent)) right 8px  bottom 8px / 14px 1px no-repeat,
		linear-gradient(var(--mkg-accent), var(--mkg-accent)) right 8px  bottom 8px / 1px 14px no-repeat;
	opacity: .85;
}

.mk-cov--fem:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px var(--mkg-glow);
}

/* ── Shounen: borde grueso, esquina cortada, sin adornos ──────────── */
.mk-cov--masc {
	border: var(--mkg-border) var(--mkg-border-style) var(--mkg-accent-deep);
	box-shadow: 0 3px 0 0 var(--mkg-accent-deep);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

.mk-cov--masc:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 0 0 var(--mkg-accent-deep), 0 10px 22px var(--mkg-glow);
}

/* Ajustes por sección: el póster del hero y las fichas del ranking son mucho
   más grandes, así que el adorno tiene que crecer con ellas o se pierde. */
.mk-cov--hero-fem::after  { inset: 7px; border-radius: calc(var(--mkg-radius-lg) - 8px); }
.mk-cov--hero-fem         { border-radius: var(--mkg-radius-lg); border-width: 2px; }
.mk-cov--hero-masc        { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%); }

/* En la retícula hay decenas de tarjetas a la vez: el adorno se aligera para
   que la página no parezca un mantel. */
.mk-cov--grid-fem::before { opacity: .55; }
.mk-cov--grid-fem::after  { inset: 3px; border-width: 1px; }

/* ══════════════════════════════════════════════════════════════════
   3. SUPERFICIES DE LA INTERFAZ
   ══════════════════════════════════════════════════════════════════ */

/* Títulos de sección: la barrita vertical toma el acento del género. */
body.mk-gendered .stitle h2 .bar,
body.mk-gendered .fresh-head .fh-ic {
	background: linear-gradient(180deg, var(--mkg-accent), var(--mkg-accent-deep));
}

body.mk-g-fem .stitle h2 .bar {
	border-radius: 999px;
}

body.mk-g-masc .stitle h2 .bar {
	border-radius: 0;
}

/* Tarjetas de cuenta y de comentarios */
body.mk-g-fem .mk-acc-card,
body.mk-g-fem .comment-body {
	border-radius: var(--mkg-radius-lg);
	border: 1px solid var(--mkg-accent-soft);
	box-shadow: 0 2px 14px var(--mkg-veil);
}

body.mk-g-masc .mk-acc-card,
body.mk-g-masc .comment-body {
	border-radius: var(--mkg-radius);
	border-left: 3px solid var(--mkg-accent);
}

/* Botones primarios: se recolorean, no se rediseñan. */
body.mk-gendered .mk-acc-btn--primary,
body.mk-gendered .btn.primary {
	background: linear-gradient(135deg, var(--mkg-accent), var(--mkg-accent-deep));
	border-color: var(--mkg-accent-deep);
}

body.mk-g-fem .mk-acc-btn--primary,
body.mk-g-fem .btn.primary {
	border-radius: 999px;
}

/* Pills de rango: el nombre cambia por género, el color también. */
body.mk-gendered .mk-rank-pill {
	background: var(--mkg-accent);
	border-color: var(--mkg-accent-deep);
}

body.mk-g-fem .mk-rank-pill {
	border-radius: 999px;
	letter-spacing: .06em;
}

body.mk-g-masc .mk-rank-pill {
	border-radius: 3px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Barra de progreso de nivel */
body.mk-gendered .mk-xp-bar__fill {
	background: linear-gradient(90deg, var(--mkg-accent-soft), var(--mkg-accent));
}

/* ══════════════════════════════════════════════════════════════════
   4. SELECTOR DE TIPO DE CUENTA (registro y perfil)
   ══════════════════════════════════════════════════════════════════ */

.mk-gsel {
	margin: 14px 0;
}

.mk-gsel__lbl {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 8px;
	color: var(--mc-text, inherit);
}

.mk-gsel__opts {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.mk-gsel__opts--cards {
	flex-direction: column;
	gap: 10px;
}

.mk-gsel__opt {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 120px;
	padding: 10px 12px;
	border: 1px solid var(--mc-border, rgba(128, 128, 128, .35));
	border-radius: 12px;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease;
	background: var(--mc-surface-2, transparent);
}

.mk-gsel__opts--cards .mk-gsel__opt {
	flex: 1 1 auto;
	align-items: flex-start;
	padding: 14px 16px;
}

/* El radio real se mantiene en el DOM y enfocable: quitarlo con display:none
   dejaría el grupo sin navegación por teclado. Se saca de la vista sin sacarlo
   del árbol de accesibilidad. */
.mk-gsel__opt input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.mk-gsel__opt:hover {
	border-color: var(--mc-primary, #888);
}

.mk-gsel__opt:focus-within {
	outline: 2px solid var(--mc-primary, #888);
	outline-offset: 2px;
}

.mk-gsel__opt.is-on,
.mk-gsel__opt:has(input:checked) {
	border-color: var(--mc-primary, #888);
	background: var(--mc-primary-soft, rgba(128, 128, 128, .10));
}

.mk-gsel__ic {
	font-size: 20px;
	line-height: 1;
	flex: 0 0 auto;
}

.mk-gsel__tx {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
}

.mk-gsel__tx i {
	font-style: normal;
	opacity: .72;
	font-size: 12px;
}

.mk-gsel__prev {
	font-style: normal;
	font-size: 12px;
	opacity: .9;
	margin-top: 4px;
}

.mk-gsel__hint {
	margin: 8px 0 0;
	font-size: 12px;
	opacity: .7;
}

/* Tinte de cada opción para que se lean de un vistazo */
.mk-gsel__opt--fem  .mk-gsel__ic { color: #e8709f; }
.mk-gsel__opt--masc .mk-gsel__ic { color: #ef7d3a; }

.mk-gsel__opt--fem:has(input:checked)  { border-color: #e8709f; background: rgba(232, 112, 159, .10); }
.mk-gsel__opt--masc:has(input:checked) { border-color: #ef7d3a; background: rgba(239, 125, 58, .10); }

/* Respaldo para navegadores sin :has() — la clase la pone mk-gender.js. */
.mk-gsel__opt--fem.is-on  { border-color: #e8709f; background: rgba(232, 112, 159, .10); }
.mk-gsel__opt--masc.is-on { border-color: #ef7d3a; background: rgba(239, 125, 58, .10); }

/* ══════════════════════════════════════════════════════════════════
   5. ACCESIBILIDAD
   ══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.mk-cov,
	.mk-cov--fem,
	.mk-cov--masc {
		transition: none;
	}
	.mk-cov--fem:hover,
	.mk-cov--masc:hover {
		transform: none;
	}
}

/* Los adornos son decoración pura: en alto contraste estorban más que ayudan. */
@media (forced-colors: active) {
	.mk-cov--fem::before,
	.mk-cov--fem::after {
		display: none;
	}
	.mk-cov--masc {
		clip-path: none;
	}
}