/* MTG Canarias – Ficha de carta
 * Las tarjetas de cartas y de mazos NO se estilan aquí: usan bcs.css (bulk-card-search) y
 * mcm.css (Mazos). Aquí solo va la estructura de la ficha y el carrusel.
 */

.mcf-ficha {
	--mcf-tinta: #151515;
	--mcf-suave: #6d6d72;
	--mcf-linea: #ececef;
	--mcf-fondo-suave: #f5f5f7;
	--mcf-acento: #e96400;
	--mcf-gap: 20px;
	display: block;
	width: 100%;
	color: var(--mcf-tinta);
	background: #fff;
	font-size: 15px;
	line-height: 1.5;
}
.mcf-ficha *, .mcf-ficha *::before, .mcf-ficha *::after { box-sizing: border-box; }

.mcf-contenedor { width: 100%; max-width: 1820px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 1024px) { .mcf-contenedor { padding: 0 24px; } }
@media (max-width: 600px)  { .mcf-contenedor { padding: 0 16px; } }

/* ---------------------------------------------------------------- Vista previa (admin) */
.mcf-previa { padding: 8px 16px; background: #fff4e5; color: #7a4a00; font-size: 13px; text-align: center; border-bottom: 1px solid #f3d9b1; }
.mcf-previa a { color: inherit; font-weight: 700; }

/* ---------------------------------------------------------------- Cabecera */
.mcf-hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 250px; background: #151515; color: #fff; }
.mcf-hero::before {
	content: ""; position: absolute; inset: -12px;
	background: var(--mcf-hero) center 22% / cover no-repeat;
	filter: blur(2px) saturate(.9);
	transform: scale(1.05);
}
.mcf-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.6) 55%, rgba(0,0,0,.45)); }
.mcf-hero-txt { position: relative; z-index: 1; padding-top: 36px; padding-bottom: 36px; }
.mcf-ficha h1.mcf-titulo { margin: 0 0 12px !important; padding: 0 0 12px !important; color: #fff !important; font-size: 30px !important; font-weight: 700 !important; line-height: 1.2 !important; position: relative; }
.mcf-ficha h1.mcf-titulo::after { content: ""; position: absolute; left: 0; bottom: 0; width: 50px; height: 3px; background: var(--mcf-acento); border-radius: 2px; }
.mcf-hero-en { margin: 0 0 4px !important; color: rgba(255,255,255,.75) !important; font-style: italic; font-size: 15px; }
.mcf-hero-col { margin: 0 !important; color: rgba(255,255,255,.92) !important; font-size: 17px; }
@media (max-width: 600px) {
	.mcf-hero { min-height: 190px; }
	.mcf-ficha h1.mcf-titulo { font-size: 24px !important; }
}

/* ---------------------------------------------------------------- Migas */
.mcf-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 24px 0 8px; font-size: 14px; color: var(--mcf-suave); }
.mcf-migas a { color: var(--mcf-suave) !important; text-decoration: none !important; }
.mcf-migas a:hover { color: var(--mcf-acento) !important; }
.mcf-migas-sep { color: #c7c7cc; }
.mcf-avisos:empty { display: none; }

/* ---------------------------------------------------------------- Rejilla principal */
.mcf-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin: 24px 0 8px; align-items: start; }
@media (min-width: 768px) {
	.mcf-rejilla { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 36px; }
	.mcf-col-der { grid-column: 2; }
}
@media (min-width: 1280px) {
	.mcf-rejilla { grid-template-columns: minmax(280px, 350px) minmax(0, 1.9fr) minmax(260px, 1fr); gap: 48px; }
	.mcf-col-der { grid-column: auto; }
}
.mcf-col { min-width: 0; }


.mcf-imagen { max-width: 360px; margin: 0 auto; }
.mcf-imagen img { display: block; width: 100%; height: auto; aspect-ratio: 488 / 680; object-fit: cover; border-radius: 4.7% / 3.5%; box-shadow: 0 6px 22px rgba(0,0,0,.18); }

.mcf-bloque { margin: 0 0 28px; }
.mcf-ficha h2.mcf-h2 { margin: 0 0 14px !important; padding: 0 !important; color: var(--mcf-tinta) !important; font-size: 24px !important; font-weight: 600 !important; line-height: 1.25 !important; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.mcf-texto { font-size: 16px; line-height: 1.6; }
.mcf-texto p { margin: 0 0 .6em; }
.mcf-texto img.mcf-mana { display: inline !important; vertical-align: text-bottom; }
.mcf-oracle-nombre { margin: 0 0 6px !important; font-weight: 700; }
.mcf-vacio { margin: 0; color: var(--mcf-suave); font-style: italic; }

/* Pestañas Reglamento · Oracle · Atributos (el aspecto de los botones viene de mcm.css) */
.mcf-pestanas .mcf-pestanas-nav { margin-bottom: 16px; }
.mcf-panel[hidden] { display: none !important; }
.mcf-panel .mss-rulings-box { margin-top: 0; }

/* Atributos */
.mcf-attr { margin: 0; border-top: 1px solid var(--mcf-linea); }
.mcf-attr-fila { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--mcf-linea); font-size: 14px; }
.mcf-attr dt { margin: 0; color: var(--mcf-suave); font-weight: 600; }
.mcf-attr dd { margin: 0; color: var(--mcf-tinta); word-break: break-word; }

/* Ofertas (la tabla es del plugin Inventario) */
.mcf-ofertas .mci-wrapper { margin-top: 8px; }
.mcf-ofertas .mci-tabla { width: 100%; }

/* ---------------------------------------------------------------- Carruseles */
.mcf-seccion { margin: 40px 0 0; }
.mcf-seccion:last-child { margin-bottom: 56px; }
.mcf-seccion-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.mcf-seccion-cab .mcf-h2 { margin-bottom: 0 !important; text-decoration: none !important; font-size: 28px !important; }
.mcf-cuenta { display: inline-block; min-width: 26px; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--mcf-fondo-suave); color: var(--mcf-suave); font-size: 13px; font-weight: 700; vertical-align: middle; text-align: center; }
.mcf-flechas { display: flex; gap: 6px; }
.mcf-flechas[hidden] { display: none !important; }
.mcf-ficha .mcf-flecha {
	width: 36px; height: 36px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid #e3e3e6 !important; border-radius: 50% !important; background: #fff !important; color: var(--mcf-tinta) !important;
	font-size: 22px !important; line-height: 1 !important; cursor: pointer; transition: background .15s, opacity .15s;
}
.mcf-ficha .mcf-flecha:hover { background: var(--mcf-fondo-suave) !important; }
.mcf-ficha .mcf-flecha[disabled] { opacity: .35; cursor: default; }

/* El contenedor lleva la clase bcs-app para heredar el estilo de las tarjetas, pero no su rejilla. */
.mcf-ficha .bcs-app.mcf-bcs { display: block; gap: 0; font-size: 15px; }

.mcf-pista {
	--mcf-n: 2;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--mcf-n) - 1) * var(--mcf-gap)) / var(--mcf-n));
	gap: var(--mcf-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 10px 2px 18px; /* aire para el efecto de elevación y la sombra al pasar el ratón */
	scrollbar-width: none;
}
.mcf-pista::-webkit-scrollbar { display: none; }
.mcf-pista > * { scroll-snap-align: start; min-width: 0; }

.mcf-pista-cartas { --mcf-n: 2; }
@media (min-width: 560px)  { .mcf-pista-cartas { --mcf-n: 3; } }
@media (min-width: 768px)  { .mcf-pista-cartas { --mcf-n: 4; } }
@media (min-width: 1025px) { .mcf-pista-cartas { --mcf-n: 6; } }

.mcf-pista-mazos { --mcf-n: 1.15; }
@media (min-width: 560px)  { .mcf-pista-mazos { --mcf-n: 2; } }
@media (min-width: 1025px) { .mcf-pista-mazos { --mcf-n: 4; } }

.mcf-edicion { font-size: 12px; color: #8a8a90; letter-spacing: .02em; }
.mcf-copias { font-weight: 700; color: var(--mcf-tinta); }

@media (prefers-reduced-motion: reduce) {
	.mcf-pista { scroll-behavior: auto; }
}