/* =====================================================================
   megafire — paginas de listas con estructura propia
   ---------------------------------------------------------------------
   .mfr__podio / .mfr__lista -> "Lo mas visto": podio + clasificacion.
   .mfr__tabla               -> "Apps modificadas": tabla de versiones.
   Reutiliza la cabecera/ruta de catalogo.css y la bajada de blog.css.
   ===================================================================== */
.mfr { padding-top: 26px; }
.mfr :is(h1, h2, h3, h4, h5, p) { font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.mfr :is(h1, h2, h3, h4, h5) { color: #fff; }
.mfr ol { list-style: none; margin: 0; padding: 0; }

/* chapa (formato o plataforma) */
.mfr__chapa {
	display: inline-block; padding: 3px 7px;
	border: 1px solid rgba(255,255,255,.14); background: #2b3a52; color: #fff;
	font-size: 9.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2;
}
.mfr__chapa--azul { background: #1f5f9f; } .mfr__chapa--naranja { background: #f57f2a; color: #1a1408; }
.mfr__chapa--rojo { background: #8b0000; } .mfr__chapa--verde { background: #2f8a55; }
.mfr__chapa--morado { background: #6d44b0; } .mfr__chapa--oro { background: #d9a441; color: #1a1408; }

/* ---------- podio: 2 · 1 · 3, el primero mas alto ---------- */
.mfr__podio {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: end;
	margin: 6px 0 34px;
}
.mfr__p--1 { order: 2; } .mfr__p--2 { order: 1; } .mfr__p--3 { order: 3; }
.mfr__p a {
	position: relative; display: block;
	border: 1px solid var(--line); background: var(--surface);
	transition: transform .2s, border-color .2s;
}
.mfr__p a:hover { transform: translateY(-4px); border-color: var(--oro); }
.mfr__p--1 a { border-color: var(--oro2); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 18px 40px rgba(0,0,0,.35), 0 0 26px rgba(217,164,65,.14); }
.mfr__pim { display: block; aspect-ratio: 16/10; overflow: hidden; background: #0e1117; }
.mfr__p--1 .mfr__pim { aspect-ratio: 16/11; }
.mfr__pim img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mfr__pn {
	position: absolute; top: -18px; left: 16px; z-index: 2;
	padding: 4px 12px;
	color: #1a1408; background: var(--grad); border: 1px solid #f0cd82;
	font-size: 22px; font-weight: 900; line-height: 1; box-shadow: 3px 3px 0 #0e1117;
}
.mfr__p--2 .mfr__pn, .mfr__p--3 .mfr__pn { background: #2a303c; color: var(--text); border-color: var(--line); }
.mfr__pbd { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.mfr__pbd .mfr__chapa { align-self: flex-start; }
.mfr__pbd b { color: #fff; font-size: 17px; line-height: 1.25; font-weight: 800; }
.mfr__p--1 .mfr__pbd b { font-size: 20px; }
.mfr__pbd em { font-style: normal; color: var(--oro); font-size: 13px; font-weight: 800; }

/* ---------- clasificacion en filas ---------- */
.mfr__lista { display: grid; gap: 6px; }
.mfr__fila {
	display: grid; grid-template-columns: 54px 78px minmax(0, 1fr) 200px; gap: 14px; align-items: center;
	padding: 8px 14px 8px 8px;
	border: 1px solid var(--line); background: rgba(27,32,41,.55);
	transition: border-color .16s, background .16s;
}
.mfr__fila:hover { border-color: var(--oro); background: var(--surface); }
.mfr__n { color: #6e7687; font-size: 20px; font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; }
.mfr__fila:hover .mfr__n { color: var(--oro); }
.mfr__im { display: block; width: 78px; height: 50px; overflow: hidden; background: #0e1117; border: 1px solid var(--line); }
.mfr__im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mfr__tx { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mfr__tx b { color: var(--text); font-size: 14.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mfr__fila:hover .mfr__tx b { color: #fff; }
.mfr__meta { display: flex; align-items: center; gap: 8px; color: #6e7687; font-size: 12px; font-weight: 700; }
/* visitas + barra relativa al primero */
.mfr__v { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.mfr__v em { font-style: normal; color: var(--oro); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mfr__v i { position: relative; display: block; width: 100%; height: 4px; background: #0b0e13; }
.mfr__v i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--grad); }

/* ---------- tabla de versiones ---------- */
.mfr__tabla { border: 1px solid var(--line); border-left: 4px solid var(--oro); background: rgba(27,32,41,.55); }
.mfr__th, .mfr__tr {
	display: grid; grid-template-columns: minmax(0, 1fr) 150px 110px 140px 70px; gap: 14px; align-items: center;
	padding: 10px 16px;
}
.mfr__th {
	border-bottom: 1px solid var(--line); background: #10141a;
	color: var(--oro); font-size: 10.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
}
.mfr__tr { border-bottom: 1px solid rgba(47,55,70,.6); color: var(--muted); font-size: 13px; transition: background .16s; }
.mfr__tr:last-child { border-bottom: 0; }
.mfr__tr:hover { background: var(--surf2); }
.mfr__tn { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mfr__tn > span:last-child { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.mfr__tn b { color: var(--text); font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mfr__tr:hover .mfr__tn b { color: #fff; }
.mfr__ir { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; color: var(--oro); font-weight: 800; font-size: 12px; }
.mfr__ir svg { width: 14px; height: 14px; }

@media (max-width: 860px) {
	.mfr__podio { grid-template-columns: 1fr; gap: 28px; }
	.mfr__p--1, .mfr__p--2, .mfr__p--3 { order: 0; }
	.mfr__fila { grid-template-columns: 38px 64px minmax(0, 1fr); }
	.mfr__im { width: 64px; height: 42px; }
	.mfr__v { grid-column: 3; align-items: flex-start; }
	.mfr__v i { width: 100%; }
	.mfr__th { display: none; }
	.mfr__tr { grid-template-columns: 1fr 1fr 1fr; row-gap: 8px; }
	.mfr__tn { grid-column: 1 / -1; }
	.mfr__tr > span[data-et]::before { content: attr(data-et) ": "; color: #6e7687; font-size: 11px; }
	.mfr__ir { display: none; }
}