/* =====================================================================
   megafire — comentarios (fichas, blog y paginas). Plantilla: comments.php
   ---------------------------------------------------------------------
   Namespace propio .mfc: ninguna regla del padre (#comments, .comment-*)
   alcanza estas clases, asi que no hace falta ningun !important. Las
   variables se definen aqui mismo (no cruzan namespaces).
   Fondo = receta de las Notas del juego: degradado, halo dorado difuso,
   cuadricula casi invisible y cantos dorados.
   ===================================================================== */

.mfc {
	--c-oro:   #d9a441;
	--c-oro2:  #8d6a24;
	--c-grad:  linear-gradient(180deg, #e9bb5e, #c08f2c);
	--c-line:  rgba(154,160,173,.20);
	--c-text:  #e7dcc2;
	--c-mut:   #9aa0ad;
	--c-campo: rgba(8,10,14,.72);

	position: relative;
	margin: 0;
	padding: 26px;
	color: var(--c-text);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	background:
		linear-gradient(rgba(217,164,65,.03) 1px, transparent 1px) 0 0 / 16px 16px,
		linear-gradient(90deg, rgba(217,164,65,.03) 1px, transparent 1px) 0 0 / 16px 16px,
		radial-gradient(ellipse 55% 220px at 15% 0%, rgba(217,164,65,.13), transparent 100%),
		radial-gradient(ellipse 50% 260px at 90% 100%, rgba(217,164,65,.07), transparent 100%),
		linear-gradient(180deg, rgba(27,32,41,.86) 0%, rgba(16,19,25,.82) 100%);
	border: 1px solid rgba(217,164,65,.10);
	border-top-color: rgba(217,164,65,.30);
	border-bottom-color: rgba(217,164,65,.30);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.28), 0 0 40px rgba(0,0,0,.22), 0 0 22px rgba(217,164,65,.05);
}
.mfc *, .mfc *::before, .mfc *::after { box-sizing: border-box; }
.mfc a { color: var(--c-oro); text-decoration: none; }
.mfc a:hover { color: #f0cd82; }

/* ---------- cabecera ---------- */
.mfc .mfc__hd { margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid var(--c-line); }
.mfc .mfc__k {
	display: block; margin-bottom: 6px;
	color: var(--c-oro); font-size: 11px; font-weight: 800;
	letter-spacing: .12em; text-transform: uppercase;
	text-shadow: 0 0 12px rgba(217,164,65,.2);
}
.mfc .mfc__h {
	display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
	margin: 0; color: #fff; font-family: inherit;
	font-size: clamp(22px, 2.6vw, 30px); line-height: 1.1; font-weight: 900;
	text-transform: uppercase; letter-spacing: -.2px;
	text-shadow: 0 3px 0 rgba(0,0,0,.38);
}
.mfc .mfc__n {
	display: inline-grid; place-items: center;
	min-width: 28px; height: 28px; padding: 0 7px;
	color: #1a1408; background: var(--c-grad); border: 1px solid #f0cd82;
	font-size: 13px; font-weight: 900; text-shadow: none; letter-spacing: 0;
}
.mfc .mfc__sub { margin: 8px 0 0; color: var(--c-mut); font-size: 14px; line-height: 1.5; }

/* ---------- sin comentarios ---------- */
.mfc .mfc__vacio {
	display: flex; flex-direction: column; gap: 4px;
	margin: 0 0 18px; padding: 16px 18px;
	border: 1px dashed rgba(217,164,65,.28);
	background: radial-gradient(ellipse 60% 120% at 0% 0%, rgba(217,164,65,.07), transparent 100%), rgba(0,0,0,.18);
}
.mfc .mfc__vacio b { color: #fff; font-size: 15px; font-weight: 800; }
.mfc .mfc__vacio span { color: var(--c-mut); font-size: 13.5px; }
.mfc .mfc__cerrado { margin: 0 0 6px; color: var(--c-mut); font-size: 13.5px; }

/* ---------- lista ---------- */
.mfc .mfc__lista,
.mfc .mfc__lista .children { list-style: none; margin: 0; padding: 0; }
.mfc .mfc__lista { margin: 0 0 20px; display: grid; gap: 12px; }
.mfc .mfc__lista .children { margin: 12px 0 0 22px; padding-left: 16px; border-left: 2px solid rgba(217,164,65,.22); display: grid; gap: 12px; }
.mfc .mfc__it { margin: 0; padding: 0; background: none; border: 0; }
.mfc .mfc__c {
	display: flex; gap: 14px;
	padding: 16px;
	border: 1px solid var(--c-line);
	background: linear-gradient(180deg, rgba(0,0,0,.20), rgba(9,12,17,.30));
}
.mfc .bypostauthor > .mfc__c { border-color: rgba(217,164,65,.35); }
.mfc .mfc__av {
	flex: 0 0 auto;
	display: grid; place-items: center;
	width: 40px; height: 40px;
	color: var(--c-oro); background: rgba(217,164,65,.10);
	border: 1px solid var(--c-oro2);
	font-size: 17px; font-weight: 900;
}
.mfc .mfc__av.is-staff { color: #1a1408; background: var(--c-grad); border-color: #f0cd82; }
.mfc .mfc__cu { flex: 1; min-width: 0; }
.mfc .mfc__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.mfc .mfc__au { color: #fff; font-size: 14.5px; font-weight: 800; }
.mfc .mfc__staff {
	padding: 3px 6px; color: #1a1408; background: var(--c-grad);
	font-size: 9.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.mfc a.mfc__fe { color: #6e7687; font-size: 12px; }
.mfc a.mfc__fe:hover { color: var(--c-oro); }
.mfc .mfc__pend { margin: 0 0 8px; color: var(--c-oro); font-size: 12.5px; font-style: italic; }
.mfc .mfc__tx { color: rgba(255,255,255,.86); font-size: 14.5px; line-height: 1.65; overflow-wrap: anywhere; }
.mfc .mfc__tx p { margin: 0 0 10px; color: inherit; font: inherit; }
.mfc .mfc__tx p:last-child { margin-bottom: 0; }
.mfc .mfc__resp { margin-top: 10px; }
.mfc .mfc__resp a {
	display: inline-block; padding: 5px 10px;
	border: 1px solid var(--c-line); color: var(--c-mut);
	font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.mfc .mfc__resp a:hover { border-color: var(--c-oro); color: var(--c-oro); }
.mfc .mfc__pag { margin: 0 0 20px; }
.mfc .mfc__pag .nav-links { display: flex; gap: 6px; }
.mfc .mfc__pag .page-numbers { padding: 6px 11px; border: 1px solid var(--c-line); color: var(--c-mut); }
.mfc .mfc__pag .page-numbers.current { color: #1a1408; background: var(--c-grad); border-color: #f0cd82; }

/* ---------- formulario ---------- */
.mfc .mfc__form { padding: 18px; border: 1px solid var(--c-line); background: rgba(0,0,0,.16); }
/* al responder, el formulario se muda dentro del comentario */
.mfc .mfc__lista .mfc__resp-caja { margin-top: 12px; padding: 16px; border: 1px solid var(--c-line); background: rgba(0,0,0,.2); }

.mfc .mfc__normas {
	margin: 0 0 20px; padding: 14px 16px;
	border: 1px solid rgba(217,164,65,.22); border-left: 3px solid var(--c-oro);
	background: radial-gradient(ellipse 60% 140% at 0% 0%, rgba(217,164,65,.08), transparent 100%), rgba(0,0,0,.2);
}
.mfc .mfc__nk {
	display: block; margin-bottom: 8px;
	color: var(--c-oro); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.mfc .mfc__normas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.mfc .mfc__normas li { margin: 0; padding: 0; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.45; background: none; }
.mfc .mfc__normas small { display: block; margin-top: 9px; color: var(--c-mut); font-size: 12px; }

.mfc .mfc__rt {
	position: relative;
	display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px;
	margin: 0 0 20px; padding-bottom: 10px;
	color: #fff; font-family: inherit;
	font-size: 22px; line-height: 1.15; font-weight: 900; text-transform: uppercase; letter-spacing: -.2px;
}
.mfc .mfc__rt::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 62px; height: 2px;
	background: linear-gradient(90deg, var(--c-oro), transparent);
}
.mfc .mfc__rt small { font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.mfc .mfc__rt small a { color: var(--c-mut); }
.mfc .mfc__rt small a:hover { color: var(--c-oro); }

.mfc .mfc__frm { margin: 0; }
.mfc .mfc__f { margin: 0 0 16px; }
.mfc .mfc__f label {
	display: block; margin-bottom: 7px;
	color: var(--c-oro); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.mfc .mfc__req { color: #f0cd82; }
.mfc .mfc__f input,
.mfc .mfc__f textarea {
	display: block; width: 100%; margin: 0;
	padding: 12px 14px;
	color: #fff; background: var(--c-campo);
	border: 1px solid var(--c-line); border-radius: 0; box-shadow: none; outline: 0;
	font: 400 14.5px/1.5 "Inter", system-ui, sans-serif;
	transition: border-color .18s, box-shadow .18s;
}
.mfc .mfc__f textarea { min-height: 170px; resize: vertical; }
.mfc .mfc__f input::placeholder,
.mfc .mfc__f textarea::placeholder { color: #5f6675; }
.mfc .mfc__f input:focus,
.mfc .mfc__f textarea:focus { border-color: var(--c-oro); box-shadow: 0 0 0 3px rgba(217,164,65,.15); }
/* nombre y correo lado a lado; la web ocupa la fila entera */
@media (min-width: 700px) {
	.mfc .mfc__frm { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
	.mfc .mfc__frm > * { grid-column: 1 / -1; }
	.mfc .mfc__frm > .mfc__f--author { grid-column: 1; }
	.mfc .mfc__frm > .mfc__f--email { grid-column: 2; }
}

.mfc .mfc__ck {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 18px; padding: 10px 12px;
	border: 1px solid var(--c-line); border-left: 3px solid var(--c-oro);
	background: rgba(0,0,0,.18);
}
.mfc .mfc__ck input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: var(--c-oro); }
.mfc .mfc__ck label { margin: 0; color: var(--c-text); font-size: 12.5px; font-weight: 600; line-height: 1.4; cursor: pointer; }

.mfc .mfc__sub-f { margin: 0; }
.mfc .mfc__enviar,
.mfc input.mfc__enviar:focus {
	display: inline-block; width: auto; margin: 0;
	padding: 13px 22px; cursor: pointer;
	color: #1a1408; background: var(--c-grad);
	border: 1px solid #f0cd82; border-radius: 0;
	font: 800 12.5px/1 "Inter", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
	box-shadow: 0 0 18px rgba(217,164,65,.18);
	transition: filter .18s, box-shadow .18s;
}
.mfc .mfc__enviar:hover { filter: brightness(1.08); box-shadow: 0 0 26px rgba(217,164,65,.32); }

@media (max-width: 600px) {
	.mfc { padding: 18px; }
	.mfc .mfc__form { padding: 14px; }
	.mfc .mfc__c { padding: 13px; gap: 11px; }
	.mfc .mfc__av { width: 34px; height: 34px; font-size: 15px; }
	.mfc .mfc__lista .children { margin-left: 8px; padding-left: 10px; }
}